/* ============================================================
   INBOX: LAST SEEN  —  NOVA Desktop
   Art direction: minimal, corporate, late-night, forensic, cold blue.
   Tension comes from empty space, warning states, and soft glitches.
   ============================================================ */

/* premium self-hosted typeface (variable, latin subset, ~47KB, offline) */
@font-face{
  font-family:"InterVF";
  src:url("assets/inter.woff2") format("woff2");
  font-weight:100 900; font-display:swap; font-style:normal;
}

:root{
  /* surface neutrals */
  --bg:#130d10;            /* desktop backdrop (flagged warm night) */
  --bg-grad:#1a1013;
  --surface:#f7f8fa;       /* main windows / panels (off-white) */
  --surface-2:#eef0f3;     /* list rows */
  --surface-3:#e3e6ea;
  --ink:#1b2430;           /* primary text on surfaces */
  --ink-soft:#5a6675;
  --ink-faint:#8a94a1;
  --line:#d8dde3;          /* hairlines */
  --line-strong:#c3cad2;

  /* OUTBOX outbound accent — warm alert ember (was corporate blue; var name kept
     so ~150 usages flip in one place) */
  --blue:#e2503c;
  --blue-deep:#b23420;
  --blue-wash:#fae5e0;

  /* warning amber — recoverable alerts / suspicious logs */
  --amber:#c8861a;
  --amber-wash:#fbf2dd;

  /* error red — rare destructive / final warnings */
  --red:#cf3b3b;
  --red-wash:#fae3e3;

  /* hidden layer dark — recovery console / logs (terminal but readable) */
  --term-bg:#0a1014;
  --term-bg-2:#0f1a1f;
  --term-ink:#9fe8c6;
  --term-ink-dim:#5f8c78;
  --term-amber:#e8b563;
  --term-line:#16252b;

  /* type scale — single source of truth; snap new sizes to these */
  --fs-2xs:.72rem;
  --fs-xs:.8rem;
  --fs-sm:.86rem;
  --fs-md:.92rem;
  --fs-base:1rem;
  --fs-lg:1.05rem;
  --fs-xl:1.3rem;
  --fs-2xl:2.1rem;

  --radius:10px;
  --radius-sm:6px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.25);
  --font: "InterVF", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  --dur:.18s;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ font-size:calc(16px * var(--text-scale, 1)); }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:radial-gradient(1200px 800px at 70% -10%, var(--bg-grad), var(--bg) 60%);
  height:100vh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body[data-text="90"]{ --text-scale:.9; }
body[data-text="100"]{ --text-scale:1; }
body[data-text="110"]{ --text-scale:1.1; }
body[data-text="120"]{ --text-scale:1.2; }
body[data-text="130"]{ --text-scale:1.3; }
body[data-text="140"]{ --text-scale:1.4; }

