/* The working screen as a stage (matter-workspace.js + workspace-frame.js). The owner's prototype look — a big
   stage first, three numbered key moments over it, a camera rail, a big clock over one timeline, calm — with the
   working screen's completeness: the index of everything in the matter always on the left, the details of what is
   open always on the right. Nothing opens or closes on a toggle, nothing appears on hover, nothing slides over the
   picture.

   Colour (the identity guide, brand/vizion-labs-identity-dark-v1.0.pdf, and the prototype): monochrome. Graphite
   #1D1D1F ink on light, porcelain #F5F5F7 ink on dark, one grey for secondary words; there is no accent hue — what is
   on, current or a link is said by contrast, weight, a ring or an underline. The only colours are the evidence's own:
   the detector boxes (red possible firearm, yellow handcuffs, green people, blue vehicles) and the picture itself,
   which sits on black in both themes. Documents sit on paper-white in both themes.

   Type: one family, the Apple system face (SF Pro Text, Display optics from 20px), with the self-hosted Inter as the
   fallback off Apple devices. No monospace, no serif, no all-caps labels. Hierarchy from size, weight and space:
   30 clock / 24 stage title / 20 document title / 15 lead text / 14 body / 13 secondary / 12 caption; weights 400 /
   500 / 600 only; numbers and times tabular. Contrast: every text colour is at least 4.5:1 on the ground it sits on
   (checked in tests/matter-workspace-browser.mjs). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-variable-latin.woff2") format("woff2")}
.ws{--bg:#131315;--pane:#1D1D1F;--card:#1D1D1F;--ink:#F5F5F7;--soft:#A1A1A6;--rule:#2C2C2E;--raised:#3A3A3C;
  --sel:rgba(245,245,247,.10);--hover:rgba(245,245,247,.05);--fill:rgba(245,245,247,.08);--fill-2:rgba(245,245,247,.14);--near:rgba(245,245,247,.08);
  /* "on" and links: the ink itself (monochrome). --accent is kept as the name the clip tools and page text read. */
  --accent:var(--ink);--on-ink:#1D1D1F;--shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 .5px rgba(255,255,255,.06);
  /* the picture's ground and its own bar: black and near-black in both themes */
  --video:#000;--bar:#0E0E10;--bar-ink:#F5F5F7;--bar-soft:#A1A1A6;--bar-fill:rgba(255,255,255,.10);--bar-fill-2:rgba(255,255,255,.18);
  --paper:#FFFFFF;--paper-ink:#1D1D1F;--paper-soft:#5E5E63;--paper-rule:#E3E3E8;--psel:rgba(29,29,31,.22);--mark:#D2D2D7;--pmark:rgba(29,29,31,.16);--ok:var(--ink);--no:var(--ink);
  --ui:"Inter",sans-serif;
  --ui-d:"Inter",sans-serif;
  --sans:var(--ui);--mono:var(--ui);--serif:var(--ui);--qface:var(--ui);--sface:var(--ui);
  --t-clock:30px;--t-stage:24px;--t-title:20px;--t-lead:15px;--t-body:15px;--t-sec:13px;--t-cap:13px;--lh-list:1.4;--gut:16px;--cpad:24px;
  color:var(--ink);background:var(--bg);font:400 var(--t-body)/1.5 var(--ui);letter-spacing:0;
  font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);overflow:hidden;text-align:left}
:root[data-theme="light"] .ws{--bg:#F5F5F7;--pane:#FFFFFF;--card:#FFFFFF;--ink:#1D1D1F;--soft:#636368;--rule:#D2D2D7;--raised:#FFFFFF;
  --sel:rgba(29,29,31,.07);--hover:rgba(29,29,31,.04);--fill:rgba(29,29,31,.06);--fill-2:rgba(29,29,31,.10);--near:rgba(29,29,31,.06);
  --on-ink:#FFFFFF;--shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.08)}
body.work-mode{padding:0;background:#131315;overflow:hidden}
:root[data-theme="light"] body.work-mode{background:#F5F5F7}
body:not(.work-mode) #matterWork{display:none!important}
body.work-mode .wrap{max-width:none;margin:0}
body.work-mode .wrap>header,body.work-mode .portal-intro,body.work-mode footer,body.work-mode #account,body.work-mode #uploadPanel,body.work-mode #workspaceBar,
body.work-mode #matterAccount,body.work-mode #matterReview,body.work-mode #matterCommand,body.work-mode #matterQuick,body.work-mode #recap,body.work-mode #playerbox,body.work-mode #viewer{display:none!important}
.ws *{box-sizing:border-box}
.ws [hidden]{display:none!important}
/* The button reset sits at one class of weight (:where adds none), so every control rule below it wins. */
.ws :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;margin:0;text-align:inherit}
.ws button:disabled{cursor:default;opacity:.4}
.ws b,.ws strong,.ws :where(h1,h2,h3){font-weight:500}
.ws :focus-visible{outline:2px solid var(--ink);outline-offset:2px;transition:outline-offset .12s}
.ws-sbar :focus-visible,.ws-stage :focus-visible{outline-color:var(--bar-ink)}
.ws button:focus:not(:focus-visible){outline:none}
/* A text field shows exactly one ring: a box-shadow in the ink, never the outline as well. */
.ws input:focus,.ws input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink)}
.ws input::placeholder{color:var(--soft);opacity:1}
.ws :where(h1,h2,h3,p,ol,ul,li){margin:0;padding:0}
.ws :where(ol,ul){list-style:none}
.ws-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Numbers and times: the same face, tabular. */
.ws-rm,.ws-rn,.ws-cmeta,.ws-time,.ws-dur,.ws-endt,.ws-now,.ws-cam,.ws-ct,.ws-pagein,.ws-cite,.ws-ri,.ws-covl,.ws-synl,.ws-file small,.ws-box>span,.ws-bottom,.ws-ix,.ws-tbtn,.ws-keym,.ws-keyn,.ws-line{font-variant-numeric:tabular-nums}
/* Links: the ink, underlined (monochrome: the underline says "link"). */
.ws-link,.ws-clear{color:var(--ink)!important;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--soft);text-underline-offset:3px}
.ws-link:hover,.ws-link:focus-visible,.ws-clear:hover,.ws-clear:focus-visible,.ws-file:hover span,.ws-file:focus-visible span{text-decoration-color:currentColor}
.ws-fine{color:var(--soft);font-size:var(--t-sec);line-height:1.45;letter-spacing:0}
.ws-soft{color:var(--soft)}
/* Section headers: sentence case, a size step down, semibold grey. */
.ws-sh,.ws-rgh,.ws-ih,.ws-dlsec h3{font-size:var(--t-sec);font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--soft)}
/* ---------------------------------------------------------------- top bar */
.ws-top{display:flex;align-items:center;gap:16px;min-height:56px;padding:0 var(--gut);border-bottom:1px solid var(--rule);background:var(--bg);min-width:0}
.ws-topl{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto}
.ws-back{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 10px 0 4px!important;border-radius:8px;color:var(--soft)!important;white-space:nowrap;flex:none;font-size:var(--t-sec);font-weight:400;letter-spacing:0}
.ws-back:hover{color:var(--ink)!important;background-color:var(--fill)!important}
.ws-brand{display:flex;align-items:center;gap:8px;flex:none;color:var(--ink)}
.ws-brand b{font-size:20px;font-weight:400;line-height:1.3;letter-spacing:-.012em;white-space:nowrap}
.ws-brand{min-width:140px}
/* "Vizion Labs / <matter>": the matter's name in full is the stage's title. */
.ws-crumb{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:15px;line-height:1.3;letter-spacing:-.005em}
.ws-slash{color:var(--soft);flex:none}
.ws-crumbn{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ws-search{position:relative;flex:1 1 200px;max-width:420px;min-width:160px;margin-left:auto}
.ws-sicon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--soft);display:flex;pointer-events:none}
.ws-search input{width:100%;height:34px;padding:0 12px 0 32px;font:inherit;font-size:14px;letter-spacing:-.003em;color:var(--ink);background:var(--fill);border:0;border-radius:8px;outline:none}
.ws-tools{display:flex;align-items:center;gap:4px;flex:none}
.ws-act{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px!important;border-radius:8px;background-color:transparent!important;color:var(--ink)!important;font-size:var(--t-sec);font-weight:500;letter-spacing:0;white-space:nowrap}
.ws-act:hover{background-color:var(--fill)!important}
.ws-theme{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--soft)!important}
.ws-theme:hover{color:var(--ink)!important;background-color:var(--fill)!important}
/* ------------------------------------------------------------------ panes */
.ws-body{display:grid;grid-template-columns:clamp(232px,17%,264px) minmax(0,1fr) clamp(300px,23%,344px);min-height:0}
.ws-pane{min-height:0;min-width:0;overflow:auto}
.ws-left{border-right:1px solid var(--rule);background:var(--pane)}
.ws-centre{background:var(--bg);container-type:inline-size;container-name:stage}
.ws-right{border-left:1px solid var(--rule);background:var(--pane);display:flex;flex-direction:column;overflow:hidden}
.ws-bottom{display:flex;align-items:baseline;gap:16px;padding:6px var(--gut);border-top:1px solid var(--rule);background:var(--bg);font-size:var(--t-cap);line-height:1.45;letter-spacing:0;color:var(--soft);min-width:0}
.ws-bottom .ws-link{font-weight:500}
.ws-bl{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px}
.ws-blt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-blw{flex:none;font-size:var(--t-cap)}
.ws-br{flex:none;text-align:right;white-space:nowrap}
@media (max-width:1199px){.ws-br{flex:0 1 auto;white-space:normal;max-width:40%}}
.ws-tabbar{display:none}
/* The full case name and number have their own persistent row. Controls never
   compete with the identity for width, and long titles wrap instead of clipping. */
