/* ============================================================
   STARWARD DOMINION · BUREAU OF SURVEY
   A 1960s astronomical survey bureau: paper, hairlines, stamps.
   ============================================================ */

@font-face{
  font-family:'SurveyCond';
  src:url('fonts/survey-cond.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:'SurveyCond';
  src:url('fonts/survey-cond-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:block;
}

:root{
  --paper:#EFE9DC;
  --paper-2:#E7E0D0;
  --paper-3:#F4EFE3;
  --ink:#1A2233;
  --rust:#C4522B;
  --cobalt:#2B5FA8;
  --brass:#7D7A3A;
  --crimson:#A32A2A;
  --grid:#D8D0BF;

  --ink-70:rgba(26,34,51,.70);
  --ink-50:rgba(26,34,51,.50);
  --ink-35:rgba(26,34,51,.35);
  --ink-20:rgba(26,34,51,.20);
  --ink-12:rgba(26,34,51,.12);
  --ink-08:rgba(26,34,51,.08);
  --ink-05:rgba(26,34,51,.05);
  --rust-08:rgba(196,82,43,.08);

  --f-cond:'SurveyCond','Arial Narrow','Liberation Sans Narrow','Helvetica Neue Condensed','Roboto Condensed',system-ui,sans-serif;
  --f-mono:ui-monospace,'SFMono-Regular','DejaVu Sans Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --f-serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'DejaVu Serif','Times New Roman',serif;

  --topbar-h:48px;
  --rail-w:342px;
  --log-h:74px;
  --hair:1px solid var(--ink-20);
  --hair-strong:1px solid var(--ink);
  --pad:14px;

  --motion:1;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-cond);
  font-size:13px;
  line-height:1.35;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;}
[hidden]{display:none !important;}
::selection{background:var(--rust);color:var(--paper);}

/* ---- paper grain: barely perceptible, registers only as "not a screen" ---- */
#grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:var(--grain-opacity,.028);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ---- typographic roles ------------------------------------------------ */
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.serif{font-family:var(--f-serif);font-style:italic;}
.lbl{
  font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:9.5px;color:var(--ink-50);
}
.caps{text-transform:uppercase;letter-spacing:.08em;}

/* ============================================================
   SHELL
   ============================================================ */
.shell{
  height:100dvh; width:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  position:relative;
}

/* ---- top bar ---------------------------------------------------------- */
.topbar{
  min-height:var(--topbar-h);
  display:flex; align-items:center; gap:18px;
  padding:0 var(--pad);
  border-bottom:var(--hair-strong);
  background:var(--paper);
  position:relative; z-index:20;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--ink-20); opacity:.55;
}
.tb-id{display:flex;flex-direction:column;justify-content:center;flex:0 0 auto;}
.tb-empire{
  font-family:var(--f-cond); font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; font-size:14px; line-height:1.1; white-space:nowrap;
}
.tb-bureau{font-size:9px;letter-spacing:.14em;color:var(--ink-50);text-transform:uppercase;white-space:nowrap;}

.tb-ticker{display:flex;align-items:stretch;gap:0;flex:1 1 auto;min-width:0;overflow:hidden;}
.tk{
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:0 12px; min-width:0;
  border-left:var(--hair);
}
.tk:first-child{border-left:none;}
.tk-k{font-size:8.5px;letter-spacing:.12em;color:var(--ink-50);text-transform:uppercase;white-space:nowrap;}
.tk-v{display:flex;align-items:baseline;gap:6px;white-space:nowrap;}
.tk-v .num{font-size:12.5px;letter-spacing:-.01em;}
.tk-d{font-size:9.5px;color:var(--ink-35);}
.tk-d.up{color:var(--brass);}
.tk-d.dn{color:var(--crimson);}
.tk.hot .num{color:var(--rust);}

