/* sf-ui — Starting Frame's one design system. Tokens + parts. v0.6.1 · 2026-10-08
   One file, loaded by every app and the site. No library. Native <dialog> and the
   Popover API underneath (sf-ui.js adds confirm/notice/prompt, toast, busy, slider,
   pop-over placement). Brand kept: cream · ink · teal · copper · DM Sans · Space Mono ·
   the trailing dot. The light sits upper-left, always.

   Built against 01_Hub/02_Strategy/TELLS-AUDIT-2026-10-08.html and ENTERPRISE-LOOK-2026-10-07.html.
   v0.2 = the 10/08 critic pass applied: prefixed modifiers (sf-btn--primary), tint + spacing
   classes, two-ring focus, hover behind (hover:hover), dark-chrome button + toast tokens,
   AA text contrast, 3:1 control borders, self-hosted type, one gradient recipe.

   SCOPE: put class="sf" on <body> (or any root). Dark chrome: add class="sf-dark" or
   data-chrome="dark" to the same element or any subtree.
   NAMING: parts are .sf-<part>; modifiers are .sf-<part>--<mod>; states use aria
   (aria-selected, aria-pressed, aria-busy, aria-invalid, disabled); utilities are .sf-u-*.
   RULES: no inline styles in pages · no native-looking control where a part exists ·
   every action visible · 16-px field text on touch (14 on a mouse) · 44-px targets on touch. */

/* ───────────────────────────── 0. Type, self-hosted ───────────────────────────── */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(fonts/dmsans-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(fonts/dmsans-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/spacemono-i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/spacemono-i7dMIFZifjKcF5UAWdDRaPpZUFuaHi6WZ3S_Yg.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/spacemono-i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/spacemono-i7dPIFZifjKcF5UAWdDRYE98RXi4EwSsbg.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ───────────────────────────── 1. Tokens ───────────────────────────── */
:root {
  /* palette roles */
  --cream:  #f5f0e6;
  --ink:    #18211f;
  --teal:   #2a7068;
  --copper: #c46828;
  --error:  #a83232;

  /* one colour in shades, never a new colour */
  --copper-hover:   #b45f25;
  --copper-deep:    #a8551f;   /* the primary button's fill: cream text reads at 4.6:1 (plain copper is 3.45) */
  --copper-pressed: #9d5320;
  --teal-hover:     #26675f;
  --teal-pressed:   #225a53;
  --ink-hover:      #253230;
  --ink-pressed:    #0f1613;
  --error-hover:    #963030;
  --error-pressed:  #872828;

  /* ink as a scale: text at AA, decoration below it */
  --fg:       var(--ink);
  --fg-2:     rgba(24, 33, 31, 0.68);   /* secondary text · 4.9:1 on cream */
  --fg-3:     rgba(24, 33, 31, 0.58);   /* hints, kickers, table heads · 4.5:1 on cream */
  --fg-dec:   rgba(24, 33, 31, 0.45);   /* decoration only, never text */
  --border:   rgba(24, 33, 31, 0.42);   /* control boundaries · 3:1 */
  --hairline-strong: rgba(24, 33, 31, 0.28);   /* rules under labels */
  --hairline: rgba(24, 33, 31, 0.12);   /* dividers */

  /* surfaces as a scale */
  --bg:        var(--cream);
  --surface-1: #fdfbf6;   /* raised: cards, menus, dialogs, fields */
  --surface-2: #e8e2d4;   /* sunken: wells, tracks */
  --on-accent: var(--cream);
  --btn-default-bg: var(--ink); --btn-default-fg: var(--cream); --btn-default-hover: var(--ink-hover); --btn-default-pressed: var(--ink-pressed);
  --toast-bg: var(--ink); --toast-fg: var(--cream);

  /* status */
  --ok:   var(--teal);
  --warn: var(--copper);
  --live: var(--copper);   /* the dot is the record button */

  /* eight label tints from teal · copper · ink, for type dots, faces, chips (decorative) */
  --tint-1: #2a7068; --tint-2: #6ea59d; --tint-3: #1d4f49; --tint-4: #c46828;
  --tint-5: #df9359; --tint-6: #94501f; --tint-7: #6a7672; --tint-8: #b9a884;

  /* spacing: 8-px scale, 4 for hairline gaps */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px;

  /* one radius; the pill is the one named exception (chips, badges) */
  --radius: 6px;         /* one radius, very subtle (Brian 10/08: "much less bevel") */
  --radius-pill: 999px;
  --radius-lg: 6px;      /* large surfaces take the same radius; kept as a token so it can diverge later */

  /* shadows: light upper-left, so shadows fall down and a little right */
  --shadow-rule: 0 1px 0 rgba(24, 33, 31, 0.10);
  --shadow-1: 1px 2px 0 rgba(24, 33, 31, 0.06), 0 0 0 1px var(--hairline);
  --shadow-2: 4px 8px 20px -6px rgba(24, 33, 31, 0.22), 0 0 0 1px var(--hairline);
  --shadow-3: 12px 24px 48px -12px rgba(24, 33, 31, 0.35);
  --shadow-thumb: 1px 2px 4px rgba(24, 33, 31, 0.30);

  /* type */
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --t-1: 12px; --t-2: 14px; --t-3: 16px; --t-4: 20px; --t-5: 28px; --t-6: 36px;

  /* focus: two rings, so it reads on every fill (cream gap, then copper) */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--copper);

  /* motion: the house swoop */
  --ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --dur: 160ms;
  --dur-slow: 260ms;

  /* targets · field text: 14 on a mouse, 16 on touch (iOS Safari zooms a tap on anything smaller) */
  --target: 40px;
  --control-pad: 8px;
  --field-size: 14px;

  /* Finish: gradient second colour = a darker shade of the first; gloss = one soft upper-left light */
  --fin-dark: 20%;
  --gloss: radial-gradient(ellipse 110% 90% at 22% 16%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0) 100%);
  --hero-radial: radial-gradient(ellipse 70% 60% at 50% 38%, var(--surface-1) 0%, var(--bg) 55%, var(--surface-2) 100%);

  color-scheme: light;
}

