/*
 * swiss/tokens.css — editorial sans + serif. Cyan leads; yellow echoes.
 * 12-column grid; Fibonacci type scale (--t-1, --t-2, --t-3, --t-5, --t-8).
 * Non-goals: no shared styling; no cross-mode rules.
 */

@layer modes {
  html[data-mode="swiss"] { font-family: var(--sans); line-height: 1.5; --accent: var(--cyan); --echo: var(--yellow); }
  html[data-mode="swiss"] body {
    max-width: 1280px; margin: 0 auto;
    padding: calc(var(--u)*10) calc(var(--u)*6);
    display: grid; grid-template-columns: repeat(12, 1fr);
    column-gap: calc(var(--u)*3); row-gap: calc(var(--u)*7);
  }
  html[data-mode="swiss"] site-header,
  html[data-mode="swiss"] site-footer,
  html[data-mode="swiss"] main { grid-column: 1 / -1; }
  html[data-mode="swiss"] main { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: calc(var(--u)*3); row-gap: calc(var(--u)*7); }
  html[data-mode="swiss"] main > * { grid-column: 1 / -1; }
  html[data-mode="swiss"] main > section { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: calc(var(--u)*3); row-gap: calc(var(--u)*3); }

  /* Type scale — Fibonacci on display, em-relative for sub-1. */
  html[data-mode="swiss"] h1 { font-family: var(--serif); font-weight: 400; line-height: 0.9; letter-spacing: -0.035em; margin: 0; font-size: clamp(var(--t-3), 10vw, var(--t-8)); color: var(--fg); }
  html[data-mode="swiss"] h1 em { font-style: italic; color: var(--accent); }
  html[data-mode="swiss"] h2 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; margin: 0; font-size: clamp(var(--t-2), 5vw, var(--t-5)); color: var(--fg); }
  html[data-mode="swiss"] h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; font-size: var(--t-2); color: var(--fg); }
  html[data-mode="swiss"] .lede { font-size: 1.35em; line-height: 1.4; color: var(--fg); }

  /* Site chrome */
  html[data-mode="swiss"] site-header { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  html[data-mode="swiss"] site-header .brand { color: var(--fg); font-weight: 700; }
  html[data-mode="swiss"] site-header nav { display: flex; gap: calc(var(--u)*4); }
  html[data-mode="swiss"] site-header nav a { text-decoration: none; }
  html[data-mode="swiss"] site-header nav a:hover,
  html[data-mode="swiss"] site-header nav a[aria-current="page"] { color: var(--accent); }
  html[data-mode="swiss"] site-footer { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: calc(var(--u)*2); display: flex; gap: calc(var(--u)*3); flex-wrap: wrap; }
  html[data-mode="swiss"] a { color: var(--accent); }
  html[data-mode="swiss"] strong { color: var(--fg); }
  html[data-mode="swiss"] code { color: var(--echo); }
  html[data-mode="swiss"] kbd { font-family: var(--mono); background: var(--bg-sunk); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 2px; font-size: 0.85em; }

  /* Hero */
  html[data-mode="swiss"] section.hero .ident { grid-column: 1 / -1; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  html[data-mode="swiss"] section.hero .ident b { color: var(--accent); font-weight: 400; }
  html[data-mode="swiss"] section.hero h1 { grid-column: 1 / -1; }
  html[data-mode="swiss"] section.hero .lede { grid-column: 1 / span 7; }
  html[data-mode="swiss"] section.hero .meta { grid-column: 9 / -1; align-self: end; display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u)*2); font-family: var(--mono); font-size: 0.78rem; color: var(--muted); padding-top: calc(var(--u)*2); border-top: 1px solid var(--echo); }
  html[data-mode="swiss"] section.hero .meta b { color: var(--accent); font-weight: 400; }
  html[data-mode="swiss"] section.hero .meta + .domains { border-top: none; padding-top: calc(var(--u)*0.5); margin-top: calc(var(--u)*0.5); }

  /* Intro: heading left, prose right */
  html[data-mode="swiss"] section.intro h2 { grid-column: 1 / span 4; font-size: var(--t-3); }
  html[data-mode="swiss"] section.intro > p { grid-column: 6 / -1; max-width: 52ch; margin: 0; }
  html[data-mode="swiss"] section.intro > p + p { margin-top: 1em; }

  /* Claims (landing) — alternate sides automatically by sibling order. */
  html[data-mode="swiss"] section.claim { align-items: start; row-gap: calc(var(--u)*2); }
  html[data-mode="swiss"] section.claim header { display: flex; flex-direction: column; gap: var(--u); }
  html[data-mode="swiss"] section.claim .num { font-family: var(--mono); font-size: 0.72rem; color: var(--echo); letter-spacing: 0.18em; text-transform: uppercase; padding-bottom: calc(var(--u)*1.5); border-bottom: 1px solid var(--rule); }
  html[data-mode="swiss"] section.claim h3 { font-size: var(--t-2); }
  html[data-mode="swiss"] section.claim .achieves { color: var(--muted); max-width: 38ch; margin: 0; line-height: 1.55; }
  /* Default (odd): header left, snippet right. */
  html[data-mode="swiss"] section.claim header { grid-column: 1 / span 5; }
  html[data-mode="swiss"] section.claim source-snippet { grid-column: 7 / -1; }
  /* Every even .claim sibling — swap. */
  html[data-mode="swiss"] section.claim:nth-child(even of .claim) header { grid-column: 8 / -1; }
  html[data-mode="swiss"] section.claim:nth-child(even of .claim) source-snippet { grid-column: 1 / span 6; }

  /* Principles (work + about) — alternate sides per even/odd. */
  html[data-mode="swiss"] section.principle { padding-top: calc(var(--u)*2); }
  html[data-mode="swiss"] section.principle header { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--u); padding-bottom: calc(var(--u)*2); border-bottom: 1px solid var(--rule); }
  html[data-mode="swiss"] section.principle .num,
  html[data-mode="swiss"] section.principle .area,
  html[data-mode="swiss"] section.patterns .num { font-family: var(--mono); font-size: 0.72rem; color: var(--echo); letter-spacing: 0.18em; text-transform: uppercase; }
  html[data-mode="swiss"] section.principle .area { color: var(--muted); }
  html[data-mode="swiss"] section.principle .body p { max-width: 56ch; }
  html[data-mode="swiss"] section.principle .body p + p { margin-top: 0.8em; }
  /* Default (odd): body left, proof right. */
  html[data-mode="swiss"] section.principle .body { grid-column: 1 / span 7; }
  html[data-mode="swiss"] section.principle :is(pre.proof, dl.stats, table.budget) { grid-column: 9 / -1; align-self: start; padding: var(--u) calc(var(--u)*1.5); border-left: 2px solid var(--echo); margin: 0; font-family: var(--mono); font-size: 0.78rem; line-height: 1.6; }
  /* Every even .principle sibling — swap automatically.
     :nth-child(of S) is CSS Selectors 4 (Chrome/Firefox 2023+, Safari 9+). */
  html[data-mode="swiss"] section.principle:nth-child(even of .principle) { background: color-mix(in oklab, var(--bg-soft) 60%, transparent); padding: calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*3); border-radius: 2px; }
  html[data-mode="swiss"] section.principle:nth-child(even of .principle) .body { grid-column: 6 / -1; }
  html[data-mode="swiss"] section.principle:nth-child(even of .principle) :is(pre.proof, dl.stats, table.budget) { grid-column: 1 / span 4; border-left: 0; border-right: 2px solid var(--echo); padding: var(--u) calc(var(--u)*1.5) var(--u) 0; }
  html[data-mode="swiss"] section.principle pre.proof { color: var(--muted); white-space: pre-wrap; max-width: 32ch; }
  html[data-mode="swiss"] section.principle dl.stats { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--u)*2); row-gap: calc(var(--u)*0.5); }
  html[data-mode="swiss"] section.principle dl.stats dt { color: var(--muted); }
  html[data-mode="swiss"] section.principle dl.stats dd { margin: 0; color: var(--accent); }
  html[data-mode="swiss"] section.principle table.budget { border-collapse: collapse; }
  html[data-mode="swiss"] section.principle table.budget th { text-align: left; color: var(--muted); font-weight: 400; padding-bottom: calc(var(--u)*0.5); border-bottom: 1px solid var(--rule); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.7rem; }
  html[data-mode="swiss"] section.principle table.budget td { padding: 4px calc(var(--u)*2) 4px 0; }
  html[data-mode="swiss"] section.principle table.budget td + td { color: var(--accent); }

  /* Patterns (2x2 grid) + Decisions log (numbered, otherwise identical) */
  html[data-mode="swiss"] :is(section.patterns header.patterns-head, section.decisions header.decisions-head) { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--u); padding-bottom: calc(var(--u)*2); border-bottom: 1px solid var(--echo); }
  html[data-mode="swiss"] :is(section.patterns, section.decisions) h2 { font-size: var(--t-3); }
  html[data-mode="swiss"] section.decisions .lede { color: var(--muted); max-width: 56ch; font-size: 1em; line-height: 1.55; }
  html[data-mode="swiss"] :is(ul.pattern-grid, ol.decision-list) { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*4); counter-reset: dec; }
  html[data-mode="swiss"] :is(ul.pattern-grid, ol.decision-list) li { padding-top: calc(var(--u)*2); border-top: 1px solid var(--rule); counter-increment: dec; }
  html[data-mode="swiss"] ol.decision-list li::before { content: "№ 0" counter(dec); display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--echo); letter-spacing: 0.18em; margin-bottom: var(--u); }
  html[data-mode="swiss"] :is(ul.pattern-grid, ol.decision-list) h3 { font-size: var(--t-2); margin: 0 0 var(--u); }
  html[data-mode="swiss"] :is(ul.pattern-grid, ol.decision-list) p { color: var(--muted); margin: 0 0 var(--u); max-width: 48ch; line-height: 1.55; }
  html[data-mode="swiss"] ul.pattern-grid .where { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.06em; }
  html[data-mode="swiss"] section.patterns p.more { grid-column: 1 / -1; color: var(--muted); font-size: 0.95em; }

  /* Source snippets */
  html[data-mode="swiss"] figure.source { margin: calc(var(--u)*3) 0 0; }
  html[data-mode="swiss"] main figure.source { grid-column: 1 / -1; }
  html[data-mode="swiss"] figure.source figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); display: flex; justify-content: space-between; padding-bottom: var(--u); border-bottom: 1px solid var(--rule); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--u); }
  html[data-mode="swiss"] figure.source .path { color: var(--fg); }
  html[data-mode="swiss"] figure.source .raw { color: var(--accent); }
  html[data-mode="swiss"] figure.source pre { font-family: var(--mono); background: var(--bg-sunk); padding: var(--u) calc(var(--u)*2); overflow-x: auto; font-size: 0.85rem; line-height: 1.5; border-left: 2px solid var(--echo); margin: 0; }

  /* Closing line */
  html[data-mode="swiss"] section.next p { grid-column: 3 / span 8; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.4em; line-height: 1.4; color: var(--muted); padding: calc(var(--u)*3) 0; border-top: 1px solid var(--echo); border-bottom: 1px solid var(--echo); }

  @container (max-width: 800px) {
    html[data-mode="swiss"] section.claim header,
    html[data-mode="swiss"] section.claim source-snippet,
    html[data-mode="swiss"] section.principle .body,
    html[data-mode="swiss"] section.principle pre.proof,
    html[data-mode="swiss"] section.principle dl.stats,
    html[data-mode="swiss"] section.principle table.budget { grid-column: 1 / -1; }
    html[data-mode="swiss"] :is(ul.pattern-grid, ol.decision-list) { grid-template-columns: 1fr; }
  }
}

