/* =====================================================================
   THE DIRECTORATE — classified workstation
   Palette tokens first. Text is neutral so that colour can mean
   something; each state colour has exactly one job:
     --secure  secure / operational / confirmed        (GREY profile)
     --amber   attention / pending decision / discovered / capital
                                                       (NOTICED)
     --signal  communications / external / intercepted
     --red     compromised / watched / burned / failed (WATCHED)
   ===================================================================== */
:root {
  /* ground: charcoal, not black */
  --bg:        #0d0f0e;
  --panel:     #121514;
  --panel-2:   #161a18;
  --panel-3:   #0f1211;
  --line:      #252b28;
  --line-hi:   #39413c;
  /* ink */
  --ink:       #c9ccc3;
  --ink-hi:    #e4e2d8;
  --ink-dim:   #8e948b;
  --ink-low:   #5e655f;
  --ink-faint: #3f4641;
  /* state */
  --secure:    #86a37c;
  --amber:     #c79c55;
  --amber-dim: #8c6d3d;
  --signal:    #7aa2b0;
  --red:       #b35a4b;
  --hot:       #c7704a;
  --redact:    #2a2f2c;
  --banner:    #4f3a1f;
  /* type */
  --type:  "Special Elite", "Courier New", Courier, monospace;   /* stamps and typed documents only */
  --mono:  "IBM Plex Mono", Consolas, "Lucida Console", monospace; /* metadata, labels, the system */
  --sans:  "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;     /* anything a person says */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 15px; line-height: 1.55;
}
body { display: flex; flex-direction: column; min-height: 100%; }

/* the faintest trace of an old display: a vignette and scanlines you
   notice only if you look for them */
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:60;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.32) 100%); }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:61;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.011) 0 1px, transparent 1px 3px); }

::selection { background: var(--amber-dim); color: var(--bg); }
button, input { font: inherit; color: inherit; }
em { color: var(--amber); font-style: italic; }
.muted { color: var(--ink-dim); } .small { font-size: 12.5px; }

.redact { display:inline-block; height:.95em; vertical-align:-.12em; background:var(--redact); border-top:1px solid #343a36; }

.btn { background: transparent; border: 1px solid var(--line-hi); padding: .55rem 1.2rem;
  letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; cursor: pointer; color: var(--ink);
  transition: border-color .15s, color .15s, background .15s; }
.btn:hover, .btn:focus-visible { border-color: var(--amber); color: var(--amber); outline: none; }
.btn.primary { border-color: var(--amber-dim); color: var(--amber); }
.btn.primary:hover { background: rgba(199,156,85,.08); }

/* =====================================================================
   STATUS STRIP
   ===================================================================== */
#strip { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.4rem 1.1rem; background:rgba(10,11,9,.96); border-bottom:1px solid var(--line);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); flex:0 0 auto; z-index:40; }
#strip .left, #strip .right { display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap; }
#strip .brand { font-family:var(--type); color:var(--ink); letter-spacing:.2em; }
#strip .s-name { color:var(--amber-dim); }
.s-intel { color:var(--signal); font-variant-numeric:tabular-nums; }
.s-intel.broke { color:var(--red); }
.s-rep.rep-GREY { color: var(--ink); }
.s-rep.rep-NOTICED { color: var(--amber); }
.s-rep.rep-WATCHED { color: var(--red); animation: slowblink 2.2s steps(1) infinite; }
@keyframes slowblink { 50% { opacity:.4; } }

#app { flex:1 1 auto; min-height:0; display:flex; }

/* =====================================================================
   DESIGNATION
   ===================================================================== */
.name-screen { margin:auto; text-align:center; padding:2rem 1.2rem; width:100%; max-width:460px;
  display:flex; flex-direction:column; align-items:center; gap:0; }
.name-screen .classif { font-size:10.5px; letter-spacing:.3em; color:var(--ink-low); margin-bottom:3rem; }
.np-frame { width:100%; border:1px solid var(--line); background:var(--panel); padding:2rem 1.6rem; text-align:left; }
.np-label { font-family:var(--mono); font-weight:500; letter-spacing:.26em; color:var(--amber); font-size:.95rem; }
.np-hint { color:var(--ink-dim); font-family:var(--sans); font-size:13px; margin:.3rem 0 1.1rem; }
.np-input { width:100%; background:var(--panel-3); border:1px solid var(--line-hi); color:var(--ink);
  padding:.7rem .8rem; letter-spacing:.14em; font-size:1.1rem; }
.np-input:focus { outline:none; border-color:var(--amber); }
.np-err { min-height:1.2em; color:var(--red); font-size:12px; margin:.5rem 0 1rem; }
.np-frame .btn { width:100%; }
.np-frame .btn + .btn { margin-top:.5rem; }
.np-build { margin-top:1.4rem; font-size:10px; letter-spacing:.3em; color:var(--ink-low); }
.np-build + .np-foot { margin-top:.35rem; }
.ph-build { font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-low); margin-left:.6rem; }
.np-foot { margin-top:1.4rem; font-size:11px; letter-spacing:.24em; color:var(--ink-low); }
.np-foot.warn { color:var(--amber-dim); letter-spacing:.12em; line-height:1.9; }
.np-foot.warn b { color:var(--amber); font-weight:400; }
.btn.danger-btn { border-color:var(--line-hi); color:var(--ink-dim); }
.btn.danger-btn:hover { border-color:var(--red); color:var(--red); background:transparent; }

