/* Product composition. Evidence rendering and its tokens remain in styles.css. */
:root {
  --paper: #08090a;
  --surface: #0f1011;
  --surface-2: #191a1b;
  --line: #28282c;
  --line-strong: #3e3e44;
  --ink: #f7f8f8;
  --muted: #8a8f98;
  --mint: #7170ff;
  --d-bg-0: #08090a;
  --d-bg-1: #0f1011;
  --d-bg-2: #191a1b;
  --d-fg-1: #f7f8f8;
  --d-fg-2: #d0d6e0;
  --d-fg-3: #8a8f98;
  --d-fg-4: #8a8f98;
  --d-border-1: #28282c;
  --d-border-2: #3e3e44;
  --accent-bright: #7170ff;
  /* Linear's --color-brand-bg. #7170ff under white text is 3.84:1, and a 13px
     bold label does not qualify for the large-text exemption. */
  --brand-bg: #5e6ad2;
  --brand-bg-hover: #565fc4;
  --lime: #7170ff;
  --radius-lg: 8px;
}
html { scroll-padding-top: 72px; }
body { color: var(--ink); }
body, h1, h2, h3, button, a, p, span, strong, small { letter-spacing: 0; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.icon-button:focus-visible, .copy-command:focus-visible, .view-tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
button:disabled { opacity: .45; cursor: not-allowed; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px 20px; color: #08090a; background: var(--mint); }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.copy-command { display: grid; place-items: center; flex: none; width: 42px; min-width: 42px; }
.empty-row { padding-block: 40px; color: var(--muted); }
.header-inner, main, footer { width: min(1240px, calc(100% - 64px)); }
.site-header { background: #08090acc; border-bottom-color: transparent; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.header-inner { min-height: 72px; gap: 22px; }
.brand { gap: 9px; font-size: 17px; }
.brand-mark { width: 29px; height: 29px; }
.header-separator { display: none; }
.header-campaign { gap: 9px; max-width: 360px; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
.header-campaign .pulse-dot { background: #7170ff; box-shadow: 0 0 0 3px #7170ff2e; }
.header-nav { gap: 8px; }
.header-nav button { min-height: 38px; color: var(--muted); }
.header-nav .join-button { display: inline-flex; align-items: center; gap: 16px; color: #ffffff; background: var(--brand-bg); border-radius: 5px; }
.header-nav .join-button:hover { color: #ffffff; background: var(--brand-bg-hover); }
button svg { width: 16px; height: 16px; flex: none; }
/* Copy, board, meta. The board takes the 1fr, so it fills the screen exactly
   instead of a guessed height that overshot the fold on a laptop. */
.graph-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; width: 100%; min-height: calc(100svh - 72px); margin: 0; padding: 24px 0 12px; overflow: visible; }
.hero-heading { width: 100%; }
.hero-kicker { gap: 12px; margin-bottom: 17px; font-size: 11px; }
.evidence-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; border: 0; border-radius: 0; color: var(--mint); background: transparent; font-size: 11px; font-weight: 500; }
.evidence-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.hero-category { color: var(--muted); }
#campaign-slug { display: none; }
.hero h1 { max-width: 100%; font-size: 64px; line-height: 1.08; font-weight: 600; letter-spacing: 0; }
.brand-point { color: var(--mint); }
.hero-lede { margin-top: 15px; }
.hero-summary { color: #d0d6e0; font-size: 17px; line-height: 1.5; letter-spacing: 0; }
.hero-actions { gap: 14px; margin-top: 22px; }
.primary-action, .secondary-action, .ghost-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; border-radius: 5px; font-size: 13px; font-weight: 600; }
.primary-action { padding: 9px 16px; border-color: var(--brand-bg); color: #ffffff; background: var(--brand-bg); }
.primary-action:hover, .primary-action:focus-visible { color: #ffffff; border-color: var(--brand-bg-hover); background: var(--brand-bg-hover); }
.ghost-action { color: #d0d6e0; }
.ghost-action:hover { color: #fff; }
/* The frontier is an instrument, not a scoreboard. The target is the one real
   number, so it anchors; the axis names both ends; the empty best-run state is a
   quiet line with a breathing baseline marker rather than a dash competing for
   the top slot. Borderless: rhythm comes from spacing. */
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 #7170ff66; } 60% { box-shadow: 0 0 0 8px #7170ff00; } }
/* The empty-campaign scene is the centrepiece: give it the height of a real
   panel and let the map fill it, instead of pinning strip heights per breakpoint. */
.hero-graph { grid-column: 1 / -1; width: 100%; height: auto; min-height: 420px; margin: 20px 0 0; border: 0; overflow: hidden; background: transparent; }
.hero-graph:not(.is-empty) { height: 380px; }
.graph-scene-heading { position: absolute; top: 12px; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; color: #d0d6e0; font-size: 12px; pointer-events: none; }
.graph-scene-heading > span { display: inline-flex; align-items: center; gap: 9px; }
.graph-scene-heading svg { width: 14px; height: 14px; }
.graph-scene-heading button { pointer-events: auto; }
.hero-graph-toolbar { top: 48px; right: 0; left: 0; }
.hero-graph-legend { position: static; font-size: 10px; }
.hero-graph-svg { padding-top: 72px; padding-bottom: 40px; }
.hero-graph.is-empty .hero-graph-toolbar, .hero-graph.is-empty .hero-graph-svg, .hero-graph.is-empty .hero-node-readout, .hero-graph.is-empty .hero-mobile-spine { display: none; }
.hero-node-readout { right: 0; bottom: 7px; width: min(610px, 100%); border: 0; padding: 5px 0; background: #08090aea; }
.hero-meta-line { grid-column: 1 / -1; gap: 26px; margin-top: 0; padding-top: 14px; border-top: 0; font-size: 11px; }
.hero-meta-line strong { margin-right: 5px; color: var(--ink); font-size: 16px; font-weight: 500; }
.live-state { padding: 2px 0; border: 0; color: var(--muted); font-size: 10px; }
.hero-footer { grid-column: 1 / -1; margin-top: 8px; }
.hero-meta { gap: 18px; font-size: 10px; color: var(--muted); }
.hero-meta strong { font-weight: 500; color: var(--muted); }
#hero-challenge { display: inline-block; max-width: 320px; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-next { display: inline-flex; gap: 10px; align-items: center; border: 0; padding: 0; color: var(--muted); background: transparent; text-transform: none; cursor: pointer; font-size: 11px; }
/* Only the motion toggle sits above the scene now, so the reserve shrinks
   from a heading row to the button. */
.workflow-preview { position: absolute; inset: 30px 0 0; display: flex; flex-direction: column; }
.workflow-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 10px; color: var(--muted); }
/* Kept because the board is a simulation that names institutions; parked in
   the corner so it marks the scene without heading it. */
.workflow-label { position: absolute; bottom: 0; left: 0; z-index: 1; color: var(--muted); font-family: var(--font-mono); font-size: 9px; opacity: 0.65; pointer-events: none; }
/* The illustration is a canvas simulation (network-scene.js); the map just
   gives it a box. Tall enough to read as a scene, not a strip. */
.workflow-map { position: relative; flex: 1; min-height: 0; margin: 10px 0 8px; }
.network-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.workflow-foot button { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 4px 0; background: transparent; color: var(--mint); cursor: pointer; font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .view-panel.active { animation: panel-in 220ms ease-out both; }
  .hero-heading { animation: panel-in 400ms ease-out both; }
}
@keyframes panel-in { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.motion-paused .view-panel, .motion-paused .hero-heading, .capture-mode .view-panel, .capture-mode .hero-heading { animation: none; }
.view-tabs { position: sticky; top: 72px; z-index: 10; gap: 28px; margin-top: 13px; background: #08090af5; backdrop-filter: blur(12px); scroll-margin-top: 0; }
.view-tab { min-height: 54px; border-bottom-width: 2px; font-size: 13px; font-weight: 500; }
.view-tab.active { color: var(--mint); border-bottom-color: var(--mint); }
.view-panel { padding: 30px 0 44px; scroll-margin-top: 140px; }
.section-heading { margin-bottom: 24px; }
.section-heading h2, h2 { font-size: 28px; letter-spacing: 0; font-weight: 500; }
.section-copy, .lead { font-size: 14px; color: var(--muted); }
.eyebrow { font-size: 10px; font-weight: 500; color: #828fff; margin-bottom: 9px; }
.leaderboard-key { font-size: 11px; }
#leaderboard-view { display: flex; flex-direction: column; }
#leaderboard-view .section-heading { order: 0; }
.leaderboard-layout { order: 1; grid-template-columns: minmax(0, 1fr) 225px; gap: 32px; }
.frontier-card { order: 2; margin-top: 28px; padding: 24px 0 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.activity-strip { order: 3; margin: 25px 0 0; padding: 24px 0 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.activity-heading h3 { font-size: 16px; }
.activity-marker { box-shadow: none; }
.activity-copy { background: var(--surface-2); }
.leaderboard-table-wrap, .table-scroll, .people-list { border-width: 1px 0; border-radius: 0; background: transparent; }
.leaderboard-table th { background: transparent; padding-inline: 12px; font-size: 11px; font-weight: 500; }
.leaderboard-table td { padding-inline: 12px; }
.leaderboard-table .empty-row { height: 154px; text-align: center; color: var(--muted); font-size: 13px; }
.race-summary { min-height: 170px; padding: 0 0 0 24px; border-width: 0 0 0 1px; border-color: var(--line); border-radius: 0; background: transparent; }
.race-summary .eyebrow { color: #828fff; }
.race-gap { color: var(--mint); font-size: 33px; font-weight: 500; }
.race-summary > span { color: var(--muted); font-size: 10px; }
.race-counts { padding-top: 14px; }
.race-counts b { font-weight: 500; }
.race-counts span { color: var(--muted); }
.race-summary .primary-action { margin-top: 16px; }
.frontier-plot { border-left: 1px solid var(--line); }
.frontier-empty { font-size: 13px; }
.graph-workspace { grid-template-columns: 1fr; gap: 24px; }
.detail-graph-shell { height: 400px; min-height: 0; border-radius: 6px; border-color: var(--line); background: #0f1011; }
.graph-stage rect { fill: transparent; stroke: #23252a; }
.graph-stage:nth-child(even) rect { fill: transparent; }
.graph-stage text { font-size: 18px; font-weight: 500; }
.research-node .node-shape { fill: #191a1b; stroke: #62666d; }
.research-node:hover .node-shape { fill: #28282c; stroke: var(--mint); }
.node-title { font-size: 20px; font-weight: 500; }
.node-kicker { font-size: 12px; font-weight: 500; }
.node-meta { fill: #d0d6e0; font-size: 11px; }
.research-node.is-muted { opacity: .55; }
.research-node.type-human_seed .node-shape { fill: #23252a; stroke: #d0d6e0; }
.evidence-inspector { position: static; padding: 22px 0; border-width: 1px 0 0; border-radius: 0; background: transparent; box-shadow: none; }
.inspector-actions { gap: 7px; }
.inspector-action { border-color: #3e3e44; color: #d0d6e0; background: #141516; }
.person-row.selected { background: #202122; box-shadow: inset 2px 0 var(--mint); }
.person-profile { border-width: 0 0 0 1px; border-radius: 0; background: transparent; }
.person-profile-head .person-avatar { color: #ffffff; background: var(--mint); border-color: var(--mint); }
.person-github a, .method-related a { color: var(--mint); }
.ownership-strip, .privacy-strip, .intake-panel { padding: 20px 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.agent-task-cta { grid-template-columns: minmax(0, 1fr) auto; padding: 28px 0; margin-top: 25px; border-width: 1px 0; border-radius: 0; background: transparent; }
.agent-task-cta h3 { font-weight: 500; }
.agent-task-action button { min-height: 44px; border-color: var(--brand-bg); color: #ffffff; background: var(--brand-bg); font-weight: 600; }
.agent-task-action button:hover { color: #ffffff; background: var(--brand-bg-hover); }
.agent-task-action p { font-size: 11px; }
.participation-state { border-color: var(--line); background: transparent; }
.manual-setup { margin-top: 26px; }
.manual-setup summary { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; color: #d0d6e0; cursor: pointer; font-size: 13px; }
.manual-setup summary span { color: var(--muted); }
.participation-steps { margin-top: 16px; gap: 25px; }
.participation-steps > li { padding: 18px 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.step-number { border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--mint); }
.flow-grid article { border-width: 1px 0 0; border-radius: 0; padding: 18px 16px 18px 0; background: transparent; }
.flow-grid article:nth-child(2), .flow-grid article:nth-child(3) { background: transparent; border-color: var(--line); }
.flow-grid article:nth-child(2) > span { color: #f1adad; }
.flow-grid article:nth-child(3) > span { color: #89dde6; }
.flow-grid h3 { margin-top: 20px; }
.flow-grid p { color: var(--muted) !important; font-size: 13px; }
.method-strip { padding: 26px 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.method-copy { font-size: 13px; }
.method-heading h3 { font-size: 20px; }
.method-disclaimer, .method-related { font-size: 11px; }
.source-link { background: transparent; }
.inspiration-strip { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding: 24px 0; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.inspiration-strip a { display: inline-flex; align-items: center; gap: 8px; color: #d0d6e0; text-decoration: none; }
.inspiration-strip a:hover { color: var(--mint); }
.inspiration-strip img { width: 14px; height: 14px; }
.inspiration-note { margin-left: auto; font-size: 10px; }
footer { padding: 30px 0 24px; }
.footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 30px; }
.footer-brand p { margin-top: 10px; font-size: 12px; }
.footer-col { gap: 8px; }
.footer-col a, .footer-col button { font-size: 12px; }
.footer-meta { margin-top: 26px; padding-top: 14px; }
.footer-identity, .footer-claim { font-size: 10px; overflow-wrap: anywhere; }
.site-status-banner { color: #efde99; background: #191a1b; border-color: #716534; }
.site-status-banner div > span { color: #d0c69f; }
.site-status-banner .secondary-action { color: #efde99; background: transparent; }
@media (min-width: 1500px) {
  .graph-hero { padding-top: 45px; }
}
@media (max-width: 1050px) {
  .graph-hero { grid-template-columns: minmax(0, 1fr) 285px; gap: 0 24px; }
  .hero h1 { font-size: 54px; }
  .evidence-inspector { border-width: 1px 0 0; padding: 18px 0; }
  .hero-category { font-size: 10px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 62px; }
  .header-inner, main, footer { width: calc(100% - 36px); }
  .header-inner { min-height: 62px; grid-template-columns: 1fr auto; }
  .header-campaign, .header-nav button:not(.join-button) { display: none; }
  .header-nav .join-button { gap: 9px; font-size: 11px; padding-inline: 10px; }
  .brand { font-size: 15px; }
  .brand-mark { width: 25px; height: 25px; }
  .graph-hero { grid-template-columns: 1fr; padding-top: 25px; }
  .hero h1 { font-size: 46px; }
  .hero-kicker { margin-bottom: 12px; gap: 10px; }
  .hero-summary { font-size: 15px; }
  .hero-summary br { display: block; }
  .hero-actions { margin-top: 17px; gap: 6px; }
  .hero-graph { height: clamp(460px, 72vh, 640px); margin-top: 20px; }
  .hero-graph:not(.is-empty) { height: 294px; }
  .workflow-preview { inset: 28px 0 0; }
  .workflow-heading { font-size: 10px; }
  .workflow-heading > span:first-child { display: none; }
  .workflow-foot { font-size: 9px; }.workflow-foot button { font-size: 10px; }
  .hero-meta-line { gap: 12px; padding-top: 12px; font-size: 9px; }
  .hero-meta-line strong { font-size: 13px; margin-right: 2px; }
  .hero-meta-line .live-state { display: none; }
  .hero-footer { display: none; }
  .hero-mobile-spine { padding-top: 50px; max-height: 280px; overflow-y: auto; }
  .view-tabs { top: 62px; gap: 22px; margin-top: 0; scroll-margin-top: 0; }
  .view-tab { min-height: 49px; font-size: 12px; }
  .view-panel { padding-top: 18px; }
  .section-heading h2 { font-size: 25px; }
  .leaderboard-layout { grid-template-columns: 1fr; gap: 24px; }
  .race-summary { min-height: 0; padding: 0 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
  .race-summary .eyebrow { grid-column: 1 / -1; }.race-gap { margin: 0; }.race-summary > span { grid-row: 3; }.race-counts { grid-row: 2 / 4; grid-column: 2; padding-top: 0; }.race-summary .primary-action { grid-column: 1 / -1; }
  .leaderboard-table { min-width: 610px; }.leaderboard-table .empty-row { text-align: left; height: 105px; }
  .participate-heading { display: flex; gap: 18px; flex-direction: column; }
  .agent-task-cta { grid-template-columns: 1fr; gap: 20px; padding: 25px 0; }
  .agent-task-action p { max-width: none; }
  .agent-task-cta h3 { font-size: 19px; }
  .inspiration-strip { gap: 14px 18px; }.inspiration-note { width: 100%; margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }.footer-brand { grid-column: 1 / -1; }
  .person-profile { padding: 20px 0; border-width: 1px 0 0; }
}
.capture-mode .graph-hero { display: block; }
.capture-mode .workflow-map { height: 540px; margin-top: 60px; }
.capture-mode .workflow-foot { font-size: 16px; }
@media (max-width: 360px) {
  .hero h1 { font-size: 38px; }
  .brand { font-size: 13px; }
  .header-nav .join-button { font-size: 10px; }
  .hero-actions { flex-wrap: wrap; }
}
@media (min-width: 761px) and (max-height: 850px) {
  .graph-hero { padding-top: 23px; }
  .hero h1 { font-size: 54px; }
  .hero-graph:not(.is-empty) { height: 280px; }
  .hero-footer { display: none; }
  .hero-kicker { margin-bottom: 10px; }
  .hero-lede { margin-top: 10px; }
  .hero-actions { margin-top: 14px; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .graph-hero { padding-block: 16px 0; }
  .hero h1 { font-size: 36px; }
  .hero-kicker { margin-bottom: 8px; }
  .hero-summary { font-size: 13px; }
  .hero-lede { margin-top: 9px; }
  .hero-actions { margin-top: 12px; }
  .hero-actions button { min-height: 36px; font-size: 11px; }
  .workflow-preview { top: 26px; }
  .workflow-foot button { font-size: 9px; }
}