/* ============================================================
   ThatWebsite UI — zero-dependency HTML + CSS component library
   Link this one file and use the semantic tags / classes below.
   No JS, no build, no framework. (Dialog open/close and any
   toast dismissal are the only things that need a line of your
   own JS — everything visual is pure CSS.)
   ============================================================ */

/* ---------- Fonts ---------- */
/* ThatWebsite — Fonts
   Self-hosted, supplied directly by the user (thatwebsite.xyz/fonts/):
   Libre Baskerville (serif, display/headings), Work Sans (sans-serif,
   body/UI), Office Code Pro incl. the "D" (display) cut (monospace, code). */

/* ---- Libre Baskerville (serif) ---- */
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---- Work Sans (sans-serif) ---- */
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-ThinItalic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-ExtraLightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-SemiBoldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-ExtraBoldItalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-BlackItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

/* ---- Office Code Pro (monospace) ---- */
@font-face { font-family: 'Office Code Pro'; src: url('fonts/officecodepro-light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Office Code Pro'; src: url('fonts/officecodepro-lightitalic-webfont.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Office Code Pro'; src: url('fonts/officecodepro-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Office Code Pro'; src: url('fonts/officecodepro-regularitalic-webfont.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Office Code Pro'; src: url('fonts/officecodepro-medium-webfont.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Office Code Pro'; src: url('fonts/officecodepro-mediumitalic-webfont.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Office Code Pro'; src: url('fonts/officecodepro-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Office Code Pro'; src: url('fonts/officecodepro-bolditalic-webfont.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; }

/* ---- Office Code Pro D (display cut — wider punctuation/box-drawing set) ---- */
@font-face { font-family: 'Office Code Pro D'; src: url('fonts/officecodeprod-light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Office Code Pro D'; src: url('fonts/officecodeprod-lightitalic-webfont.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Office Code Pro D'; src: url('fonts/officecodeprod-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Office Code Pro D'; src: url('fonts/OfficeCodeProD-RegularItalic-webfont.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Office Code Pro D'; src: url('fonts/OfficeCodeProD-Bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Office Code Pro D'; src: url('fonts/OfficeCodeProD-BoldItalic-webfont.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- Design tokens ---------- */
:root {
  --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Office Code Pro', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
:root {
  /* ---- Base palette: teal (primary) ---- */
  --teal-50:  #eaf5f7;
  --teal-100: #d0e9ed;
  --teal-200: #a3d3db;
  --teal-300: #71b9c6;
  --teal-400: #459fb0;
  --teal-500: #21839a;   /* logo glyph color, sampled */
  --teal-600: #1c6f83;
  --teal-700: #175a6a;
  --teal-800: #124451;
  --teal-900: #0b2c34;

  /* ---- Base palette: maroon (secondary) ---- */
  --maroon-50:  #f8ebec;
  --maroon-100: #efd2d5;
  --maroon-200: #dea5ab;
  --maroon-300: #c97981;
  --maroon-400: #b6575f;
  --maroon-500: #9f414b;  /* logo base color, sampled */
  --maroon-600: #863640;
  --maroon-700: #6b2b33;
  --maroon-800: #501f26;
  --maroon-900: #35141a;

  /* ---- Base palette: blush (warm neutral / background tint) ---- */
  --blush-50:  #fff1f2;   /* logo background color, sampled */
  --blush-100: #fbe4e5;
  --blush-200: #f3cdd0;

  /* ---- Base palette: warm neutrals (text, surfaces, borders) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf8f8;
  --neutral-100: #f2eeee;
  --neutral-200: #e4dedd;
  --neutral-300: #cec5c4;
  --neutral-400: #a89d9c;
  --neutral-500: #7d7372;
  --neutral-600: #5c5352;
  --neutral-700: #423b3a;
  --neutral-800: #2b2625;
  --neutral-900: #1a1616;

  /* ---- Semantic: text ---- */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-400);
  --text-on-brand:  #ffffff;
  --text-link:      var(--teal-600);
  --text-link-hover: var(--teal-700);

  /* ---- Semantic: surfaces ---- */
  --surface-page:    #ffffff;
  --surface-tint:    var(--blush-50);
  --surface-card:    #ffffff;
  --surface-sunken:  var(--neutral-50);
  --surface-inverse: var(--neutral-900);

  /* ---- Semantic: borders ---- */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-700);

  /* ---- Semantic: brand + interactive ---- */
  --brand-primary:        var(--teal-500);
  --brand-primary-hover:  var(--teal-600);
  --brand-primary-active: var(--teal-700);
  --brand-secondary:        var(--maroon-500);
  --brand-secondary-hover:  var(--maroon-600);
  --brand-secondary-active: var(--maroon-700);

  /* ---- Semantic: feedback (mapped onto the same warm palette) ---- */
  --status-success: #2f7a4f;
  --status-warning: #b5791c;
  --status-danger:  var(--maroon-600);
  --status-info:    var(--teal-600);

  /* ---- Focus ---- */
  --focus-ring: var(--teal-500);
}
:root {
  /* Sizes — display & headings: sans (default) */
  --text-display-lg: 700 56px/1.08 var(--font-sans);
  --text-display:    700 40px/1.12 var(--font-sans);
  --text-h1:         700 32px/1.18 var(--font-sans);
  --text-h2:         600 24px/1.25 var(--font-sans);
  --text-h3:         600 19px/1.3  var(--font-sans);

  /* Sizes — body & UI: sans */
  --text-body-lg:    400 18px/1.55 var(--font-sans);
  --text-body:       400 16px/1.55 var(--font-sans);
  --text-body-sm:    400 14px/1.5  var(--font-sans);
  --text-caption:    500 12px/1.4  var(--font-sans);

  /* Sizes — code & data: mono */
  --text-mono:       400 14px/1.5  var(--font-mono);

  /* Sizes — editorial (serif): opt in explicitly for long-form reading
     content only (blog post titles/body) — never for app UI */
  --text-editorial-title: 700 40px/1.15 var(--font-serif);
  --text-editorial-body:  400 18px/1.6  var(--font-serif);

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-h: -0.01em;
  --tracking-body: 0em;
  --tracking-caption: 0.02em;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
}
:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(26, 22, 22, 0.06);
  --shadow-md: 0 2px 8px rgba(26, 22, 22, 0.08);
  --shadow-lg: 0 8px 24px rgba(26, 22, 22, 0.10);
  --shadow-focus: 0 0 0 3px rgba(33, 131, 154, 0.30);
}
:root {
  --duration-fast: 100ms; /* @kind other */
  --duration-base: 150ms; /* @kind other */
  --duration-slow: 220ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
}


/* ---------- Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography (semantic tags) ---------- */
h1 { font: var(--text-h1); letter-spacing: var(--tracking-h); margin: 0 0 var(--space-4); }
h2 { font: var(--text-h2); letter-spacing: var(--tracking-h); margin: 0 0 var(--space-3); }
h3 { font: var(--text-h3); margin: 0 0 var(--space-3); }
p  { margin: 0 0 var(--space-4); }
small { font: var(--text-caption); color: var(--text-secondary); }
code, kbd, samp, pre { font: var(--text-mono); }
code { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 1px 5px; }
pre { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); overflow: auto; }
pre code { background: none; border: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
.tw-display-lg { font: var(--text-display-lg); letter-spacing: var(--tracking-display); }
.tw-display    { font: var(--text-display); letter-spacing: var(--tracking-display); }
.tw-lead       { font: var(--text-body-lg); color: var(--text-secondary); }
.tw-muted      { color: var(--text-secondary); }
/* Editorial (serif) — opt in for long-form reading content only */
.tw-editorial-title { font: var(--text-editorial-title); letter-spacing: var(--tracking-h); }
.tw-editorial       { font: var(--text-editorial-body); }

/* ---------- Button ---------- */
/* Bare <button> and .tw-btn both work. Variants via modifier classes. */
button, .tw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 600 14px var(--font-sans);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
button:hover, .tw-btn:hover { background: var(--surface-sunken); }
button:focus-visible, .tw-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
button:not(:disabled):active, .tw-btn:not(:disabled):active {
  transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(26, 22, 22, 0.18);
}
button:disabled, .tw-btn:disabled, .tw-btn[aria-disabled="true"] {
  background: var(--neutral-100); color: var(--text-tertiary);
  border-color: var(--border-subtle); cursor: not-allowed; transform: none; box-shadow: none;
}
.tw-btn--primary { background: var(--brand-primary); border-color: transparent; color: #fff; }
.tw-btn--primary:hover { background: var(--brand-primary-hover); }
.tw-btn--danger  { background: var(--brand-secondary); border-color: transparent; color: #fff; }
.tw-btn--danger:hover { background: var(--brand-secondary-hover); }
.tw-btn--ghost   { background: transparent; border-color: transparent; }
.tw-btn--ghost:hover { background: var(--surface-sunken); }
.tw-btn--sm { padding: 6px 12px; font-size: 13px; gap: 6px; }
.tw-btn--lg { padding: 12px 20px; font-size: 15px; }

/* ---------- Badge ---------- */
.tw-badge {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: var(--radius-full);
  font: 600 12px var(--font-sans); letter-spacing: var(--tracking-caption);
  background: var(--neutral-100); color: var(--text-secondary);
}
.tw-badge--brand   { background: var(--teal-50);   color: var(--teal-700); }
.tw-badge--accent  { background: var(--maroon-50);  color: var(--maroon-700); }
.tw-badge--success { background: #e7f3ec;           color: var(--status-success); }
.tw-badge--warning { background: #faf1e2;           color: var(--status-warning); }
.tw-badge--danger  { background: var(--maroon-50);  color: var(--status-danger); }

/* ---------- Tag ---------- */
.tw-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px;
  border-radius: var(--radius-sm); font: 500 13px var(--font-sans);
  color: var(--text-primary); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}
.tw-tag button, .tw-tag .tw-tag__x {
  border: 0; background: transparent; color: var(--text-tertiary);
  cursor: pointer; font: 600 13px var(--font-sans); line-height: 1; padding: 0;
}
.tw-tag button:hover { background: transparent; color: var(--text-secondary); }

/* ---------- Card ---------- */
.tw-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
}

/* ---------- Form fields ---------- */
label { font: 600 13px var(--font-sans); color: var(--text-primary); }
.tw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="tel"], input[type="number"], input[type="date"],
textarea, select, .tw-input {
  font: var(--text-body); color: var(--text-primary);
  padding: 9px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--surface-card);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
textarea { min-height: 88px; resize: vertical; }
input:focus, textarea:focus, select:focus, .tw-input:focus {
  border-color: var(--focus-ring); box-shadow: var(--shadow-focus);
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--neutral-50); color: var(--text-tertiary); cursor: not-allowed;
}
.tw-input--error, input.tw-input--error { border-color: var(--status-danger); }
.tw-field__error { font: var(--text-caption); color: var(--status-danger); }

/* Checkbox + radio (native, brand-tinted) */
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--brand-primary); margin: 0;
}
.tw-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: var(--text-body-sm); }
.tw-check input:disabled + span, .tw-check:has(input:disabled) { color: var(--text-tertiary); cursor: not-allowed; }

/* ---------- Switch (pure CSS, checkbox-driven) ---------- */
.tw-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--text-body-sm); }
.tw-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tw-switch__track {
  position: relative; width: 36px; height: 20px; flex-shrink: 0;
  border-radius: var(--radius-full); background: var(--neutral-300);
  transition: background var(--duration-base) var(--ease-standard);
}
.tw-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: left var(--duration-base) var(--ease-standard);
}
.tw-switch input:checked + .tw-switch__track { background: var(--brand-primary); }
.tw-switch input:checked + .tw-switch__track::after { left: 18px; }
.tw-switch input:focus-visible + .tw-switch__track { box-shadow: var(--shadow-focus); }

/* ---------- Tabs (pure CSS, radio-driven) ---------- */
/* Pattern: a .tw-tabs wrapper holding <input type=radio name=..> + <label> pairs,
   then matching .tw-tabs__panel blocks. See README for full markup. */
.tw-tabs { display: block; }
.tw-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tw-tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); }
.tw-tabs__list > label {
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--text-secondary); font: 500 14px var(--font-sans);
  padding: 10px 14px; cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.tw-tabs__list > label:hover { color: var(--text-primary); }
.tw-tabs__panel { display: none; padding-top: var(--space-4); }

/* ---------- Dialog (native <dialog>) ---------- */
dialog, .tw-dialog {
  border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-6); width: 320px; max-width: 90vw;
  background: var(--surface-card); color: var(--text-primary);
}
dialog::backdrop, .tw-dialog::backdrop { background: rgba(26, 22, 22, 0.35); }
.tw-dialog__title { font: var(--text-h3); margin-bottom: var(--space-3); }
.tw-dialog__body  { font: var(--text-body-sm); color: var(--text-secondary); margin-bottom: var(--space-5); }
.tw-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Toast ---------- */
.tw-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-inverse); color: #fff;
  border-radius: var(--radius-md); padding: 12px 14px;
  box-shadow: var(--shadow-md); border-left: 3px solid var(--status-info);
}
.tw-toast--success { border-left-color: var(--status-success); }
.tw-toast--warning { border-left-color: var(--status-warning); }
.tw-toast--danger  { border-left-color: var(--status-danger); }
.tw-toast__msg { font: var(--text-body-sm); flex: 1; }
.tw-toast__x { background: transparent; border: 0; color: var(--neutral-300); cursor: pointer; font: 600 14px var(--font-sans); }
.tw-toast__x:hover { background: transparent; color: #fff; }

/* ---------- Tooltip (pure CSS, data-attribute driven) ---------- */
.tw-tooltip { position: relative; display: inline-flex; }
.tw-tooltip::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
  background: var(--surface-inverse); color: #fff; font: var(--text-caption);
  padding: 5px 9px; border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.tw-tooltip:hover::after, .tw-tooltip:focus-within::after { opacity: 1; }

/* ---------- Layout helpers (minimal) ---------- */
.tw-row   { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.tw-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.tw-container { max-width: 960px; margin: 0 auto; padding: var(--space-16) var(--space-6); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}