.tb-turn{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.tb-stardate{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;}
.tb-stardate .mono{font-size:13.5px;letter-spacing:.02em;}

/* ---- buttons ---------------------------------------------------------- */
.btn{
  font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:10.5px; font-weight:700;
  background:transparent; border:1px solid var(--ink); border-radius:0;
  padding:6px 12px; cursor:pointer;
  transition:background-color 90ms linear,color 90ms linear,opacity 90ms linear;
}
.btn:hover:not(:disabled){background:var(--ink);color:var(--paper);}
.btn:active:not(:disabled){background:var(--rust);border-color:var(--rust);color:var(--paper);}
.btn:disabled{opacity:.28;cursor:not-allowed;}
.btn:focus-visible{outline:1px solid var(--rust);outline-offset:2px;}
.btn-quiet{border-color:var(--ink-20);font-weight:400;letter-spacing:.12em;color:var(--ink-70);padding:5px 9px;}
.btn-quiet:hover:not(:disabled){background:var(--ink);color:var(--paper);}
.btn-advance{
  display:flex;align-items:center;gap:9px;padding:8px 14px;
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
.btn-advance:hover:not(:disabled){background:var(--rust);border-color:var(--rust);}
.key-cap{
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;
  border:1px solid currentColor;opacity:.6;padding:0 4px;line-height:1.35;
}
.btn-advance.busy{opacity:.6;pointer-events:none;}

/* ============================================================
   STAGE
   ============================================================ */
.stage{
  display:grid; grid-template-columns:1fr var(--rail-w);
  min-height:0; min-width:0; position:relative;
}

/* ---- chart ------------------------------------------------------------ */
.chartwrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--paper);}
#chart{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;}
#chart.picking{cursor:cell;}

.chart-tools{
  position:absolute; top:38px; right:12px; z-index:6;
  display:flex; flex-direction:column; gap:5px; align-items:stretch;
}
.btn-tool{
  width:30px; height:28px; padding:0; font-size:13px; font-weight:400;
  background:var(--paper); border-color:var(--ink-20);
  display:flex;align-items:center;justify-content:center;
}
.btn-tool-wide{width:auto;padding:0 9px;font-size:9px;letter-spacing:.1em;font-weight:700;height:26px;}
.btn-tool:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

.chart-legend{
  position:absolute; left:34px; bottom:12px; z-index:5;
  display:flex; flex-direction:column; gap:3px;
  border:var(--hair); background:rgba(239,233,220,.82); padding:7px 9px;
  pointer-events:none;
}
.lg-row{display:flex;align-items:center;gap:7px;font-size:8.5px;letter-spacing:.11em;color:var(--ink-50);text-transform:uppercase;}
.lg-mark{width:16px;height:8px;display:block;position:relative;flex:0 0 16px;}
.lg-you{background:var(--rust-08);border:1px solid var(--rust);}
.lg-foreign{border:1px solid var(--cobalt);}
.lg-route{border-top:1px dashed var(--rust);height:0;align-self:center;}
.lg-survey{border:1px solid var(--rust);transform:rotate(45deg) scale(.6);height:8px;width:8px;}

.chart-hint{
  position:absolute; left:50%; transform:translateX(-50%); top:12px; z-index:8;
  background:var(--ink); color:var(--paper);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px; display:flex; align-items:center; gap:12px; max-width:92%;
  border-radius:0;
}
.chart-hint .hx{cursor:pointer;border:1px solid var(--paper);background:none;color:var(--paper);
  font-family:var(--f-cond);font-size:9px;letter-spacing:.1em;padding:2px 7px;text-transform:uppercase;}

/* ============================================================
   DOSSIER (right rail on wide, bottom sheet on narrow)
   ============================================================ */
.dossier{
  border-left:var(--hair-strong);
  background:var(--paper);
  display:flex; flex-direction:column;
  min-height:0; position:relative; z-index:18;
}
.sheet-handle{display:none;}
.sheet-tabs{display:none;}
.dossier-scroll{
  overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-height:0;
  overscroll-behavior:contain;
}
.sheet-log{display:none;}

