/* =========================================================
   STORY.CSS — The Palo whiteboard journey
   Board, stepper, node drawer, solutions map, print view
   ========================================================= */

/* ---------------- Stage layout ---------------- */
.story-stage {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 1080px) {
  .story-stage { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------------- Stroke rail ---------------- */
.rail {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  position: sticky; top: var(--nav-height); z-index: 20;
  background: var(--bg);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) { .rail { position: static; } }
.rail-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  color: var(--text-secondary); background: var(--glass-bg);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 7px 14px; cursor: pointer;
  transition: all var(--duration-fast) ease;
}
.rail-btn:hover { color: var(--text-primary); background: var(--glass-bg-hover); border-color: var(--border-hover); }
.rail-btn.active { color: #fff; background: var(--primary); border-color: var(--primary-light); }
.rail-num {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10); color: inherit; flex-shrink: 0;
}
.rail-btn.active .rail-num { background: rgba(255,255,255,0.25); }

/* ---------------- Narrative panel ----------------
   Deliberately NOT sticky: the board is the thing that must stay in view,
   so the narrative scrolls past a pinned board. */
.narr { position: static; }

.narr-eyebrow {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--primary-light); margin-bottom: var(--space-3);
}
.narr-title {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800;
  color: var(--text-primary); line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

/* "Say this" — the single most-used component on the page */
.say {
  position: relative;
  background: rgba(212,168,67,0.09);
  border: 1px solid rgba(212,168,67,0.34);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.say-tag {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent); margin-bottom: var(--space-2);
}
.say-line {
  font-size: var(--text-lg); font-weight: 500; line-height: 1.55;
  color: var(--text-primary); max-width: none;
}

.narr-body p {
  font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.78;
  max-width: none;
}
.narr-body p + p { margin-top: var(--space-4); }

/* Stats strip */
.narr-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-5);
}
.narr-stat {
  background: var(--glass-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.narr-stat-v {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800;
  color: var(--primary-light); line-height: 1.1; margin-bottom: 4px;
}
.narr-stat-l { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.narr-asof {
  font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6;
  margin-top: var(--space-3);
}

/* Coach note */
.coach {
  display: flex; gap: var(--space-3);
  background: var(--glass-bg); border: 1px solid var(--border);
  border-left: 3px solid var(--primary-light);
  border-radius: var(--radius-md); padding: var(--space-4);
  margin-top: var(--space-5);
}
.coach svg { width: 18px; height: 18px; color: var(--primary-light); flex-shrink: 0; margin-top: 2px; }
.coach-body { min-width: 0; }
.coach-tag {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary-light); margin-bottom: 4px;
}
.coach-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; }

/* Node chips under the narrative */
.narr-nodes { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.narr-nodes-tag {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: var(--space-3);
}
.node-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.node-chip {
  font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary);
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 6px 13px; cursor: pointer;
  transition: all var(--duration-fast) ease;
}
.node-chip:hover { color: var(--text-primary); border-color: var(--primary-light); background: var(--glass-bg-hover); }

/* Stepper */
.stepper {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-6);
  padding-top: var(--space-5); border-top: 1px solid var(--border);
}
.step-count {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-muted); white-space: nowrap;
}

/* ---------------- The board ---------------- */
.board-wrap {
  position: sticky; top: calc(var(--nav-height) + 84px);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4);
}
@media (max-width: 1080px) { .board-wrap { position: static; } }

.board { width: 100%; height: auto; display: block; overflow: visible; }

.board .layer { opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); pointer-events: none; }
.board .layer.on { opacity: 1; pointer-events: auto; }
.board .layer.faded { opacity: 0.18; pointer-events: none; }

/* Shape styles */
.bd-mess { fill: rgba(239,68,68,0.07); stroke: rgba(239,68,68,0.55); stroke-width: 1.6; }
.bd-mess-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--text-secondary); }
.bd-tangle { fill: none; stroke: rgba(239,68,68,0.28); stroke-width: 1.2; }

.bd-box { fill: var(--surface-elevated); stroke: var(--border-hover); stroke-width: 1.8; }
.bd-box-label { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--text-primary); }
.bd-box-sub { font-family: var(--font-body); font-size: 11px; font-weight: 500; fill: var(--text-muted); }
.bd-feed { stroke: var(--primary-light); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: 0.5; fill: none; }

.bd-data { fill: rgba(46,123,214,0.16); stroke: var(--primary-light); stroke-width: 2.2; }
.bd-data-label { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: 0.14em; fill: var(--primary-lighter); }