/* high contrast */
body[data-contrast="high"]{ --ink:#000; --ink-soft:#1c2530; --line:#9aa3ad; --blue:#b3260f; }
body[data-contrast="high"] .window{ border:2px solid #000; }

/* ============================================================
   DARK THEME  — recolors the app-window surfaces (the desktop
   shell, console, boot, and cutscenes are already dark).
   Token overrides handle most components; a few hardcoded
   light spots are overridden below.
   ============================================================ */
body[data-theme="dark"]{
  --surface:#10151c;        /* window / app background */
  --surface-2:#161c26;      /* rows, side panels, bars */
  --surface-3:#1f2734;      /* hover, fills */
  --ink:#dde4ec;            /* primary text */
  --ink-soft:#97a3b2;
  --ink-faint:#6a7686;
  --line:#252d39;
  --line-strong:#37414f;
  --blue-wash:#2e1713;      /* active / selected tint (warm) */
  --amber-wash:#2b2310;
  --red-wash:#2e1616;
  --shadow:0 20px 55px -20px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.5);
}
/* hardcoded light surfaces -> dark */
body[data-theme="dark"] .msg-body,
body[data-theme="dark"] .msg-body p,
body[data-theme="dark"] .doc-text,
body[data-theme="dark"] .doc h1{ color:var(--ink); }
body[data-theme="dark"] .bubble{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
body[data-theme="dark"] .doc,
body[data-theme="dark"] .doc.note,
body[data-theme="dark"] .doc.receipt{ background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:0 2px 10px rgba(0,0,0,.4); }
body[data-theme="dark"] .window-bar{ background:linear-gradient(180deg,#1b222d,var(--surface-2)); }
body[data-theme="dark"] .doc-brand,
body[data-theme="dark"] .side-item.active,
body[data-theme="dark"] .ending-tone,
body[data-theme="dark"] .cf-reconstruct p{ color:#ff9f86 !important; }
body[data-theme="dark"] .chat-stream{ background:linear-gradient(180deg,var(--surface),var(--surface-2)); }
body[data-theme="dark"] .reconstruct-blank{ background:var(--blue-wash); color:#ffd2c4; border-color:var(--blue); }
body[data-theme="dark"] .cf-hint-box,
body[data-theme="dark"] .pw-hint,
body[data-theme="dark"] .board-notes li{ color:#e3c47e; }
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
body[data-theme="dark"] .pw-input{ background:var(--surface-2); color:var(--ink); border-color:var(--line-strong); }
body[data-theme="dark"] .topbar-logo,
body[data-theme="dark"] .boot-name{ color:#eaf0f7; }
body[data-theme="dark"] .file-thumb,
body[data-theme="dark"] .avatar.portrait{ box-shadow:0 0 0 1px rgba(0,0,0,.4); }

/* reduced motion */
body[data-motion="reduced"] *{ animation:none !important; transition:none !important; }
body[data-motion="reduced"] .glitch{ filter:none !important; }

button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
/* skip-to-content link — hidden until keyboard-focused */
.skip-link{ position:fixed; left:10px; top:-60px; z-index:2000; background:var(--surface); color:var(--ink);
  padding:9px 16px; border-radius:8px; box-shadow:var(--shadow); font-size:var(--fs-sm); font-weight:600;
  text-decoration:none; transition:top .16s ease; }
.skip-link:focus{ top:10px; outline:2px solid var(--blue); outline-offset:2px; }
#surface:focus{ outline:none; }

/* ---------- generic buttons ---------- */
.btn{ border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:9px 16px; border-radius:var(--radius-sm); font-size:var(--fs-md); font-weight:600; transition:var(--dur); }
.btn:hover{ background:var(--surface-2); }
.btn-primary{ background:var(--blue); border-color:var(--blue-deep); color:#fff; }
.btn-primary:hover{ background:var(--blue-deep); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); }
.btn-danger{ color:var(--red); border-color:var(--red); background:var(--red-wash); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.linkbtn{ background:none; border:none; color:var(--ink-faint); text-decoration:underline; font-size:var(--fs-xs); padding:4px; }
.iconbtn{ background:none; border:none; color:inherit; font-size:1.1rem; width:30px; height:30px;
  border-radius:6px; display:inline-flex; align-items:center; justify-content:center; transition:var(--dur); }
.iconbtn:hover{ background:rgba(120,130,145,.18); }

/* ============================================================
   BOOT / LOGIN
   ============================================================ */
.boot{ position:fixed; inset:0; display:grid; place-items:center; z-index:100;
  background:linear-gradient(rgba(8,11,16,.74), rgba(6,8,12,.92)), url("assets/wallpaper.webp?v=43") center/cover no-repeat, #0a0d12; }
.boot-inner{ text-align:center; animation:fade .8s ease; }
.boot-brand{ margin-bottom:34px; }
.boot-logo{ font-size:var(--fs-2xl); font-weight:800; letter-spacing:-1px; color:#eaf0f7; }
.boot-logo span{ color:var(--blue); font-weight:400; margin-left:2px; }
.boot-sub{ color:#6b7888; font-size:var(--fs-xs); letter-spacing:3px; text-transform:uppercase; margin-top:6px; }
.boot-card{ width:344px; background:linear-gradient(180deg, rgba(20,27,37,.82), rgba(14,19,27,.9));
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:26px 24px; box-shadow:0 30px 80px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.boot-avatar{ width:48px; height:48px; }
.boot-account{ display:flex; gap:12px; align-items:center; text-align:left; padding-bottom:16px;
  border-bottom:1px solid #1d2733; margin-bottom:16px; }
.avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#e2503c,#b23420);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:var(--fs-md); flex:none; }
.avatar.portrait{ overflow:hidden; background:none; box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.2); }
.avatar.portrait svg{ width:100%; height:100%; display:block; border-radius:50%; }
.avatar.portrait.photo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
  filter:saturate(.9) contrast(1.02); }
.boot-name{ color:#e7edf4; font-weight:600; }
.boot-mail{ color:#6b7888; font-size:var(--fs-xs); }
.boot-note{ color:#9aa6b4; font-size:var(--fs-sm); line-height:1.5; text-align:left; }
.boot-hook{ color:#cdd6e0; font-style:italic; font-size:var(--fs-md); margin:18px 0; }
.boot-enter{ width:100%; }
.boot-continue{ width:100%; margin-top:10px; color:#cdd6e0; border-color:#2a3644; }
.boot-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; }
.boot-build{ color:#465261; font-size:.68rem; }

/* ============================================================
   DESKTOP SHELL
   ============================================================ */
.desktop{ position:fixed; inset:0; display:flex; flex-direction:column; animation:fade .5s ease; }
.topbar{ height:42px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; background:rgba(10,14,19,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06); color:#cdd6e0; z-index:30; }
.topbar-left,.topbar-right{ display:flex; align-items:center; gap:12px; }
.topbar-logo{ background:none; border:none; color:#eaf0f7; font-weight:800; font-size:var(--fs-md); letter-spacing:-.5px; }
.topbar-logo span{ color:var(--blue); font-weight:400; }
.topbar-account{ color:#6b7888; font-size:var(--fs-xs); }
.case-status{ color:#9aa6b4; font-size:var(--fs-xs); letter-spacing:.5px; }
.topbar-clock{ color:#8a94a1; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.topbar .iconbtn:hover{ background:rgba(255,255,255,.1); }

/* objective ribbon — always-on "what to do next" */
.objective{ flex:none; display:flex; align-items:center; gap:12px; width:100%;
  padding:7px 16px; border:none; border-bottom:1px solid rgba(255,255,255,.07); text-align:left; cursor:pointer;
  background:linear-gradient(180deg, rgba(14,19,28,.9), rgba(10,14,20,.78));
  color:#c7d0db; font:inherit; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background var(--dur); }
.objective:hover{ background:linear-gradient(180deg, rgba(22,30,44,.95), rgba(15,21,31,.86)); }
.objective:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.obj-tag{ flex:none; font-weight:800; font-size:var(--fs-2xs); letter-spacing:.6px; text-transform:uppercase; color:var(--blue); }
.objective[data-mode="accuse"] .obj-tag{ color:var(--amber); }
.obj-text{ flex:1; min-width:0; font-size:var(--fs-xs); color:#c7d0db; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.obj-text b{ color:#eaf0f7; font-weight:700; }
.obj-go{ flex:none; font-size:var(--fs-2xs); font-weight:600; color:var(--blue); opacity:.85; }
.objective[data-mode="accuse"] .obj-go{ color:var(--amber); }
body[data-device="mobile"] .obj-go{ display:none; }

.surface{ position:relative; flex:1; overflow:hidden;
  background:linear-gradient(rgba(10,13,19,.55), rgba(8,11,16,.72)), url("assets/wallpaper.webp?v=43") center/cover no-repeat fixed; }
.desktop-icons{ position:absolute; top:16px; left:16px; display:flex; flex-direction:column;
  gap:6px; z-index:1; }
.dicon{ width:84px; padding:10px 6px; border:none; background:transparent; color:#c4ccd6;
  border-radius:8px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  font-size:var(--fs-2xs); transition:var(--dur); }
.dicon:hover{ background:rgba(255,255,255,.07); }
.dicon .glyph{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(160deg,#1e2733,#161d27); border:1px solid rgba(255,255,255,.07); }
.dicon .glyph svg{ width:22px; height:22px; }
.dicon .badge{ position:absolute; }
.dicon.locked{ opacity:.4; }
.dicon-wrap{ position:relative; }
.dicon-wrap .badge{ position:absolute; top:4px; right:14px; }

.badge{ min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--blue);
  color:#fff; font-size:.62rem; font-weight:700; display:inline-flex; align-items:center;
  justify-content:center; line-height:1; }
.badge.amber{ background:var(--amber); }
.badge.red{ background:var(--red); }

/* ---------- dock ---------- */
.dock{ flex:none; height:58px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(10,14,19,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.06);
  z-index:30; padding:0 12px; }
.dock-app{ position:relative; width:42px; height:42px; border-radius:11px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,#1e2733,#151c25); color:#c4ccd6; display:grid; place-items:center;
  transition:var(--dur); }
.dock-app:hover{ transform:translateY(-3px); border-color:rgba(120,160,240,.5); }
.dock-app svg{ width:22px; height:22px; }
.dock-app.active::after{ content:""; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--blue); }
.dock-app.hidden-app{ background:linear-gradient(160deg,#10201b,#0a1410); border-color:#1d3a30; color:var(--term-ink); }
.dock-app .badge{ position:absolute; top:-5px; right:-5px; }
.dock-sep{ width:1px; height:26px; background:rgba(255,255,255,.1); margin:0 4px; }

/* ============================================================
   WINDOWS
   ============================================================ */
.windows{ position:absolute; inset:0; pointer-events:none; }
.window{ position:absolute; pointer-events:auto; background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(0,0,0,.18); min-width:340px; min-height:240px; animation:winpop .22s ease; }
@keyframes winpop{ from{ opacity:0; transform:scale(.985) translateY(8px); } to{ opacity:1; transform:none; } }
.window.minimized{ display:none; }
.window-bar{ height:38px; flex:none; display:flex; align-items:center; gap:10px; padding:0 10px 0 14px;
  background:var(--surface-2); border-bottom:1px solid var(--line); cursor:grab; user-select:none; }
.window-bar:active{ cursor:grabbing; }
.window-dot{ width:9px; height:9px; border-radius:50%; background:var(--blue); flex:none; }
.window-title{ font-size:var(--fs-sm); font-weight:600; margin:0; color:var(--ink); flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.window-controls{ display:flex; gap:2px; }
.window-controls .iconbtn{ width:26px; height:26px; color:var(--ink-soft); }
.window-body{ flex:1; overflow:hidden; display:flex; min-height:0; background:var(--surface); }
/* resize grip — bottom-right corner, desktop floating windows only */
.win-resize{ position:absolute; right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; z-index:6; touch-action:none;
  background:linear-gradient(135deg, transparent 0 45%, var(--line-strong) 45% 55%, transparent 55% 66%, var(--line-strong) 66% 76%, transparent 76%);
  opacity:.55; transition:opacity var(--dur); }
.win-resize:hover{ opacity:1; }
.window.resizing{ user-select:none; }
.window.fullscreen .win-resize{ display:none; }

/* hidden-layer windows (recovery console) */
.window.terminal{ background:var(--term-bg); border-color:#13242c; }
.window.terminal .window-bar{ background:var(--term-bg-2); border-color:var(--term-line); }
.window.terminal .window-title,.window.terminal .window-controls .iconbtn{ color:var(--term-ink-dim); }
.window.terminal .window-dot{ background:var(--term-ink); }
.window.terminal .window-body{ background:var(--term-bg); color:var(--term-ink); font-family:var(--mono); }

/* ============================================================
   APP LAYOUTS (mail / chat / files share a two-pane shell)
   ============================================================ */
.app{ display:flex; width:100%; height:100%; min-height:0; }
.app-side{ width:172px; flex:none; background:var(--surface-2); border-right:1px solid var(--line);
  padding:12px 8px; overflow-y:auto; }
.side-head{ font-size:.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint);
  padding:6px 10px; }
.side-item{ width:100%; text-align:left; border:none; background:none; padding:8px 10px; border-radius:6px;
  font-size:var(--fs-sm); color:var(--ink-soft); display:flex; align-items:center; justify-content:space-between;
  gap:8px; transition:var(--dur); }
.side-item:hover{ background:var(--surface-3); }
.side-item.active{ background:var(--blue-wash); color:var(--blue-deep); font-weight:600; }
.side-item .badge{ font-size:.6rem; }

.app-list{ width:280px; flex:none; border-right:1px solid var(--line); overflow-y:auto; background:var(--surface); }
.app-list.wide{ width:340px; }
.list-search{ position:sticky; top:0; background:var(--surface); padding:10px; border-bottom:1px solid var(--line); z-index:2; }
.list-search input{ width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:6px;
  font-size:var(--fs-sm); background:var(--surface-2); color:var(--ink); }
.list-row{ width:100%; text-align:left; border:none; background:none; padding:11px 14px;
  border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px; transition:var(--dur); }
.list-row:hover{ background:var(--surface-2); }
.list-row.active{ background:var(--blue-wash); }
.list-row.unread .lr-from{ font-weight:700; color:var(--ink); }
.list-row.unread::before{ content:""; position:absolute; }
.lr-top{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.lr-from{ font-size:var(--fs-sm); color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-time{ font-size:var(--fs-2xs); color:var(--ink-faint); flex:none; }
.lr-subj{ font-size:var(--fs-xs); color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-prev{ font-size:.76rem; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; }
.lr-tags{ display:flex; gap:4px; margin-top:2px; }
.minitag{ font-size:.62rem; background:var(--surface-3); color:var(--ink-faint); padding:1px 6px; border-radius:8px; }
.minitag.amber{ background:var(--amber-wash); color:var(--amber); }

.app-read{ flex:1; min-width:0; overflow-y:auto; padding:22px 26px; background:var(--surface); }
.empty-read{ height:100%; display:grid; place-items:center; color:var(--ink-faint); font-size:var(--fs-sm); text-align:center; }

/* mail message */
.msg-head{ border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:16px; }
.msg-subject{ font-size:1.18rem; font-weight:700; margin:0 0 10px; color:var(--ink); }
.msg-meta{ display:flex; gap:10px; align-items:center; font-size:var(--fs-xs); color:var(--ink-soft); }
.msg-meta .avatar{ width:34px; height:34px; font-size:var(--fs-xs); }
.msg-from{ font-weight:600; color:var(--ink); }
.msg-to{ color:var(--ink-faint); font-size:var(--fs-xs); }
.msg-time{ margin-left:auto; color:var(--ink-faint); font-size:var(--fs-xs); }
.msg-body{ font-size:var(--fs-md); line-height:1.7; color:#283341; white-space:pre-wrap; }
.msg-body p{ margin:0 0 14px; }
.hidden-text{ color:var(--surface); background:var(--surface); border-radius:3px; cursor:text;
  transition:color .25s, background .25s; }
.hidden-text.revealed{ color:var(--red); background:var(--red-wash); }
.reveal-tools{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); }
.reveal-tools .btn{ font-size:var(--fs-xs); padding:6px 12px; }

/* attachments */
.attachments{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.attachments h4{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin:0 0 10px; }
.attach{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; margin-bottom:8px; background:var(--surface-2); }
.attach .fileglyph{ width:34px; height:40px; flex:none; }
.attach-name{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.attach-meta{ font-size:var(--fs-2xs); color:var(--ink-faint); }
.attach.locked{ border-style:dashed; }
.attach .btn{ margin-left:auto; font-size:.76rem; padding:6px 12px; }

/* ---------- chat ---------- */
.chat-thread{ flex:1; display:flex; flex-direction:column; min-width:0; }
.chat-head{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.chat-stream{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); }
.bubble-row{ display:flex; margin:5px 0; }
.bubble-row.me{ justify-content:flex-end; }
.bubble{ max-width:74%; padding:9px 13px; border-radius:14px; font-size:var(--fs-sm); line-height:1.5;
  background:#fff; border:1px solid var(--line); color:#283341; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.bubble-row.me .bubble{ background:var(--blue); color:#fff; border-color:var(--blue-deep); }
.bubble-time{ font-size:.64rem; opacity:.6; margin-top:4px; display:block; }
.bubble.deleted{ font-style:italic; color:var(--ink-faint); background:var(--surface-2);
  border-style:dashed; }
.bubble.system{ margin:8px auto; background:var(--amber-wash); border-color:var(--amber);
  color:var(--amber); font-size:var(--fs-xs); text-align:center; }
.chat-day{ text-align:center; font-size:.68rem; color:var(--ink-faint); margin:12px 0 4px; }

/* ---------- files ---------- */
.files-grid{ flex:1; overflow-y:auto; padding:18px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:14px; align-content:start; }
.file-card{ border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:14px 10px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; transition:var(--dur);
  cursor:pointer; }
.file-card:hover{ background:var(--surface-2); border-color:var(--line-strong); }
.file-card .fileglyph{ width:42px; height:50px; }
.file-name{ font-size:var(--fs-2xs); color:var(--ink-soft); word-break:break-word; line-height:1.3; }
.file-card.locked .fileglyph{ opacity:.6; }
.file-card.corrupted{ position:relative; }
.file-card.corrupted .file-name{ color:var(--amber); }

/* file thumbnails in grid */
.file-thumb{ width:62px; height:48px; border-radius:5px; overflow:hidden; display:block; border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.12); }
.file-thumb svg{ width:100%; height:100%; display:block; }
.file-card{ position:relative; }
.file-newdot{ position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 2px var(--surface); }

/* file viewer modal content */
.file-view{ padding:24px; overflow-y:auto; }

/* real photo render */
.photo-real{ overflow:hidden; padding:0 !important; box-shadow:inset 0 0 60px rgba(0,0,0,.25); }
.photo-real svg, .photo-real img{ width:100%; height:100%; display:block; object-fit:cover; }
.file-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* forensic zoom & enhance */
.photo-tools{ display:flex; align-items:center; gap:10px; max-width:520px; margin:0 auto 8px; }
.photo-hint{ flex:1; font-size:var(--fs-2xs); color:var(--ink-faint); }
.photo-zoom{ font-size:var(--fs-2xs); color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:42px; text-align:right; }
.photo-reset{ font-size:var(--fs-2xs); padding:4px 11px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink-soft); }
.photo-reset:hover{ background:var(--surface-2); border-color:var(--blue); }
.photo-frame.photo-real{ position:relative; cursor:zoom-in; }
.photo-frame.photo-real.zoomed{ cursor:grab; }
.photo-frame.photo-real.panning{ cursor:grabbing; }
.photo-zoomer{ position:absolute; inset:0; transform-origin:center center; will-change:transform; }
.photo-zoomer .photo-img, .photo-zoomer .photo-svgwrap, .photo-zoomer .photo-svgwrap svg{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-hotspot{ position:absolute; width:26px; height:26px; transform:translate(-50%,-50%); border-radius:50%;
  border:2px solid rgba(255,255,255,.75); background:rgba(47,111,237,.18); cursor:zoom-in; padding:0; z-index:3;
  box-shadow:0 0 0 1px rgba(0,0,0,.35); animation:hotspotPulse 2.4s ease-in-out infinite; }
.photo-hotspot:hover{ background:rgba(47,111,237,.45); border-color:#fff; transform:translate(-50%,-50%) scale(1.1); }
.photo-hotspot.found{ border-color:#5fbf97; background:rgba(63,157,122,.4); animation:none; }
.photo-hotspot.found::after{ content:"✓"; color:#fff; font-size:var(--fs-2xs); font-weight:700; display:block; line-height:22px; }
@keyframes hotspotPulse{ 0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,0); opacity:.5; } 50%{ box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 0 7px rgba(255,255,255,.12); opacity:.95; } }
.photo-hotspot.hot-pulse{ animation:corkPulse .7s ease; }
body[data-motion="reduced"] .photo-hotspot{ animation:none; opacity:.7; }
.photo-details{ max-width:520px; margin:12px auto 0; display:flex; flex-direction:column; gap:8px; }
.photo-detail{ font-size:var(--fs-xs); line-height:1.5; color:var(--ink); background:var(--amber-wash); border-left:3px solid var(--amber);
  padding:10px 12px; border-radius:6px; }
.photo-detail .pd-mark{ color:#3f9d7a; font-weight:700; margin-right:6px; }
.photo-caption{ text-align:center; color:var(--ink-faint); font-size:var(--fs-xs); margin-top:10px; font-style:italic; }

/* document chrome (PDF / note / receipt) */
.doc-paper{ position:relative; }
.doc-letterhead{ display:flex; align-items:center; justify-content:space-between; margin:-30px -34px 18px;
  padding:14px 22px; border-bottom:2px solid var(--blue); background:var(--surface-2); }
.doc-letterhead.helix{ border-bottom-color:#1f4fb0; }
.doc-brand{ font-weight:800; font-size:var(--fs-base); letter-spacing:-.4px; color:var(--blue-deep); display:flex; align-items:center; gap:7px; }
.doc-brand i{ width:14px; height:14px; border-radius:3px; background:conic-gradient(from 45deg, var(--blue), #ff9472, var(--blue-deep)); display:inline-block; }
.doc-kind{ font-size:.62rem; letter-spacing:2px; color:var(--ink-faint); border:1px solid var(--line-strong); padding:3px 8px; border-radius:4px; }
.doc-text{ font-size:var(--fs-md); line-height:1.75; color:#2a3441; }
.doc.mono .doc-text{ font-family:var(--mono); font-size:var(--fs-xs); line-height:1.6; }
.doc-foot{ margin:22px -34px -30px; padding:10px 22px; border-top:1px solid var(--line); background:var(--surface-2);
  font-size:.66rem; color:var(--ink-faint); letter-spacing:.5px; }

/* window open skeleton */
.skeleton{ padding:18px; }
.sk-row{ height:14px; border-radius:5px; margin-bottom:12px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:shimmer 1.2s infinite linear; }
.sk-row.short{ width:55%; } .sk-row.tall{ height:40px; }
@keyframes shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
body[data-motion="reduced"] .sk-row{ animation:none; }
.doc{ max-width:620px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:30px 34px; box-shadow:0 2px 10px rgba(0,0,0,.05); font-size:var(--fs-md); line-height:1.7; color:#2a3441; }
.doc h1{ font-size:1.1rem; margin:0 0 4px; }
.doc .doc-sub{ color:var(--ink-faint); font-size:var(--fs-xs); margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.doc.receipt{ font-family:var(--mono); font-size:var(--fs-xs); max-width:340px; }
.doc.note{ font-family:var(--mono); background:#fffef7; }
.photo{ max-width:520px; margin:0 auto; }
.photo-frame{ aspect-ratio:4/3; border-radius:8px; display:grid; place-items:center; color:#fff;
  font-size:var(--fs-xs); text-align:center; padding:20px; }
.corrupt-view{ max-width:520px; margin:0 auto; text-align:center; color:var(--amber); padding:40px 20px; }

/* metadata panel */
.meta-panel{ margin-top:18px; max-width:520px; margin-left:auto; margin-right:auto;
  border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.meta-panel summary{ padding:10px 14px; background:var(--surface-2); font-size:var(--fs-xs); font-weight:600;
  cursor:pointer; color:var(--ink-soft); }
.meta-table{ width:100%; border-collapse:collapse; font-size:var(--fs-xs); }
.meta-table td{ padding:7px 14px; border-top:1px solid var(--line); }
.meta-table td:first-child{ color:var(--ink-faint); width:40%; }
.meta-table td.flag{ color:var(--amber); font-weight:600; }

/* ---------- "Verify the record" forensics ---------- */
.forensic{ margin:18px auto 0; max-width:560px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  overflow:hidden; background:var(--surface-2); }
.forensic-head{ display:flex; align-items:center; gap:8px; padding:9px 14px; background:var(--surface-3);
  border-bottom:1px solid var(--line); font-size:var(--fs-xs); color:var(--ink-soft); letter-spacing:.4px; }
.forensic-head b{ color:var(--ink); text-transform:uppercase; letter-spacing:1px; font-size:var(--fs-2xs); }
.forensic-seal{ color:var(--amber); font-size:14px; line-height:1; }
.forensic-body{ padding:12px 14px; }
.forensic-hint{ font-size:var(--fs-xs); color:var(--ink-faint); font-style:italic; margin-bottom:11px; }
.forensic-btn{ width:100%; padding:9px 12px; border:1px solid var(--amber); border-radius:var(--radius-sm);
  background:transparent; color:var(--amber); font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  letter-spacing:.5px; transition:var(--dur); }
.forensic-btn:hover{ background:var(--amber); color:#fff; }
.forensic-meta{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:11px; }
.forensic-row{ display:flex; gap:10px; padding:7px 12px; font-size:var(--fs-xs); border-top:1px solid var(--line); }
.forensic-row:first-child{ border-top:none; }
.forensic-row .fm-k{ color:var(--ink-faint); width:46%; flex:none; }
.forensic-row .fm-v{ color:var(--ink); }
.forensic-row.flagged{ background:rgba(207,59,59,.08); }
.forensic-row.flagged .fm-v{ color:var(--red); font-weight:600; }
.forensic-tell{ font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.5; padding:7px 11px; margin-bottom:7px;
  border-left:3px solid var(--red); background:rgba(207,59,59,.06); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.forensic-tell .ft-mark{ color:var(--red); margin-right:5px; }
.forensic-tell b{ color:var(--ink); }
.forensic-awarded{ font-size:var(--fs-2xs); color:var(--amber); text-transform:uppercase; letter-spacing:.6px;
  text-align:center; padding-top:6px; border-top:1px dashed var(--line); }

/* ---------- Chapter 2: Preserve / retention sweep ---------- */
.preserve{ margin:16px auto 0; max-width:560px; border:1px solid var(--red); border-radius:var(--radius-sm);
  background:rgba(207,59,59,.06); padding:12px 14px; }
.preserve-head{ font-size:var(--fs-xs); color:var(--ink-soft); margin-bottom:10px; }
.preserve-head .pv-warn{ color:var(--red); margin-right:5px; }
.preserve-head b{ color:var(--red); }
.preserve-btn{ width:100%; padding:9px 12px; border:1px solid var(--blue); border-radius:var(--radius-sm);
  background:var(--blue); color:#fff; font-size:var(--fs-sm); font-weight:600; cursor:pointer; letter-spacing:.4px; transition:var(--dur); }
.preserve-btn:hover{ filter:brightness(1.08); }
.preserve.preserved{ border-color:#2f9e6b; background:rgba(47,158,107,.08); text-align:center; }
.preserve .pv-seal{ color:#2f9e6b; font-weight:700; letter-spacing:1px; font-size:var(--fs-sm); }
.preserve .pv-msg{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:4px; }

.purged-view{ text-align:center; padding:34px 20px; color:var(--ink-faint); }
.purged-view h3{ color:var(--red); margin:0 0 8px; letter-spacing:.4px; }
.purged-view p{ font-size:var(--fs-sm); max-width:440px; margin:0 auto; }

/* live "retention sweep in progress" banner (Chapter 2) — in-flow, stacks under the objective ribbon */
.retention-ribbon{ flex:none; width:100%; display:flex; align-items:center; gap:9px; justify-content:center;
  padding:6px 14px; font-size:var(--fs-xs); letter-spacing:.4px;
  background:linear-gradient(180deg, rgba(207,59,59,.22), rgba(207,59,59,.10));
  color:#ffd9d9; border-bottom:1px solid rgba(207,59,59,.5); }
.retention-ribbon b{ color:#fff; }
.retention-ribbon .rr-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); animation:rr-pulse 1.6s ease-in-out infinite; }
@keyframes rr-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
body[data-motion="reduced"] .retention-ribbon .rr-dot{ animation:none; }

.ending-continue{ display:block; width:100%; max-width:640px; margin:16px auto 0; }

/* Chapter 3 — the Interceptor ribbon (repurposed retention ribbon) + Release console */
.exposure-ribbon{ background:linear-gradient(180deg, rgba(200,134,26,.22), rgba(200,134,26,.10));
  color:#ffe7c2; border-bottom-color:rgba(200,134,26,.5); }
.exposure-ribbon .rr-dot{ background:var(--amber); box-shadow:0 0 8px var(--amber); }
.exposure-ribbon:hover{ filter:brightness(1.08); }

.release-console{ max-width:620px; }
.rc-exposure{ border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:14px; background:var(--surface-2); }
.rc-exposure.hot{ border-color:var(--amber); }
.rc-exposure.struck{ border-color:var(--red); background:rgba(207,59,59,.06); }
.rc-ex-label{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.8px; color:var(--ink-soft); margin-bottom:6px; }
.rc-exposure.struck .rc-ex-label{ color:var(--red); font-weight:700; }
.rc-ex-bar{ height:6px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.rc-ex-bar span{ display:block; height:100%; background:linear-gradient(90deg, var(--amber), var(--red)); transition:width .3s; }
.rc-ex-note{ font-size:var(--fs-2xs); color:var(--ink-faint); margin-top:6px; }
.rc-section{ margin-bottom:14px; }
.rc-h{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin-bottom:8px; }
.rc-row{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:7px; background:var(--surface); }
.rc-row.channel{ flex-wrap:wrap; }
.rc-name{ font-size:var(--fs-sm); color:var(--ink); font-weight:600; flex:none; }
.rc-blurb{ font-size:var(--fs-2xs); color:var(--ink-faint); flex:1 1 100%; order:3; line-height:1.4; }
.rc-btn{ margin-left:auto; padding:6px 12px; border:1px solid var(--blue); background:var(--blue); color:#fff; border-radius:var(--radius-sm); font-size:var(--fs-xs); font-weight:600; cursor:pointer; }
.rc-btn:hover{ filter:brightness(1.08); }
.rc-tag{ margin-left:auto; font-size:var(--fs-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 8px; border-radius:6px; }
.rc-tag.staged,.rc-tag.open{ color:#2f9e6b; background:rgba(47,158,107,.14); }
.rc-tag.locked{ color:var(--ink-faint); background:var(--surface-3); }
.rc-tag.closed{ color:var(--red); background:rgba(207,59,59,.12); }
.rc-empty{ font-size:var(--fs-xs); color:var(--ink-faint); font-style:italic; padding:4px 2px; }
.rc-send{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.rc-send-btn{ width:100%; padding:11px; border:1px solid var(--red); background:var(--red); color:#fff; border-radius:var(--radius-sm); font-size:var(--fs-md); font-weight:700; letter-spacing:.5px; cursor:pointer; }
.rc-send-btn:hover{ filter:brightness(1.08); }
.rc-send-btn.disabled{ background:var(--surface-3); color:var(--ink-faint); border-color:var(--line); cursor:not-allowed; }

/* file-card retention badge (Chapter 2) */
.fcard-badge{ position:absolute; top:6px; right:6px; font-size:9px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; padding:2px 5px; border-radius:6px; line-height:1.4;
  font-variant-numeric:tabular-nums; pointer-events:none; }
.fcard-badge.queued{ background:rgba(138,148,161,.22); color:var(--ink-soft); }
.fcard-badge.deleting{ background:rgba(207,59,59,.18); color:var(--red); border:1px solid rgba(207,59,59,.5); }
.fcard-badge.deleted{ background:rgba(207,59,59,.12); color:var(--red); opacity:.85; }
.fcard-badge.preserved{ background:rgba(47,158,107,.16); color:#2f9e6b; }
.file-card{ position:relative; }

/* ---------- browser history ---------- */
.hist{ flex:1; overflow-y:auto; padding:6px 0; }
.hist-day{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint);
  padding:14px 20px 6px; }
.hist-row{ width:100%; text-align:left; border:none; background:none; padding:9px 20px; display:flex;
  gap:12px; align-items:center; border-bottom:1px solid var(--line); transition:var(--dur); }
.hist-row:hover{ background:var(--surface-2); }
.hist-fav{ width:22px; height:22px; border-radius:5px; flex:none; display:grid; place-items:center;
  background:var(--surface-3); font-size:var(--fs-2xs); color:var(--ink-faint); }
.hist-fav.search{ background:var(--blue-wash); color:var(--blue); }
.hist-main{ flex:1; min-width:0; }
.hist-title{ font-size:var(--fs-sm); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-url{ font-size:var(--fs-2xs); color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-time{ font-size:var(--fs-2xs); color:var(--ink-faint); flex:none; }
.page-view{ padding:30px; max-width:640px; margin:0 auto; }
.fake-404{ text-align:center; padding:50px 20px; color:var(--ink-faint); }

/* ============================================================
   RECOVERY CONSOLE (hidden layer)
   ============================================================ */
.term{ width:100%; height:100%; display:flex; flex-direction:column; font-family:var(--mono);
  font-size:var(--fs-sm); color:var(--term-ink); }
.term-head{ padding:12px 16px; border-bottom:1px solid var(--term-line); color:var(--term-ink-dim);
  display:flex; justify-content:space-between; }
.term-body{ flex:1; overflow-y:auto; padding:16px; line-height:1.6; }
.term-login{ max-width:380px; margin:8vh auto; text-align:center; }
.term-login .avatar{ background:linear-gradient(135deg,#15a06a,#0c6e48); margin:0 auto 16px; }
.term-prompt{ color:var(--term-ink-dim); margin-bottom:8px; }
.term-input{ width:100%; background:var(--term-bg-2); border:1px solid var(--term-line); color:var(--term-ink);
  padding:10px 12px; border-radius:6px; font-family:var(--mono); font-size:var(--fs-md); letter-spacing:2px; text-align:center; }
.term-btn{ background:transparent; border:1px solid var(--term-ink-dim); color:var(--term-ink);
  padding:9px 18px; border-radius:6px; margin-top:12px; font-family:var(--mono); transition:var(--dur); }
.term-btn:hover{ background:rgba(40,90,70,.25); }
.term-err{ color:#e87d7d; font-size:var(--fs-xs); margin-top:10px; min-height:18px; }
.log-line{ padding:6px 8px; border-left:2px solid transparent; white-space:pre-wrap; }
.log-line:hover{ background:rgba(40,90,70,.12); }
.log-line .ts{ color:var(--term-ink-dim); }
.log-line.warn{ color:var(--term-amber); border-left-color:var(--term-amber); }
.log-line.crit{ color:#e87d7d; border-left-color:#e87d7d; }
.log-line.viewer{ color:#fff; background:rgba(120,40,40,.22); border-left-color:#e87d7d; }
.tree-node{ padding:4px 0 4px 18px; }
.tree-node.deleted{ color:var(--term-ink-dim); text-decoration:line-through; }
.tree-node.restorable{ color:var(--term-amber); cursor:pointer; text-decoration:none; }
.tree-node .restore{ margin-left:10px; border:1px solid var(--term-amber); color:var(--term-amber);
  background:none; font-size:var(--fs-2xs); padding:1px 8px; border-radius:4px; }
.term-section{ margin:18px 0 8px; color:var(--term-ink-dim); text-transform:uppercase; letter-spacing:2px; font-size:var(--fs-2xs); }

/* ============================================================
   INVESTIGATION BOARD
   ============================================================ */
.board{ width:100%; height:100%; display:flex; flex-direction:column; }
.board-bar{ padding:12px 18px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.board-bar h3{ margin:0; font-size:var(--fs-md); }
.board-filter{ font-size:var(--fs-xs); padding:5px 10px; border:1px solid var(--line-strong); border-radius:20px;
  background:var(--surface); color:var(--ink-soft); }
.board-filter.active{ background:var(--blue); color:#fff; border-color:var(--blue-deep); }
.board-body{ flex:1; overflow-y:auto; padding:18px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; align-content:start; }
.board-linkhint{ padding:9px 18px; font-size:var(--fs-xs); color:var(--ink-soft); background:var(--blue-wash);
  border-bottom:1px solid var(--line); }
.clue-card{ border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:8px;
  background:var(--surface); padding:14px; text-align:left; width:100%; font:inherit; color:inherit;
  cursor:pointer; transition:var(--dur); }
.clue-card:hover{ background:var(--surface-2); border-color:var(--line-strong); }
.clue-card.linksel{ border-color:var(--blue); box-shadow:0 0 0 2px var(--blue) inset, 0 6px 18px -8px var(--blue);
  background:var(--blue-wash); }
.clue-card.required{ border-left-color:var(--amber); }
.clue-card.viewer{ border-left-color:var(--red); }
.clue-head{ display:flex; justify-content:space-between; gap:8px; align-items:flex-start; margin-bottom:6px; }
.clue-title{ font-size:var(--fs-sm); font-weight:700; color:var(--ink); }
.clue-who{ font-size:.68rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; }
.clue-body{ font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.5; }
.clue-src{ font-size:var(--fs-2xs); color:var(--blue); margin-top:8px; }
.board-empty{ grid-column:1/-1; text-align:center; color:var(--ink-faint); padding:40px; }
.board-viewtoggle{ margin-left:auto; font-size:var(--fs-xs); padding:5px 12px; border:1px solid var(--line-strong);
  border-radius:20px; background:var(--surface); color:var(--ink-soft); }
.board-viewtoggle:hover{ background:var(--surface-2); border-color:var(--blue); color:var(--blue-deep); }

/* ---------- spatial corkboard ---------- */
.corkboard{ flex:1; overflow:auto; position:relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 40%),
    repeating-radial-gradient(rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #c79a64, #a9763f);
}
body[data-theme="dark"] .corkboard{ background:
    repeating-radial-gradient(rgba(0,0,0,.18) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #3a2c1e, #271d12); }
.cork-surface{ position:relative; min-width:100%; min-height:100%; }
.corkboard{ min-height:0; }
.board-foot{ flex:none; max-height:34%; overflow-y:auto; border-top:1px solid var(--line); background:var(--surface); }
.cork-strings{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; }
.cork-string{ fill:none; stroke:#9a8a6a; stroke-width:2.4; pointer-events:none; }
.cork-string.s-theory{ stroke:#efe3c8; stroke-dasharray:2 6; stroke-width:2; pointer-events:stroke; opacity:.85; }
.cork-string.s-lead{ stroke:#e0a73a; stroke-width:2.6; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.cork-string.s-confirmed{ stroke:#cf3b3b; stroke-width:3; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.cork-string.s-temp{ stroke:#cf3b3b; stroke-width:2; stroke-dasharray:5 5; opacity:.7; }
.cork-note{ position:absolute; width:230px; background:var(--surface); border:1px solid rgba(0,0,0,.18);
  border-radius:3px; padding:18px 14px 12px; z-index:5; cursor:grab; transform:rotate(var(--rot,0deg));
  box-shadow:0 8px 18px -8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.3); transition:box-shadow .15s; }
.cork-note:hover{ box-shadow:0 14px 28px -10px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35); }
.cork-note.dragging{ cursor:grabbing; transform:rotate(0deg) scale(1.02); z-index:50; box-shadow:0 22px 44px -12px rgba(0,0,0,.7); }
.cork-note.required{ border-top:3px solid var(--amber); }
.cork-note.viewer{ border-top:3px solid var(--red); }
.cork-note .clue-head{ display:flex; justify-content:space-between; gap:8px; margin-bottom:5px; }
.cork-note .clue-title{ font-size:var(--fs-sm); font-weight:700; color:var(--ink); }
.cork-note .clue-who{ font-size:.62rem; color:var(--ink-faint); text-transform:uppercase; }
.cork-note .clue-body{ font-size:var(--fs-2xs); color:var(--ink-soft); line-height:1.45; max-height:84px; overflow:hidden; }
.cork-note .clue-src{ font-size:.64rem; color:var(--blue); margin-top:6px; }
.cork-pin{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff7a6e, #c0392b 65%); box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
  cursor:crosshair; z-index:6; }
.cork-pin:hover{ transform:translateX(-50%) scale(1.18); }
.cork-note.connecting{ outline:2px solid var(--red); outline-offset:2px; }
.cork-note.connecting .cork-pin{ box-shadow:0 0 0 4px rgba(207,59,59,.35), 0 2px 4px rgba(0,0,0,.5); }
.cork-pulse{ animation:corkPulse .7s ease; }
@keyframes corkPulse{ 0%{ box-shadow:0 0 0 0 rgba(207,59,59,.5), 0 8px 18px -8px rgba(0,0,0,.55); } 100%{ box-shadow:0 0 0 14px rgba(207,59,59,0), 0 8px 18px -8px rgba(0,0,0,.55); } }
body[data-motion="reduced"] .cork-pulse{ animation:none; }
.board-notes{ padding:14px 18px; border-top:1px solid var(--line); background:var(--amber-wash); }
.board-notes h4{ margin:0 0 6px; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--amber); }

/* deductions panel */
.ded-panel{ padding:14px 18px; border-top:1px solid var(--line); background:var(--surface-2); }
.ded-panel h4{ margin:0 0 10px; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); }
.ded-list{ display:flex; flex-direction:column; gap:6px; }
.ded-item{ display:flex; gap:10px; align-items:center; text-align:left; border:1px solid var(--line-strong);
  background:var(--surface); border-radius:7px; padding:9px 12px; font-size:var(--fs-sm); color:var(--ink); transition:var(--dur); }
.ded-item:hover{ background:var(--blue-wash); border-color:var(--blue); }
.ded-item.solved{ opacity:.62; background:var(--surface-2); }
.ded-item.solved:hover{ background:var(--surface-3); border-color:var(--line-strong); }
.ded-mark{ width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--blue); color:#fff; font-size:var(--fs-2xs); font-weight:700; }
.ded-item.solved .ded-mark{ background:var(--ok, #3f9d7a); }
.ded-q{ flex:1; }
.ded-locked{ font-size:.76rem; color:var(--ink-faint); padding:6px 4px; font-style:italic; }
.board-notes ul{ margin:0; padding-left:18px; }
.board-notes li{ font-size:var(--fs-xs); color:#6a5418; margin:3px 0; }

/* accusation */
.accuse{ max-width:560px; margin:0 auto; padding:24px; }
.accuse h3{ margin:0 0 6px; }
.accuse p.lead{ color:var(--ink-soft); font-size:var(--fs-sm); margin-bottom:20px; }
.suspect-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.suspect{ border:2px solid var(--line); border-radius:10px; padding:14px; text-align:left; background:var(--surface);
  display:flex; gap:12px; align-items:center; transition:var(--dur); }
.suspect:hover{ border-color:var(--line-strong); }
.suspect.sel{ border-color:var(--blue); background:var(--blue-wash); }
.suspect .avatar{ width:38px; height:38px; font-size:var(--fs-xs); }
.suspect-name{ font-weight:600; font-size:var(--fs-md); }
.suspect-role{ font-size:var(--fs-2xs); color:var(--ink-faint); }
.evidence-check{ margin:16px 0; }
.evidence-check label{ display:flex; gap:10px; align-items:flex-start; padding:8px; border-radius:6px;
  font-size:var(--fs-xs); color:var(--ink-soft); }
.evidence-check label:hover{ background:var(--surface-2); }

/* ============================================================
   SETTINGS MODAL  +  generic modal
   ============================================================ */
.modal-backdrop{ position:fixed; inset:0; background:rgba(6,9,13,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:grid; place-items:center; z-index:200; animation:fade .2s ease; }
.modal{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); width:440px;
  max-width:92vw; max-height:88vh; overflow:hidden; display:flex; flex-direction:column; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--line); }
.modal-head h2{ margin:0; font-size:var(--fs-lg); }
.modal-body{ padding:20px; overflow-y:auto; }
.set-group{ margin-bottom:22px; }
.set-group h3{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin:0 0 12px; }
.set-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:var(--fs-sm); }
.set-row > span:first-child{ width:90px; flex:none; color:var(--ink-soft); }
.set-row input[type=range]{ flex:1; }
.set-row output{ width:46px; text-align:right; color:var(--ink-faint); font-size:var(--fs-xs); }
.set-check{ gap:10px; }
.set-check span{ width:auto !important; }
.set-help{ font-size:var(--fs-xs); color:var(--ink-faint); margin:0 0 12px; }

/* global search */
.search-shell{ width:560px; max-width:94vw; }
.search-modal{ padding:16px 18px; }
.search-input{ width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:8px; font-size:var(--fs-base);
  background:var(--surface-2); color:var(--ink); }
.search-results{ margin-top:12px; max-height:52vh; overflow-y:auto; }
.search-empty{ color:var(--ink-faint); font-size:var(--fs-sm); padding:18px 6px; text-align:center; }
.search-count{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); padding:4px 6px 8px; }
.search-row{ width:100%; text-align:left; border:none; background:none; padding:10px 10px; border-radius:7px;
  display:flex; align-items:center; gap:12px; transition:var(--dur); }
.search-row:hover{ background:var(--blue-wash); }
.search-cat{ width:26px; height:26px; flex:none; color:var(--ink-soft); }
.search-cat svg{ width:20px; height:20px; }
.search-main{ display:flex; flex-direction:column; min-width:0; }
.search-title{ font-size:var(--fs-sm); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-sub{ font-size:var(--fs-2xs); color:var(--ink-faint); }

/* password / input modal */
.pw-modal{ width:380px; }
.pw-body{ padding:24px; text-align:center; }
.pw-body .fileglyph{ width:40px; height:48px; margin:0 auto 12px; }
.pw-body h3{ margin:0 0 4px; font-size:var(--fs-base); }
.pw-body p{ font-size:var(--fs-xs); color:var(--ink-soft); margin:0 0 16px; }
.pw-input{ width:100%; padding:11px 14px; border:1px solid var(--line-strong); border-radius:7px;
  font-size:var(--fs-md); text-align:center; letter-spacing:1px; }
.pw-err{ color:var(--red); font-size:var(--fs-xs); min-height:18px; margin:10px 0 0; }
/* wrong-password feedback: shake + red flash (animation auto-disabled under reduced motion) */
.modal.pw-fail{ animation:pwShake .42s cubic-bezier(.36,.07,.19,.97); box-shadow:0 0 0 2px var(--red), var(--shadow); }
@keyframes pwShake{ 10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); } 30%,50%,70%{ transform:translateX(-7px); } 40%,60%{ transform:translateX(7px); } }
body[data-motion="reduced"] .modal.pw-fail{ animation:none; }
.pw-hint{ background:var(--amber-wash); color:#7a5e16; font-size:var(--fs-xs); padding:10px 12px; border-radius:7px;
  margin-top:14px; text-align:left; line-height:1.5; }
.pw-actions{ display:flex; gap:8px; margin-top:16px; }
.pw-actions .btn{ flex:1; }

/* ending / epilogue */
.ending-banner{ max-width:640px; margin:0 auto 16px; border-radius:10px; padding:16px 20px; color:#fff;
  display:flex; justify-content:space-between; align-items:center; }
.ending-banner.ending-relay{ background:linear-gradient(120deg,#b23420,#e2503c); }
.ending-banner.ending-full{ background:linear-gradient(120deg,#2a6a52,#3f9d7a); }
.ending-banner.ending-quiet{ background:linear-gradient(120deg,#8a6d3b,#c8861a); }
.ending-banner.ending-bare{ background:linear-gradient(120deg,#516b88,#6a7a8a); }
.ending-label{ font-weight:800; font-size:var(--fs-base); letter-spacing:-.3px; }
.ending-score{ font-size:var(--fs-2xs); opacity:.9; background:rgba(255,255,255,.18); padding:4px 10px; border-radius:20px; }
.ending-tone{ font-style:italic; color:var(--blue-deep) !important; }
.ending-viewer{ max-width:640px; margin:16px auto 0; background:#120c0c !important; border-color:#3a1f1f !important;
  color:#e6c9c9 !important; font-family:var(--mono); }
.ending-viewer-h{ color:#e87d7d; font-size:var(--fs-2xs); letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
/* cliffhanger card — the case is solved; the procedure turns on the reader */
.ending-next{ max-width:640px; margin:18px auto 0; background:#0a0c12 !important; border:1px solid #243049 !important;
  border-radius:10px; box-shadow:0 0 0 1px rgba(47,111,237,.10), 0 18px 50px -24px rgba(0,0,0,.8); }
.ending-next-h{ color:#7fa6e8; font-size:var(--fs-xs); letter-spacing:5px; text-transform:uppercase; text-align:center;
  margin-bottom:12px; opacity:.92; }
.ending-next .msg-body{ color:#cdd6e6 !important; }
.ending-next .msg-body b{ color:#e87d7d; }
.ending-next-tag{ margin-top:14px; padding-top:12px; border-top:1px dashed #2a3852; text-align:center;
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:1px; color:#8a97ad; }

/* audio / voicemail player */
.audio-player{ max-width:520px; margin:0 auto; background:var(--term-bg); color:var(--term-ink); border-radius:12px;
  padding:22px; font-family:var(--mono); }
.audio-top{ display:flex; align-items:center; gap:14px; }
.audio-play{ width:50px; height:50px; border-radius:50%; border:1px solid var(--term-ink-dim); background:rgba(40,90,70,.2);
  color:var(--term-ink); font-size:1.2rem; flex:none; cursor:pointer; transition:var(--dur); }
.audio-play:hover{ background:rgba(40,90,70,.4); }
.audio-meta{ flex:1; } .audio-name{ font-size:var(--fs-sm); color:var(--term-ink); } .audio-sub{ font-size:var(--fs-2xs); color:var(--term-ink-dim); }
.audio-wave{ display:flex; align-items:flex-end; gap:2px; height:36px; margin:16px 0 6px; }
.audio-wave i{ flex:1; background:var(--term-ink-dim); border-radius:2px; height:20%; }
.audio-wave.playing i{ animation:wavebar .9s ease-in-out infinite; }
@keyframes wavebar{ 0%,100%{ height:15%; } 50%{ height:85%; } }
body[data-motion="reduced"] .audio-wave.playing i{ animation:none; height:45%; }
.audio-transcript{ margin-top:14px; background:var(--term-bg-2); border:1px solid var(--term-line); border-radius:8px; padding:14px; }
.audio-transcript h4{ margin:0 0 8px; font-size:.66rem; letter-spacing:2px; text-transform:uppercase; color:var(--term-ink-dim); }
.audio-transcript p{ margin:0; font-size:var(--fs-sm); line-height:1.6; color:#cfe7da; white-space:pre-wrap; }

/* ============================================================
   CINEMA — boot sequence + cutscene player
   ============================================================ */
.cinema{ position:fixed; inset:0; z-index:320; background:#05070b; overflow:hidden; cursor:pointer;
  animation:fade .5s ease; }
.cinema.cinema-out{ animation:fade .45s ease reverse; }
.cinema-bg{ position:absolute; inset:-6%; background-size:cover; background-position:center; }
.cinema-bg.bg-wallpaper{ background-image:url("assets/wallpaper.webp?v=43"); }
.cinema-bg.bg-img{ /* inline background-image set by JS */ }
.cinema-bg.bg-dark{ background:radial-gradient(120% 90% at 50% 30%, #11161f, #05070b 75%); }
.cinema-bg.bg-console{ background:radial-gradient(120% 90% at 50% 40%, #0c1a16, #05090b 75%); }
.cinema-bg.bg-viewer{ background:radial-gradient(120% 90% at 50% 40%, #2a0e10, #0a0506 75%); }
.cinema-bg.bg-evan{ background-size:cover; background-position:center 30%; filter:saturate(.85) brightness(.8); }
.cinema-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cinema-bg.bg-vid{ background:#05070b; }
.cinema-bg.cinema-flash{ animation:cinemaFade 1s ease; }
@keyframes cinemaFade{ from{ opacity:.25; } to{ opacity:1; } }
.kb-in{ animation:kbIn 9s ease-out forwards; } @keyframes kbIn{ from{ transform:scale(1.0); } to{ transform:scale(1.14); } }
.kb-out{ animation:kbOut 9s ease-out forwards; } @keyframes kbOut{ from{ transform:scale(1.14); } to{ transform:scale(1.0); } }
.kb-left{ animation:kbLeft 9s ease-out forwards; } @keyframes kbLeft{ from{ transform:scale(1.12) translateX(2%); } to{ transform:scale(1.12) translateX(-2%); } }
.kb-right{ animation:kbRight 9s ease-out forwards; } @keyframes kbRight{ from{ transform:scale(1.12) translateX(-2%); } to{ transform:scale(1.12) translateX(2%); } }
.cinema-vignette{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 220px 60px rgba(0,0,0,.85); }
.cinema-grain{ position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:repeating-radial-gradient(rgba(255,255,255,.6) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; animation:grain .6s steps(2) infinite; }
@keyframes grain{ 0%{ transform:translate(0,0); } 100%{ transform:translate(-2%,2%); } }
.cinema-lower{ position:absolute; left:0; right:0; bottom:13%; padding:0 12%; }
.cinema-speaker{ display:none; align-items:center; gap:10px; color:#9fb0c4; font-size:var(--fs-xs); letter-spacing:1px;
  text-transform:uppercase; margin-bottom:14px; }
.cinema-av{ width:30px; height:30px; border-radius:50%; overflow:hidden; background:#1a2430; display:inline-block; }
.cinema-av img{ width:100%; height:100%; object-fit:cover; }
.cinema-cap{ color:#eef3f9; font-size:1.5rem; line-height:1.5; font-weight:600; letter-spacing:-.3px;
  max-width:760px; text-shadow:0 2px 18px rgba(0,0,0,.9); min-height:2.2em; }
.cinema-dots{ position:absolute; bottom:7%; left:12%; display:flex; gap:7px; }
.cinema-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); transition:.3s; }
.cinema-dot.on{ background:var(--blue); width:22px; border-radius:4px; }
.cinema-skip{ position:absolute; top:26px; right:30px; z-index:2; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.2);
  color:#cfd8e2; font-size:var(--fs-xs); padding:7px 14px; border-radius:20px; letter-spacing:.5px; }
.cinema-skip:hover{ background:rgba(0,0,0,.7); }
.cinema-hint{ position:absolute; bottom:6.5%; right:12%; color:rgba(255,255,255,.35); font-size:var(--fs-2xs); letter-spacing:1px; }
body[data-motion="reduced"] .cinema-grain{ animation:none; }

/* boot sequence */
.bootseq{ position:fixed; inset:0; z-index:330; background:#05080c; display:grid; place-items:center; animation:fade .4s ease; }
.bootseq.cinema-out{ animation:fade .4s ease reverse; }
.bootseq-term{ width:min(620px,86vw); height:60vh; overflow:hidden; font-family:var(--mono); font-size:var(--fs-md);
  color:#9fe8c6; line-height:1.9; }
.bootseq-line{ white-space:pre-wrap; }
.bootseq-line.warn{ color:#e8b563; }
.bootseq-line.crit{ color:#e87d7d; }
.bootseq-line.evan{ color:#eaf0f7; font-style:italic; font-size:var(--fs-lg); margin-top:6px; }
/* boot title sting */
.boot-title{ position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.boot-title.boot-title-static{ background:radial-gradient(80% 80% at 50% 40%, #11203a, #05080c 70%); }
.boot-title-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.boot-title-tint{ position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%, rgba(5,8,12,.15), rgba(5,8,12,.9)); }
.boot-wordmark{ position:relative; z-index:2; font-size:2.7rem; font-weight:800; letter-spacing:-1.5px; color:#eef3f9;
  text-shadow:0 4px 30px rgba(0,0,0,.8); animation:markIn 1.3s cubic-bezier(.2,.7,.2,1); }
.boot-wordmark span{ color:var(--blue); font-weight:300; }
.boot-sub2{ position:relative; z-index:2; margin-top:12px; color:#6f8198; font-size:var(--fs-2xs); letter-spacing:4px;
  text-transform:uppercase; animation:fade 2s ease .4s both; }
@keyframes markIn{ from{ opacity:0; filter:blur(12px); letter-spacing:8px; } 60%{ opacity:1; } to{ opacity:1; filter:blur(0); letter-spacing:-1.5px; } }
.boot-title.boot-title-out{ animation:fade .55s ease reverse forwards; }
body[data-motion="reduced"] .boot-wordmark{ animation:none; }
body[data-motion="reduced"] .boot-sub2{ animation:none; }

/* living video wallpaper */
.wall-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.surface-tint{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(10,13,19,.5), rgba(8,11,16,.72)); }
.desktop-icons, .windows{ position:relative; z-index:1; }
.windows{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* ============================================================
   INTRO / ONBOARDING
   ============================================================ */
.intro-ov{ position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:linear-gradient(rgba(6,9,13,.86),rgba(5,7,11,.95)), url("assets/wallpaper.webp?v=43") center/cover no-repeat; animation:fade .4s ease; }
.intro-card{ width:min(560px,90vw); padding:36px 38px; text-align:left; color:#dfe6ee; }
.intro-card.intro-in{ animation:introIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes introIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.intro-kicker{ font-size:var(--fs-2xs); letter-spacing:3px; text-transform:uppercase; color:#6f8198; margin-bottom:14px; }
.intro-title{ font-size:2rem; font-weight:800; letter-spacing:-1px; margin:0 0 18px; color:#fff; line-height:1.1; }
.intro-body{ font-size:var(--fs-base); line-height:1.7; color:#aeb9c6; margin:0 0 14px; }
.intro-dots{ display:flex; gap:7px; margin:24px 0 18px; }
.intro-dot{ width:7px; height:7px; border-radius:50%; background:#33414f; transition:var(--dur); }
.intro-dot.on{ background:var(--blue); width:22px; border-radius:4px; }
.intro-nav .btn{ padding:11px 22px; }
.intro-skip{ position:absolute; top:22px; right:26px; background:none; border:none; color:#5f6f80;
  font-size:var(--fs-xs); text-decoration:underline; }
body[data-motion="reduced"] .intro-ov, body[data-motion="reduced"] .intro-card.intro-in{ animation:none; }

/* ============================================================
   CASE FILE
   ============================================================ */
.casefile{ width:100%; height:100%; overflow-y:auto; padding:22px 26px; background:var(--surface); }
.cf-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.cf-portrait{ width:64px; height:64px; }
.cf-name{ font-size:var(--fs-xl); font-weight:800; letter-spacing:-.5px; }
.cf-role{ color:var(--ink-soft); font-size:var(--fs-sm); }
.cf-status{ color:var(--amber); font-size:var(--fs-xs); margin-top:3px; }
.cf-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.cf-card{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--surface-2); }
.cf-card h4{ margin:0 0 6px; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); }
.cf-card p{ margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--ink); }
.cf-card.question{ border-left:3px solid var(--blue); }
.cf-card.official{ border-left:3px solid var(--ink-faint); }
.cf-progress{ margin-bottom:16px; }
.cf-prog-row{ display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--ink-soft); margin-bottom:6px; }
.cf-bar{ height:7px; border-radius:5px; background:var(--surface-3); overflow:hidden; }
.cf-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--blue),#ff8a6b); transition:width .5s ease; }
.cf-steps{ background:var(--blue-wash); border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.cf-steps h4{ margin:0 0 8px; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--blue-deep); }
.cf-step{ display:flex; gap:9px; align-items:center; font-size:var(--fs-sm); color:var(--ink); padding:3px 0; }
.cf-step.done{ color:var(--ink-faint); text-decoration:line-through; }
.cf-check{ color:var(--blue); font-weight:700; }
.cf-assist{ margin-bottom:20px; }
.cf-hint-box{ margin-top:10px; background:var(--amber-wash); border-radius:8px; padding:12px 14px; font-size:var(--fs-sm);
  line-height:1.55; color:#6a5418; }
.cf-section{ font-size:var(--fs-md); margin:8px 0 12px; }
.cf-reconstruct{ margin-top:18px; padding:16px; border:1px dashed var(--blue); border-radius:10px; background:var(--blue-wash); text-align:center; }
.cf-reconstruct p{ margin:0 0 10px; font-size:var(--fs-sm); color:var(--blue-deep); }

/* dossiers */
.dossier-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.dossier{ border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:14px; border-top:3px solid var(--ink-faint); }
.dossier-central{ border-top-color:var(--red); }
.dossier-hands{ border-top-color:var(--amber); }
.dossier-leak,.dossier-silent{ border-top-color:var(--blue); }
.dossier-ally{ border-top-color:#3f9d7a; }
.dossier-head{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.dossier-av{ width:40px; height:40px; }
.dossier-name{ font-weight:700; font-size:var(--fs-md); }
.dossier-diff{ font-size:var(--fs-2xs); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; }
.dossier-slot{ display:flex; gap:10px; padding:6px 0; border-top:1px solid var(--line); font-size:var(--fs-xs); }
.dossier-k{ width:78px; flex:none; text-transform:uppercase; font-size:.64rem; letter-spacing:1px; color:var(--ink-faint); padding-top:2px; }
.dossier-v{ flex:1; color:var(--ink-faint); line-height:1.45; font-style:italic; }
.dossier-slot.got .dossier-v{ color:var(--ink); font-style:normal; }
.dossier-verdict{ margin-top:10px; font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:8px; }

/* reconstruction */
.reconstruct-shell{ width:600px; max-width:94vw; }
.reconstruct{ padding:6px 4px; }
.reconstruct .lead{ color:var(--ink-soft); font-size:var(--fs-sm); margin:0 0 18px; }
.reconstruct-sentence{ font-size:var(--fs-lg); line-height:2.4; color:var(--ink); }
.reconstruct-blank{ font-family:inherit; font-size:var(--fs-md); padding:5px 8px; border:1px solid var(--blue); border-radius:6px;
  background:var(--blue-wash); color:var(--blue-deep); font-weight:600; margin:0 2px; cursor:pointer; max-width:100%; }
.reconstruct-blank:focus{ outline:2px solid var(--blue); }
.reconstruct-fb{ margin:18px 0 6px; font-size:var(--fs-sm); color:var(--ink); min-height:20px; }
.reconstruct-fb b{ color:var(--amber); }

/* ============================================================
   TOASTS
   ============================================================ */
.toasts{ position:fixed; right:18px; bottom:74px; display:flex; flex-direction:column; gap:10px;
  z-index:60; max-width:320px; }
.toast{ background:rgba(17,23,31,.96); color:#dbe2ea; border:1px solid #25303d; border-left:3px solid var(--blue);
  border-radius:9px; padding:12px 14px; box-shadow:var(--shadow); animation:slidein .3s ease; }
.toast.amber{ border-left-color:var(--amber); }
.toast.red{ border-left-color:var(--red); }
.toast{ display:flex; gap:10px; align-items:flex-start; }
.toast-ico{ flex:none; font-size:var(--fs-base); line-height:1.25; color:var(--blue); }
.toast.amber .toast-ico{ color:var(--amber); }
.toast.red .toast-ico{ color:var(--red); }
.toast-main{ flex:1; min-width:0; }
.toast-title{ font-size:var(--fs-xs); font-weight:600; margin-bottom:2px; }
.toast-body{ font-size:var(--fs-xs); color:#9aa6b4; line-height:1.4; }

/* visually-hidden, screen-reader-only */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes slidein{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:none; } }

/* ============================================================
   REACTIVE UNEASE — corruption overlay + watcher
   The desktop grows colder and less trustworthy as access deepens.
   ============================================================ */
.watcher{ color:#e08a8a; font-size:var(--fs-2xs); letter-spacing:1px; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:5px; opacity:.85; animation:watchpulse 3s ease-in-out infinite; }
@keyframes watchpulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.95; } }
body[data-motion="reduced"] .watcher{ animation:none; opacity:.8; }

.fx-overlay{ position:absolute; inset:0; pointer-events:none; z-index:25; opacity:0; transition:opacity 1.6s ease;
  mix-blend-mode:overlay; background:
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,10,30,.0) 100%); }
/* Layer 2 — Evidence: faint cold vignette */
body[data-layer="2"] .fx-overlay{ opacity:.5; background:
  radial-gradient(130% 100% at 50% 40%, transparent 60%, rgba(10,20,45,.5) 100%); }
/* Layer 3 — Tampering: colder, faint scanlines */
body[data-layer="3"] .fx-overlay{ opacity:.7; background:
  repeating-linear-gradient(0deg, rgba(40,90,140,.04) 0 2px, transparent 2px 4px),
  radial-gradient(130% 100% at 50% 40%, transparent 52%, rgba(8,16,40,.6) 100%); }
/* Layer 4 — Reconstruction: cold, watched, occasional flicker */
body[data-layer="4"] .fx-overlay{ opacity:.85; background:
  repeating-linear-gradient(0deg, rgba(60,110,160,.05) 0 2px, transparent 2px 4px),
  radial-gradient(130% 100% at 50% 35%, transparent 46%, rgba(20,6,10,.55) 100%);
  animation:fxflicker 7s steps(40) infinite; }
@keyframes fxflicker{ 0%,96%,100%{ opacity:.85; } 97%{ opacity:.6; } 98%{ opacity:1; } 99%{ opacity:.72; } }
body[data-motion="reduced"] .fx-overlay{ animation:none !important; }
/* topbar tints colder at depth */
body[data-layer="3"] .topbar, body[data-layer="4"] .topbar{ box-shadow:inset 0 -1px 0 rgba(120,40,40,.25); }

/* a brief, rare full-screen artifact sweep */
.fx-sweep{ position:absolute; inset:0; z-index:26; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(140,180,255,.06) 48%, rgba(255,120,120,.05) 50%, transparent 52%);
  animation:fxsweep .55s ease forwards; }
@keyframes fxsweep{ from{ transform:translateY(-100%); } to{ transform:translateY(100%); } }
body[data-motion="reduced"] .fx-sweep{ display:none; }

/* ============================================================
   GLITCH / FX
   ============================================================ */
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.glitch{ animation:glitch .4s steps(2) 1; }
@keyframes glitch{
  0%{ filter:none; transform:none; }
  20%{ filter:hue-rotate(8deg) contrast(1.2); transform:translateX(1px); }
  40%{ transform:translateX(-2px); clip-path:inset(8% 0 70% 0); }
  60%{ transform:translateX(1px); clip-path:inset(60% 0 12% 0); }
  100%{ filter:none; transform:none; clip-path:none; }
}

/* ============================================================
   PREMIUM POLISH — depth, glass, micro-interactions
   ============================================================ */
.topbar{ background:linear-gradient(180deg, rgba(13,18,26,.92), rgba(10,14,20,.82));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 rgba(255,255,255,.04), 0 6px 20px -12px rgba(0,0,0,.6); }
.dock{ background:linear-gradient(180deg, rgba(14,19,27,.55), rgba(10,14,20,.78));
  -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); box-shadow:0 -1px 0 rgba(255,255,255,.05); height:62px; }
.dock-app{ width:44px; height:44px; box-shadow:0 4px 14px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.dock-app:hover{ transform:translateY(-5px) scale(1.06); box-shadow:0 12px 24px -8px rgba(47,111,237,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.dock-app svg{ width:23px; height:23px; }
.window{ border:1px solid rgba(255,255,255,.06);
  box-shadow:0 30px 80px -28px rgba(0,0,0,.78), 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.window-bar{ background:linear-gradient(180deg, #fbfcfd, var(--surface-2)); box-shadow:inset 0 -1px 0 var(--line); }
.window.terminal .window-bar{ background:linear-gradient(180deg, #12222a, var(--term-bg-2)); box-shadow:inset 0 -1px 0 var(--term-line); }
.btn-primary{ background:linear-gradient(180deg, #3b78f0, var(--blue)); box-shadow:0 2px 8px -2px rgba(47,111,237,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover{ background:linear-gradient(180deg, #2f6fed, var(--blue-deep)); }
.dicon .glyph{ box-shadow:0 6px 16px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.dicon:hover .glyph{ border-color:rgba(120,160,240,.5); }
.list-row, .side-item, .file-card, .clue-card, .hist-row, .search-row, .ded-item{ will-change:auto; }
.file-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(0,0,0,.4); }
.window-title{ font-weight:650; letter-spacing:-.1px; }
h1,h2,h3{ letter-spacing:-.3px; }
.msg-subject{ letter-spacing:-.4px; }
/* selection accent */
::selection{ background:rgba(47,111,237,.25); }

/* tester feedback */
.feedback-fab{ position:fixed; left:16px; bottom:70px; z-index:55; background:rgba(17,23,31,.92);
  color:#dbe2ea; border:1px solid #2a3644; border-radius:20px; padding:8px 14px; font-size:var(--fs-xs);
  font-weight:600; box-shadow:var(--shadow); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:var(--dur); }
.feedback-fab:hover{ background:rgba(30,40,54,.96); border-color:var(--blue); transform:translateY(-1px); }
.feedback-text{ width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px;
  font:inherit; font-size:var(--fs-md); resize:vertical; background:var(--surface-2); color:var(--ink); }
.feedback-diag{ margin-top:12px; }
.feedback-diag summary{ font-size:var(--fs-xs); color:var(--ink-faint); cursor:pointer; }
.feedback-diag pre{ font-size:var(--fs-2xs); color:var(--ink-soft); white-space:pre-wrap; background:var(--surface-2);
  padding:10px; border-radius:6px; margin-top:6px; max-height:150px; overflow:auto; }

/* ============================================================
   DIEGETIC OS — desktop stickies + calendar popover
   ============================================================ */
.desk-stickies{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.sticky{ position:absolute; width:150px; min-height:90px; padding:14px 12px 12px; pointer-events:auto; cursor:grab;
  font-family:"Comic Sans MS", "Segoe Print", var(--font); font-size:var(--fs-xs); line-height:1.4; color:#3a3320;
  box-shadow:0 8px 16px -6px rgba(0,0,0,.5); transform:rotate(-2deg); transition:opacity .2s, transform .2s; }
.sticky.dragging{ cursor:grabbing; transform:rotate(0deg) scale(1.04); z-index:9; }
.sticky.st-y{ background:#f6e58a; } .sticky.st-b{ background:#a9d6f0; color:#1d3344; } .sticky.st-p{ background:#f3b0c3; color:#4a1f2c; }
.sticky::before{ content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:14px; height:14px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff7a6e,#c0392b 65%); box-shadow:0 2px 3px rgba(0,0,0,.4); }
.sticky-x{ position:absolute; top:2px; right:3px; width:18px; height:18px; border:none; background:none; color:rgba(0,0,0,.35);
  font-size:var(--fs-base); line-height:1; border-radius:4px; opacity:0; transition:.15s; }
.sticky:hover .sticky-x{ opacity:1; } .sticky-x:hover{ background:rgba(0,0,0,.12); color:#c0392b; }
.sticky-text{ margin-top:2px; }
body[data-motion="reduced"] .sticky{ transition:none; }

.cal-pop{ position:fixed; top:46px; right:44px; z-index:210; width:300px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:14px; animation:fade .15s ease; }
.cal-head{ font-weight:700; font-size:var(--fs-md); margin-bottom:10px; display:flex; flex-direction:column; }
.cal-head span{ font-size:.66rem; font-weight:400; color:var(--ink-faint); letter-spacing:.5px; text-transform:uppercase; margin-top:2px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:12px; }
.cal-dow{ font-size:.6rem; color:var(--ink-faint); text-align:center; padding:2px 0; text-transform:uppercase; }
.cal-day{ aspect-ratio:1; display:grid; place-items:center; font-size:var(--fs-2xs); color:var(--ink-soft); border-radius:5px; }
.cal-day.empty{ visibility:hidden; }
.cal-day.ev{ background:var(--amber-wash); color:var(--amber); font-weight:700; position:relative; }
.cal-day.crit{ background:var(--red-wash); color:var(--red); font-weight:700; box-shadow:0 0 0 1px var(--red) inset; position:relative; }
/* shape redundancy so special days aren't color-only: circle = event, square = critical */
.cal-day.ev::after{ content:""; position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:50%; background:var(--amber); }
.cal-day.crit::after{ content:""; position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:1px; background:var(--red); }
.cal-events{ display:flex; flex-direction:column; gap:6px; max-height:170px; overflow-y:auto; }
.cal-event{ font-size:.76rem; line-height:1.4; color:var(--ink-soft); border-left:2px solid var(--amber); padding:4px 0 4px 8px; }
.cal-event.crit{ border-left-color:var(--red); color:var(--ink); }
.cal-event b{ color:var(--ink); }

/* ============================================================
   NOTEBOOK + select-to-pin
   ============================================================ */
.notebook{ width:100%; height:100%; overflow-y:auto; padding:22px 26px; background:var(--surface); }
.nb-head h3{ margin:0 0 6px; }
.nb-head p{ margin:0 0 16px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.5; }
.nb-notes{ width:100%; min-height:130px; padding:14px; border:1px solid var(--line-strong); border-radius:10px;
  font:inherit; font-size:var(--fs-md); line-height:1.6; resize:vertical; background:var(--surface-2); color:var(--ink); }
.nb-section{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin:20px 0 10px; }
.nb-pins{ display:flex; flex-direction:column; gap:10px; }
.nb-empty{ color:var(--ink-faint); font-size:var(--fs-sm); padding:16px; text-align:center; line-height:1.5; }
.nb-pin{ position:relative; background:var(--amber-wash); border-left:3px solid var(--amber); border-radius:8px; padding:12px 36px 12px 14px; }
.nb-quote{ font-size:var(--fs-sm); line-height:1.5; color:var(--ink); font-style:italic; }
.nb-src{ font-size:var(--fs-2xs); color:var(--ink-faint); margin-top:6px; }
.nb-remove{ position:absolute; top:7px; right:7px; width:22px; height:22px; border:none; background:none; color:var(--ink-faint); font-size:1.15rem; border-radius:5px; line-height:1; }
.nb-remove:hover{ background:var(--surface-3); color:var(--red); }
.pin-btn{ position:fixed; z-index:260; transform:translate(-50%,-118%); background:var(--blue); color:#fff; border:none;
  border-radius:20px; padding:7px 13px; font-size:var(--fs-xs); font-weight:600; box-shadow:var(--shadow); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s, transform .12s; }
.pin-btn.show{ opacity:1; pointer-events:auto; }
.pin-btn:hover{ background:var(--blue-deep); }

/* ============================================================
   GAME FEEL — restrained, coherent micro-feedback
   ============================================================ */
.btn:active{ transform:translateY(1px) scale(.985); }
.dock-app:active{ transform:translateY(-2px) scale(.98); }
.list-row:active, .file-card:active, .hist-row:active, .search-row:active, .ded-item:active,
.clue-card:active, .side-item:active, .board-filter:active, .suspect:active, .cf-step:active{ transform:scale(.99); }
.iconbtn:active{ transform:scale(.9); }
/* a clue landing on the Case Board: a gentle pulse on its dock icon */
.dock-app.pulse{ animation:dockPulse .75s ease; }
@keyframes dockPulse{
  0%{ box-shadow:0 4px 14px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
  28%{ box-shadow:0 0 0 6px rgba(47,111,237,.35), 0 6px 16px -6px rgba(0,0,0,.6); transform:translateY(-3px) scale(1.06); }
  100%{ box-shadow:0 4px 14px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); transform:none; }
}
body[data-motion="reduced"] .dock-app.pulse{ animation:none; }
/* gentle confirm settle for the reveal/conclusion modal */
.modal.confirmed{ animation:confirmSettle .5s cubic-bezier(.2,.8,.2,1); }
@keyframes confirmSettle{ 0%{ transform:scale(.975); } 60%{ transform:scale(1.012); } 100%{ transform:scale(1); } }
body[data-motion="reduced"] .modal.confirmed{ animation:none; }
/* corkboard note drop settle */
.cork-note.dropped{ animation:noteDrop .3s ease; }
@keyframes noteDrop{ 0%{ transform:rotate(var(--rot,0deg)) scale(1.04); } 100%{ transform:rotate(var(--rot,0deg)) scale(1); } }
body[data-motion="reduced"] .cork-note.dropped{ animation:none; }

/* fileglyph base */
.fileglyph{ display:inline-block; }

/* scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:6px; border:2px solid var(--surface); }
.window.terminal ::-webkit-scrollbar-thumb{ background:var(--term-line); border-color:var(--term-bg); }

/* ============================================================
   RESPONSIVE — tablet & mobile (one adaptive build)
   data-device is set by main.js: mobile (<=640) / tablet / desktop
   ============================================================ */

/* mobile-only back bar for drill-down panes */
.mobile-back{ display:none; }
body[data-device="mobile"] .mobile-back{ display:flex; align-items:center; gap:4px; width:100%;
  background:var(--surface-2); border:none; border-bottom:1px solid var(--line); color:var(--blue-deep);
  font-size:var(--fs-md); font-weight:600; padding:13px 16px; position:sticky; top:0; z-index:5; }

/* ---------- TABLET + MOBILE: full-screen app sheets ---------- */
body[data-device="mobile"] .window.fullscreen,
body[data-device="tablet"] .window.fullscreen{ border-radius:0; border:none; box-shadow:none; }
body[data-device="mobile"] .window-bar{ height:46px; }
body[data-device="mobile"] .window-title{ font-size:var(--fs-md); }
body[data-device="mobile"] .window-controls .iconbtn{ width:40px; height:40px; font-size:var(--fs-xl); }
body[data-device="mobile"] .win-min{ display:none; }   /* full-screen: close only */

/* ---------- MOBILE shell ---------- */
body[data-device="mobile"] .topbar{ height:46px; padding:0 8px; }
body[data-device="mobile"] .topbar-account, body[data-device="mobile"] .case-status{ display:none; }
body[data-device="mobile"] .topbar-logo{ font-size:var(--fs-base); }
body[data-device="mobile"] .surface{ background-attachment:scroll; }
body[data-device="mobile"] .desktop-icons{ display:none; }   /* dock is the launcher */
body[data-device="mobile"] .desk-stickies{ display:none; }
body[data-device="mobile"] .dock{ height:60px; justify-content:flex-start; overflow-x:auto; overflow-y:hidden;
  padding:0 10px; gap:10px; -webkit-overflow-scrolling:touch; }
body[data-device="mobile"] .dock::-webkit-scrollbar{ display:none; }
body[data-device="mobile"] .dock-app{ width:46px; height:46px; flex:none; }
body[data-device="mobile"] .dock-sep{ display:none; }
body[data-device="mobile"] .feedback-fab{ left:10px; bottom:68px; font-size:var(--fs-2xs); padding:7px 11px; }
body[data-device="mobile"] .watcher{ display:none; }

/* two-pane apps -> single column drill-down */
body[data-device="mobile"] .app{ flex-direction:column; }
body[data-device="mobile"] .app-side{ width:100%; height:auto; flex:none; flex-direction:row; align-items:center;
  overflow-x:auto; overflow-y:hidden; border-right:none; border-bottom:1px solid var(--line); padding:8px 10px; gap:6px; }
body[data-device="mobile"] .app-side .side-head{ display:none; }
body[data-device="mobile"] .side-item{ width:auto; flex:none; white-space:nowrap; border:1px solid var(--line-strong);
  border-radius:18px; padding:8px 14px; font-size:var(--fs-sm); }
body[data-device="mobile"] .app-list{ width:100%; flex:1; }
body[data-device="mobile"] .app-read, body[data-device="mobile"] .chat-thread{ width:100%; flex:1; }
body[data-device="mobile"] .app[data-pane="list"] .app-read,
body[data-device="mobile"] .app[data-pane="list"] .chat-thread{ display:none; }
body[data-device="mobile"] .app[data-pane="detail"] .app-side,
body[data-device="mobile"] .app[data-pane="detail"] .app-list{ display:none; }
body[data-device="mobile"] .list-row{ padding:14px 16px; }
body[data-device="mobile"] .app-read{ padding:18px 18px 40px; }

/* mobile: full-screen modals */
body[data-device="mobile"] .modal-backdrop{ padding:0; align-items:stretch; }
body[data-device="mobile"] .modal{ width:100% !important; max-width:100% !important; height:100%; max-height:100%;
  border-radius:0; display:flex; flex-direction:column; }
body[data-device="mobile"] .modal-body, body[data-device="mobile"] .file-view{ flex:1; }
body[data-device="mobile"] .pw-modal, body[data-device="mobile"] .search-shell, body[data-device="mobile"] .reconstruct-shell{ width:100% !important; }
body[data-device="mobile"] #settingsPanel .modal{ height:auto; max-height:90vh; margin:auto; border-radius:14px; width:94% !important; }

/* mobile: stack the case-file / casefile cards + dossiers + reconstruction */
body[data-device="mobile"] .cf-cards{ grid-template-columns:1fr; }
body[data-device="mobile"] .dossier-grid, body[data-device="mobile"] .board-body,
body[data-device="mobile"] .files-grid{ grid-template-columns:1fr; }
body[data-device="mobile"] .suspect-grid{ grid-template-columns:1fr; }
body[data-device="mobile"] .board-viewtoggle{ display:none; }
body[data-device="mobile"] .board-foot{ max-height:44%; }
body[data-device="mobile"] .reconstruct-sentence{ font-size:var(--fs-base); line-height:2.6; }
body[data-device="mobile"] .reconstruct-blank{ display:inline-block; margin:3px 2px; }
body[data-device="mobile"] .cinema-cap{ font-size:1.15rem; }
body[data-device="mobile"] .cinema-lower{ bottom:16%; padding:0 7%; }
body[data-device="mobile"] .photo, body[data-device="mobile"] .doc{ max-width:100%; }
body[data-device="mobile"] .files-grid{ grid-template-columns:repeat(2,1fr); }

/* bigger tap targets on touch */
body[data-touch="1"] .btn{ min-height:42px; }
body[data-touch="1"] .iconbtn{ min-width:38px; min-height:38px; }
body[data-touch="1"] .board-filter, body[data-touch="1"] .ded-item{ min-height:40px; }
body[data-touch="1"] .dock-app{ min-width:46px; min-height:46px; }
body[data-touch="1"] .file-row, body[data-touch="1"] .mail-row, body[data-touch="1"] .chat-row{ min-height:44px; }
body[data-touch="1"] .pin-btn{ padding:9px 13px; font-size:var(--fs-xs); }

/* draggable / pannable surfaces must not scroll the page under touch */
.cork-note, .cork-pin, .sticky{ touch-action:none; }
.photo-frame.photo-real.zoomed, .photo-frame.photo-real.panning{ touch-action:none; }
.photo-zbtn{ font-size:var(--fs-lg); font-weight:700; line-height:1; min-width:34px; }

/* ---------- TABLET ---------- */
body[data-device="tablet"] .desk-stickies{ display:none; }
body[data-device="tablet"] .cf-cards{ grid-template-columns:1fr 1fr; }
body[data-device="tablet"] .window-bar{ height:42px; }
body[data-device="tablet"] .dock-app{ width:46px; height:46px; }

/* ============================================================
   OUTBOX — Author / Inject console (Dispatch Console finale)
   ============================================================ */
.inject-hint{ font-size:var(--fs-xs); color:var(--term-ink-dim); margin:6px 2px 10px; line-height:1.5; }
.inject-parts{ display:flex; flex-direction:column; gap:6px; margin:4px 0 12px; }
.inject-part{ display:flex; align-items:flex-start; gap:10px; text-align:left; width:100%;
  padding:9px 11px; border:1px solid var(--term-line); border-radius:var(--radius-sm);
  background:var(--term-bg-2); color:var(--term-ink); font-family:var(--mono); cursor:pointer; transition:var(--dur); }
.inject-part:hover:not(:disabled){ border-color:var(--blue); }
.inject-part.on{ border-color:var(--blue); background:var(--blue-wash); box-shadow:0 0 0 1px var(--blue) inset; }
.inject-part.locked, .inject-part:disabled{ opacity:.5; cursor:not-allowed; }
.inject-part .ip-box{ flex:none; font-size:1rem; color:var(--blue); line-height:1.3; }
.inject-part .ip-text{ display:flex; flex-direction:column; gap:2px; }
.inject-part .ip-text b{ font-size:var(--fs-sm); }
.inject-part .ip-desc{ font-size:var(--fs-2xs); color:var(--term-ink-dim); line-height:1.45; }
.inject-pipes{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.inject-pipe{ padding:7px 12px; border:1px solid var(--term-line); border-radius:999px;
  background:var(--term-bg-2); color:var(--term-ink); font-family:var(--mono); font-size:var(--fs-xs); cursor:pointer; transition:var(--dur); }
.inject-pipe:hover:not(:disabled){ border-color:var(--blue); }
.inject-pipe.on{ border-color:var(--blue); background:var(--blue); color:#fff; }
.inject-pipe.locked, .inject-pipe:disabled{ opacity:.5; cursor:not-allowed; }
.inject-meter{ margin:8px 0 14px; }
.inject-meter .im-row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:var(--fs-2xs);
  color:var(--term-ink-dim); letter-spacing:.5px; text-transform:uppercase; margin-bottom:5px; }
.inject-meter.warn .im-row{ color:var(--red); }
.inject-meter .im-bar{ height:7px; border-radius:4px; background:var(--term-bg-2); overflow:hidden; border:1px solid var(--term-line); }
.inject-meter .im-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--red)); transition:width .4s ease; }
.inject-actions{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.inject-actions .btn-primary{ letter-spacing:.6px; }
.inject-done{ padding:12px 14px; border-radius:var(--radius-sm); font-family:var(--mono); font-size:var(--fs-sm); line-height:1.5; }
.inject-done.ok{ background:rgba(159,232,198,.08); border:1px solid var(--term-ink); color:var(--term-ink); }
.inject-done.bad{ background:var(--red-wash); border:1px solid var(--red); color:#ffb3ab; }

/* Chapter 3 — SENT: the four one-way destinations */
.sent-dests{ display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
.sent-dest{ display:flex; flex-direction:column; gap:4px; text-align:left; width:100%; padding:11px 13px;
  border:1px solid var(--term-line); border-left:3px solid var(--blue); border-radius:var(--radius-sm);
  background:var(--term-bg-2); color:var(--term-ink); font-family:var(--mono); cursor:pointer; transition:var(--dur); }
.sent-dest:hover{ border-color:var(--blue); border-left-color:var(--blue); background:var(--blue-wash); box-shadow:0 0 0 1px var(--blue) inset; }
.sent-dest b{ font-size:var(--fs-sm); letter-spacing:1px; color:var(--blue); }
.sent-dest .sd-desc{ font-size:var(--fs-2xs); color:var(--term-ink-dim); line-height:1.5; }