.ws.has-case-identity{grid-template-rows:auto auto minmax(0,1fr) auto}
.ws.has-case-identity[data-page="review"]{grid-template-rows:auto auto auto minmax(0,1fr) auto}
.ws.has-case-identity[data-page="overview"]{grid-template-rows:auto minmax(0,1fr)}
.ws.has-case-identity[data-page="discover"]{grid-template-rows:auto auto minmax(0,1fr)}
.ws .ws-case-identity{position:sticky;top:0;z-index:60;align-self:start;min-width:0;margin:0;padding:12px var(--gut);background:var(--bg);color:var(--ink);border-bottom:1px solid var(--rule);font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.015em;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.ws.has-case-identity .ws-top{top:var(--ws-identity-h,0px)}
/* The legacy stage already repeats the case heading above its player. Keep its
   semantic heading without spending the same desktop space twice. */
@media(min-width:761px){.ws.has-case-identity:not(.is-rc5) .ws-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:760px){.ws .ws-case-identity{padding:12px 18px;font-size:15px;line-height:1.45}}
/* --------------------------------------------------- the index (left pane) */
.ws-menu{padding:0 0 32px}
/* The index: one row per section with its count, always at the top of the pane (it never scrolls away). */
.ws-index{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:2px;padding:12px 8px 12px;background:var(--pane);border-bottom:1px solid var(--rule)}
.ws-ix{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:32px;padding:6px 8px;border-radius:8px;color:var(--ink)!important;text-decoration:none;font-size:var(--t-body);font-weight:500;letter-spacing:-.003em;line-height:1.4;transition:background .12s}
.ws-ix:hover,.ws-ix:focus-visible{background:var(--fill)}
.ws-ixn{color:var(--soft);font-weight:400}
.ws-sec{padding:20px 0 0}
.ws-sh{padding:0 var(--gut) 6px;scroll-margin-top:180px}
.ws-sh:focus{outline:none}
.ws-note{padding:0 var(--gut) 8px;color:var(--soft);font-size:var(--t-sec);line-height:1.45;letter-spacing:0}
/* A row is inset 8px from the pane edges so its selection tint has room to breathe; the selected row is the tint
   with a 2px ink bar at its left (monochrome: position and contrast, never a hue). */
.ws-row{display:flex;align-items:flex-start;gap:10px;width:calc(100% - 16px);margin:0 8px!important;padding:8px!important;min-height:40px;border-radius:8px;transition:background .12s}
.ws-row:hover{background-color:var(--hover)!important}
.ws-row.is-selected{background-color:var(--sel)!important;box-shadow:inset 2px 0 0 var(--ink)}
.ws-ri{flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--soft)}
.ws-ri.is-n{font-size:var(--t-cap);font-weight:500;line-height:20px;letter-spacing:0;background:var(--fill);border-radius:50%;color:var(--soft)}
.ws-row.is-selected .ws-ri{color:var(--ink)}
.ws-rb{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ws-rl{font-size:var(--t-body);font-weight:400;line-height:var(--lh-list);color:var(--ink);overflow-wrap:anywhere}
/* The source's own words: the same face, told apart by weight and their quotation marks. */
.ws-q{font-family:var(--qface);font-weight:500;color:var(--ink)}
.ws-spk,.ws-also{color:var(--soft);font-size:var(--t-sec);font-weight:400;letter-spacing:0}
.ws-rm,.ws-rn{font-size:var(--t-sec);font-weight:400;line-height:1.4;letter-spacing:0;color:var(--soft);overflow-wrap:anywhere}
.ws-rv{flex:none;font-size:var(--t-sec);letter-spacing:0;color:var(--ink);margin-top:1px}
.ws-rv.is-no{color:var(--soft)}
.ws-thumb{flex:none;width:64px;height:36px;border-radius:3px;background:var(--video);overflow:hidden;display:block;margin-top:1px}
.ws-thumbv{position:fixed;left:-9999px;top:0;width:96px;height:54px;opacity:0;pointer-events:none}
.ws-thumb.is-audio{display:grid;place-items:center;color:var(--soft);background:var(--fill)}
.ws-thumb canvas,.ws-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.ws-row mark,.ws-sheet mark,.ws-hit mark{background:var(--mark);color:#1D1D1F;border-radius:2px;padding:0 1px}
/* search results, in place of the sections */
.ws-results{padding:0 0 12px}
.ws-rhead{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:12px;padding:12px var(--gut) 8px;background:var(--pane)}
.ws-rtitle{font-size:14px;font-weight:600;line-height:1.4;flex:1;min-width:0;overflow-wrap:anywhere}
.ws-rtitle:focus{outline:none}
.ws-clear{font-size:var(--t-sec);font-weight:500;letter-spacing:0;white-space:nowrap}
.ws-rnote{padding:4px var(--gut);font-size:var(--t-sec);letter-spacing:0;color:var(--soft);line-height:1.45}
.ws-rgroup{padding:24px 0 0}
.ws-rgh{padding:0 var(--gut) 6px}
/* ------------------------------------------------------ the stage (centre) */
.ws-cempty{padding:24px var(--cpad);color:var(--soft)}
/* The stage's head: the matter's name, one plain line, and the three moments to check first. */
.ws-hero{padding:20px var(--cpad) 16px;min-width:0}
.ws-name{font-family:var(--ui-d);font-size:var(--t-stage);font-weight:600;line-height:1.2;letter-spacing:-.018em;color:var(--ink);overflow-wrap:anywhere}
.ws-line{margin-top:6px!important;font-size:var(--t-lead);line-height:1.45;letter-spacing:-.003em;color:var(--soft)}
.ws-lineb{font-size:var(--t-sec)}
.ws-lineb::before{content:"· "}
.ws-line .ws-cite{margin-left:4px;vertical-align:1px}
.ws-keysh{margin-top:18px!important;font-size:var(--t-sec);font-weight:600;color:var(--soft);letter-spacing:0}
.ws-keysrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px}
.ws-keysrow .ws-keysh{margin-top:0!important}
.ws-keysall{font-size:var(--t-sec)}
.ws-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:8px!important}
.ws-linesrc{color:var(--soft)!important;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;font:inherit}
.ws-linesrc:hover{color:var(--ink)!important}
.ws-keysnote{margin-top:16px;color:var(--soft);font-size:var(--t-sec)}
/* A key moment and its Clip, joined: the chip (number, frame, where it is from, its words, who they name) and a narrow
   Clip strip on its right edge — always there. */