/* ---- blocks ----------------------------------------------------------- */
.block{border-bottom:var(--hair);position:relative;}
.block:last-child{border-bottom:none;}
.block-head{
  display:flex; align-items:baseline; gap:8px;
  padding:10px var(--pad) 7px;
}
.block-head .bh-t{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.block-head .bh-n{margin-left:auto;font-size:8.5px;letter-spacing:.1em;color:var(--ink-35);font-family:var(--f-mono);}
.block-body{padding:0 var(--pad) 13px;}
.block.tint{background:var(--ink-05);}

/* crop marks on a block corner */
.crop::before,.crop::after{
  content:""; position:absolute; width:7px; height:7px; pointer-events:none;
}
.crop::before{top:3px;left:3px;border-top:1px solid var(--ink-35);border-left:1px solid var(--ink-35);}
.crop::after{bottom:3px;right:3px;border-bottom:1px solid var(--ink-35);border-right:1px solid var(--ink-35);}

/* field grid: label left, mono value right, hairline between */
.fgrid{display:flex;flex-direction:column;}
.frow{
  display:flex;align-items:baseline;gap:10px;
  padding:5px 0; border-bottom:1px solid var(--ink-08);
}
.frow:last-child{border-bottom:none;}
.frow .k{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);
  flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.frow .v{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12px;
  text-align:right;flex:0 0 auto;letter-spacing:-.01em;
}
.frow .v.dim{color:var(--ink-35);}
.frow .v.up{color:var(--brass);}
.frow .v.dn{color:var(--crimson);}
.frow .v.rust{color:var(--rust);}
.frow.sub .k{padding-left:9px;}
.frow.sub .k::before{content:"·";position:absolute;margin-left:-9px;color:var(--ink-35);}

/* narrative voice */
.note{
  font-family:var(--f-serif);font-style:italic;font-size:12px;line-height:1.5;
  color:var(--ink-70); padding:2px 0;
}
.note.tight{margin-top:-3px;}

/* stamps */
.stamp{
  display:inline-block; font-family:var(--f-cond); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:9.5px;
  padding:2px 7px 1px; border:1px solid currentColor; border-radius:0;
  transform:rotate(-2.4deg); opacity:.88; white-space:nowrap;
}
.stamp.rust{color:var(--rust);}
.stamp.cobalt{color:var(--cobalt);}
.stamp.brass{color:var(--brass);}
.stamp.crimson{color:var(--crimson);}
.stamp.ink{color:var(--ink-70);}
.stamp.r2{transform:rotate(-3.6deg);}
.stamp.r3{transform:rotate(-1.6deg);}

/* action rows */
.actions{display:flex;flex-direction:column;gap:0;margin-top:4px;}
.act{
  display:flex;align-items:center;gap:10px; width:100%;
  border:none;border-top:var(--hair);background:transparent;cursor:pointer;
  padding:9px 4px; text-align:left; border-radius:0;
  transition:background-color 80ms linear;
}
.act:last-child{border-bottom:var(--hair);}
.act:hover:not(:disabled){background:var(--rust-08);}
.act:disabled{opacity:.4;cursor:not-allowed;}
.act .a-name{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;}
.act .a-cost{
  margin-left:auto;font-family:var(--f-mono);font-size:10.5px;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--ink-50);line-height:1.25;white-space:nowrap;
}
.act.can .a-cost .ok{color:var(--brass);}
.act:disabled .a-cost .ok{color:var(--crimson);}
.act .a-why{font-size:9px;color:var(--crimson);letter-spacing:.04em;text-transform:none;font-family:var(--f-serif);font-style:italic;}