@layer features {
  html[data-mode="swiss"] mode-indicator {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 10;
    background: var(--bg-soft); padding: calc(var(--u)*1.5) calc(var(--u)*2);
    border: 1px solid var(--rule); color: var(--fg);
    font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    view-transition-name: mode-indicator;
  }
  html[data-mode="swiss"] mode-indicator button { display: block; color: inherit; font: inherit; text-align: left; }
  html[data-mode="swiss"] mode-indicator ul { list-style: none; margin: calc(var(--u)*1.5) 0 0; padding: 0; border-top: 1px solid var(--echo); padding-top: var(--u); display: grid; gap: var(--u); }
  html[data-mode="swiss"] mode-indicator [data-mode-choice] { width: 100%; }
  html[data-mode="swiss"] mode-indicator [data-mode-choice]:hover .lbl { color: var(--accent); }
  html[data-mode="swiss"] mode-indicator [aria-current="true"] .lbl { color: var(--accent); }
  html[data-mode="swiss"] mode-indicator .lbl { display: block; font-family: var(--serif); font-size: 1.1em; letter-spacing: -0.005em; text-transform: none; }
  html[data-mode="swiss"] mode-indicator .pitch { display: block; color: var(--muted); margin-top: 4px; text-transform: none; letter-spacing: 0; font-family: var(--sans); }
}