/* Discovery Board. Same tokens as board/template.html so the local site and the published snapshot match. */
:root {
  --bg: #f3f4f7; --surface: #ffffff; --surface-2: #e9ebf0; --fg: #171a20; --muted: #5d6474; --line: #d6dae2;
  --accent: #5a4fcf; --accent-ink: #ffffff;
  --rec: #2a78d6; --anc: #eb6834; --lead: #1baf7a; --other: #8b93a1;
  --st-good: #0ca30c; --st-warn: #fab219; --st-serious: #ec835a; --st-critical: #d03b3b;
  --shadow: 0 1px 2px rgba(23,26,32,.06), 0 8px 24px rgba(23,26,32,.08);
  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13161c; --surface: #1b1f27; --surface-2: #242933; --fg: #eaedf2; --muted: #a2a9b7; --line: #2e3440;
    --accent: #9a90ec; --accent-ink: #13161c; --rec: #3987e5; --anc: #d95926; --lead: #199e70; --other: #7d8594;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.55; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: 30px; line-height: 1.15; } h2 { font-size: 22px; } h3 { font-size: 19px; line-height: 1.25; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .small { font-size: 13px; } .right { margin-left: auto; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.wrap { padding-block: 20px 48px; min-width: 0; }

/* header */
header.top { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.brand { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--fg); text-decoration: none; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 2px; }
nav.tabs a { text-decoration: none; color: var(--muted); font-weight: 500; padding: 6px 11px; border-radius: 999px; }
nav.tabs a:hover { background: var(--surface-2); color: var(--fg); }
nav.tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
form.search { margin-left: auto; } form.search input { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 6px 14px; width: 200px; max-width: 48vw; }
.helpbtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; }
.helpbtn[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.help { background: var(--surface-2); border-bottom: 1px solid var(--line); } .help .wrap { padding-block: 12px; max-width: 1200px; }
.help p { margin: 6px 0; max-width: 80ch; } .help-words { font-size: 14px; color: var(--muted); } .help-words .chip { margin: 2px 2px 2px 8px; }
.toast { background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 8px; margin-bottom: 14px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .crumbs a { color: var(--muted); } .crumbs .here { color: var(--fg); }

/* chips and status */
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; vertical-align: middle; max-width: 100%; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--other); flex: none; }
.chip:empty, .chip .dot:only-child { margin: 0; }
.chip.t-record .dot { background: var(--rec); } .chip.t-anchor .dot { background: var(--anc); border-radius: 1px; }
.chip.t-lead .dot { background: var(--lead); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.chip.t-step .dot { background: var(--accent); } .chip.t-problem .dot { background: var(--fg); } .chip.t-source .dot { background: var(--other); }
.chip.clickable:hover { border-color: var(--accent); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--other); flex: none; }
.status.tone-good::before { background: var(--st-good); } .status.tone-warn::before { background: var(--st-warn); }
.status.tone-serious::before { background: var(--st-serious); } .status.tone-critical::before { background: var(--st-critical); }
.status.tone-muted::before { background: var(--muted); } .status.tone-plan::before { background: transparent; border: 2px solid var(--muted); width: 6px; height: 6px; }

/* buttons and forms */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 14px; text-decoration: none; cursor: pointer; font-weight: 500; }
.btn.ghost { background: var(--surface); color: var(--fg); border-color: var(--line); } .btn.ghost:hover { border-color: var(--accent); }
.btn.small { padding: 4px 10px; font-size: 13px; } .btn.danger { color: var(--st-critical); } .btn.armed { background: var(--st-critical); color: #fff; border-color: var(--st-critical); }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } form.inline { display: inline; }
.x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 6px; } .x:hover { color: var(--st-critical); }
label { display: grid; gap: 4px; font-weight: 500; } .req { color: var(--st-critical); font-size: 12px; font-weight: 500; }
input[type=text], input[type=url], input[type=date], input[type=number], input[type=search], select, textarea { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0; font-weight: 400; }
textarea { resize: vertical; }
.editform { display: grid; gap: 16px; max-width: 820px; } .formgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.formrow { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* layout bits */
.view-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; } .view-head p { margin: 0; color: var(--muted); max-width: 65ch; }
.section-title { font-family: var(--body); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 26px 0 10px; }
.section-title.small { margin-top: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; color: inherit; text-decoration: none; display: block; }
.card.pick:hover { border-color: var(--accent); } .card p { margin: 8px 0 0; } .card h3 a { color: inherit; text-decoration: none; } .card h3 a:hover { color: var(--accent); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--muted); font-size: 13px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.two-col { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
ul.plain { margin: 8px 0 0; padding-left: 18px; } ul.plain li { margin: 3px 0; }
.empty { color: var(--muted); } .produced { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* home */
.hero { padding-block: 10px 8px; } .hero h1 { font-size: clamp(28px, 4vw, 40px); max-width: 24ch; }
.lede { font-size: 18px; max-width: 70ch; color: var(--fg); }
.how { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: how; }
.how li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; position: relative; counter-increment: how; }
.how li::before { content: counter(how); position: absolute; top: 10px; right: 14px; font-family: var(--mono); color: var(--muted); }
.how p { margin: 8px 0 0; font-size: 15px; }
section + section { margin-top: 32px; }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: inherit; display: grid; }
.tile b { font-size: 28px; font-family: var(--mono); font-weight: 500; } .tile span { color: var(--muted); font-size: 14px; } .tile:hover { border-color: var(--accent); }
.plain-list { padding-left: 20px; } .plain-list li { margin: 8px 0; }