/* build / structure list */
.struct{
  display:flex;align-items:baseline;gap:8px;padding:4px 0;
  border-bottom:1px solid var(--ink-08);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
}
.struct .s-n{flex:1 1 auto;}
.struct .s-c{font-family:var(--f-mono);font-size:10px;color:var(--ink-50);}
.slotline{display:flex;gap:3px;flex-wrap:wrap;margin:6px 0 8px;}
.slot{width:13px;height:13px;border:1px solid var(--ink-20);}
.slot.full{background:var(--ink);border-color:var(--ink);}

/* stepped stat chart on grid paper */
.stepchart{display:block;width:100%;height:34px;border:1px solid var(--ink-08);background:var(--paper-3);}

/* progress (mandate) */
.mand{margin:3px 0 9px;}
.mand-top{display:flex;align-items:baseline;gap:8px;}
.mand-r{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;flex:1 1 auto;}
.mand-p{font-family:var(--f-mono);font-size:10px;color:var(--ink-50);}
.mand-bar{height:6px;border:1px solid var(--ink-20);margin-top:3px;position:relative;}
.mand-fill{position:absolute;inset:0 100% 0 0;background:var(--rust);transition:inset 400ms linear;}
.mand.done .mand-fill{background:var(--brass);}
.mand.done .mand-r{color:var(--brass);}

/* hull / fleet list */
.vessel{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid var(--ink-08);}
.vessel .v-n{font-size:10px;letter-spacing:.1em;text-transform:uppercase;flex:0 0 auto;}
.vessel .v-s{font-family:var(--f-serif);font-style:italic;font-size:11px;color:var(--ink-50);margin-left:auto;text-align:right;}

.empty{padding:22px var(--pad);text-align:center;}
.empty .e-t{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35);}
.empty .e-s{font-family:var(--f-serif);font-style:italic;font-size:12px;color:var(--ink-50);margin-top:6px;line-height:1.5;}

/* ============================================================
   LOG STRIP
   ============================================================ */
.logstrip{
  height:var(--log-h); display:flex; flex-direction:column;
  border-top:var(--hair-strong); background:var(--paper); min-height:0;
}
.log-head{
  display:flex;align-items:center;gap:10px;padding:4px var(--pad) 3px;flex:0 0 auto;
  border-bottom:1px solid var(--ink-08);
}
.log-title{font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;}
.log-rule{flex:1 1 auto;height:1px;background:var(--ink-20);}
.log-count{font-size:8.5px;color:var(--ink-35);letter-spacing:.08em;}
.btn-logtoggle{padding:2px 7px;font-size:8.5px;}
.log-lines{
  flex:1 1 auto; overflow-y:auto; padding:5px var(--pad) 8px;
  display:flex; flex-direction:column; gap:2px; overscroll-behavior:contain;
}
.logline{display:flex;gap:9px;align-items:baseline;font-size:12px;line-height:1.42;}
.logline .lt{font-family:var(--f-mono);font-size:9.5px;color:var(--ink-35);flex:0 0 52px;letter-spacing:-.01em;}
.logline .lx{font-family:var(--f-serif);font-style:italic;color:var(--ink-70);flex:1 1 auto;}
.logline.good .lx{color:var(--brass);}
.logline.bad .lx{color:var(--crimson);}
.logline.mark .lx{color:var(--rust);}
.logline .lx b{font-style:normal;font-weight:400;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;}
.logstrip.collapsed{height:26px;}
.logstrip.collapsed .log-lines{display:none;}
.logstrip.collapsed .log-head{border-bottom:none;}

/* ============================================================
   OVERLAY / DISPATCH
   ============================================================ */
/* A form is pinned to the plate, not laid over it: the chart stays readable
   and stays the subject of the frame while a card is up. */
