/* ============================================================================
   Toan Ngo PhD — Thesis Design System
   thesis-design-v1.css — the SELF-CONTAINED, vendored design layer for the
   thesis data presentations (modumatics hosting / W9 style-compliance).
   ----------------------------------------------------------------------------
   Derived verbatim from the design system's `colors_and_type.css` (palette +
   --dia-* diagram series + type + scale + spacing + .ds-* component classes).
   THE ONLY DEVIATION from that source: the web-font loading mechanism. The
   source @import's Google Fonts and @font-face's ET Book from a jsDelivr CDN;
   this file instead vendors all four faces locally (./fonts/*) with RELATIVE
   urls so the SAME bytes resolve both author-side (theme/fonts/) and host-side
   (/_shared/fonts/). This satisfies the contract's C3(e) "vendor/pin all
   libraries — no live CDN" and keeps the file byte-identical to the HOST's
   /_shared/thesis-design-v1.css (C8).

   Source of truth (provenance, unchanged):
     - publish-thesis-tex/wsu-thesis.cls   (LaTeX palette + font stack)
     - 260529-share-publish-thesis (web reader: tufte + ieee themes)
   ============================================================================ */

/* ---- Vendored web fonts (no third-party fetch) ---------------------------
   ET Book (Palatino-class serif body/headings), Lato (UI chrome / labels),
   Quicksand (geometric brand mark), JetBrains Mono (code / artefact names).
   Relative paths => resolve against this stylesheet's location in BOTH repos.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'ET Book';
  src: url('fonts/etbook-roman.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ET Book';
  src: url('fonts/etbook-italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'ET Book';
  src: url('fonts/etbook-bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/lato-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/lato-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/quicksand-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/quicksand-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ====================================================================
     1. CORE PALETTE — base accent (darkred = xcolor red!50!black)
     ==================================================================== */
  --darkred:        #800000;   /* primary brand accent — links, citations, rules */
  --darkred-ink:    #5e0000;   /* pressed / deeper maroon */
  --darkred-tint:   #f3e3e3;   /* faint maroon wash for callout backgrounds */
  --accent-soft:    #9c5a52;   /* dusty maroon — relaxed, low-tension accent text */
  --ref-ink:        #571f1b;   /* deep oxblood — inline references in running text */

  /* ====================================================================
     2. COMPLEMENTARY ACADEMIC ACCENTS
        A rich, characterful jewel-earth set with real depth — deep
        indigo-slate, pine, moss, sienna, gold — tuned to harmonise with
        maroon + parchment without slipping into pastel. 5-step ramps each.
        (var names kept for compatibility.)
     ==================================================================== */
  /* Slate — deep indigo-slate */
  --slateblue:   #3f5d7e;
  --slateblue-1: #56708e;
  --slateblue-2: #7a8ea6;
  --slateblue-3: #a3b1c2;
  --slateblue-4: #ccd4de;
  --slateblue-5: #eaeef3;

  /* Olive — moss green */
  --olivegreen:   #6e7539;
  --olivegreen-1: #828851;
  --olivegreen-2: #a3a87e;
  --olivegreen-3: #c2c5a8;
  --olivegreen-4: #dee0cd;
  --olivegreen-5: #f0f1e8;

  /* Rust — sienna / burnt earth */
  --rust:   #a85a32;
  --rust-1: #b3704c;
  --rust-2: #c7977c;
  --rust-3: #dab8a5;
  --rust-4: #ead7cb;
  --rust-5: #f6ece5;

  /* Deep teal — pine */
  --deepteal:   #2f7268;
  --deepteal-1: #4c847b;
  --deepteal-2: #7aa49d;
  --deepteal-3: #a8c3bd;
  --deepteal-4: #d0e0dc;
  --deepteal-5: #ebf3f1;

  /* Gold — ochre / academic regalia (the 5th hue, replaces flat taupe) */
  --gold:   #b0892f;
  --gold-1: #bd9a4c;
  --gold-2: #d0b47e;
  --gold-3: #e0cda8;
  --gold-4: #ece0c8;
  --gold-5: #f6f1e3;

  /* Charcoal — warm taupe-grey NEUTRAL (utility, not a showcase accent) */
  --charcoal:   #6f655a;
  --charcoal-1: #827870;
  --charcoal-2: #a39a92;
  --charcoal-3: #c2bbb5;
  --charcoal-4: #dcd7d2;
  --charcoal-5: #efebe7;

  /* ====================================================================
     3. DIAGRAMMING SYSTEM — harmonised with the academic palette.
        A categorical series for complex figures: each role carries a
        STROKE (lines/borders), a FILL (faint region wash), and a DEEP
        (emphasis / dark label). Ordered for maximum distinguishability.
        Pair with the line + node conventions documented in the kit.
     ==================================================================== */
  /* structural */
  --dia-ink:    var(--ink-2);      /* default stroke + labels */
  --dia-muted:  var(--ink-3);      /* secondary labels */
  --dia-grid:   var(--rule);       /* gridlines, faint guides */
  --dia-paper:  var(--white);      /* diagram ground */
  --dia-region: var(--paper-warm); /* neutral region fill */

  /* series 1 — maroon (primary / interface / emphasis) */
  --dia-1: #8a4b46;  --dia-1-fill: #f1e4e2;  --dia-1-deep: #6e3a36;
  /* series 2 — slate */
  --dia-2: #3f5d7e;  --dia-2-fill: #e1e7ee;  --dia-2-deep: #2f4860;
  /* series 3 — teal/pine */
  --dia-3: #2f7268;  --dia-3-fill: #dcebe7;  --dia-3-deep: #225349;
  /* series 4 — moss */
  --dia-4: #6e7539;  --dia-4-fill: #e8ead9;  --dia-4-deep: #545a2b;
  /* series 5 — sienna */
  --dia-5: #a85a32;  --dia-5-fill: #f2e2d8;  --dia-5-deep: #834428;
  /* series 6 — gold */
  --dia-6: #b0892f;  --dia-6-fill: #f1e9d2;  --dia-6-deep: #8a6a22;

  /* ====================================================================
     4. NEUTRALS & SURFACES
     ==================================================================== */
  --ink:        #322d27;   /* primary body text — warm, soft (not near-black) */
  --ink-2:      #574f45;   /* secondary text */
  --ink-3:      #8a8073;   /* muted / captions */
  --rule:       #e2dcd2;   /* hairlines, borders */
  --rule-soft:  #efeae1;
  --paper:      #fcfbf8;   /* DEFAULT ground: clean, barely-warm white */
  --paper-warm: #f4efe6;   /* raised warm panel (sparing) */
  --paper-edge: #e9e2d5;
  --parchment:  #fbf6ec;   /* INTENTIONAL warm ground — tufte reader only */
  --white:      #ffffff;

  /* IEEE theme neutrals (alternate web-reader skin) */
  --ieee-bg:     #ffffff;
  --ieee-ink:    #2b2f37;   /* softened from near-black for comfort */
  --ieee-accent: #2c4a78;   /* relaxed navy (less severe than #0b1f4d) */
  --ieee-rule:   #dde0e6;

  /* ====================================================================
     5. SEMANTIC ALIASES
     ==================================================================== */
  --fg1: var(--ink);        /* primary text */
  --fg2: var(--ink-2);      /* secondary text */
  --fg3: var(--ink-3);      /* muted text, captions */
  --bg1: var(--paper);      /* default page ground */
  --bg2: var(--paper-warm); /* raised panel */
  --accent: var(--darkred); /* the one brand accent */
  --link: var(--darkred);
  --link-visited: var(--rust);

  /* Callouts — three importance tiers. Outline is the default; FILL is
     reserved for the top tier and used sparingly. Hue can encode kind. */
  --callout-edge:    var(--rule);          /* default outline */
  --callout-accent:  var(--darkred);       /* emphasis edge + label */
  --callout-fill:    #f4e7e4;              /* filled-tier ground (sparing) */
  --callout-note:    var(--slateblue);     /* informational hue option */
  --callout-aside:   var(--charcoal-2);    /* quiet aside rule */

  /* ====================================================================
     6. TYPE FAMILIES
     ==================================================================== */
  --serif: 'ET Book', 'TeX Gyre Pagella', 'Palatino Linotype', 'Book Antiqua',
           Palatino, Georgia, 'Times New Roman', serif;
  --sans:  'Lato', 'TeX Gyre Heros', 'Helvetica Neue', Arial, sans-serif;
  --mono:  'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Geometric grotesque (rounded corners) — the brand mark: monogram + wordmark */
  --geometric: 'Quicksand', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;

  /* ====================================================================
     7. TYPE SCALE — tuned to an 11pt A4 dissertation translated to screen.
        Body line-height mirrors the .cls \linespread{1.2}.
     ==================================================================== */
  --leading-body: 1.62;
  --leading-tight: 1.28;
  --measure: 66ch;          /* comfortable reading measure */

  --fs-display: 3.25rem;    /* cover title */
  --fs-h1: 2.25rem;         /* chapter title */
  --fs-h2: 1.5rem;          /* section */
  --fs-h3: 1.18rem;         /* subsection */
  --fs-h4: 1.02rem;         /* paragraph head */
  --fs-body: 1.0625rem;     /* 17px base body */
  --fs-small: 0.9rem;       /* captions, footnotes */
  --fs-xs: 0.78rem;         /* labels, page chrome */

  /* ====================================================================
     8. SPACING, RADII, ELEVATION
        The print object is square-edged & flat; the web chrome adds the
        smallest amount of softness. Keep radii tiny, shadows quiet.
     ==================================================================== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;     /* never larger — the brand is rectilinear */
  --radius-figure: 10px;/* excalidraw cards round a touch more */

  --shadow-sm: 0 1px 2px rgba(40, 20, 10, 0.06);
  --shadow-md: 0 2px 8px rgba(40, 20, 10, 0.08);
  --shadow-lg: 0 8px 28px rgba(40, 20, 10, 0.12);
  --shadow-nav: 0 1px 0 var(--rule), 0 2px 12px rgba(40, 20, 10, 0.05);

  --hairline: 1px solid var(--rule);
  --rule-accent: 2px solid var(--darkred);
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — opt-in via .ds-prose on a container.
   These reproduce the dissertation's typographic rhythm for the web.
   ============================================================================ */
