/*
 * terminal/tokens.css — monospace, dark, warm. Cyan headers, yellow accents.
 * Scoped under html[data-mode="terminal"]. Inherits palette from base.css.
 * Non-goals: no shared styling; no cross-mode rules.
 */

@layer modes {
  html[data-mode="terminal"] { font-family: var(--mono); line-height: 1.55; --accent: var(--yellow); }
  html[data-mode="terminal"] body { max-width: 92ch; margin: 0 auto; padding: calc(var(--u)*4) calc(var(--u)*3); }

  html[data-mode="terminal"] a { color: var(--yellow); text-decoration: none; border-bottom: 1px dashed var(--muted); }
  html[data-mode="terminal"] a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

  html[data-mode="terminal"] h1 { color: var(--cyan); font-size: var(--t-2); line-height: 1.1; margin: 0 0 var(--u); }
  html[data-mode="terminal"] h1::before { content: "■ "; color: var(--yellow); }
  html[data-mode="terminal"] h2 { color: var(--yellow); font-size: 1em; margin: calc(var(--u)*3) 0 var(--u); }
  html[data-mode="terminal"] h2::before { content: "› "; color: var(--yellow); }
  html[data-mode="terminal"] h3 { color: var(--fg); font-size: 1em; margin-top: calc(var(--u)*2); }
  html[data-mode="terminal"] strong { color: var(--yellow); }
  html[data-mode="terminal"] em { color: var(--orange); font-style: normal; }
  html[data-mode="terminal"] code { color: var(--green); }
  html[data-mode="terminal"] pre { background: var(--bg-sunk); padding: var(--u) calc(var(--u)*2); border-left: 3px solid var(--cyan); color: var(--fg); margin: calc(var(--u)*2) 0; overflow-x: auto; }
  html[data-mode="terminal"] pre code { color: inherit; }
  html[data-mode="terminal"] .lede { color: color-mix(in oklab, var(--fg) 80%, var(--muted)); }

  html[data-mode="terminal"] site-header { display: block; margin-bottom: calc(var(--u)*3); color: var(--muted); }
  html[data-mode="terminal"] site-header .prompt { color: var(--cyan); }
  html[data-mode="terminal"] site-header .prompt::before { content: "linh@portfolio:~$ "; color: var(--yellow); }
  html[data-mode="terminal"] site-header .prompt::after { content: " ▎"; color: var(--cyan); animation: cursor-blink 1.1s step-end infinite; }
  html[data-mode="terminal"] site-header nav { display: inline; }
  html[data-mode="terminal"] site-header nav a { margin-right: 2ch; border: none; color: var(--cyan); }
  html[data-mode="terminal"] site-header nav a:hover { color: var(--yellow); }
  html[data-mode="terminal"] site-header nav a[aria-current="page"] { color: var(--yellow); }

  html[data-mode="terminal"] site-footer { display: block; margin-top: calc(var(--u)*5); color: var(--muted); font-size: 0.9em; border-top: 1px dotted var(--rule); padding-top: var(--u); }
  html[data-mode="terminal"] site-footer a { border: none; }

  html[data-mode="terminal"] figure.source { margin: calc(var(--u)*2) 0; }
  html[data-mode="terminal"] figure.source figcaption { color: var(--muted); font-size: 0.85em; display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted var(--rule); }
  html[data-mode="terminal"] figure.source .path { color: var(--cyan); }
  html[data-mode="terminal"] figure.source .raw { color: var(--yellow); border: none; }
  html[data-mode="terminal"] figure.source pre { margin-top: 0; }
  html[data-mode="terminal"] kbd { font-family: var(--mono); background: var(--bg-sunk); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 2px; font-size: 0.85em; color: var(--yellow); }

  html[data-mode="terminal"] main > section { display: block; }
  html[data-mode="terminal"] main > section + section { margin-top: calc(var(--u)*4); padding-top: calc(var(--u)*2); border-top: 1px dotted var(--rule); }
  html[data-mode="terminal"] section.hero .ident { color: var(--muted); margin-bottom: var(--u); }
  html[data-mode="terminal"] section.hero .ident::before { content: "# whoami: "; color: var(--yellow); }
  html[data-mode="terminal"] section.hero .ident b { color: var(--cyan); font-weight: normal; }
  html[data-mode="terminal"] section.hero .meta { display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u)*2); margin-top: calc(var(--u)*2); padding-left: 2ch; color: var(--muted); font-size: 0.85em; }
  html[data-mode="terminal"] section.hero .meta::before { content: "# stats:"; color: var(--yellow); }
  html[data-mode="terminal"] section.hero .domains::before { content: "# domains:"; color: var(--yellow); }
  html[data-mode="terminal"] section.hero .meta b { color: var(--cyan); font-weight: normal; }
  html[data-mode="terminal"] section.claim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: calc(var(--u)*3); align-items: start; }
  html[data-mode="terminal"] section.claim header { display: flex; flex-direction: column; gap: var(--u); }
  html[data-mode="terminal"] section.claim .num { color: var(--yellow); font-size: 0.85em; }
  html[data-mode="terminal"] section.claim .num::before { content: "┌─ "; }
  html[data-mode="terminal"] section.claim .num::after { content: " ─────"; color: var(--rule); }
  html[data-mode="terminal"] section.claim h3 { color: var(--cyan); font-size: var(--t-2); margin: 0; }
  html[data-mode="terminal"] section.claim h3::before { content: "│ "; color: var(--rule); }
  html[data-mode="terminal"] section.claim .achieves { color: var(--fg); margin: 0; padding-left: 2ch; max-width: 56ch; }
  @container (max-width: 720px) { html[data-mode="terminal"] section.claim { grid-template-columns: 1fr; } }
  html[data-mode="terminal"] section.next p { color: var(--muted); padding-left: 2ch; }
  html[data-mode="terminal"] section.next p::before { content: "$ "; color: var(--cyan); }

  html[data-mode="terminal"] section.principle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--u)*3); align-items: start; }
  html[data-mode="terminal"] section.principle header { grid-column: 1 / -1; display: block; margin-bottom: var(--u); }
  html[data-mode="terminal"] section.principle .num { color: var(--yellow); font-size: 0.85em; }
  html[data-mode="terminal"] section.principle .num::after { content: " ─ "; color: var(--rule); }
  html[data-mode="terminal"] section.principle h2 { display: inline; color: var(--cyan); font-size: var(--t-2); margin: 0; }
  html[data-mode="terminal"] section.principle h2::before { content: "■ "; color: var(--yellow); }
  html[data-mode="terminal"] section.principle .body { grid-column: 1; }
  html[data-mode="terminal"] section.principle .body p { color: var(--fg); padding-left: 2ch; margin: var(--u) 0; }
  html[data-mode="terminal"] section.principle .area { color: var(--muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.15em; }
  html[data-mode="terminal"] section.principle .area::before { content: "/ "; color: var(--rule); }
  html[data-mode="terminal"] section.principle :is(pre.proof, dl.stats, table.budget) { grid-column: 2; background: var(--bg-sunk); padding: var(--u) calc(var(--u)*2); border-left: 3px solid var(--green); color: var(--green); margin: 0; }
  html[data-mode="terminal"] section.principle pre.proof { white-space: pre-wrap; }
  /* Auto-alternate every even .principle: swap columns + flip the border. */
  html[data-mode="terminal"] section.principle:nth-child(even of .principle) .body { grid-column: 2; grid-row: 2; }
  html[data-mode="terminal"] section.principle:nth-child(even of .principle) :is(pre.proof, dl.stats, table.budget) { grid-column: 1; grid-row: 2; border-left: 0; border-right: 3px solid var(--green); }
  @container (max-width: 720px) { html[data-mode="terminal"] section.principle { grid-template-columns: 1fr; } html[data-mode="terminal"] section.principle :is(.body, pre.proof, dl.stats, table.budget) { grid-column: 1; grid-row: auto; } }
  html[data-mode="terminal"] section.principle dl.stats { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--u)*2); row-gap: 2px; }
  html[data-mode="terminal"] section.principle dl.stats dt { color: var(--muted); }
  html[data-mode="terminal"] section.principle dl.stats dd { margin: 0; }
  html[data-mode="terminal"] section.principle table.budget { border-collapse: collapse; }
  html[data-mode="terminal"] section.principle table.budget th { text-align: left; color: var(--muted); font-weight: 400; padding-right: calc(var(--u)*2); }
  html[data-mode="terminal"] section.principle table.budget td { padding: 2px calc(var(--u)*2) 2px 0; }
  html[data-mode="terminal"] :is(section.patterns header.patterns-head, section.decisions header.decisions-head) { display: block; margin-top: calc(var(--u)*4); padding-top: calc(var(--u)*2); border-top: 1px dotted var(--rule); }
  html[data-mode="terminal"] section.patterns .num { color: var(--yellow); font-size: 0.85em; }
  html[data-mode="terminal"] :is(section.patterns, section.decisions) h2 { color: var(--cyan); display: inline-block; margin: 0 0 0 1ch; }
  html[data-mode="terminal"] :is(section.patterns, section.decisions) h2::before { content: "› "; color: var(--yellow); }
  html[data-mode="terminal"] section.decisions .lede { color: color-mix(in oklab, var(--fg) 80%, var(--muted)); padding-left: 2ch; margin: var(--u) 0; }
  html[data-mode="terminal"] :is(ul.pattern-grid, ol.decision-list) { list-style: none; padding: 0; margin: var(--u) 0; counter-reset: dec; }
  html[data-mode="terminal"] :is(ul.pattern-grid, ol.decision-list) li { padding: var(--u) 0; border-bottom: 1px dotted var(--rule); counter-increment: dec; }
  html[data-mode="terminal"] :is(ul.pattern-grid, ol.decision-list) h3 { color: var(--yellow); font-size: var(--t-2); margin: 0; }
  html[data-mode="terminal"] ul.pattern-grid h3::before { content: "■ "; color: var(--cyan); }
  html[data-mode="terminal"] ol.decision-list h3::before { content: "[0" counter(dec) "] "; color: var(--cyan); }
  html[data-mode="terminal"] :is(ul.pattern-grid, ol.decision-list) p { color: var(--fg); padding-left: 2ch; max-width: 84ch; margin: var(--u) 0 4px; }
  html[data-mode="terminal"] ul.pattern-grid .where { color: var(--purple); padding-left: 2ch; font-size: 0.85em; }
}

@keyframes cursor-blink { 50% { opacity: 0; } }

@layer features {
  html[data-mode="terminal"] mode-indicator {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 10;
    font-family: var(--mono); font-size: 0.85rem;
    background: var(--bg-sunk); border: 1px solid var(--rule);
    color: var(--cyan); padding: var(--u) calc(var(--u)*1.5);
    view-transition-name: mode-indicator;
  }
  html[data-mode="terminal"] mode-indicator button { display: block; color: inherit; font: inherit; text-align: left; }
  html[data-mode="terminal"] mode-indicator ul { list-style: none; margin: var(--u) 0 0; padding: 0; border-top: 1px dotted var(--rule); padding-top: var(--u); display: grid; gap: 4px; }
  html[data-mode="terminal"] mode-indicator [data-mode-choice] { width: 100%; padding: 4px 0; }
  html[data-mode="terminal"] mode-indicator [data-mode-choice]:hover { color: var(--yellow); }
  html[data-mode="terminal"] mode-indicator [aria-current="true"] { color: var(--yellow); }
  html[data-mode="terminal"] mode-indicator .lbl { display: inline-block; min-width: 12ch; }
  html[data-mode="terminal"] mode-indicator .pitch { color: var(--muted); }
}