/* decision-os.app — page styles on top of assets/tokens/DESIGN_TOKENS_2030_v3.css.
   Only token variables are used for colour, type, spacing and radii. No JS: the theme follows the system setting. */

@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root { color-scheme: dark; }

/* Light theme by system setting. The token file keeps light values under [data-theme="light"] (set by script in
   Board); a static page without JS needs them under the media query. Mirror of that block — keep in sync. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg:#F5F6F8;
    --surface:#FFFFFF;
    --on-accent:#FFFFFF;
    --glass:rgba(255,255,255,.72);
    --glass-strong:rgba(255,255,255,.9);

    --text-hi:#0A0D12;
    --text-1:#161A21;
    --text-2:#475061;
    --text-3:#656D7B;
    --text-dim:#9AA1AC;

    --w-1:rgba(10,13,18,.03);
    --w-2:rgba(10,13,18,.07);
    --w-3:rgba(10,13,18,.12);
    --w-4:rgba(10,13,18,.22);
    --w-5:rgba(10,13,18,.45);

    --advice:#0F7468; --advice-deep:#0B5A51;
    --advice-tint:rgba(15,116,104,.06); --advice-soft:rgba(15,116,104,.12); --advice-line:rgba(15,116,104,.3); --advice-glow:rgba(15,116,104,.28);
    --human:#3A5BAE; --human-hi:#5675C2; --human-lo:#2F4C96;
    --human-tint:rgba(58,91,174,.06); --human-soft:rgba(58,91,174,.12); --human-line:rgba(58,91,174,.35); --human-glow:rgba(58,91,174,.3);
    --fact:#80620E;
    --fact-tint:rgba(128,98,14,.06); --fact-soft:rgba(128,98,14,.12); --fact-line:rgba(128,98,14,.3); --fact-glow:rgba(128,98,14,.28);
    --artifact:#545C69;
    --artifact-tint:rgba(84,92,105,.06); --artifact-soft:rgba(84,92,105,.12); --artifact-line:rgba(84,92,105,.3); --artifact-glow:rgba(84,92,105,.25);
    --danger:#BB3B39;
    --danger-tint:rgba(187,59,57,.06); --danger-soft:rgba(187,59,57,.12); --danger-line:rgba(187,59,57,.32); --danger-glow:rgba(187,59,57,.28);

    --btn-hi:#2A303A; --btn-lo:#0A0D12;

    --shadow-panel:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,13,18,.05),0 8px 24px -10px rgba(10,13,18,.10),0 24px 48px -24px rgba(10,13,18,.10);
    --shadow-float:0 14px 30px -18px rgba(10,13,18,.25);
    --sheen:rgba(255,255,255,0);
    --sheen-line:rgba(255,255,255,0);
    --shade:rgba(10,13,18,.14);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-20); }

.skip { position: absolute; left: var(--sp-16); top: -100px; padding: var(--sp-8) var(--sp-16); border-radius: var(--r-full); background: var(--surface); color: var(--text-hi); }
.skip:focus { top: var(--sp-16); }
a:focus-visible { outline: 2px solid var(--human); outline-offset: 3px; border-radius: 4px; }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-20) 0; }
.mark { font-weight: var(--fw-semi); color: var(--text-hi); letter-spacing: var(--ls-tight); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-4) var(--sp-12); border-radius: var(--r-full);
  border: 1px solid var(--advice-line); background: var(--advice-tint); color: var(--advice); font-size: var(--fs-xs); font-weight: var(--fw-semi); white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Labels (L3): Geist, sentence case (Design QA m1); only the numbers 01–05 / 1–5 stay mono (.idx). */
.label { font-family: var(--font); font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0; text-transform: none; color: var(--text-2); }

/* Hero */
.hero { padding: var(--sp-48) 0 var(--sp-64); }
.hero h1 { margin-top: var(--sp-16); font-size: clamp(var(--fs-xl), 12vw, var(--fs-3xl)); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--text-hi); }
.lead { margin-top: var(--sp-24); max-width: 760px; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--text-2); }
.lead strong { color: var(--text-1); font-weight: var(--fw-semi); }