/* a rotation already answers to this designation */
.clash-card { border:1px solid var(--line-hi); background:var(--panel-3); padding:.8rem .9rem; margin:0 0 1.1rem; }
.cc-name { font-family:var(--type); color:var(--amber); letter-spacing:.16em; font-size:1rem; }
.cc-meta { font-size:12px; color:var(--ink-dim); margin-top:.25rem; }

/* =====================================================================
   TERMINAL
   ===================================================================== */
.terminal { width:100%; display:flex; flex-direction:column; min-height:0; }
.term-head { display:flex; align-items:center; gap:.8rem; padding:.5rem .9rem; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); flex:0 0 auto; }
.th-title { font-family:var(--type); color:var(--ink); letter-spacing:.2em; }
.th-designation { color:var(--amber-dim); }
.th-spacer { flex:1; }
.th-btn { background:transparent; border:1px solid var(--line); color:var(--ink-dim); cursor:pointer;
  padding:.28rem .6rem; letter-spacing:.14em; font-size:10.5px; text-transform:uppercase; }
.th-btn:hover { border-color:var(--amber-dim); color:var(--amber); }
.th-btn.danger:hover { border-color:var(--red); color:var(--red); }

.thread { flex:1 1 auto; min-height:0; overflow-y:auto; padding:1.1rem 1rem 1.4rem;
  display:flex; flex-direction:column; gap:.85rem; scroll-behavior:smooth; max-width:920px; width:100%; margin:0 auto; }

/* ---- Records. Every message is an entry in a file being assembled:
   who, what kind of source, when; then what was said. ---- */
.line { max-width:82%; }
.line .meta { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-low);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.15rem .65rem; margin-bottom:.28rem; }
.line .who { color:var(--ink-dim); font-weight:500; }
.line .src { color:var(--ink-faint); }
.line .ts { margin-left:auto; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
/* the system remembers: a cross-reference to something already on file */
.line .xref { color:var(--amber-dim); border:1px solid rgba(199,156,85,.28); padding:0 .35rem; letter-spacing:.1em; }
.line .bubble { font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line); border-left:2px solid var(--line-hi);
  padding:.55rem .85rem; white-space:pre-wrap; }

/* voices: the rule on the left says what kind of source this is */
.line.sys .bubble { font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--ink-dim); letter-spacing:.01em;
  background:transparent; border:none; border-left:1px dashed var(--line-hi); padding:.1rem .85rem; }
.line.sys .who { color:var(--ink-low); }
.line.partner .who { color:var(--ink); }
.line.partner .bubble { border-left-color:var(--ink-dim); }
.line.k .who { color:var(--secure); }
.line.k .bubble { border-left-color:var(--secure); }
.line.local .who { color:var(--signal); }
.line.local .bubble { border-left-color:var(--signal); }
.line.cutout .who { color:var(--amber); }
.line.cutout .bubble { border-left-color:var(--amber-dim); }
.line.station .who { color:var(--signal); }
.line.station .bubble { border-left:2px dashed var(--signal); }
/* the operator's own entries are decisions, logged, not chat */
.line.me { align-self:flex-start; max-width:82%; }
.line.me .who { color:var(--amber); }
.line.me .bubble { background:transparent; border:none; border-left:2px solid var(--amber); padding:.15rem .85rem; color:var(--ink-hi); }
.line.me .bubble::before { content:"▸ "; color:var(--amber); font-family:var(--mono); }