/* journey */
.journey { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
.journey .num { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: right; padding-top: 16px; position: relative; }
.journey .num::after { content: ""; position: absolute; right: -8px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.journey .num.planned::after { background: transparent; border: 2px solid var(--muted); width: 6px; height: 6px; right: -6px; }
.journey .step { margin-bottom: 14px; position: relative; }
.journey .step::before { content: ""; position: absolute; left: -17px; top: -14px; bottom: -14px; border-left: 2px solid var(--line); }
.journey .step.last::before { bottom: 40%; } .journey .step.planned { border-style: dashed; }

/* lists */
.list { display: grid; gap: 6px; }
.row-card { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; text-decoration: none; color: inherit; }
.row-card:hover { border-color: var(--accent); } .row-card.static:hover { border-color: var(--line); }
.row-card .when { color: var(--muted); font-size: 13px; } .row-card .ttl { font-weight: 500; }
.row-card.static { grid-template-columns: 110px minmax(0, 1fr) auto; }
@media (max-width: 640px) { .row-card, .row-card.static { grid-template-columns: 1fr; gap: 4px; } }
.seg.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seg.filters a { text-decoration: none; color: var(--fg); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.seg.filters a[aria-current="true"] { background: var(--surface-2); border-color: var(--fg); font-weight: 600; } .count { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.seg.filters .chip { padding: 2px 4px; }

/* hunch cards */
.evidence { display: grid; gap: 6px; margin-top: 10px; }
.evrow { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; } .evrow .mark { width: 10px; height: 10px; margin-top: 7px; flex: none; }
.evrow.record .mark { background: var(--rec); border-radius: 50%; } .evrow.anchor .mark { background: var(--anc); }
.evrow a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .evrow a:hover { text-decoration-color: var(--accent); }
.small-h { font-size: 16px; }

/* item page */
.detail-page { max-width: 860px; } .detail-page .body p { max-width: 70ch; }
.linklist { display: grid; }
.linkrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.linkrow .rel { font-size: 14px; color: var(--muted); } .linkrow .rel b { color: var(--fg); font-weight: 600; } .linkrow .note { font-size: 13px; color: var(--muted); display: block; }
@media (max-width: 640px) { .linkrow { grid-template-columns: 1fr auto; } .linkrow .ttl { grid-column: 1 / -1; } }
.addlink { margin-top: 16px; } .addlink h3 { margin-bottom: 8px; }
.noteform { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; margin-bottom: 10px; }
.note-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; position: relative; } .note-card p { margin: 4px 0 0; white-space: pre-wrap; }
.note-card form { position: absolute; top: 6px; right: 6px; }

/* viz */
.viz-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.viz-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; } .viz-tools .label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.seg button { border: 1px solid var(--line); background: var(--surface); padding: 4px 10px; cursor: pointer; font-size: 13px; }
.seg button:first-child { border-radius: 6px 0 0 6px; } .seg button:last-child { border-radius: 0 6px 6px 0; } .seg button + button { margin-left: -1px; }
.seg button[aria-pressed="true"] { background: var(--surface-2); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin-top: 8px; } .legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; }
.legend i.rec { background: var(--rec); border-radius: 50%; } .legend i.anc { background: var(--anc); } .legend i.lead { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--lead); }
.legend i.prob { background: var(--fg); border-radius: 50%; } .legend i.src { background: var(--other); width: 6px; height: 6px; border-radius: 50%; } .legend i.stp { background: var(--accent); border-radius: 50%; }
.legend i.line { width: 18px; height: 0; border-top: 2px solid var(--lead); } .legend i.line.dash { border-top-style: dashed; } .legend i.line.grey { border-top-color: var(--other); }
.web-scroll { overflow: auto; } .offchart { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
svg { display: block; max-width: 100%; height: auto; font-family: var(--body); } svg text { fill: var(--fg); font-size: 12px; }
svg .axis text { fill: var(--muted); font-family: var(--mono); font-size: 11px; } svg .axis line, svg .axis path { stroke: var(--line); }
svg .lane-label { fill: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
svg .mark { cursor: pointer; } svg .mark.record { fill: var(--rec); } svg .mark.anchor { fill: var(--anc); } svg .mark.lead { fill: var(--lead); }
svg .mark.problem { fill: var(--fg); } svg .mark.source { fill: var(--other); opacity: .6; } svg .mark.step { fill: var(--accent); }
svg .mark.dim { opacity: .15; } svg .mark.sel { stroke: var(--accent); stroke-width: 3px; }
svg .conn { fill: none; stroke: var(--lead); stroke-width: 2px; } svg .conn.weak { stroke-dasharray: 4 4; } svg .conn.explains { stroke: var(--other); stroke-width: 1.5px; }
svg .web-link { stroke: var(--line); stroke-width: 1.2px; } svg .web-link.hi { stroke: var(--accent); stroke-width: 2px; } svg .web-link.dim { opacity: .2; }
svg .mark-label { font-size: 11px; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.tooltip { position: fixed; z-index: 20; pointer-events: none; background: var(--fg); color: var(--bg); padding: 6px 10px; border-radius: 6px; font-size: 12px; max-width: 280px; box-shadow: var(--shadow); } .tooltip b { display: block; }
aside.detail { position: fixed; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; z-index: 8; box-shadow: var(--shadow); }
aside.detail .close { float: right; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; }
aside.detail h3 { margin: 6px 0 8px; padding-right: 36px; } aside.detail .body { font-size: 14px; }
aside.detail .linkrow { grid-template-columns: auto minmax(0, 1fr); cursor: pointer; } aside.detail .linkrow .rel { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
aside.detail .linkrow:hover .ttl { color: var(--accent); }

footer.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; padding-block: 16px 32px; border-top: 1px solid var(--line); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { .card, nav.tabs a, .chip, .btn { transition: border-color .15s, background .15s; } }