.ds-prose {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--fg1);
  font-feature-settings: "onum" 1, "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-prose h1, .ds-display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  font-variant: small-caps;      /* chapter titles use small caps (titlesec \scshape) */
  color: var(--ink);
  margin: 0 0 var(--space-5);
}

.ds-prose h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--leading-tight);
  color: var(--ink);
  margin: var(--space-7) 0 var(--space-3);
}

.ds-prose h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--ink-2);
  margin: var(--space-6) 0 var(--space-2);
}

.ds-prose h4, .ds-prose .ds-paragraph-head {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-1);
}

.ds-prose p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

.ds-prose a,
.ds-link {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: background 120ms ease, color 120ms ease;
}
.ds-prose a:hover,
.ds-link:hover { background: var(--darkred-tint); }

/* Author–year citations sit in maroon, like \citecolor */
.ds-cite { color: var(--darkred); font-variant-numeric: oldstyle-nums; white-space: nowrap; }

.ds-prose blockquote,
.ds-epigraph {
  font-style: italic;
  color: var(--ink-2);
  border-left: 2px solid var(--rule);
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  max-width: 56ch;
}

.ds-prose code, .ds-mono { font-family: var(--mono); font-size: 0.92em; }

.ds-caption {
  font-family: var(--serif);
  font-size: var(--fs-small);
  color: var(--ink-3);
  line-height: var(--leading-tight);
}
.ds-caption b, .ds-caption .label { font-weight: 700; color: var(--ink-2); font-style: normal; }
.ds-caption .text { font-style: italic; }

