morethanui 1.0.0

package/css/components.css

@@ -0,0 +1,1496 @@
+/* ============================================================================
+   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; }
+}