/* dark chrome: editing tools, run mode, the pop-out. Same tokens, flipped. */
[data-chrome="dark"], .sf-dark {
  --fg:       var(--cream);
  --fg-2:     rgba(245, 240, 230, 0.72);
  --fg-3:     rgba(245, 240, 230, 0.62);
  --fg-dec:   rgba(245, 240, 230, 0.45);
  --border:   rgba(245, 240, 230, 0.40);
  --hairline-strong: rgba(245, 240, 230, 0.30);
  --hairline: rgba(245, 240, 230, 0.14);
  --bg:        #18211f;
  --surface-1: #212b29;
  --surface-2: #0f1613;
  --btn-default-bg: var(--cream); --btn-default-fg: var(--ink); --btn-default-hover: #ffffff; --btn-default-pressed: #e8e2d4;
  --toast-bg: var(--surface-1); --toast-fg: var(--cream);
  --shadow-rule: 0 1px 0 rgba(0, 0, 0, 0.45);
  --shadow-1: 1px 2px 0 rgba(0, 0, 0, 0.30), 0 0 0 1px var(--hairline);
  --shadow-2: 4px 8px 22px -6px rgba(0, 0, 0, 0.60), 0 0 0 1px var(--hairline);
  --shadow-3: 12px 24px 48px -12px rgba(0, 0, 0, 0.70);
  --shadow-thumb: 1px 2px 4px rgba(0, 0, 0, 0.5);
  --gloss: radial-gradient(ellipse 110% 90% at 22% 16%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0) 100%);
  color-scheme: dark;
  background: var(--bg);
  color: var(--fg);
}

/* touch: every target grows to 44 px, nothing per page */
@media (pointer: coarse) {
  :root { --target: 44px; --control-pad: 12px; --field-size: 16px; }
}

/* ───────────────────────────── 2. Base (one scope token) ───────────────────────────── */
.sf, .sf-dark, [data-chrome] {   /* class weight on purpose: a host page's body/html font rule must not win (the theme's style.css did, 10/08) */
  font-family: var(--font); font-size: var(--t-3); line-height: 1.5; color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
:where(.sf, .sf-dark, [data-chrome]) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.sf, .sf-dark, [data-chrome]) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.sf, .sf-dark, [data-chrome]) [hidden], .sf-u-hidden { display: none !important; }

:where(.sf, .sf-dark, [data-chrome]) :focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
:where(.sf, .sf-dark, [data-chrome]) :where(button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); }