.overlay{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  padding:0;
}
.dispatch{
  pointer-events:auto;
  position:absolute;top:56px;right:14px;
  width:min(344px,calc(100vw - 28px)); max-height:min(74vh,560px); overflow-y:auto;
  background:var(--paper); border:1px solid var(--ink);
  box-shadow:0 0 0 1px var(--paper), 4px 4px 0 rgba(26,34,51,.07);
  padding:0 0 2px;
  animation:printIn 120ms linear both;
}
/* a card that must be answered gets one rust rule down its left edge */
.dispatch.forced{border-left:3px solid var(--rust);}
.dsp-corner{position:absolute;width:9px;height:9px;pointer-events:none;}
.dsp-corner.tl{top:4px;left:4px;border-top:1px solid var(--ink-35);border-left:1px solid var(--ink-35);}
.dsp-corner.tr{top:4px;right:4px;border-top:1px solid var(--ink-35);border-right:1px solid var(--ink-35);}
.dsp-corner.bl{bottom:4px;left:4px;border-bottom:1px solid var(--ink-35);border-left:1px solid var(--ink-35);}
.dsp-corner.br{bottom:4px;right:4px;border-bottom:1px solid var(--ink-35);border-right:1px solid var(--ink-35);}
.dsp-head{
  display:flex;align-items:baseline;gap:10px;padding:13px 18px 9px;
  border-bottom:var(--hair-strong);
}
.dsp-form{font-size:8.5px;color:var(--ink-35);letter-spacing:.1em;}
.dsp-title{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.dsp-body{padding:14px 18px 12px;}
.dsp-body .note{font-size:13px;line-height:1.55;}
.dsp-body .fgrid{margin-top:11px;}
.dsp-actions{display:flex;flex-direction:column;gap:0;padding:0 18px 14px;}
.dsp-btn{
  border:1px solid var(--ink);background:transparent;cursor:pointer;border-radius:0;
  padding:11px 13px;text-align:left;display:flex;flex-direction:column;gap:3px;
  margin-top:7px;transition:background-color 80ms linear,color 80ms linear;
}
.dsp-btn:hover{background:var(--ink);color:var(--paper);}
.dsp-btn .db-t{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;}
.dsp-btn .db-s{font-family:var(--f-serif);font-style:italic;font-size:11.5px;opacity:.72;line-height:1.4;}
.dsp-btn.primary{background:var(--rust);border-color:var(--rust);color:var(--paper);}
.dsp-btn.primary:hover{background:var(--ink);border-color:var(--ink);}
.dsp-seal{
  margin:14px 18px 0; display:flex; align-items:center; gap:10px;
  border-top:var(--hair);padding-top:10px;
}
.dsp-seal .mono{font-size:9px;color:var(--ink-35);letter-spacing:.08em;}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--log-h) + 16px);transform:translateX(-50%);
  z-index:70;background:var(--ink);color:var(--paper);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:8px 14px;max-width:90vw;text-align:center;
  animation:printIn 120ms linear both;
}
.toast.bad{background:var(--crimson);}
.toast.good{background:var(--brass);}

/* ============================================================
   MOTION · print in, never spring
   ============================================================ */
@keyframes printIn{from{opacity:0}to{opacity:1}}
@keyframes ruleDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.print-in{animation:printIn 120ms linear both;}
.rule-draw{position:relative;}
.rule-draw::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ink);
  transform-origin:left center;animation:ruleDraw 180ms linear both;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:1ms !important;transition-duration:1ms !important;}
}
body.no-motion *{animation-duration:1ms !important;transition-duration:1ms !important;}

/* scrollbars: hairline */
.dossier-scroll::-webkit-scrollbar,.log-lines::-webkit-scrollbar,.dispatch::-webkit-scrollbar{width:8px;height:8px;}
.dossier-scroll::-webkit-scrollbar-thumb,.log-lines::-webkit-scrollbar-thumb,.dispatch::-webkit-scrollbar-thumb{
  background:var(--ink-20);border:2px solid var(--paper);
}
.dossier-scroll::-webkit-scrollbar-track,.log-lines::-webkit-scrollbar-track{background:transparent;}
.dossier-scroll{scrollbar-width:thin;scrollbar-color:var(--ink-20) transparent;}

/* ============================================================
   NARROW · bottom sheet, chart first
   ============================================================ */