/* The section divider rule used throughout the dissertation body
   (\rule{0.5\linewidth}{0.5pt}) */
.ds-section-rule {
  border: 0;
  height: 0.5pt;
  width: 50%;
  margin: var(--space-6) auto;
  background: var(--charcoal-3);
}

/* Small-caps running label, e.g. header marks */
.ds-runhead {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ============================================================================
   ACADEMIC NOTATION — linguistics / cognitive-science prose conventions.
   Reusable inline + block utilities for technical writing. Use inside .ds-prose
   (or any serif context). Designed to read correctly in ET Book / Pagella.
   ============================================================================ */

/* ---- Inline ------------------------------------------------------------- */
/* Key term, bold on first definition */
.ds-term       { font-weight: 700; color: var(--ink); }
/* Theoretical construct / model name in small caps — WORKING MEMORY */
.ds-construct  { font-variant: small-caps; letter-spacing: .045em; font-weight: 600; }
/* Object-language form cited in running text — the word *cat* */
.ds-object     { font-style: italic; }
/* Foreign / Latin term — inter alia, ceteris paribus */
.ds-foreign    { font-style: italic; }
/* Grammatical-category gloss in small caps — NOM, ACC, PST, 3SG, PL */
.ds-sc         { font-variant: small-caps; letter-spacing: .05em; font-size: .94em; }
/* Single-quoted meaning / gloss — 'meaning' (quotes auto-inserted) */
.ds-meaning            { font-style: normal; color: var(--ink-2); }
.ds-meaning::before    { content: "\2018"; }
.ds-meaning::after     { content: "\2019"; }
/* Feature / attribute–value notation — [+animate], [case: nom] */
.ds-feature    { font-family: var(--mono); font-size: .84em; color: var(--ink-2);
                 white-space: nowrap; }
/* Phonemic /slashes/ and phonetic [brackets] — wrap text only; add delimiters */
.ds-phonemic   { font-family: var(--serif); }
.ds-phonemic::before { content: "/"; color: var(--ink-3); }
.ds-phonemic::after  { content: "/"; color: var(--ink-3); }
.ds-phonetic   { font-family: var(--serif); }
.ds-phonetic::before { content: "["; color: var(--ink-3); }
.ds-phonetic::after  { content: "]"; color: var(--ink-3); }
/* Grammaticality / acceptability judgment marks — * ?? ? # */
.ds-judg       { color: var(--darkred); font-weight: 700; font-feature-settings: normal; }
/* Coindexation / referential subscript — John_i … himself_i */
.ds-index      { vertical-align: sub; font-size: .68em; font-style: italic;
                 letter-spacing: .02em; margin-left: .5px; }
/* Defined-term + gloss pairing helper — Aktionsart 'lexical aspect' */
.ds-defpair    { white-space: normal; }

/* ---- Numbered example block (the hallmark of the field) ----------------- */
.ds-example {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  column-gap: .5em;
  row-gap: .3em;
  margin: 1.1em 0;
  font-family: var(--serif);
  line-height: 1.5;
  color: var(--ink);
}
.ds-example > .ds-ex-num { color: var(--ink-2); text-align: left; }
.ds-example > .ds-ex-body { max-width: 56ch; }
/* sub-examples a. b. c. */
.ds-ex-sub { display: grid; grid-template-columns: 1.5em 1fr; column-gap: .4em; row-gap: .25em; }
.ds-ex-sub > .ds-ex-letter { color: var(--ink-3); }

/* ---- Interlinear glossed text (Leipzig conventions) --------------------- */
.ds-igt { font-family: var(--serif); margin: .5em 0; line-height: 1.3; }
.ds-igt-row { display: flex; flex-wrap: wrap; gap: 0 1.15em; align-items: end; }
.ds-igt-word { display: inline-grid; justify-items: start; }
.ds-igt-word .src   { font-style: italic; }
.ds-igt-word .gl    { font-variant: small-caps; letter-spacing: .04em; font-size: .82em; color: var(--ink-2); }
.ds-igt-trans { margin-top: .35em; color: var(--ink-2); }
.ds-igt-trans::before { content: "\2018"; }
.ds-igt-trans::after  { content: "\2019"; }

/* ============================================================================
   CALLOUTS — tiered by importance. Default is an outline (or just a rule);
   a filled ground is reserved for the most important note and used sparingly.
   Optionally set a hue with --c (edge/label colour).
   ============================================================================ */
.ds-callout {
  position: relative;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  margin: 1.1rem 0;
  --c: var(--callout-accent);
}
.ds-callout b { color: var(--ink); }
.ds-callout .ds-callout-label {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Tier 1 — aside: quiet, hairline rule only, no box, no fill. */
.ds-callout--aside {
  border-left: 2px solid var(--callout-aside);
  border-radius: 0;
  padding: .15rem 0 .15rem .9rem;
  color: var(--ink-3);
  font-style: italic;
  margin: .9rem 0;
}

/* Tier 2 — note: full outline, no fill (the workhorse default). */
.ds-callout--outline {
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--rule));
}
.ds-callout--outline .ds-callout-label { color: var(--c); }

