/* ── 5CNet-CXR ────────────────────────────────────────────────────────────────────
   Palette, layout and type follow the 5CNet Rad Console design canvas. Tokens are lifted from it
   verbatim: #CE1126 (5C red), #16181c ink, #1B4F9C blue, #f7f5f2 page, #fff surfaces, 9px radii,
   a 58px app bar, and a DARK viewer -- a radiograph belongs on near-black, not on paper.

   Two deliberate deviations, both flagged in index.html:
     * a system font stack instead of Instrument Sans / Manrope / JetBrains Mono from
       fonts.googleapis.com -- no third-party request from a page where people upload radiographs;
     * no window/level control, because the viewer shows an 8-bit JPEG re-encode.
*/
:root {
  --ink:#16181c;
  --red:#CE1126; --red-dk:#b30e20; --red-wash:#fdf0f1; --red-line:rgba(206,17,38,.18);
  --blue:#1B4F9C; --green:#186a3b; --amber:#b06a00;
  --page:#f7f5f2; --canvas:#eceae5; --surface:#fff; --surface2:#fbfaf8;
  --line:rgba(0,0,0,.09); --line2:rgba(0,0,0,.13);
  --mut:rgba(0,0,0,.45); --mut2:rgba(0,0,0,.6); --faint:rgba(0,0,0,.07);
  --dark:#0c0e11; --dark2:#14171c; --dark-line:rgba(255,255,255,.12);
  --ui:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wm:Manrope,var(--ui);
  /* The report body is a DIFFERENT face from the UI on purpose -- it is the artefact on the page,
     not part of the chrome. */
  --report:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:Newsreader,ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --body-fg:#22262c;
  --r:9px;
}
* { box-sizing:border-box }
/* THE `hidden` ATTRIBUTE MUST WIN. Half this app's state is `el.hidden = true/false` -- the rail,
   the viewer, the account block, the status pill, the report footer and the delete dialog -- and the
   UA's `[hidden]{display:none}` loses to any class rule that sets `display`. Without this line the
   whole signed-out page rendered as the signed-in one WITH the delete dialog open over it. */
[hidden] { display:none !important }
html, body { margin:0; height:100%; background:var(--page); color:var(--ink);
  font-family:var(--ui); font-size:13px; -webkit-font-smoothing:antialiased }
a { color:var(--blue); text-decoration:none }
a:hover { color:var(--red) }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums }
::-webkit-scrollbar { width:8px; height:8px }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.16); border-radius:4px }
::-webkit-scrollbar-track { background:transparent }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }
@keyframes spin { to { transform:rotate(360deg) } }

#app { display:flex; flex-direction:column; height:100vh }

/* ── app bar ─────────────────────────────────────────────────────────────────── */
/* min-height, not height: the architecture line folds onto a second line rather than being cut
   with an ellipsis, so the bar has to be allowed to take the room that needs. 74px gives the
   two-line fold somewhere to go without the bar changing height when it happens. */
.appbar { flex:none; min-height:74px; display:flex; align-items:center; gap:18px;
  padding:10px 22px; background:var(--surface); border-bottom:1px solid var(--line) }
.brand { display:flex; align-items:center; gap:12px; flex:none }
.brand img { display:block; object-fit:contain }
.brand a { display:block; line-height:0; border-radius:6px }
.brand a:hover img { opacity:.82 }
.wordmark { display:flex; flex-direction:column; line-height:1; white-space:nowrap;
  border-left:2px solid var(--red); padding-left:11px }
.wordmark b { font-family:var(--wm); font-size:17.5px; font-weight:800; letter-spacing:-.02em }
.wordmark i { font-style:normal; font-size:9.5px; font-weight:500; letter-spacing:.2em;
  color:var(--mut); margin-top:6px }
.vdiv { width:1px; height:30px; background:var(--line2); flex:none }
.vdiv.dark { background:var(--dark-line); height:16px }