@media (max-width:900px){
  :root{--log-h:30px;--pad:12px;}
  .topbar{flex-wrap:wrap;gap:0 10px;padding:5px 11px 6px;min-height:0;}
  .tb-id{flex:1 1 auto;}
  .tb-empire{font-size:12.5px;}
  .tb-bureau{display:none;}
  .tb-turn{gap:7px;}
  .tb-stardate .lbl{display:none;}
  .tb-stardate .mono{font-size:12px;}
  .btn-advance{padding:6px 10px;font-size:10px;}
  .btn-advance .key-cap{display:none;}
  .tb-ticker{order:3;flex:1 1 100%;margin-top:4px;border-top:1px solid var(--ink-08);padding-top:3px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
  .tb-ticker::-webkit-scrollbar{display:none;}
  .tk{padding:0 10px 0 0;border-left:none;border-right:var(--hair);padding-right:10px;}
  .tk:last-child{border-right:none;}
  .tk-v .num{font-size:11.5px;}

  .stage{display:flex;flex-direction:column;}
  .chartwrap{flex:1 1 auto;min-height:140px;}

  /* a card takes the lower half of a tall phone, so the chart above it is
     still the frame the person is looking at */
  .dispatch{top:auto;bottom:8px;left:8px;right:8px;width:auto;max-height:48vh;}

  .dossier{
    position:relative;left:auto;right:auto;bottom:auto;z-index:20;
    flex:0 0 auto;height:auto;
    border-left:none;border-top:var(--hair-strong);
  }
  .dossier .dossier-scroll,.dossier .sheet-log{height:0;overflow:hidden;}
  .dossier.open .dossier-scroll{height:min(50vh,400px);overflow-y:auto;}
  .dossier.open .sheet-log{height:min(50vh,400px);overflow-y:auto;}
  .sheet-handle{
    display:flex;align-items:center;gap:9px;height:42px;flex:0 0 42px;
    padding:0 12px;cursor:pointer;position:relative;
    border-bottom:1px solid var(--ink-08);
  }
  .sh-grip{width:26px;height:3px;background:var(--ink-20);flex:0 0 26px;}
  .sh-label{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;flex:1 1 auto;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sh-chev{width:9px;height:9px;border-right:1.5px solid var(--ink-50);border-bottom:1.5px solid var(--ink-50);
    transform:rotate(-135deg);transition:transform 170ms linear;flex:0 0 auto;}
  .dossier.open .sh-chev{transform:rotate(45deg);}
  .sheet-tabs{display:flex;flex:0 0 auto;border-bottom:var(--hair);}
  .dossier:not(.open) .sheet-tabs{display:none;}
  .tab{
    flex:1 1 50%;background:transparent;border:none;border-radius:0;cursor:pointer;
    padding:8px 0;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-35);border-bottom:2px solid transparent;
  }
  .tab.is-on{color:var(--ink);border-bottom-color:var(--rust);}

  .sheet-log .logstrip{height:100%;border-top:none;}
  .dossier-scroll.pane-off{display:none;}

  .logstrip.collapsed{height:30px;}
  .chart-tools{top:34px;right:7px;}
  .btn-tool-wide{display:none;}
  .chart-legend{display:none;}
  /* the instruction sits at the foot of the plate on a phone, so it never
     covers the system it is telling you to tap */
  .chart-hint{top:auto;bottom:10px;left:10px;right:10px;transform:none;max-width:none;
    font-size:9px;line-height:1.35;padding:6px 9px;gap:9px;justify-content:space-between;}
  .chart-hint .hx{flex:0 0 auto;}
  .toast{bottom:52px;}
  .tk{padding-right:8px;}
  .tk .tk-k{font-size:7.5px;letter-spacing:.06em;}
  .tk-v .num{font-size:11px;}
}

@media (max-width:520px){
  .tb-empire{font-size:11.5px;letter-spacing:.1em;}
  .chart-tools{gap:4px;}
  .tb-ticker{gap:0;}
  .tk{padding-right:7px;}
}

/* A phone held sideways is short: the chart is the subject, so the bars get
   thinner and the drawer takes less, leaving the plate the larger share. */
@media (max-width:900px) and (max-height:540px){
  .topbar{padding:4px 10px 5px;gap:0 8px;}
  .tb-ticker{margin-top:2px;padding-top:2px;}
  .dossier.open .dossier-scroll,
  .dossier.open .sheet-log{height:min(40vh,220px);}
  .sheet-handle{height:34px;flex:0 0 34px;}
  .chartwrap{min-height:150px;}
  .chart-hint{padding:4px 8px;font-size:8.5px;}
}

/* ============================================================
   DOSSIER PARTS · stamps, registers, market, steppers
   ============================================================ */
.stamps{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px;}

.btable{margin:2px 0 4px;}
.btr{
  display:grid;grid-template-columns:1.5fr 1.15fr .62fr .62fr .68fr .6fr;
  gap:6px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--ink-08);
}
.bth{border-bottom:1px solid var(--ink-20);}
.bth span{font-size:8px;letter-spacing:.11em;color:var(--ink-35);text-transform:uppercase;}
.bth span:nth-child(n+3){text-align:right;}
.btr .bn{font-size:10px;letter-spacing:.05em;font-family:var(--f-mono);}
.btr .bt{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);}
.btr .bn2{text-align:right;font-size:10.5px;color:var(--ink-70);}

