/* ============================================================================
   GraySwan Document Builder — stylesheet
   APP SHELL: Cockpit house style (fixed). DOCUMENT AREA: driven entirely by
   --doc-* CSS variables that applyTheme() sets from the active template's theme,
   so ONE renderer produces both the Cockpit and Market-Overview looks.
   A4 portrait pages; print-to-PDF ready.
   ========================================================================== */

:root {
  /* ── app shell = GraySwan Cockpit design system ──────────────────────────
     Canonical token names mirror grayswan/shared/gs-style.css so the builder
     chrome speaks the Cockpit vocabulary; the builder's original names are kept
     as ALIASES below so existing selectors keep working. NB: these are SHELL
     tokens only — none of them is a --doc-* var (themes.js is the sole writer
     of the per-template document theme). */
  --near-black:#1A1A1A; --black:#0D0D0D; --dark:#2C2C2C; --mid:#555; --muted:#888;
  --light-muted:#BBB; --rule:#DDD; --rule-light:#EFEFEF; --bg-soft:#F6F6F6; --white:#fff; --paper:#fff;
  --warning:#B85D4F; --warning-bg:rgba(184,93,79,.04);
  --font-display:'Fraunces',Georgia,serif; --font-serif:'Crimson Pro',Georgia,serif;
  --font-sans:'Manrope',-apple-system,system-ui,sans-serif; --font-figures:'Outfit','Manrope',sans-serif;
  /* builder-name aliases → Cockpit tokens */
  --ink:var(--near-black); --accent:var(--warning); --accent-dk:#A64F42; --accent-bg:rgba(184,93,79,.05);
  --rule-lt:var(--rule-light); --sans:var(--font-sans); --display:var(--font-display);
  --serif:var(--font-serif); --figures:var(--font-figures);
  /* ── document defaults (overridden per theme by applyTheme) ──────────── */
  --doc-ink:#1A1A1A; --doc-body:#2C2C2C; --doc-muted:#888; --doc-rule:#DDD; --doc-rule-lt:#EFEFEF;
  --doc-paper:#fff; --doc-bg-soft:#F6F6F6; --doc-accent:#B85D4F; --doc-accent-bg:rgba(184,93,79,.06);
  --doc-pos:#5A7E75; --doc-neg:#B85D4F;
  --doc-display:'Fraunces',Georgia,serif; --doc-serif:'Crimson Pro',Georgia,serif;
  --doc-sans:'Manrope',system-ui,sans-serif; --doc-figures:'Outfit','Manrope',sans-serif;
  --page-w:210mm; --page-h:297mm; --page-pad:22mm;
}
* { box-sizing:border-box; }
html,body { margin:0; background:#d7d4ce; font-family:var(--serif); color:var(--dark); -webkit-font-smoothing:antialiased; }

/* ── App header (Cockpit near-black) ─────────────────────────────────────── */
.app-head { position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  background:var(--ink); color:#fff; padding:.7rem 1.5rem; border-bottom:2px solid var(--accent); }
.app-brand { font-family:var(--display); font-size:1.1rem; font-weight:350; font-variation-settings:"opsz" 96,"SOFT" 40; letter-spacing:-.01em; white-space:nowrap; }
.app-brand small { display:block; font-family:var(--sans); font-size:.55rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:2px; }
.app-logo-link { display:flex; align-items:center; margin-right:.1rem; }
.app-logo { height:26px; width:auto; display:block; }
.cockpit-cta { font-family:var(--font-sans); font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; text-decoration:none;
  padding:.4rem .8rem; border:1px solid rgba(255,255,255,.28); white-space:nowrap; transition:all .2s ease; }
.cockpit-cta:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.55); }
.app-head label { font-family:var(--sans); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.app-head select, .app-head input.t-name { font-family:var(--sans); font-size:.74rem; padding:.32rem .5rem; background:#262626; color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:4px; margin-left:.3rem; }
.app-head input.t-name { min-width:160px; }
.app-spacer { flex:1; }
.modeseg { display:inline-flex; border:1px solid rgba(255,255,255,.25); border-radius:6px; overflow:hidden; }
.modeseg button { background:transparent; color:#fff; border:0; padding:.4rem .9rem; font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.modeseg button.on { background:var(--accent); }
/* Template-author lock chip */
.lockchip { font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  padding:.34rem .6rem; border-radius:20px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); white-space:nowrap; }
.lockchip:hover { border-color:var(--accent); color:#fff; }
body.role-author .lockchip { background:var(--accent); border-color:var(--accent); color:#fff; }
body.role-user .modeseg { display:none; }
body.role-user #m-content { display:none; }
.btn { font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
  text-decoration:none; padding:.5rem 1rem; border-radius:4px; border:1px solid var(--accent); background:var(--accent); color:#fff; }
.btn:hover { background:var(--accent-dk); border-color:var(--accent-dk); }
.btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn.ghost:hover { background:rgba(255,255,255,.1); }
/* Download dropdown */
.dl-wrap { position:relative; }
.dl-menu { position:absolute; top:100%; right:0; margin-top:.4rem; background:#fff; color:var(--ink); border:1px solid var(--rule);
  border-radius:8px; box-shadow:0 16px 44px rgba(0,0,0,.28); padding:.35rem; z-index:90; min-width:208px; }
.dl-menu[hidden] { display:none; }
.dl-menu button { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-radius:5px; padding:.5rem .7rem; font-family:var(--sans); color:var(--ink); }
.dl-menu button b { font-size:.78rem; font-weight:600; letter-spacing:.01em; }
.dl-menu button span { font-size:.62rem; color:var(--muted); }
.dl-menu button:hover { background:var(--accent-bg); }
.dl-menu button:hover b, .dl-menu button:hover span { color:var(--accent); }
.dl-sep { height:1px; background:var(--rule-lt); margin:.3rem .2rem; }
.svc-dot { position:fixed; right:10px; bottom:10px; width:9px; height:9px; border-radius:50%; z-index:70;
  background:var(--muted); box-shadow:0 0 0 3px rgba(0,0,0,.04); transition:background .3s; }
.svc-dot.up { background:#5A7E75; } .svc-dot.down { background:var(--accent); }

/* ── Rail (design tools / content editor) ────────────────────────────────── */
.rail { background:#262626; color:#fff; padding:.55rem 1.5rem; display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.bchip { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--sans); font-size:.72rem; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:5px; padding:.2rem .45rem; cursor:pointer; }
.bchip.off { opacity:.42; }
.bchip.sel { border-color:var(--accent); }
.bchip em { font-style:normal; font-size:.52rem; letter-spacing:.08em; color:var(--accent); border:1px solid var(--accent); border-radius:3px; padding:0 .2rem; }
.bchip input[type=checkbox] { accent-color:var(--accent); }
.bchip .mv,.bchip .rm { color:rgba(255,255,255,.5); font-size:.8rem; }
.bchip .mv:hover { color:var(--accent); } .bchip .rm:hover { color:var(--accent); }
.addwrap { position:relative; }
.addmenu { position:absolute; top:100%; left:0; margin-top:.3rem; background:#fff; color:var(--ink); border:1px solid var(--rule);
  border-radius:8px; box-shadow:0 14px 40px rgba(0,0,0,.28); min-width:240px; z-index:70; padding:.3rem 0; max-height:62vh; overflow:auto; }
.addcat { font-family:var(--sans); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:.5rem .85rem .2rem; }
.additem { font-family:var(--sans); padding:.42rem .85rem; font-size:.8rem; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; }
.additem:hover { background:var(--accent-bg); color:var(--accent); }
.additem em { font-style:normal; font-size:.56rem; color:var(--muted); }
.rail .hint { font-family:var(--sans); font-size:.68rem; color:rgba(255,255,255,.5); }

/* ── Stage + pages ───────────────────────────────────────────────────────── */
.stage { padding:1.5rem; display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.doc-page { width:var(--page-w); min-height:var(--page-h); background:var(--doc-paper); box-shadow:0 8px 30px rgba(0,0,0,.22);
  position:relative; display:flex; flex-direction:column; overflow:hidden; }
body.mode-content .doc-page [contenteditable]:hover { outline:1px dashed var(--doc-accent); }
body.mode-content .doc-page.sel { outline:3px solid var(--accent); outline-offset:4px; }

/* cover variants (theme-aware) */
.dp-cover { padding:var(--page-pad); justify-content:center; }
.dp-cover.v-dark-band { background:var(--doc-ink); color:#fff; }
.dp-cover.v-market-overview { background:var(--doc-ink); color:#fff; }
.dp-cover.v-light { background:var(--doc-paper); color:var(--doc-ink); }
.dp-cover .c-bar { width:60px; height:3px; background:var(--doc-accent); margin-bottom:1.6rem; }
.dp-cover.v-market-overview .c-bar { width:100%; height:2px; background:var(--doc-accent); }
.dp-cover h1 { font-family:var(--doc-display); font-weight:350; font-size:3.4rem; line-height:1.04; letter-spacing:-.02em; margin:0 0 1rem; }
.dp-cover.v-light h1 { color:var(--doc-ink); }
.dp-cover .c-sub { font-family:var(--doc-serif); font-style:italic; font-weight:300; font-size:1.1rem; opacity:.8; }
.dp-cover .c-sub .dot { opacity:.45; margin:0 .5rem; }
.dp-cover .c-rule { width:38%; height:1px; background:currentColor; opacity:.2; margin-top:2.4rem; }
.dp-cover .c-conf { position:absolute; left:var(--page-pad); bottom:var(--page-pad); font-family:var(--doc-sans); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; opacity:.45; }
.dp-cover .c-brand { position:absolute; right:var(--page-pad); bottom:var(--page-pad); }
.dp-cover .c-brand img { height:30px; opacity:.95; }

/* content page */
.dp-content { padding:var(--page-pad); padding-bottom:26mm; }
.dp-eyebrow { font-family:var(--doc-sans); font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--doc-accent); margin-bottom:.5rem; }
.dp-headline { font-family:var(--doc-display); font-weight:350; font-size:2.1rem; line-height:1.08; letter-spacing:-.015em; color:var(--doc-ink); margin:0 0 .8rem; }
.dp-headrule { height:1px; background:var(--doc-rule); margin-bottom:1.5rem; }
.b-block { margin-bottom:1.4rem; }
.b-heading { font-family:var(--doc-display); font-weight:400; font-size:1.4rem; color:var(--doc-ink); margin:.6rem 0 .6rem; }
.b-prose { font-family:var(--doc-serif); font-size:1.02rem; line-height:1.62; color:var(--doc-body); max-width:64ch; }
.b-prose p { margin:0 0 .8rem; }
.b-callout { background:var(--doc-accent-bg); border-left:2px solid var(--doc-accent); padding:1rem 1.2rem; margin:1.2rem 0; font-family:var(--doc-serif); font-size:.98rem; line-height:1.55; color:var(--doc-body); }
.b-callout .lbl { font-family:var(--doc-sans); font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--doc-accent); display:block; margin-bottom:.35rem; }
.b-callout.risk { background:var(--doc-bg-soft); border-left-color:var(--doc-ink); }
.b-callout.risk .lbl { color:var(--doc-ink); }
.b-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; background:var(--doc-rule); border:1px solid var(--doc-rule); margin:1rem 0 1.4rem; }
.b-metric { background:var(--doc-paper); padding:1.1rem 1.2rem; }
.b-metric .v { font-family:var(--doc-display); font-weight:350; font-size:1.7rem; line-height:1; color:var(--doc-ink); }
.b-metric .l { font-family:var(--doc-sans); font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--doc-muted); margin-top:.4rem; }
.b-keypoints { list-style:none; padding:0; margin:.4rem 0 1.2rem; font-family:var(--doc-serif); font-size:1rem; color:var(--doc-body); }
.b-keypoints li { position:relative; padding-left:1.3rem; margin-bottom:.5rem; line-height:1.5; }
.b-keypoints li:before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; background:var(--doc-accent); border-radius:50%; }
.b-table { width:100%; border-collapse:collapse; font-family:var(--doc-sans); font-size:.82rem; margin:.4rem 0 1.3rem; }
.b-table th { text-align:left; font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--doc-muted); border-bottom:1.5px solid var(--doc-ink); padding:.5rem .6rem; }
.b-table td { padding:.5rem .6rem; border-bottom:1px solid var(--doc-rule-lt); color:var(--doc-body); }
.b-table td.num,.b-table th.num { text-align:right; font-family:var(--doc-figures); font-variant-numeric:tabular-nums; }
.b-twocol { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin:.4rem 0 1.3rem; }
.b-image { margin:.6rem 0 1.2rem; text-align:center; }
.b-image img { max-width:100%; border:1px solid var(--doc-rule-lt); }
.b-image .cap { font-family:var(--doc-sans); font-size:.66rem; color:var(--doc-muted); margin-top:.4rem; }
.b-image.placeholder { border:1px dashed var(--doc-rule); padding:2.5rem; color:var(--doc-muted); font-family:var(--doc-sans); font-size:.8rem; }
.b-divider { display:flex; flex-direction:column; justify-content:center; min-height:60mm; }
.b-toc { font-family:var(--doc-sans); }
.b-toc .row { display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--doc-rule-lt); font-size:.95rem; color:var(--doc-body); }
.b-toc .row .n { color:var(--doc-accent); font-family:var(--doc-figures); margin-right:.8rem; }
.chartwrap { position:relative; width:100%; margin:.5rem 0 1.3rem; }
.chartwrap canvas { max-width:100%; }
.b-empty { font-family:var(--doc-serif); font-style:italic; color:var(--doc-muted); padding:.6rem 0; }

/* footer */
.dp-foot { position:absolute; left:var(--page-pad); right:var(--page-pad); bottom:14mm; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--doc-rule); padding-top:.55rem; font-family:var(--doc-sans); font-size:.6rem; letter-spacing:.04em; color:var(--doc-muted); }
.dp-foot .lines { font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--doc-accent); }
.dp-foot .lines span { color:var(--doc-rule); margin:0 .4rem; font-weight:400; }
.dp-foot .fsp { text-align:center; flex:1; padding:0 1rem; }
.dp-foot .pg { font-family:var(--doc-figures); }

/* content-mode editing affordances */
[contenteditable]:focus { outline:none; background:rgba(184,93,79,.05); box-shadow:0 0 0 2px var(--doc-accent-bg); }
.cfg-pop { position:fixed; background:#fff; border:1px solid var(--rule); border-radius:8px; box-shadow:0 14px 40px rgba(0,0,0,.25); padding:.8rem; z-index:80; font-family:var(--sans); font-size:.8rem; min-width:240px; }
.cfg-pop label { display:block; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:.5rem 0 .2rem; }
.cfg-pop select,.cfg-pop input,.cfg-pop textarea { width:100%; font-family:var(--sans); font-size:.8rem; padding:.35rem .45rem; border:1px solid var(--rule); border-radius:4px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:.55rem 1rem; border-radius:8px;
  font-family:var(--sans); font-size:.8rem; box-shadow:0 12px 34px rgba(0,0,0,.3); opacity:0; transition:opacity .25s; z-index:200; pointer-events:none; }
.toast.show { opacity:1; }

/* import / AI modal */
.modal-bg { position:fixed; inset:0; background:rgba(13,13,13,.55); z-index:150; display:flex; align-items:center; justify-content:center; padding:2rem; }
.modal { background:#fff; color:var(--ink); width:min(680px,94vw); max-height:88vh; overflow:auto; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.4);
  font-family:var(--sans); border-top:3px solid var(--accent); }
.modal-h { display:flex; align-items:center; gap:.6rem; padding:1rem 1.3rem .7rem; }
.modal-h h3 { font-family:var(--serif); font-size:1.15rem; margin:0; font-weight:600; }
.modal-h .x { margin-left:auto; cursor:pointer; border:0; background:none; font-size:1.2rem; color:var(--muted); line-height:1; }
.modal-h .x:hover { color:var(--accent); }
.modal-tabs { display:flex; gap:.3rem; padding:0 1.3rem; border-bottom:1px solid var(--rule-lt); }
.modal-tabs button { font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); padding:.5rem .4rem .55rem; }
.modal-tabs button.on { color:var(--accent); border-bottom-color:var(--accent); }
.modal-body { padding:1.1rem 1.3rem 1.3rem; }
.modal-body p.lead { font-family:var(--serif); font-size:.92rem; color:var(--dark); margin:.1rem 0 .9rem; }
.modal-body label.fl { display:block; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.7rem 0 .3rem; }
.modal-body textarea { width:100%; font-family:ui-monospace,Menlo,monospace; font-size:.74rem; padding:.55rem; border:1px solid var(--rule); border-radius:6px; resize:vertical; }
.modal-body input[type=file] { font-family:var(--sans); font-size:.8rem; }
.modal-foot { display:flex; gap:.6rem; align-items:center; margin-top:1rem; }
.modal-foot .sp { flex:1; }
.modal .pill { font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:.1rem .5rem; }
.modal small.note { display:block; color:var(--muted); font-size:.7rem; margin-top:.5rem; }

/* topic (Market Overview composite) block */
.b-topic .topic-source { font-family:var(--doc-sans); font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--doc-muted); margin-bottom:.4rem; }
.topic-charts { margin:.6rem 0 1.1rem; }
.topic-charts.two { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.topic-charts img { max-width:100%; border:1px solid var(--doc-rule-lt); }
.topic-caveat { font-family:var(--doc-serif); font-style:italic; font-size:.74rem; color:var(--doc-muted); margin:-.3rem 0 1rem; }
.topic-sides { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:.6rem; }
.topic-side .side-h { font-family:var(--doc-sans); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--doc-accent); margin-bottom:.4rem; }
.b-keypoints.talk li:before { background:var(--doc-muted); }