/* Tier 3 — important: filled tint + edge. Sparing use only. */
.ds-callout--filled {
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: var(--callout-fill);
}
.ds-callout--filled .ds-callout-label { color: var(--c); }

/* Floating label tab variant (sits on the top edge) */
.ds-callout--tab { margin-top: 1.3rem; }
.ds-callout--tab .ds-callout-label {
  position: absolute; top: -.6rem; left: .85rem;
  padding: .12rem .5rem; border-radius: 3px; color: #fff; background: var(--c);
}
.ds-callout--tab.ds-callout--outline { background: var(--paper); }

/* ============================================================================
   REFERENCES — colour-coded, clickable, with hover tooltips.
   No underlines, no ° glyph. Three kinds share one tooltip mechanism:
     .ds-ref--link   cross-reference / hyperlink   (maroon)
     .ds-ref--cite   author–year citation          (slate)
     .ds-ref--gloss  glossary term                 (pine)
   Add data-tip="…" for the hover tooltip. Pair with .ds-construct (small
   caps) when a stable concept is evoked verbatim.
   ============================================================================ */
.ds-ref {
  position: relative;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  color: var(--ref-ink);
  --_wash: var(--darkred-tint);
  border-radius: 3px;
  padding: 0 .5px;
  transition: background 120ms ease, color 120ms ease;
}
/* One accent colour. FORM differentiates the kind: */
.ds-ref--link  { /* cross-reference — regular case */ }
.ds-ref--cite  { white-space: nowrap; /* citation — (Author, Year) form */ }
.ds-ref--gloss { font-variant: small-caps; letter-spacing: .03em; /* defined concept */ }
.ds-ref:hover  { background: var(--_wash); }