/* type roles */
.sf-h1 { font-size: var(--t-6); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 var(--s-2); }
.sf-h2 { font-size: var(--t-5); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--s-2); }
.sf-h3 { font-size: var(--t-4); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 var(--s-1); }
.sf-kicker { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.sf-mono { font-family: var(--mono); }
.sf-dot { color: var(--copper); }
/* the dot is the one object in the type (Brian 10/08: "the disc"). At display sizes the period is DRAWN: a glossy copper disc
   with one shadow, lit upper-left, the way Embalo draws a button. The glyph stays in the markup (transparent inside the box),
   so the text is still selectable, copyable and read aloud as a period. Body-size dots stay a flat copper glyph.
   A question mark or any other glyph that wears the class adds .sf-dot--glyph to stay a glyph. */
h1 .sf-dot, h2 .sf-dot, .sf-h1 .sf-dot, .sf-h2 .sf-dot, .wordmark .sf-dot, .sf-dot--disc {
  display: inline-block; width: 0.24em; height: 0.24em; margin-left: 0.05em; border-radius: 50%; vertical-align: 0;
  color: transparent; overflow: hidden; line-height: 1;
  background: var(--copper);
  background: radial-gradient(circle at 32% 28%, #f0b27e 0%, var(--copper) 38%, var(--copper-deep) 100%);
  box-shadow: var(--shadow-thumb);
}
.sf-dot--glyph.sf-dot--glyph { display: inline; width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; color: var(--copper); overflow: visible; }
.sf-muted { color: var(--fg-2); }
.sf-hint { font-size: var(--t-2); color: var(--fg-3); }
.sf-kbd { font-family: var(--mono); font-size: var(--t-1); color: var(--fg-3); }

/* a label with a rule under it; the rule carries the hard little shadow */
.sf-rule {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding-bottom: var(--s-1); margin: var(--s-4) 0 var(--s-3);
  border-bottom: 1px solid var(--hairline-strong); box-shadow: var(--shadow-rule);
  font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3);
}
.sf-rule b { color: var(--fg); font-family: var(--font); font-size: var(--t-2); font-weight: 800; letter-spacing: 0; text-transform: none; }

/* layout + spacing utilities (the few that stop inline styles) */
.sf-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sf-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.sf-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.sf-grow { flex: 1 1 auto; min-width: 0; }
.sf-u-mt-1 { margin-top: var(--s-1) !important; } .sf-u-mt-2 { margin-top: var(--s-2) !important; } .sf-u-mt-3 { margin-top: var(--s-3) !important; } .sf-u-mt-4 { margin-top: var(--s-4) !important; }
.sf-u-mb-0 { margin-bottom: 0 !important; } .sf-u-mb-1 { margin-bottom: var(--s-1) !important; } .sf-u-mb-2 { margin-bottom: var(--s-2) !important; } .sf-u-mb-3 { margin-bottom: var(--s-3) !important; }
.sf-u-m-0 { margin: 0 !important; }
.sf-u-center { text-align: center; }
.sf-u-right { text-align: right; }

/* colour hooks: a tint or a role as --tint / --c, so no page writes style="--tint:…" */
.sf-tint-1 { --tint: var(--tint-1); --c: var(--tint-1); } .sf-tint-2 { --tint: var(--tint-2); --c: var(--tint-2); }
.sf-tint-3 { --tint: var(--tint-3); --c: var(--tint-3); } .sf-tint-4 { --tint: var(--tint-4); --c: var(--tint-4); }
.sf-tint-5 { --tint: var(--tint-5); --c: var(--tint-5); } .sf-tint-6 { --tint: var(--tint-6); --c: var(--tint-6); }
.sf-tint-7 { --tint: var(--tint-7); --c: var(--tint-7); } .sf-tint-8 { --tint: var(--tint-8); --c: var(--tint-8); }
.sf-c-ink { --tint: var(--ink); --c: var(--ink); } .sf-c-teal { --tint: var(--teal); --c: var(--teal); }
.sf-c-copper { --tint: var(--copper); --c: var(--copper); } .sf-c-cream { --tint: var(--cream); --c: var(--cream); }
.sf-c-error { --tint: var(--error); --c: var(--error); } .sf-c-surface { --tint: var(--surface-2); --c: var(--surface-2); }

/* ───────────────────────────── 3. Finish ───────────────────────────── */
/* Flat is the default for anything with text on it. Gradient for tiles, cards, hero, primary
   buttons. Glossy for a few hero pieces per page. Polish is for objects, never paragraphs.
   One recipe: a flat fallback first, then the gradient (so no color-mix = still a colour). */
.sf-fin-flat { background: var(--fin, var(--ink)); }
.sf-fin-gradient, .sf-fin-glossy, .sf-tile, .sf-btn--primary {
  background: var(--fin, var(--ink));
  background: linear-gradient(135deg, var(--fin, var(--ink)) 0%, color-mix(in srgb, var(--fin, var(--ink)) calc(100% - var(--fin-dark)), black) 100%);
}
.sf-fin-glossy { position: relative; isolation: isolate; }
.sf-fin-glossy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gloss); pointer-events: none; z-index: 1; }
.sf-fin-glossy > * { position: relative; z-index: 2; }
.sf-fin-copper { --fin: var(--copper); } .sf-fin-teal { --fin: var(--teal); } .sf-fin-ink { --fin: var(--ink); } .sf-fin-cream { --fin: var(--cream); }
.sf-hero { background: var(--hero-radial); }