.ws-keyi{position:relative;min-width:0;display:flex;flex-direction:column;border-radius:12px;background:var(--card);box-shadow:var(--shadow)}
.ws-key{flex:1;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:10px;min-width:0;min-height:64px;padding:10px 12px 10px 8px!important;border-radius:12px;background:transparent!important;text-align:left;transition:box-shadow .12s}
.ws-key .ws-keyn,.ws-key .ws-keyf{margin-top:2px}
.ws-keyi .ws-keyclip{position:absolute;right:6px;bottom:6px;min-height:26px;display:inline-flex!important;align-items:center;gap:4px;padding:0 8px!important;border:0!important;border-radius:999px!important;background-color:var(--fill)!important;font-size:var(--t-cap)!important}
.ws-keyi:has(.ws-keyclip) .ws-key{padding-bottom:36px!important}
.ws-keyi .ws-keyclip:hover{background-color:var(--fill)!important}
/* A narrower stage keeps the words: the frame gives way first. */
.ws-keyf{display:none!important}
.ws-key:hover{background-color:var(--hover)!important}
.ws-keyi:has(.ws-key.is-on){box-shadow:0 0 0 2px var(--ink)}
.ws-keyn{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-ink);font-size:var(--t-cap);font-weight:600;line-height:1}
.ws-keyn.is-no{background:var(--fill-2);color:var(--ink)}
.ws-keyf{width:64px;height:36px;border-radius:6px;overflow:hidden;background:var(--video);display:grid;place-items:center;color:var(--soft)}
.ws-keyf.is-doc{background:var(--fill)}
.ws-keyf canvas{width:100%;height:100%;display:block}
.ws-keyt{display:flex;flex-direction:column;gap:2px;min-width:0}
/* where it is from first ("Question from the Case Report, p. 2"), then its words (up to three lines), then who they name */
.ws-keym{font-size:var(--t-cap);font-weight:500;line-height:1.35;color:var(--soft);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ws-keyl{font-size:var(--t-sec);font-weight:500;line-height:1.38;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.ws-keyw{font-size:var(--t-cap);line-height:1.35;color:var(--soft);overflow-wrap:anywhere}
.ws-rec,.ws-doc,.ws-dl{padding:0 var(--cpad) 24px;display:flex;flex-direction:column;min-height:0}
.ws-doc,.ws-dl{gap:12px}
.ws-chead{display:flex;align-items:baseline;gap:4px 16px;flex-wrap:wrap;min-width:0}
.ws-ctitle{font-family:var(--ui-d);font-size:var(--t-title);font-weight:600;line-height:1.25;letter-spacing:-.012em;min-width:0;overflow-wrap:anywhere}
.ws-ctitle:focus{outline:none}
.ws-cmeta{font-size:var(--t-sec);font-weight:400;line-height:1.45;letter-spacing:0;color:var(--soft)}
.ws-pnav{display:inline-flex;gap:8px;margin-left:auto}
.ws-pageno{display:inline-flex;align-items:center;gap:8px}
.ws-pagein{width:4.2em;height:32px;padding:0 6px;font:inherit;font-size:var(--t-sec);letter-spacing:0;color:var(--ink);background:var(--fill);border:0;border-radius:6px;text-align:center}
.ws-pagein:disabled{opacity:.6}
/* The stage: the picture flush to the pane's edges, square (never a rounded, floating card), on black, as tall as the
   first screen allows; under it, on the same dark ground, its own bar. */
.ws-stagebox{margin-inline:calc(-1 * var(--cpad));background:var(--video)}
.ws-stage{position:relative;background:var(--video);border-radius:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  /* As tall as its width allows (16:9), but never pushing the clock and the timeline off the first screen: the page
     height less the top bar, the bottom line, the stage's head (measured) and the rows under the picture. */
  height:min(56.25cqw,calc(100vh - var(--ws-top-h,57px) - var(--ws-bot-h,30px) - var(--ws-hero-h,170px) - 140px - var(--ws-bar-h,56px)));
  height:min(56.25cqw,calc(100dvh - var(--ws-top-h,57px) - var(--ws-bot-h,30px) - var(--ws-hero-h,170px) - 140px - var(--ws-bar-h,56px)));min-height:240px}
.ws-stage video{display:block;width:100%;height:100%;object-fit:contain;background:var(--video)}
.ws-snote{position:absolute;left:12px;bottom:12px;color:#C9C9CE;font-size:var(--t-sec);letter-spacing:0}
.ws-bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;padding:12px 20px!important;border-radius:999px;background:rgba(245,245,247,.94)!important;color:#1D1D1F!important;font-size:14px;font-weight:600;z-index:6}
.ws-ov{position:absolute;z-index:2;pointer-events:none}
/* Boxes you can see: thick strokes with a dark keyline, labels outside the box (above it; below when the box is at the top). */
.ws-box{position:absolute;border:3px solid var(--c);border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.45)}
.ws-box.is-gun{--c:#FF453A}
.ws-box.is-cuffs{--c:#FFD60A}
.ws-box.is-force{--c:#FF9F0A}
.ws-box.is-person{--c:#32D74B;border-width:2px}
.ws-box.is-vehicle{--c:#0A84FF;border-width:2px}
/* On-image labels: the one size outside the scale. */
.ws-box>span{position:absolute;left:-3px;bottom:100%;margin-bottom:4px;font:600 12.5px/1.3 var(--ui);letter-spacing:0;color:#fff;background:rgba(0,0,0,.86);border-left:3px solid var(--c);padding:2px 8px;border-radius:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ws-box.is-top>span{bottom:auto;top:100%;margin:4px 0 0}
.ws-box.is-person>span,.ws-box.is-vehicle>span{font-weight:500;font-size:12px;padding:1px 6px}
.ws .pl-band{background:rgba(0,0,0,.72);color:#F5F5F7;font-family:var(--ui);border-radius:8px}
.ws .pl-band b,.ws .pl-line b{font-weight:600}
/* The stage's bar: a labelled toolbar on the picture's dark ground — Boxes (each class its own on/off), Captions and
   Sound on the left; Search what was said, Clip ±10 s and Save moment on the right. It wraps; it never scrolls. */
.ws-sbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;min-height:56px;padding:8px 12px 8px var(--cpad);background:var(--bar);color:var(--bar-ink)}
.ws-tlabel{display:inline-flex;align-items:center;gap:5px;padding-right:2px;color:var(--bar-soft);font-size:var(--t-sec);font-weight:500;white-space:nowrap}
.ws-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.ws .ws-tool{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px!important;border:0!important;border-radius:999px;background-color:var(--bar-fill-2)!important;color:var(--bar-ink)!important;font-size:var(--t-sec);font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap;transition:background .12s}
.ws .ws-tool:hover:not(:disabled){background-color:rgba(255,255,255,.26)!important}
.ws .ws-tool.is-clip{background-color:var(--bar-ink)!important;color:#1D1D1F!important}
.ws .ws-tool.is-clip:hover:not(:disabled){background-color:#FFFFFF!important}
.ws-tip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:6px 12px 8px var(--cpad);background:var(--bar);color:var(--bar-soft);font-size:var(--t-cap);line-height:1.4}
.ws .ws-tipx{flex:none;min-height:28px;padding:0 10px!important;border-radius:999px;background-color:var(--bar-fill)!important;color:var(--bar-ink)!important;font-size:var(--t-cap);font-weight:500}
/* Every recording, grouped, as tiles that wrap (never a sideways scroller): a frame, the name, the reviewer's role, the
   length and what was run on it. The open one carries a ring and the selection tint. */
.ws-recs{padding:24px 0 0}
.ws-recsh{font-size:var(--t-lead);font-weight:600;line-height:1.3;color:var(--ink)}
.ws-recs>.ws-fine{margin-top:2px}
.ws-camrow{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.ws-camgh{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;font-size:var(--t-sec);font-weight:600;color:var(--soft)}
.ws-camgc{font-weight:400}
.ws-camgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:6px}
.ws-cam{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:8px;min-width:0;min-height:52px;padding:5px 8px 5px 5px!important;border-radius:10px;background-color:var(--card)!important;box-shadow:var(--shadow);color:var(--ink)!important;font-size:var(--t-sec);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;transition:background .12s,box-shadow .12s}
.ws-cam:hover{background-color:var(--hover)!important}
.ws-cam.is-on{background-color:var(--sel)!important;box-shadow:0 0 0 2px var(--ink);font-weight:600}
.ws-camf{width:56px;height:32px;border-radius:6px;overflow:hidden;background:#000;display:grid;place-items:center;color:#A1A1A6;flex:none}
.ws-camf.is-audio{background:var(--fill-2);color:var(--soft)}
.ws-camf canvas{width:100%;height:100%;display:block}
.ws-camt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ws-caml{font-size:var(--t-sec);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-camr{font-size:var(--t-cap);font-weight:400;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-camm{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:var(--t-cap);font-weight:400;color:var(--soft);font-variant-numeric:tabular-nums}
.ws-badge{white-space:nowrap}
.ws-camtop{display:flex;align-items:baseline;gap:6px;min-width:0}
.ws-camtop .ws-caml{flex:1 1 auto;min-width:0}
.ws-camlen{flex:none;font-size:var(--t-cap);font-weight:400;color:var(--soft);font-variant-numeric:tabular-nums}
.ws-camm{column-gap:6px}
.ws-camm{row-gap:0}
.ws-badge.is-yes{color:var(--ink)}
.ws-legend{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:6px;flex:0 1 auto;min-width:0}
.ws-leg,.ws-sound{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px!important;border:0!important;border-radius:999px;background-color:var(--bar-fill)!important;color:var(--bar-ink)!important;font-size:var(--t-sec);font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap}
.ws-leg:hover,.ws-sound:hover{background-color:var(--bar-fill-2)!important}
.ws-leg.is-none .ws-sw{opacity:.35}
.ws-sw{width:12px;height:12px;border-radius:3px;border:2px solid var(--c);background:var(--c);display:inline-block;box-sizing:border-box}
.ws-leg.is-off .ws-sw{background:transparent}
.ws-leg.is-cc svg{flex:none}
.ws-leg.is-person{--c:#32D74B}.ws-leg.is-vehicle{--c:#0A84FF}.ws-leg.is-lead{--c:#FF453A}.ws-leg.is-lead.is-cuffs{--c:#FFD60A}
.ws-leg.is-off,.ws-leg.is-cc:not(.is-on){background-color:transparent!important;color:var(--bar-soft)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ws-leg.is-off .ws-sw{opacity:.4}
/* Sound on is the one bright pill while the picture plays muted; Mute is quiet. */
.ws-sound svg{flex:none}
.ws-boxnote{margin:0;padding:0 12px 10px var(--cpad);background:var(--bar);font-size:var(--t-cap);line-height:1.4;letter-spacing:0;color:var(--bar-soft)}
.ws-boxnote:empty{display:none}
/* "Show unchecked guesses": a plain pill (no swatch); on, it reads as pressed. Unchecked guesses draw dashed. */
.ws-leg.is-guess[aria-pressed="true"]{background-color:var(--bar-fill-2)!important}
.ws-box.is-gun.is-guess{border-style:dashed;border-width:2px}
.ws-box.is-gun.is-guess>span{font-weight:500}
.ws-leg.is-none{color:var(--bar-soft)!important}
.ws-lnote{font-size:var(--t-cap);letter-spacing:0;color:var(--soft);min-width:0}
/* The big clock (this recording's own time), what is at the playhead, and the marks for it. */
.ws-nowrow{display:flex;align-items:center;gap:20px;min-height:64px;padding:12px 0 4px;min-width:0}
.ws-clock{display:flex;align-items:center;gap:10px;flex:none}
.ws-time{font-family:var(--ui-d);font-size:var(--t-clock);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink);min-width:3.1em}
.ws-clocksub{display:flex;flex-direction:column;gap:1px;line-height:1.3}
.ws-rectitle{font-size:var(--t-sec);font-weight:600;letter-spacing:0;color:var(--ink);white-space:nowrap;max-width:14em;overflow:hidden;text-overflow:ellipsis}
.ws-dur{font-size:var(--t-sec);color:var(--soft);white-space:nowrap}
.ws-now{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ws-nowl{font-size:var(--t-lead);font-weight:500;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-nowl:empty{display:none}
.ws-nowm{font-size:var(--t-sec);line-height:1.35;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-nowact{display:flex;align-items:center;gap:8px;flex:none}
.ws-nowact.is-idle>*{visibility:hidden}
.ws-nowmark,.ws-clipnow,.ws-clipq{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px!important;border:0!important;border-radius:999px;background-color:var(--fill)!important;color:var(--ink)!important;font-size:var(--t-sec);font-weight:500;letter-spacing:0;white-space:nowrap}
.ws-nowmark:hover,.ws-clipnow:hover,.ws-clipq:hover:not(:disabled){background-color:var(--fill-2)!important}
.ws-nowmark.is-done{background-color:var(--ink)!important;color:var(--on-ink)!important}
.ws-nowmark[aria-disabled="true"]{opacity:.5}
/* The one timeline of this recording: a dot per moment over the line, a tick where speech is, the playhead. */
.ws-transport{display:flex;align-items:center;gap:8px;min-width:0;padding-top:4px}
.ws-tbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;min-width:32px;padding:0 10px!important;border:0!important;border-radius:8px;background-color:var(--fill)!important;font-size:var(--t-sec);font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap;color:var(--ink)!important}
.ws-tbtn:hover:not(:disabled){background-color:var(--fill-2)!important}
.ws-play,.ws-step{width:36px;height:36px;min-width:36px;padding:0!important;border-radius:50%}
.ws-play{background-color:var(--ink)!important;color:var(--on-ink)!important}
.ws-play:hover{background-color:var(--ink)!important;opacity:.88}
.ws-tl{position:relative;flex:1;min-width:120px;height:36px}
.ws-dots{position:absolute;left:0;right:0;top:0;height:14px}
.ws-dot{position:absolute;top:2px;width:10px!important;height:10px!important;margin-left:-5px!important;border-radius:50%;background:var(--soft)!important;border:2px solid var(--bg)!important;box-sizing:content-box}
.ws-dot.is-on{background:var(--ink)!important;width:12px!important;height:12px!important;margin-left:-6px!important;top:1px}
.ws-track{position:absolute;left:0;right:0;top:20px;height:6px;border-radius:3px;background:var(--fill-2)}
.ws-speech{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:3px}
.ws-speech i{position:absolute;top:0;bottom:0;background:var(--soft);opacity:.55}
.ws-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);opacity:.35;pointer-events:none;border-radius:3px 0 0 3px}
.ws-head{position:absolute;top:16px;left:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.ws-range{position:absolute;left:0;right:0;top:11px;width:100%;height:24px;margin:0;opacity:0;cursor:pointer}
.ws-range:focus-visible{opacity:.001}
.ws-tl:has(.ws-range:focus-visible) .ws-track{outline:2px solid var(--ink);outline-offset:3px}
/* Where tracking did not look (a run cut short): a hatched band over the line from where it stopped to the end, labelled
   "Not examined after 13:30", under the playhead and the dots (pointer-events none: the line still seeks through it). The
   label drops its time, then itself, as the band narrows; the status line under the timeline keeps the words. */
.ws-gaps{position:absolute;left:0;right:0;top:15px;height:16px;pointer-events:none}
.ws-gap{position:absolute;top:0;bottom:0;box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden;font-style:normal;container-type:inline-size}
.ws-gap::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--soft) 0 1px,transparent 1px 6px);opacity:.45}
.ws-gapl{position:absolute;left:6px;top:50%;transform:translateY(-50%);padding:0 4px;background:var(--bg);color:var(--soft);font-size:12px;font-weight:500;line-height:14px;letter-spacing:0;white-space:nowrap}
/* the tail's label sits at the recording's end, where the playhead seldom is; a late start's at the line's start */
.ws-gap.is-after .ws-gapl{left:auto;right:6px}
@container (width < 168px){.ws-gapt{display:none}}
@container (width < 84px){.ws-gapl{display:none}}
.ws-tail{font-size:var(--t-cap);font-weight:500;color:var(--soft);font-variant-numeric:tabular-nums}
.ws-tail:empty{display:none}
/* On a phone the status line takes its own row under 00:00 … end, so it reads in one or two lines, not a narrow column. */
@media (max-width:760px){.ws-ends:has(.ws-tail:not(:empty)){flex-wrap:wrap}.ws-ends:has(.ws-tail:not(:empty)) .ws-endm{order:3;flex-basis:100%}}
.ws-clippair{display:flex;gap:6px;flex:none;margin-left:6px}
.ws-clippair .ws-clipq:disabled{opacity:.45}
.ws-fromhere.is-on{background-color:var(--ink)!important;color:var(--on-ink)!important}
.ws-ends{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:2px 44px 0 88px;font-size:var(--t-cap);line-height:1.4;color:var(--soft);min-width:0}
.ws-endt{flex:none}
.ws-endm{display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px;min-width:0;text-align:center}
.ws-endm .ws-cmeta{font-size:var(--t-cap)}
.ws-clipslot{min-width:0}
/* a document page: the doc views keep the working screen's reader */
.ws-dq{font-size:var(--t-body);line-height:1.5;padding:10px 12px;border-radius:8px;background:var(--sel)}
/* a document page as text: paper-white in both themes, the same paper as the original PDF page beside it — square,
   flush, one hairline (never a rounded, outlined card) */
.ws-sheet{background:var(--paper);color:var(--paper-ink);font:400 15px/1.65 var(--sface);letter-spacing:-.003em;white-space:pre-wrap;overflow-wrap:anywhere;padding:32px 36px;border-radius:0;border:0;box-shadow:0 0 0 1px var(--rule);max-width:780px;width:100%;min-height:60vh}
.ws-sheet .ws-soft{color:var(--paper-soft)}
/* the page's text as the shared reader draws it (assets/page-text.css): the sheet's own colours and type */
.ws-sheet .pt{max-width:none}
.ws-sheet .pt-note,.ws-sheet .pt-empty,.ws-sheet .pt-h,.ws-sheet .pt-field dt,.ws-sheet .pt-blank,.ws-sheet .pt-table caption{color:var(--paper-soft);opacity:1}
.ws-pgt .pt{gap:10px;max-width:none}
.ws-pgt .pt-sec{margin-top:2px}
.ws-pgt .pt-h,.ws-pgt .pt-empty,.ws-pgt .pt-field dt,.ws-pgt .pt-blank,.ws-pgt .pt-table caption{color:var(--soft);opacity:1}
.ws-pgt .pt-field{gap:10px;padding:5px 0}
.ws-pgt .pt-table td{padding:4px 8px}
/* tables on the working screen's scale: 13 secondary, tabular figures */
.ws .pt-table{font-size:var(--t-sec);font-variant-numeric:tabular-nums}
/* the original PDF page (pdf.js): the file itself on paper, square and flush like the sheet, sharp at the screen's
   pixel ratio; its text layer is invisible but selectable; a highlight is translucent so the page's own ink shows */
@media (min-width:1200px){.ws-doc>.ws-chead{position:sticky;top:0;z-index:3;background:var(--bg);margin:0 calc(-1 * var(--cpad));padding:12px var(--cpad) 6px;border-top:1px solid var(--rule)}}
.ws-dkind{display:flex;flex-wrap:wrap;align-items:baseline;font-size:var(--t-sec);line-height:1.5;letter-spacing:0;color:var(--soft);margin-top:-4px}
.ws-dsep{white-space:pre}
.ws-doctools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.ws-docviews{display:flex;gap:4px;padding:4px;background:var(--pane);border:1px solid var(--rule);border-radius:10px}
.ws-docviews .ws-tbtn{border:0;white-space:nowrap}
.ws-docviews .ws-tbtn[aria-pressed="true"],.ws-docviews .ws-tbtn[aria-pressed="true"]:hover{background-color:var(--ink)!important;color:var(--bg)!important}
.ws-ocrstatus{font-size:var(--t-sec);line-height:1.5;color:var(--soft)}
.ws-page-text-download{margin-left:auto}
@media(max-width:760px){.ws-doctools{gap:10px}.ws-page-text-download{margin-left:0}.ws-ocrstatus{flex-basis:100%;order:2}}
.ws-pnote{font-size:var(--t-sec);line-height:1.45;letter-spacing:0;color:var(--soft);max-width:780px}
.ws-retry{font:inherit;padding:0!important;min-height:0}
.ws-pdf{width:100%;max-width:780px;position:relative;display:flex;flex-direction:column;gap:12px;flex:none}
.ws-popen{padding:20px 0;font-size:var(--t-sec)}
.ws-pdfpage{position:relative;flex:none;background:var(--paper);box-shadow:0 0 0 1px var(--rule);overflow:hidden}
/* A page not drawn yet (or drawn and let go) is a blank sheet of its own size with its number; a page that failed says so. */
.ws-pdfpage:is([data-state="idle"],[data-state="loading"],[data-state="error"]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ws-pdfpage:is([data-state="idle"],[data-state="loading"])::after{content:"Page " attr(data-page);font-size:var(--t-sec);color:var(--paper-soft)}
.ws-pdfpage .ws-soft{color:var(--paper-soft)}
/* Where the heading does not stay in view (a narrow screen), a small marker keeps the page number in view. */
.ws-pgpill{position:sticky;top:calc(var(--ws-top-h,98px) + 8px);height:0;z-index:2;pointer-events:none}
.ws-pgpill span{position:absolute;left:8px;top:0;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:var(--t-sec);line-height:1.4;box-shadow:0 1px 3px rgba(0,0,0,.25);white-space:nowrap}
@media (min-width:761px){.ws-pgpill{display:none}}
/* The end of an original: where it ends, and the way on to the next document in the Sources list. */
.ws-docend{width:min(100%,var(--ws-endw,780px));max-width:780px;display:flex;flex-direction:column;gap:10px;margin:8px 0 48px;flex:none}
.ws-docend[hidden]{display:none}
.ws-docend-t{margin:0;text-align:center;font-size:var(--t-sec);line-height:1.45;color:var(--soft);overflow-wrap:anywhere}
.ws-docend-go{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 16px!important;border:0!important;border-radius:12px;background-color:var(--fill)!important;color:var(--ink)!important;font-size:var(--t-body);line-height:1.3;letter-spacing:0;text-align:left}
.ws-docend-k{flex:none;font-weight:600;white-space:nowrap}
.ws-docend-n{flex:1;min-width:0;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-docend-go svg{flex:none}
/* Scroll anchoring: the column of pages is the anchor, so something appearing or going above it (a suggested question, a note)
   moves the page with it instead of under the reader; the pages themselves are held by hand as their real sizes come in. */
.ws-doc>*{overflow-anchor:none}
.ws-doc>.ws-pdf{overflow-anchor:auto}
.ws-pdf>.ws-pdfpage{overflow-anchor:none}
.ws-pcanvas{display:block;width:100%;height:100%}
.ws-pmarks{position:absolute;inset:0;pointer-events:none;z-index:2}
.ws-pmark{position:absolute;background:var(--pmark);box-shadow:inset 0 -2px 0 rgba(29,29,31,.55);border-radius:2px;margin:-2px;padding:2px;box-sizing:content-box}
.ws-pdfpage .textLayer{position:absolute;inset:0;overflow:clip;opacity:1;line-height:1;text-align:initial;letter-spacing:normal;word-spacing:normal;-webkit-text-size-adjust:none;text-size-adjust:none;
  forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:1;color-scheme:only light;
  --min-font-size:1;--text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv:calc(1 / var(--min-font-size))}
.ws-pdfpage .textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}
.ws-pdfpage .textLayer>:not(.markedContent),.ws-pdfpage .textLayer .markedContent span:not(.markedContent){z-index:1;--font-height:0;font-size:calc(var(--text-scale-factor) * var(--font-height));
  --scale-x:1;--rotate:0deg;transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}
.ws-pdfpage .textLayer .markedContent{display:contents}
.ws-pdfpage .textLayer ::selection{background:var(--psel);color:transparent}
.ws-pdfpage .textLayer mark.ws-qmark{position:static;background:var(--pmark);color:transparent;border-radius:2px;padding:0;margin:0}
/* download */
.ws-dlsec{padding-top:24px;display:flex;flex-direction:column;gap:6px;max-width:760px}
.ws-dlsec h3{margin-bottom:0}
.ws-dlrow{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0}
.ws-btn{min-height:32px;padding:0 12px!important;font-size:var(--t-sec);font-weight:500}
.ws-file{display:flex;justify-content:space-between;gap:12px;padding:6px 0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px;font-size:var(--t-body)}
.ws-file small{color:var(--soft);font-size:var(--t-sec);line-height:1.5;letter-spacing:0;text-align:right;overflow-wrap:anywhere}
.ws-file.is-derived{padding-left:16px;font-size:var(--t-sec)}
/* ---------------------------------------------------------------- details */
/* -------------------------------------------------- details (right pane) */
.ws-tabs{display:flex;flex-direction:column;min-height:0;flex:1}
/* A segmented control: a quiet track, the chosen segment raised. */
.ws-tabhead{display:flex;flex:none;margin:12px var(--gut) 4px;padding:2px;border-radius:8px;background:var(--fill)}
.ws-tab{flex:1;min-height:28px;padding:0 8px!important;border-radius:6px;text-align:center!important;font-size:var(--t-sec);font-weight:500;line-height:1;letter-spacing:0;color:var(--soft)!important;white-space:nowrap;transition:background .18s}
.ws-tab:hover{color:var(--ink)!important}
.ws-tab.is-on{background-color:var(--raised)!important;color:var(--ink)!important;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.06)}
.ws-panel{flex:1;min-height:0;overflow:auto;padding:12px var(--gut) 20px}
.ws-panel[data-key="transcript"]{display:flex;flex-direction:column;overflow:hidden;padding:0}
.ws-thead{padding:8px var(--gut);font-size:var(--t-cap);line-height:1.45;letter-spacing:0;color:var(--soft);flex:none}
.ws-tprov{display:block;margin-top:2px;font-size:var(--t-cap);line-height:1.4;letter-spacing:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ws-now-link{align-self:flex-start;margin:4px var(--gut) 0;font-size:var(--t-sec);letter-spacing:0;flex:none}
.ws-tbody{flex:1;min-height:0;overflow:auto;position:relative;padding:4px 0 16px}
.ws-cue{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:0 8px;padding:6px 10px 6px var(--gut);border-radius:8px;margin-inline:4px}
/* The line a search hit opened: tinted until something else is opened. */
.ws-cue.is-hit{background:var(--mark);color:#1D1D1F}
.ws-cue.is-hit .ws-ct,.ws-cue.is-hit .ws-cs,.ws-cue.is-hit .ws-cx,.ws-cue.is-hit .ws-lineclip{color:#1D1D1F!important}
.ws-cue.is-hit .ws-cueb.is-now{background-color:rgba(29,29,31,.10)!important;box-shadow:0 0 0 2px rgba(29,29,31,.10)}
/* Clip, on every transcript line and every moment: a quiet pill, always there. */
.ws-lineclip{display:inline-flex;align-items:center;gap:4px;align-self:start;min-height:26px;padding:0 8px!important;border-radius:999px;background-color:var(--fill)!important;color:var(--ink)!important;font-size:var(--t-cap);font-weight:500;letter-spacing:0;white-space:nowrap}
.ws-lineclip:hover{background-color:var(--fill-2)!important}
.ws-lineclip.is-busy{opacity:.6}
.ws-li.has-aside{display:flex;align-items:flex-start}
.ws-li.has-aside>.ws-row{width:auto;flex:1;min-width:0;margin-right:0!important}
.ws-rowclip{margin:10px 8px 0 4px}
.ws-hitw{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ws-who{color:var(--soft)}
.ws-cbody{min-width:0}
.ws-cueb{display:inline;padding:0 1px!important;border-radius:3px;transition:background .18s;font:inherit;line-height:inherit;letter-spacing:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ws-cueb:hover{background-color:var(--hover)!important}
/* Words not yet tied to a speaker: a faint tint, never an underline. */
.ws-cueb.is-near{text-decoration:none;background:var(--near)}
.ws-cueb.is-near:hover{background-color:var(--fill-2)!important}
.ws-cueb.is-now{background-color:var(--sel)!important;box-shadow:0 0 0 2px var(--sel);font-weight:500}
.ws-ct{font-size:var(--t-sec);font-weight:400;line-height:20px;letter-spacing:0;color:var(--soft)}
.ws-cs{display:block;font-size:var(--t-sec);font-weight:400;font-style:normal;line-height:20px;letter-spacing:0;color:var(--soft)}
/* A quiet, always-visible mark on a line that includes a machine-guessed ("nearby") attachment — said once per
   line, never the repeated "(nearby, not assigned)" phrase; the pane's head note explains it once. */
.ws-cs-mark{opacity:.6}
.ws-cx{font-family:var(--qface);font-size:var(--t-body);font-weight:400;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.ws-pg{margin-inline:8px;padding:10px calc(var(--gut) - 8px);border-radius:10px}
.ws-pg.is-now{background:var(--sel)}
.ws-pgh{font-size:var(--t-sec);font-weight:600;letter-spacing:0}
.ws-pgt{font-family:var(--qface);font-size:var(--t-body);font-weight:400;line-height:1.5;white-space:pre-wrap;margin-top:4px;color:var(--ink);overflow-wrap:anywhere}
.ws-pgt mark.ws-tmark{background:var(--mark);color:var(--paper-ink);border-radius:2px;padding:0 1px}
.ws-ih{margin:4px 0 6px}
.ws-card{padding:10px 0 12px;display:flex;flex-direction:column;gap:6px}
/* The open card's tint is inset inside the pane, never running to its edge. */
.ws-card.is-open{margin-inline:-8px;padding:10px 8px 12px;border-radius:10px;background:var(--sel)}
.ws-cardh{display:flex;gap:10px;align-items:baseline;width:100%}
.ws-cardh .ws-ct{grid-row:auto;flex:none}
.ws-cl{font-size:var(--t-body);font-weight:500;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.ws-basis{font-size:var(--t-sec);line-height:1.45;letter-spacing:0;color:var(--soft)}
.ws-qt{font-family:var(--qface);font-size:var(--t-body);font-weight:500;line-height:1.5}
.ws-alsorow{font-size:var(--t-sec);letter-spacing:0}
.ws-marks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.ws-mark,.ws-btn{border:0!important;border-radius:8px;background-color:var(--fill)!important;letter-spacing:0;white-space:nowrap;color:var(--ink)!important}
.ws-mark:hover,.ws-btn:hover{background-color:var(--fill-2)!important}
.ws-mark{min-height:32px;padding:0 12px!important;font-size:var(--t-sec);font-weight:500}
.ws-mark.is-done{background-color:var(--ink)!important;color:var(--on-ink)!important}
.ws-mark[aria-disabled="true"]{opacity:.5}
.ws-qbox{padding-bottom:12px;margin-bottom:4px}
.ws-syn{margin-top:24px}
.ws-cov{margin-top:24px;display:flex;flex-direction:column;gap:6px}
.ws-cov .ws-ih:focus{outline:none}
.ws-covl{display:flex;flex-direction:column;gap:4px;font-size:var(--t-sec);line-height:1.45;letter-spacing:0}
.ws-synl{display:flex;gap:10px;width:100%;padding:4px 0!important;font-size:var(--t-sec);line-height:1.45;letter-spacing:0}
.ws-synl:hover{text-decoration:underline}
.ws-leg,.ws-cam,.ws-chip,.ws-cite{letter-spacing:0}
.ws-chip,.ws-cite{border:0!important;border-radius:999px;background-color:var(--fill)!important;white-space:nowrap}
.ws-chip:hover,.ws-cite:hover{background-color:var(--fill-2)!important}
/* Ask: answers above, the question box always visible at the foot of the pane */
.ws-askp{display:flex;flex-direction:column;overflow:hidden;padding:0}
.ws-askp[hidden]{display:none!important}
.ws-answers{flex:1;min-height:0;overflow:auto;padding:12px var(--gut)}
.ws-answers:empty{flex:0 0 auto;padding:0}
.ws-askp .acct-answer{max-width:64ch;padding:12px 0 20px;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
.ws-askp .acct-answer-q{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.003em;color:var(--ink);margin-bottom:6px}
.ws-askp .acct-answer-text{font-size:var(--t-body);line-height:1.5;margin:0}
.ws-askp .ws-answer>*+*{margin-top:12px}
.ws .ws-alist{list-style:disc outside;padding-left:1.15em}
.ws .ws-alist li{padding-left:.2em}
.ws .ws-alist li+li{margin-top:6px}
.ws .ws-alist li::marker{color:var(--soft)}
.ws-askp .ws-answer>.ws-achips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ws-askp .acct-hint{color:var(--soft);font-size:var(--t-sec);line-height:1.45;letter-spacing:0;margin-top:10px}
.ws-askp .acct-answer-text.acct-hint{margin-top:0}
.ws-askp .acct-tail{white-space:nowrap}
.ws-cite{display:inline-flex;align-items:center;min-height:24px;padding:0 10px!important;color:var(--ink)!important;font-size:var(--t-cap);font-weight:500;line-height:1;text-decoration:none;vertical-align:baseline}
.ws-suggest{display:flex;flex-wrap:wrap;gap:8px;padding:12px var(--gut) 4px}
.ws-askp.has-answers .ws-suggest{display:none}
.ws-chip{min-height:28px;padding:0 12px!important;font-size:var(--t-sec);font-weight:400;line-height:1;color:var(--ink)!important}
.ws-askp>.ws-fine{padding:8px var(--gut) 0}
.ws-askform{display:flex;gap:8px;padding:12px var(--gut);border-top:1px solid var(--rule);flex:none;margin-top:auto}
.ws-askform input{flex:1;min-width:0;height:36px;padding:0 12px;font:inherit;font-size:14px;letter-spacing:-.003em;color:var(--ink);background:var(--fill);border:0;border-radius:8px;outline:none}
.ws-askgo{min-height:36px;padding:0 16px!important;border:0;border-radius:8px;background-color:var(--ink)!important;color:var(--on-ink)!important;font-size:var(--t-sec);font-weight:600;letter-spacing:0}
.ws-toast{position:fixed;left:50%;bottom:48px;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;font-size:var(--t-sec);letter-spacing:0;max-width:calc(100vw - 32px)}
/* --------------------------------------------------------- issue workbench
   The Questions menu section, the Evidence/Law tabs and the centre's "From …
   · Back to the question" line (assets/issue-workbench.js, matter-workspace.js
   reloadIssues()/applyIssueState()/paintFrom()). Monochrome throughout (see
   the token block at the top of this file): relation (+ supports / − challenges
   / ? unresolved), review state (dashed = AI-suggested, thin = awaiting,
   solid = reviewed, struck = rejected) and every control/selection/focus state
   are said by weight, border style/weight, fill vs outline, underline or
   position — never hue. font-variant-numeric:tabular-nums replaces every
   monospace face this component used to carry (question numbers, counts,
   citations, formulas, basis codes): a numeral-width feature on the SAME
   system sans, never a second typeface. No ALL-CAPS labels. */
/* the centre: where the open source came from, and a quote inside its sentence */
.ws-from{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding:7px var(--gut);font-size:13px;color:var(--ink);background:var(--pane);border-bottom:1px solid var(--rule)}
.ws-from .ws-link{font-size:13px}
/* The sentence around the quote, and a reading note (a text-layer-only value): additional lines beside the mark
   already placed in the sheet or the PDF text layer above — never a second way of marking the quote. */
.ws-fromctx{font-size:12.5px;line-height:1.5;color:var(--soft);max-width:780px;margin:4px 0 0}
.ws-fromctx mark{background:var(--mark);color:#1D2024;border-radius:2px;padding:0 1px}
.ws-notetext{display:block;color:var(--soft)}
.iw-irow{padding-top:6px!important;padding-bottom:4px!important}
.iw-ititle{font-size:11.5px;line-height:1.35;color:var(--soft);font-weight:600;letter-spacing:.02em}
.iw-lq{font-size:14.5px;line-height:1.4;color:var(--ink);font-weight:500}
.iw-imeta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0 14px 8px 16px}
/* The basis word (EXTRACTED · OCR / INFERRED / PROVIDED): a bordered label, never colored text. */
.iw-basis{display:inline-block;font:500 11px/1.5 var(--ui);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--soft)!important;border:1px solid var(--rule)!important;border-radius:3px;padding:1px 6px!important;text-transform:none;text-align:left}
/* Hover on a basis chip that opens its source: a contrast bump on the border, not a hue. */
.iw-basis-btn:hover{color:var(--ink)!important;border-color:var(--ink)!important}
.iw-law{font-size:12.5px;color:var(--ink)}
.iw-left{font-size:12.5px;color:var(--soft)}
.iw-legend{font-size:11.5px;color:var(--soft)}
.iw-stamp{font-size:12px;color:var(--soft)}
.iw-flagline{font-size:12px;line-height:1.4;color:var(--ink);border-left:2px solid var(--soft);padding-left:6px}
.iw-qrow{padding-left:14px!important}
.iw-qn{flex:none;min-width:24px;font:600 11.5px/18px var(--ui);font-variant-numeric:tabular-nums;color:var(--soft)}
/* The current question: a contrast jump (soft -> ink), the same signal the menu's other selected rows use. */
.ws-row.is-selected .iw-qn{color:var(--ink)}
.iw-counts{font:12px/1.4 var(--ui);font-variant-numeric:tabular-nums;color:var(--soft)}
.iw-c{color:var(--ink)}
.iw-tr{font-family:var(--sans)}
/* the right pane */
.iw-panel{padding:10px 14px 24px}
.iw-banner{font-size:12.5px;line-height:1.45;padding:6px 8px;margin-bottom:8px;border:1px dashed var(--soft);border-radius:4px;color:var(--ink)}
.iw-warn{font-size:12.5px;line-height:1.45;color:var(--ink);border-left:2px solid var(--soft);padding-left:8px;margin:4px 0}
.iw-off{font-size:12.5px;line-height:1.45;color:var(--ink);background:var(--hover);border-left:2px solid var(--soft);padding:5px 8px;margin:6px 0}
.iw-qhead{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.iw-qtitle{display:flex;gap:8px;align-items:baseline;font-size:15px;font-weight:600;line-height:1.35}
.iw-qtitle:focus{outline:none}
.iw-lqbig{font-size:15px;line-height:1.4;font-weight:500}
.iw-said{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.iw-prop{display:flex;flex-direction:column;gap:3px}
.iw-ptext{font-size:13.5px;line-height:1.45}
.iw-plabel{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--soft)}
.iw-pwho{font-size:12.5px;color:var(--soft);display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.iw-contrary{color:var(--ink)}
.iw-rule{font-size:12px;color:var(--soft)}
.iw-missing{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.4;color:var(--soft);padding-left:0}
.iw-missing b{color:var(--ink);font-weight:500}
.iw-keys{display:flex;flex-wrap:wrap;gap:4px;padding:8px 0;border-bottom:1px solid var(--rule)}
.iw-keys .iw-key{min-height:26px;padding:0 7px!important;font-size:12px}
.iw-key,.iw-act{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 9px!important;border:1px solid color-mix(in srgb,var(--soft) 50%,transparent)!important;border-radius:5px;font-size:12.5px;color:var(--ink)!important;white-space:nowrap}
.iw-key:hover:not(:disabled),.iw-act:hover:not(:disabled){background:var(--hover)!important}
/* The primary action: filled solid ("a fill means this is a control", already this file's own rule) — not an outline. */
.iw-act.is-main{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--pane)!important;font-weight:600}
/* A quiet/secondary action: underlined, ink-colored — the underline says "control", not the color. */
.iw-act.is-quiet{border-color:transparent!important;color:var(--ink)!important;text-decoration:underline;text-underline-offset:2px}
/* A relation toggle (Supports / Challenges / Unresolved): filled when on, outlined when off — fill vs outline is
   the signal, exactly as the brief lists it, never a hue swap. */
.iw-act.is-on{background:var(--ink)!important;color:var(--pane)!important;border-color:var(--ink)!important}
.iw-kbd{font:500 10.5px/16px var(--ui);min-width:16px;padding:0 4px;border:1px solid var(--rule);border-radius:3px;color:var(--soft);text-align:center}
.iw-group{padding:10px 0 4px;border-bottom:1px solid var(--rule)}
.iw-gh{display:flex;align-items:baseline;gap:4px;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--soft);margin-bottom:4px}
.iw-glyph{font:600 14px/1 var(--ui);color:var(--ink);min-width:12px}
.iw-gc{letter-spacing:0;font-variant-numeric:tabular-nums}
.iw-gs{letter-spacing:0;text-transform:none;font-weight:400}
.iw-empty{font-size:13px;color:var(--soft);padding:2px 0 8px}
.iw-card{display:flex;flex-direction:column;gap:5px;padding:9px 0 10px;border-top:1px solid var(--rule);transition:background .18s,border-color .18s}
.iw-group .iw-card:first-of-type{border-top:0}
/* The selected observation card: a left border (weight), matching the menu's own selection border pattern; the
   background wash (--sel) is a neutral ink-tinted wash in both themes, never accent-tinted. */
.iw-card.is-sel{border-left:2px solid var(--ink);padding-left:10px;margin-left:-12px;background:var(--sel)}
.iw-ctop{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.iw-rel{font:500 12px/1.5 var(--ui);font-variant-numeric:tabular-nums;color:var(--ink)}
.iw-review{font-size:11.5px;line-height:1.5;padding:0 7px;border-radius:999px;color:var(--ink)}
.iw-review.is-ai{border:1px dashed var(--soft);color:var(--soft)}
.iw-review.is-await{border:1px solid var(--rule)}
.iw-review.is-rev{border:1.5px solid var(--ink);font-weight:600}
.iw-review.is-revd{border:1px solid var(--ink)}
.iw-review.is-rej{border:1px solid var(--rule);text-decoration:line-through;color:var(--soft)}
.iw-flag{font-size:11.5px;color:var(--ink);border:1px solid var(--soft);border-radius:3px;padding:0 5px}
.iw-stmt{font-size:14px;line-height:1.45;color:var(--ink)!important;overflow-wrap:anywhere;text-align:left!important}
.iw-stmt.is-quote{font-size:15px}
.iw-stmt:hover{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.iw-basisline{font:500 11px/1.5 var(--ui);letter-spacing:.02em;color:var(--soft)}
.iw-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.iw-chips + .iw-chips{margin-top:3px}
/* A source chip: a bordered shape already says "control"; ink text, never accent. */
.iw-chip{min-height:26px;padding:0 7px!important;border:1px solid var(--rule)!important;border-radius:4px;font:12px/24px var(--ui);font-variant-numeric:tabular-nums;color:var(--ink)!important;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.iw-chip:hover{background:var(--hover)!important}
.iw-chip.is-missing{color:var(--soft)!important;text-decoration:line-through}
.iw-chip.is-changed{border-style:dashed!important}
.iw-comp{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:baseline;font-size:12px;color:var(--soft)}
.iw-formula{font:12px/24px var(--ui);font-variant-numeric:tabular-nums;color:var(--ink)}
.iw-unc,.iw-qual{font-size:12.5px;line-height:1.45;color:var(--soft)}
.iw-unc b,.iw-qual b{color:var(--ink);font-weight:500}
.iw-mini,.iw-arow{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.iw-actions{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.iw-actions .iw-act{min-height:28px;padding:0 7px!important;font-size:12px}
.iw-provb{align-self:flex-start}
.iw-alabel{font-size:12px;color:var(--soft);margin-right:2px}
.iw-rejline{display:flex;gap:6px;align-items:baseline;width:100%;font-size:12.5px;color:var(--soft)!important;min-height:28px}
.iw-strike{text-decoration:line-through;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.iw-form{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.iw-flabel{font-size:12px;color:var(--soft)}
.iw-form textarea{width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:5px;padding:6px 8px;resize:vertical}
/* A focused textarea: a border-color/weight change is the whole signal (the file's shared :focus-visible outline
   is suppressed here so only one ring shows, not two) — border, not hue. */
.iw-form textarea:focus{border-color:var(--ink);outline:none}
.iw-why{font-size:12.5px;line-height:1.45;color:var(--soft);margin:2px 0 4px}
.iw-msg{font-size:12.5px;line-height:1.45;padding:5px 8px;border-left:2px solid var(--soft);background:var(--hover)}
.iw-msg p+p{margin-top:3px}
.iw-msg.is-ok{border-left-color:var(--ink)}
.iw-filed{font-size:12px;color:var(--soft);margin:-2px 0 4px}
.iw-orow .ws-rl{font-weight:500}
.iw-osub{font-size:12px;line-height:1.4;color:var(--soft)}
.iw-prov{margin-top:4px;padding:8px 0 0;border-top:1px dashed var(--rule);display:flex;flex-direction:column;gap:3px}
.iw-ph{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--soft);margin:0 0 2px}
.iw-pl{font-size:12.5px;line-height:1.45;color:var(--soft);overflow-wrap:anywhere}
.iw-pl b{color:var(--ink);font-weight:500}
.iw-ctx{color:var(--ink);white-space:normal}
.iw-qlist{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid var(--rule)}
.iw-qpick{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 6px;padding:6px 0!important;border-top:1px solid var(--rule)!important;text-align:left!important}
.iw-qpick:hover{background:var(--hover)!important}
.iw-qpick .iw-counts{grid-column:2}
.iw-qpt{font-size:13.5px;line-height:1.4}
.iw-disp{display:flex;flex-direction:column;gap:6px;padding:14px 0 8px}
.iw-disp .ws-ih:focus{outline:none}
.iw-now{font-size:13px;color:var(--ink)}
.iw-still{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-left:2px solid var(--soft);background:var(--hover)}
.iw-lgroup{padding:10px 0 4px;border-top:1px solid var(--rule);margin-top:8px}
.iw-passage{display:flex;flex-direction:column;gap:3px;padding:8px 0 10px}
.iw-passage+.iw-passage{border-top:1px solid var(--rule)}
/* The quoted authority passage: a left border and its own size, visibly distinct from the system's summary of it
   (weight/border, not color — the summary text around it carries neither). */
.iw-court{margin:0;padding:2px 0 2px 10px;border-left:2px solid var(--soft);font-size:14.5px;line-height:1.5;color:var(--ink)}
.iw-from{font-size:12px;color:var(--soft)}
.iw-cite{font-size:12.5px;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--ink)}
.iw-verified,.iw-attorney{font-size:12.5px;line-height:1.45;color:var(--ink)}
.iw-attorney{color:var(--soft)}
.iw-attorney.is-done{color:var(--ink);font-weight:500}
.iw-src{font-size:12px;color:var(--soft)}
/* ----------------------------------------------------------------- tablet */
@media (max-width:1199px) and (min-width:761px){
  body.work-mode{overflow:auto}
  .ws{height:auto;min-height:100vh;overflow:visible;grid-template-rows:auto auto auto}
  /* The brand and the matter keep a line of their own; search and the actions share the second line. */
  .ws-top{position:sticky;top:0;z-index:10;flex-wrap:wrap;row-gap:4px;padding:4px var(--gut) 8px}
  .ws-topl{flex:1 1 100%;min-height:40px}
  .ws-search{flex:1 1 auto;max-width:none;min-width:140px;margin-left:0}
  .ws-body{grid-template-columns:clamp(232px,30%,280px) minmax(0,1fr);grid-template-areas:"left centre" "left right"}
  .ws-left{grid-area:left;position:sticky;top:var(--ws-top-h,98px);height:calc(100vh - var(--ws-top-h,98px) - var(--ws-bot-h,44px));align-self:start}
  .ws-centre{grid-area:centre;overflow:visible}
  .ws-from{top:var(--ws-top-h,98px)}
  .ws-right{grid-area:right;border-left:0;border-top:1px solid var(--rule);height:min(640px,80vh)}
  .ws-bottom{position:sticky;bottom:0;z-index:10}
  .ws-stage{height:min(56.25cqw,60vh)}
  .ws-keys{grid-template-columns:minmax(0,1fr)}
  .ws-nowrow{flex-wrap:wrap;row-gap:8px}
  .ws-now{flex:1 1 200px}
  .ws-ends{padding-left:0;padding-right:0}
}
/* ------------------------------------------------------------------ phone */
@media (max-width:760px){
  body.work-mode{overflow:auto}
  .ws{--t-body:15px;--lh-list:1.45;--t-clock:26px;--t-stage:20px;--cpad:var(--gut);height:auto;min-height:100vh;min-height:100dvh;overflow:visible;display:block;padding-bottom:100px}
  .ws-top{flex-wrap:wrap;gap:4px 8px;padding:6px var(--gut) 10px;min-height:0}
  .ws-topl{flex:1 1 100%;gap:4px 10px}
  .ws-back{margin-left:-6px}
  .ws-crumb{font-size:var(--t-sec)}
  .ws-search{order:5;flex:1 1 0;max-width:none;min-width:0;margin-left:0}
  .ws-search input{height:40px;font-size:16px}
  .ws-tools{order:6}
  .ws-act{width:40px;min-height:40px;padding:0!important;justify-content:center}
  .ws-act span{display:none}
  .ws-theme{width:40px;height:40px}
  .ws-body{display:block}
  .ws-pane{overflow:visible;border:0!important}
  .ws[data-phone="list"] .ws-centre,.ws[data-phone="list"] .ws-right,
  .ws[data-phone="source"] .ws-left,.ws[data-phone="source"] .ws-right,
  .ws[data-phone="details"] .ws-left,.ws[data-phone="details"] .ws-centre{display:none}
  /* The Stage view: the picture on top, then the clock and the timeline, then the matter's name and the three moments,
     then the clip maker. A document or Download keeps the name and the three above it. */
  .ws[data-phone="source"] .ws-centre{display:flex;flex-direction:column}
  .ws[data-open="recording"] .ws-rec{display:contents}
  .ws[data-open="recording"] .ws-stagebox{order:1}
  .ws[data-open="recording"] .ws-nowrow,.ws[data-open="recording"] .ws-transport,.ws[data-open="recording"] .ws-ends{order:2;padding-inline:var(--gut)}
  .ws[data-open="recording"] .ws-hero{order:3;padding-top:20px}
  .ws[data-open="recording"] .ws-clipslot{order:4;padding:0 var(--gut) 16px}
  .ws-stagebox{margin-inline:0}
  .ws-stage{height:auto;min-height:0;aspect-ratio:16/9;max-height:52vh}
  .ws-sbar{flex-wrap:wrap;padding:6px var(--gut) 8px;row-gap:4px}
  .ws-boxnote{padding:0 var(--gut) 8px}
  .ws-cams{flex:1 1 100%}
  .ws-legend{flex:1 1 100%;justify-content:flex-start}
  .ws-keys{grid-template-columns:minmax(0,1fr);gap:8px}
  .ws-nowrow{flex-wrap:wrap;row-gap:4px;gap:4px 14px;min-height:0}
  .ws-now{flex:1 1 0}
  .ws-nowact{flex:1 1 100%;min-height:44px;flex-wrap:wrap}
  .ws-ends{padding:2px var(--gut) 0}
  .ws-transport{gap:6px}
  .ws-index{top:0}
  .ws-doc,.ws-dl{padding:12px var(--gut) 16px}
  .ws-sheet{padding:20px 18px;min-height:0}
  /* Every control is at least 44 x 44 px to the finger. Pills and small rects keep their drawn size: a transparent
     top/bottom border grows the hit area and the fill is clipped inside it. */
  .ws-back{min-height:44px}
  .ws-act{width:44px;min-height:44px}
  .ws-theme{width:44px;height:44px}
  .ws-search input{height:44px}
  .ws-ix{min-height:44px;align-items:center}
  .ws-leg,.ws-sound,.ws-chip,.ws-nowmark,.ws-clipnow,.ws-clipq{min-height:44px;min-width:44px;justify-content:center;text-align:center!important;border:solid transparent!important;border-width:8px 0!important;border-radius:14px/22px;background-clip:padding-box!important}
  .ws-cam{min-height:44px}
  .ws-lineclip{min-height:44px;min-width:44px;justify-content:center;border:solid transparent!important;border-width:9px 0!important;border-radius:14px/22px;background-clip:padding-box!important}
  .ws-keyi .ws-keyclip{min-height:44px;border-width:0 0 0 1px!important;border-style:solid!important;border-color:var(--rule)!important;background-clip:border-box!important;border-radius:0 12px 12px 0!important}
  .ws-transport{flex-wrap:wrap}
  .ws-clippair{flex:1 1 100%;margin-left:0}
  .ws-clippair .ws-clipq{flex:1}
  .ws-cite{min-height:44px;min-width:44px;justify-content:center;border:solid transparent!important;border-width:10px 0!important;border-radius:12px/22px;background-clip:padding-box!important}
  .ws-tbtn,.ws-mark,.ws-btn{min-height:44px;min-width:44px;border:solid transparent!important;border-width:6px 0!important;border-radius:8px/14px;background-clip:padding-box!important}
  .ws-play,.ws-step{width:44px;height:44px;min-width:44px;border:0!important;border-radius:50%;background-clip:border-box!important}
  .ws-key{min-height:56px}
  .ws-camrow{padding-block:0}
  .ws-tab{min-height:44px}
  .ws-askform input,.ws-askgo{height:44px;min-height:44px}
  .ws-bottom .ws-link{display:inline-block;padding:14px 0!important;margin:-14px 0}
  /* Text links and list rows in the details pane: padding with a cancelling negative margin grows the rect to
     44 px without moving a line; stacked lists open their gap so neighbours' hit areas do not overlap. */
  .ws-cardh{padding:11px 0!important;margin:-11px 0!important}
  .ws-covl{gap:12px}
  .ws-covl .ws-link,.ws-alsorow .ws-link,.ws-pgh,.ws-clear{display:inline-block;min-width:44px;padding:13px 0!important;margin:-13px 0}
  .ws-alsorow{line-height:44px}
  .ws-now-link{min-height:44px}
  .ws-synl{min-height:44px;padding:11px 0!important}
  .ws-file{padding:12px 0}
  /* The timeline: moment dots are 44 px targets (the dot drawn at the foot of each), the scrubber 44 px tall under them. */
  .ws-tl{height:76px;margin-top:-8px}
  .ws-dots{height:44px;z-index:2;pointer-events:none}
  .ws-dot{pointer-events:auto;top:0!important;width:44px!important;height:44px!important;margin-left:-22px!important;border:0!important;border-radius:0!important;box-sizing:border-box;background:radial-gradient(circle at 50% 35px,var(--soft) 0 5px,transparent 5.5px)!important}
  .ws-dot.is-on{width:44px!important;height:44px!important;margin-left:-22px!important;background:radial-gradient(circle at 50% 35px,var(--ink) 0 6px,transparent 6.5px)!important}
  .ws-dot:focus-visible{outline-offset:-8px}
  .ws-track{top:48px}
  .ws-head{top:44px}
  .ws-gaps{top:43px}
  .ws-range{top:32px;height:44px}
  .ws-right{display:flex;min-height:calc(100dvh - 220px)}
  .ws-panel[data-key="transcript"]{max-height:calc(100dvh - 240px)}
  .ws-askp{min-height:calc(100dvh - 240px)}
  .ws-bottom{position:fixed;left:0;right:0;bottom:56px;z-index:20;padding:4px var(--gut);font-size:var(--t-cap);flex-direction:column;gap:0}
  .ws-br{max-width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* The review line wraps rather than hiding its Which and why. */
  .ws-bl{flex-wrap:wrap;column-gap:8px}
  .ws-blt{white-space:normal}
  .ws-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:21;height:56px;background:var(--pane);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
  .ws-tb{flex:1;font-size:15px!important;font-weight:500;letter-spacing:-.003em;color:var(--soft)!important;text-align:center!important;border-top:2px solid transparent!important}
  .ws-tb.is-on{color:var(--ink)!important;font-weight:600;border-top-color:var(--ink)!important}
  .ws-toast{bottom:124px}
  .iw-card.is-sel{margin-left:-12px;margin-right:-12px;padding-right:10px}
  /* Touch targets: every review control is 44 px tall, like the top bar's actions: the review taps (+ − ? Reviewed
     Reject …), the keys, the chips, an item's statement, the rejected-item line, the overview's questions, the legal
     question's source chip and the legal question's basis chip. Written at the desktop rules' own specificity
     (.iw-actions .iw-act, .iw-keys .iw-key) so they win here; a bare `.iw-act{min-height:36px}` would lose to them. */
  .iw-key,.iw-act,.iw-keys .iw-key,.iw-actions .iw-act,.iw-chip,.iw-rejline,.iw-qpick,.iw-stmt,.iw-basis-btn{min-height:44px}
  .ws-from .ws-link{display:inline-flex;align-items:center;min-height:44px}
}
@media (prefers-reduced-motion:reduce){.ws *{transition:none!important}}
/* ---------------------------------------------- documents by kind (menu groups) and the Analysis tab */
/* A group is a plain heading with its count over an always-expanded list (never a toggle); a packet's parts sit
   indented under it. The heading is one step under the section header in weight, sentence case, the count grey. */
.ws-grps{display:flex;flex-direction:column;gap:14px}
.ws-gh{display:flex;align-items:baseline;gap:8px;padding:0 var(--gut) 4px;font-size:var(--t-body);font-weight:600;line-height:1.4;letter-spacing:0;color:var(--ink);text-transform:none}
.ws-gc{font-size:var(--t-sec);font-weight:400;color:var(--soft);font-variant-numeric:tabular-nums}
.ws-row.is-seg{padding-left:38px!important}
.ws-row.is-seg .ws-ri{display:none}
.ws-an{padding:12px var(--gut) 24px;display:flex;flex-direction:column;gap:8px}
.ws-an[hidden]{display:none!important}
.ws-anh{font-size:var(--t-body);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.ws-anl{font-size:var(--t-body);font-weight:500;line-height:1.5}
.ws-anp{font-size:var(--t-sec);line-height:1.45;letter-spacing:0;color:var(--soft);padding-top:4px}
.ws-anseg{display:flex;flex-direction:column;gap:6px;padding:8px 0 4px}
.ws-anseg+.ws-anseg{margin-top:8px}
.ws-anq{display:flex;gap:10px;width:100%;padding:4px 0!important;font-size:var(--t-body);line-height:1.5;letter-spacing:0;text-align:left}
.ws-anq .ws-ct{flex:none;min-width:34px}
.ws-anq .ws-q{overflow-wrap:anywhere}
.ws-anq:hover .ws-q{color:var(--accent)}
@media (max-width:760px){.ws-anq{min-height:44px;padding:8px 0!important}}

/* Show all N moments (the index), drag handles on the clip range */
.ws .ws-more{display:block;width:100%;min-height:36px;padding:6px var(--gut)!important;color:var(--ink)!important;font-size:var(--t-sec);font-weight:500;text-decoration:underline;text-decoration-color:var(--soft);text-underline-offset:3px;text-align:left}
.ws-cliph{position:absolute;top:13px;width:12px;height:20px;margin-left:-6px;border-radius:4px;background:var(--ink);box-shadow:0 0 0 2px var(--bg);cursor:ew-resize;z-index:3;touch-action:none}
.ws-cliph.is-drag{transform:scale(1.15)}
@media (max-width:760px){
  .ws-camgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .ws-cam{grid-template-columns:56px minmax(0,1fr);min-height:56px}
  .ws-camf{width:56px;height:32px}
  .ws[data-open="recording"] .ws-recs{order:3;padding:20px var(--gut) 0}
  .ws[data-open="recording"] .ws-hero{order:4}
  .ws[data-open="recording"] .ws-clipslot{order:5}
  .ws .ws-tool,.ws .ws-tipx{min-height:44px;border:solid transparent!important;border-width:6px 0!important;border-radius:14px/22px;background-clip:padding-box!important}
  .ws-tip{padding:6px var(--gut) 8px}
  .ws-cliph{top:44px;height:24px;width:16px;margin-left:-8px}
  .ws .ws-more{min-height:44px}
}
/* Sound sits on the bar like the other toggles (the transport's .ws-tbtn colours are for the light pane). */
.ws .ws-sbar .ws-sound{background-color:var(--bar-fill)!important;color:var(--bar-ink)!important}
.ws .ws-sbar .ws-sound:hover{background-color:var(--bar-fill-2)!important}
@media (max-width:760px){.ws .ws-keysall{display:inline-flex;align-items:center;min-height:44px;padding:0 2px!important;margin:-12px 0}}

/* A measured equipment proposal is not a restraint event or an identity. */
.ws-box.is-cuffs.is-measured-equipment{--c:#E6E8EB;border-style:dashed;border-width:2px}

/* Optional source-bound machine audio gaps; cue wording stays unchanged. */
.ws-audio-gaps{margin:0 var(--gut) 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.ws-audio-gaps summary{cursor:pointer;font-size:var(--t-cap)}
.ws-audio-gaps .ws-fine{margin:8px 0}
.ws-audio-gap-list{margin:8px 0;padding:0;list-style:none}
.ws-audio-gap-list li{margin:6px 0}
.ws-audio-gap-jump{text-align:left;line-height:1.5}