/* instrument (FIV) block */
.b-instr-chart { margin:.7rem 0 1rem; }
.b-instr-chart img { width:100%; display:block; border:1px solid var(--doc-rule-lt); }
.b-instr-trailing { width:100%; margin-top:.2rem; }
.b-instr-trailing th { font-family:var(--doc-sans); font-size:.56rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--doc-muted); }
.b-instr-trailing td.num, .b-instr-trailing th.num { text-align:right; font-family:var(--doc-figures); }
.b-instr-empty { font-family:var(--doc-sans); font-size:.82rem; color:var(--doc-muted); border:1px dashed var(--doc-rule); border-radius:8px; padding:1.1rem 1.2rem; background:var(--doc-bg-soft); }
.b-instr-compare { width:100%; margin-top:.2rem; }
.b-instr-compare th { font-family:var(--doc-sans); font-size:.56rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--doc-muted); }
.b-instr-compare td.num, .b-instr-compare th.num { text-align:right; font-family:var(--doc-figures); }
/* popover action status + note */
.pop-status { font-family:var(--sans); font-size:.7rem; color:var(--mid); margin-top:.5rem; min-height:.9rem; }
.pop-status.err { color:var(--accent); }
.pop-note { font-family:var(--sans); font-size:.66rem; color:var(--muted); margin-top:.5rem; line-height:1.4; }

/* block wrap + structured-edit affordance (content mode) */
.b-wrap { position:relative; }
.b-edit { position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%; border:1px solid var(--doc-rule);
  background:#fff; color:var(--doc-accent); cursor:pointer; font-size:.78rem; line-height:1; opacity:0; transition:opacity .15s; z-index:5; }
.b-wrap:hover .b-edit { opacity:1; }
body.mode-content .b-wrap:hover { outline:1px dashed var(--doc-rule); outline-offset:4px; }
[contenteditable]:empty:before { content:attr(data-ph); color:var(--doc-muted); opacity:.55; }

/* print → PDF */
@media print {
  @page { size:A4; margin:0; }
  html,body { background:#fff; }
  .app-head,.rail,.cfg-pop,.toast { display:none !important; }
  .stage { padding:0; gap:0; }
  .doc-page { box-shadow:none; margin:0; break-after:page; page-break-after:always; outline:none !important; }
  .doc-page:last-child { break-after:auto; page-break-after:auto; }
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}