/* ───────────────────────────── 4. Button ───────────────────────────── */
.sf-btn {
  --btn-bg: var(--btn-default-bg); --btn-fg: var(--btn-default-fg); --btn-hover: var(--btn-default-hover); --btn-pressed: var(--btn-default-pressed);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--target); padding: 0 var(--s-3);
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: var(--t-2); line-height: 1; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur);
  -webkit-tap-highlight-color: transparent;
}
/* a page's own link rules (nav a, footer a …) must never recolour a button: the doubled class outweighs them */
.sf-btn.sf-btn, .sf-btn.sf-btn:link, .sf-btn.sf-btn:visited { color: var(--btn-fg); text-decoration: none; }
@media (hover: hover) {
  .sf-btn:hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: var(--shadow-1); }
  .sf-btn--primary:hover { background: var(--btn-hover); background: linear-gradient(135deg, var(--btn-hover) 0%, color-mix(in srgb, var(--btn-hover) calc(100% - var(--fin-dark)), black) 100%); }
  .sf-btn--quiet:hover, .sf-btn--ghost:hover { box-shadow: none; }
}
.sf-btn.is-hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: var(--shadow-1); }   /* the sheet's simulated state, driven by the same tokens */
.sf-btn--primary.is-hover { background: linear-gradient(135deg, var(--btn-hover) 0%, color-mix(in srgb, var(--btn-hover) calc(100% - var(--fin-dark)), black) 100%); }
.sf-btn:active, .sf-btn.is-pressed, .sf-btn[aria-pressed="true"] { background: var(--btn-pressed); transform: translateY(0); box-shadow: none; }
.sf-btn:disabled, .sf-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.sf-btn--primary { --btn-bg: var(--copper-deep); --btn-fg: var(--cream); --btn-hover: var(--copper); --btn-pressed: var(--copper-pressed); --fin: var(--btn-bg); }   /* cream on deep copper: white on dark, always (Brian 10/08) */
.sf-btn--teal    { --btn-bg: var(--teal); --btn-fg: var(--cream); --btn-hover: var(--teal-hover); --btn-pressed: var(--teal-pressed); }
.sf-btn--danger  { --btn-bg: var(--error); --btn-fg: var(--cream); --btn-hover: var(--error-hover); --btn-pressed: var(--error-pressed); }
.sf-btn--quiet   { --btn-bg: transparent; --btn-fg: var(--fg); --btn-hover: var(--surface-2); --btn-pressed: var(--hairline); border-color: var(--border); }
.sf-btn--ghost   { --btn-bg: transparent; --btn-fg: var(--fg); --btn-hover: var(--surface-2); --btn-pressed: var(--hairline); }
.sf-btn--small { min-height: calc(var(--target) - 8px); padding: 0 var(--s-2); font-size: var(--t-1); }
.sf-btn--large { min-height: calc(var(--target) + 8px); padding: 0 var(--s-4); font-size: var(--t-3); }
.sf-btn--icon  { width: var(--target); padding: 0; }
.sf-btn--small.sf-btn--icon { width: calc(var(--target) - 8px); }
.sf-btn--pill  { border-radius: var(--radius-pill); }
.sf-btn--block { display: flex; width: 100%; }

/* busy: disabled + a spinner; the label stays so the width does not jump */
.sf-btn[aria-busy="true"] { pointer-events: none; opacity: 0.8; }
.sf-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sf-spin 0.7s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ───────────────────────────── 5. Field ───────────────────────────── */
.sf-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.sf-label { font-size: var(--t-2); font-weight: 700; color: var(--fg); }
.sf-label-opt { font-weight: 400; color: var(--fg-3); margin-left: var(--s-1); }
.sf-input, .sf-select, .sf-textarea {
  width: 100%; min-height: var(--target); padding: 0 var(--control-pad);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); color: var(--fg);
  font-size: var(--field-size);    /* 16 on touch, never smaller there: Safari zooms on tap */
  line-height: 1.3;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur);
}
.sf-textarea { padding: var(--control-pad); min-height: calc(var(--target) * 2); resize: vertical; }
@media (hover: hover) { .sf-input:hover, .sf-select:hover, .sf-textarea:hover { border-color: var(--fg-2); } }
.sf-input:focus-visible, .sf-select:focus-visible, .sf-textarea:focus-visible { border-color: var(--copper); box-shadow: var(--focus); }
.sf-input:disabled, .sf-select:disabled, .sf-textarea:disabled { opacity: 0.6; background: var(--surface-2); cursor: not-allowed; }
.sf-input::placeholder, .sf-textarea::placeholder { color: var(--fg-3); }
.sf-input[aria-invalid="true"], .sf-select[aria-invalid="true"], .sf-textarea[aria-invalid="true"] { border-color: var(--error); }
.sf-input--mono { font-family: var(--mono); font-size: var(--field-size); letter-spacing: 0.02em; }
.sf-input[type="time"], .sf-input[type="date"] { font-family: var(--mono); font-size: var(--field-size); }   /* interim: native picker until the masked time Field ships with Next */
.sf-field-hint  { font-size: var(--t-1); color: var(--fg-3); }
.sf-field-error { font-size: var(--t-1); color: var(--error); font-weight: 700; }
.sf-field-error:empty { display: none; }
.sf-input-group { display: flex; align-items: stretch; gap: var(--s-2); }
.sf-input-group .sf-input { flex: 1 1 auto; min-width: 0; }