/* The identity stacks now: the study's name over its description. Side by side they competed for
   the same run of width with the architecture line, and the description was the one that lost. */
.ident { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0;
  flex:1 1 auto }
.ident-row { display:flex; align-items:center; gap:8px; min-width:0; max-width:100% }
.ident h1 { margin:0; font-size:16.5px; font-weight:600; letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ident-sub { font-family:var(--mono); font-size:11px; color:var(--mut); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100% }
#rename-input { font-family:inherit; font-size:16.5px; font-weight:600; padding:3px 9px;
  border-radius:8px; min-width:0; max-width:320px; border:1px solid rgba(27,79,156,.5);
  background:var(--surface); color:var(--ink) }
#rename-input:focus { outline:none; box-shadow:0 0 0 3px rgba(27,79,156,.16) }

.appbar-right { margin-left:auto; display:flex; align-items:center; gap:14px; flex:none }
.status { display:flex; align-items:center; gap:8px; padding:6px 13px 6px 10px; border-radius:20px;
  background:var(--red-wash); border:1px solid var(--red-line); font-size:11.5px; font-weight:500;
  color:var(--red); white-space:nowrap }
.status i { width:7px; height:7px; border-radius:50%; background:var(--red);
  animation:pulse 2s infinite }
.status.warn { background:#fff8ec; border-color:rgba(176,106,0,.22); color:var(--amber) }
.status.warn i { background:var(--amber) }
/* The architecture line. It FOLDS -- no ellipsis, nothing clipped: a sentence half-shown reads as
   broken, and this one is a claim about the system, so it is either legible or absent. Bounded so
   it cannot crowd the study identity, and set in the ink colour rather than a muted grey. */
.arch { flex:0 1 auto; margin:0; min-width:150px; max-width:400px; padding:0;
  font:italic 400 12.5px/1.4 var(--display); color:var(--ink);
  white-space:normal; overflow-wrap:break-word }
.arch b { font-family:var(--wm); font-style:normal; font-weight:800; color:var(--ink) }

/* The account collapses to the picture. The address and sign-out are one click away, which is
   also what stops a shared screen showing whose account it is at a glance. */
.acct { position:relative; display:flex; align-items:center; flex:none }
.avatar-btn { display:grid; place-items:center; width:36px; height:36px; padding:0; border:none;
  border-radius:9999px; background:var(--ink); cursor:pointer; overflow:hidden }
.avatar-btn:hover { box-shadow:0 0 0 2px rgba(206,17,38,.35) }
.acct img { width:36px; height:36px; border-radius:9999px; display:block; object-fit:cover }
.avatar-fallback { font:600 13.5px var(--ui); color:#fff; letter-spacing:.04em }
.acct-menu { top:44px; right:0; width:auto; min-width:210px; max-width:290px }
.acct-who { padding:8px 9px 9px; margin-bottom:3px; border-bottom:1px solid var(--line);
  font:400 11px var(--mono); color:var(--mut2); overflow-wrap:anywhere }

.btn-icon { flex:none; border:none; background:none; cursor:pointer; padding:5px;
  border-radius:7px; color:var(--mut); line-height:0; opacity:0; transition:.15s }
.appbar:hover .btn-icon, .btn-icon:focus-visible { opacity:1 }
.btn-icon:hover { color:var(--red); background:rgba(206,17,38,.08) }

/* ── body: rail | work ───────────────────────────────────────────────────────── */
.body { flex:1; display:flex; min-height:0 }

.rail { width:268px; flex:none; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0 }
.rail-top { padding:14px 14px 0 }
.rail-note { margin:9px 2px 12px; font-size:10.5px; color:var(--mut);
  display:flex; align-items:center; gap:6px }
.rail-note::before { content:""; width:3px; height:3px; border-radius:50%; background:var(--red);
  flex:none }
.rail-scroll { flex:1; overflow-y:auto; min-height:0; border-top:1px solid var(--line) }
.rail-label { padding:13px 16px 8px; font-size:9px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut) }
.rail-list { padding:0 0 14px }

.study { position:relative; display:flex; align-items:center; gap:10px; padding:9px 14px;
  cursor:pointer; border-left:2.5px solid transparent; width:100%; text-align:left; font:inherit;
  color:inherit; background:none }
.study:hover { background:var(--surface2) }
.study.on { background:#f0f4fb; border-left-color:var(--blue) }
.study.on .study-meta b { color:var(--blue) }
.study-thumb { width:34px; height:40px; flex:none; border-radius:5px; object-fit:cover;
  background:var(--dark); border:1px solid var(--line) }
.study-thumb.placeholder { display:grid; place-items:center; color:rgba(255,255,255,.35);
  font-size:9px }
.study-meta { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px }
.study-meta b { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap }
.study-meta span { font-family:var(--mono); font-size:10px; color:rgba(0,0,0,.38);
  display:flex; align-items:center; gap:5px }
.study-del { opacity:0; flex:none; border:none; background:none; cursor:pointer; padding:4px;
  border-radius:5px; color:rgba(0,0,0,.38); line-height:0 }
.study:hover .study-del, .study-del:focus-visible, .study-del[aria-expanded="true"] { opacity:1 }
.study-del:hover { color:var(--ink); background:rgba(0,0,0,.07) }
/* Re-run lives here, as the design has it: an action on a study in the list, not a button in the
   report footer that only ever applied to whichever study happened to be open. */
.menu { position:absolute; top:32px; right:8px; width:184px; padding:5px; z-index:25;
  background:var(--surface); border:1px solid rgba(0,0,0,.1); border-radius:10px;
  box-shadow:0 18px 36px -16px rgba(12,14,17,.45) }
.menu button { display:flex; align-items:center; gap:8px; width:100%; padding:8px 9px;
  border:none; border-radius:7px; background:none; cursor:pointer; font:500 11.5px var(--ui);
  color:var(--ink); text-align:left }
.menu button:hover { background:#f2f5fb }
.menu button:disabled { opacity:.55; cursor:default; background:none }
.menu button.del { color:var(--red) }
.menu button.del:hover { background:var(--red-wash) }
/* `.pop` is the marker for a menu that closeMenus() may remove -- the per-study ones, created and
   destroyed on demand. The account menu shares the look and is NOT a `.pop`, because it lives in
   the shell. Purely a lifetime marker; it carries no style. */
.pop { }
.dot { width:6px; height:6px; border-radius:50%; flex:none; background:var(--mut) }
.dot.ok { background:var(--green) } .dot.warn { background:var(--amber) }

/* ── work area ───────────────────────────────────────────────────────────────── */
.work { flex:1; display:flex; min-width:0 }

/* the viewer: dark, because that is where a radiograph reads correctly */
.viewer { flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  background:var(--dark); overflow:hidden }
.vtools { flex:none; height:38px; display:flex; align-items:center; gap:12px; padding:0 14px;
  background:var(--dark2); border-bottom:1px solid var(--dark-line) }
.vcount { font-size:10.5px; color:rgba(255,255,255,.75); letter-spacing:.06em }
.vsub { font-size:10.5px; color:rgba(255,255,255,.45); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; flex:1 }
.vbtn { flex:none; font:500 10.5px var(--ui); letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:7px; cursor:pointer; border:1px solid var(--dark-line);
  background:transparent; color:rgba(255,255,255,.6) }
.vbtn:hover { color:#fff; border-color:rgba(255,255,255,.3) }
.vbtn[aria-pressed="true"] { background:var(--red); border-color:var(--red); color:#fff }
.vbtn.ic { padding:4px 9px; font-size:13px; letter-spacing:0; border:none }
.vgroup { flex:none; display:flex; align-items:center; gap:2px; padding:2px;
  border:1px solid var(--dark-line); border-radius:8px }
.vzoom { min-width:44px; text-align:center; font-size:10.5px; color:rgba(255,255,255,.75) }
/* Zoom and pan are a TRANSFORM on the element. The pixels are never resampled by us and the file
   behind them is untouched -- the same rule as invert: display only. */
/* The cursor names the live tool, so the mode is visible without reading the toolbar. */
.stage.t-pan.zoomed { cursor:grab }
.stage.t-pan.dragging { cursor:grabbing }
.stage.t-zoom { cursor:zoom-in }
.stage.t-zoom.dragging { cursor:ns-resize }
.stage.dragging img { transition:none }
.vbtn.tool { letter-spacing:.06em }
.stage { flex:1; min-height:0; display:grid; place-items:center; position:relative;
  padding:18px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%, #1a1e24, #07080a 70%) }
/* Bounded, not bleeding to the edges: the design gives the film a frame of its own so the stage
   reads as a lightbox. Edge to edge it looked like a background image. */
.stage img { width:min(100%,560px); max-height:100%; object-fit:contain; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 18px 44px -18px #000;
  transition:transform .18s cubic-bezier(.2,.8,.2,1); will-change:transform }
.stage.inv img { filter:invert(1) }
.overlay { position:absolute; font:400 10px/1.7 var(--mono); color:rgba(255,255,255,.5);
  pointer-events:none; white-space:pre-line }
.overlay.tl { top:14px; left:18px } .overlay.bl { bottom:14px; left:18px }
/* Bottom-right, on the film itself, so the image cannot be screenshotted without it. */
.stage-warn { position:absolute; bottom:14px; right:18px; padding:4px 9px; border-radius:5px;
  background:rgba(206,17,38,.16); border:1px solid rgba(206,17,38,.4); font-size:9.5px;
  font-weight:600; letter-spacing:.06em; color:#ff8b98; pointer-events:none }
.flag { position:absolute; top:14px; right:18px; display:flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:20px; background:rgba(206,17,38,.16);
  border:1px solid rgba(206,17,38,.4); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  color:#ffdfe3 }
.strip { flex:none; display:flex; gap:8px; padding:9px 12px; overflow-x:auto;
  background:var(--dark2); border-top:1px solid var(--dark-line) }
.strip:empty { display:none }
.thumb { flex:none; width:60px; border:none; background:none; padding:0; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; align-items:center }
.thumb .box { width:100%; height:60px; border-radius:6px; overflow:hidden; background:#000;
  border:1.5px solid rgba(255,255,255,.14); line-height:0 }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; opacity:.62 }
.thumb figcaption { font:400 9px var(--mono); letter-spacing:.1em;
  color:rgba(255,255,255,.4) }
.thumb.on .box { border-color:var(--red) }
.thumb.on img { opacity:1 }
.thumb.on figcaption { color:#fff }
.thumb:hover img { opacity:.9 }
.thumb.ex .box { border-color:var(--amber) }

/* the report: paper, beside the film */
/* The width is a CSS variable so the splitter can move it without touching the rule. */
.report { flex:0 0 var(--report-w, clamp(320px, 34%, 460px)); min-width:300px;
  background:var(--surface); display:flex; flex-direction:column; min-height:0 }

/* The splitter. 6px of hit area for a 2px grip -- a 2px target is a target you miss. */
.splitter { flex:none; width:6px; cursor:col-resize; display:flex; align-items:center;
  justify-content:center; background:var(--line); transition:background .12s }
.splitter:hover, .splitter.dragging { background:rgba(27,79,156,.35) }
.splitter:focus-visible { background:rgba(27,79,156,.45) }
.splitter i { width:2px; height:32px; border-radius:2px; background:rgba(0,0,0,.22) }
/* While dragging, the pointer owns the page: without this every text node it crosses gets
   selected and the film flickers as the browser tries to drag it instead. */
body.resizing { cursor:col-resize; user-select:none }
body.resizing .stage img { transition:none }
.rhead { flex:none; height:46px; display:flex; align-items:center; gap:10px; padding:0 22px;
  border-bottom:1px solid var(--line) }
/* Small caps: "AI Report" sets as AI R-EPORT, the two initials at cap height and the rest as small
   capitals. It is the design's treatment and it is why the text is "AI Report" rather than
   "AI REPORT" -- uppercase input has no lowercase for the feature to act on. */
/* Always visible, not on hover like the rename pencil: it is the only way out of an open study
   short of deleting it, and an exit that has to be discovered is not an exit. */
.rhead-close { margin-left:auto; opacity:1 }
.rhead-close:hover { color:var(--red); background:rgba(206,17,38,.08) }
.badge-pill + .rhead-close { margin-left:0 }
.rhead-title { font-family:var(--display); font-size:21px; font-weight:500;
  font-variant-caps:small-caps; letter-spacing:.01em; color:var(--ink) }
/* A flex COLUMN, not a plain block: `.center` claims the leftover height with flex:1, and without
   this the centred screens were content-height with the panel's white showing beneath them. */
#report-slot { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column }
.report-body { padding:20px 22px }
.rule { display:none }                      /* the design separates sections by space, not a rule */
.report-section { margin-bottom:22px }
.section-label { font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(0,0,0,.36); margin-bottom:8px }
.lines { display:flex; flex-direction:column; gap:9px }
/* One line, one red bullet. The dot is what makes a report read as a list of findings rather than
   a paragraph, and it is the design's signature on this panel. */
.line { display:flex; gap:10px; align-items:flex-start }
.line::before { content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--red); margin-top:8px }
.line span { font:400 13px/1.55 var(--report); color:var(--body-fg); text-wrap:pretty }
/* `soft` survives for the per-image cautions in the printed copy, which ARE a different kind of
   statement. No report line uses it: they all render identically. */
.line.soft span { color:var(--mut2) }
.line.soft::before { background:var(--line2) }
.report-fine { margin:0; font:400 10.5px/1.5 var(--ui); color:rgba(0,0,0,.38) }
.report-fine a { color:var(--blue) }
.note { display:flex; gap:8px; margin-top:16px; padding:10px 12px; border-radius:var(--r);
  background:#fff8ec; border:1px solid rgba(176,106,0,.2) }
.note p { margin:0; font-size:11.5px; line-height:1.5; color:#6b4300 }

/* A refusal must not look like a report. */
.banner { display:flex; gap:9px; align-items:flex-start; margin:0 0 16px; padding:10px 12px;
  border-radius:var(--r); font-size:11.5px; line-height:1.5;
  background:var(--red-wash); border:1px solid var(--red-line); color:#7d1220 }
.banner.warn { background:#fff8ec; border-color:rgba(176,106,0,.2); color:#6b4300 }
.banner b { display:block; font-size:9px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:3px }

.badge-pill { font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; white-space:nowrap; margin-left:auto }
.rhead .badge-pill { margin-left:auto }
.badge-pill.primary { background:#eaf0f9; color:var(--blue) }
.badge-pill.warning { background:#fff4e2; color:var(--amber) }
.badge-pill.danger { background:var(--red-wash); color:var(--red) }

.rfoot { flex:none; display:flex; gap:8px; padding:11px 18px; background:var(--surface2);
  border-top:1px solid var(--line) }
/* Pinned to the bottom of the panel, above the buttons. */
.panel-fine { flex:none; margin:0; padding:11px 22px 0; border-top:1px solid var(--line);
  background:var(--surface2) }
/* One rule between them, not two. */
.panel-fine + .rfoot { border-top:none; padding-top:9px }

/* ── footer ──────────────────────────────────────────────────────────────────── */
/* Left-aligned, under the report column, not centred across a window whose middle is the film. */
.appfoot { flex:none; display:flex; align-items:center; justify-content:flex-start; gap:7px;
  min-height:30px; padding:7px 18px; background:var(--surface);
  border-top:1px solid var(--line); font-size:10.5px; color:var(--mut); flex-wrap:wrap }
.appfoot a { color:var(--blue) }
.appfoot a:hover { color:var(--red) }
.appfoot b { font-weight:600; color:var(--mut2) }
.appfoot .sep { color:var(--line2) }

/* ── buttons ─────────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:12px; font-weight:500; padding:8px 13px; border-radius:var(--r);
  cursor:pointer; border:1px solid var(--line2); background:var(--surface); color:var(--ink);
  transition:.15s }
.btn:hover { border-color:var(--red); color:var(--red) }
.btn:disabled { opacity:.5; cursor:default }
.btn.primary { width:100%; border:none; color:#fff; background:var(--red); font-weight:600 }
.btn.primary:hover { background:var(--red-dk); color:#fff }
.btn.danger { border:none; background:var(--red); color:#fff; font-weight:600 }
.btn.danger:hover { background:var(--red-dk); color:#fff }
.btn.dark { border:none; background:var(--ink); color:#fff; font-weight:600 }
.btn.dark:hover { background:#000; color:#fff }
.btn.ghost { border:none; background:none; color:var(--mut); font-size:11px; padding:5px 7px }
.btn.ghost:hover { color:var(--red) }

/* When there is no film beside it, the report panel IS the page -- signed out, and signed in with
   nothing open. Left at its fixed 460px the dropzone sat in a narrow column with two thirds of the
   window bare. */
body.out .report, body.nostudy .report { flex:1 1 auto; background:var(--page) }
body.out .splitter, body.nostudy .splitter { display:none }
body.out .rhead, body.nostudy .rhead, body.out .rfoot { display:none }

body.out .ident h1 { font-size:13px; color:var(--mut2); font-weight:500 }

/* ── centred screens: login, empty, processing, error ────────────────────────── */
.center { flex:1; display:grid; place-items:center; padding:32px; overflow-y:auto;
  background:var(--page) }
.card { width:100%; max-width:392px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:26px; box-shadow:0 1px 2px rgba(0,0,0,.04),
  0 12px 32px -12px rgba(0,0,0,.12); position:relative; overflow:hidden }
.card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--red) }
.hero { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  margin-bottom:20px }
.hero img { display:block }
.hero h2 { margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em }
.hero p { margin:0; font-size:12px; color:var(--mut2); line-height:1.55 }
/* The architecture line. Set in the display serif with a red rule, so it reads as a statement about
   the system rather than another line of interface copy. */
.quote { margin:2px 0 4px; padding:0 0 0 12px; border-left:2px solid var(--red);
  font:400 12.5px/1.6 var(--display); font-style:italic; color:var(--mut2); text-align:left }
.quote b { font-family:var(--wm); font-style:normal; font-weight:800; color:var(--ink) }
.box { font-size:12px; line-height:1.55; color:var(--mut2) }
.chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:4px }
.chip { font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:20px; background:var(--canvas); color:var(--mut2) }
.accept { display:flex; gap:9px; align-items:flex-start; margin:16px 0; font-size:11.5px;
  line-height:1.5; color:var(--mut2) }
.accept input { margin:2px 0 0; accent-color:var(--red); flex:none; width:15px; height:15px }
.glogin { display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  font-family:inherit; font-size:13px; font-weight:500; padding:10px 14px; border-radius:var(--r);
  cursor:pointer; border:1px solid var(--line2); background:var(--surface); color:var(--ink) }
.glogin:hover { border-color:rgba(0,0,0,.28) }
.glogin:disabled { opacity:.55; cursor:default }
.errbox { margin-bottom:14px; padding:9px 11px; border-radius:8px; font-size:11.5px;
  line-height:1.5; background:var(--red-wash); border:1px solid var(--red-line); color:#7d1220 }
.warnbox { margin-bottom:14px; padding:9px 11px; border-radius:8px; font-size:11.5px;
  line-height:1.5; background:#fff8ec; border:1px solid rgba(176,106,0,.2); color:#6b4300 }

.dropzone { width:100%; max-width:440px; display:flex; flex-direction:column;
  align-items:center; gap:10px; padding:30px 26px; border-radius:14px; cursor:pointer;
  font:inherit; color:var(--ink); border:1.5px dashed var(--line2); background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.03) }
.dropzone h2 { margin:2px 0 0; font-size:15px; font-weight:600; letter-spacing:-.01em }
.dropzone p { margin:0; font-size:12px; line-height:1.55; color:var(--mut2); text-align:center }
.dropzone .warnbox { margin:6px 0 0; text-align:left }
.dropzone:hover, .dropzone.over { border-color:var(--red); background:var(--red-wash) }
/* Explicit, not left to the global rule: this is the click path to the file picker, so losing its
   focus ring would make the primary action unreachable by keyboard. There is a test. */
.dropzone:focus-visible { outline:2px solid var(--blue); outline-offset:3px;
  border-color:var(--red) }
.dropzone b { font-size:13px; font-weight:600 }
.dropzone span { font-size:11.5px; color:var(--mut) }
.types { display:flex; gap:6px; margin-top:2px }
.types span { font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:20px;
  background:var(--canvas); color:var(--mut2) }
.processing { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center }
.processing::before { content:""; width:26px; height:26px; border-radius:50%;
  border:2.5px solid var(--faint); border-top-color:var(--red); animation:spin .8s linear infinite }

/* ── terms sheet ─────────────────────────────────────────────────────────────── */
.scrim { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:24px;
  background:rgba(12,14,17,.55) }
.sheet { width:100%; max-width:680px; max-height:86vh; background:var(--surface);
  border-radius:14px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.4) }
.sheet-head { flex:none; display:flex; align-items:center; gap:10px; padding:14px 20px;
  border-bottom:1px solid var(--line); font-size:14px; font-weight:600 }
.sheet-head .btn { margin-left:auto }
.sheet-inner { overflow-y:auto; padding:20px 24px 26px }
.md { font-size:12.5px; line-height:1.62; color:var(--ink) }
.md h1 { font-size:16px; margin:0 0 12px } .md h2 { font-size:13px; margin:20px 0 7px }
.md h3 { font-size:12px; margin:16px 0 6px; color:var(--mut2) }
.md p, .md li { margin:0 0 9px } .md ul, .md ol { margin:0 0 9px; padding-left:20px }
.md code { font-family:var(--mono); font-size:11.5px; background:var(--canvas);
  padding:1px 4px; border-radius:4px }
.md table { border-collapse:collapse; width:100%; margin:0 0 12px; font-size:11.5px }
.md th, .md td { border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top }
.md th { background:var(--surface2); font-weight:600 }

/* ── dialog ──────────────────────────────────────────────────────────────────── */
.dialog { width:100%; max-width:440px; background:var(--surface); border-radius:14px;
  overflow:hidden; box-shadow:0 24px 60px -12px rgba(0,0,0,.4) }
.dialog-accent { height:3px; background:var(--red) }
.dialog-body { padding:20px 22px 4px }
.dialog-body h2 { margin:0 0 8px; font-size:15px; font-weight:600 }
.dialog-body p { margin:0 0 10px; font-size:12.5px; line-height:1.55; color:var(--mut2) }
.dialog-foot { display:flex; justify-content:flex-end; gap:8px; padding:14px 22px 18px }

/* ── toast ───────────────────────────────────────────────────────────────────── */
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  max-width:460px; padding:10px 15px; border-radius:var(--r); font-size:12px; line-height:1.5;
  background:var(--ink); color:#fff; box-shadow:0 12px 32px -10px rgba(0,0,0,.5) }

/* ── narrow screens: the film stacks above the report ────────────────────────── */
@media (max-width:960px) {
  .rail { width:212px }
  .work { flex-direction:column }
  /* Stacked, so the vertical splitter has nothing to divide -- and a col-resize handle on a
     horizontal boundary would drag the wrong way. */
  .splitter { display:none }
  .report { flex:1 1 auto !important; border-top:1px solid var(--line); min-width:0 }
  .viewer { flex:0 0 46vh }
}
/* Kept for as long as there is room for it to fold into. Below this the bar has the lockup, the
   study and the account to fit and the sentence would push the study identity out. */
@media (max-width:1100px) { .arch { max-width:230px } }
@media (max-width:900px) { .arch { display:none } }
@media (max-width:660px) {
  .rail { display:none }
  .ident-sub { display:none }
}

/* ── print: A4, on the company letterhead ────────────────────────────────────────
   Layout follows the production report: letterhead, rule, centred title, a boxed information
   panel, then bulleted sections. A4 -- the reference declared 612x792pt, which is US Letter, and
   this is printed in Bangalore. */
@page { size: A4; margin: 14mm 15mm 16mm; }

#print-area { display:none }
@media print {
  html, body { background:#fff; color:#000 }
  #app > .appbar, #app > .body, .appfoot, .splitter { display:none !important }
  .toast, .scrim { display:none !important }
  #print-area { display:block }

  /* letterhead */
  #print-area .lh { display:flex; align-items:center; gap:14px; padding:0 0 8px }
  #print-area .lh-mark { width:58px; height:58px; object-fit:contain; flex:none }
  #print-area .lh-txt { min-width:0 }
  #print-area .lh-org { font:700 15pt/1.15 var(--ui); letter-spacing:-.01em; color:#000 }
  #print-area .lh-addr { font:400 8.5pt/1.5 var(--ui); color:#222; margin-top:3pt }
  #print-area .lh-contact { font:400 8.5pt/1.5 var(--ui); color:#222; display:flex; gap:7px }
  #print-area .lh-bar { color:#999 }
  #print-area .lh::after { content:none }
  #print-area .lh + .pr-title { border-top:1.2pt solid #000; padding-top:12pt }

  /* title */
  #print-area .pr-title { display:flex; align-items:baseline; justify-content:center; gap:9px;
    margin:0 0 12pt }
  #print-area .pr-title h1 { margin:0; font:700 13.5pt var(--ui); letter-spacing:0;
    font-variant-caps:normal; color:#000 }
  #print-area .pr-draft { font:600 7pt var(--ui); letter-spacing:.12em; padding:2pt 5pt;
    border:.8pt solid #CE1126; border-radius:3pt; color:#CE1126 }

  /* the boxed information panel */
  #print-area .pr-box { border:.8pt solid #999; background:#f6f6f6; padding:8pt 10pt 9pt;
    margin:0 0 14pt }
  #print-area .pr-box-head { text-align:center; font:700 10.5pt var(--ui); color:#000;
    margin-bottom:7pt }
  #print-area .pr-grid { display:grid; grid-template-columns:1fr 1fr; gap:4pt 18pt }
  #print-area .pr-cell { font:400 9pt/1.45 var(--ui); color:#000 }
  #print-area .pr-cell b { font-weight:700; margin-right:4pt }

  /* sections: BULLETED, which the reference is not -- its lines run as loose paragraphs and a
     reader has to find where each finding starts */
  #print-area .report-section { margin:0 0 13pt }
  #print-area .section-label { font:700 10.5pt var(--ui); letter-spacing:0; text-transform:none;
    color:#000; margin-bottom:6pt }
  #print-area .lines { gap:5pt }
  #print-area .line { align-items:flex-start; gap:8pt }
  #print-area .line::before { width:3.4pt; height:3.4pt; margin-top:5.4pt; background:#CE1126 }
  #print-area .line span { font:400 9.5pt/1.5 var(--report); color:#000 }
  #print-area .line.soft span { color:#333 }
  #print-area .line.soft::before { background:#999 }

  /* the caveat and the credit */
  #print-area .report-fine { margin:14pt 0 0; padding-top:6pt; border-top:.6pt solid #ccc;
    font:400 7.5pt/1.45 var(--ui); color:#444 }
  #print-area .lh-credit { margin:3pt 0 0; font:400 7pt/1.4 var(--ui); color:#777 }
}