/* ======================================================================
   MNB Technology — Shared Design Tokens & Editorial Components
   ----------------------------------------------------------------------
   Consolidates the colour/type system already duplicated across every
   page (cream/burgundy/gold + Cinzel/Cormorant/DM Sans) into one source
   of truth, and adds the editorial + diagram-ready component primitives
   needed for the Insights content uplift (TOC, pull-quotes, timeline,
   badges, citations, reading progress, gated-content teaser).

   This file is additive: existing pages keep their inline <style> blocks
   untouched until each is deliberately migrated to include this file
   instead of repeating the :root block.
   ====================================================================== */

:root{
  /* Core palette (existing brand baseline — do not change hex values) */
  --bg:#FFFDF8;--bg2:#F5F0E8;--bg3:#F0EBE0;
  --burg:#2A0A14;--burg2:#3D1020;
  --gold:#A87830;--goldl:#C9974A;--goldd:#8A6020;
  --text:#1A0A0A;--text2:#2D1A0A;--muted:#5A3A1A;
  --cream:#FFFDF8;--bdr:rgba(168,120,48,0.25);--bdrb:rgba(168,120,48,0.5);

  /* Extended semantic tokens (new — used by diagrams, badges, callouts) */
  --ok:#3D6B4F;--ok-bg:#EAF2EC;
  --info:#2D5C8A;--info-bg:#EAF1F8;
  --warn:#8A5A20;--warn-bg:#F8EEE0;
  --flow-particle:#E8C262;--flow-edge:rgba(168,120,48,0.35);--flow-edge-active:#A87830;

  /* Spacing + radius + shadow scale */
  --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:40px;--space-6:64px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:16px;
  --shadow-sm:0 2px 8px rgba(42,10,20,0.06);--shadow-md:0 12px 30px rgba(42,10,20,0.08);

  /* Type scale (paired with existing font stack) */
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-label:'Cinzel',serif;
  --font-body:'DM Sans',sans-serif;
}

@media (prefers-reduced-motion: reduce){
  :root{ --motion-safe: 0; }
}

/* ── Reading progress bar ───────────────────────────────────────────── */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--gold),var(--goldl));z-index:1200;transition:width .1s linear}

/* ── Article table of contents (sticky sidebar) ─────────────────────── */
.article-toc{position:sticky;top:100px;align-self:start;border-left:2px solid var(--bdr);padding-left:var(--space-4);max-width:260px}
.article-toc h4{font-family:var(--font-label);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-3)}
.article-toc ol{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);counter-reset:toc}
.article-toc a{font-size:13px;line-height:1.6;color:var(--muted);text-decoration:none;transition:color .2s}
.article-toc a:hover,.article-toc a.active{color:var(--gold)}

/* ── Pull quote ──────────────────────────────────────────────────────── */
.pull-quote{font-family:var(--font-display);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.4;color:var(--burg);border-left:3px solid var(--gold);padding:var(--space-3) 0 var(--space-3) var(--space-4);margin:var(--space-5) 0}
.pull-quote cite{display:block;margin-top:var(--space-2);font-family:var(--font-body);font-style:normal;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--goldd)}

/* ── Timeline ────────────────────────────────────────────────────────── */
.timeline{position:relative;padding-left:var(--space-5);margin:var(--space-5) 0}
.timeline::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--bdr)}
.timeline-item{position:relative;padding-bottom:var(--space-5)}
.timeline-item::before{content:'';position:absolute;left:-29px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--bg2)}
.timeline-item h4{font-family:var(--font-display);font-size:19px;color:var(--text2);margin-bottom:var(--space-1)}
.timeline-item p{font-size:14px;line-height:1.8;color:var(--muted)}

/* ── Badges / tags ───────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11px;letter-spacing:.5px;font-weight:500}
.badge-gold{background:#f1e9dc;color:#674919}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}

/* ── Comparison table ────────────────────────────────────────────────── */
.compare-table{width:100%;border-collapse:collapse;margin:var(--space-5) 0;font-size:14px}
.compare-table th,.compare-table td{padding:14px 18px;border-bottom:1px solid var(--bdr);text-align:left;vertical-align:top}
.compare-table th{font-family:var(--font-label);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--goldd);background:var(--bg2)}
.compare-table tr:hover td{background:rgba(168,120,48,0.04)}

/* ── Citation / source block ─────────────────────────────────────────── */
.citation-block{border:1px solid var(--bdr);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0;background:var(--bg2)}
.citation-block h4{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-2)}
.citation-block ol{padding-left:18px;font-size:13px;line-height:1.9;color:var(--muted)}
.citation-block a{color:var(--goldd)}

/* ── Related-reading / interlinking grid ────────────────────────────── */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3);margin:var(--space-5) 0}
.related-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--bdr);border-radius:var(--radius-md);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.related-card .related-kicker{font-family:var(--font-label);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--goldd)}
.related-card h4{font-family:var(--font-display);font-size:19px;color:var(--text2);line-height:1.3}

/* ── Gated-content teaser (used by Insights premium articles) ─────────
   Full body is NOT present in markup for anonymous visitors — this is
   the visual shell only. Actual gating is enforced server-side via
   Supabase Row-Level Security, not by hiding DOM nodes with CSS. ──── */
.gated-teaser{position:relative}
.gated-teaser .gated-fade{position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(to bottom, rgba(255,253,248,0), var(--bg) 85%);pointer-events:none}
.gated-cta{text-align:center;padding:var(--space-5) var(--space-4);border:1px dashed var(--bdrb);border-radius:var(--radius-lg);background:var(--bg2);margin-top:-20px;position:relative;z-index:2}
.gated-cta h3{font-family:var(--font-display);font-size:26px;color:var(--burg);margin-bottom:var(--space-2)}
.gated-cta p{font-size:14px;color:var(--muted);max-width:420px;margin:0 auto var(--space-4)}
.gated-cta .btn-gold{display:inline-block}

/* ── Flow-diagram engine hooks (styling only — behaviour in flow-diagram.js) */
.flow-diagram{position:relative;width:100%}
.flow-diagram svg{width:100%;height:auto;display:block}
.flow-node{cursor:pointer}
.flow-node circle,.flow-node rect{fill:var(--bg2);stroke:var(--bdrb);stroke-width:1.5;transition:fill .25s,stroke .25s}
.flow-node.active circle,.flow-node.active rect{fill:var(--goldl);stroke:var(--gold)}
.flow-node text{font-family:var(--font-body);font-size:11px;fill:var(--text2)}
.flow-edge{stroke:var(--flow-edge);stroke-width:1.5;fill:none}
.flow-edge.active{stroke:var(--flow-edge-active)}
.flow-particle{fill:var(--flow-particle)}
@media (prefers-reduced-motion: reduce){
  .flow-particle{display:none}
}