/* Sections */
section { padding: var(--sp-48) 0; border-top: 1px solid var(--w-2); }
section h2 { margin-top: var(--sp-12); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: var(--ls-tight); color: var(--text-hi); }
.intro { margin-top: var(--sp-16); max-width: 720px; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--text-2); }

/* Three points */
.points { margin-top: var(--sp-32); display: grid; grid-template-columns: 1fr; gap: var(--sp-16); }
.points li { padding: var(--sp-24); }
.points h3 { hyphens: manual; font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--text-1); }
.points p { margin-top: var(--sp-8); color: var(--text-2); }
.tag { display: inline-block; margin-bottom: var(--sp-12); }
.c-advice { color: var(--advice); }
.c-fact { color: var(--fact); }
.c-human { color: var(--human); }
.c-artifact { color: var(--artifact); }

/* Flow diagrams: a column below 1100px, a row from 1100px */
.flow-list { margin-top: var(--sp-32); display: grid; grid-template-columns: 1fr; gap: var(--sp-24); counter-reset: step; }
.step { position: relative; padding: var(--sp-20) var(--sp-24); border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--w-2); border-top: 2px solid var(--line, var(--w-3)); box-shadow: var(--shadow-panel); }
.step::after { content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--sp-24)); width: 1px; height: var(--sp-24); background: var(--w-4); }
.step:last-child::after { display: none; }
.step .num { font-family: var(--font); font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0; text-transform: none; color: var(--ent, var(--text-2)); }
.label .idx, .step .idx { font-family: var(--mono); letter-spacing: var(--ls-caps); }
.step h3 { overflow-wrap: normal; hyphens: manual; margin-top: var(--sp-8); font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--text-1); }
.step p { margin-top: var(--sp-8); color: var(--text-2); }
.step ul { margin-top: var(--sp-12); display: grid; gap: var(--sp-8); }
.step li { padding-left: var(--sp-16); position: relative; color: var(--text-2); }
.step li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ent, var(--text-3)); }
.e-advice { --ent: var(--advice); --line: var(--advice-line); }
.e-fact { --ent: var(--fact); --line: var(--fact-line); }
.e-human { --ent: var(--human); --line: var(--human-line); }
.e-artifact { --ent: var(--artifact); --line: var(--artifact-line); }

/* Choices: a plain list (Design QA m3) — no side bar, no accent colour. */
.choices li { color: var(--text-1); font-size: 14px; font-weight: 500; }
.choices li::before { background: var(--text-3); }

.note { margin-top: var(--sp-24); display: flex; align-items: flex-start; gap: var(--sp-12); max-width: 720px; color: var(--text-2); }
.note svg { flex: none; margin-top: 2px; }

/* Status */
.status { margin-top: var(--sp-24); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16); }
.status p { color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-snug); }

/* Contact */
.mail { display: inline-block; margin-top: var(--sp-24); font-size: clamp(var(--fs-md), 6vw, var(--fs-lg)); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight); color: var(--text-hi); text-decoration-color: var(--w-4); text-underline-offset: 6px; overflow-wrap: anywhere; }
.mail:hover { text-decoration-color: var(--text-hi); }

footer { padding: var(--sp-32) 0 var(--sp-48); border-top: 1px solid var(--w-2); color: var(--text-3); font-size: var(--fs-xs); }

@media (min-width: 720px) {
  .wrap { padding: 0 var(--sp-40); }
  .points { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: var(--sp-96) 0; }
  section { padding: var(--sp-64) 0; }
}

@media (min-width: 1100px) {
  .flow-list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: var(--sp-32); }
  .step::after { left: auto; right: calc(-1 * var(--sp-32)); top: 50%; bottom: auto; width: var(--sp-32); height: 1px; }
}