/* ════════════════════════════════════════════════════════════════════
   MOCK KIT — shared components for the boardroom layout exploration.
   Builds on lib/instrument.css (tokens only). The trading-graph, the
   pillar tile, the delta Read ribbon, the Chief bar, the 16:9 frame.
   ════════════════════════════════════════════════════════════════════ */

/* 16:9 cockpit frame — full bleed, no page scroll */
html,body{ height:100%; overflow:hidden; }
.ck{ position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; }
.ck-top{ display:flex; align-items:center; gap:18px; padding:11px 20px; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 86%, transparent); }
.ck-brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.025em; font-size:15px; }
.ck-brand .bk{ color:var(--accent); }
.ck-mark{ width:23px; height:23px; flex-shrink:0; }
.ck-pulse{ display:flex; align-items:center; gap:0; margin-left:6px; }
.ck-pnode{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 13px; position:relative; }
.ck-pnode + .ck-pnode::before{ content:''; position:absolute; left:0; top:5px; width:1px; height:18px; background:var(--border); }
.ck-pt{ font-family:'Martian Mono',monospace; font-size:9px; letter-spacing:.1em; color:var(--text-3); }
.ck-pv{ font-family:'Martian Mono',monospace; font-size:10px; }
.ck-pnode.on .ck-pt{ color:var(--accent); }
.ck-pnode.on{ }
.ck-dot{ width:6px; height:6px; border-radius:50%; background:var(--profit); box-shadow:0 0 0 3px var(--profit-soft); }
.ck-spacer{ margin-left:auto; }
.ck-live{ font-family:'Martian Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
  display:inline-flex; align-items:center; gap:7px; }
.ck-live i{ width:6px; height:6px; border-radius:50%; background:var(--profit); box-shadow:0 0 0 3px var(--profit-soft); animation:ckpulse 2.6s ease-in-out infinite; }
@keyframes ckpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
.ck-theme{ display:flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--border); border-radius:100px;
  background:var(--surface); color:var(--text-2); cursor:pointer; font-family:'Martian Mono',monospace; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; }
.ck-theme:hover{ border-color:var(--accent-28); color:var(--accent); }
.ck-body{ flex:1; min-height:0; padding:14px; display:flex; gap:14px; }

