/* ============================================================================
 * Speecon Modernist — the Create design substrate
 * ----------------------------------------------------------------------------
 * Source of truth: the user's approved Claude Design direction ("Modernist"),
 * project 17ecf3d2 · _ds/modernist-19ba620c/styles.css + readme.md.
 * Ported here into the platform's self-hosted single-file mechanism.
 *
 * This file is ADDITIVE. It does NOT replace fundamental.css: the Work / Learn /
 * Build apps (meeting, transcribe, dictation, console) keep the Overtone look on
 * fundamental.css. Only the five CREATE apps + the Create landing link THIS file
 * instead — one stylesheet, Modernist tokens, the same /<app>/design/ build path.
 *
 * Modernist in one line: flat, architectural, editorial. Light ground, ONE red,
 * a visible modular grid, strong 2px rules, ZERO corner radius, labels flush
 * left, Archivo throughout. Nothing floats, nothing is decorated.
 *
 * RULES this file keeps (mirrors fundamental.css's contract)
 *   1. ONE colour dialect. Create apps re-declare no palette. (test T4.4-style)
 *   2. No raw px in padding / margin / gap — use --s-* / --space-*.
 *   3. Nothing hardcodes a foreground on the accent fill — use --on-accent.
 *   4. Every text/control combination clears WCAG AA.
 *      (test: test_design_system.py::test_modernist_contrast_meets_aa)
 *
 * THE ACCENT SPLIT — why there are three reds, not one
 *   Modernist's brand red #ec3013 on the light ground is ~3.7:1: fine for chrome
 *   and large display type, but it FAILS AA (4.5:1) both as body text and under a
 *   white label. The readme says as much ("use --color-accent-700 for paragraph
 *   text in the accent"). So the one red splits into three roles, each AA-correct:
 *     --accent        #dd2b0f  interactive FILL (buttons, active states). White
 *                              label on it = 4.74:1. (accent-600)
 *     --accent-strong #ae1800  accent as TEXT / links on the ground = 5.9:1.
 *                              (accent-700 — exactly what the readme prescribes)
 *     --accent-bright #ec3013  the true brand red, DECORATIVE ONLY — the poster
 *                              statement / closing banner, where type is
 *                              display-grade and no small text sits on it.
 *   #dd2b0f and #ec3013 are visually the same vivid red; the split is an
 *   accessibility seam, not a look change.
 *
 * CSP / self-hosting
 *   The source imported Archivo from Google Fonts. That is removed — a strict CSP
 *   forbids any external host. Archivo ships as local woff2 via @font-face below
 *   (binaries land in the R0-font unit; until then the system-ui fallback
 *   renders, with zero external requests and zero 404s).
 * ========================================================================== */

/* ---- Archivo, self-hosted (OFL) -------------------------------------------
 * Binaries (Archivo-Regular / -SemiBold / -ExtraBold .woff2) are added under
 * packages/design/fonts/ in the R0-font unit, then these three blocks are
 * uncommented. The --font stacks below list "Archivo" first, so activation is
 * exactly: drop the woff2 + uncomment. No other change anywhere.
 *
 * @font-face { font-family:"Archivo"; font-weight:400; font-display:swap;
 *   src:url("fonts/Archivo-Regular.woff2") format("woff2"); }
 * @font-face { font-family:"Archivo"; font-weight:600; font-display:swap;
 *   src:url("fonts/Archivo-SemiBold.woff2") format("woff2"); }
 * @font-face { font-family:"Archivo"; font-weight:800; font-display:swap;
 *   src:url("fonts/Archivo-ExtraBold.woff2") format("woff2"); }
 */