/* hover tooltip */
.ds-ref[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 9px);
  width: max-content; min-width: 170px; max-width: 290px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-style: normal; font-weight: 400;
  font-size: .72rem; line-height: 1.45; letter-spacing: .003em;
  padding: .55rem .7rem; border-radius: 7px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease; z-index: 30;
}
.ds-ref[data-tip]::before {
  content: ""; position: absolute; left: 13px; bottom: calc(100% + 4px);
  border: 5px solid transparent; border-top-color: var(--ink);
  opacity: 0; transition: opacity 140ms ease; z-index: 30;
}
.ds-ref[data-tip]:hover::after  { opacity: 1; transform: translateY(0); }
.ds-ref[data-tip]:hover::before { opacity: 1; }
/* tooltip flips below the word for refs on the first line */
.ds-ref--below[data-tip]::after { top: calc(100% + 9px); bottom: auto; transform: translateY(-4px); }
.ds-ref--below[data-tip]::before { top: calc(100% + 4px); bottom: auto;
  border-top-color: transparent; border-bottom-color: var(--ink); }
.ds-ref--below[data-tip]:hover::after { transform: translateY(0); }

/* ============================================================================
   PRESENTATION CHROME — W9 additions (not in colors_and_type.css).
   Minimal, token-only helpers so a data presentation's frame (page ground,
   header band, control bar, figure card, buttons, selects) reads in the
   thesis language without each presentation re-inventing it. Purely additive;
   nothing here overrides the .ds-* classes above.
   ============================================================================ */
.tn-page {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tn-wrap { max-width: 70rem; margin: 0 auto; padding: var(--space-6) var(--space-5); }

.tn-header { margin: 0 0 var(--space-5); }
.tn-eyebrow {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--darkred); margin: 0 0 var(--space-2);
}
.tn-title {
  font-family: var(--serif); font-weight: 700; font-variant: small-caps;
  letter-spacing: .01em; font-size: var(--fs-h1); line-height: var(--leading-tight);
  color: var(--ink); margin: 0 0 var(--space-2);
}
.tn-subtitle {
  font-family: var(--serif); font-style: italic; font-size: var(--fs-h3);
  color: var(--ink-2); margin: 0 0 var(--space-3); max-width: var(--measure);
}

/* Control bar / toolbar */
.tn-controls {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  align-items: center; padding: var(--space-3) var(--space-4);
  background: var(--paper); border: var(--hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); margin: 0 0 var(--space-5);
}
.tn-control { display: inline-flex; flex-direction: column; gap: var(--space-1); }
.tn-control > label {
  font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Buttons */
.tn-btn {
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 700;
  color: var(--ink); background: var(--paper); border: var(--hairline);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-4);
  cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tn-btn:hover { background: var(--darkred-tint); border-color: var(--darkred); }
.tn-btn:focus-visible { outline: 2px solid var(--darkred); outline-offset: 2px; }
.tn-btn[aria-pressed="true"], .tn-btn.is-active {
  background: var(--darkred); color: #fff; border-color: var(--darkred);
}

/* Selects / inputs */
.tn-select, .tn-input {
  font-family: var(--sans); font-size: var(--fs-small); color: var(--ink);
  background: var(--white); border: var(--hairline); border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
}
.tn-select:focus-visible, .tn-input:focus-visible { outline: 2px solid var(--darkred); outline-offset: 1px; }

/* Figure card — the canvas/chart/graph container */
.tn-figure {
  background: var(--white); border: var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-4); margin: 0 0 var(--space-5);
}
.tn-figure > figcaption, .tn-figure .tn-figcaption {
  font-family: var(--serif); font-size: var(--fs-small); color: var(--ink-3);
  line-height: var(--leading-tight); margin-top: var(--space-3);
}

/* A simple legend swatch list driven by --dia-* */
.tn-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-2); }
.tn-legend .sw { display: inline-block; width: .8em; height: .8em; border-radius: 2px;
  margin-right: .4em; vertical-align: baseline; }

/* Global focus-visible default so every interactive control is keyboard-reachable */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--darkred); outline-offset: 2px;
}

/* Honour reduced-motion preference (the system is "minimal, functional" motion) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}