/* ── Trading graph tile ─────────────────────────────────────────────── */
.mg{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 14px 8px;
  display:flex; flex-direction:column; min-height:0; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.mg:hover{ border-color:var(--accent-28); }
.mg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px; }
.mg-label{ font-family:'Martian Mono',monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:7px; }
.mg-label svg{ width:13px; height:13px; color:var(--text-3); }
.mg-vwrap{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.mg-val{ font-family:'Martian Mono',monospace; font-size:21px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.mg-val .u{ font-size:.5em; color:var(--muted); font-weight:400; margin-left:1px; }
.mg-delta{ font-family:'Martian Mono',monospace; font-size:10.5px; display:inline-flex; align-items:center; gap:4px; }
.mg-delta.up{ color:var(--profit); } .mg-delta.dn{ color:var(--risk); } .mg-delta.flat{ color:var(--text-3); }
.mg-sub{ font-family:'Martian Mono',monospace; font-size:9px; letter-spacing:.04em; color:var(--text-3); }
.mg-sub2{ font-family:'Sora'; font-size:10.5px; color:var(--text-3); margin:-1px 0 5px; line-height:1.3; }
.mg-plot{ position:relative; flex:1; min-height:0; margin-top:2px; }
.mg-plot svg{ display:block; width:100%; height:100%; }
.mg-card{ position:absolute; pointer-events:none; z-index:5;
  background:var(--surface-3); border:1px solid var(--border); border-radius:8px; padding:8px 11px; min-width:150px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); }
[data-theme="graphite"] .mg-card{ box-shadow:0 8px 24px rgba(25,30,45,.16); }
.mg-card .m{ font-family:'Martian Mono',monospace; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.mg-card .v{ font-family:'Martian Mono',monospace; font-size:15px; font-weight:600; letter-spacing:-.02em; margin-top:2px; }
.mg-card .n{ font-family:'Sora'; font-size:10.5px; color:var(--text-2); margin-top:4px; line-height:1.4; width:175px; }
.mg-card .n b{ font-family:'Martian Mono',monospace; font-weight:500; }
.mg-card .n .pos{ color:var(--profit); } .mg-card .n .neg{ color:var(--risk); }
.mg-axis{ display:flex; justify-content:space-between; padding-top:5px; }
.mg-axis span{ font-family:'Martian Mono',monospace; font-size:8px; letter-spacing:.06em; color:var(--dim); }

/* pinned latest-bar value (P&L: monthly print under the YTD headline) */
.mg-pin{ position:absolute; transform:translate(-50%,-115%); font-family:'Martian Mono',monospace; font-size:10px;
  font-weight:600; letter-spacing:-.02em; padding:1px 4px; border-radius:4px; background:var(--surface-3);
  pointer-events:none; white-space:nowrap; }
.mg-pin.pos{ color:var(--profit); } .mg-pin.neg{ color:var(--risk); }
/* faint magnitude scale at the right edge of a line plot — the band it travels */
.mg-scale{ position:absolute; right:7px; transform:translateY(-50%); font-family:'Martian Mono',monospace;
  font-size:8.5px; letter-spacing:.02em; color:var(--dim); pointer-events:none;
  padding:0 3px; border-radius:3px; background:color-mix(in srgb, var(--surface) 72%, transparent); }
.mg-scale.lft{ left:7px; right:auto; }
/* headline qualifier (e.g. P&L "YTD") — small, dim, never a unit */
.mg-vnote{ font-family:'Martian Mono',monospace; font-size:.36em; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); margin-left:6px; vertical-align:middle; }

/* dense card breakdown — composition rows (bar) or variation rows (MoM delta) */
.mg-break{ border-top:1px solid var(--border-soft); margin-top:8px; padding-top:8px; display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
.mg-bttl{ display:flex; align-items:baseline; justify-content:space-between; font-family:'Martian Mono',monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:2px; }
.mg-bcol{ color:var(--dim); }
.mg-bk{ font-family:'Sora'; font-size:11.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-bv{ font-family:'Martian Mono',monospace; font-size:11px; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
/* composition row: label · value · short proportional bar, on one line */
.mg-brow.b{ display:grid; grid-template-columns:1fr auto 46px; align-items:center; gap:0 12px; }
.mg-bbar{ height:4px; border-radius:100px; background:var(--surface-3); overflow:hidden; }
.mg-bbar i{ display:block; height:100%; border-radius:100px; }
/* variation row: label · value · MoM delta, on one tabular line */
.mg-brow.d{ display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:0 14px; }
.mg-bd{ font-family:'Martian Mono',monospace; font-size:10px; font-variant-numeric:tabular-nums; min-width:54px; text-align:right; }
.mg-bd.up{ color:var(--profit); } .mg-bd.dn{ color:var(--risk); }

/* narrative Read column */
.nread{ background:var(--surface); border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; min-height:0; }
.nread-h{ display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--border); }
.nread-h .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-10); }
.nread-h .t{ font-family:'Sora'; font-weight:700; font-size:14px; }
.nread-h .m{ margin-left:auto; font-family:'Martian Mono',monospace; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.nread-body{ overflow-y:auto; padding:18px 18px 16px; flex:1; min-height:0; }
.nread-lede{ font-family:'Sora'; font-size:16px; font-weight:600; line-height:1.45; letter-spacing:-.012em; color:var(--text); margin-bottom:18px; text-wrap:balance; }
.nread-p{ font-family:'Sora'; font-size:13px; font-weight:400; line-height:1.72; color:var(--text-2); margin-bottom:15px; text-wrap:pretty; }
/* bold used sparingly — only the figure that carries the sentence */
.nread-p b, .nread-lede b, .nread-w b{ font-family:'Sora'; font-weight:650; color:var(--text); }
.nread .pos{ color:var(--profit); } .nread .neg{ color:var(--risk); }
.nread-k{ font-family:'Martian Mono',monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); display:block; margin:6px 0 12px; padding-top:16px; border-top:1px solid var(--border-soft); }
.nread-w{ display:grid; grid-template-columns:auto 1fr; gap:11px 11px; margin-bottom:4px; }
.nread-w .wd{ width:6px; height:6px; border-radius:50%; margin-top:7px; }
.nread-w .wx{ font-family:'Sora'; font-size:12.5px; line-height:1.55; color:var(--text-2); }
.nread-w .wx b{ color:var(--text); font-weight:650; }
.nread-foot{ border-top:1px solid var(--border); padding:11px 16px; display:flex; flex-direction:column; gap:7px; flex:0 0 auto; }
.nread-fr{ display:flex; align-items:center; justify-content:space-between; }
.nread-fr .l{ font-family:'Sora'; font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:7px; }
.nread-fr .l .ar{ font-size:9px; } .nread-fr .v{ font-family:'Martian Mono',monospace; font-size:11.5px; }

/* progress / plan tile — levers distributed to fill the card (no dead band) */
.mg-init{ display:flex; flex-direction:column; flex:1; justify-content:space-between; padding:6px 0 2px; gap:10px; }
.mg-icap{ display:flex; align-items:baseline; justify-content:space-between; font-family:'Martian Mono',monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:2px; }
.mg-irow{ display:grid; grid-template-columns:1fr auto; gap:7px 10px; align-items:baseline; }
.mg-iname{ font-family:'Sora'; font-size:12px; color:var(--text-2); }
.mg-ival{ font-family:'Martian Mono',monospace; font-size:11px; color:var(--text); font-variant-numeric:tabular-nums; }
.mg-ibar{ grid-column:1/-1; height:5px; border-radius:100px; background:var(--surface-3); overflow:hidden; position:relative; }
.mg-ibar i{ display:block; height:100%; border-radius:100px; background:var(--accent); }
.mg-ibar i.p{ background:var(--profit); }
.mg-ipct{ font-family:'Martian Mono',monospace; font-size:9px; color:var(--dim); }

/* ── Compact pillar chip (instrument rail) ──────────────────────────── */
.pill{ background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:10px 12px;
  display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:border-color .18s; min-height:0; }
.pill:hover{ border-color:var(--accent-28); }
.pill.sel{ border-color:var(--accent); background:color-mix(in srgb, var(--accent-10) 60%, var(--surface)); }
.pill-top{ display:flex; align-items:center; justify-content:space-between; }
.pill-l{ font-family:'Martian Mono',monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pill-d{ font-family:'Martian Mono',monospace; font-size:9.5px; } .pill-d.up{ color:var(--profit); } .pill-d.dn{ color:var(--risk); }
.pill-v{ font-family:'Martian Mono',monospace; font-size:16px; font-weight:600; letter-spacing:-.02em; }
.pill-v .u{ font-size:.5em; color:var(--muted); }
.pill-spark{ height:22px; }

/* ── Delta Read ─────────────────────────────────────────────────────── */
.read{ background:var(--surface); border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; min-height:0; }
.read-head{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); }
.read-head .t{ font-family:'Sora'; font-weight:650; font-size:13.5px; }
.read-head .meta{ margin-left:auto; font-family:'Martian Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.read-lead{ padding:13px 16px; font-family:'Sora'; font-size:13px; line-height:1.5; color:var(--text); border-bottom:1px solid var(--border-soft); }
.read-lead b{ font-family:'Martian Mono',monospace; font-weight:500; }
.read-lead .pos{ color:var(--profit); } .read-lead .neg{ color:var(--risk); }
.read-list{ overflow-y:auto; padding:6px 0; flex:1; min-height:0; }
.read-item{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; padding:9px 16px; cursor:pointer; transition:background .15s; }
.read-item:hover{ background:var(--surface-2); }
.read-tick{ width:7px; height:7px; border-radius:50%; margin-top:5px; }
.read-tick.up{ background:var(--profit); } .read-tick.dn{ background:var(--risk); }
.read-body .k{ font-family:'Martian Mono',monospace; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.read-body .x{ font-family:'Sora'; font-size:12px; color:var(--text-2); line-height:1.35; margin-top:1px; }
.read-body .x .go{ color:var(--accent); border-bottom:1px solid var(--accent-28); }
.read-v{ font-family:'Martian Mono',monospace; font-size:11px; } .read-v.up{ color:var(--profit); } .read-v.dn{ color:var(--risk); }

/* ── Chief of Staff ─────────────────────────────────────────────────── */
.chief{ display:flex; flex-direction:column; min-height:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.chief-head{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); }
.chief-av{ width:26px; height:26px; border-radius:8px; background:var(--accent-10); border:1px solid var(--accent-28);
  display:flex; align-items:center; justify-content:center; color:var(--accent); }
.chief-av svg{ width:15px; height:15px; }
.chief-head .t{ font-family:'Sora'; font-weight:650; font-size:13px; }
.chief-head .s{ font-family:'Martian Mono',monospace; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.chief-stream{ flex:1; min-height:0; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.cmsg{ max-width:88%; font-size:12.5px; line-height:1.5; }
.cmsg.ai{ color:var(--text); }
.cmsg.me{ align-self:flex-end; background:var(--accent); color:var(--on-accent); padding:8px 12px; border-radius:11px 11px 3px 11px; font-size:12px; }
.cmsg.ai .who{ font-family:'Martian Mono',monospace; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:3px; }
.cmsg.ai b{ font-family:'Martian Mono',monospace; font-weight:500; } .cmsg.ai .pos{ color:var(--profit); } .cmsg.ai .neg{ color:var(--risk); }
.chief-input{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-top:1px solid var(--border); }
.chief-input .box{ flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:9px 13px;
  font-family:'Sora'; font-size:12px; color:var(--text-3); }
.chief-mic{ width:34px; height:34px; border-radius:9px; background:var(--accent); color:var(--on-accent); border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chief-mic svg{ width:16px; height:16px; }
.chief-voice{ display:flex; align-items:center; gap:3px; height:14px; }
.chief-voice i{ width:2.5px; border-radius:2px; background:var(--accent); }

/* section label */
.k-label{ font-family:'Martian Mono',monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }