npm - morethanui - Versions diffs - 1.0.0 - Mend

morethanui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/DESIGN.md +310 -0
package/LICENSE +24 -0
package/README.md +119 -0
package/css/base.css +200 -0
package/css/components.css +1496 -0
package/css/layout.css +380 -0
package/css/tokens.css +318 -0
package/dist/mtui.css +2394 -0
package/dist/mtui.js +1719 -0
package/dist/mtui.min.css +1 -0
package/dist/mtui.min.js +1 -0
package/fonts/OFL.txt +93 -0
package/fonts/noto-sans-arabic.woff2 +0 -0
package/fonts/noto-sans-latin-ext.woff2 +0 -0
package/fonts/noto-sans-latin.woff2 +0 -0
package/fonts/noto-sans-mono-latin.woff2 +0 -0
package/js/accordion.js +64 -0
package/js/feedback.js +171 -0
package/js/menu.js +72 -0
package/js/pull-refresh.js +122 -0
package/js/telegram.js +175 -0
package/js/x-colorswatches.js +144 -0
package/js/x-contextmenu.js +190 -0
package/js/x-datepicker.js +321 -0
package/js/x-select.js +139 -0
package/js/x-tabs.js +48 -0
package/js/x-theme.js +154 -0
package/js/x-toast.js +119 -0
package/llms.txt +409 -0
package/package.json +48 -0

package/dist/mtui.css ADDED Viewed