.bd-agentic { fill: rgba(139,92,246,0.14); stroke: #8B5CF6; stroke-width: 2; }
.bd-commercial { fill: rgba(52,211,153,0.12); stroke: var(--success); stroke-width: 2; }
.bd-band-label { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; fill: var(--text-secondary); }

.bd-chip { fill: var(--surface); stroke: var(--border-hover); stroke-width: 1.4; }
.bd-chip--tentative { stroke-dasharray: 5 4; }
.bd-chip-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--text-primary); }

.bd-ring { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 10 7; }
.bd-ring-label { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; fill: var(--accent); }
.bd-svc { fill: rgba(212,168,67,0.12); stroke: rgba(212,168,67,0.6); stroke-width: 1.5; }
.bd-svc-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--text-primary); }

.bd-pill { fill: var(--surface-elevated); stroke: var(--border-hover); stroke-width: 1.6; }
.bd-pill-num { font-family: var(--font-display); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; fill: var(--text-muted); }
.bd-pill-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; fill: var(--text-secondary); }
.bd-pill-g.is-active .bd-pill { fill: rgba(212,168,67,0.14); stroke: var(--accent); stroke-width: 2.4; }
.bd-pill-g.is-active .bd-pill-label { fill: var(--text-primary); }
.bd-pill-g.is-active .bd-pill-num { fill: var(--accent); }

/* Clickable shapes */
.bd-hot { cursor: pointer; }
.bd-hot rect { transition: fill var(--duration-fast) ease, stroke var(--duration-fast) ease; }
.bd-hot:hover rect, .bd-hot:focus rect { stroke: var(--primary-lighter); stroke-width: 2.6; }
.bd-hot:focus { outline: none; }
.bd-hot:focus-visible rect { stroke: var(--accent); stroke-width: 3; }

.board-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); color: var(--text-muted);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.board-hint svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------------- Node drawer ---------------- */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(5, 12, 24, 0.66);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-base) ease;
  z-index: var(--z-overlay);
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(520px, 100%);
  background: var(--surface); border-left: 1px solid var(--border-hover);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  z-index: var(--z-modal);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5); border-bottom: 1px solid var(--border);
}
.drawer-band {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--primary-light); margin-bottom: var(--space-2);
}
.drawer-name {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800;
  color: var(--text-primary); line-height: 1.2;
}
.drawer-aka { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.drawer-close {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); background: var(--glass-bg);
  border: 1px solid var(--border); flex-shrink: 0;
}
.drawer-close:hover { color: var(--text-primary); border-color: var(--border-hover); }
.drawer-close svg { width: 17px; height: 17px; }

.drawer-body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.drawer-plain {
  font-size: var(--text-base); color: var(--text-primary); line-height: 1.72;
  max-width: none; margin-bottom: var(--space-5);
}
.dsec { margin-top: var(--space-5); }
.dsec:first-child { margin-top: 0; }
.dsec h4 {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted);
  margin-bottom: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.dsec p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; max-width: none; }

.jargon { display: flex; flex-direction: column; gap: var(--space-3); }
.jargon-item { font-size: var(--text-sm); line-height: 1.65; }
.jargon-term {
  font-family: var(--font-display); font-weight: 700; color: var(--accent);
  display: block; margin-bottom: 2px;
}
.jargon-means { color: var(--text-secondary); }

.dsec--ask {
  background: rgba(46,123,214,0.08); border: 1px solid rgba(46,123,214,0.28);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.dsec--ask h4 { color: var(--primary-light); border-bottom-color: rgba(46,123,214,0.25); }
.dsec--ask p { color: var(--text-primary); font-size: var(--text-base); line-height: 1.6; }

.dsec--boundary {
  background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.30);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.dsec--boundary h4 { color: var(--warning); border-bottom-color: rgba(251,191,36,0.25); }

.drawer-foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }

/* ---------------- Solutions map ---------------- */
.map-band { margin-top: var(--space-8); }
.map-band:first-child { margin-top: 0; }
.map-band-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4);
  padding-bottom: var(--space-3); margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--border-hover);
}
.map-band-title {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800;
  color: var(--text-primary);
}
.map-band-count {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
}
.map-band-note { font-size: var(--text-sm); color: var(--text-secondary); flex: 1 1 300px; min-width: 0; line-height: 1.6; }

