/* Cases and Records page proposal (28 Oct 2026). Loaded after site.css, hero.css and nav.css. The player, the window
   pieces and the section scaffolding come from the Monitoring proposal's mon.css (from the Screening proposal's scr.css);
   s1–s4 are this page's four moments, evw, rvw and rcx/exw its supporting sections. */

/* ---------- the stage player ---------- */
.st{position:relative;display:flex;flex-direction:column;border-radius:var(--r-frame)}
.hero .hx-head + .panel.st{margin-top:56px}
.st-rail{order:1;display:flex;gap:8px;padding:20px 24px 0}
.st-stage{order:2;position:relative;padding:14px 24px 0}
.st-bar{order:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 28px 20px}
.st-step{all:unset;box-sizing:border-box;position:relative;flex:1;min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px 16px 16px;border-radius:8px;cursor:pointer;color:var(--ink-2)}
.st-step .n{width:28px;height:28px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--page)}
.st-step b{font-weight:500;font-size:15.5px;line-height:22px;color:var(--ink-2)}
.st-step small{display:none}
.st-step .pr{position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:1px;background:transparent;overflow:hidden}
.st-step .pr::after{content:'';display:block;height:100%;width:var(--p,0%);background:var(--ink)}
.st-step[aria-selected="true"]{background:var(--page);box-shadow:0 1px 0 var(--hair),0 10px 28px -22px rgb(16 41 58 / .45)}
.st-step[aria-selected="true"] .n{background:var(--ink);border-color:var(--ink);color:#fff}
.st-step[aria-selected="true"] b{color:var(--ink)}
.st-step[aria-selected="true"] .pr{background:var(--rule)}
.st-step:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.st-step:hover b{color:var(--ink)}
.st-cap{margin:0;font-size:16px;line-height:24px;color:var(--ink);max-width:860px}
.st-cap b{font-weight:600;margin-right:4px}
.st-ctl{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-sample{font-size:12px;line-height:16px;color:var(--ink-2);white-space:nowrap}
.st .pz{position:static}
.rm .st .st-ctl .st-pz,.still .st .st-ctl .st-pz{display:inline-flex} /* the page's inline rule hides every .pz in these modes; Next must stay */
.st-ctl .st-replay[hidden]{display:none}
.st svg.ic{display:inline-block;width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st.paused .st-step .pr::after{opacity:.35}

.sc-canvas{position:relative;height:580px}
.st-v{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.st-v.on{opacity:1;visibility:visible;transition:opacity .35s ease}
.st-v [data-show]:not(.shown){visibility:hidden} /* space is kept, so nothing shifts as results appear */
.st-v .gone{display:none!important}
.st-v .off{visibility:hidden!important}
.st-v .shown{animation:st-in .35s ease}
.st.paused .st-v .shown,.st.settled .st-v .shown{animation:none}
@keyframes st-in{from{opacity:0;transform:translateY(4px)}}
.st-v .press{box-shadow:inset 0 0 0 2px var(--link)!important;background:#e3edf3!important}
.st-v .st-btn.pri.press{background:#2f5568!important}

.st-cur{position:absolute;left:0;top:0;z-index:6;width:22px;height:22px;pointer-events:none;opacity:0;transform:translate(70%,60%);transition:transform .55s cubic-bezier(.45,.05,.25,1),opacity .25s ease}
.st-cur.on{opacity:1}
.st-cur svg{width:22px;height:22px;fill:#142530;stroke:#fff;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgb(16 41 58 / .35))}
.st-cur::after{content:'';position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;border:2px solid var(--link);opacity:0}
.st-cur.click::after{animation:st-ring .45s ease-out}
.st-cur.click svg{animation:st-tap .25s ease}
@keyframes st-ring{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
@keyframes st-tap{50%{transform:scale(.86)}}
.paused .st-cur{opacity:0}
.ty{display:inline-grid}.ty > span{grid-area:1/1}.ty .ghost{visibility:hidden}
.typing > [data-type]::after{content:'';display:inline-block;width:1px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--ink);animation:st-blink 1s steps(1) infinite}
@keyframes st-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .st-v,.st-v.on{transition:none} .st-step .pr{display:none} }

/* ---------- window pieces (the homepage and Investigations proposals' composed-window language) ---------- */
.sc-pan{position:absolute;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--edge);border-radius:10px;overflow:hidden;box-shadow:0 26px 50px -30px rgb(16 41 58 / .55);color:var(--ink)}
.sc-bar{flex:none;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;background:#eef4f7;border-bottom:1px solid var(--rule);font-size:12.5px;line-height:16px;white-space:nowrap;overflow:hidden}
.sc-bar b{font-weight:600}
.sc-meta{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.sc-bar .st-btn{margin-left:auto;height:24px;font-size:11.5px}
.sc-body{padding:12px 14px;min-height:0}
.sc-pan svg.ic{display:inline-block;width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-av{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;border-radius:50%;background:#dbe6ed;font-style:normal;font-size:9.5px;font-weight:600;color:#25485e;vertical-align:-5px}
.iv-l{margin:10px 0 4px;font-weight:600;font-size:10.5px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.iv-l:first-child{margin-top:0}
.st-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--edge);border-radius:4px;background:#fbfdfe;font:inherit;font-size:12.5px;color:var(--ink);white-space:nowrap}
.st-btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
button.st-btn{cursor:pointer}
button.st-btn:hover{border-color:var(--ink)}
button.st-btn.pri:hover{background:#2f5568}
.st-lk{display:inline-flex;align-items:center;gap:3px;color:var(--link)}
.st-lk .ic{width:12px!important;height:12px!important}
.sg-tb{all:unset;display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--link);cursor:pointer;white-space:nowrap}
.sg-tb .ic{width:12px!important;height:12px!important}
.sg-tb:focus-visible{outline:2px solid var(--link);outline-offset:2px}
mark{background:#fbe9a8;color:inherit;padding:0 1px}

.fx{display:flex;flex-direction:column;gap:3px;margin-bottom:9px;font-size:13px;line-height:18px}
.fx > span{font-size:11px;color:var(--ink-2)}
.fx > b{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:32px;padding:6px 9px;border:1px solid var(--edge);border-radius:4px;background:#fbfdfe;font-weight:500}
.fx .ph{font-style:normal;font-weight:400;color:#8797a2}
.fx .dd{width:13px!important;height:13px!important;color:var(--ink-2)}
.fx2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}

.rs-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--rule)}
.rs-h b{display:block;font-weight:600;font-size:15px;line-height:20px}
.rs-h small{display:block;font-size:12px;color:var(--ink-2)}
.ld-dl,.rc-dl,.cv-dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0;margin:0;font-size:12.5px;line-height:18px}
.ld-dl > div,.rc-dl > div,.cv-dl > div{display:contents}
.ld-dl dt,.ld-dl dd,.rc-dl dt,.rc-dl dd,.cv-dl dt,.cv-dl dd{margin:0;padding:5px 0;border-top:1px solid var(--rule)}
.ld-dl dt,.rc-dl dt,.cv-dl dt{color:var(--ink-2)}

.sls{display:grid;grid-template-columns:110px minmax(0,1fr);margin:0;font:400 13px/20px Georgia,'Times New Roman',serif;color:#28333a}
.sl{display:contents}
.sl dt,.sl dd{margin:0;padding:5px 6px;border-top:1px solid #ece7d8;transition:background .3s}

/* ---------- supporting sections ---------- */
.lx{padding-top:var(--sec)}
.lx-txt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 32px;align-items:end;margin-bottom:40px}
.lx-txt .t-label{margin-bottom:12px}
.lx-p{justify-self:end;max-width:440px}
.lx-p .t-body + .t-body{margin-top:12px}
.lx-vis{position:relative}
.lx-tag{display:block;margin:0 0 10px;font-size:12px;color:var(--ink-2);text-align:right}
.dark .lx-tag{color:var(--navy-ink-2)}
.lx-app{position:relative;border-radius:var(--r-frame);box-shadow:0 34px 70px -40px rgb(16 41 58 / .55)}
.lx-app button{font-family:inherit}
.lx-app .st-btn{font-size:13px}
.lx-app button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.lx-col{padding:16px 18px;border-right:1px solid var(--rule);min-width:0}
.lx-rd{padding:18px 22px;min-width:0}
.lx-pane{display:none}
.lx-pane.on{display:block;animation:st-in .3s ease}
.lx-band{margin-top:var(--sec);padding:var(--sec) 0}
.lx-band.lx{padding-top:var(--sec)}
.lx-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--link);font-weight:500;text-decoration:none}
.lx-link .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.lx-link:hover{text-decoration:underline;text-underline-offset:3px}
.lx-ci2{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;margin:0 0 6px;padding:7px 10px;border:1px solid var(--rule);border-radius:5px;font-size:12.5px}
.lx-ci2 .k{font-size:11px;color:var(--ink-2)}



/* questions */
.fq-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}
.fq-wrap .t-label{margin-bottom:12px}
.fq{border-top:1px solid var(--rule)}
.fq:last-child{border-bottom:1px solid var(--rule)}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none;font-weight:500;font-size:19px;line-height:26px}
.fq summary::-webkit-details-marker{display:none}
.fq summary .ic{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink-2);stroke-width:1.8;transition:transform .2s}
.fq[open] summary .ic{transform:rotate(180deg)}
.fq summary:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.fq-a{padding:0 0 20px;max-width:640px}
.fq-a p{margin:0;font-size:16px;line-height:24px;color:var(--ink-2)}
.fq-a .lx-link{margin-top:10px}

/* continue the work */
.nx-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.nx-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:24px 26px;border:1px solid var(--rule);border-radius:var(--r-frame);text-decoration:none;color:var(--ink);transition:border-color .15s}
.nx-card:hover{border-color:var(--edge)}
.nx-card b{display:block;font-weight:500;font-size:21px;line-height:28px}
.nx-card small{display:block;margin-top:2px;font-size:15px;line-height:22px;color:var(--ink-2)}
.nx-card > .ic{width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.8}

/* ---------- this page: the rail carries each moment's date ---------- */
.st-step{grid-template-columns:28px minmax(0,1fr);gap:0 14px}
.st-step .n{grid-row:1/3}
.st-step time{grid-column:2;font-size:12.5px;line-height:17px;color:var(--ink-2)}
@media (min-width:901px){ .st-cap{min-height:72px} }
@media (min-width:901px) and (max-width:1180px){ .st-cap{min-height:72px} }
.hx-h1{grid-column:1/9}
.hx-eye{margin-bottom:18px;color:var(--link)}
@media (max-width:1199px){ .hx-h1{grid-column:auto;grid-row:auto} }

/* ---------- shared pieces of this page's windows ---------- */
.nt{margin-top:8px;padding:9px 11px;background:#fffdf6;border:1px solid #ecdcae;border-radius:5px;font-size:12.5px;line-height:18px}
.nt .by{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:4px;font-size:11px;line-height:15px;color:var(--ink-2)}
.nt p{margin:0}
.dlg-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.sc-av.tm{background:#dbe6ed;color:#25485e}
.sc-av.pr{background:#efe3d2;color:#6b4a1d}
.who{display:inline-flex;align-items:center;margin-left:auto;padding-left:12px;font-size:12px;color:var(--ink)}
.who .sc-av{margin-right:6px;vertical-align:0}
.who b{font-weight:600}
.who time{margin-left:8px;padding:1px 7px;border-radius:9px;background:#fff;border:1px solid var(--rule);font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sc-bar .sc-meta{min-width:0}
.at{margin:0;font-size:13px;line-height:19px}
.aq{margin:0;padding-left:18px;font-size:13px;line-height:19px}
.aq li + li{margin-top:2px}
.hlq{padding:0 2px;border-radius:2px;transition:background .4s}
.has-hlq .hlq,.hlq.on{background:#fbe9a8}
.ci{all:unset;display:inline-block;padding:0 2px;font-family:var(--sans);border-radius:3px;font-weight:600;font-size:12px;color:var(--link);cursor:pointer;font-variant-numeric:tabular-nums}
.ci:hover,.ci.active{background:#e3edf3}
.ci:focus-visible{outline:2px solid var(--link);outline-offset:1px}
.rd-m{margin:0 0 8px;font-size:11.5px;line-height:16px;color:var(--ink-2)}
.rd-h{margin:0 0 6px;font-weight:600;font-size:14px;line-height:20px}
.rd-fine{margin:8px 0 0;font-size:11.5px;line-height:16px;color:var(--ink-2)}
.rd-src{margin:8px 0 0;font-size:12px;color:var(--link)}
.okm{display:flex;align-items:flex-start;gap:6px;margin:0 0 8px;padding:6px 9px;border-radius:5px;background:#eef6f0;font-size:12px;line-height:17px;color:#245b35}
.okm .ic{margin-top:1px}
.slot{display:grid}
.slot > *{grid-area:1/1;min-width:0}
.st-v .rdx:not(.open){display:none}

/* evidence rows, activity, Case details */
.cs-d{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0 0 10px;font-size:12px;color:var(--ink-2)}
.cs-d b{font-weight:500;color:var(--ink)}
.cs-o{margin-left:auto;padding:0 8px;border:1px solid #ecd59f;border-radius:9px;background:#fdf8ec;font-size:11.5px;line-height:18px;color:#6b4a00}
.evl{border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.ev{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:10px;align-items:start;padding:6px 10px;border-top:1px solid var(--rule);font-size:12.5px;line-height:17px}
.ev:first-child{border-top:0}
.ev-k{font-size:11px;line-height:17px;color:var(--ink-2)}
.ev-t{min-width:0}
.ev-t b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-t small{display:block;font-size:11px;line-height:15px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-tag{align-self:center;padding:1px 7px;border:1px solid #c3d4df;border-radius:9px;background:#eef4f7;font-size:10.5px;line-height:16px;color:var(--link);white-space:nowrap}
.ev.new{background:#f6fbf7;box-shadow:inset 3px 0 0 #3f7d52}
.ev.new .ev-t small{white-space:normal}
.ev.new{grid-template-columns:78px minmax(0,1fr)}
.ev.new .ev-tag{grid-column:2;justify-self:start;margin-top:2px}
.ev-more{margin:0;padding:5px 10px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--ink-2)}
.ac{display:grid;grid-template-columns:142px minmax(0,auto) minmax(0,1fr);gap:10px;margin:0;padding:4px 0;border-top:1px solid var(--rule);font-size:11.5px;line-height:16px}
.ac time{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac b{font-weight:500}
.ac span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac.new{background:#f6fbf7}
.rvo{display:flex;align-items:center;gap:6px;margin:10px 0 0;padding-top:8px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--ink-2)}
.rvo b{font-weight:600;color:var(--ink)}

/* document pages in the readers */
.pg{position:relative;padding:14px 16px 12px;border:1px solid #ddd8c8;border-radius:3px;background:#fffefa;box-shadow:0 1px 0 #ece7d8;font:400 12px/17px Georgia,'Times New Roman',serif;color:#28333a}
.smp{position:absolute;top:8px;right:8px;padding:0 6px;border:1px solid #d9c9a3;border-radius:3px;font:600 9.5px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#8a6a2a;background:#fffaf0}
.pg-k{margin:0;padding-right:70px;font:600 10px/14px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#6b6450}
.pg-h{margin:4px 0 0;font-weight:700;font-size:14.5px;line-height:19px}
.pg-s{margin:2px 0 8px;font-style:italic;color:#4f5a61}
.pg-t{width:100%;border-collapse:collapse}
.pg-t td{padding:4px 4px;border-top:1px solid #ece7d8;vertical-align:top}
.pg-t td:first-child{width:16px;color:#6b6450}
.pg-t td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pg-t .l5 td{transition:background .4s}
.has-l5 .pg-t .l5 td,.pg.sm .pg-t .l5 td,.cx-p{background:#fbe9a8}
.pg-f{display:flex;justify-content:space-between;gap:10px;margin:8px 0 0;font:400 10px/14px var(--sans);color:#7b7563}
.pg-p{margin:6px 0 0}
.pg.art .pg-h{font-size:15px;line-height:20px}
.pass{transition:background .4s}

/* ---------- 1 pick up the work ---------- */
.s1 .s1-case{top:0;left:0;width:48.5%}
.s1 .s1-asm{top:24px;right:0;width:50%}
.s1 .s1-src{position:absolute;top:150px;left:2.5%;width:47%;z-index:3}
.s1-src .sc-pan{position:relative;box-shadow:0 34px 70px -30px rgb(16 41 58 / .6)}
.s1-src .pg{margin-bottom:2px}

/* ---------- 2 add the missing evidence ---------- */
.s2 .s2-add{top:0;left:0;width:39%}
.s2 .s2-rd{top:30px;right:0;width:59%;z-index:2}
.sw{display:inline-flex;margin:0 0 10px;border:1px solid var(--rule);border-radius:5px;overflow:hidden;font-size:12px}
.sw span{padding:5px 10px}
.sw .on{background:var(--ink);color:#fff}
.dz-t{margin:0 0 8px;font-size:12px;line-height:17px;color:var(--ink-2)}
.dz{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px dashed var(--edge);border-radius:6px;background:#f8fafb}
.dz .ic{width:22px!important;height:22px!important;color:var(--link)}
.dz b{display:block;font-weight:500;font-size:12.5px}
.dz small{display:block;font-size:11px;color:var(--ink-2)}
.qf{margin-top:10px;padding:10px 10px 2px;border:1px solid var(--rule);border-radius:6px}
.qf-r{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:12px}
.qf-r b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-r span{color:var(--ink-2);white-space:nowrap}
.qf-s{margin-left:auto;padding:0 7px;border-radius:9px;background:#eef4f7;font-size:11px;line-height:18px}
.qf-sd{margin:0 0 6px;font-size:11px;color:var(--ink-2)}
.qf-c{font-size:12px;color:var(--ink-2)}
.s2-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px}
.s2-notes .iv-l{margin-top:0}
.n-empty .st-btn{margin-top:6px}
.nf .ta,.rsp .ta{display:block;min-height:76px;font-weight:400;line-height:18px}
.nf-pg{max-width:80px}
.nf .st-btn{margin-top:2px}

/* ---------- 3 review the assessment ---------- */
.s3 .s3-asm{top:0;left:0;width:57%}
.s3 .s3-pr{top:96px;right:0;width:41%;z-index:2}
.cslot{margin:6px 0 2px}
.cx{padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:#f8fafb;font-size:12px;line-height:17px}
.cx-h{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.cx-h b{font-weight:600}
.cx-h span{margin-left:auto;font-size:11px;color:var(--ink-2);white-space:nowrap}
.cx-p{display:flex;gap:8px;margin:0;padding:4px 6px;border-radius:3px;font:400 12px/17px Georgia,'Times New Roman',serif}
.cx-p span{color:#6b6450}
.cx-p b{margin-left:auto;font-weight:400;white-space:nowrap}
.cx-n{display:flex;align-items:flex-start;gap:0;margin:6px 0 0;color:var(--ink)}
.rq{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.rq-f .fx2{margin-bottom:4px}
.rq-w{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;margin:0;font-size:12px}
.rq-w b{font-weight:600}
.rq-w span{color:var(--ink-2)}
.rq-r .nt{margin-top:0}
.rr{padding:10px 12px;border:1px solid var(--rule);border-radius:6px}
.rr-c{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0;font-size:12.5px}
.rr-c b{font-weight:600}
.rr-c span{color:var(--link)}
.rr-m{margin:3px 0 0;font-size:11.5px;color:var(--ink-2)}
.rr-s{display:flex;align-items:center;justify-content:space-between;margin:8px 0 0}
.rr-st{padding:0 8px;border:1px solid #ecd59f;border-radius:9px;background:#fdf8ec;font-size:11.5px;line-height:18px;color:#6b4a00}
.has-done3 .rr-st{border-color:#bcd5c3;background:#e6f0e9;color:#245b35}
.rsp{margin-top:10px}
.rb{display:flex;gap:14px;margin:0 0 8px;font-size:12.5px}
.rbo{display:inline-flex;align-items:center;gap:6px}
.rdo{display:inline-block;width:13px;height:13px;border:1.5px solid var(--edge);border-radius:50%;background:#fff}
.has-rvd [data-k="rvd"] .rdo{border:4px solid var(--ink)}

/* ---------- 4 save a Record ---------- */
.s4 .s4-dlg{top:0;left:17%;width:62%;z-index:3}
.s4 .s4-case{top:0;left:0;width:45%}
.s4 .s4-rec{top:20px;right:0;width:53%;z-index:2}
.rcl{border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.rc{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:6px 10px;border-top:1px solid var(--rule);font-size:12.5px;line-height:17px}
.rc:first-child{border-top:0}
.incl{display:flex;align-items:center;gap:5px;margin-top:3px;font-style:normal;font-size:11.5px;color:#245b35}
.rhx{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:6px 10px;border:1px solid var(--rule);border-radius:6px;font-size:12px}
.rhx b{font-weight:600}
.rhx span{color:var(--ink-2)}
.rhx .lt{padding:0 7px;border-radius:9px;background:#eef4f7;color:var(--link);font-size:11px;line-height:17px}
.rh{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--rule)}
.rh-s{margin:0;font-weight:600;font-size:15px;line-height:20px}
.rh-c{margin:1px 0 0;font-size:11.5px;color:var(--ink-2)}
.rts{display:flex;gap:4px;margin:0 0 10px}
.rt{all:unset;box-sizing:border-box;padding:4px 10px;border:1px solid var(--rule);border-radius:4px;font-size:12px;cursor:pointer;color:var(--ink)}
.rt:hover{border-color:var(--edge)}
.rt.active,.rt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.rt:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.rtslot{display:grid}
.rtslot > .rtp{grid-area:1/1;min-width:0}
.st-v .rtp.rdx:not(.open){display:block;visibility:hidden}
.rp-by{margin:-2px 0 6px;font-size:11.5px;color:var(--ink-2)}
.rtp .nt{margin-top:8px}
.re{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;margin:0;padding:5px 0;border-top:1px solid var(--rule);font-size:12.5px;line-height:17px}
.re b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-dd{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:11.5px;color:#245b35}
.exb{margin-left:10px}
.exm{position:absolute;top:44px;right:10px;z-index:5;display:flex;flex-direction:column;min-width:240px;padding:6px;background:#fff;border:1px solid var(--edge);border-radius:6px;box-shadow:0 18px 36px -18px rgb(16 41 58 / .55)}
.exm .iv-l{margin:2px 6px 4px}
.exm span{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:12.5px}
.exm span:first-of-type{background:#eef4f7}

/* ---------- evidence section: the Case's evidence beside the selected item and its notes ---------- */
.evw-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.evw-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.evw-n{font-size:12.5px;color:var(--ink-2)}
.evw-add{margin:10px 0 0;padding:10px 12px;border:1px solid var(--rule);border-radius:6px;background:#f8fafb;font-size:12.5px;line-height:18px}
.evw-add p{margin:0}
.evw-add p + p{margin-top:8px}
.evw-add b{display:block;font-weight:600}
.evw-add[hidden]{display:none}
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px}
.fchip{all:unset;box-sizing:border-box;padding:3px 10px;border:1px solid var(--rule);border-radius:13px;font-size:12px;line-height:18px;cursor:pointer}
.fchip:hover{border-color:var(--edge)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip:focus-visible,.evb:focus-visible,.rvb:focus-visible,.pk:focus-visible,.evw-ab:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.evw-g{margin-top:14px}
.evw-g[hidden],.evb[hidden]{display:none}
.evb{all:unset;box-sizing:border-box;display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;cursor:pointer;color:var(--ink);font-size:13px;line-height:18px}
.evb:hover{border-color:var(--edge)}
.evb.on{border-color:var(--link);background:#f3f7fa;box-shadow:inset 3px 0 0 var(--link)}
.evb .ev-t b{white-space:normal}
.evb .ev-t small{white-space:normal}
.evw-r .pg,.evw-r .nt,.evw-r .shot{max-width:600px}
.shot{position:relative;max-width:520px;border:1px solid var(--edge);border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 10px 24px -18px rgb(16 41 58 / .6)}
.shot-b{display:flex;align-items:center;gap:5px;margin:0;padding:7px 10px;background:#eceff2;border-bottom:1px solid #d6dbe0;font-size:11px;color:#5d6570}
.shot-b i{width:8px;height:8px;border-radius:50%;background:#c9cfd6}
.shot-b span{margin-left:8px}
.shot-c{padding:14px 16px 12px}
.shot-k{margin:0;font-weight:600;font-size:12px;color:#5d6570}
.shot-t{margin:6px 0 0;font-size:14px;line-height:21px}
.shot-f{margin:10px 0 0;font-size:11.5px;color:#5d6570}
.shot .smp{top:36px}

/* ---------- review band: revisions, the selected one, and the evidence a citation opens ---------- */
.rvw-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr)}
.rvb{all:unset;box-sizing:border-box;display:block;width:100%;margin-top:6px;padding:9px 11px;border:1px solid var(--rule);border-radius:6px;cursor:pointer;color:var(--ink)}
.rvb b{display:block;font-weight:600;font-size:13.5px;line-height:19px}
.rvb small{display:block;font-size:12px;line-height:17px;color:var(--ink-2)}
.rvb:hover{border-color:var(--edge)}
.rvb.on{border-color:var(--link);background:#f3f7fa;box-shadow:inset 3px 0 0 var(--link)}
.rvs{display:inline-block;margin-top:6px;padding:0 8px;border-radius:9px;font-size:11.5px;line-height:18px}
.rvs.ok{border:1px solid #bcd5c3;background:#e6f0e9;color:#245b35}
.rvs.no{border:1px solid var(--rule);background:#f3f5f7;color:var(--ink-2)}
.rvw-fine{margin-top:14px}
.rvw-m .at,.rvw-m .aq{font-size:14px;line-height:21px}
.rvw-m .ci{font-size:13px}
.rv-box{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule)}
.rv-box .nt{margin-top:0;font-size:13.5px;line-height:20px}
.rv-early{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;font-size:12.5px;line-height:18px;color:#6b4a00}
.rv-early .ic{margin-top:1px}
.nr{margin-top:0}
.rvw-c{padding:18px 20px;border-left:1px solid var(--rule);background:#f8fafb;min-width:0}
.cv{display:none}
.cv.on{display:block;animation:st-in .3s ease}
.cv .nt{margin-top:10px}

/* ---------- records section: the working Case beside Record 1, then the exports ---------- */
.rcx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.rcx-l{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:600;font-size:13px;color:var(--ink)}
.rcx-l::before{content:'';width:10px;height:10px;border-radius:50%;background:#3f7d52}
.rcx-col:last-child .rcx-l::before{background:var(--ink)}
.rcx .lx-app{position:relative}
.rcx .rtp{display:block;visibility:hidden}
.rcx .rtp.on{visibility:visible;animation:none}
.exw{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:28px;align-items:start;margin-top:56px}
.exw-p{margin:10px 0 0;font-size:15px;line-height:22px;color:var(--ink-2)}
.pdf{position:relative;padding:22px 24px 14px;border:1px solid var(--rule);border-radius:4px;background:#fff;box-shadow:0 24px 50px -32px rgb(16 41 58 / .55);font-size:12px;line-height:17px}
.pdf-k{margin:0;font-weight:600;font-size:10px;letter-spacing:.12em;color:var(--link)}
.pdf-h{margin:8px 0 0;font-weight:600;font-size:17px;line-height:22px}
.pdf-c{margin:1px 0 0;color:var(--ink-2)}
.pdf-m{margin:8px 0 0;color:var(--ink-2)}
.pdf-a{margin:10px 0 0;padding:8px 10px;border-radius:4px;background:#f3f6f8}
.pdf-l{margin:12px 0 0;font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.pdf-t{margin:3px 0 0}
.pdf-f{display:flex;justify-content:space-between;margin:16px 0 0;padding-top:8px;border-top:1px solid var(--rule);font-size:9.5px;letter-spacing:.1em;color:var(--ink-2)}
.pkl{display:flex;flex-direction:column;gap:2px}
.pk{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:12.5px;line-height:17px;cursor:pointer;color:var(--ink);overflow-wrap:anywhere}
.pk:hover{background:#f5f8fa}
.pk.on{background:#eef4f7;box-shadow:inset 3px 0 0 var(--link)}
.pk .ic{color:var(--link)}
.pkx{margin-top:10px;padding:10px 12px;border-radius:6px;background:#f5f8fa;min-height:56px}
.pkd{margin:0;font-size:13px;line-height:19px}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){
  .sc-canvas{height:640px}
  .st-bar{flex-wrap:wrap}
  .st-cap{flex:1 1 440px}
  .st-step b{font-size:14.5px;line-height:20px}
  .who b{display:none}
  .exw{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .exw-t{grid-column:1/-1}
  .rvw-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .rvw-c{grid-column:1/-1;border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:1024px){
  .lx-txt{grid-template-columns:minmax(0,1fr)}
  .lx-p{justify-self:start}
  .fq-wrap{grid-template-columns:minmax(0,1fr);gap:16px}
  .rcx{grid-template-columns:minmax(0,1fr)}
}

/* phones and small tablets: every moment in one grid cell, so the stage keeps its tallest moment's height and the page
   does not jump between moments; windows stack in reading order, and a reader opens over the window it replaces */
@media (max-width:900px){
  .st-rail{padding:14px 12px 0;gap:4px}
  .st-bar{order:2;flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px 0}
  .st-stage{order:3;padding:12px 10px 16px}
  .st-cap{flex:none;min-height:96px;font-size:15px;line-height:22px}
  .st-cap b{display:block}
  .st-step{grid-template-columns:minmax(0,1fr);justify-items:center;padding:10px 4px 12px;text-align:center}
  .st-step b,.st-step time{display:none}
  .st-step .n{grid-row:auto}
  .st-step .pr{left:8px;right:8px}
  .sc-canvas{height:auto;display:grid;grid-template-columns:minmax(0,1fr)}
  .st-v{grid-area:1/1;position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;min-width:0}
  .st-v .sc-pan,.s1 .s1-src{position:relative;top:auto;left:auto;right:auto;width:auto!important;box-shadow:0 18px 36px -26px rgb(16 41 58 / .5)}
  .s1 .s1-asm{grid-row:1}
  .s1 .s1-case,.s1 .s1-src{grid-row:2;grid-column:1}
  .s1 .s1-src{box-shadow:none}
  .s1 .ac:nth-of-type(1){display:none}
  .st-v .rdx:not(.open){display:block;visibility:hidden}
  .st-v .exm.rdx:not(.open){display:none}
  .s2-grid{grid-template-columns:minmax(0,1fr)}
  .s4 .s4-dlg{display:none}
  .s4 .s4-rec{grid-row:2}
  .s3 .s3-pr{grid-row:2}
  .who b{display:inline}
  .sc-bar{flex-wrap:nowrap}
  .sc-bar .sc-meta{display:none}
  .ac{grid-template-columns:minmax(0,1fr) auto}
  .ac time{grid-column:1/-1}
  .evw-grid,.rvw-grid{grid-template-columns:minmax(0,1fr)}
  .lx-col{border-right:0;border-bottom:1px solid var(--rule)}
  .lx-tag{text-align:left}
  .nx-cards{grid-template-columns:minmax(0,1fr)}
  .exw{grid-template-columns:minmax(0,1fr)}
  .rvw-l{display:flex;gap:6px;overflow-x:auto}
  .rvw-l .iv-l,.rvw-fine{display:none}
  .rvb{flex:0 0 190px;margin-top:0}
  .evw-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px}
  .evw-g{display:none}
  .evb{flex:0 0 220px;margin-top:0;grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (max-width:600px){
  .st-cap{min-height:132px}
  .st-sample{white-space:normal}
  .rc-dl{grid-template-columns:100px minmax(0,1fr)}
  .nx-card{padding:20px}
  .ev{grid-template-columns:minmax(0,1fr) auto}
  .ev.new{grid-template-columns:minmax(0,1fr)}
  .ev.new .ev-tag{grid-column:1}
  .ev .ev-k{grid-column:1/-1;line-height:14px}
  .rc,.re{grid-template-columns:minmax(0,1fr)}
  .rc .ev-k,.re .ev-k{line-height:14px}
  .who time{display:none}
  .pg{padding:12px}
  .rcx .sc-body{padding:12px}
}
@media (max-width:360px){ .top .right .btn{display:none} .st-cap{min-height:178px} }

/* short desktop screens (1280 x 720): steps, window and caption fit together; the caption carries the date, and the
   controls sit beside it */
@media (min-width:1181px) and (max-height:780px){
  .st-rail{padding-top:12px}
  .st-step{padding:9px 14px 12px}
  .st-step time{display:none}
  .st-step b{white-space:nowrap}
  .st-step .pr{bottom:4px}
  .sc-canvas{height:540px}
  .st{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"rail rail rail" "stage stage stage" "cap pz rp" "cap smp smp";align-items:center}
  .st-rail{grid-area:rail}
  .st-bar,.st-ctl{display:contents}
  .st-pz{grid-area:pz;justify-self:end;align-self:end;margin:10px 8px 0 16px}
  .st-replay{grid-area:rp;justify-self:start;align-self:end;margin:10px 24px 0 0}
  .st-stage{grid-area:stage;padding-top:10px}
  .st-cap{grid-area:cap;padding:10px 0 14px 28px;min-height:0;max-width:none;box-sizing:border-box}
  .st-sample{grid-area:smp;justify-self:end;align-self:start;padding:6px 24px 14px 16px}
  .s1 .s1-src{top:118px}
  .s3 .sc-body,.s4 .s4-case .sc-body{padding:9px 12px}
  .s3 .okm{margin-bottom:5px}
  .s4 .s4-case .ac:last-of-type{display:none}
}
@media (min-width:901px) and (max-width:1000px){ .sc-canvas{height:700px} }

/* phones: shorter moments and sections (Ramp's pages run 1.0 to 1.3 times their desktop height on phones) */
.rcx-sw{display:none}
@media (max-width:900px){
  .ph-x{display:none!important}
  .rcx-sw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
  .rcx[data-on="rec"] .rcx-col:first-child,.rcx[data-on="case"] .rcx-col:last-child{display:none}
  .rcx-l{display:none}
}
.ph-only{display:none}
@media (max-width:900px){
  .ph-only{display:block}
  .s1 .s1-src,.s1 .s1-case{align-self:start}
  .s2 .rd-m,.s4 .rh{display:none}
}
@media (max-width:900px){
  .exw-sw{margin:14px 0 0}
  .exw[data-on="pdf"] .exw-pkg,.exw[data-on="pkg"] .exw-pdf{display:none}
  .exw{gap:16px;margin-top:40px}
}
/* the Case after Record 1 lists fewer items where the stage is narrow or short, and says how many more */
.mx-cmp{display:none}
@media (max-width:1180px),(max-height:780px){ .s4 .cmp-x,.s4 .mx-full{display:none} .s4 .mx-cmp{display:inline} }
@media (max-width:900px){ .cmp-x,.mx-full{display:none} .mx-cmp{display:inline} }

/* Keep the analyst name readable in the narrow-phone review scene. */
@media (max-width:360px){
  .s3 .sc-bar{flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
  .s3 .sc-bar .who{flex-basis:100%;margin-left:0;padding-left:0}
}

/* Citation provenance gets its own readable line on phones. */
@media (max-width:600px){
  .cx-h{display:grid;grid-template-columns:15px minmax(0,1fr);gap:4px 6px}
  .cx-h span{grid-column:2;white-space:normal;margin-left:0}
}