@@ -0,0 +1,2394 @@
+/* ============================================================================
+   MTUI (MoreThanUI) — tokens.css
+   Transcribed from DESIGN.md v1.2 §2. Section banners match spec sections
+   so this file can be reviewed table-by-table against the spec.
+   ----------------------------------------------------------------------------
+   Knobs (root-only, set on <html>, enum values only — DESIGN.md §3 Knob scope):
+     data-theme   = light | dark              (default light)
+     data-accent  = clay | cobalt | fern | plum  (default clay)
+     data-radius  = sharp | soft | round      (default round)
+     data-density = comfortable | compact     (default comfortable)
+     data-tint    = accent | warm             (default accent — neutrals take
+                                               the accent hue; "warm" keeps the
+                                               fixed warm neutral; see §2.14)
+   Components reference ONLY the tokens in this file. No other color, size,
+   radius, or timing values exist in MTUI.
+   ============================================================================ */
+/* ========================== §2.1 Neutrals — light ========================== */
+:root {
+  color-scheme: light;
+  --bg:         #F3F0EA;              /* app background (warm cream)          */
+  --surface:    #FFFFFF;              /* cards, sheets, menus                 */
+  --surface-2:  #EAE6DD;              /* wells, fields, secondary buttons     */
+  --surface-3:  #DFD9CD;              /* hover of wells, switch tracks        */
+  --text:       #1C1A17;
+  --text-muted: #67625A;
+  --text-faint: #A8A297;              /* decorative only — never information  */
+  --inverse:    #1C1A17;              /* toasts, tooltips                     */
+  --on-inverse: #F3F0EA;
+  --scrim:      rgba(28, 26, 23, .44);
+  /* --border intentionally does not exist. MTUI separates by tone, not lines.
+     The only sanctioned borders are the forced-colors block at the end of
+     this file and the layout `outline` diagnostic. */
+}
+/* ========================== §2.2 Neutrals — dark =========================== */
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg:         #161513;
+  --surface:    #211F1C;
+  --surface-2:  #2B2925;
+  --surface-3:  #38352F;
+  --text:       #F0EDE7;
+  --text-muted: #A39D92;
+  --text-faint: #6B665D;
+  --inverse:    #F0EDE7;
+  --on-inverse: #1C1A17;
+  --scrim:      rgba(0, 0, 0, .55);
+}
+/* ==================== §2.3 Accent options (knob: accent) ===================
+   Solids identical in both themes; tint + tint-text swap per theme.
+   Dark tint/text values equal the matching identity tint (§2.5):
+   clay→rose, cobalt→sky, fern→mint, plum→lavender.
+   --on-accent is always white. --focus is always the current accent.        */
+:root {
+  --on-accent: #FFFFFF;
+  --focus: var(--accent);
+  /* Secondary brand color (§2.3b). Mirrors --accent by default, so the four
+     presets stay monochrome; the custom-theme generator overrides these to a
+     second hue. Used by data-variant="accent" and available to apps.        */
+  --accent-2:       var(--accent);
+  --accent-2-hover: var(--accent-hover);
+  --accent-2-text:  var(--accent-text);
+  --accent-2-tint:  var(--accent-tint);
+  --on-accent-2:    var(--on-accent);
+}
+/* clay (default) */
+:root, [data-accent="clay"] {
+  --accent:       #BC4B2A;
+  --accent-hover: #A93F20;
+  --accent-text:  #8F3016;
+  --accent-tint:  #F3DCD6;
+}
+[data-theme="dark"],
+[data-theme="dark"][data-accent="clay"] {
+  --accent-text: #F0A896;
+  --accent-tint: #3A2723;
+}
+/* cobalt */
+[data-accent="cobalt"] {
+  --accent:       #3556C9;
+  --accent-hover: #2B49B2;
+  --accent-text:  #2B44A6;
+  --accent-tint:  #DCE3F7;
+}
+[data-theme="dark"][data-accent="cobalt"] {
+  --accent-text: #A9C3EC;
+  --accent-tint: #232B45;
+}
+/* fern */
+[data-accent="fern"] {
+  --accent:       #2F7A50;
+  --accent-hover: #276A44;
+  --accent-text:  #245D3D;
+  --accent-tint:  #DCEEE2;
+}
+[data-theme="dark"][data-accent="fern"] {
+  --accent-text: #8ED1AB;
+  --accent-tint: #22352A;
+}
+/* plum */
+[data-accent="plum"] {
+  --accent:       #6E46BD;
+  --accent-hover: #5F3AA8;
+  --accent-text:  #56349B;
+  --accent-tint:  #E6E0F2;
+}
+[data-theme="dark"][data-accent="plum"] {
+  --accent-text: #C9BCF0;
+  --accent-tint: #2E2A3C;
+}
+/* ============ §2.14 Neutral tinting (knob: tint, default "accent") =========
+   The §2.1/§2.2 neutrals above are the warm baseline AND the data-tint="warm"
+   opt-out AND the fallback for engines without relative-color syntax. By
+   default the neutral HUE follows the accent (blue accent -> blue-grey UI,
+   like Telegram/Material). Only the hue moves: each token keeps the exact
+   lightness + chroma measured from the warm ramp, so the tonal ladder and
+   every §2.6 contrast pair hold at any accent. --scrim stays translucent.  */
+@supports (color: oklch(from white l c h)) {
+  :root:not([data-theme="dark"]):not([data-tint="warm"]) {
+    --bg:         oklch(from var(--accent) 95.6% 0.010 h);
+    --surface:    oklch(from var(--accent) 99%   0.006 h);  /* pure white -> whisper of hue */
+    --surface-2:  oklch(from var(--accent) 92.6% 0.014 h);
+    --surface-3:  oklch(from var(--accent) 88.7% 0.018 h);
+    --text:       oklch(from var(--accent) 21.9% 0.008 h);
+    --text-muted: oklch(from var(--accent) 49.8% 0.014 h);
+    --text-faint: oklch(from var(--accent) 71.4% 0.017 h);
+    --inverse:    oklch(from var(--accent) 21.9% 0.008 h);
+    --on-inverse: oklch(from var(--accent) 95.6% 0.010 h);
+  }
+  [data-theme="dark"]:not([data-tint="warm"]) {
+    --bg:         oklch(from var(--accent) 19.6% 0.010 h);
+    --surface:    oklch(from var(--accent) 24%   0.014 h);
+    --surface-2:  oklch(from var(--accent) 28.2% 0.018 h);
+    --surface-3:  oklch(from var(--accent) 33%   0.022 h);
+    --text:       oklch(from var(--accent) 94.7% 0.008 h);
+    --text-muted: oklch(from var(--accent) 69.8% 0.016 h);
+    --text-faint: oklch(from var(--accent) 51.2% 0.015 h);
+    --inverse:    oklch(from var(--accent) 94.7% 0.008 h);
+    --on-inverse: oklch(from var(--accent) 21.9% 0.008 h);
+  }
+}
+/* ========================= §2.4 Status colors ============================== */
+:root {
+  --danger:       #B3402F;  /* solid, white text — same value in dark:
+                               the lighter #C9553F fails AA with white       */
+  --danger-text:  #8F3016;
+  --danger-tint:  #F3DCD6;
+  --success-text: #245D3D;
+  --success-tint: #DCEEE2;
+  --warning-text: #7A5600;
+  --warning-tint: #F2E8D0;
+}
+[data-theme="dark"] {
+  --danger-text:  #F0A896;
+  --danger-tint:  #3A2723;
+  --success-text: #8ED1AB;
+  --success-tint: #22352A;
+  --warning-text: #E4C27E;
+  --warning-tint: #383021;
+}
+/* =========== §2.5 Identity tints (avatars, chips, alerts — never layout) === */
+:root {
+  --tint-rose-bg:     #F3DCD6;  --tint-rose-text:     #8F3016;
+  --tint-sky-bg:      #DCE3F7;  --tint-sky-text:      #2B44A6;
+  --tint-mint-bg:     #DCEEE2;  --tint-mint-text:     #245D3D;
+  --tint-butter-bg:   #F2E8D0;  --tint-butter-text:   #7A5600;
+  --tint-lavender-bg: #E6E0F2;  --tint-lavender-text: #56349B;
+}
+[data-theme="dark"] {
+  --tint-rose-bg:     #3A2723;  --tint-rose-text:     #F0A896;
+  --tint-sky-bg:      #232B45;  --tint-sky-text:      #A9C3EC;
+  --tint-mint-bg:     #22352A;  --tint-mint-text:     #8ED1AB;
+  --tint-butter-bg:   #383021;  --tint-butter-text:   #E4C27E;
+  --tint-lavender-bg: #2E2A3C;  --tint-lavender-text: #C9BCF0;
+}
+/* ============================== §2.7 Type ==================================
+   One family. Weight does hierarchy — never letter-spacing, never uppercase.
+   Font files: self-hosted Noto Sans (+ Noto Sans Arabic for ar, Noto Sans
+   Mono for code only). @font-face lives in base.css; system-ui is fallback. */
+:root {
+  --font:      "Noto Sans", system-ui, sans-serif;
+  --font-mono: "Noto Sans Mono", ui-monospace, monospace;
+  /* style: size / line-height / weight / tracking                           */
+  --fs-page:    38px;  --lh-page:    1.12;  --fw-page:    800;  --ls-page: -0.02em;
+  --fs-section: 26px;  --lh-section: 1.2;   --fw-section: 700;  --ls-section: -0.01em;
+  --fs-card:    19px;  --lh-card:    1.3;   --fw-card:    700;
+  --fs-control: 15px;  --lh-control: 1.4;   --fw-control: 600;  /* buttons, row titles (spec: 15–16) */
+  --fs-body:    16px;  --lh-body:    1.6;   --fw-body:    400;  /* inputs use this: 16px floor stops iOS zoom */
+  --fs-secondary: 14px; --lh-secondary: 1.5;                    /* color: --text-muted */
+  --fs-label:   13px;                       --fw-label:   600;  /* color: --text-muted */
+  --fs-code:    13px;  --lh-code:    1.7;                       /* mono, in --surface-2 block */
+}
+/* ============================ §2.8 Spacing =================================
+   4px base scale. Value-named so the token says what it is. Gaps and padding
+   come exclusively from this scale — there is no token for anything else.   */
+:root {
+  --sp-4:  4px;   --sp-8:  8px;   --sp-12: 12px;
+  --sp-16: 16px;  --sp-20: 20px;  --sp-24: 24px;
+  --sp-32: 32px;  --sp-40: 40px;  --sp-48: 48px;
+}
+/* =================== §2.9 Radius presets (knob: radius) ==================== */
+:root, [data-radius="round"] {           /* default */
+  --r-ctl:   999px;   /* buttons, switches, segmented */
+  --r-card:  24px;
+  --r-input: 16px;
+  --r-chip:  999px;
+}
+[data-radius="soft"] {
+  --r-ctl:   14px;
+  --r-card:  20px;
+  --r-input: 12px;
+  --r-chip:  10px;
+}
+[data-radius="sharp"] {
+  --r-ctl:   8px;
+  --r-card:  12px;
+  --r-input: 8px;
+  --r-chip:  6px;
+}
+/* ==================== §2.10 Density (knob: density) ========================
+   44px is the floor — compact never goes below it for anything tappable.    */
+:root, [data-density="comfortable"] {
+  --ctl-h:   48px;   /* buttons                       */
+  --field-h: 48px;   /* inputs, selects               */
+  --row-h:   64px;   /* list rows                     */
+  --pad:     20px;   /* card padding                  */
+  --gap:     16px;   /* default stack/row gap         */
+}
+[data-density="compact"] {
+  --ctl-h:   44px;
+  --field-h: 44px;
+  --row-h:   52px;
+  --pad:     14px;
+  --gap:     10px;
+}
+:root { --tap-min: 44px; }               /* absolute floor, never overridden */
+/* ======================= §2.11 Elevation (tonal) ===========================
+   Levels ARE the neutral ladder: 0 = --bg, 1 = --surface, 2 = --surface-2,
+   overlay = --scrim + level 1. No box-shadow for depth, ever.
+   The three sanctioned non-depth rings:                                     */
+:root {
+  --ring-focus:   0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
+  --ring-avatar:  0 0 0 3px var(--surface);   /* stacked avatars             */
+  --ring-popover: 0 0 0 6px var(--bg);        /* popover separation, not shadow */
+}
+/* ============================ §2.12 Motion =================================
+   Animate transform and opacity only (60fps rule). Color/background
+   transitions allowed for state tints (no reflow).                          */
+:root {
+  --ease:   cubic-bezier(.22, .9, .28, 1);
+  --spring: cubic-bezier(.34, 1.2, .4, 1);
+  --t-micro:    220ms;   /* hover/press color: 200–250ms --ease              */
+  --t-lift:     280ms;   /* card lift, --ease                                */
+  --t-knob:     300ms;   /* switch/checkbox/radio knobs, --spring            */
+  --t-popover:  300ms;   /* transform --spring; opacity 220ms --ease         */
+  --t-tab:      350ms;   /* tab pill slide, --spring                         */
+  --t-delete:   350ms;   /* opacity + scale(.96) — fade reserved for this    */
+  --t-dialog:   400ms;   /* --spring; scrim color 300ms                      */
+  --t-toast:    500ms;   /* --spring                                         */
+  --t-skeleton: 1.5s;    /* sheen loop: blurred bar translating across       */
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --t-micro: 0ms; --t-lift: 0ms; --t-knob: 0ms; --t-popover: 0ms;
+    --t-tab: 0ms; --t-delete: 0ms; --t-dialog: 0ms; --t-toast: 0ms;
+  }
+  /* --t-skeleton intentionally kept: a static skeleton reads as broken.
+     base.css swaps the sheen for a gentle non-translating variant instead. */
+}
+/* =================== §2.14 Theme generator guardrails ======================
+   Brands may generate a custom accent. Hue is free; lightness and chroma are
+   clamped so contrast and calm survive. The generator (a build-time script
+   or the docs page, never runtime app code) must emit exactly:
+     --accent:        oklch(52% C H)          C clamped to 0.06–0.17
+     --accent-hover:  oklch(47% C H)
+     --accent-tint:   light  oklch(92% min(0.32*C, 0.05) H)
+                      dark   oklch(30% 0.35*C H)
+     --accent-text:   light  oklch(41% 0.85*C H)
+                      dark   oklch(84% 0.45*C H)
+   52% lightness at any hue keeps >=4.5:1 with white text.
+   Neutrals, type, spacing, and motion are NOT brand-tunable.                */
+/* ================== §3 High contrast (forced-colors) =======================
+   The one sanctioned exception to zero borders. Tonal separation disappears
+   under forced colors, so components draw real borders with system colors.
+   This base block covers global concerns; every component adds its own
+   forced-colors rules (see CLAUDE.md checklist).                            */
+@media (forced-colors: active) {
+  :root {
+    --scrim: Canvas;
+    --ring-focus: none;      /* focus becomes a real outline per component   */
+    --ring-avatar: none;
+    --ring-popover: none;
+  }
+}
+/* ============================================================================
+   MTUI (MoreThanUI) — base.css
+   Tier: Basic (zero JS). Reset, self-hosted fonts, typography classes
+   (DESIGN.md §2.7), and the accessibility floor every component inherits.
+   Requires tokens.css loaded first.
+   ============================================================================ */
+/* ============================== @font-face =================================
+   Self-hosted variable fonts (fonts/, OFL licensed). Noto Sans Arabic is
+   registered under the SAME family name "Noto Sans" with an Arabic
+   unicode-range, so the frozen --font token covers Arabic with no extra
+   rules: Latin glyphs resolve from the Latin files, Arabic falls through.  */
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url("../fonts/noto-sans-latin.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: "Noto Sans";
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url("../fonts/noto-sans-latin-ext.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+    U+02DD-02FF, 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: "Noto Sans";
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url("../fonts/noto-sans-arabic.woff2") format("woff2");
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
+    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
+    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
+}
+@font-face {
+  font-family: "Noto Sans Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/noto-sans-mono-latin.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;
+}
+/* ================================ Reset ==================================== */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  min-height: 100dvh; /* shell presets (layout.css) own scroll; frame never does */
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: var(--fs-body);
+  font-weight: var(--fw-body);
+  line-height: var(--lh-body);
+}
+img,
+svg,
+video,
+canvas {
+  display: block;
+  max-inline-size: 100%;
+}
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+/* Plain lists in components (menus, rows) carry their own semantics/styles. */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+  padding: 0;
+}
+/* ===================== Typography classes (§2.7) ===========================
+   One class per spec row. Hierarchy is weight and size — never uppercase,
+   never letter-spacing beyond the two negative headline trackings.
+   These classes ARE the type API; headings carry whichever class fits.     */
+.t-page {
+  font-size: var(--fs-page);
+  line-height: var(--lh-page);
+  font-weight: var(--fw-page);
+  letter-spacing: var(--ls-page);
+}
+.t-section {
+  font-size: var(--fs-section);
+  line-height: var(--lh-section);
+  font-weight: var(--fw-section);
+  letter-spacing: var(--ls-section);
+}
+.t-card {
+  font-size: var(--fs-card);
+  line-height: var(--lh-card);
+  font-weight: var(--fw-card);
+}
+.t-row {
+  font-size: var(--fs-control);
+  line-height: var(--lh-control);
+  font-weight: var(--fw-control);
+}
+.t-body {
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  font-weight: var(--fw-body);
+}
+.t-secondary {
+  font-size: var(--fs-secondary);
+  line-height: var(--lh-secondary);
+  font-weight: var(--fw-body);
+  color: var(--text-muted);
+}
+.t-label {
+  font-size: var(--fs-label);
+  font-weight: var(--fw-label);
+  color: var(--text-muted);
+}
+/* Type style only — the well-styled block is the phase-4 `.code` component.
+   Code, numerals, emails stay LTR inside RTL text (DESIGN.md §3 RTL).      */
+.t-code {
+  font-family: var(--font-mono);
+  font-size: var(--fs-code);
+  line-height: var(--lh-code);
+  direction: ltr;
+  unicode-bidi: isolate;
+  text-align: start;
+}
+/* Utility for non-code LTR islands in RTL rows: numbers, emails, URLs.     */
+.t-ltr {
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+/* ========================= Accessibility floor ============================= */
+/* Focus: the token ring, on everything focusable, keyboard-only.           */
+:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-focus);
+}
+/* Reduced motion: durations already collapse via the --t-* tokens
+   (tokens.css). --t-skeleton intentionally survives; the skeleton component
+   (components.css) swaps its translating sheen for a non-moving variant
+   under this same query. No component declares its own durations, so no
+   blanket animation kill-switch is needed here.                            */
+/* Forced colors: tonal separation disappears, so the floor draws real
+   structure with system colors. Components add their own border blocks
+   (CLAUDE.md checklist); this covers the globals.                          */
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 2px solid CanvasText;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+  .t-secondary,
+  .t-label {
+    color: CanvasText;
+  }
+}
+/* ============================================================================
+   MTUI (MoreThanUI) — layout.css
+   Tier: Basic (zero JS). The five screen presets + the three constrained
+   primitives + the outline diagnostic (DESIGN.md §2.15).
+   Requires tokens.css. App code never writes layout CSS or media queries —
+   the media queries in THIS file are the only sanctioned ones.
+   Breakpoints: 768px (tab bar → rail, 4 → 8 columns), 900px (split panes),
+   1200px (8 → 12 columns).
+   ============================================================================ */
+/* ================================ shell ====================================
+   App frame: header + content + navigation. One per app.
+     <body class="shell">
+       <header class="shell-header">…</header>
+       <nav class="shell-nav">…</nav>
+       <main class="shell-content">…</main>
+     </body>
+   Nav is a bottom tab bar below 768px, an inline-start rail at ≥768px.
+   The frame never scrolls; .shell-content is the app's only scroller.      */
+.shell {
+  display: grid;
+  block-size: 100dvh;
+  overflow: hidden;
+  grid-template-areas:
+    "header"
+    "content"
+    "nav";
+  grid-template-rows: auto 1fr auto;
+}
+.shell-header {
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  min-block-size: var(--ctl-h);
+  padding-block: var(--sp-8);
+  padding-inline: var(--pad);
+  padding-block-start: calc(var(--sp-8) + env(safe-area-inset-top, 0px));
+  background: var(--bg);
+}
+.shell-content {
+  grid-area: content;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+.shell-nav {
+  grid-area: nav;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: stretch;
+  gap: var(--sp-4);
+  background: var(--surface);
+  padding-block-end: env(safe-area-inset-bottom, 0px);
+  -webkit-user-select: none;
+  user-select: none;
+}
+.shell-nav > * {
+  min-block-size: var(--tap-min);
+  min-inline-size: var(--tap-min);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-4);
+  /* Reset native <a>/<button> chrome so tabs read as tabs, not links.       */
+  border: 0;
+  background: none;
+  color: var(--text-muted);
+  text-decoration: none;
+  border-radius: var(--r-ctl);
+  font: inherit;
+  font-size: var(--fs-label);
+  font-weight: var(--fw-label);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    color var(--t-micro) var(--ease),
+    background-color var(--t-micro) var(--ease);
+}
+.shell-nav > *:hover { color: var(--text); }
+/* Active tab: mark the current item with aria-current (icon + label follow
+   currentColor, so the whole tab lights up in the accent).                 */
+.shell-nav > [aria-current]:not([aria-current="false"]) { color: var(--accent); }
+@media (min-width: 768px) {
+  .shell {
+    grid-template-areas:
+      "nav header"
+      "nav content";
+    grid-template-rows: auto 1fr;
+    grid-template-columns: auto 1fr;
+  }
+  .shell-nav {
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-block: var(--pad);
+    padding-inline: var(--sp-8);
+    padding-block-end: var(--pad);
+    inline-size: 5rem;
+  }
+}
+/* ============================ screen presets ================================
+   One preset per screen, the outermost element inside .shell-content (or
+   <body> in shell-less pages). Presets own responsive behavior; screens
+   never add their own.                                                     */
+/* screen-stack — settings, forms, articles, detail pages.
+   Single scrolling column; max-width 40rem centered ≥768px, full-bleed
+   below; --pad inline padding; --gap rhythm.                               */
+.screen-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  padding-block: var(--pad);
+  padding-inline: var(--pad);
+  inline-size: 100%;
+}
+@media (min-width: 768px) {
+  .screen-stack {
+    max-inline-size: calc(40rem + 2 * var(--pad));
+    margin-inline: auto;
+  }
+}
+/* screen-list — feeds, chats, search results.
+   Full-bleed scroll region + sticky header slot; rows manage their own
+   inline padding. Pull-to-refresh (phase 6) mounts here.                   */
+.screen-list {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100%;
+}
+.screen-list > header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+  background: var(--bg);
+  padding-block: var(--sp-8);
+  padding-inline: var(--pad);
+}
+/* screen-split — list + detail (mail, chat apps).
+   Two panes at ≥900px: side pane clamped 20–24rem, detail flexes; each
+   pane scrolls independently. Below 900px exactly one pane shows —
+   data-show="detail" on the preset switches from the side pane to the
+   detail pane (app toggles it; the push animation is a later enhancement). */
+.screen-split {
+  display: grid;
+  block-size: 100%;
+  overflow: hidden;
+  grid-template-columns: 1fr;
+}
+.screen-split > * {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+@media (max-width: 899.98px) {
+  .screen-split > :last-child { display: none; }
+  .screen-split[data-show="detail"] > :first-child { display: none; }
+  .screen-split[data-show="detail"] > :last-child { display: block; }
+}
+@media (min-width: 900px) {
+  .screen-split {
+    grid-template-columns: clamp(20rem, 30%, 24rem) 1fr;
+  }
+}
+/* screen-center — auth, onboarding, empty and error states.
+   Content block centered both axes, max-width 24rem, safe-area aware.     */
+.screen-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap);
+  min-block-size: 100%;
+  padding-block: var(--pad);
+  padding-inline: max(var(--pad), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
+}
+.screen-center > * {
+  inline-size: 100%;
+  max-inline-size: 24rem;
+}
+/* ============================== primitives =================================
+   stack / row / grid — every option is an enum or a scale step. There is
+   deliberately no way to express an arbitrary gap, template, or width.    */
+/* stack — vertical flow. gap: scale step (default --gap);
+   align: start | center | stretch (default stretch).                      */
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+}
+.stack[data-align="start"]  { align-items: flex-start; }
+.stack[data-align="center"] { align-items: center; }
+/* row — horizontal flow. gap: scale step (default --gap);
+   align: start | center | end | between (default center); wrap: on.       */
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+}
+.row[data-align="start"]   { align-items: flex-start; }
+.row[data-align="end"]     { align-items: flex-end; }
+.row[data-align="between"] { justify-content: space-between; }
+.row[data-wrap="on"]       { flex-wrap: wrap; }
+/* gap enum — shared by stack and row. Grid gutter is fixed and not here.  */
+.stack[data-gap="4"],  .row[data-gap="4"]  { gap: var(--sp-4); }
+.stack[data-gap="8"],  .row[data-gap="8"]  { gap: var(--sp-8); }
+.stack[data-gap="12"], .row[data-gap="12"] { gap: var(--sp-12); }
+.stack[data-gap="16"], .row[data-gap="16"] { gap: var(--sp-16); }
+.stack[data-gap="20"], .row[data-gap="20"] { gap: var(--sp-20); }
+.stack[data-gap="24"], .row[data-gap="24"] { gap: var(--sp-24); }
+.stack[data-gap="32"], .row[data-gap="32"] { gap: var(--sp-32); }
+.stack[data-gap="40"], .row[data-gap="40"] { gap: var(--sp-40); }
+.stack[data-gap="48"], .row[data-gap="48"] { gap: var(--sp-48); }
+/* grid — fixed column system: 4 columns <768px, 8 at 768–1199px, 12 at
+   ≥1200px; gutter fixed 12px. Children take integer spans per breakpoint
+   (data-span, data-span-md, data-span-lg); spans clamp to the column
+   count — a span ≥ the column count becomes a full row, nothing overflows.
+   Later breakpoints fall back: base → md → lg.                            */
+.grid {
+  display: grid;
+  gap: var(--sp-12);
+  grid-template-columns: repeat(4, 1fr);
+}
+.grid > * { grid-column: span 1; }
+@media (max-width: 767.98px) {
+  .grid > [data-span="2"] { grid-column: span 2; }
+  .grid > [data-span="3"] { grid-column: span 3; }
+  .grid > [data-span="4"], .grid > [data-span="5"], .grid > [data-span="6"],
+  .grid > [data-span="7"], .grid > [data-span="8"], .grid > [data-span="9"],
+  .grid > [data-span="10"], .grid > [data-span="11"], .grid > [data-span="12"] {
+    grid-column: 1 / -1;
+  }
+}
+@media (min-width: 768px) and (max-width: 1199.98px) {
+  .grid { grid-template-columns: repeat(8, 1fr); }
+  .grid > [data-span="2"] { grid-column: span 2; }
+  .grid > [data-span="3"] { grid-column: span 3; }
+  .grid > [data-span="4"] { grid-column: span 4; }
+  .grid > [data-span="5"] { grid-column: span 5; }
+  .grid > [data-span="6"] { grid-column: span 6; }
+  .grid > [data-span="7"] { grid-column: span 7; }
+  .grid > [data-span="8"], .grid > [data-span="9"], .grid > [data-span="10"],
+  .grid > [data-span="11"], .grid > [data-span="12"] { grid-column: 1 / -1; }
+  /* md overrides base */
+  .grid > [data-span-md="1"] { grid-column: span 1; }
+  .grid > [data-span-md="2"] { grid-column: span 2; }
+  .grid > [data-span-md="3"] { grid-column: span 3; }
+  .grid > [data-span-md="4"] { grid-column: span 4; }
+  .grid > [data-span-md="5"] { grid-column: span 5; }
+  .grid > [data-span-md="6"] { grid-column: span 6; }
+  .grid > [data-span-md="7"] { grid-column: span 7; }
+  .grid > [data-span-md="8"], .grid > [data-span-md="9"], .grid > [data-span-md="10"],
+  .grid > [data-span-md="11"], .grid > [data-span-md="12"] { grid-column: 1 / -1; }
+}
+@media (min-width: 1200px) {
+  .grid { grid-template-columns: repeat(12, 1fr); }
+  .grid > [data-span="2"]  { grid-column: span 2; }
+  .grid > [data-span="3"]  { grid-column: span 3; }
+  .grid > [data-span="4"]  { grid-column: span 4; }
+  .grid > [data-span="5"]  { grid-column: span 5; }
+  .grid > [data-span="6"]  { grid-column: span 6; }
+  .grid > [data-span="7"]  { grid-column: span 7; }
+  .grid > [data-span="8"]  { grid-column: span 8; }
+  .grid > [data-span="9"]  { grid-column: span 9; }
+  .grid > [data-span="10"] { grid-column: span 10; }
+  .grid > [data-span="11"] { grid-column: span 11; }
+  .grid > [data-span="12"] { grid-column: 1 / -1; }
+  /* md persists at lg unless lg overrides */
+  .grid > [data-span-md="1"]  { grid-column: span 1; }
+  .grid > [data-span-md="2"]  { grid-column: span 2; }
+  .grid > [data-span-md="3"]  { grid-column: span 3; }
+  .grid > [data-span-md="4"]  { grid-column: span 4; }
+  .grid > [data-span-md="5"]  { grid-column: span 5; }
+  .grid > [data-span-md="6"]  { grid-column: span 6; }
+  .grid > [data-span-md="7"]  { grid-column: span 7; }
+  .grid > [data-span-md="8"]  { grid-column: span 8; }
+  .grid > [data-span-md="9"], .grid > [data-span-md="10"],
+  .grid > [data-span-md="11"], .grid > [data-span-md="12"] { grid-column: 1 / -1; }
+  /* lg overrides md and base */
+  .grid > [data-span-lg="1"]  { grid-column: span 1; }
+  .grid > [data-span-lg="2"]  { grid-column: span 2; }
+  .grid > [data-span-lg="3"]  { grid-column: span 3; }
+  .grid > [data-span-lg="4"]  { grid-column: span 4; }
+  .grid > [data-span-lg="5"]  { grid-column: span 5; }
+  .grid > [data-span-lg="6"]  { grid-column: span 6; }
+  .grid > [data-span-lg="7"]  { grid-column: span 7; }
+  .grid > [data-span-lg="8"]  { grid-column: span 8; }
+  .grid > [data-span-lg="9"]  { grid-column: span 9; }
+  .grid > [data-span-lg="10"] { grid-column: span 10; }
+  .grid > [data-span-lg="11"] { grid-column: span 11; }
+  .grid > [data-span-lg="12"] { grid-column: 1 / -1; }
+}
+/* ========================= outline diagnostic ==============================
+   data-outline on any preset or primitive draws dashed overlays on itself
+   and every layout box inside it. Build-time diagnostic only — exempt from
+   the no-borders rule (DESIGN.md §2.15), never ships on. Outlines don't
+   affect layout metrics.                                                   */
+[data-outline] :is(.stack, .row, .grid, .screen-stack, .screen-list,
+    .screen-split, .screen-center, .shell-header, .shell-nav, .shell-content),
+:is(.stack, .row, .grid, .screen-stack, .screen-list,
+    .screen-split, .screen-center, .shell)[data-outline] {
+  outline: 1px dashed var(--text-muted);
+  outline-offset: -1px;
+}
+[data-outline] .grid > *,
+.grid[data-outline] > * {
+  outline: 1px dashed var(--accent);
+  outline-offset: -1px;
+}
+/* Live column count on outlined grids.                                    */
+.grid[data-outline]::before,
+[data-outline] .grid::before {
+  grid-column: 1 / -1;
+  font-size: var(--fs-label);
+  font-weight: var(--fw-label);
+  color: var(--accent);
+  content: "4 columns";
+}
+@media (min-width: 768px) {
+  .grid[data-outline]::before,
+  [data-outline] .grid::before { content: "8 columns"; }
+}
+@media (min-width: 1200px) {
+  .grid[data-outline]::before,
+  [data-outline] .grid::before { content: "12 columns"; }
+}
+/* ========================== forced-colors floor ============================
+   Tonal region separation disappears; the frame draws real borders.       */
+@media (forced-colors: active) {
+  .shell-header { border-block-end: 1px solid CanvasText; }
+  .shell-nav    { border-block-start: 1px solid CanvasText; }
+  .screen-list > header { border-block-end: 1px solid CanvasText; }
+  /* Active tab is color-only otherwise; give it a system-color cue that
+     survives forced colors (accent and muted both collapse to CanvasText). */
+  .shell-nav > [aria-current]:not([aria-current="false"]) {
+    color: Highlight;
+    text-decoration: underline;
+  }
+  @media (min-width: 768px) {
+    .shell-header { border-block-end: none; }
+    .shell-nav {
+      border-block-start: none;
+      border-inline-end: 1px solid CanvasText;
+    }
+  }
+}
+/* ============================================================================
+   MTUI (MoreThanUI) — components.css
+   Tier: Basic (zero JS) for every component in this file.
+   Semantic tokens only. Zero borders, zero drop shadows — separation is
+   tonal; the only borders live in the forced-colors block at the end.
+   Interaction language (set by .btn, copied by everything):
+     hover  = background tone shift and/or translateY(-2px) (cards -3px,
+              rows nudge 3px inline-start)
+     press  = scale(.96–.98)
+     focus  = --ring-focus (global, base.css)
+     fade   = never (reserved for deletion + popover exit)
+   Icons: real Lucide paths only — inline SVG in markup, or the CSS masks
+   below for pseudo-element icons (they tint via background-color). Never
+   border-drawn glyphs.
+   ============================================================================ */
+:root {
+  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+  --icon-loader: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
+  /* Shipped icon set (real Lucide paths). Placed via .icon[data-icon] below,
+     so apps/AI never hand-author path data. viewBox/stroke match Lucide.    */
+  --icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
+  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+  --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
+  --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
+  --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
+  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
+  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
+  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
+  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
+  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+  --icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
+  --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
+  --icon-more-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E");
+  --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
+  --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E");
+  --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26'/%3E%3C/svg%3E");
+  --icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49'/%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49'/%3E%3C/svg%3E");
+  --icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
+  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
+  --icon-alert-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
+  --icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
+  --icon-circle-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
+}
+/* ================================ icons ====================================
+   <span class="icon" data-icon="home"></span> — monochrome (currentColor
+   mask), scales with font-size. Decorative by default; for a standalone
+   meaning add role="img" + aria-label. For an icon outside the set, inline a
+   Lucide SVG (stroke-width 2, currentColor).                               */
+.icon {
+  display: inline-block;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  vertical-align: -0.2em;
+  flex-shrink: 0;
+  background: currentColor;
+  -webkit-mask: var(--i) center / contain no-repeat;
+  mask: var(--i) center / contain no-repeat;
+}
+.icon[data-icon="home"] { --i: var(--icon-home); }
+.icon[data-icon="search"] { --i: var(--icon-search); }
+.icon[data-icon="settings"] { --i: var(--icon-settings); }
+.icon[data-icon="user"] { --i: var(--icon-user); }
+.icon[data-icon="bell"] { --i: var(--icon-bell); }
+.icon[data-icon="mail"] { --i: var(--icon-mail); }
+.icon[data-icon="calendar"] { --i: var(--icon-calendar); }
+.icon[data-icon="plus"] { --i: var(--icon-plus); }
+.icon[data-icon="x"] { --i: var(--icon-x); }
+.icon[data-icon="check"] { --i: var(--icon-check); }
+.icon[data-icon="chevron-up"] { --i: var(--icon-chevron-up); }
+.icon[data-icon="chevron-down"] { --i: var(--icon-chevron-down); }
+.icon[data-icon="chevron-left"] { --i: var(--icon-chevron-left); }
+.icon[data-icon="chevron-right"] { --i: var(--icon-chevron-right); }
+.icon[data-icon="more-vertical"] { --i: var(--icon-more-vertical); }
+.icon[data-icon="trash"] { --i: var(--icon-trash); }
+.icon[data-icon="heart"] { --i: var(--icon-heart); }
+.icon[data-icon="star"] { --i: var(--icon-star); }
+.icon[data-icon="share"] { --i: var(--icon-share); }
+.icon[data-icon="pencil"] { --i: var(--icon-pencil); }
+.icon[data-icon="info"] { --i: var(--icon-info); }
+.icon[data-icon="alert-triangle"] { --i: var(--icon-alert-triangle); }
+.icon[data-icon="circle-check"] { --i: var(--icon-circle-check); }
+.icon[data-icon="circle-x"] { --i: var(--icon-circle-x); }
+/* chevron-right is the directional one; flip in RTL like .chevron */
+[dir="rtl"] .icon[data-icon="chevron-right"],
+[dir="rtl"] .icon[data-icon="chevron-left"] { transform: scaleX(-1); }
+/* ================================ button ===================================
+   <button class="btn" data-variant="primary">Save changes</button>
+   data-variant: primary | accent | secondary (default) | ghost | danger
+                 (accent uses the secondary brand color --accent-2, which
+                 mirrors --accent until a custom theme sets it apart)
+   data-size:    icon (square, icon-only — give it an aria-label)
+   data-loading: swaps the label for an in-place spinner, keeps size.       */
+.btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-8);
+  min-block-size: var(--ctl-h);
+  min-inline-size: var(--tap-min);
+  padding-inline: var(--sp-20);
+  border: 0;
+  border-radius: var(--r-ctl);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  line-height: var(--lh-control);
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--t-micro) var(--ease),
+    color var(--t-micro) var(--ease),
+    transform var(--t-micro) var(--ease);
+}
+/* Invisible hit-slop, not a visual effect: hover moves the button -2px, so
+   a cursor resting near the original bottom edge would otherwise end up
+   outside the shifted box, firing mouseleave, which un-hovers it, which
+   shifts it back under the cursor, re-triggering hover — flicker. This
+   pseudo rides along with the same transform (it's part of .btn's own
+   box) so the effective hoverable region still reaches ~2px past the
+   shift in every direction, comfortably covering that boundary case.    */
+.btn::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--sp-4));
+}
+.btn:hover { background: var(--surface-3); transform: translateY(-2px); }
+.btn:active { transform: scale(.97); }
+.btn[data-variant="primary"] { background: var(--accent); color: var(--on-accent); }
+.btn[data-variant="primary"]:hover { background: var(--accent-hover); }
+.btn[data-variant="accent"] { background: var(--accent-2); color: var(--on-accent-2); }
+.btn[data-variant="accent"]:hover { background: var(--accent-2-hover); }
+.btn[data-variant="ghost"] { background: transparent; }
+.btn[data-variant="ghost"]:hover { background: var(--surface-2); }
+/* No --danger-hover token exists — danger hover is movement only.         */
+.btn[data-variant="danger"] { background: var(--danger); color: var(--on-accent); }
+.btn[data-size="icon"] { inline-size: var(--ctl-h); padding-inline: 0; }
+.btn:disabled {
+  color: var(--text-faint); /* sanctioned: §2.1 lists disabled text here   */
+  cursor: default;
+}
+.btn:disabled:hover { background: var(--surface-2); transform: none; }
+.btn[data-variant="primary"]:disabled,
+.btn[data-variant="accent"]:disabled,
+.btn[data-variant="danger"]:disabled { background: var(--surface-2); }
+/* Loading: label goes invisible (size preserved), the Lucide loader icon
+   centers on top and rotates. Rotation reuses --t-skeleton, the
+   loading-loop duration token.                                             */
+.btn[data-loading] { pointer-events: none; color: transparent; }
+.btn[data-loading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  inline-size: var(--sp-20);
+  block-size: var(--sp-20);
+  background: var(--text);
+  -webkit-mask: var(--icon-loader) center / contain no-repeat;
+  mask: var(--icon-loader) center / contain no-repeat;
+  animation: mtui-spin var(--t-skeleton) linear infinite;
+}
+.btn[data-variant="primary"][data-loading]::after,
+.btn[data-variant="danger"][data-loading]::after {
+  background: var(--on-accent);
+}
+.btn[data-variant="accent"][data-loading]::after { background: var(--on-accent-2); }
+@keyframes mtui-spin { to { transform: rotate(360deg); } }
+/* ================================= card ====================================
+   <div class="card">…</div>
+   Interactive: <a class="card" href>…</a> / <button class="card">.        */
+.card {
+  background: var(--surface);
+  border-radius: var(--r-card);
+  padding: var(--pad);
+}
+a.card,
+button.card {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform var(--t-lift) var(--ease);
+}
+/* Same hit-slop reasoning as .btn::before — the -3px lift needs a bigger
+   buffer than the button's -2px. */
+a.card::before,
+button.card::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--sp-8));
+}
+a.card:hover,
+button.card:hover { transform: translateY(-3px); }
+a.card:active,
+button.card:active { transform: scale(.98); }
+/* ================================= field ===================================
+   <label class="field">
+     <span class="t-label">Email</span>
+     <input type="email" placeholder="you@example.com">
+     <span class="field-hint">We never share it.</span>
+     <span class="field-error">Enter a valid email.</span>
+   </label>
+   Selects wrap in a chevron holder:  <span class="select"><select>…</select></span>
+   Error state: data-invalid on the .field (hint hides, error shows).      */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-8);
+}
+.field input,
+.field select,
+.field textarea {
+  min-block-size: var(--field-h);
+  padding-inline: var(--sp-16);
+  border: 0;
+  border-radius: var(--r-input);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: var(--fs-body); /* 16px floor stops iOS zoom-on-focus         */
+  line-height: var(--lh-body);
+  transition: background-color var(--t-micro) var(--ease);
+}
+.field input:hover,
+.field select:hover,
+.field textarea:hover { background: var(--surface-3); }
+.field textarea {
+  min-block-size: calc(2 * var(--field-h));
+  padding-block: var(--sp-12);
+  resize: vertical;
+}
+.field ::placeholder { color: var(--text-faint); opacity: 1; }
+.select { position: relative; display: block; }
+.select select {
+  appearance: none;
+  inline-size: 100%;
+  padding-inline-end: var(--sp-40);
+}
+.select::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--sp-16);
+  margin-block: auto;
+  inline-size: var(--sp-16);
+  block-size: var(--sp-16);
+  background: var(--text-muted);
+  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
+  mask: var(--icon-chevron-down) center / contain no-repeat;
+  pointer-events: none;
+}
+.field-hint,
+.field-error {
+  font-size: var(--fs-secondary);
+  line-height: var(--lh-secondary);
+}
+.field-hint { color: var(--text-muted); }
+.field-error { color: var(--danger-text); display: none; }
+.field[data-invalid] input,
+.field[data-invalid] select,
+.field[data-invalid] textarea { background: var(--danger-tint); }
+.field[data-invalid] .field-error { display: block; }
+.field[data-invalid] .field-hint { display: none; }
+/* ================================ toggles ==================================
+   <input type="checkbox" class="switch">    (pair inside a row label)
+   <input type="checkbox" class="checkbox">
+   <input type="radio"    class="radio" name="…">
+   Canonical row: <label class="row" data-align="between">
+                    <span class="t-row">Dark mode</span>
+                    <input type="checkbox" class="switch"></label>
+   The label is the ≥44px tap target; knob motion is --t-knob --spring.    */
+.switch,
+.checkbox,
+.radio {
+  appearance: none;
+  flex-shrink: 0;
+  margin: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.switch {
+  inline-size: var(--sp-48);
+  block-size: var(--sp-24);
+  border-radius: var(--r-ctl);
+  background: var(--surface-3);
+  position: relative;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.switch::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 2px;             /* 1px-scale internal detail (sanctioned) */
+  inset-inline-start: 2px;
+  inline-size: var(--sp-20);
+  block-size: var(--sp-20);
+  border-radius: 50%;
+  background: var(--on-accent);
+  transition: translate var(--t-knob) var(--spring);
+}
+.switch:checked { background: var(--accent); }
+.switch:checked::before { translate: var(--sp-24) 0; }
+[dir="rtl"] .switch:checked::before { translate: calc(-1 * var(--sp-24)) 0; }
+.checkbox,
+.radio {
+  inline-size: var(--sp-24);
+  block-size: var(--sp-24);
+  background: var(--surface-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.checkbox:hover, .radio:hover { background: var(--surface-3); }
+.checkbox:checked, .radio:checked { background: var(--accent); }
+/* Radius clamps so the round preset doesn't turn checkboxes into radios.  */
+.checkbox { border-radius: min(var(--r-chip), 33%); }
+.radio { border-radius: 50%; }
+.checkbox::before {
+  content: "";
+  inline-size: var(--sp-16);
+  block-size: var(--sp-16);
+  background: var(--on-accent);
+  -webkit-mask: var(--icon-check) center / contain no-repeat;
+  mask: var(--icon-check) center / contain no-repeat;
+  transform: scale(0);
+  transition: transform var(--t-knob) var(--spring);
+}
+.checkbox:checked::before { transform: scale(1); }
+.radio::before {
+  content: "";
+  inline-size: var(--sp-8);
+  block-size: var(--sp-8);
+  border-radius: 50%;
+  background: var(--on-accent);
+  transform: scale(0);
+  transition: transform var(--t-knob) var(--spring);
+}
+.radio:checked::before { transform: scale(1); }
+/* ============================ badge and chip ===============================
+   <span class="badge" data-tint="mint">New</span>
+   <span class="badge" data-status="danger">3 errors</span>
+   <button class="chip" aria-pressed="true">Filter</button>
+   <span class="chip">Tag <button class="chip-x" aria-label="Remove"><span class="icon" data-icon="x"></span></button></span> */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-4);
+  min-block-size: var(--sp-20);
+  padding-inline: var(--sp-8);
+  border-radius: var(--r-chip);
+  background: var(--surface-2);
+  color: var(--text-muted);
+  font-size: var(--fs-label);
+  font-weight: var(--fw-label);
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-4);
+  min-block-size: var(--sp-32);
+  padding-inline: var(--sp-12);
+  border: 0;
+  border-radius: var(--r-chip);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: var(--fs-label);
+  font-weight: var(--fw-label);
+  -webkit-tap-highlight-color: transparent;
+}
+button.chip {
+  cursor: pointer;
+  transition:
+    background-color var(--t-micro) var(--ease),
+    color var(--t-micro) var(--ease),
+    transform var(--t-micro) var(--ease);
+}
+button.chip:hover { background: var(--surface-3); }
+button.chip:active { transform: scale(.96); }
+.chip[aria-pressed="true"],
+.chip[data-selected] { background: var(--accent-tint); color: var(--accent-text); }
+.chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  position: relative;
+}
+.chip-x::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-12)); } /* tap area */
+/* Shared tint/status color pairs (badge, chip, avatar, alert, empty).     */
+[data-tint="rose"]     { background: var(--tint-rose-bg);     color: var(--tint-rose-text); }
+[data-tint="sky"]      { background: var(--tint-sky-bg);      color: var(--tint-sky-text); }
+[data-tint="mint"]     { background: var(--tint-mint-bg);     color: var(--tint-mint-text); }
+[data-tint="butter"]   { background: var(--tint-butter-bg);   color: var(--tint-butter-text); }
+[data-tint="lavender"] { background: var(--tint-lavender-bg); color: var(--tint-lavender-text); }
+[data-status="success"] { background: var(--success-tint); color: var(--success-text); }
+[data-status="warning"] { background: var(--warning-tint); color: var(--warning-text); }
+[data-status="danger"]  { background: var(--danger-tint);  color: var(--danger-text); }
+/* ================================ avatar ===================================
+   <span class="avatar" data-tint="sky">AK</span>
+   <span class="avatar"><img src="…" alt=""></span>
+   <span class="avatar-stack"> …avatars… <span class="avatar">+3</span></span>
+   data-size: sm | md (default) | lg                                       */
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sp-40);
+  block-size: var(--sp-40);
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--surface-2);
+  color: var(--text-muted);
+  font-size: var(--fs-label);
+  font-weight: var(--fw-label);
+}
+.avatar[data-size="sm"] { inline-size: var(--sp-32); block-size: var(--sp-32); }
+.avatar[data-size="lg"] { inline-size: var(--sp-48); block-size: var(--sp-48); }
+.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.avatar-stack { display: inline-flex; }
+.avatar-stack .avatar { box-shadow: var(--ring-avatar); }
+.avatar-stack .avatar + .avatar { margin-inline-start: calc(-1 * var(--sp-8)); }
+/* =============================== list item =================================
+   (`.row` belongs to the layout primitive, so the list row is `.item`.)
+   <a class="item" href>
+     <span class="avatar" data-tint="mint">M</span>
+     <span class="item-text">
+       <span class="item-title">Maya Chen</span>
+       <span class="item-sub">Sounds good — tomorrow works.</span>
+     </span>
+     <svg class="chevron" …></svg>
+   </a>
+   Lists separate by tone/gap only — never dividers.                       */
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  min-block-size: var(--row-h);
+  padding-block: var(--sp-8);
+  padding-inline: var(--pad);
+  color: inherit;
+  text-decoration: none;
+}
+a.item,
+button.item {
+  border: 0;
+  border-radius: var(--r-input);
+  background: none;
+  font: inherit;
+  text-align: start;
+  inline-size: 100%;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--t-micro) var(--ease),
+    transform var(--t-micro) var(--ease);
+}
+a.item:hover,
+button.item:hover {
+  /* Soft wash: half-strength well tone, works on surface and bg alike.
+     Engines without color-mix fall back to the solid well.               */
+  background: var(--surface-2);
+  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
+}
+a.item:active,
+button.item:active { transform: scale(.98); }
+.item-text {
+  flex: 1;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px; /* 1px-scale detail: keeps title/sub optically paired          */
+}
+.item-title {
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  line-height: var(--lh-control);
+}
+.item-sub {
+  color: var(--text-muted);
+  font-size: var(--fs-secondary);
+  line-height: var(--lh-secondary);
+}
+.item-title,
+.item-sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Trailing region: because .item-text is flex:1, anything after it sits at
+   the trailing edge (a .chevron, a badge, a timestamp). .item-meta stacks a
+   couple of those (e.g. time over an unread count).                        */
+.item-meta {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--sp-4);
+  color: var(--text-muted);
+  font-size: var(--fs-label);
+  text-align: end;
+}
+/* Directional chevrons flip with direction (use on any inline icon).      */
+[dir="rtl"] .chevron { transform: scaleX(-1); }
+/* ============================== segmented ==================================
+   <fieldset class="segmented">
+     <label><input type="radio" name="view" checked><span>Day</span></label>
+     <label><input type="radio" name="view"><span>Week</span></label>
+   </fieldset>
+   Selected = surface pill on the well (tonal). The sliding pill animation
+   is the phase-5 x-tabs enhancement; Basic swaps instantly.               */
+.segmented {
+  position: relative;
+  display: flex;
+  border: 0;
+  margin: 0;
+  padding: var(--sp-4);
+  border-radius: var(--r-ctl);
+  background: var(--surface-2);
+}
+.segmented label { flex: 1; display: block; position: relative; }
+.segmented input {
+  appearance: none;
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  cursor: pointer;
+  border-radius: var(--r-ctl);
+}
+.segmented span {
+  position: relative;
+  pointer-events: none; /* the stretched input owns the whole hit area     */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: calc(var(--ctl-h) - 2 * var(--sp-4));
+  padding-inline: var(--sp-12);
+  border-radius: var(--r-ctl);
+  color: var(--text-muted);
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
+}
+.segmented input:checked + span { background: var(--surface); color: var(--text); }
+.segmented input:focus-visible + span { box-shadow: var(--ring-focus); }
+/* Sliding pill (350ms --spring, per §2.12) — pure CSS via :has(); engines
+   without :has() keep the instant per-segment fallback above. Supports up
+   to 5 segments.                                                           */
+@supports selector(:has(*)) {
+  .segmented input:checked + span { background: transparent; }
+  .segmented::before {
+    content: "";
+    position: absolute;
+    inset-block: var(--sp-4);
+    inset-inline-start: var(--sp-4);
+    inline-size: calc((100% - 2 * var(--sp-4)) / var(--seg-count, 1));
+    border-radius: var(--r-ctl);
+    background: var(--surface);
+    translate: calc(var(--seg-index, 0) * 100%) 0;
+    transition: translate var(--t-tab) var(--spring);
+  }
+  [dir="rtl"] .segmented::before { translate: calc(var(--seg-index, 0) * -100%) 0; }
+  .segmented:has(> label:nth-child(2):last-child) { --seg-count: 2; }
+  .segmented:has(> label:nth-child(3):last-child) { --seg-count: 3; }
+  .segmented:has(> label:nth-child(4):last-child) { --seg-count: 4; }
+  .segmented:has(> label:nth-child(5):last-child) { --seg-count: 5; }
+  .segmented:has(> label:nth-child(1) input:checked) { --seg-index: 0; }
+  .segmented:has(> label:nth-child(2) input:checked) { --seg-index: 1; }
+  .segmented:has(> label:nth-child(3) input:checked) { --seg-index: 2; }
+  .segmented:has(> label:nth-child(4) input:checked) { --seg-index: 3; }
+  .segmented:has(> label:nth-child(5) input:checked) { --seg-index: 4; }
+}
+/* ============================== accordion ==================================
+   <details class="accordion">
+     <summary>Shipping details</summary>
+     <div class="accordion-body">…</div>
+   </details>
+   Tier: Basic (native, instant open/close) + lightly Enhanced via
+   js/accordion.js (smooth height + chevron animation both ways, WAAPI).
+   data-expanded is JS-only and decouples chevron timing from the native
+   [open] attribute — js/accordion.js intentionally keeps [open] true until
+   the CLOSE animation finishes so the body stays rendered while it
+   collapses; without that decoupling the chevron would stay rotated for
+   the whole close animation and only snap back at the very end.           */
+.accordion {
+  background: var(--surface);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+.accordion summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+  min-block-size: var(--ctl-h);
+  padding-block: var(--sp-8);
+  padding-inline: var(--pad);
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  border-radius: var(--r-card);
+  cursor: pointer;
+  list-style: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.accordion summary::-webkit-details-marker { display: none; }
+.accordion summary:hover { background: var(--surface-2); }
+.accordion summary::after {
+  content: "";
+  flex-shrink: 0;
+  inline-size: var(--sp-16);
+  block-size: var(--sp-16);
+  background: var(--text-muted);
+  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
+  mask: var(--icon-chevron-down) center / contain no-repeat;
+  transition: transform var(--t-knob) var(--spring);
+}
+/* No-JS fallback: native [open] drives the chevron directly. */
+.accordion:not([data-expanded])[open] summary::after { transform: rotate(180deg); }
+/* JS-managed: data-expanded solely drives it once js/accordion.js is
+   handling clicks, independent of [open]'s lingering-true close window.   */
+.accordion[data-expanded="true"] summary::after { transform: rotate(180deg); }
+.accordion-body { padding-block: var(--sp-4) var(--pad); padding-inline: var(--pad); }
+/* =============================== code block ================================
+   <pre class="code">…</pre>   ·   inline: <code class="code-inline">…</code>
+   The only mono in MTUI. Stays LTR inside RTL documents.                  */
+.code {
+  background: var(--surface-2);
+  border-radius: var(--r-input);
+  padding: var(--pad);
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: var(--fs-code);
+  line-height: var(--lh-code);
+  direction: ltr;
+  unicode-bidi: isolate;
+  text-align: start;
+}
+.code-inline {
+  background: var(--surface-2);
+  border-radius: min(var(--r-chip), 33%);
+  padding-inline: var(--sp-4);
+  font-family: var(--font-mono);
+  font-size: var(--fs-code);
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+/* ================================ skeleton =================================
+   <span class="skeleton" data-shape="title|text|circle|row"></span>
+   Sheen = a soft bar translating across (--t-skeleton loop) — never an
+   opacity pulse. Compose shapes to mirror the final layout.               */
+.skeleton {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  background: var(--surface-2);
+  border-radius: var(--r-input);
+  min-block-size: var(--sp-16);
+}
+.skeleton[data-shape="title"] { min-block-size: var(--sp-24); max-inline-size: 60%; }
+.skeleton[data-shape="text"] { border-radius: var(--r-chip); }
+.skeleton[data-shape="circle"] {
+  inline-size: var(--sp-40);
+  block-size: var(--sp-40);
+  min-block-size: var(--sp-40);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.skeleton[data-shape="row"] { min-block-size: var(--row-h); }
+.skeleton::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: 65%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--surface-3) 70%, transparent),
+    transparent
+  );
+  /* linear, not --ease: --ease is an interaction curve (snappy start, soft
+     stop) — on an infinite loop that reads as a fast dart each cycle. A
+     wide, softly-tinted band gliding at constant speed is what reads as
+     calm/ambient instead of mechanical.                                  */
+  animation: mtui-sheen var(--t-skeleton) linear infinite;
+}
+[dir="rtl"] .skeleton::after {
+  background: linear-gradient(
+    -90deg,
+    transparent,
+    color-mix(in srgb, var(--surface-3) 70%, transparent),
+    transparent
+  );
+  animation-name: mtui-sheen-rtl;
+}
+@keyframes mtui-sheen {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(215%); }
+}
+@keyframes mtui-sheen-rtl {
+  from { transform: translateX(100%); }
+  to { transform: translateX(-215%); }
+}
+/* Reduced motion: sheen stops translating but stays visible — a frozen
+   skeleton reads as broken (decision recorded in ROADMAP step 1).         */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton::after {
+    animation: none;
+    inset-inline: 25%;
+    inline-size: 50%;
+  }
+}
+/* ============================== empty state ================================
+   <div class="empty">
+     <span class="empty-icon"><svg …></svg></span>
+     <span class="t-card">No messages yet</span>
+     <p class="t-secondary">Start a conversation and it shows up here.</p>
+     <button class="btn" data-variant="primary">New message</button>
+   </div>
+   Error flavor: data-status="danger" on .empty-icon + a Retry button.     */
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sp-12);
+  text-align: center;
+  padding-block: var(--sp-32);
+  padding-inline: var(--pad);
+  max-inline-size: 24rem;
+  margin-inline: auto;
+}
+.empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sp-48);
+  block-size: var(--sp-48);
+  border-radius: 50%;
+  background: var(--accent-tint);
+  color: var(--accent-text);
+}
+/* ================================= alert ===================================
+   <div class="alert" data-status="success">
+     <svg …></svg>
+     <div><span class="alert-title">Saved</span>
+          <p>Your changes are live.</p></div>
+   </div>
+   One plain sentence. Never a layout region.                              */
+.alert {
+  display: flex;
+  gap: var(--sp-12);
+  padding: var(--sp-16);
+  border-radius: var(--r-card);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: var(--fs-secondary);
+  line-height: var(--lh-secondary);
+}
+.alert > svg { flex-shrink: 0; }
+.alert-title {
+  display: block;
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  line-height: var(--lh-control);
+}
+.alert p { margin: 0; }
+/* ================================ dialog ===================================
+   Native <dialog> on the scrim. Open with .showModal(); a
+   <form method="dialog"> closes it without JS. 400ms spring in, scrim
+   fades in over its own 300ms (§2.12 — scrim color transition is
+   sanctioned; content never fades).
+   <dialog class="dialog" id="confirm">
+     <form method="dialog" class="stack" data-gap="12">
+       <span class="t-card">Delete this note?</span>
+       <p class="t-secondary">This can't be undone.</p>
+       <div class="row" data-gap="8" data-align="between">
+         <button class="btn" value="cancel">Cancel</button>
+         <button class="btn" data-variant="danger" value="confirm">Delete</button>
+       </div>
+     </form>
+   </dialog>                                                                */
+/* Transition-based (not @keyframes) so CLOSING animates too: closing a
+   native <dialog> just flips [open] off and lets the UA drop it from the
+   top layer — a one-shot entrance @keyframes animation never runs in
+   reverse for that. `display`/`overlay` transitions with allow-discrete
+   keep the dialog rendered and interpolating right up until the moment it
+   actually leaves the top layer, so close mirrors open instead of
+   flashing away. Degrades gracefully (no animation, no flash of missing
+   content) on engines without @starting-style/allow-discrete support.    */
+.dialog {
+  margin: auto; /* restore UA centering killed by the base reset           */
+  border: 0;
+  padding: var(--pad);
+  background: var(--surface);
+  color: var(--text);
+  border-radius: var(--r-card);
+  inline-size: min(24rem, calc(100vw - 2 * var(--pad)));
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity var(--t-dialog) var(--ease),
+    transform var(--t-dialog) var(--spring),
+    overlay var(--t-dialog) allow-discrete,
+    display var(--t-dialog) allow-discrete;
+}
+.dialog:not([open]) {
+  opacity: 0;
+  transform: translateY(var(--sp-16)) scale(.96);
+}
+@starting-style {
+  .dialog[open] {
+    opacity: 0;
+    transform: translateY(var(--sp-16)) scale(.96);
+  }
+}
+.dialog::backdrop {
+  background: transparent;
+  transition:
+    background-color var(--t-popover) var(--ease),
+    overlay var(--t-popover) allow-discrete,
+    display var(--t-popover) allow-discrete;
+}
+.dialog[open]::backdrop { background: var(--scrim); }
+@starting-style {
+  .dialog[open]::backdrop { background: transparent; }
+}
+/* ================================= menu ====================================
+   Popover-attribute menu on the 6px bg ring (never a shadow). Enter =
+   300ms spring transform + 220ms opacity (the sanctioned popover fade).
+   js/menu.js anchors it to its trigger; without JS it opens centered —
+   still fully usable (light-dismiss and Esc are platform behavior).
+   <button class="btn" popovertarget="m1">Options</button>
+   <div class="menu" id="m1" popover>
+     <button class="menu-item">Rename</button>
+     <button class="menu-item" data-danger>Delete</button>
+   </div>                                                                   */
+/* One shared foundation for every dropdown/popover this library ships —
+   select, datepicker, colorswatches, context menu, the plain menu demo —
+   so they read as one system instead of each inventing its own look.
+   The 1px --surface-3 border is the sanctioned overlay exception to the
+   zero-borders rule (DESIGN.md §2.9, v1.3): floating panels open over an
+   unpredictable backdrop, where the --ring-popover bg-ring reads as a stray
+   line — a subtle tonal border reads as intentional against any backdrop.
+   The exception is overlays ONLY; on-page components stay borderless.     */
+.menu {
+  border: 1px solid var(--surface-3);
+  padding: var(--sp-8);
+  background: var(--surface);
+  color: var(--text);
+  border-radius: var(--r-card);
+}
+.menu:popover-open {
+  animation:
+    mtui-menu-pop var(--t-popover) var(--spring),
+    mtui-menu-fade var(--t-micro) var(--ease);
+}
+@keyframes mtui-menu-pop {
+  from { transform: translateY(calc(-1 * var(--sp-4))) scale(.98); }
+}
+@keyframes mtui-menu-fade {
+  from { opacity: 0; }
+}
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-12);
+  inline-size: 100%;
+  min-block-size: var(--tap-min);
+  padding-inline: var(--sp-12);
+  border: 0;
+  border-radius: var(--r-input);
+  background: none;
+  color: inherit;
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  text-align: start;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.menu-item:hover {
+  background: var(--surface-2);
+  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
+}
+.menu-item:active { transform: scale(.98); }
+.menu-item[data-danger] { color: var(--danger-text); }
+/* ================================= tabs ====================================
+   <x-tabs> (js/x-tabs.js, tier: Enhanced over Basic segmented) shows only
+   the panel matching the checked radio. Without JS all panels render —
+   functional Basic fallback.
+   <x-tabs>
+     <fieldset class="segmented">
+       <label><input type="radio" name="t" value="general" checked><span>General</span></label>
+       <label><input type="radio" name="t" value="privacy"><span>Privacy</span></label>
+     </fieldset>
+     <div data-panel="general">…</div>
+     <div data-panel="privacy">…</div>
+   </x-tabs>                                                                */
+x-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+}
+/* ================================= toast ===================================
+   <x-toast> mount (js/x-toast.js, JS-only tier) + mtui.toast('Saved').
+   Inverse pill dropping from top center (500ms spring), stack of 3,
+   leaves by sliding up. Never carries the only copy of critical info.    */
+x-toast {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 10; /* the only fixed layer MTUI creates — above sticky
+                  headers (z1) and any modest app chrome                   */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sp-8);
+  padding-block-start: calc(var(--sp-16) + env(safe-area-inset-top, 0px));
+  pointer-events: none;
+}
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-12);
+  min-block-size: var(--ctl-h);
+  padding-inline: var(--sp-20);
+  max-inline-size: calc(100vw - 2 * var(--pad));
+  background: var(--inverse);
+  color: var(--on-inverse);
+  border-radius: var(--r-ctl);
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  animation: mtui-toast-in var(--t-toast) var(--spring);
+}
+/* Same duration/easing as the entrance (DESIGN.md §2.12 lists toast as a
+   single "500ms spring" row — using the snappier --t-knob/--ease here,
+   over the SAME long travel distance, made the exit ~40% faster than the
+   entrance covering identical ground: it read as flung rather than calm. */
+.toast[data-leaving] {
+  animation: mtui-toast-out var(--t-toast) var(--spring) forwards;
+}
+/* Travel distance is an ABSOLUTE clearance, not the toast's own %height —
+   a %-based translate only carries toast #2/#3 a short relative distance,
+   so they visibly drop through/behind whatever already sits above them
+   instead of falling from above the whole stack. -6×--sp-48 comfortably
+   clears a full 3-toast stack (including a 2-line + action toast) plus
+   top safe-area padding, regardless of which slot a toast lands in.       */
+@keyframes mtui-toast-in {
+  from { transform: translateY(calc(-6 * var(--sp-48))) scale(.92); }
+}
+@keyframes mtui-toast-out {
+  to { transform: translateY(calc(-6 * var(--sp-48))) scale(.92); }
+}
+.toast-action {
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-weight: var(--fw-card);
+  padding-inline: var(--sp-4);
+  min-block-size: var(--tap-min);
+  cursor: pointer;
+}
+/* ==================== interaction: no text selection =======================
+   Anything clicked or toggled never selects its text — a double-click that
+   highlights a label reads as broken.                                      */
+.btn, .chip, .chip-x, a.item, button.item,
+.segmented, .accordion summary, .avatar, .avatar-stack,
+.badge, .field .t-label, .empty-icon,
+.menu-item, .toast {
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* Rows wrapping a toggle. Kept as separate rules: an engine without :has()
+   drops the whole selector list it appears in, and must not lose the block
+   above.                                                                   */
+label:has(.switch),
+label:has(.checkbox),
+label:has(.radio) {
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* ================================ x-select ==================================
+   Tier: Enhanced over Basic .select (native <select> — see js/x-select.js).
+   The native select is hidden (kept as value holder + no-JS fallback);
+   this trigger + panel take over as the visible face.                    */
+.select-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  min-block-size: var(--field-h);
+  padding-inline: var(--sp-16);
+  padding-inline-end: var(--sp-40);
+  border: 0;
+  border-radius: var(--r-input);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  text-align: start;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.select-trigger:hover { background: var(--surface-3); }
+.select-trigger::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--sp-16);
+  margin-block: auto;
+  inline-size: var(--sp-16);
+  block-size: var(--sp-16);
+  background: var(--text-muted);
+  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
+  mask: var(--icon-chevron-down) center / contain no-repeat;
+  transition: transform var(--t-micro) var(--ease);
+}
+.select-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
+.select-trigger:disabled { color: var(--text-faint); cursor: default; }
+.select-panel {
+  max-block-size: 18rem;
+  overflow-y: auto;
+}
+.select-option[aria-selected="true"] {
+  background: var(--accent-tint);
+  color: var(--accent-text);
+}
+.select-option:disabled { color: var(--text-faint); cursor: default; }
+/* ============================== x-datepicker =================================
+   Tier: Enhanced over Basic native <input type="date"> (js/x-datepicker.js).
+   Single date only — no ranges, no times (kept out of v1 scope).         */
+.datepicker-panel {
+  padding: var(--sp-8);
+  inline-size: 20rem;
+}
+.datepicker-header {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-8);
+  padding: var(--sp-8);
+}
+.datepicker-header-label {
+  flex: 1;
+  border: 0;
+  background: none;
+  border-radius: var(--r-input);
+  padding-block: var(--sp-4);
+  text-align: center;
+  font: inherit;
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  color: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.datepicker-header-label:hover { background: var(--surface-2); }
+.datepicker-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--tap-min);
+  block-size: var(--tap-min);
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.datepicker-nav:hover { background: var(--surface-2); }
+.datepicker-nav::after {
+  content: "";
+  inline-size: var(--sp-16);
+  block-size: var(--sp-16);
+  background: currentColor;
+  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
+  mask: var(--icon-chevron-down) center / contain no-repeat;
+  transform: rotate(90deg);
+}
+.datepicker-nav[data-dir="next"]::after { transform: rotate(-90deg); }
+[dir="rtl"] .datepicker-nav::after { transform: rotate(-90deg); }
+[dir="rtl"] .datepicker-nav[data-dir="next"]::after { transform: rotate(90deg); }
+/* :not([hidden]) — an unconditional `display` here would override the
+   [hidden] attribute's UA display:none at equal specificity, same trap as
+   the swatches-panel popover fix above. */
+.datepicker-weekdays:not([hidden]),
+.datepicker-grid[data-view="days"] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px; /* 1px-scale internal detail (sanctioned) — tight day grid */
+}
+.datepicker-grid[data-view="months"] {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--sp-8);
+  padding-block: var(--sp-8);
+}
+.datepicker-grid[data-view="years"] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-block-size: 14rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+.datepicker-weekdays > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--sp-32);
+  color: var(--text-muted);
+  font-size: var(--fs-label);
+  font-weight: var(--fw-label);
+}
+.datepicker-day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--text);
+  font-size: var(--fs-secondary);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.datepicker-day:hover { background: var(--surface-2); }
+.datepicker-day[data-today] { color: var(--accent-text); font-weight: var(--fw-control); }
+.datepicker-day[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
+.datepicker-day:disabled {
+  color: var(--text-faint);
+  cursor: default;
+  pointer-events: none;
+}
+.datepicker-day[data-outside] { color: var(--text-faint); }
+.datepicker-month {
+  aspect-ratio: auto;
+  min-block-size: var(--tap-min);
+  border-radius: var(--r-input);
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+}
+.datepicker-year {
+  aspect-ratio: auto;
+  inline-size: 100%;
+  min-block-size: var(--tap-min);
+  border-radius: var(--r-input);
+  font-size: var(--fs-control);
+  font-weight: var(--fw-control);
+  flex-shrink: 0;
+}
+.datepicker-footer {
+  display: flex;
+  justify-content: center;
+  padding-block-start: var(--sp-8);
+}
+/* ============================ x-colorswatches ================================
+   Tier: Enhanced over Basic native <input type="color"> (js/x-colorswatches.js).
+   Curated swatches only — never a free color wheel.                      */
+.swatches-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-12);
+  inline-size: 100%;
+  min-block-size: var(--field-h);
+  padding-inline: var(--sp-16);
+  border: 0;
+  border-radius: var(--r-input);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: var(--fs-body);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--t-micro) var(--ease);
+}
+.swatches-trigger:hover { background: var(--surface-3); }
+.swatches-trigger-swatch {
+  inline-size: var(--sp-24);
+  block-size: var(--sp-24);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.swatches-panel {
+  /* display is scoped to :popover-open — an unconditional `display: grid`
+     here would override the UA's default "hidden until shown" popover
+     rule (author styles win over the UA stylesheet at equal specificity),
+     leaving the panel permanently visible even when closed. */
+  padding: var(--sp-12);
+}
+.swatches-panel:popover-open {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--sp-8);
+}
+.swatch {
+  position: relative;
+  inline-size: var(--sp-32);
+  block-size: var(--sp-32);
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform var(--t-micro) var(--ease);
+}
+.swatch:hover { transform: scale(1.08); }
+.swatch[aria-checked="true"] {
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor;
+}
+.swatch::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  inline-size: 60%;
+  block-size: 60%;
+  background: var(--swatch-check-color, var(--on-accent));
+  -webkit-mask: var(--icon-check) center / contain no-repeat;
+  mask: var(--icon-check) center / contain no-repeat;
+  opacity: 0;
+  transition: opacity var(--t-micro) var(--ease);
+}
+.swatch[aria-checked="true"]::after { opacity: 1; }
+/* ============================= x-contextmenu ==================================
+   Tier: Enhanced. Wraps any region; opens an MTUI menu (reuses .menu) on
+   right-click or long-press (js/x-contextmenu.js). No-JS: the browser's
+   native context menu appears — content itself is unaffected.            */
+x-contextmenu { display: contents; }
+/* =========================== pull-to-refresh ================================
+   Tier: Enhanced over .screen-list (js/pull-refresh.js). No-JS: no
+   affordance, the list scrolls normally.                                 */
+x-pull-refresh {
+  display: block;
+  block-size: 100%;
+  overflow: hidden;
+}
+x-pull-refresh > .screen-list,
+x-pull-refresh > [data-pull-scroll] {
+  block-size: 100%;
+  overflow-y: auto;
+  /* it's a drag target (mouse or touch) — dragging shouldn't select the
+     row text underneath. */
+  -webkit-user-select: none;
+  user-select: none;
+}
+.pull-indicator {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--sp-48);
+  margin-block-start: calc(-1 * var(--sp-48));
+  color: var(--text-muted);
+  pointer-events: none;
+}
+.pull-indicator::after {
+  content: "";
+  inline-size: var(--sp-20);
+  block-size: var(--sp-20);
+  background: currentColor;
+  -webkit-mask: var(--icon-loader) center / contain no-repeat;
+  mask: var(--icon-loader) center / contain no-repeat;
+}
+.pull-indicator[data-spinning]::after {
+  animation: mtui-spin var(--t-skeleton) linear infinite;
+}
+/* ============================== x-theme =====================================
+   Tier: JS-only (js/x-theme.js). An in-app appearance controller — the
+   Telegram "Appearance" panel, MTUI-native: flip theme, tap an accent, set
+   corners + density. Writes only to <html> knobs (root-only rule) and
+   persists to localStorage. Built from canonical .segmented groups plus a
+   row of accent dots. No-JS: empty (the app keeps its current/persisted
+   theme; an in-app switcher inherently needs JS).                         */
+x-theme { display: block; }
+.theme-group + .theme-group { margin-block-start: var(--gap); }
+.theme-group > .t-label {
+  display: block;
+  margin-block-end: var(--sp-8);
+  color: var(--text-muted);
+}
+.theme-accents {
+  display: flex;
+  gap: var(--sp-8);
+  flex-wrap: wrap;
+}
+.theme-accent {
+  position: relative;
+  display: grid;
+  place-items: center;
+  inline-size: var(--tap-min);
+  block-size: var(--tap-min);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.theme-accent input {
+  appearance: none;
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.theme-accent-dot {
+  position: relative;
+  inline-size: var(--sp-32);
+  block-size: var(--sp-32);
+  border-radius: 50%;
+  background: var(--dot);
+  pointer-events: none;
+  transition: transform var(--t-micro) var(--ease);
+}
+.theme-accent:hover .theme-accent-dot { transform: translateY(-2px); }
+.theme-accent input:active + .theme-accent-dot { transform: scale(.96); }
+.theme-accent input:focus-visible + .theme-accent-dot { box-shadow: var(--ring-focus); }
+/* Selected = white check inside the dot (all accents pass white contrast). */
+.theme-accent input:checked + .theme-accent-dot::after {
+  content: "";
+  position: absolute;
+  inset: 22%;
+  background: var(--on-accent);
+  -webkit-mask: var(--icon-check) center / contain no-repeat;
+  mask: var(--icon-check) center / contain no-repeat;
+}
+/* Shared: none of the Enhanced trigger/option surfaces select their text.
+   General rule: anything that's a click-toggle, drag, or long-press
+   target gets user-select:none — dragging/pressing shouldn't leave a
+   text selection behind, which reads as broken.                          */
+.select-trigger, .select-option, .datepicker-day, .datepicker-nav,
+.datepicker-header-label, .swatches-trigger, .swatch, x-contextmenu,
+.theme-accent {
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* ============================ forced colors ================================
+   Tonal separation disappears — every component draws real borders.       */
+@media (forced-colors: active) {
+  .btn, .chip, .badge, .avatar, .segmented, .alert, .card,
+  .field input, .field select, .field textarea,
+  .switch, .checkbox, .radio, .accordion, .code, .code-inline,
+  .skeleton, .empty-icon {
+    border: 1px solid ButtonBorder;
+  }
+  /* Rows separate by tone only — give them a real divider in forced colors. */
+  .item { border-block-end: 1px solid CanvasText; }
+  .switch::before, .radio:checked::before { background: ButtonText; }
+  .switch:checked, .checkbox:checked, .radio:checked {
+    background: SelectedItem;
+  }
+  .segmented input:checked + span { border: 1px solid ButtonBorder; }
+  .segmented::before { display: none; }
+  .btn[data-loading]::after,
+  .select::after,
+  .accordion summary::after,
+  .checkbox::before {
+    forced-color-adjust: none;
+    background: ButtonText;
+  }
+  .checkbox:checked::before { background: SelectedItemText; }
+  .skeleton::after { display: none; }
+  .dialog, .menu, .menu-item, .toast { border: 1px solid CanvasText; }
+  .select-trigger, .swatches-trigger, .datepicker-panel, .datepicker-day,
+  .swatch {
+    border: 1px solid ButtonBorder;
+  }
+  .select-trigger::after, .datepicker-nav::after, .pull-indicator::after {
+    forced-color-adjust: none;
+    background: ButtonText;
+  }
+  .select-option[aria-selected="true"],
+  .datepicker-day[aria-selected="true"] { background: SelectedItem; }
+  .swatch[aria-checked="true"] { box-shadow: none; outline: 2px solid ButtonText; }
+  .swatch::after { forced-color-adjust: none; background: ButtonText; }
+  /* x-theme: dots lose their tonal fill — draw a border, mark the checked
+     one with an outline + keep the check glyph visible. */
+  .theme-accent-dot { forced-color-adjust: none; border: 1px solid ButtonBorder; }
+  .theme-accent input:checked + .theme-accent-dot { outline: 2px solid ButtonText; }
+  .theme-accent input:checked + .theme-accent-dot::after { background: ButtonText; }
+}