.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--space-4); }
.map-card {
  text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-5);
  cursor: pointer; transition: all var(--duration-base) ease;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.map-card:hover { border-color: var(--primary-light); background: var(--surface-elevated); transform: translateY(-2px); }
.map-card-pillar {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-light);
}
.map-card-name {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  color: var(--text-primary); line-height: 1.25;
}
.map-card-aka { font-size: 11px; color: var(--text-muted); }
.map-card-plain { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65; }
.map-card-more {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
  margin-top: auto; padding-top: var(--space-3);
}

/* ---------------- Print: the whole board on one page ---------------- */
.print-only { display: none; }

@media print {
  @page { size: A4 landscape; margin: 12mm; }

  html, body { background: #fff !important; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Force the light palette so it does not print a black page */
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg: #ffffff; --surface: #ffffff; --surface-elevated: #f6f8fb; --surface-hover: #eef2f7;
    --text-primary: #0F172A; --text-secondary: #33415A; --text-muted: #64748B;
    --border: rgba(0,0,0,0.16); --border-hover: rgba(0,0,0,0.30);
    --glass-bg: #ffffff; --glass-bg-hover: #ffffff; --glass-border: rgba(0,0,0,0.16);
    --primary: #0B5394; --primary-light: #0B5394; --primary-lighter: #0B5394;
    --accent: #8B6D20; --success: #0F7A54; --warning: #8A5B00; --error: #B42318;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none;
  }

  .site-nav, .mobile-drawer, .back-to-top, .site-footer,
  .rail, .stepper, .board-hint, .hero-section, .pf-bar,
  .drawer, .drawer-scrim, .no-print, .breadcrumb { display: none !important; }

  .page-wrapper { opacity: 1 !important; animation: none !important; }
  .section, .section-alt { padding: 0 !important; background: none !important; }
  .container, .container-wide, .container-narrow { max-width: none !important; padding: 0 !important; }

  .print-only { display: block; }

  .print-head {
    border-bottom: 1.5pt solid #0F172A; padding-bottom: 2.5mm; margin-bottom: 3mm;
  }
  .print-head h1 { font-size: 16pt; margin-bottom: 0.8mm; color: #0F172A; line-height: 1.1; }
  .print-head p { font-size: 8pt; color: #33415A; max-width: none; }

  /* One sheet: board on top, the six lines underneath */
  .story-stage { display: block !important; }
  .narr, .board-wrap { position: static !important; }
  .board-wrap { border: none !important; padding: 0 !important; page-break-inside: avoid; }
  /* Board height is the lever that keeps the whole thing on one sheet. */
  .board { width: auto !important; max-width: 100%; max-height: 82mm; margin: 0 auto; }
  .story-stage { page-break-inside: avoid; }

  /* Every layer visible on the printed board */
  .board .layer { opacity: 1 !important; }
  .board .layer-mess { display: none !important; }
  .board .bd-pill-g .bd-pill { fill: #f6f8fb !important; stroke: #64748B !important; }

  /* The narrative column collapses to the six sayable lines */
  .narr { display: none !important; }
  .print-lines { margin-top: 2mm; page-break-inside: avoid; }
  .print-line {
    display: grid; grid-template-columns: 7mm 1fr; gap: 2mm;
    padding: 0.9mm 0; border-bottom: 0.4pt solid rgba(0,0,0,0.16);
    page-break-inside: avoid;
  }
  .print-line:last-child { border-bottom: none; }
  .print-line-n { font-family: var(--font-display); font-size: 10pt; font-weight: 800; color: #0B5394; line-height: 1.2; }
  .print-line-t { font-size: 8pt; font-weight: 700; color: #0F172A; margin-bottom: 0.4mm; line-height: 1.25; }
  .print-line-s { font-size: 8pt; color: #33415A; line-height: 1.3; }
  .print-foot {
    margin-top: 2mm; padding-top: 1.5mm; border-top: 0.6pt solid rgba(0,0,0,0.28);
    font-size: 6.8pt; color: #64748B; line-height: 1.4;
    padding-right: 4mm;
  }

  /* Solutions map prints as a compact list */
  .map-grid { display: block !important; }
  .map-card {
    page-break-inside: avoid; border: none !important; border-bottom: 0.4pt solid rgba(0,0,0,0.18) !important;
    padding: 2mm 0 !important; border-radius: 0 !important;
  }
  .map-card-more { display: none !important; }
  .map-card-name { font-size: 10pt; }
  .map-card-plain { font-size: 8pt; }
  .map-band-head { border-bottom-width: 1pt !important; }
}