/* ───────────────────────────── 6. Select ───────────────────────────── */
/* ours on the outside, the browser's list underneath (the one native list that is fine on a phone) */
.sf-select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: calc(var(--control-pad) + 22px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2318211f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right var(--control-pad) center; background-size: 16px;
}
:where([data-chrome="dark"], .sf-dark) .sf-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f5f0e6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
}
.sf-select--small { min-height: calc(var(--target) - 8px); }

/* ───────────────────────────── 7. Switch · Check ───────────────────────────── */
/* <label class="sf-switch"><input type="checkbox" role="switch"> Keep my screen on</label> */
.sf-switch { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); cursor: pointer; font-size: var(--t-2); user-select: none; }
.sf-switch input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none;
  width: 40px; height: 24px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  position: relative; cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur);
}
.sf-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-1); box-shadow: var(--shadow-thumb); transition: transform var(--dur) var(--ease); }
.sf-switch input:checked { background: var(--teal); border-color: var(--teal); }
.sf-switch input:checked::after { transform: translateX(16px); }
.sf-switch input:disabled { opacity: 0.5; cursor: not-allowed; }

.sf-check { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); cursor: pointer; font-size: var(--t-2); user-select: none; }
.sf-check input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none;
  width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-1);
  display: grid; place-content: center; cursor: pointer; transition: background-color var(--dur), border-color var(--dur);
}
.sf-check input::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--cream); border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.sf-check input:checked { background: var(--teal); border-color: var(--teal); }
.sf-check input:checked::after { opacity: 1; }
.sf-check input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ───────────────────────────── 8. Tabs · Chip · Badge ───────────────────────────── */
.sf-tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--hairline-strong); box-shadow: var(--shadow-rule); overflow-x: auto; }
.sf-tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--target); padding: 0 var(--s-3); margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fg-2);
  font-weight: 700; font-size: var(--t-2); white-space: nowrap; cursor: pointer;
  transition: color var(--dur), border-color var(--dur) var(--ease);
}
@media (hover: hover) { .sf-tab:hover { color: var(--fg); } }
.sf-tab:active { color: var(--copper-pressed); }
.sf-tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--copper); }
.sf-tab:disabled { opacity: 0.45; cursor: not-allowed; }

.sf-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: calc(var(--target) - 8px); padding: 0 var(--s-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-1); color: var(--fg); font-size: var(--t-2); font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color var(--dur), border-color var(--dur), transform var(--dur) var(--ease);
}
@media (hover: hover) { .sf-chip:hover { border-color: var(--fg); } }
.sf-chip:active { transform: scale(0.98); }
.sf-chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
:where([data-chrome="dark"], .sf-dark) .sf-chip[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.sf-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.sf-dot-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tint, var(--copper)); flex: none; }

.sf-badge {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--s-2);
  border-radius: var(--radius-pill); background: var(--copper); color: var(--cream);
  font-family: var(--mono); font-size: var(--t-1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.sf-badge--teal { background: var(--teal); }
.sf-badge--ink  { background: var(--ink); color: var(--cream); }
.sf-badge--quiet { background: transparent; color: var(--fg-2); border: 1px solid var(--border); }
.sf-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cream); margin-right: 6px; animation: sf-pulse 1.4s var(--ease) infinite; }
@keyframes sf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ───────────────────────────── 9. Card · Tile · Panel ───────────────────────────── */
.sf-card { background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--s-4); }
.sf-card--sunken { background: var(--surface-2); box-shadow: none; }
.sf-tile {
  display: block; position: relative; padding: var(--s-4); border-radius: var(--radius);
  color: var(--cream); text-decoration: none; --fin: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.sf-tile .sf-h3 { font-size: var(--t-5); margin-top: var(--s-2); }
.sf-tile .sf-kicker { color: rgba(245, 240, 230, 0.62); }
.sf-tile p { margin: 0; opacity: 0.85; }
@media (hover: hover) { a.sf-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } }
a.sf-tile:active { transform: translateY(-1px); }

