/* BoardWise — site styles
   Palette and rules from the deck (deckbuild/lib_deck.py). See BRIEF.md §6.
   One orange accent per screen. Left-aligned. No shadows. */

:root {
  --ink: #0A2E38;
  --muted: #5A7A76;
  --teal: #0B5563;
  --panel-dark: #0D3A46;
  --paper: #F2F6F6;
  --light: #E8F4F2;
  --card: #E7EFEE;
  --rule: #CCDDDB;
  --mint: #3DBFA0;
  --orange: #FF6A2B;
  --orange-ink: #C84712;   /* orange darkened for text on light backgrounds (AA) */
  --white: #FFFFFF;

  --font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 120px);
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
/* smooth only for in-page links (the clicked link has focus); a page opened at #section lands there directly */
html:focus-within { scroll-behavior: smooth; }
/* switching between pages (e.g. the worked examples) crossfades instead of flashing */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 700; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); letter-spacing: -0.02em; }
h3 { font-size: 1.15rem; line-height: 1.3; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 8px 12px; }

/* ---------- eyebrow / lede / closing ---------- */
.eyebrow, .minilabel {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
.minilabel { margin-bottom: 14px; }
.section-head { max-width: 820px; }
.hero .section-head, .cta .section-head { max-width: none; }
.section-title { max-width: none; }
.section-title strong { color: var(--teal); }
.lede { margin-top: 20px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--muted); }
.closing {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 1.2rem;
}
.closing strong { color: var(--teal); }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid var(--orange);
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-ghost { background: transparent; border-color: currentColor; color: var(--teal); }
.btn-ghost:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }
.btn-small { padding: 10px 16px; font-size: 0.9rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.wordmark:hover { color: var(--ink); }
.site-header nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-header nav a:not(.btn) { color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.site-header nav a:not(.btn):hover, .site-header nav a[aria-current] { color: var(--teal); text-decoration: underline; }
.site-header .btn { background: var(--ink); border-color: var(--ink); color: var(--white); }
.site-header .btn:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* ---------- sections ---------- */
.section { padding: var(--section-y) 0; }
.section-tight { padding-top: 0; }
.tone-paper { background: var(--paper); }
.tone-light { background: var(--light); }
.tone-dark { background: var(--panel-dark); color: var(--light); }
.tone-dark .eyebrow, .tone-dark .minilabel { color: var(--mint); }
.tone-dark .lede, .tone-dark .point p { color: #B9D3CF; }
.tone-dark .section-title strong, .tone-dark .closing strong { color: var(--mint); }
.tone-dark .closing { border-color: rgba(232, 244, 242, .18); }
.tone-dark a:not(.btn) { color: var(--mint); }
.tone-dark .btn-ghost { color: var(--light); }
.tone-dark .btn-ghost:hover { background: var(--light); border-color: var(--light); color: var(--ink); }
.tone-dark .point { border-color: rgba(232, 244, 242, .18); }
.tone-dark .point-num { color: var(--mint); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(72px, 10vw, 128px); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero h1 { color: var(--white); max-width: 14ch; }
.hero-solo { grid-template-columns: 1fr; }
.hero-solo h1 { max-width: 20ch; }
.hero-solo .lede { max-width: 760px; }

.memory { margin: 0; background: rgba(232, 244, 242, .05); border: 1px solid rgba(232, 244, 242, .16); border-radius: 14px; padding: 22px; }
.memory-caption { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--mint); margin-bottom: 14px; }
.memory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* indentation per depth, no inline styles (CSP) */
.depth-0 { --depth: 0; } .depth-1 { --depth: 1; } .depth-2 { --depth: 2; } .depth-3 { --depth: 3; }
.node {
  --indent: calc(var(--depth) * 22px);
  margin-left: var(--indent);
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
  border-radius: 8px;
  font-size: .92rem;
  line-height: 1.35;
}
.node::before { /* connector */
  content: ""; position: absolute; left: -12px; top: 50%; width: 10px; border-top: 1.5px solid rgba(232, 244, 242, .35);
}
.node:first-child::before { display: none; }
.node-kind { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.node-decision { background: var(--light); }
.node-flag { outline: 2px solid var(--orange); outline-offset: -2px; }
.node-flag-text { grid-column: 2; font-size: .78rem; font-weight: 700; color: var(--orange-ink); }

/* ---------- points (numbered cards) ---------- */
.points { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 40px 32px; }
.cols-1 { grid-template-columns: 1fr; max-width: 720px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.point { border-top: 2px solid var(--ink); padding-top: 18px; }
.tone-light .point, .tone-paper .point { border-color: var(--ink); }
.point-num { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.point h3 { margin-bottom: 10px; }
.point p { color: var(--muted); }
.point p em { color: var(--ink); }
.tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 8px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); font-weight: 700; }

/* ---------- gap ---------- */
.gap-grid { margin-top: 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.gap-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gap-rows li { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 16px 20px; background: var(--white); border-radius: var(--radius); align-items: baseline; }
.gap-area { font-weight: 700; }
.gap-tools { color: var(--muted); }
.gap-rows .gap-empty { background: var(--panel-dark); color: var(--white); }
.gap-empty .gap-tools { color: var(--mint); font-weight: 700; }
.gap-misses { background: var(--card); border-radius: var(--radius); padding: 22px 24px; }
.gap-misses ul { list-style: none; margin: 0; padding: 0; }
.gap-misses li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: .95rem; }
.gap-misses li:first-child { border-top: 0; }

/* ---------- compare ---------- */
.compare { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-col { border-radius: var(--radius); padding: 28px; }
.compare-is { background: var(--panel-dark); color: var(--white); }
.compare-is .minilabel { color: var(--mint); }
.compare-not { background: var(--white); }
.compare-not .minilabel { color: var(--muted); }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 1.05rem; }
.compare li { position: relative; padding-left: 28px; }
.compare-is li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(-45deg); }
.compare-not li { color: var(--muted); }
.compare-not li::before { content: "—"; position: absolute; left: 0; color: var(--rule); }

/* ---------- team ---------- */
.team { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 32px; }
.person .initial { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--panel-dark); color: var(--mint); font-weight: 700; font-size: 1.3rem; margin-bottom: 18px; }
.person .role { color: var(--teal); font-size: .9rem; font-weight: 700; margin: 4px 0 10px; }
.person p:not(.role) { color: var(--muted); }

/* ---------- cta ---------- */
.cta-inner { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.cta h2 { color: var(--white); }
.cta .actions { margin-top: 0; }

/* ---------- page / prose ---------- */
.page-head h1 { max-width: 18ch; }
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.5rem; margin: 8px 0 18px; }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose li { margin-bottom: 10px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #B9D3CF; padding: 56px 0 28px; font-size: .95rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.wordmark-footer { color: var(--white); margin-bottom: 14px; }
.wordmark-footer:hover { color: var(--white); }
.footer-tag .muted { color: var(--mint); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-links a { color: var(--light); text-decoration: none; }
.footer-links a:hover { color: var(--mint); text-decoration: underline; }
.footer-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(232, 244, 242, .12); font-size: .82rem; color: var(--muted); }

/* ---------- hero thread: sources ---------- */
.node-src { grid-column: 2; font-size: .72rem; color: var(--muted); }
.memory-more { display: inline-block; margin-top: 14px; font-size: .85rem; font-weight: 700; color: var(--mint); text-decoration: none; }
.memory-more:hover { color: var(--white); text-decoration: underline; }

/* ---------- timeline (how a thread gets built) ---------- */
.timeline { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
.timeline.cols-4 { grid-template-columns: repeat(4, 1fr); }
.timeline.cols-3 { grid-template-columns: repeat(3, 1fr); }
.timeline.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.timeline.cols-5 .step { padding: 16px; }
.timeline.cols-5 .step:not(:last-child)::after { right: -12px; width: 12px; }
.step { background: var(--white); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.step:not(:last-child)::after { /* connector to next step */
  content: ""; position: absolute; top: 34px; right: -16px; width: 16px; border-top: 2px solid var(--rule);
}
.step-when { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.step-phase { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--light); color: var(--teal); }
.step-source { font-size: .82rem; color: var(--muted); }
.step-quote { margin: 0; padding: 10px 12px; border-left: 2px solid var(--rule); font-size: .9rem; font-style: italic; line-height: 1.45; color: var(--ink); background: var(--paper); border-radius: 0 6px 6px 0; }
.step-arrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-top: 2px; }
.chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chip { font-size: .86rem; line-height: 1.3; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--white); }
.chip-kind { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--teal); margin-bottom: 2px; }
.chip-link { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.phase-radar { background: var(--panel-dark); color: var(--light); }
.phase-radar .step-phase { background: rgba(61, 191, 160, .16); color: var(--mint); }
.phase-radar .step-source, .phase-radar .step-arrow { color: #B9D3CF; }
.phase-radar .step-quote { background: rgba(232, 244, 242, .06); border-color: var(--mint); color: var(--light); }
.phase-radar .chip { background: rgba(232, 244, 242, .06); border-color: rgba(232, 244, 242, .2); color: var(--light); }
.phase-radar .chip-kind { color: var(--mint); }
.phase-radar .chip-flag { border-color: var(--orange); }
.phase-radar .chip-flag .chip-kind { color: var(--orange); }
.phase-radar .chip-conflict { border-color: var(--orange); }
.phase-radar .chip-conflict .chip-kind { color: var(--orange); }
.phase-radar .chip-question { border-style: dashed; }

/* ---------- knowledge graph: ask + radar ---------- */
.kg-panels { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kg-card { margin: 0; background: var(--white); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.kg-card-label { align-self: flex-start; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--panel-dark); color: var(--mint); }
.kg-question { padding: 12px 16px; border: 1.5px solid var(--teal); border-radius: 999px; font-weight: 700; color: var(--ink); }
.kg-question::before { content: "?"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--teal); color: var(--white); font-size: .8rem; }
.kg { width: 100%; height: auto; }
.kg-edge { stroke: var(--rule); stroke-width: 1.5; }
.kg-edge.is-path { stroke: var(--teal); stroke-width: 2.5; }
.kg-edge.is-conflict { stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 5 4; }
.kg-edge.is-ghost { stroke: var(--muted); stroke-dasharray: 3 4; }
.kg-arrowhead { fill: var(--teal); }
.kg-node rect { fill: var(--white); stroke: var(--rule); stroke-width: 1.5; }
.kg-kind { font: 700 8.5px/1 var(--font); letter-spacing: .1em; fill: var(--teal); }
.kg-label { font: 400 12.5px/1 var(--font); fill: var(--ink); }
.kg-node.is-dim rect { fill: var(--paper); stroke: var(--card); }
.kg-node.is-dim .kg-kind, .kg-node.is-dim .kg-label { fill: var(--muted); opacity: .7; }
.kg-node.is-path rect { fill: var(--panel-dark); stroke: var(--panel-dark); }
.kg-node.is-path .kg-kind { fill: var(--mint); }
.kg-node.is-path .kg-label { fill: var(--white); }
.kg-node.is-flagged rect { stroke: var(--orange); stroke-width: 2; }
.kg-node.is-ghost rect { fill: var(--white); stroke-dasharray: 4 3; }
.kg-tested { font: 700 8.5px/1 var(--font); letter-spacing: .1em; fill: var(--muted); }
.kg-node.is-tested:not(.is-path) rect { fill: var(--paper); }
.kg-node.is-tested:not(.is-path) .kg-label { fill: var(--muted); }
.kg-node.is-path .kg-tested { fill: #B9D3CF; }
.kg-badge { fill: var(--orange); }
.kg-badge-num { font: 700 11px/1 var(--font); fill: var(--ink); }
.kg-answer { font-size: .98rem; line-height: 1.5; }
.kg-sources { font-size: .8rem; color: var(--muted); }
.kg-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.kg-findings li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; }
.kg-find-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: var(--ink); font-size: .72rem; font-weight: 700; }
.kg-findings .tag { margin-left: 4px; }

/* ---------- example switch (links between the per-example home pages) ---------- */
.ex-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; }
.ex-switch-lead { font-size: .8rem; color: var(--muted); }
.ex-switch ul { list-style: none; margin: 0; padding: 0; display: flex; }
.ex-switch li { flex: 1 1 auto; }
.ex-switch li + li { margin-left: -1.5px; }
.ex-switch a {
  display: block; padding: 7px 14px; text-align: center; white-space: nowrap;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  color: var(--teal); border: 1.5px solid var(--teal);
}
.ex-switch li:first-child a { border-radius: 999px 0 0 999px; padding-left: 16px; }
.ex-switch li:last-child a { border-radius: 0 999px 999px 0; padding-right: 16px; }
.ex-switch a:hover { background: var(--light); color: var(--ink); }
.ex-switch a[aria-current] { background: var(--teal); color: var(--white); }
.tone-dark .ex-switch-lead { color: #B9D3CF; }
.tone-dark .ex-switch a { color: var(--light); border-color: rgba(232, 244, 242, .35); }
.tone-dark .ex-switch a:hover { background: rgba(232, 244, 242, .1); color: var(--white); }
.tone-dark .ex-switch a[aria-current] { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.ex-switch-compact { margin: 32px 0 0; }
.ex-switch-compact a { padding: 5px 12px; font-size: .8rem; }
.ex-switch-compact + .timeline, .ex-switch-compact + .kg-panels { margin-top: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .gap-grid, .kg-panels { grid-template-columns: 1fr; }
  .timeline.cols-5, .timeline.cols-4, .timeline.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .site-header nav li:not(:last-child) { display: none; }
  .cols-2, .cols-3, .cols-4, .cols-5, .compare, .timeline.cols-5, .timeline.cols-4, .timeline.cols-3 { grid-template-columns: 1fr; }
  .node-src { grid-column: 1; }
  .points { gap: 32px; }
  .gap-rows li { grid-template-columns: 1fr; gap: 2px; }
  .node { grid-template-columns: 1fr; --indent: calc(var(--depth) * 12px); }
  .node-flag-text { grid-column: 1; }
  .ex-switch ul { flex: 1 1 100%; }
  .ex-switch a { padding-left: 8px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}