/* ====================================================================
   OP-1 Field — shared site styles
   Single source of truth for the theme tokens and the global header /
   nav / footer chrome. Canonical values come from the patch page.
   Page-specific rules live with their page (static pages: inline <style>;
   SPA: theme.css). The matching header markup is built by site-header.js.
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #15161A; --surface: #1F2127; --border: #31343C;
  --text: #E7E5E0; --muted: #8C8A86; --header-bg: #0D0E11;
  --orange: #FF4800; --blue: #3B9EEA; --purple: #8B5CF6; --green: #22C55E;

  /* scale-type palette (mappings + patch) */
  --c-percent: #5B8DEF; --c-centered: #A78BFA; --c-discrete: #34D399;
  --c-selector: #F59E0B; --c-hz: #F97316; --c-tempo: #EC4899;
  --c-inverse: #14B8A6; --c-decimal: #06B6D4;
}

body { font-family: 'JetBrains Mono','Courier New',monospace; background: var(--bg); color: var(--text); min-height: 100vh; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── HEADER ── */
header.site { background: var(--header-bg); position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 16px rgba(0,0,0,.3); }
.header-row { display: flex; align-items: center; gap: 10px; padding: 16px 32px 10px; }
.site-title { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: .1em; text-decoration: none; }
.site-title:hover { color: rgba(255,255,255,.8); }
.site-sep { font-size: 13px; font-weight: 300; color: rgba(255,255,255,.2); }
.site-sub { font-size: 12px; font-weight: 300; color: rgba(255,255,255,.42); letter-spacing: .03em; }
.header-spacer { margin-left: auto; }
.fw-tag { font-size: 9px; font-weight: 400; letter-spacing: .15em; color: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.1); padding: 3px 8px 2px; border-radius: 2px; white-space: nowrap; }
.auth-mini { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.6); font-size: 11px; }
.auth-mini img { width: 22px; height: 22px; border-radius: 50%; }
.auth-mini a, .auth-mini button { color: rgba(255,255,255,.6); font-size: 11px; background: none; border: none; text-decoration: none; }
.auth-mini a:hover, .auth-mini button:hover { color: #fff; }

.page-nav { display: flex; padding: 0 24px; border-top: 1px solid rgba(255,255,255,.06); gap: 2px; flex-wrap: wrap; }
.nav-btn { font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.32);
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; padding: 8px 12px 7px;
  text-decoration: none; display: inline-block; transition: color .15s, border-color .15s; }
.nav-btn:hover { color: rgba(255,255,255,.72); }
.nav-btn.active { color: #fff; border-bottom-color: var(--orange); }

/* ── MAIN (default centered column; patch/layout override locally) ── */
main { max-width: 1100px; margin: 0 auto; padding: 28px 32px 80px; }
h2 { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; margin: 36px 0 14px; }
.muted { color: var(--muted); font-size: 12px; }
.error { color: var(--orange); font-size: 12px; }
.ok { color: var(--green); font-size: 12px; }

/* ── SCALE-TYPE CHIPS (mappings + patch) ── */
.scale-chip { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .1em; padding: 2px 6px 1px; border-radius: 2px; white-space: nowrap; }
.chip-percent  { background: rgba(91,141,239,.18);  color: var(--c-percent); }
.chip-centered { background: rgba(167,139,250,.18); color: var(--c-centered); }
.chip-discrete { background: rgba(52,211,153,.18);  color: var(--c-discrete); }
.chip-selector { background: rgba(245,158,11,.18);  color: var(--c-selector); }
.chip-hz       { background: rgba(249,115,22,.18);  color: var(--c-hz); }
.chip-tempo    { background: rgba(236,72,153,.18);  color: var(--c-tempo); }
.chip-inverse  { background: rgba(20,184,166,.18);  color: var(--c-inverse); }
.chip-decimal  { background: rgba(6,182,212,.18);   color: var(--c-decimal); }

/* ── FOOTER ── */
footer.site { text-align: center; padding: 32px; font-size: 11px; font-weight: 300; color: var(--muted); letter-spacing: .04em; }
footer.site a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; }
footer.site a:hover { color: var(--text); border-bottom-color: var(--text); }

@media (max-width: 640px) {
  .header-row { padding: 12px 16px 8px; }
  .site-sub { display: none; }
  main { padding: 20px 16px 60px; }
}