.buildnote{
  font-family:var(--f-serif);font-style:italic;font-size:11px;color:var(--ink-50);
  padding:0 4px 8px;line-height:1.35;
}
.buildnote:last-child{padding-bottom:2px;}

.market{display:flex;flex-direction:column;}
.mkt-row{
  display:grid;grid-template-columns:1fr auto auto auto;gap:7px;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--ink-08);
}
.mkt-row:last-child{border-bottom:none;}
.mkt-k{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;}
.mkt-v{font-size:11.5px;color:var(--ink-70);text-align:right;min-width:56px;}
.mkt-b{
  border:1px solid var(--ink-20);background:transparent;cursor:pointer;border-radius:0;
  font-family:var(--f-cond);font-size:9px;letter-spacing:.08em;font-weight:700;
  padding:4px 6px;display:flex;flex-direction:column;align-items:center;line-height:1.15;
  transition:background-color 80ms linear,color 80ms linear;
}
.mkt-b:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.mkt-p{font-family:var(--f-mono);font-size:8.5px;font-weight:400;opacity:.7;}

.rt-row{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid var(--ink-08);}
.rt-n{font-size:10px;letter-spacing:.09em;text-transform:uppercase;flex:1 1 auto;}
.rt-v{font-size:10.5px;flex:0 0 auto;}
.rt-x{
  border:none;background:transparent;cursor:pointer;color:var(--ink-35);
  font-size:14px;line-height:1;padding:0 2px;border-radius:0;
}
.rt-x:hover{color:var(--crimson);}

.chartcap{margin:11px 0 4px;}
.stepchart-empty{
  font-family:var(--f-serif);font-style:italic;font-size:11px;color:var(--ink-35);
  border:1px dashed var(--ink-20);padding:9px;text-align:center;
}

.stepper{display:flex;align-items:center;gap:9px;margin:12px 0 4px;border-top:var(--hair);padding-top:11px;}
.st-b{
  width:26px;height:26px;border:1px solid var(--ink);background:transparent;cursor:pointer;
  border-radius:0;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.st-b:hover{background:var(--ink);color:var(--paper);}
.st-v{font-size:15px;min-width:34px;text-align:center;}
.st-l{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);margin-left:auto;}

canvas.orbital{
  display:block;width:100%;height:auto;border:1px solid var(--ink-08);
  background:var(--paper-3);margin-bottom:6px;
}