/* a panel that folds: <details class="sf-panel" open><summary>Shape</summary><div class="sf-panel-body">…</div></details> */
.sf-panel { border-top: 1px solid var(--hairline); }
.sf-panel > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: var(--target); padding: 0 var(--s-1); list-style: none; cursor: pointer; user-select: none;
  font-weight: 800; font-size: var(--t-2);
}
.sf-panel > summary::-webkit-details-marker { display: none; }
.sf-panel > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.75px solid var(--fg-3); border-bottom: 1.75px solid var(--fg-3); transform: rotate(-45deg); transition: transform var(--dur) var(--ease); margin-right: var(--s-1); }
.sf-panel[open] > summary::after { transform: rotate(45deg); }
@media (hover: hover) { .sf-panel > summary:hover { color: var(--copper); } }
.sf-panel-body { padding: 0 var(--s-1) var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }

/* ───────────────────────────── 10. Slider row ───────────────────────────── */
/* name · track · a number you can tap to type · reset. sf-ui.js wires range ↔ number ↔ reset (data-default).
   <div class="sf-slider"><span class="sf-label">Size</span><input type="range" min="0" max="400" value="200" data-default="200"><input class="sf-input" inputmode="decimal"><button class="sf-btn sf-btn--ghost sf-btn--icon" data-sf-reset aria-label="Reset">↺</button></div> */
.sf-slider { display: grid; grid-template-columns: 88px 1fr 64px var(--target); align-items: center; gap: var(--s-2); min-height: var(--target); }
.sf-slider .sf-label { font-size: var(--t-2); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: var(--target); background: transparent; margin: 0; cursor: pointer; }
.sf-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 1px 0 var(--hairline); }
.sf-slider input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-2); }
.sf-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--copper); border: 2px solid var(--surface-1); box-shadow: var(--shadow-thumb); transition: transform var(--dur) var(--ease); }
.sf-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--copper); border: 2px solid var(--surface-1); box-shadow: var(--shadow-thumb); }
@media (hover: hover) { .sf-slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); } }
.sf-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.95); }
.sf-slider input[type="range"]:focus-visible { box-shadow: none; }
.sf-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.sf-slider .sf-input { min-height: calc(var(--target) - 8px); padding: 0 var(--s-2); text-align: right; font-family: var(--mono); font-size: var(--field-size); }
.sf-slider .sf-btn--icon { min-height: calc(var(--target) - 8px); width: calc(var(--target) - 8px); }

/* ───────────────────────────── 11. Menu · Pop-over ───────────────────────────── */
/* <button popovertarget="m1" class="sf-btn sf-btn--quiet">+ Add</button>
   <div id="m1" popover class="sf-menu"><button class="sf-menu-item">Square</button>…</div>
   sf-ui.js places it under its button and keeps it there on scroll/resize. */
.sf-menu, .sf-popover {
  position: fixed; inset: auto; margin: 0; padding: var(--s-1);
  min-width: 200px; max-width: min(92vw, 360px);
  border: 0; border-radius: var(--radius);
  background: var(--surface-1); color: var(--fg); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-6px) scale(0.98);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
}
.sf-menu:popover-open, .sf-popover:popover-open { opacity: 1; transform: none; }
@starting-style { .sf-menu:popover-open, .sf-popover:popover-open { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.sf-popover { padding: var(--s-3); }
.sf-menu-item {
  display: flex; align-items: center; gap: var(--s-2); width: 100%;
  min-height: var(--target); padding: 0 var(--s-2);
  border: 0; border-radius: calc(var(--radius) - 2px); background: none; color: var(--fg);
  font-size: var(--t-2); font-weight: 700; text-align: left; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur);
}
@media (hover: hover) { .sf-menu-item:hover { background: var(--surface-2); } }
.sf-menu-item:focus-visible { background: var(--surface-2); }
.sf-menu-item:active { background: var(--hairline); }
.sf-menu-item:disabled { opacity: 0.45; cursor: not-allowed; background: none; }
.sf-menu-item--danger { color: var(--error); }
.sf-menu-item .sf-kbd { margin-left: auto; }
.sf-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: var(--tint, var(--ink)); flex: none; }
.sf-swatch--round { border-radius: 50%; }
.sf-menu-sep { height: 1px; margin: var(--s-1) var(--s-2); background: var(--hairline); }
.sf-menu-head { padding: var(--s-2) var(--s-2) var(--s-1); font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

/* colour chip: a 44-px chip that opens a pop-over of palette roles; colour via .sf-c-* / .sf-tint-* or --c */
.sf-colour { width: var(--target); height: var(--target); padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); cursor: pointer; }
.sf-colour > i { display: block; width: 100%; height: 100%; border-radius: calc(var(--radius) - 3px); background: var(--c, var(--copper)); }
@media (hover: hover) { .sf-colour:hover { border-color: var(--fg); } }
.sf-swatches { display: grid; grid-template-columns: repeat(5, var(--target)); gap: var(--s-1); }
.sf-swatches button { width: var(--target); height: var(--target); border: 1px solid var(--hairline); border-radius: calc(var(--radius) - 2px); background: var(--c); cursor: pointer; padding: 0; }
@media (hover: hover) { .sf-swatches button:hover { transform: scale(1.06); } }
.sf-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--copper); }