/* field status: a divider across the record, not a sticker on it */
.statusline { align-self:stretch; max-width:none; display:flex; align-items:center; gap:.7rem; margin:.25rem 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.statusline::before, .statusline::after { content:""; flex:1; height:1px; background:var(--line); }
.statuschip { color:var(--ink-dim); white-space:nowrap; }
.statuschip .st-k { color:var(--ink-faint); margin-right:.45rem; }
.statuschip .st-ts { color:var(--ink-faint); margin-left:.8rem; letter-spacing:.1em; }
.statuschip.st-onsite  { color:var(--secure); }
.statuschip.st-clean   { color:var(--secure); }
.statuschip.st-waiting { color:var(--ink-dim); }
.statuschip.st-compromised { color:var(--hot); }
.statuschip.st-nocontact { color:var(--red); }

/* ---- Decisions. Plain enough to click without thinking, set apart
   enough that nobody mistakes them for something someone said. ---- */
.chips { flex:0 0 auto; max-width:920px; width:100%; margin:0 auto; padding:.3rem 1rem .5rem;
  display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { font-family:var(--sans); font-size:14px; line-height:1.4; text-align:left; cursor:pointer;
  color:var(--ink); background:var(--panel-2); border:1px solid var(--line-hi); border-left:2px solid var(--line-hi);
  padding:.45rem .8rem; transition:border-color .12s, color .12s, background .12s; }
.chip:hover, .chip:focus-visible { border-color:var(--amber); border-left-color:var(--amber); color:var(--ink-hi);
  outline:none; background:rgba(199,156,85,.07); }
.chip em { color:var(--ink-dim); font-style:italic; }           /* roster "why" line */
.chip:hover em { color:var(--amber-dim); }
/* navigation, not a decision: (step back), (look at the board), (say nothing) */
.chip.nav { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-low);
  background:transparent; border-color:transparent; }
.chip.nav:hover, .chip.nav:focus-visible { color:var(--ink); background:transparent; border-color:var(--line-hi); }
/* a chip that buys capability wears its price */
.chip.priced { padding-right:.7rem; }
.chip-cost { display:inline-block; margin-left:.7rem; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  color:var(--amber); border:1px solid rgba(199,156,85,.45); padding:0 .35rem; vertical-align:.08em; }
.chip.unaffordable { color:var(--ink-low); border-color:var(--line); border-left-color:var(--line); cursor:not-allowed; }
.chip.unaffordable .chip-cost { color:var(--red); border-color:rgba(179,90,75,.5); }
.chip.unaffordable:hover { border-color:var(--line); color:var(--ink-low); background:transparent; }
.chip.dead { border-style:dashed; border-color:var(--line); color:var(--ink-low); cursor:not-allowed; }
.chip.dead:hover { border-color:var(--red); color:var(--ink-low); background:transparent; }
.idle-tip { color:var(--ink-dim); font-family:var(--sans); font-size:13px; font-style:italic; }

.cmdrow { flex:0 0 auto; display:flex; align-items:center; gap:.6rem; max-width:920px; width:100%; margin:0 auto;
  padding:.5rem 1rem 1rem; border-top:1px solid var(--line); }
.prompt { color:var(--amber-dim); font-weight:500; }
.cmdline { flex:1; background:transparent; border:none; color:var(--ink); letter-spacing:.06em; padding:.35rem 0; }
.cmdline:focus { outline:none; }
.cmdline::placeholder { color:var(--ink-low); letter-spacing:.14em; font-size:12px; }

/* =====================================================================
   ATTACHMENTS: plate strip in-thread
   ===================================================================== */
.plate-strip { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.55rem; }
.plate-thumb { position:relative; width:118px; height:74px; padding:0; border:1px solid var(--line-hi);
  background:#060807; cursor:zoom-in; overflow:hidden; }
.plate-thumb img { width:100%; height:100%; object-fit:cover; filter:brightness(.82) saturate(.7); display:block; }
.plate-thumb.broken img { display:none; }
.plate-thumb.broken::after { content:"IMG 404 · TEXT INTACT"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; text-align:center; font-size:9px; letter-spacing:.1em; color:var(--ink-low); padding:.3rem; }
.pt-stamp { position:absolute; right:3px; bottom:3px; font-family:var(--type); font-size:9px; letter-spacing:.08em;
  color:var(--red); border:1px solid currentColor; padding:0 .2rem; background:rgba(8,6,5,.55); }

/* =====================================================================
   OVERLAYS: windows of the same system
   ===================================================================== */
.overlay { position:fixed; inset:0; z-index:50; background:rgba(6,8,7,.9); display:flex; padding:1.2rem;
  align-items:center; justify-content:center; }
.panel { background:var(--panel); border:1px solid var(--line-hi); max-width:960px; width:100%; max-height:92vh;
  display:flex; flex-direction:column; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:.55rem .9rem; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-weight:500; letter-spacing:.2em; color:var(--ink); font-size:11.5px; text-transform:uppercase; flex:0 0 auto;
  background:var(--panel-3); }

/* board: an operations board, not a world map */
.board-panel .board-frame { padding:.6rem; overflow:auto; background:#0b0d0c; }
.board-frame svg { display:block; width:100%; height:auto; }
.board-note { padding:.7rem 1rem 1rem; border-top:1px solid var(--line); min-height:3.5rem; }
.bn-label { font-family:var(--mono); font-weight:500; color:var(--amber); letter-spacing:.18em; font-size:11px; margin-bottom:.3rem; text-transform:uppercase; }
.bn-body { font-family:var(--sans); font-size:14px; max-width:80ch; }
.bn-legend { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:.55rem; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-low); text-transform:uppercase; }
.bn-legend i { display:inline-block; width:8px; height:8px; margin-right:.4rem; vertical-align:0; border:1px solid currentColor; }
.bn-legend .lg-active { color:var(--amber); } .bn-legend .lg-active i { border-radius:50%; background:currentColor; }
.bn-legend .lg-pending { color:var(--amber-dim); } .bn-legend .lg-pending i { border-radius:50%; }
.bn-legend .lg-sealed { color:var(--ink-low); } .bn-legend .lg-sealed i { border-radius:50%; border-style:dashed; }
.bn-legend .lg-done { color:var(--secure); }
.bn-legend .lg-comp { color:var(--red); }
.bn-legend .lg-failed { color:var(--ink-dim); } .bn-legend .lg-failed i { border-style:dotted; }
.land { fill:url(#hatch); stroke:#3a433e; stroke-width:.7; stroke-linejoin:round; }
.water { fill:#0d100f; stroke:#2c3430; stroke-width:.6; }
.grid-l { stroke:var(--ink-faint); stroke-width:.4; stroke-dasharray:2 5; opacity:.7; }
.ticks text { font-family:var(--mono); font-size:8px; letter-spacing:.08em; fill:var(--ink-faint); }
.board-text { font-family:var(--type); fill:var(--ink-low); letter-spacing:.12em; }
.pin { cursor:pointer; }
.pin .hit { fill:transparent; }
.pin .dot { fill:var(--amber); }
.pin .ring { fill:none; stroke:var(--amber); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:pulse 3.2s ease-out infinite; }
.pin .label { font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.14em; paint-order:stroke; stroke:#0b0d0c; stroke-width:3px; stroke-linejoin:round; }
.pin .sub { font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; paint-order:stroke; stroke:#0b0d0c; stroke-width:3px; }
/* ACTIVE: the file in play */
.pin.open .label { fill:var(--amber); } .pin.open .sub { fill:var(--amber-dim); }
/* PENDING: issued, not yet opened */
.pin.open.pending .dot { fill:none; stroke:var(--amber-dim); stroke-width:1; } .pin.open.pending .ring { animation:none; stroke:var(--amber-dim); }
.pin.open.pending .label { fill:var(--amber-dim); }
/* COMPLETED / COMPROMISED / FAILED */
.pin.closed .mark { stroke:var(--secure); stroke-width:1.4; } .pin.closed .label { fill:var(--ink-dim); } .pin.closed .sub { fill:var(--secure); }
.pin.closed.loud .mark { stroke:var(--red); } .pin.closed.loud .label { fill:var(--ink); } .pin.closed.loud .sub { fill:var(--red); }
.pin.closed.failed .mark { stroke:var(--ink-low); stroke-dasharray:1.5 1.5; } .pin.closed.failed .label { fill:var(--ink-low); } .pin.closed.failed .sub { fill:var(--ink-low); }
/* PRIOR / BURNED: what the board keeps after the file is gone */
.pin.prior .mark { stroke:var(--ink-low); stroke-width:1.2; } .pin.prior .label { fill:var(--ink-low); } .pin.prior .sub { fill:var(--ink-low); }
.pin.prior.grown .mark { stroke:var(--red); } .pin.prior.grown .sub { fill:var(--red); }
/* SEALED: not in the well yet */
.pin.sealed .ring { stroke:var(--ink-low); stroke-dasharray:2 2; animation:none; } .pin.sealed .label { fill:var(--ink-low); } .pin.sealed .sub { fill:var(--ink-low); letter-spacing:.16em; }
.pin.sel .label { text-decoration:underline; }
.pin:hover .label { fill:var(--ink-hi); }
@keyframes pulse { 0%{transform:scale(.6);opacity:.8;} 100%{transform:scale(2.4);opacity:0;} }
@media (prefers-reduced-motion: reduce) { .pin .ring { animation:none; } }
.board-frame .thread { fill:none; stroke:var(--red); stroke-width:.9; stroke-dasharray:3 3; opacity:.55; }

/* plate viewer */
.plate-panel .pp-code { font-family:var(--mono); }
.plate-view { margin:0; padding:.7rem; overflow:auto; }
.plate-view .plate-frame { position:relative; background:#060807; border:1px solid var(--line); }
.plate-view img { display:block; width:100%; height:auto; max-height:66vh; object-fit:contain; }
.plate-frame.broken { min-height:200px; display:flex; align-items:center; justify-content:center; }
.plate-frame.broken::after { content:"IMAGE 404 · the packet caption stands on its own."; color:var(--ink-low); font-size:12px; letter-spacing:.08em; }
.plate-frame.broken img { display:none; }
.plate-stamp { position:absolute; right:.8rem; bottom:.8rem; font-family:var(--type); font-size:1rem; letter-spacing:.14em;
  color:var(--red); border:2px solid currentColor; padding:0 .5rem; background:rgba(8,6,5,.5); transform:rotate(-6deg); }
.plate-view figcaption { margin-top:.5rem; font-family:var(--sans); font-size:13.5px; color:var(--ink); }
.plate-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem .9rem .8rem; border-top:1px solid var(--line); }
.pp-count { font-size:11px; letter-spacing:.16em; color:var(--ink-dim); }

/* cover accounts: typed drafts waiting for a signature */
.accounts { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:.8rem; width:100%; }
.account { position:relative; background:var(--panel); border:1px solid var(--line-hi); padding:1.55rem .9rem .9rem;
  display:flex; flex-direction:column; gap:.5rem; }
.account::before { content:"COVER ACCOUNT // DRAFT"; position:absolute; top:.5rem; left:.9rem; right:.9rem;
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--ink-low); }
.acc-hd { font-family:var(--type); color:var(--amber); letter-spacing:.1em; }
.acc-body { font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--ink); }
.acc-redact { font-size:11.5px; color:var(--ink-dim); display:flex; gap:.35rem; align-items:baseline; flex-wrap:wrap; }
.acc-redact em { color:var(--amber-dim); }
.acc-sign { align-self:flex-start; margin-top:.2rem; border-color:var(--amber-dim); }

/* saves + shred */
.save-mode, .save-msg { padding:.5rem .9rem; font-size:12px; color:var(--ink-dim); }
.save-list { padding:.3rem .9rem; display:flex; flex-direction:column; gap:.4rem; overflow:auto; }
.save-row { display:flex; align-items:center; gap:.8rem; border:1px solid var(--line); padding:.5rem .7rem; }
.save-row.current { border-color:var(--amber-dim); }
.sr-name { font-family:var(--mono); font-weight:500; color:var(--amber); letter-spacing:.16em; }
.sr-meta { color:var(--ink-dim); font-size:12px; flex:1; line-height:1.5; }
.sr-file { color:var(--ink-low); font-size:11px; letter-spacing:.06em; }
.save-actions { display:flex; flex-wrap:wrap; gap:.6rem; padding:.8rem .9rem; border-top:1px solid var(--line); }
.import-btn { display:inline-flex; align-items:center; cursor:pointer; }
.shred-panel p { padding:1rem; max-width:60ch; font-family:var(--sans); }

/* burn */
.burn-screen { margin:auto; max-width:560px; padding:2rem 1.4rem; text-align:left; }
.burn-screen .classif { font-family:var(--type); color:var(--red); border:2px solid var(--red); display:inline-block;
  padding:.1rem .6rem; letter-spacing:.2em; transform:rotate(-4deg); margin-bottom:1.6rem; }
.burn-body p { margin:0 0 .8rem; max-width:64ch; }
.mono-line { font-style:italic; color:var(--amber-dim); border-left:1px solid var(--ink-low); padding-left:.9rem; }
.burn-screen .btn { margin-top:1.4rem; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 620px) {
  html, body { font-size:14px; }
  .line, .line.me { max-width:92%; }
  .plate-thumb { width:96px; height:60px; }
  .term-head { flex-wrap:wrap; }
}
@media (max-height: 560px) {
  .thread { padding:.7rem 1rem; gap:.6rem; }
}