:root {
  /* ---- surfaces (light ground) ------------------------------------------- */
  --bg:            #f3f2f2;   /* Modernist ground */
  --surface:       #eae9e9;   /* cards, inputs */
  --surface-2:     #f8f4f4;   /* raised / lighter panel (neutral-100) */
  --surface-3:     #d7d3d3;   /* progress track, insets (neutral-300) */
  --hover:         #e3dfdf;   /* row / control hover tint */
  --plate:         #201e1d;   /* the dark preview panel — ink as a field */

  /* ---- strokes ----------------------------------------------------------- */
  --line:          #9b9797;   /* dividers, card edges (decorative, neutral-500) */
  --line-strong:   #7d7979;   /* emphasis edges (neutral-600) */
  --line-control:  #7d7979;   /* inputs/selects — >=3:1 on bg/surface/surface-2 */

  /* ---- ink --------------------------------------------------------------- */
  --ink:           #201e1d;   /* primary */
  --ink-2:         #444141;   /* long-form body (neutral-800) */
  --ink-3:         #605d5d;   /* muted labels/hints (neutral-700) */
  --ink-4:         #676363;   /* faint — still AA (>=4.6:1 every surface) */

  /* ---- accent — the ONE red, split into three AA-correct roles ----------- */
  --accent:        #dd2b0f;   /* interactive fill; white label = 4.74:1 */
  --accent-hover:  #ae1800;   /* hover / pressed (accent-700) */
  --accent-strong: #ae1800;   /* accent as TEXT / links = 5.9:1 on ground */
  --accent-bright: #ec3013;   /* brand red — DECORATIVE / poster field only */
  --accent-2:      #ec3013;   /* mono scheme: accent-2 reads as accent */
  --accent-soft:   color-mix(in srgb, #dd2b0f 12%, transparent);
  --accent-glow:   color-mix(in srgb, #dd2b0f 18%, transparent);
  --on-accent:     #ffffff;   /* 4.74:1 on --accent, 7.2:1 on --accent-hover */

  /* ---- semantic — deep on a light ground, white glyphs ------------------- */
  --success:       #1a6b3d;   --success-soft: color-mix(in srgb, #1a6b3d 12%, transparent);
  --on-success:    #ffffff;
  --warning:       #8a5300;   --warning-soft: color-mix(in srgb, #8a5300 12%, transparent);
  --on-warning:    #ffffff;
  --danger:        #a11a10;   --danger-soft:  color-mix(in srgb, #a11a10 12%, transparent);
  --on-danger:     #ffffff;
  --info:          #1f5673;   --info-soft:    color-mix(in srgb, #1f5673 12%, transparent);

  /* ---- domain palettes (cut/editor waveform) — namespaced ---------------- */
  --data-filler:     #b3541a;
  --data-silence:    #2f6b8a;
  --data-falsestart: #6b3fa0;
  --data-manual:     #a11a10;

  /* ---- Modernist tonal ramps (source names — for tags & tints) ----------- */
  --color-neutral-100: #f8f4f4;  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;
  --color-accent-100: #fff2ef;   --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;   --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;   --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;   --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  /* ---- source-name aliases (so the ported component layer resolves) ------ */
  --color-bg: var(--bg);          --color-surface: var(--surface);
  --color-text: var(--ink);       --color-accent: var(--accent);
  --color-divider: var(--line);
  --space-1: var(--s-1);  --space-2: var(--s-2);  --space-3: var(--s-3);
  --space-4: var(--s-4);  --space-6: var(--s-6);  --space-8: var(--s-8);
  --radius-sm: 0px;  --radius-md: 0px;  --radius-lg: 0px;
  --shadow-sm: var(--e-1);  --shadow-md: var(--e-2);  --shadow-lg: var(--e-3);

  /* ---- type — Archivo, self-hosted; system-ui fallback until woff2 land -- */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--font);
  --font-heading-weight: 800;   /* Modernist's signature extra-bold display */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* nine rem steps (UI scale, matches fundamental so components stay aligned) */
  --t-2xs:     0.6875rem;  /* 11 — meta, timecodes, tier badges */
  --t-xs:      0.75rem;    /* 12 — uppercase kickers, th, field labels */
  --t-sm:      0.8125rem;  /* 13 — secondary text, hints, card body */
  --t-md:      0.9375rem;  /* 15 — Modernist body default */
  --t-lg:      1.0625rem;  /* 17 — card / long-form */
  --t-xl:      1.25rem;    /* 20 — h4 / section titles */
  --t-2xl:     1.5625rem;  /* 25 — h3 / page titles */
  --t-3xl:     2rem;       /* 32 — h2 / screen headline */
  --t-display: clamp(2.25rem, 5vw, 2.625rem); /* 42 — h1 / hero */

  /* weights — Archivo 400/600/800; headings take --font-heading-weight */
  --w-normal: 400;  --w-medium: 500;  --w-semi: 600;  --w-bold: 700;

  --lh-tight:  1.12;   /* display headings */
  --lh-snug:   1.3;
  --lh-normal: 1.55;   /* Modernist body */
  --lh-read:   1.7;

  --tr-tight:  -0.015em;  /* display headings */
  --tr-normal: 0;
  --tr-wide:   0.08em;    /* uppercase kickers / th */

  /* ---- spacing — 4px base (identical scale to Modernist --space-*) -------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;   --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-8: 32px;   --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;

  /* ---- radius — ZERO everywhere. Do not round a corner. ------------------ */
  --r-xs: 0px;  --r-sm: 0px;  --r-md: 0px;  --r-lg: 0px;  --r-xl: 0px;
  --r-full: 9999px;   /* kept only for genuine circles (radio dot, avatar ring) */

  /* ---- elevation — soft ink-tinted, used sparingly ("nothing floats") ---- */
  --e-1:    0 1px 2px   color-mix(in srgb, #2d2b2b 14%, transparent);
  --e-2:    0 3px 10px  color-mix(in srgb, #2d2b2b 16%, transparent);
  --e-3:    0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  --e-glow: var(--e-2);                  /* Modernist does not glow */
  --focus:  0 0 0 3px var(--accent-soft);

  /* ---- motion — restrained, NO overshoot (architectural, not bouncy) ----- */
  --m-snap:  80ms;  --m-fast: 130ms;  --m-base: 200ms;  --m-slow: 320ms;
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-punch: cubic-bezier(.34, 1.56, .64, 1);  /* defined for compat; unused */
  --ease-active: var(--ease-out);                 /* Modernist stays flat */

  --density: 1;
}

/* ============================================================================
 * Base elements
 * ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  font-weight: var(--w-normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum';   /* tabular numerals for counts/timecodes */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: 0 0 var(--s-2);
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
h5 { font-size: var(--t-lg); }
h6 { font-size: var(--t-sm); letter-spacing: var(--tr-wide); text-transform: uppercase; }

p { margin: 0 0 var(--s-3); }
a { color: var(--accent-strong); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
figure { margin: 0; }

.text-muted { color: var(--ink-3); }
.text-faint { color: var(--ink-4); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }

/* The uppercase, letter-spaced, flush-left kicker — a Modernist signature. */
.kicker {
  font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-strong); font-weight: var(--w-semi);
}

/* ============================================================================
 * Components — ported from the Modernist source, wired to the tokens above.
 * Radius 0, 2px rules, flush-left labels, one red.
 * ========================================================================== */

/* — rules — the strong 2px divider that does the organising — */
.hr { height: 2px; border: 0; margin: var(--s-4) 0; background: var(--line); }

/* — buttons — labels flush left, heading-weight — */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--t-md); line-height: 1.2; color: var(--ink);
  background: transparent; border: 1px solid transparent;
  padding: var(--s-2) calc(var(--s-3) * 1.2);
  border-radius: var(--r-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--color-accent-800); }
.btn-secondary { border-color: var(--line-control); color: var(--ink); }
.btn-secondary:hover { background: var(--hover); }
.btn-ghost { color: var(--accent-strong); padding-inline: var(--s-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
.btn-block { width: 100%; margin-top: var(--s-2); justify-content: flex-start; text-align: left; }

/* — forms — native elements, no script — */
.field > label {
  display: block; font-size: var(--t-xs); margin-bottom: 5px; color: var(--ink-3);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: var(--t-md); color: var(--ink); caret-color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line-control); border-radius: var(--r-md);
}
.input::placeholder { color: var(--ink-4); }
.input:hover { border-color: var(--ink-3); }
.input:focus-visible { border-color: var(--accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--t-md); }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: var(--r-full);
  border: 1.5px solid var(--line-control);
}
.radio:hover .dot { border-color: var(--accent); }
.radio input:checked + .dot {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--line-control); border-radius: var(--r-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: var(--t-sm); cursor: pointer; color: var(--ink);
}
.seg-opt + .seg-opt { border-left: 1px solid var(--line-control); }
.seg-opt:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.seg-opt:not(:has(input:checked)):hover { background: var(--hover); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* — cards — surface-filled, square, ruled not floated — */
.card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-md); background: var(--surface);
}
.card-kicker { font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--t-lg); line-height: 1.2; }
.card-body { margin: 0; font-size: var(--t-sm); color: var(--ink-2); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: var(--t-2xs); color: var(--ink-3); }
.elev-sm { box-shadow: var(--e-1); }
.elev-md { box-shadow: var(--e-2); }
.elev-lg { box-shadow: var(--e-3); }

/* — tags — tinted from the ramps (mono: accent-2 == accent) — */
.tag { display: inline-flex; align-items: center; font-size: var(--t-2xs); letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--accent); color: var(--accent-strong); }

/* — navigation — the header bar, 2px underline — */
.nav {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--line);
}
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--t-xl); margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: var(--t-md); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--accent-strong); }

/* — tables — themed header + row rules (2px header, 1px rows) — */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.table th {
  text-align: left; font-size: var(--t-2xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); padding: var(--s-2); border-bottom: 2px solid var(--line);
}
.table td { padding: var(--s-2); border-bottom: 1px solid var(--line); }
.table tbody tr:hover { background: var(--hover); }

/* — dialog — a modal at the top elevation — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center; padding: var(--s-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--e-3);
}
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--t-xl); }
.dialog-body { font-size: var(--t-md); color: var(--ink-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }

/* — imagery — every content photograph prints black and white — */
.grayscale { filter: grayscale(1) contrast(1.08); }