/* ───────────────────────────── 12. Dialog ───────────────────────────── */
/* <dialog class="sf-dialog" aria-labelledby="t1"><div class="sf-dialog-head"><h2 id="t1">…</h2></div><div class="sf-dialog-body">…</div><div class="sf-dialog-foot">…</div></dialog>
   data-sf-strict on the dialog = a backdrop tap does NOT close it (forms in progress, exports running). */
dialog.sf-dialog {
  position: fixed; inset: 0; margin: auto; padding: 0;
  width: min(92vw, 480px); max-height: min(86vh, 720px);
  border: 0; border-radius: var(--radius);
  background: var(--surface-1); color: var(--fg); box-shadow: var(--shadow-3);
  flex-direction: column;
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete;
}
dialog.sf-dialog[open] { display: flex; opacity: 1; transform: none; }
@starting-style { dialog.sf-dialog[open] { opacity: 0; transform: translateY(8px) scale(0.98); } }
dialog.sf-dialog::backdrop { background: rgba(24, 33, 31, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog.sf-dialog--wide { width: min(92vw, 720px); }
.sf-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) 0; }
.sf-dialog-head h2 { font-size: var(--t-4); font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.sf-dialog-body { padding: var(--s-3) var(--s-4); overflow: auto; flex: 1 1 auto; color: var(--fg-2); font-size: var(--t-3); }
.sf-dialog-body p { margin: 0 0 var(--s-2); }
.sf-dialog-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); flex-wrap: wrap; }
.sf-dialog-foot .sf-btn { min-width: 96px; }
@media (max-width: 480px) { .sf-dialog-foot .sf-btn { flex: 1 1 auto; } }
body:has(dialog.sf-dialog[open]) { overflow: hidden; }

/* ───────────────────────────── 13. Toast ───────────────────────────── */
.sf-toasts { position: fixed; left: 50%; bottom: var(--s-4); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--s-2); z-index: 1000; pointer-events: none; width: min(92vw, 420px); }
.sf-toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--target); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-radius: var(--radius); background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-3);
  font-size: var(--t-2); font-weight: 700; line-height: 1.35;
  border-left: 4px solid var(--teal);
  animation: sf-toast-in var(--dur-slow) var(--ease);
}
.sf-toast--warn  { border-left-color: var(--copper); }
.sf-toast--error { border-left-color: color-mix(in srgb, var(--error) 70%, white); }
.sf-toast .sf-grow { font-weight: 400; }
.sf-toast .sf-btn { --btn-bg: transparent; --btn-fg: var(--toast-fg); --btn-hover: rgba(127, 127, 127, 0.2); --btn-pressed: rgba(127, 127, 127, 0.32); min-height: 32px; }
.sf-toast.is-leaving { animation: sf-toast-out var(--dur) var(--ease) forwards; }
@keyframes sf-toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sf-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ───────────────────────────── 14. Status line · Empty state ───────────────────────────── */
.sf-status { display: flex; align-items: center; gap: var(--s-2); min-height: var(--s-4); font-size: var(--t-2); color: var(--fg-2); }
.sf-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dec); flex: none; }
.sf-status--ok::before    { background: var(--ok); }
.sf-status--warn::before  { background: var(--warn); }
.sf-status--error         { color: var(--error); font-weight: 700; }
.sf-status--error::before { background: var(--error); }
.sf-status--busy::before  { border: 2px solid var(--fg-3); border-right-color: transparent; background: none; width: 10px; height: 10px; animation: sf-spin 0.7s linear infinite; }
.sf-status:empty { display: none; }

.sf-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); text-align: center;
  padding: var(--s-6) var(--s-4); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--fg-2);
}
.sf-empty b { color: var(--fg); font-size: var(--t-4); font-weight: 800; letter-spacing: -0.01em; }
.sf-empty p { margin: 0; max-width: 36ch; font-size: var(--t-2); }
.sf-empty .sf-row { margin-top: var(--s-2); justify-content: center; }

/* ───────────────────────────── 15. Table (data chrome) ───────────────────────────── */
.sf-table { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
.sf-table th { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--hairline-strong); box-shadow: var(--shadow-rule); }
.sf-table td { padding: var(--s-2); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
@media (hover: hover) { .sf-table tr:hover td { background: color-mix(in srgb, var(--teal) 5%, transparent); } }
.sf-table .sf-n { text-align: right; font-family: var(--mono); }

/* ───────────────────────────── 15b. Photo ───────────────────────────── */
/* every photograph on a company surface takes the one grade (Brian 10/08: look A, "warm"): the shot keeps its colour,
   pulled toward cream and copper. A rule, not a file: originals stay untouched. <figure class="sf-photo"><img …></figure> */
.sf-photo { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg, 16px); background: var(--ink); }
.sf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.06) brightness(0.98) sepia(0.28); }
.sf-photo::before { content: ""; position: absolute; inset: 0; background: var(--copper); mix-blend-mode: soft-light; opacity: 0.35; pointer-events: none; z-index: 1; }
.sf-photo--plain img { filter: none; } .sf-photo--plain::before { display: none; }   /* product covers and UI stills: never graded */

/* ───────────────────────────── 15c. The page is lit ───────────────────────────── */
/* Brian 10/08, choosing between a flat cream page, a white page and a lit cream page: "C". The page stays cream and takes
   depth: light pools where a source upper-left would put it, near-white bands lift alternate sections. Never a flat wash. */
.sf-lit { background: radial-gradient(ellipse 80% 70% at 30% 0%, var(--surface-1) 0%, var(--bg) 55%, #ede6d6 100%); }
.sf-lit--low { background: radial-gradient(ellipse 70% 60% at 70% 100%, var(--surface-1) 0%, var(--bg) 60%); }
.sf-band { background: var(--surface-1); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--hairline); }
:where(.sf-dark, [data-chrome="dark"]) .sf-lit { background: radial-gradient(ellipse 80% 70% at 30% 0%, #212b29 0%, #18211f 55%, #0f1613 100%); }
:where(.sf-dark, [data-chrome="dark"]) .sf-band { background: var(--surface-1); box-shadow: inset 0 1px 0 rgba(245,240,230,0.06), 0 1px 0 var(--hairline); }

/* ───────────────────────────── 15d. Icon ───────────────────────────── */
/* the one line-icon family: /sf-icons.svg (symbols on a 24-px grid). One stroke weight, round caps, currentColor.
   <svg class="sf-icon" aria-hidden="true"><use href="/sf-icons.svg?v=…#sf-i-next"/></svg>
   Outlines for chrome; the dots are the only fills. Sits on the text line at the text's colour. */
.sf-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.3em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sf-icon--sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.sf-icon--lg { width: 2em; height: 2em; vertical-align: middle; }
.sf-btn .sf-icon { width: 1.15em; height: 1.15em; vertical-align: 0; }
/* an icon tile: the mark large on a flat tint (an app's cover until it has a photograph). <div class="sf-icon-tile sf-tint-1"><svg class="sf-icon">…</svg></div> */
.sf-icon-tile { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--radius); --fin: var(--tint, var(--ink)); background: var(--fin); color: var(--cream); }
/* a tile is an object: it takes the Gradient finish (the Finish rule: flat for text, gradient for tiles, glossy for a few hero pieces) */
.sf-icon-tile { background: linear-gradient(135deg, var(--fin) 0%, color-mix(in srgb, var(--fin) calc(100% - var(--fin-dark)), black) 100%); }
.sf-icon-tile .sf-icon { width: 38%; height: auto; aspect-ratio: 1; stroke-width: 1.25; vertical-align: 0; }

/* ───────────────────────────── 16. Motion safety ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :where(.sf, .sf-dark, [data-chrome]) :where(*, *::before, *::after), .sf-menu, .sf-popover, dialog.sf-dialog, .sf-toast, .sf-toasts * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ───────────────────────────── 17. Touch, last word ───────────────────────────── */
/* after every part, so the dense desktop variants lose on touch */
@media (pointer: coarse) {
  .sf-btn--small, .sf-chip, .sf-slider .sf-input, .sf-slider .sf-btn--icon, .sf-toast .sf-btn, .sf-select--small, .sf-menu-item { min-height: var(--target); }
  .sf-slider .sf-btn--icon, .sf-btn--small.sf-btn--icon { width: var(--target); }
}