/* HIG Native — components/bundle.css. Every color, radius, size and shadow is a tokens.json variable. */
/* ---- _base.css ---- */
/* Foundations shared by every component. Colors, radii, sizes, blurs and shadows are tokens.json variables;
   literal px values below are kit measurements that have no token of their own, each cited. */
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background-primary);
  color: var(--label-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.hig-icon { display: inline-block; flex: none; vertical-align: middle; }
/* HIG Right to left: mirror glyphs that show reading direction or forward/backward motion. */
[dir="rtl"] .hig-icon[data-rtl-flip] { transform: scaleX(-1); }
.hig-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard focus: a solid accent ring outside the control (keyboardFocusIndicatorColor follows the accent). */
.hig-focus:focus-visible,
.hig-glass--interactive:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Pressed feedback from the kit's "Clicked" control layer styles: an 8% black (light) / white (dark) overlay. */
/* Scroll containers made keyboard-focusable by useScrollFocusable: an inset ring so it never spills past the pane. */
.hig-scroll-focus:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

.hig-pressable { position: relative; }
.hig-pressable::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--pressed-overlay); opacity: 0; transition: opacity 80ms linear;
}
.hig-pressable:active:not(:disabled):not([aria-disabled="true"])::after { opacity: 1; }

/* ---------- Liquid Glass (functional layer only) ----------
   Web approximation of the iOS 27 kit layer styles. A glass element blurs its backdrop (backdrop-filter), which also
   isolates its own layers: they cannot blend with what is behind. So every kit fill is drawn with normal blending, in
   the form that gives the kit's result: Regular glass draws its tint and shade; Small glass, whose four kit fills add
   up to "backdrop x 0.45 + 132" in light, draws one white fill over a backdrop dimmed to 93.6%; the kit's
   plus-lighter / plus-darker rim lights become translucent white / black inner shadows (shadow-glass-*-rim) on
   ::after, above the fills, and its outer edges become shadow-glass-*-edge. Refraction and lensing are not drawn.

   Appearance follows the nearest data-theme, so <Glass data-theme="light"> (or "dark") on one element works: the kit
   flips small glass between light and dark with the content beneath it, which a page cannot measure — set it where
   you know the content (bright photo under dark-mode glass, say). */
:root, [data-theme^="light"] {
  --hig-glass-backdrop: blur(var(--blur-glass)) saturate(var(--saturate-glass));
  --hig-glass-small-backdrop: blur(var(--blur-glass-small)) saturate(var(--saturate-glass-small)) brightness(0.936);
}
[data-theme^="dark"] {
  --hig-glass-backdrop: blur(var(--blur-glass)) saturate(1.2);           /* kit Dark Regular - Large: saturation 1.2 */
  --hig-glass-small-backdrop: blur(var(--blur-glass-small)) saturate(1); /* kit Dark Regular - Small: saturation 1 */
}
.hig-glass {
  position: relative;
  z-index: 0; /* own stacking context, so the -1 fill layers sit above the backdrop and below the content */
  color: var(--glass-label-primary);
  border-radius: var(--radius-glass);
  -webkit-backdrop-filter: var(--hig-glass-backdrop);
  backdrop-filter: var(--hig-glass-backdrop);
  box-shadow: var(--shadow-glass), var(--shadow-glass-edge);
}
.hig-glass::before,
.hig-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
}
/* fills (bottom layer, ::before) */
.hig-glass--regular::before { background: linear-gradient(var(--glass-regular-shade), var(--glass-regular-shade)), var(--glass-regular-tint); }
.hig-glass--small::before { background: var(--glass-small-fill); }
.hig-glass--clear::before { background: var(--glass-clear-tint); }
.hig-glass--tinted::before { background: var(--hig-glass-tint, var(--accent)); }
/* rim lights (top layer, ::after): kit inner shadows */
.hig-glass--regular::after { box-shadow: var(--shadow-glass-rim), var(--shadow-glass-highlight); }
.hig-glass--small::after { box-shadow: var(--shadow-glass-small-rim); }
.hig-glass--clear::after { box-shadow: var(--shadow-glass-clear-rim); }
.hig-glass--tinted::after { box-shadow: var(--shadow-glass-tinted-rim); }

.hig-glass--small {
  -webkit-backdrop-filter: var(--hig-glass-small-backdrop);
  backdrop-filter: var(--hig-glass-small-backdrop);
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-small-edge);
}
.hig-glass--clear {
  color: var(--on-media);
  -webkit-backdrop-filter: blur(var(--blur-glass-clear));
  backdrop-filter: blur(var(--blur-glass-clear));
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-clear-edge);
}
/* Prominent ("stained") glass: the kit fills the shape with the tint color, then adds the glass rim. */
.hig-glass--tinted { color: var(--on-accent); box-shadow: var(--shadow-glass-small), var(--shadow-glass-tinted-edge); }
.hig-shape--capsule { border-radius: var(--radius-capsule); }
.hig-shape--circle { border-radius: 50%; }

/* ---------- Standard materials (content layer) ----------
   Kit light materials put a plus-lighter white wash (w) under a normal white tint (t): (1 - t)(backdrop + w) + 255t.
   The element isolates its layers (see glass), so the wash draws normal above the tint (together white at
   t + w(1 - t)) and the backdrop is brightened by 1 / (1 - w): exactly the kit's result, clamping included.
   Dark materials are a single normal black tint. Appearance follows the nearest data-theme, as with glass. */
:root, [data-theme^="light"] {
  --hig-material-ultrathin-backdrop: blur(45px) brightness(1.075);                                       /* kit: 45px, wash 7% */
  --hig-material-thin-backdrop: blur(var(--blur-material)) saturate(1.455) brightness(1.053);            /* kit: sat 1.455, wash 5% */
  --hig-material-regular-backdrop: blur(var(--blur-material)) saturate(var(--saturate-material)) brightness(1.333); /* wash 25% */
  --hig-material-thick-backdrop: blur(var(--blur-material)) brightness(1.515);                           /* kit: sat 1, wash 34% */
  --hig-material-mac-backdrop: blur(var(--blur-mac-material)) saturate(var(--saturate-mac-material));
}
[data-theme^="dark"] {
  --hig-material-ultrathin-backdrop: blur(var(--blur-material));  /* kit Dark: 75px, saturation 1, no wash */
  --hig-material-thin-backdrop: blur(var(--blur-material));
  --hig-material-regular-backdrop: blur(var(--blur-material));
  --hig-material-thick-backdrop: blur(var(--blur-material));
  --hig-material-mac-backdrop: blur(var(--blur-mac-material)) saturate(1.9);
}
.hig-material { position: relative; z-index: 0; }
.hig-material::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; }
.hig-material--ultrathin { background: var(--material-ultrathin); -webkit-backdrop-filter: var(--hig-material-ultrathin-backdrop); backdrop-filter: var(--hig-material-ultrathin-backdrop); }
.hig-material--ultrathin::before { background: var(--material-ultrathin-wash); }
.hig-material--thin { background: var(--material-thin); -webkit-backdrop-filter: var(--hig-material-thin-backdrop); backdrop-filter: var(--hig-material-thin-backdrop); }
.hig-material--thin::before { background: var(--material-thin-wash); }
.hig-material--regular { background: var(--material-regular); -webkit-backdrop-filter: var(--hig-material-regular-backdrop); backdrop-filter: var(--hig-material-regular-backdrop); }
.hig-material--regular::before { background: var(--material-regular-wash); }
.hig-material--thick { background: var(--material-thick); -webkit-backdrop-filter: var(--hig-material-thick-backdrop); backdrop-filter: var(--hig-material-thick-backdrop); }
.hig-material--thick::before { background: var(--material-thick-wash); }
.hig-material[class*="hig-material--mac-"] { -webkit-backdrop-filter: var(--hig-material-mac-backdrop); backdrop-filter: var(--hig-material-mac-backdrop); }
.hig-material[class*="hig-material--mac-"]::before { display: none; }
.hig-material--mac-ultrathick { background: var(--mac-material-ultrathick); }
.hig-material--mac-thick { background: var(--mac-material-thick); }
.hig-material--mac-regular { background: var(--mac-material-regular); }
.hig-material--mac-thin { background: var(--mac-material-thin); }
.hig-material--mac-ultrathin { background: var(--mac-material-ultrathin); }

/* ---------- Reduce Transparency ----------
   The HIG (Materials): Liquid Glass "can differ in response to ... accessibility settings that reduce transparency or
   increase contrast"; it gives no values. HIG Native swaps blur for opaque elevated fills (chosen): glass → background-elevated-secondary, iOS
   materials → background-elevated-primary, macOS materials → mac-window-background, clear glass → a 75% black scrim
   so white (on-media) text stays legible over media. Follows the OS setting; force it with
   <html data-transparency="reduced">, or opt out with data-transparency="full". */
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-transparency="full"]) .hig-glass:not(.hig-glass--tinted),
  :root:not([data-transparency="full"]) .hig-material { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root:not([data-transparency="full"]) .hig-glass:not(.hig-glass--tinted):not(.hig-glass--clear)::before { background: var(--background-elevated-secondary); mix-blend-mode: normal; }
  :root:not([data-transparency="full"]) .hig-glass:not(.hig-glass--tinted)::after { display: none; }
  :root:not([data-transparency="full"]) .hig-glass--clear::before { background: color-mix(in srgb, var(--black) 75%, transparent); mix-blend-mode: normal; }
  :root:not([data-transparency="full"]) .hig-glass--tinted { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root:not([data-transparency="full"]) .hig-material { background: var(--background-elevated-primary); }
  :root:not([data-transparency="full"]) .hig-material::before { display: none; }
  :root:not([data-transparency="full"]) .hig-material[class*="hig-material--mac-"] { background: var(--mac-window-background); }
}
:root[data-transparency="reduced"] .hig-glass:not(.hig-glass--tinted),
:root[data-transparency="reduced"] .hig-material,
:root[data-transparency="reduced"] .hig-glass--tinted { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-transparency="reduced"] .hig-glass:not(.hig-glass--tinted):not(.hig-glass--clear)::before { background: var(--background-elevated-secondary); mix-blend-mode: normal; }
:root[data-transparency="reduced"] .hig-glass:not(.hig-glass--tinted)::after { display: none; }
:root[data-transparency="reduced"] .hig-glass--clear::before { background: color-mix(in srgb, var(--black) 75%, transparent); mix-blend-mode: normal; }
:root[data-transparency="reduced"] .hig-material { background: var(--background-elevated-primary); }
:root[data-transparency="reduced"] .hig-material::before { display: none; }
:root[data-transparency="reduced"] .hig-material[class*="hig-material--mac-"] { background: var(--mac-window-background); }

/* ---------- Preview-only helpers (used by components/<Comp>/preview.html, not by components) ---------- */
.hig-preview { padding: var(--margin-compact); display: flex; flex-wrap: wrap; gap: var(--padding-bezeled); align-items: center; }
.hig-preview--col { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.hig-preview--grouped { background: var(--grouped-background-primary); min-height: 100vh; box-sizing: border-box; }
.hig-preview--mac { background: var(--mac-window-background); color: var(--mac-label-primary); font-size: 13px; }
.hig-preview-label { font: 600 11px/13px var(--font-sans); letter-spacing: 0.06px; color: var(--label-primary); text-transform: uppercase; width: 100%; margin-top: 4px; }
/* A stand-in for app content so glass has something to refract: tiles in system colors. */
.hig-preview-content {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, var(--system-orange) 0 18%, var(--system-green) 18% 37%, var(--background-secondary) 37% 51%, var(--system-indigo) 51% 70%, var(--system-yellow) 70% 84%, var(--system-teal) 84% 100%);
}
/* Dark themes dim the stand-in content, as iOS dims the wallpaper in Dark Mode ("Dark Appearance Dims Wallpaper") and as
   dark-mode content tends to be: small glass is drawn for the content its appearance expects (see Glass). */
[data-theme^="dark"] .hig-preview-content { filter: brightness(0.55); }
.hig-preview-stage { position: relative; min-height: 100vh; overflow: hidden; }
.hig-preview-stage > :not(.hig-preview-content) { position: relative; z-index: 1; }

/* ---- Button ---- */
/* Button — geometry from the iOS 27 and macOS 27 UI kits (Buttons pages). */
.hig-button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--button-icon-gap);
  font-family: var(--font-sans); white-space: nowrap; text-decoration: none; box-sizing: border-box;
  background: transparent; color: var(--accent); border-radius: var(--radius-capsule);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.hig-button:disabled { cursor: default; }
.hig-button__label { display: inline-block; }
.hig-button__spinner { animation: hig-button-spin 1s steps(8) infinite; }
@keyframes hig-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hig-button__spinner { animation-duration: 2s; } }

/* ---- iOS / iPadOS sizes: small 28pt (15pt label, 10pt padding), medium 34pt (17pt, 12pt), large 50pt (17pt, 20pt) */
.hig-button--ios.hig-button--small { height: var(--button-small); padding: 0 var(--button-padding-small); font-size: 15px; line-height: 18px; letter-spacing: -0.23px; }
.hig-button--ios.hig-button--medium { height: var(--button-medium); padding: 0 var(--button-padding-medium); font-size: 17px; line-height: 18px; letter-spacing: -0.43px; }
.hig-button--ios.hig-button--large { height: var(--button-large); padding: 0 var(--button-padding-large); font-size: 17px; line-height: 18px; letter-spacing: -0.43px; }
.hig-button--ios.hig-button--icon-only { padding: 0; width: auto; aspect-ratio: 1; }
/* A 44pt minimum hit region around small controls (HIG Buttons); the visual stays at kit size. */
.hig-button--ios.hig-button--small:not(.hig-glass)::before,
.hig-button--ios.hig-button--medium:not(.hig-glass)::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--target-ios)); height: var(--target-ios);
  transform: translate(-50%, -50%);
}

/* borderless: accent label, no fill (kit Default/Borderless) */
.hig-button--ios.hig-button--borderless { color: var(--accent); }
/* bordered: tertiary fill, accent label */
.hig-button--ios.hig-button--bordered { background: var(--fill-tertiary); color: var(--accent); }
/* bordered prominent: accent fill, on-accent label */
.hig-button--ios.hig-button--bordered-prominent { background: var(--accent); color: var(--on-accent); }
/* glass: small Liquid Glass, primary glass label, Medium weight (kit Glass/Default) */
.hig-button--ios.hig-button--glass { color: var(--glass-label-primary); font-weight: 500; }
.hig-button--ios.hig-button--glass-prominent { color: var(--on-accent); font-weight: 500; }

/* Glass buttons press by darkening the element's own background beneath the glass fills. */
.hig-button.hig-glass:active:not(:disabled) { background-color: var(--pressed-overlay); }

/* destructive role: system red (kit Destructive/*) */
.hig-button--ios.hig-button--destructive.hig-button--borderless { color: var(--system-red); }
.hig-button--ios.hig-button--destructive.hig-button--bordered { background: color-mix(in srgb, var(--system-red) 14%, transparent); color: var(--system-red); }
.hig-button--ios.hig-button--destructive.hig-button--bordered-prominent { background: var(--system-red); color: var(--on-accent); }
.hig-button--ios.hig-button--destructive.hig-button--glass { color: var(--system-red); }

/* disabled (kit 4 - Disabled): quaternary fill, tertiary label; borderless keeps no fill */
.hig-button--ios:disabled { color: var(--label-tertiary); }
.hig-button--ios.hig-button--bordered:disabled,
.hig-button--ios.hig-button--bordered-prominent:disabled { background: var(--fill-quaternary); color: var(--label-tertiary); }
.hig-button--ios.hig-button--glass-prominent:disabled { color: var(--label-tertiary); }
.hig-button--ios.hig-button--glass-prominent:disabled::before { background: var(--glass-small-fill); }

/* ---- macOS push buttons: mini 16 / small 20 / regular 24 / large 28 (capsule) / xl 36 (capsule); Medium-weight labels */
.hig-button--mac { color: var(--mac-label-primary); font-weight: 500; }
.hig-button--mac.hig-button--mini { height: var(--mac-control-mini); padding: 0 var(--mac-button-padding-mini); border-radius: var(--radius-mac-mini); font-size: 10px; line-height: 13px; letter-spacing: 0.12px; }
.hig-button--mac.hig-button--small { height: var(--mac-control-small); padding: 0 var(--button-padding-small); border-radius: var(--radius-mac-small); font-size: 11px; line-height: 13px; letter-spacing: 0.06px; }
.hig-button--mac.hig-button--regular { height: var(--mac-control-regular); padding: 0 var(--mac-button-padding); border-radius: var(--radius-mac-regular); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-button--mac.hig-button--large { height: var(--mac-control-large); padding: 0 var(--mac-button-padding); border-radius: var(--radius-capsule); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-button--mac.hig-button--xl { height: var(--mac-control-xl); padding: 0 var(--mac-button-padding); border-radius: var(--radius-capsule); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-button--mac.hig-button--icon-only { padding: 0; aspect-ratio: 1; }

.hig-button--mac.hig-button--push { background: var(--mac-fill-secondary); }
.hig-button--mac.hig-button--default { background: var(--accent); color: var(--on-accent); }
.hig-button--mac.hig-button--tinted { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.hig-button--mac.hig-button--borderless { color: var(--accent); }
.hig-button--mac.hig-button--borderless:hover:not(:disabled) { background: var(--mac-fill-tertiary); }
.hig-button--mac.hig-button--toggle { background: var(--mac-fill-tertiary); }
.hig-button--mac.hig-button--toggle.hig-button--selected { background: var(--accent); color: var(--on-accent); }
.hig-button--mac.hig-button--destructive.hig-button--push { background: color-mix(in srgb, var(--system-red) 20%, transparent); color: var(--system-red); }
.hig-button--mac.hig-button--destructive.hig-button--default { background: var(--system-red); color: var(--on-accent); }
.hig-button--mac.hig-button--help { border-radius: 50%; background: var(--mac-fill-secondary); color: var(--mac-label-primary); }
.hig-button--mac:disabled { background: var(--mac-fill-quaternary); color: var(--mac-label-tertiary); }
.hig-button--mac.hig-button--borderless:disabled { background: transparent; }

/* ---- ContextMenu ---- */
/* ContextMenu — the menu is Menu (Menu.css). iOS: the lifted preview (kit Menus/Content View: radius 32,
   background-elevated-primary) over the Menus/Overlay dim (scrim-alert). */
.hig-context-menu { position: relative; display: inline-block; vertical-align: top; }
.hig-context-menu__target { display: block; -webkit-touch-callout: none; }
/* While the preview is lifted, it stands in for the target in place. */
.hig-context-menu--ios.hig-context-menu--open > .hig-context-menu__target { visibility: hidden; }
.hig-context-menu__scrim { position: fixed; inset: 0; z-index: 1000; background: var(--scrim-alert); }
/* The lift sits exactly over the target; the menu opens below (iPhone), above with reversed items, or beside (iPad).
   The kit gives no distance between preview and menu: 12pt is this system's choice. */
.hig-context-menu__lift { position: absolute; left: 0; top: 0; z-index: 1001; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hig-context-menu__lift--above { top: auto; bottom: 0; flex-direction: column-reverse; }
.hig-context-menu__lift--beside { flex-direction: row; }
.hig-context-menu__preview { border-radius: var(--radius-menu); overflow: hidden; background: var(--background-elevated-primary); box-shadow: var(--shadow-menu-preview); }
.hig-context-menu__menu { flex: none; }
/* macOS: the menu's top-leading corner at the pointer (or below the target when opened from the keyboard). */
.hig-context-menu__menu--pointer { position: absolute; z-index: 1001; left: 0; top: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .hig-context-menu__preview { animation: hig-context-menu-lift 220ms ease-out; }
  .hig-context-menu__lift .hig-context-menu__menu, .hig-context-menu__scrim { animation: hig-context-menu-fade 180ms ease-out; }
}
@keyframes hig-context-menu-lift { from { transform: scale(0.96); } to { transform: none; } }
@keyframes hig-context-menu-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- EditMenu ---- */
/* EditMenu — iOS 27 kit Edit Menu/Light: a 44pt capsule of Liquid Glass Regular - Small; actions in Regular 15pt
   Labels Vibrant Primary, 16pt either side of the label, separated by 1x18pt dividers (Fills Vibrant Primary);
   a 36pt Menu Indicator circle (Fills Vibrant Tertiary, Semibold 15pt chevron) 4pt from the trailing edge.
   The vertical style and macOS use Menu (Menu.css). */
.hig-edit-menu {
  display: inline-flex; align-items: stretch; box-sizing: border-box; height: 44px; padding: 0 4px;
  font-family: var(--font-sans); color: var(--vibrant-label-primary); user-select: none; -webkit-user-select: none;
}
.hig-edit-menu__action {
  appearance: none; -webkit-appearance: none; position: relative; margin: 0; border: 0; padding: 0 16px; background: transparent;
  font-family: var(--font-sans); font-size: 15px; line-height: 18px; font-weight: 400; letter-spacing: -0.23px;
  color: inherit; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hig-edit-menu__action + .hig-edit-menu__action { padding-left: 17px; } /* 1pt divider + 16pt */
.hig-edit-menu__action + .hig-edit-menu__action::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 1px; height: 18px;
  background: var(--vibrant-fill-primary);
}
/* Pressed: the kit draws no pressed segment; this system reuses the indicator's 36pt capsule of Fills Vibrant Tertiary. */
.hig-edit-menu__action::after { content: ""; position: absolute; inset: 4px 0; border-radius: var(--radius-capsule); pointer-events: none; }
.hig-edit-menu__action:active:not(.hig-edit-menu__action--disabled)::after { background: var(--vibrant-fill-tertiary); }
.hig-edit-menu__action--destructive { color: var(--system-red); }
.hig-edit-menu__action--disabled { color: var(--vibrant-label-tertiary); cursor: default; }
.hig-edit-menu__more {
  appearance: none; -webkit-appearance: none; flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--vibrant-fill-tertiary); color: var(--vibrant-label-primary);
}
.hig-edit-menu__more:active { background: var(--vibrant-fill-secondary); }
/* Vibrant fills and labels are blend-equivalent tokens (the kit's plus-darker / plus-lighter result with normal
   blending), so the dividers, pressed capsule and indicator need no blend mode in either appearance. */

/* ---- Menu ---- */
/* Menu — geometry from the iOS 27 kit (Menus: Menus/Light/iPhone 250pt, Menus/Light/iPad 238pt and their
   Menu Item, Section Title, Separator, Control Group Button and Quick Action symbols) and the macOS 27 kit
   (Menus: Regular / Small / Mini items, headers, separators, shortcuts, Liquid Glass/Menus). */
.hig-menu {
  box-sizing: border-box; font-family: var(--font-sans); text-align: left; outline: none;
  user-select: none; -webkit-user-select: none; cursor: default; -webkit-tap-highlight-color: transparent;
}
.hig-menu__entry { position: relative; }
.hig-menu__item, .hig-menu__top-item { position: relative; box-sizing: border-box; display: flex; align-items: center; outline: none; }
/* Selection backgrounds sit in ::before between the menu surface and the row's content. */
.hig-menu__item::before, .hig-menu__top-item::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
}
.hig-menu__item > *, .hig-menu__top-item > * { position: relative; z-index: 1; }
.hig-menu__check, .hig-menu__icon, .hig-menu__chevron { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.hig-menu__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hig-menu__label--stack { display: grid; }
.hig-menu__label--stack > * { grid-area: 1 / 1; }
.hig-menu__hidden { visibility: hidden; }
.hig-menu__shortcut { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
.hig-menu__mod, .hig-menu__key { display: inline-block; text-align: center; }
.hig-menu__separator { box-sizing: border-box; }
.hig-menu__separator-line { display: block; height: 1px; }
.hig-menu__header { box-sizing: border-box; }

/* ======================= iOS / iPadOS ======================= */
/* iPhone: 250pt menu (size menu-width), items inset 10pt from the glass edge, radius-menu (kit Menus/Light/iPhone). */
.hig-menu--ios { width: var(--menu-width); padding: 10px; border-radius: var(--radius-menu); color: var(--vibrant-label-primary); }
/* iPad: 238pt menu, items inset 8pt (kit Menus/Light/iPad). */
.hig-menu--ios.hig-menu--pad { width: 238px; padding: 8px; }
/* The kit's menu uses Liquid Glass Regular - Medium, which blurs 15pt in light (30pt in dark, the shared value). */
.hig-menu--ios.hig-glass--regular { -webkit-backdrop-filter: blur(15px) saturate(var(--saturate-glass)); backdrop-filter: blur(15px) saturate(var(--saturate-glass)); }
[data-theme^="dark"] .hig-menu--ios.hig-glass--regular { -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); }

/* Rows. iPhone Menu Item/Title 42pt: 11pt above and below a 17pt/20pt label; BG Selection radius 20.
   Symbol box 28pt at 16pt, label at 54pt (20pt without a symbol); checkmark box 14pt at 16pt (selectable rows). */
.hig-menu--phone .hig-menu__item { min-height: 42px; padding: 11px 16px; border-radius: 20px; font-size: 17px; line-height: 20px; letter-spacing: -0.43px; }
.hig-menu--phone .hig-menu__check { width: 14px; height: 20px; margin-right: 6px; }
.hig-menu--phone .hig-menu__icon { width: 28px; height: 20px; margin-right: 6px; }
.hig-menu--phone .hig-menu__text { padding-left: 4px; }
.hig-menu--phone .hig-menu__chevron { width: 10px; height: 18px; margin-left: 6px; }
.hig-menu--phone .hig-menu__subtitle { margin-top: 2px; } /* kit: subtitle at 22pt under a 20pt title */
/* iPad Menu Item/Title 38pt: 10pt above and below a 15pt/18pt label; Selection radius 18; symbol box 30pt at 8pt,
   label at 46pt (12pt without a symbol); Title + Subtitle 54pt; trailing accessories end 14pt from the edge. */
.hig-menu--pad .hig-menu__item { min-height: 38px; padding: 10px 14px 10px 8px; border-radius: 18px; font-size: 15px; line-height: 18px; letter-spacing: -0.23px; }
.hig-menu--pad .hig-menu__item--subtitle { padding-bottom: 8px; }
.hig-menu--pad .hig-menu__check { width: 14px; height: 20px; margin-right: 4px; }
.hig-menu--pad .hig-menu__icon { width: 30px; height: 20px; margin-right: 4px; }
.hig-menu--pad .hig-menu__text { padding-left: 4px; }
.hig-menu--pad .hig-menu__chevron { width: 9px; height: 20px; margin-left: 4px; }
.hig-menu--pad .hig-menu__subtitle { margin-top: 2px; }
.hig-menu--ios .hig-menu__label { overflow-wrap: anywhere; }
/* Subtitles: 13pt/16pt, Labels Vibrant Secondary (kit Title + Subtitle). */
.hig-menu--ios .hig-menu__subtitle { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--vibrant-label-secondary); }
/* Submenu chevron and shortcut glyphs: Labels Vibrant Tertiary (kit Submenu Arrow, Right Accessory). */
.hig-menu--ios .hig-menu__chevron { color: var(--vibrant-label-tertiary); }
.hig-menu--ios .hig-menu__item--back .hig-menu__chevron > svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .hig-menu--ios .hig-menu__chevron > svg { transition: transform 150ms ease; } }
/* iPad keyboard shortcuts (kit Right Accessory/Keyboard Shortcut 76pt): Medium 15pt, 14pt modifier boxes every 16pt,
   a 12pt key box. */
.hig-menu--ios .hig-menu__shortcut { margin-left: 4px; font-size: 15px; line-height: 16px; font-weight: 500; letter-spacing: -0.23px; color: var(--vibrant-label-tertiary); }
.hig-menu--ios .hig-menu__mod { width: 14px; margin-right: 2px; }
.hig-menu--ios .hig-menu__key { min-width: 12px; }

/* Selection: Fills/Vibrant/3 Tertiary. The kit renders vibrant fills with plus-darker (light) / plus-lighter (dark);
   multiply / screen stand in so the fill tints the glass rather than covering it. */
.hig-menu--ios .hig-menu__item--active::before,
.hig-menu--ios .hig-menu__item:not(.hig-menu__item--disabled):active::before,
.hig-menu--ios .hig-menu__top-item--active::before,
.hig-menu--ios .hig-menu__top-item:not(.hig-menu__top-item--disabled):active::before { background: var(--vibrant-fill-tertiary); }
[data-theme^="dark"] .hig-menu--ios .hig-menu__item--active::before,
[data-theme^="dark"] .hig-menu--ios .hig-menu__item:not(.hig-menu__item--disabled):active::before,
[data-theme^="dark"] .hig-menu--ios .hig-menu__top-item--active::before,

/* States: destructive = system red (label and symbol); disabled = Labels Vibrant Tertiary. */
.hig-menu--ios .hig-menu__item--destructive .hig-menu__label,
.hig-menu--ios .hig-menu__item--destructive .hig-menu__icon,
.hig-menu--ios .hig-menu__top-item--destructive { color: var(--system-red); }
.hig-menu--ios .hig-menu__item--disabled,
.hig-menu--ios .hig-menu__item--disabled .hig-menu__subtitle,
.hig-menu--ios .hig-menu__top-item--disabled { color: var(--vibrant-label-tertiary); }

/* Separators: iPhone 21pt with the line at 10pt, inset 14pt; iPad 17pt with the line at 8pt, inset 12pt;
   Separators/Vibrant, blended like the selection fill. The separator under a top row is the iPhone one (kit iPad). */
.hig-menu--phone .hig-menu__separator, .hig-menu--ios .hig-menu__separator--top { padding: 10px 14px; }
.hig-menu--pad .hig-menu__separator:not(.hig-menu__separator--top) { padding: 8px 12px; }
.hig-menu--ios .hig-menu__separator-line { background: var(--vibrant-separator); }

/* Section titles: iPhone 27pt, Medium 13pt/15pt at 2pt, 18pt from the edge; iPad 27pt, Medium 12pt/14pt at 6pt, 12pt in. */
.hig-menu--ios .hig-menu__header { font-weight: 500; color: var(--vibrant-label-secondary); }
.hig-menu--phone .hig-menu__header { min-height: 27px; padding: 2px 18px 10px; font-size: 13px; line-height: 15px; letter-spacing: -0.08px; }
.hig-menu--pad .hig-menu__header { min-height: 27px; padding: 6px 12px 7px; font-size: 12px; line-height: 14px; letter-spacing: 0; }

/* Top rows. Medium: iPhone Control Group buttons 74x57pt, 4pt apart, symbol box 22pt at 8pt, Medium 12pt/14pt label
   at 35pt; iPad Quick Actions 70x50pt, 6pt apart, symbol at 6pt, label at 30pt. Small: four symbol-only buttons. */
.hig-menu__top { display: flex; gap: 4px; }
.hig-menu--pad .hig-menu__top { gap: 6px; }
.hig-menu__top-item { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: flex-start; border-radius: 18px; } /* radius: kit iPad Quick Action/Selection r18 */
.hig-menu__top-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.hig-menu__top-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: 0; text-align: center; }
.hig-menu--phone .hig-menu__top--medium .hig-menu__top-item { height: 57px; padding-top: 8px; }
.hig-menu--phone .hig-menu__top--medium .hig-menu__top-label { margin-top: 5px; }
.hig-menu--pad .hig-menu__top--medium .hig-menu__top-item { height: 50px; padding-top: 6px; }
.hig-menu--pad .hig-menu__top--medium .hig-menu__top-label { margin-top: 2px; }
/* Small layout: the kit has no small-layout master; the row keeps the 44pt minimum hit target (size target-ios). */
.hig-menu__top--small .hig-menu__top-item { height: var(--target-ios); justify-content: center; }

/* ======================= macOS ======================= */
/* Liquid Glass/Menus: radius-mac-menu, shadow-mac-menu, 20pt backdrop blur (saturation 0.8 light / 1.2 dark).
   The kit fill (light rgba 230/0.55, dark rgba 90/0.5, both luminosity-blended) has no token; the thick macOS
   material is the closest token. Items sit 5pt from the top and bottom edges. */
.hig-menu--mac {
  width: max-content; padding: 5px 0; border-radius: var(--radius-mac-menu);
  background: var(--mac-material-thick); box-shadow: var(--shadow-mac-menu); color: var(--mac-label-primary);
  -webkit-backdrop-filter: blur(20px) saturate(0.8); backdrop-filter: blur(20px) saturate(0.8);
}
[data-theme^="dark"] .hig-menu--mac { -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
/* Reduce Transparency: the opaque window background, as _base.css does for macOS materials. */
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-transparency="full"]) .hig-menu--mac { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mac-window-background); }
}
:root[data-transparency="reduced"] .hig-menu--mac { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mac-window-background); }
.hig-menu--mac .hig-menu__item { white-space: nowrap; font-weight: 500; }
/* The selection extends 11pt (regular), 9pt (small), 7pt (mini) past the content: always 5pt from the menu edge. */
.hig-menu--mac .hig-menu__item::before { inset: 0 5px; border-radius: var(--radius-mac-menu-item); }
.hig-menu--mac .hig-menu__check { position: relative; width: 12px; } /* the checkmark glyph is centered on the content edge */
.hig-menu--mac .hig-menu__check > svg { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); }
.hig-menu--mac .hig-menu__chevron { width: 12px; margin-left: 8px; color: var(--mac-label-secondary); } /* kit: 12pt box; its rgba(76,76,76) glyph has no swatch */
.hig-menu--mac .hig-menu__shortcut { margin-left: 8px; font-weight: 500; color: var(--mac-label-tertiary); }
/* Regular: 24pt items, Medium 13pt (kern -0.2), content 16pt from the edge, symbol box 11pt + 8pt, shortcut box 66pt
   (12pt glyph boxes every 13.5pt). */
.hig-menu--mac.hig-menu--regular .hig-menu__item { height: 24px; padding: 0 16px; font-size: 13px; line-height: 16px; letter-spacing: -0.2px; }
.hig-menu--mac.hig-menu--regular .hig-menu__icon { width: 11px; margin-right: 8px; }
.hig-menu--mac.hig-menu--regular .hig-menu__chevron { height: 23px; }
.hig-menu--mac.hig-menu--regular .hig-menu__shortcut { min-width: 66px; font-size: 13px; letter-spacing: -0.2px; }
.hig-menu--mac.hig-menu--regular .hig-menu__mod { width: 12px; margin-right: 1.5px; }
.hig-menu--mac.hig-menu--regular .hig-menu__key { min-width: 12px; }
/* Small: 22pt items, Medium 11pt (kern -0.17), content 14pt in, symbol box 9pt + 8pt, shortcut box 54pt (10pt every 11pt). */
.hig-menu--mac.hig-menu--small .hig-menu__item { height: 22px; padding: 0 14px; font-size: 11px; line-height: 13px; letter-spacing: -0.17px; }
.hig-menu--mac.hig-menu--small .hig-menu__icon { width: 9px; margin-right: 8px; }
.hig-menu--mac.hig-menu--small .hig-menu__chevron { height: 22px; }
.hig-menu--mac.hig-menu--small .hig-menu__shortcut { min-width: 54px; font-size: 11px; letter-spacing: -0.17px; }
.hig-menu--mac.hig-menu--small .hig-menu__mod { width: 10px; margin-right: 1px; }
.hig-menu--mac.hig-menu--small .hig-menu__key { min-width: 10px; }
/* Mini: 19pt items, Medium 9pt (kern -0.14), content 12pt in, symbol box 7pt + 8pt, shortcut box 44pt (8pt every 9pt;
   key 10pt). The kit sets mini items below the 10pt macOS text minimum (size text-min-mac). */
.hig-menu--mac.hig-menu--mini .hig-menu__item { height: 19px; padding: 0 12px; font-size: 9px; line-height: 11px; letter-spacing: -0.14px; }
.hig-menu--mac.hig-menu--mini .hig-menu__icon { width: 7px; margin-right: 8px; }
.hig-menu--mac.hig-menu--mini .hig-menu__chevron { height: 19px; }
.hig-menu--mac.hig-menu--mini .hig-menu__shortcut { min-width: 44px; font-size: 9px; letter-spacing: -0.14px; }
.hig-menu--mac.hig-menu--mini .hig-menu__mod { width: 8px; margin-right: 1px; }
.hig-menu--mac.hig-menu--mini .hig-menu__key { min-width: 8px; font-size: 10px; }
.hig-menu--mac .hig-menu__icon > svg { flex: none; }

/* Hover / keyboard selection: accent fill, on-accent label, shortcut and chevron (kit Items/2 - Hover). */
.hig-menu--mac .hig-menu__item--active::before { background: var(--accent); }
.hig-menu--mac .hig-menu__item--active,
.hig-menu--mac .hig-menu__item--active .hig-menu__shortcut,
.hig-menu--mac .hig-menu__item--active .hig-menu__chevron,
.hig-menu--mac .hig-menu__item--active.hig-menu__item--destructive .hig-menu__label { color: var(--on-accent); }
/* A submenu's parent while the pointer or focus is in the submenu: Fills Vibrant Secondary (kit Items - Submenu/3 - Open). */
.hig-menu--mac .hig-menu__item--open::before { background: var(--mac-fill-secondary); }
.hig-menu--mac .hig-menu__item--disabled { color: var(--mac-label-tertiary); } /* kit Items/4 - Disabled */
.hig-menu--mac .hig-menu__item--destructive .hig-menu__label { color: var(--system-red); } /* HIG: menus use red text for destructive items */

/* Headers: Bold, Labels Vibrant Secondary; regular 24pt / 13pt, small 21.5pt / 11pt, mini 19pt / 10pt. */
.hig-menu--mac .hig-menu__header { display: flex; align-items: center; font-weight: 700; color: var(--mac-label-secondary); white-space: nowrap; }
.hig-menu--mac.hig-menu--regular .hig-menu__header { height: 24px; padding: 0 16px; font-size: 13px; line-height: 16px; letter-spacing: -0.2px; }
.hig-menu--mac.hig-menu--small .hig-menu__header { height: 21.5px; padding: 0 14px; font-size: 11px; line-height: 13px; letter-spacing: -0.17px; }
.hig-menu--mac.hig-menu--mini .hig-menu__header { height: 19px; padding: 0 12px; font-size: 10px; line-height: 12px; letter-spacing: -0.15px; }
/* Separators: a 1pt line in Fills Vibrant Secondary across the content width; regular 11pt (line at 5pt),
   small 11.5pt (at 5.5pt), mini 11pt (at 5pt). */
.hig-menu--mac .hig-menu__separator-line { background: var(--mac-fill-secondary); border-radius: 1px; }
.hig-menu--mac.hig-menu--regular .hig-menu__separator { padding: 5px 16px; }
.hig-menu--mac.hig-menu--small .hig-menu__separator { padding: 5.5px 14px 5px; }
.hig-menu--mac.hig-menu--mini .hig-menu__separator { padding: 5px 12px; }

/* Submenus open on the trailing side: 5pt over the parent's edge, first item level with the parent row (kit Examples). */
.hig-menu__submenu { position: absolute; z-index: 2; top: -5px; left: calc(100% - 5px); }

/* ---- MenuBar ---- */
/* MenuBar — macOS: 24pt bar (HIG The menu bar), titles from the macOS 27 kit Menu Bar/Item (Semibold 13pt,
   9pt either side; the app name Heavy 13pt, 11pt / 9pt), selection capsule radius 13 extending 4pt past the title
   and 1pt above it, the open menu 3pt below and 5pt before the title (kit Menu Bar/Examples).
   iPadOS: kit Menu Bar (iPad) — 32pt capsule titles, Medium 14pt (app menu Bold), 10pt either side, centered (HIG).
   The menus themselves are Menu (Menu.css). */
.hig-menu-bar { display: flex; align-items: stretch; box-sizing: border-box; font-family: var(--font-sans); user-select: none; -webkit-user-select: none; }
.hig-menu-bar__entry { position: relative; display: flex; }
.hig-menu-bar__title {
  appearance: none; -webkit-appearance: none; position: relative; isolation: isolate; margin: 0; border: 0; background: transparent;
  font-family: var(--font-sans); color: inherit; white-space: nowrap; cursor: default; -webkit-tap-highlight-color: transparent;
}
.hig-menu-bar__title::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hig-menu-bar__menu { position: absolute; z-index: 1000; top: calc(100% + 3px); }

/* ---- macOS */
.hig-menu-bar--mac { height: 24px; padding: 0 10px; color: var(--mac-label-primary); }
.hig-menu-bar--mac .hig-menu-bar__title { height: 24px; padding: 0 9px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: -0.08px; }
.hig-menu-bar--mac .hig-menu-bar__title--app { padding: 0 9px 0 11px; font-weight: 800; letter-spacing: -0.2px; }
.hig-menu-bar--mac .hig-menu-bar__title::before { inset: -1px -4px 0; border-radius: 13px; }
/* Selected: 8% black (kit plus-darker fill, light) ... */
.hig-menu-bar--mac .hig-menu-bar__title--open::before { background: var(--mac-fill-secondary); }
/* ... and 20% white over dark backgrounds (kit On Darker Background); two 10% layers of mac-fill-primary make 19%. */
[data-theme^="dark"] .hig-menu-bar--mac .hig-menu-bar__title--open::before { background: linear-gradient(var(--mac-fill-primary), var(--mac-fill-primary)), var(--mac-fill-primary); }
.hig-menu-bar--mac .hig-menu-bar__menu { left: -5px; }

/* ---- iPadOS */
.hig-menu-bar--ios { height: 32px; justify-content: center; background: var(--background-primary); color: var(--label-primary); }
.hig-menu-bar--ios .hig-menu-bar__title { height: 32px; padding: 0 10px; border-radius: var(--radius-capsule); font-size: 14px; line-height: 16px; font-weight: 500; }
.hig-menu-bar--ios .hig-menu-bar__title--app { font-weight: 700; }
.hig-menu-bar--ios .hig-menu-bar__title::before { inset: 0; border-radius: inherit; }
.hig-menu-bar--ios .hig-menu-bar__title--open::before { background: var(--fill-tertiary); box-shadow: var(--shadow-menu-bar-title); }
/* The kit gives no offset for iPad menus; they reuse the macOS 3pt gap, aligned to the title's leading edge. */
.hig-menu-bar--ios .hig-menu-bar__menu { left: 0; }

/* ---- Ornament ---- */
/* Ornament — visionOS 26 kit: Toolbars/Glyph Toolbar (68pt capsule, 12pt inset, 44pt symbol buttons 60pt apart),
   Toolbars/Label Toolbar (44pt pill buttons 8pt apart), Buttons/Symbol and Pill (Regular: Idle No Background, Hover,
   Selected, Disabled). The bar keeps one appearance (visionOS has no Dark Mode): kit glass, white labels, and the
   dark theme scoped on it for the shared hover/pressed tokens. */
.hig-ornament { font-family: var(--font-sans); }
.hig-ornament--attached { position: relative; display: block; width: fit-content; max-width: 100%; }
.hig-ornament__scope { display: flex; justify-content: center; }
.hig-ornament__anchor { position: absolute; z-index: 1; }
/* Centered on the window edge (SwiftUI's default ornament content alignment); the HIG and kit give no offset. */
.hig-ornament--bottom > .hig-ornament__anchor { left: 50%; top: 100%; transform: translate(-50%, -50%); }
.hig-ornament--top > .hig-ornament__anchor { left: 50%; top: 0; transform: translate(-50%, -50%); }
.hig-ornament--leading > .hig-ornament__anchor { left: 0; top: 50%; transform: translate(-50%, -50%); }
.hig-ornament--trailing > .hig-ornament__anchor { right: 0; top: 50%; transform: translate(50%, -50%); }
[dir="rtl"] .hig-ornament--leading > .hig-ornament__anchor { left: auto; right: 0; transform: translate(50%, -50%); }
[dir="rtl"] .hig-ornament--trailing > .hig-ornament__anchor { right: auto; left: 0; transform: translate(-50%, -50%); }

/* visionOS glass (kit Toolbars/Glyph Toolbar, Label Toolbar): 149,149,149 at 25% over a 153pt blur with saturation
   1.64 — a light, translucent gray, the same in every theme (white 58.4% + black = 149) — and a 0.75pt inside edge:
   a diagonal gradient of white 45% fading out by 40.6%, back in from 57.4% to 15% white at the far corner. */
.hig-ornament__bar {
  --hig-vision-label: var(--white); /* kit labels: Primary - onDark, white at 96% */
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; box-sizing: border-box; height: 68px; padding: 12px; gap: 16px;
  border-radius: var(--radius-capsule); color: color-mix(in srgb, var(--hig-vision-label) 96%, transparent); white-space: nowrap;
  background: color-mix(in srgb, color-mix(in srgb, var(--white) 58.4%, var(--black)) 25%, transparent);
  -webkit-backdrop-filter: blur(153px) saturate(1.64); backdrop-filter: blur(153px) saturate(1.64);
}
.hig-ornament__bar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.75px; pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom right, color-mix(in srgb, var(--hig-vision-label) 45%, transparent) 0%, transparent 40.6%, transparent 57.4%, color-mix(in srgb, var(--hig-vision-label) 15%, transparent) 98.7%);
  -webkit-mask: linear-gradient(var(--hig-vision-label) 0 0) content-box, linear-gradient(var(--hig-vision-label) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--hig-vision-label) 0 0) content-box exclude, linear-gradient(var(--hig-vision-label) 0 0);
}
.hig-ornament__bar--labels { gap: 8px; } /* Label Toolbar: pills 92pt apart, 84pt wide */
.hig-ornament__bar--vertical { flex-direction: column; width: 68px; height: auto; }
.hig-ornament__custom { display: flex; align-items: center; flex: none; }

.hig-ornament__item {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--button-icon-gap); flex: none;
  box-sizing: border-box; height: 44px; border-radius: var(--radius-capsule); background: transparent; color: inherit;
  font: 600 17px/22px var(--font-sans); letter-spacing: -0.43px; /* Pill label: 17pt Semibold (kit); vision-body tracking */
  -webkit-tap-highlight-color: transparent;
}
.hig-ornament__item--symbol { width: 44px; font-size: 19px; line-height: 24px; } /* 19pt Medium symbol (kit Symbol/Regular) */
.hig-ornament__item--pill { padding: 0 20px; } /* label 20pt from the pill edge (kit Pill/Regular 94×44) */
/* 60pt targets: button centers sit 60pt apart (vision-button-spacing); the hit region fills that pitch. */
.hig-ornament__item::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, var(--target-vision)); height: var(--target-vision); transform: translate(-50%, -50%);
}
.hig-ornament__bar--labels .hig-ornament__item::before { width: 100%; }
.hig-ornament__item .hig-icon { pointer-events: none; }
/* Hover (looking at a control): 8% white fill plus a soft glow (kit Hover: rgba(255,255,255,0.08) and a white
   "Look Glow" at 25% / 15%); pressed-overlay is that fill in the dark theme, currentColor is the light label. */
.hig-ornament__item:hover:not(:disabled) {
  background:
    radial-gradient(closest-side at 50% 62%, color-mix(in srgb, currentColor 25%, transparent), transparent),
    var(--pressed-overlay);
}
.hig-ornament__item--pill:hover:not(:disabled) {
  background:
    radial-gradient(closest-side at 50% 62%, color-mix(in srgb, currentColor 15%, transparent), transparent),
    var(--pressed-overlay);
}
/* Selected: opaque white platter, black glyph and a soft shadow (kit Selected: white fill, black label, 0 3 5 black 12%). */
.hig-ornament__item.is-selected, .hig-ornament__item.is-selected:hover {
  background: var(--white); color: var(--black); box-shadow: 0 3px 5px 0 color-mix(in srgb, var(--black) 12%, transparent);
}
.hig-ornament__item:disabled { cursor: default; }
.hig-ornament__item:disabled > * { opacity: 0.3; } /* kit Disabled: symbol at 30% */

@media (prefers-reduced-motion: reduce) { .hig-ornament * { transition: none !important; } }

/* ---- PopUpButton ---- */
/* PopUpButton — macOS 27 kit Pop-up Buttons/Content Area (Mn 16, Sm 20, Rg 24, Lg 28, XL 36) and iOS 27 kit
   Lists/Rows/Accessories - Trailing/Pop-up Button. The menu itself is Menu (Menu.css). */
.hig-pop-up-button { position: relative; display: inline-flex; vertical-align: middle; }
.hig-pop-up-button__button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; font-family: var(--font-sans); white-space: nowrap; text-align: left;
  background: transparent; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.hig-pop-up-button__button:disabled { cursor: default; }
.hig-pop-up-button__value { display: inline-flex; align-items: center; gap: var(--button-icon-gap); flex: 1 1 auto; min-width: 0; }
.hig-pop-up-button__text { overflow: hidden; text-overflow: ellipsis; }
.hig-pop-up-button__indicator { flex: none; display: inline-flex; align-items: center; justify-content: center; }

/* ---- macOS: bordered fill (Content Area/01 - Bordered: 8% idle, 16% clicked, 4% disabled), Medium labels,
   a square indicator box as tall as the button on the trailing edge. */
.hig-pop-up-button--mac .hig-pop-up-button__button { background: var(--mac-fill-secondary); color: var(--mac-label-primary); font-weight: 500; padding-right: 0; }
.hig-pop-up-button__button--mini { height: var(--mac-control-mini); padding-left: var(--mac-button-padding-mini); border-radius: var(--radius-mac-mini); font-size: 10px; line-height: 12px; letter-spacing: 0.12px; }
.hig-pop-up-button__button--mini .hig-pop-up-button__indicator { width: 16px; height: 16px; }
.hig-pop-up-button__button--small { height: var(--mac-control-small); padding-left: var(--button-padding-small); border-radius: var(--radius-mac-small); font-size: 11px; line-height: 13px; letter-spacing: 0.06px; }
.hig-pop-up-button__button--small .hig-pop-up-button__indicator { width: 20px; height: 20px; }
.hig-pop-up-button__button--regular { height: var(--mac-control-regular); padding-left: 12px; border-radius: var(--radius-mac-regular); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* label at 12pt (kit 3 Rg) */
.hig-pop-up-button__button--regular .hig-pop-up-button__indicator { width: 24px; height: 24px; }
.hig-pop-up-button__button--large { height: var(--mac-control-large); padding-left: 14px; border-radius: var(--radius-capsule); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* label at 14pt (kit 4 Lg) */
.hig-pop-up-button__button--large .hig-pop-up-button__indicator { width: 28px; height: 28px; }
.hig-pop-up-button__button--xl { height: var(--mac-control-xl); padding-left: 18px; border-radius: var(--radius-capsule); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* label at 18pt (kit 5 XL) */
.hig-pop-up-button__button--xl .hig-pop-up-button__indicator { width: 36px; height: 36px; }
.hig-pop-up-button--mac .hig-pop-up-button__button:disabled { background: color-mix(in srgb, var(--mac-fill-secondary) 50%, transparent); color: var(--mac-label-tertiary); } /* kit 4 - Disabled: 4% fill */

/* ---- iOS: plain = the list-row accessory (17pt Secondary value, Tertiary indicator 10pt after it);
   bordered = the bordered medium button (tertiary fill, accent label). */
.hig-pop-up-button--ios .hig-pop-up-button__button { font-size: 17px; line-height: 22px; letter-spacing: -0.43px; }
.hig-pop-up-button__button--plain { height: 22px; padding: 0; gap: 10px; border-radius: var(--radius-capsule); color: var(--label-secondary); }
.hig-pop-up-button__button--plain .hig-pop-up-button__indicator { width: 12px; height: 22px; color: var(--label-tertiary); }
/* A 44pt minimum hit region around the 22pt accessory (HIG); the visual stays at kit size. */
.hig-pop-up-button__button--plain::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--target-ios)); height: var(--target-ios); transform: translate(-50%, -50%); }
.hig-pop-up-button__button--bordered { height: var(--button-medium); padding: 0 var(--button-padding-medium); gap: var(--button-icon-gap); border-radius: var(--radius-capsule); background: var(--fill-tertiary); color: var(--accent); }
.hig-pop-up-button__button--bordered .hig-pop-up-button__indicator { width: 12px; }
.hig-pop-up-button--ios .hig-pop-up-button__button:disabled { color: var(--label-tertiary); }
.hig-pop-up-button--ios .hig-pop-up-button__button--bordered:disabled { background: var(--fill-quaternary); }

/* ---- The menu: macOS positions it over the button from measurements (inline style); iOS opens it 8pt below
   (the kits give no offset; 8pt is this system's choice). */
.hig-pop-up-button__menu { position: absolute; z-index: 1000; }
.hig-pop-up-button__menu--leading { top: calc(100% + 8px); left: 0; }
.hig-pop-up-button__menu--trailing { top: calc(100% + 8px); right: 0; }

/* ---- PullDownButton ---- */
/* PullDownButton — macOS 27 kit Pulldown Buttons/Content Area (Mn 16, Sm 20, Rg 24, Lg 28, XL 36; chevron.down in a
   square box on the trailing edge) and the iOS 27 button kit sizes. The menu itself is Menu (Menu.css). */
.hig-pull-down-button { position: relative; display: inline-flex; vertical-align: middle; }
.hig-pull-down-button__button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); white-space: nowrap;
  background: transparent; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.hig-pull-down-button__button:disabled { cursor: default; }
.hig-pull-down-button__button > .hig-icon:first-child:not(:only-child) { margin-right: var(--button-icon-gap); }
.hig-pull-down-button__indicator { flex: none; display: inline-flex; align-items: center; justify-content: center; }

/* ---- macOS: bordered fill (8% idle, 16% clicked via the pressed overlay, 4% disabled), Medium labels. */
.hig-pull-down-button--mac .hig-pull-down-button__button { justify-content: flex-start; background: var(--mac-fill-secondary); color: var(--mac-label-primary); font-weight: 500; padding-right: 0; }
.hig-pull-down-button--mac .hig-pull-down-button__button--mini { height: var(--mac-control-mini); padding-left: var(--mac-button-padding-mini); border-radius: var(--radius-mac-mini); font-size: 10px; line-height: 14px; letter-spacing: 0.12px; }
.hig-pull-down-button--mac .hig-pull-down-button__button--mini .hig-pull-down-button__indicator { width: 16px; height: 16px; }
.hig-pull-down-button--mac .hig-pull-down-button__button--small { height: var(--mac-control-small); padding-left: var(--button-padding-small); border-radius: var(--radius-mac-small); font-size: 11px; line-height: 16px; letter-spacing: 0.06px; }
.hig-pull-down-button--mac .hig-pull-down-button__button--small .hig-pull-down-button__indicator { width: 20px; height: 20px; }
.hig-pull-down-button--mac .hig-pull-down-button__button--regular { height: var(--mac-control-regular); padding-left: 12px; border-radius: var(--radius-mac-regular); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* label at 12pt (kit 3 Rg) */
.hig-pull-down-button--mac .hig-pull-down-button__button--regular .hig-pull-down-button__indicator { width: 24px; height: 24px; }
.hig-pull-down-button--mac .hig-pull-down-button__button--large { height: var(--mac-control-large); padding-left: 14px; border-radius: var(--radius-capsule); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* label at 14pt (kit 4 Lg) */
.hig-pull-down-button--mac .hig-pull-down-button__button--large .hig-pull-down-button__indicator { width: 28px; height: 28px; }
.hig-pull-down-button--mac .hig-pull-down-button__button--xl { height: var(--mac-control-xl); padding-left: 18px; border-radius: var(--radius-capsule); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* label at 18pt (kit 5 XL) */
.hig-pull-down-button--mac .hig-pull-down-button__button--xl .hig-pull-down-button__indicator { width: 36px; height: 36px; }
.hig-pull-down-button--mac .hig-pull-down-button__button:disabled { background: color-mix(in srgb, var(--mac-fill-secondary) 50%, transparent); color: var(--mac-label-tertiary); } /* kit 4 - Disabled: 4% fill */

/* ---- iOS: the button kit's sizes (small 28 / medium 34 / large 50) and styles. */
.hig-pull-down-button--ios .hig-pull-down-button__button { border-radius: var(--radius-capsule); color: var(--accent); }
.hig-pull-down-button--ios .hig-pull-down-button__button--small { height: var(--button-small); padding: 0 var(--button-padding-small); font-size: 15px; line-height: 18px; letter-spacing: -0.23px; }
.hig-pull-down-button--ios .hig-pull-down-button__button--medium { height: var(--button-medium); padding: 0 var(--button-padding-medium); font-size: 17px; line-height: 18px; letter-spacing: -0.43px; }
.hig-pull-down-button--ios .hig-pull-down-button__button--large { height: var(--button-large); padding: 0 var(--button-padding-large); font-size: 17px; line-height: 18px; letter-spacing: -0.43px; }
.hig-pull-down-button--ios .hig-pull-down-button__button--icon-only { padding: 0; aspect-ratio: 1; }
/* chevron.down indicator: the kits draw none for iOS; it follows the label at the button's symbol gap. */
.hig-pull-down-button--ios .hig-pull-down-button__indicator { margin-left: var(--button-icon-gap); }
.hig-pull-down-button__button--bordered { background: var(--fill-tertiary); }
.hig-pull-down-button--ios .hig-pull-down-button__button--glass { color: var(--glass-label-primary); font-weight: 500; }
.hig-pull-down-button--ios .hig-pull-down-button__button.hig-glass:active:not(:disabled) { background-color: var(--pressed-overlay); }
/* A 44pt minimum hit region around small and medium buttons (HIG); the visual stays at kit size. */
.hig-pull-down-button--ios .hig-pull-down-button__button--small:not(.hig-glass)::before,
.hig-pull-down-button--ios .hig-pull-down-button__button--medium:not(.hig-glass)::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--target-ios)); height: var(--target-ios); transform: translate(-50%, -50%);
}
.hig-pull-down-button--ios .hig-pull-down-button__button:disabled { color: var(--label-tertiary); }
.hig-pull-down-button--ios .hig-pull-down-button__button--bordered:disabled { background: var(--fill-quaternary); }

/* ---- The menu: macOS 3pt below the button with its selection edge 5pt outside the button's leading edge (the offsets
   the kit's menu bar example uses); iOS 8pt below (the kits give no offset; this system's choice). */
.hig-pull-down-button__menu { position: absolute; z-index: 1000; }
.hig-pull-down-button--mac .hig-pull-down-button__menu--leading { top: calc(100% + 3px); left: -5px; }
.hig-pull-down-button--mac .hig-pull-down-button__menu--trailing { top: calc(100% + 3px); right: -5px; }
.hig-pull-down-button--ios .hig-pull-down-button__menu--leading { top: calc(100% + 8px); left: 0; }
.hig-pull-down-button--ios .hig-pull-down-button__menu--trailing { top: calc(100% + 8px); right: 0; }

/* ---- Toolbar ---- */
/* Toolbar — geometry from the iOS 27 kit (Toolbars page: iPhone Top - Standard / Bottom, iPad Top / Bottom,
   iPhone Duo vertical bar, Buttons 34/44/48pt) and the macOS 27 kit (Titlebars and Toolbars XL/Medium,
   Windows/Unified Toolbar + Title, Unified Compact Toolbar + Title). Colors are tokens; literal px are kit values. */
.hig-toolbar {
  position: relative; box-sizing: border-box; width: 100%;
  font-family: var(--font-sans); color: var(--glass-label-primary);
  -webkit-tap-highlight-color: transparent;
}
.hig-toolbar__row, .hig-toolbar__large, .hig-toolbar__title-row { position: relative; z-index: 1; }

/* ---- Scroll edge effect (kit Scroll Edge Effect symbols) ---- */
.hig-toolbar__edge { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Soft: a background blur masked by a gradient that starts at 60% (kit "Top - Soft (no text)", blur r100). Browsers
   don't render a 100px backdrop blur on a bar-height element, so blur-glass (30px) stands in. The mask uses only
   alpha; currentColor at 60% supplies the 0.6 starting alpha without a literal color. */
.hig-toolbar__edge--soft {
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  -webkit-mask-image: linear-gradient(to bottom, color-mix(in srgb, currentColor 60%, transparent), transparent);
  mask-image: linear-gradient(to bottom, color-mix(in srgb, currentColor 60%, transparent), transparent);
}
.hig-toolbar--bottom .hig-toolbar__edge--soft,
.hig-toolbar--vertical .hig-toolbar__edge--soft {
  -webkit-mask-image: linear-gradient(to top, color-mix(in srgb, currentColor 60%, transparent), transparent);
  mask-image: linear-gradient(to top, color-mix(in srgb, currentColor 60%, transparent), transparent);
}
/* Hard: the background color at 85% opacity over a 6pt blur, with a hairline (kit "Top - Hard"; the kit hairline is
   5% black — `separator`, the token for toolbar edges, stands in). */
.hig-toolbar__edge--hard {
  background: color-mix(in srgb, var(--background-primary) 85%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 -0.67px 0 var(--separator);
}
.hig-toolbar--mac .hig-toolbar__edge--hard { background: color-mix(in srgb, var(--mac-window-background) 85%, transparent); }
.hig-toolbar--bottom .hig-toolbar__edge--hard { box-shadow: inset 0 0.67px 0 var(--separator); }
/* The dark Hard edge uses 55% opacity instead of 85% (kit Scroll Edge Effect/Dark/Top - Hard). */
[data-theme^="dark"] .hig-toolbar__edge--hard { background: color-mix(in srgb, var(--background-primary) 55%, transparent); }
[data-theme^="dark"] .hig-toolbar--mac .hig-toolbar__edge--hard { background: color-mix(in srgb, var(--mac-window-background) 55%, transparent); }

/* ---- iOS / iPadOS layout ---- */
/* iPhone top bar 402×54: 44pt row, 16pt side margins, 10pt below (kit iPhone/Top - Standard/Title). */
.hig-toolbar--ios.hig-toolbar--top { padding: 0 var(--margin-compact) 10px; }
/* iPad top bar 1210×54: 20pt side margins (kit iPad/Top/Default Title). */
.hig-toolbar--ipad.hig-toolbar--top { padding: 0 20px 10px; }
/* iPhone bottom toolbar 402×56: 48pt platters at 28,4 (kit iPhone/Bottom/Controls). */
.hig-toolbar--ios.hig-toolbar--bottom { padding: 4px 28px; }
/* iPad bottom toolbar: 44pt platters, one row (kit iPad/Bottom/Left, Center and Right). */
.hig-toolbar--ipad.hig-toolbar--bottom { padding: 0 20px; }

.hig-toolbar__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  column-gap: var(--padding-bezeled); min-height: var(--toolbar-button);
}
.hig-toolbar--items-48 .hig-toolbar__row { min-height: 48px; }
.hig-toolbar__side { display: flex; align-items: center; gap: var(--padding-bezeled); min-width: 0; } /* platters 56pt apart = 44 + 12 (kit) */
/* Titles sit at their kit offsets from the top of the row, but the sides fill the row height so a smaller item
   (the 34pt close button) centers on the 44pt (48pt) row like the platters beside it. */
.hig-toolbar--ios:not(.hig-toolbar--vertical) .hig-toolbar__side,
.hig-toolbar--ipad:not(.hig-toolbar--vertical) .hig-toolbar__side { align-self: stretch; }
.hig-toolbar__side > .hig-toolbar__title--leading { align-self: flex-start; }
.hig-toolbar__side--trailing { justify-content: flex-end; }
.hig-toolbar__middle { display: flex; align-items: center; justify-content: center; gap: var(--padding-bezeled); min-width: 0; }
.hig-toolbar__custom { display: flex; align-items: center; flex: none; min-width: 0; }

/* Platters (kit Buttons/44pt): a group is 44pt tall, 36pt items at 6,4 that sit 56pt apart; a single item is a
   44pt circle holding a 36pt item at 4,4. */
.hig-toolbar__platter {
  display: inline-flex; align-items: center; flex: none; box-sizing: border-box;
  height: var(--toolbar-button); padding: 4px 6px; gap: 20px;
}
.hig-toolbar__platter--single { padding: 4px; gap: 0; }
.hig-toolbar__platter--inactive { background: var(--glass-inactive); box-shadow: 0 0 0 0.5px var(--separator); } /* kit Regular - Small - Inactive */
.hig-toolbar__item {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  box-sizing: border-box; width: 36px; height: 36px; border-radius: var(--radius-capsule);
  background: transparent; color: inherit; font: 500 17px/22px var(--font-sans); letter-spacing: -0.43px; /* 17pt Medium (kit) */
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
/* 44pt minimum hit region around 36pt items (HIG); the visual stays at kit size. */
.hig-toolbar__item::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, var(--target-ios)); height: max(100%, var(--target-ios)); transform: translate(-50%, -50%);
}
.hig-toolbar__item--text { width: auto; padding: 0 8px; } /* + 4pt platter inset = label 12pt from the edge (kit Text 67×44) */
.hig-toolbar__item.is-selected { background: var(--accent); color: var(--on-accent); } /* kit Buttons - Symbol/Selected */
.hig-toolbar__item:disabled { color: var(--glass-label-tertiary); cursor: default; } /* kit Buttons - Symbol/Disabled */
.hig-toolbar__item .hig-icon { pointer-events: none; }
.hig-toolbar__platter--prominent .hig-toolbar__item { color: inherit; }
.hig-toolbar__platter--prominent .hig-toolbar__item:disabled { color: var(--glass-label-tertiary); }
.hig-toolbar__platter--inactive.hig-toolbar__platter--prominent { color: var(--glass-label-primary); } /* kit Inactive/Symbol 1 - Prominent */

/* Close button: 34pt circle, 20pt Medium xmark (kit Buttons/34pt/Close Button), inside a 44pt hit region. */
.hig-toolbar__platter--close { width: 34px; height: 34px; padding: 0; gap: 0; border-radius: 50%; }
.hig-toolbar__platter--close .hig-toolbar__item { width: 34px; height: 34px; font-size: 20px; line-height: 22px; }

/* 48pt platters for iPhone bottom toolbars and iPhone Duo side bars (kit Buttons/48pt): group padding 10/6 with
   36pt items 54pt apart; a single item is a 48pt circle holding a 40pt item. */
.hig-toolbar--items-48 .hig-toolbar__platter { height: 48px; padding: 6px 10px; gap: 18px; }
.hig-toolbar--items-48 .hig-toolbar__platter--single { padding: 4px; gap: 0; }
.hig-toolbar--items-48 .hig-toolbar__platter--single .hig-toolbar__item { width: 40px; height: 40px; }
.hig-toolbar--items-48 .hig-toolbar__platter--single .hig-toolbar__item--text { width: auto; padding: 0 9px; } /* label at 13pt (kit Text 69×48) */
.hig-toolbar--items-48 .hig-toolbar__platter--close { height: 34px; padding: 0; }

/* Search field platter: 180pt wide, magnifier 26pt box at 11pt, 17pt Regular text at 41pt (kit Search - Bottom). */
.hig-toolbar__search { width: 180px; padding: 0 11px; gap: 4px; color: var(--glass-label-secondary); cursor: text; }
.hig-toolbar__search--grow { flex: 1 1 auto; width: auto; min-width: 0; }
.hig-toolbar__search-glyph { display: inline-flex; justify-content: center; width: 26px; flex: none; font-size: 17px; }
.hig-toolbar__search input {
  appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--glass-label-primary); outline: none;
  font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px;
}
.hig-toolbar__search input::placeholder { color: var(--glass-label-secondary); opacity: 1; }
.hig-toolbar__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hig-toolbar__search:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hig-toolbar--items-48 .hig-toolbar__search { padding: 0 11px; }

/* Titles (kit Titles - iPhone / Titles - iPad). Single line: 17pt Semibold, 13pt from the top of the 44pt row. */
.hig-toolbar__title { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; color: var(--glass-label-primary); }
.hig-toolbar__title-text {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 17px/22px var(--font-sans); letter-spacing: -0.43px; /* ios-headline */
}
.hig-toolbar--ios .hig-toolbar__title--center, .hig-toolbar--ipad .hig-toolbar__title--center,
.hig-toolbar--ios .hig-toolbar__title--leading, .hig-toolbar--ipad .hig-toolbar__title--leading { margin-top: 13px; }
.hig-toolbar__subtitle {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 12px/16px var(--font-sans); letter-spacing: 0; color: var(--glass-label-secondary); /* 12pt Medium (kit) */
}
/* iPhone two-line title 46×39 at y=3: 15pt Semibold title at +2, 12pt Medium subtitle at +22 (kit Title and Subtitle). */
.hig-toolbar--ios .hig-toolbar__title--two-line { margin-top: 3px; }
.hig-toolbar--ios .hig-toolbar__title--two-line .hig-toolbar__title-text { padding-top: 2px; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; }
/* iPad two-line title at y=4: 17pt Semibold title, 12pt Medium subtitle (kit Titles - iPad/Title and Subtitle). */
.hig-toolbar--ipad .hig-toolbar__title--two-line { margin-top: 4px; }
.hig-toolbar__title--leading { align-items: flex-start; text-align: start; }
.hig-toolbar--ios .hig-toolbar__title--leading.hig-toolbar__title--two-line { margin-top: 3.5px; }

/* iPad: a center group (the tab bar) moves the title to a second row at y=65 (kit iPad/Tab Bar/Default Title, 98pt). */
.hig-toolbar__title-row { display: flex; justify-content: center; padding: 21px 0 1px; }
.hig-toolbar .hig-toolbar__title-row .hig-toolbar__title { margin-top: 0; }
.hig-toolbar__title-row:has(.hig-toolbar__title--two-line) { padding-top: 14px; margin-bottom: -8px; } /* two-line block at y=58 */

/* Large title: 34pt Bold at x=16, y=54 (iPhone 402×105) / x=30, y=54 (iPad 1210×102); subtitle 15pt Medium. */
.hig-toolbar__large { display: flex; flex-direction: column; padding-top: 10px; min-width: 0; color: var(--glass-label-primary); }
.hig-toolbar--ipad .hig-toolbar__large { padding-inline-start: 10px; margin-bottom: -3px; }
.hig-toolbar--ipad .hig-toolbar__large:has(.hig-toolbar__large-subtitle) { margin-bottom: 0; }
.hig-toolbar__large-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 34px/41px var(--font-sans); letter-spacing: 0.4px; /* ios-large-title-emphasized */
}
.hig-toolbar__large-subtitle {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 15px/20px var(--font-sans); letter-spacing: -0.23px; color: var(--glass-label-secondary); /* 15pt Medium (kit) */
}

/* ---- iPhone Duo side toolbar: 84pt bar, 48pt platters 12pt from the content side and 24pt from the screen
   edge, starting 24pt down; groups 12pt apart (kit Examples/Toolbar/iPhone Duo, Vertical Group - Symbol 2/3). */
.hig-toolbar--vertical { width: 84px; padding: 24px 24px 24px 12px; padding-inline: 12px 24px; }
.hig-toolbar--vertical .hig-toolbar__row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--padding-bezeled); min-height: 0; }
.hig-toolbar--vertical .hig-toolbar__side { flex-direction: column; align-items: flex-start; }
.hig-toolbar--vertical .hig-toolbar__platter { flex-direction: column; width: 48px; height: auto; padding: 10px 6px; gap: 18px; }
.hig-toolbar--vertical .hig-toolbar__platter--single { height: 48px; padding: 4px; gap: 0; }
.hig-toolbar--vertical .hig-toolbar__platter--close { width: 34px; height: 34px; padding: 0; margin-inline-start: 7px; }

/* ---- macOS unified title bar and toolbar: 52pt bar, 36pt items at y=8, 8pt from the edges and between
   groups (kit Windows/Unified Toolbar + Title); compact 40pt bar, 24pt items, 12pt between groups. ---- */
.hig-toolbar--mac { height: 52px; padding: 8px; color: var(--glass-label-primary); }
.hig-toolbar--mac .hig-toolbar__row { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.hig-toolbar--mac .hig-toolbar__side { gap: 8px; }
.hig-toolbar--mac .hig-toolbar__side--leading { flex: 1 1 auto; }
.hig-toolbar--mac .hig-toolbar__side--trailing { flex: none; }
.hig-toolbar--mac .hig-toolbar__middle { flex: none; gap: 8px; }
/* XL group: 4pt inset, 28pt items 37pt apart, 13pt Medium symbols (kit XL/Buttons/Active/1–6). */
.hig-toolbar--mac .hig-toolbar__platter { height: 36px; padding: 4px; gap: 9px; }
.hig-toolbar--mac .hig-toolbar__item { width: 28px; height: 28px; font-size: 13px; line-height: 15px; letter-spacing: 0; }
.hig-toolbar--mac .hig-toolbar__item::before { width: max(100%, var(--target-mac)); height: max(100%, var(--target-mac)); }
.hig-toolbar--mac .hig-toolbar__item--text { width: auto; padding: 0 8px; }
.hig-toolbar--mac .hig-toolbar__item.is-selected { background: var(--mac-fill-secondary); color: inherit; } /* kit Button Group Buttons/2 - Selected */
.hig-toolbar--mac .hig-toolbar__platter--close { width: 28px; height: 28px; }
.hig-toolbar--mac .hig-toolbar__platter--close .hig-toolbar__item { width: 28px; height: 28px; font-size: 13px; }
/* XL search field 159pt: magnifier 16pt box at 10pt, 13pt Medium text at 32pt (kit XL/Search/Active/Placeholder). */
.hig-toolbar--mac .hig-toolbar__search { width: 159px; padding: 0 10px; gap: 6px; }
.hig-toolbar--mac .hig-toolbar__search-glyph { width: 16px; font-size: 13px; }
.hig-toolbar--mac .hig-toolbar__search input { font: 500 13px/16px var(--font-sans); letter-spacing: 0; }

.hig-toolbar--mac.hig-toolbar--compact { height: 40px; }
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__row,
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__side,
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__middle { gap: 12px; min-height: 24px; }
/* Medium group: 2pt inset, 20pt items 24pt apart, 10pt Semibold symbols (kit Medium/Buttons/Active/1–6). */
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__platter { height: 24px; padding: 2px; gap: 4px; }
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__item { width: 20px; height: 20px; font-size: 10px; line-height: 12px; }
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__item--text { width: auto; padding: 0 6px; font-size: 13px; line-height: 16px; }
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__platter--close,
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__platter--close .hig-toolbar__item { width: 20px; height: 20px; font-size: 10px; }
/* Medium search 149pt: magnifier at 6pt, text at 26pt (kit Medium/Search/Active/Placeholder). */
.hig-toolbar--mac.hig-toolbar--compact .hig-toolbar__search { width: 149px; padding: 0 6px; gap: 4px; }

/* Window title: 13pt Bold (15pt Bold with a sidebar), 11pt Medium tertiary subtitle at +17 (kit Window/Title). */
.hig-toolbar--mac .hig-toolbar__title { align-items: flex-start; text-align: start; flex: 0 1 auto; color: var(--mac-label-primary); }
.hig-toolbar--mac .hig-toolbar__title-text { font: 700 13px/15px var(--font-sans); letter-spacing: 0; }
.hig-toolbar--mac.hig-toolbar--with-sidebar .hig-toolbar__title-text { font-size: 15px; letter-spacing: -0.2px; }
.hig-toolbar--mac .hig-toolbar__subtitle { margin-top: 2px; font: 500 11px/13px var(--font-sans); letter-spacing: 0; color: var(--mac-label-tertiary); }

/* Window controls: three 14pt circles 23pt apart at x=18 (unified) / x=13 (compact) (kit Titlebars/Window Controls). */
.hig-toolbar__window-controls { display: inline-flex; align-items: center; gap: 9px; flex: none; margin-inline-start: 10px; }
.hig-toolbar--compact .hig-toolbar__window-controls { margin-inline-start: 5px; }
.hig-toolbar__window-controls > span { width: 14px; height: 14px; border-radius: 50%; background: var(--system-red); }
.hig-toolbar__window-controls > span:nth-child(2) { background: var(--system-yellow); }
.hig-toolbar__window-controls > span:nth-child(3) { background: var(--system-green); }
.hig-toolbar--inactive .hig-toolbar__window-controls > span { background: var(--mac-fill-primary); }
.hig-toolbar--inactive .hig-toolbar__title { color: var(--mac-label-secondary); }

@media (prefers-reduced-motion: reduce) { .hig-toolbar * { transition: none !important; } }

/* A growing search field (iPhone bottom toolbar search) turns the row into a flex row (kit Bottom/Search + Leading Item). */
.hig-toolbar__row:has(.hig-toolbar__search--grow) { display: flex; }
.hig-toolbar__side:has(.hig-toolbar__search--grow) { flex: 1 1 auto; }
.hig-toolbar__row:has(.hig-toolbar__search--grow) > .hig-toolbar__middle:empty { display: none; }

/* ---- PathControl ---- */
/* PathControl — macOS only (NSPathControl). The HIG gives no geometry; the pop-up style uses the macOS 27 kit
   Pop-up Buttons (Sm/Rg) and Menus/Regular; the standard style sits on the kit's control heights. */
.hig-path-control {
  position: relative; display: inline-flex; max-width: 100%; min-width: 0; box-sizing: border-box;
  font-family: var(--font-sans); font-weight: 500; color: var(--mac-label-primary); /* kit control labels: SF Pro Medium */
}
.hig-path-control--regular { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; --hig-pc-h: var(--mac-control-regular); --hig-pc-r: var(--radius-mac-regular); }
.hig-path-control--small { font-size: 11px; line-height: 14px; letter-spacing: 0.06px; --hig-pc-h: var(--mac-control-small); --hig-pc-r: var(--radius-mac-small); }
.hig-path-control__icon { color: var(--accent); } /* chosen: tinted item glyphs, as in Finder's path bar */
.hig-path-control.is-disabled { color: var(--mac-label-tertiary); }
.hig-path-control.is-disabled .hig-path-control__icon { color: var(--mac-label-tertiary); }
.hig-path-control.is-drop-target { outline: 3.5px solid color-mix(in srgb, var(--focus-ring) 50%, transparent); outline-offset: 1px; border-radius: var(--hig-pc-r); } /* kit focus ring: accent 50% */

/* ---- standard: root disk → parent folders → selected item ---- */
.hig-path-control--standard { width: 100%; overflow: hidden; }
.hig-path-control__list {
  display: flex; align-items: center; min-width: 0; height: var(--hig-pc-h); margin: 0; padding: 0; list-style: none; white-space: nowrap;
}
.hig-path-control__measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; width: max-content; }
.hig-path-control__item { display: flex; align-items: center; flex: none; min-width: 0; }
.hig-path-control__item.is-last { flex: 0 1 auto; }
.hig-path-control__sep { flex: none; margin: 0 2px; color: var(--mac-label-tertiary); } /* chosen: the HIG doesn't specify the separator glyph */
.hig-path-control__component {
  display: inline-flex; align-items: center; gap: var(--button-icon-gap); min-width: 0; height: var(--hig-pc-h);
  margin: 0; border: 0; padding: 0 4px; border-radius: var(--hig-pc-r); background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; cursor: default; white-space: nowrap;
}
.hig-path-control__component:hover:not(:disabled) { background: var(--mac-fill-tertiary); }
.hig-path-control__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- pop-up: kit Pop-up Buttons/Content Area — Rg 24pt r6, label at x=12, 24pt chevron cell; Sm 20pt r5, x=10, 20pt cell */
.hig-path-control__popup {
  display: inline-flex; align-items: center; gap: var(--button-icon-gap); max-width: 100%; box-sizing: border-box;
  height: var(--hig-pc-h); margin: 0; border: 0; padding: 0 0 0 12px; border-radius: var(--hig-pc-r);
  background: var(--mac-fill-secondary); color: var(--mac-label-primary); font: inherit; letter-spacing: inherit; cursor: default; white-space: nowrap;
}
.hig-path-control--small .hig-path-control__popup { padding-left: 10px; }
.hig-path-control__popup-chevron { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--hig-pc-h); height: var(--hig-pc-h); margin-left: -4px; } /* cancels the icon gap so the label meets the 24pt cell as in the kit */
.hig-path-control__popup:disabled { background: color-mix(in srgb, var(--mac-fill-secondary) 50%, transparent); color: var(--mac-label-tertiary); } /* kit 4 - Disabled: black 4% */
.hig-path-control__popup:disabled .hig-path-control__icon { color: var(--mac-label-tertiary); }

/* ---- path menu: the macOS Menu (Menu.css: kit Menus, macOS menu material and shadow) in the control's size, placed
   from measurements (inline style) so the selected item sits over the button, level with it — NSPopUpButton's
   placement, as in PopUpButton. Item icons keep the control's accent tint (chosen, as above). */
.hig-path-control__menu { position: absolute; z-index: 1000; }
.hig-path-control__menu .hig-menu__icon { color: var(--accent); }
.hig-path-control__menu .hig-menu__item--active .hig-menu__icon { color: var(--on-accent); }

/* ---- SearchField ---- */
/* SearchField — iOS 27 kit (Toolbars/Search - Bottom, Sidebar/Search, Toolbars/iPad Tab Bar/Search Field + Filter,
   Segmented Controls) and macOS 27 kit (Search Fields, Titlebars and Toolbars/Search, Segmented Controls). */
.hig-search-field {
  display: flex; flex-direction: column; gap: 8px; /* kit iPad "Search Field + Filter": filter sits 8pt after the field */
  min-width: 0; box-sizing: border-box; font-family: var(--font-sans);
}
.hig-search-field__row { display: flex; align-items: center; gap: 8px; min-width: 0; } /* kit: field → 48pt close button gap 8 */
.hig-search-field__field {
  position: relative; flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; border-radius: var(--radius-capsule); cursor: text;
}
.hig-search-field__input {
  flex: 1 1 auto; min-width: 0; align-self: stretch; margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; font: inherit; letter-spacing: inherit; color: inherit;
  caret-color: var(--accent); /* kit Text Fields/Cursor and Search Fields I-beam: 2pt accent bar */
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
.hig-search-field__input::-webkit-search-cancel-button,
.hig-search-field__input::-webkit-search-decoration,
.hig-search-field__input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; }
.hig-search-field__input::placeholder { color: var(--hig-sf-placeholder); opacity: 1; }
.hig-search-field__glyph {
  flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--hig-sf-glyph);
}
.hig-search-field__clear,
.hig-search-field__mic {
  flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: default; color: var(--hig-sf-glyph-trailing);
  -webkit-tap-highlight-color: transparent;
}
.hig-search-field__clear:active:not(:disabled) { color: var(--hig-sf-clear-pressed); }

/* ---------- iOS / iPadOS ---------- */
.hig-search-field--ios .hig-search-field__field {
  height: var(--target-ios); /* kit Sidebar/Search and iPad toolbar search: 44pt */
  padding: 0 11px; /* kit: magnifying glass at x=11, mic ends 11pt from the trailing edge */
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; /* kit 17pt, lh 22 (ios-body metrics) */
}
.hig-search-field--ios.hig-search-field--large .hig-search-field__field { height: 48px; } /* kit iPhone bottom toolbar / search tab field 48pt */
.hig-search-field--ios .hig-search-field__glyph { width: 26px; height: 22px; margin-right: 8px; } /* kit glyph cell 26x22; inline text at x=45 */
.hig-search-field--ios.hig-search-field--glass .hig-search-field__glyph { margin-right: 4px; } /* kit glass field: text at x=41 */
.hig-search-field--ios .hig-search-field__mic { width: 18px; height: 22px; margin-left: 4px; } /* kit mic cell 18x22 */
.hig-search-field--ios .hig-search-field__clear { width: 20px; height: 22px; margin-left: 3px; margin-right: -1px; } /* kit clear 20x22, 10pt from the edge */
/* 44pt hit regions around the small trailing glyphs (HIG minimum targets) */
.hig-search-field--ios .hig-search-field__clear::before,
.hig-search-field--ios .hig-search-field__mic::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--target-ios); height: var(--target-ios); transform: translate(-50%, -50%);
}

/* inline (content layer): kit Sidebar/Search — tertiary fill, Medium 17pt, secondary glyphs and placeholder */
.hig-search-field--ios:not(.hig-search-field--glass) .hig-search-field__field {
  background: var(--fill-tertiary); color: var(--label-primary); font-weight: 500;
  --hig-sf-placeholder: var(--label-secondary); --hig-sf-glyph: var(--label-secondary);
  --hig-sf-glyph-trailing: var(--label-secondary); --hig-sf-clear-pressed: var(--label-primary);
}
/* glass, 48pt (iPhone): kit Toolbars/Search - Bottom 180x48 — Regular 17pt, Liquid Glass labels */
.hig-search-field--ios.hig-search-field--glass .hig-search-field__field {
  color: var(--glass-label-primary); font-weight: 400;
  --hig-sf-placeholder: var(--glass-label-secondary); --hig-sf-glyph: var(--glass-label-secondary);
  --hig-sf-glyph-trailing: var(--glass-label-secondary); --hig-sf-clear-pressed: var(--glass-label-primary);
}
/* glass, 44pt (iPad tab bar): kit Search - Bottom 180x44 — Medium 17pt, vibrant labels */
.hig-search-field--ios.hig-search-field--glass.hig-search-field--regular .hig-search-field__field {
  color: var(--vibrant-label-primary); font-weight: 500;
  --hig-sf-placeholder: var(--vibrant-label-secondary); --hig-sf-glyph: var(--vibrant-label-secondary);
  --hig-sf-glyph-trailing: var(--vibrant-label-secondary); --hig-sf-clear-pressed: var(--vibrant-label-primary);
}
.hig-search-field--ios .hig-search-field__field:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hig-search-field--ios.is-disabled .hig-search-field__field { color: var(--label-tertiary); --hig-sf-placeholder: var(--label-tertiary); --hig-sf-glyph: var(--label-tertiary); cursor: default; }
.hig-search-field--ios.is-disabled:not(.hig-search-field--glass) .hig-search-field__field { background: var(--fill-quaternary); }

/* separate close button beside a focused search-tab field: kit Tab Bars/Search Selected - Typing, 48pt glass circle */
.hig-search-field__cancel {
  flex: none; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; background-color: transparent; cursor: default;
  display: inline-flex; align-items: center; justify-content: center; color: var(--glass-label-primary);
}
.hig-search-field--regular .hig-search-field__cancel { width: var(--target-ios); height: var(--target-ios); }
.hig-search-field__cancel:active:not(:disabled) { background-color: var(--pressed-overlay); }

/* ---------- scope bars ---------- */
.hig-search-field__scope {
  position: relative; margin: 0; border: 0; padding: 0; background: transparent; color: inherit; cursor: default;
  font: inherit; letter-spacing: inherit; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.hig-search-field__scope:disabled { color: var(--label-tertiary); }
/* reserve the selected (heavier) label width so segments don't shift */
.hig-search-field__scope-label { display: inline-grid; }
.hig-search-field__scope-label::after { content: attr(data-label); height: 0; visibility: hidden; overflow: hidden; font-weight: 600; }

/* iOS glass filter: kit Toolbars/iPad Tab Bar/Search Field + Filter — 44pt glass capsule, 117x36 buttons,
   14pt labels (Semibold selected, Medium otherwise), selected background Fills - Vibrant/2 Secondary */
.hig-search-field__scopes--glass {
  flex: none; display: inline-flex; align-items: center; box-sizing: border-box;
  height: var(--target-ios); padding: 4px 8px; color: var(--glass-label-primary);
  font-size: 14px; line-height: 18px; font-weight: 500;
}
.hig-search-field--large .hig-search-field__scopes--glass { height: 48px; padding: 6px 8px; } /* matches a 48pt field; buttons stay 36pt */
.hig-search-field__scopes--glass .hig-search-field__scope { height: 36px; min-width: 117px; padding: 0 var(--button-padding-medium); border-radius: var(--radius-capsule); }
.hig-search-field__scopes--glass .hig-search-field__scope.is-selected { background: var(--vibrant-fill-secondary); font-weight: 600; }

/* iOS segmented scope bar below an inline field: kit Segmented Controls/Small — 32pt track, 2pt inset, 4pt gap */
.hig-search-field__scopes--segmented {
  display: flex; box-sizing: border-box; height: var(--segmented-small); padding: var(--segment-inset); gap: var(--segment-gap);
  border-radius: var(--radius-capsule); background: var(--fill-tertiary); color: var(--label-primary);
  font-size: 13.333px; line-height: 18px; letter-spacing: -0.4px; font-weight: 500; /* kit segment label 13.333pt, kern -0.4 */
  --hig-sf-knob: var(--background-primary);
  --hig-sf-knob-shadow: 0 2px 20px 0 color-mix(in srgb, var(--label-primary) 6%, transparent); /* kit 5 - Selected: 0 2 20, black 6% */
}
[data-theme^="dark"] .hig-search-field__scopes--segmented {
  --hig-sf-knob: color-mix(in srgb, var(--label-primary) 27%, transparent); /* kit Dark/5 - Selected: white at 27% */
  --hig-sf-knob-shadow: none;
}
.hig-search-field__scopes--segmented .hig-search-field__scope { flex: 1 1 0; min-width: 0; height: 28px; border-radius: var(--radius-capsule); }
.hig-search-field__scopes--segmented .hig-search-field__scope.is-selected { background: var(--hig-sf-knob); box-shadow: var(--hig-sf-knob-shadow); font-weight: 600; }

/* macOS scope bar: kit Segmented Controls/Content Area — regular 24pt, radius 6, secondary fill, accent "on" segment */
.hig-search-field__scopes--mac {
  display: inline-flex; align-self: flex-start; height: var(--mac-control-regular); border-radius: var(--radius-mac-regular);
  background: var(--mac-fill-secondary); color: var(--mac-label-primary);
  font-size: 13px; line-height: 16px; letter-spacing: -0.08px; font-weight: 500;
}
.hig-search-field__scopes--mac .hig-search-field__scope { height: 100%; min-width: 30px; padding: 0 8px; border-radius: var(--radius-mac-regular); } /* kit segment 30pt min; 8pt text padding chosen */
.hig-search-field__scopes--mac .hig-search-field__scope.is-selected { background: var(--accent); color: var(--on-accent); }
.hig-search-field__scopes--mac .hig-search-field__scope.has-separator::before {
  content: ""; position: absolute; left: -0.5px; top: 5px; bottom: 5px; width: 1px; border-radius: 1px; background: var(--mac-label-quinary); /* kit Separator/On 1x14 */
}
.hig-search-field__scopes--mac .hig-search-field__scope:disabled { color: var(--mac-label-tertiary); }

/* ---------- macOS content-area search fields (kit Search Fields, sizes Mn/Sm/Rg/Lg/XL) ---------- */
.hig-search-field--mac .hig-search-field__field {
  background: var(--mac-window-background); color: var(--mac-label-primary); font-weight: 500;
  --hig-sf-placeholder: var(--mac-label-secondary); --hig-sf-glyph: var(--mac-label-primary);
  --hig-sf-glyph-trailing: var(--mac-label-secondary); --hig-sf-clear-pressed: var(--mac-label-primary);
  --hig-sf-edge: color-mix(in srgb, var(--label-primary) 5%, transparent); /* kit: 1pt outside border, black 5% */
  box-shadow: 0 0 0 1px var(--hig-sf-edge);
}
[data-theme^="dark"] .hig-search-field--mac .hig-search-field__field { --hig-sf-edge: color-mix(in srgb, var(--label-primary) 4%, transparent); } /* kit dark: white 4% */
/* kit Input Fields/03 - Focus Ring: 3.5pt outside + 1pt inside, accent at 50% */
.hig-search-field--mac .hig-search-field__field:focus-within {
  box-shadow: 0 0 0 1px var(--hig-sf-edge), 0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent);
}
.hig-search-field--mac .hig-search-field__glyph { position: relative; justify-content: flex-start; gap: 0; }
/* Recents-menu chevron (kit Magnifying Glass/with Menu): SM–XL a 6×3.67pt chevron at x 12.5 of the 21pt cell, which
   leaves 5.5pt to the text; mini 5×3pt at x 10.67 of 17pt (4.33pt to the text). The box is sized so the stroked
   glyph's outer edge matches those bounds. */
.hig-search-field--mac .hig-search-field__menu-chevron { position: absolute; left: 11.2px; top: 50%; transform: translateY(-50%); }
.hig-search-field--mac.hig-search-field--mini .hig-search-field__menu-chevron { left: 9.5px; }
.hig-search-field--mac .hig-search-field__clear { margin-left: 2px; }

.hig-search-field--mac.hig-search-field--mini .hig-search-field__field { height: var(--mac-control-mini); padding: 0 2px 0 6px; font-size: 10px; letter-spacing: 0.12px; }
.hig-search-field--mac.hig-search-field--mini .hig-search-field__glyph { width: 17px; margin-right: 3px; } /* glyph cell 17 at x=6, text x=26 */
.hig-search-field--mac.hig-search-field--mini .hig-search-field__clear { width: 13px; height: 13px; }
.hig-search-field--mac.hig-search-field--small .hig-search-field__field { height: var(--mac-control-small); padding: 0 2.5px 0 6px; font-size: 11px; letter-spacing: 0.06px; }
.hig-search-field--mac.hig-search-field--small .hig-search-field__glyph { width: 21px; margin-right: 3px; } /* x=6, text x=30 */
.hig-search-field--mac.hig-search-field--regular .hig-search-field__field { height: var(--mac-control-regular); padding: 0 4px 0 8px; font-size: 13px; letter-spacing: -0.08px; }
.hig-search-field--mac.hig-search-field--regular .hig-search-field__glyph { width: 21px; margin-right: 3px; } /* x=8, text x=32 */
.hig-search-field--mac.hig-search-field--large .hig-search-field__field { height: var(--mac-control-large); padding: 0 6px 0 8px; font-size: 13px; letter-spacing: -0.08px; }
.hig-search-field--mac.hig-search-field--large .hig-search-field__glyph { width: 21px; margin-right: 3px; } /* x=8, text x=32 */
.hig-search-field--mac.hig-search-field--xl .hig-search-field__field { height: var(--mac-control-xl); padding: 0 8px 0 10px; font-size: 13px; letter-spacing: -0.08px; }
.hig-search-field--mac.hig-search-field--xl .hig-search-field__glyph { width: 21px; margin-right: 3px; } /* x=10, text x=34 */
.hig-search-field--mac:not(.hig-search-field--mini) .hig-search-field__clear { width: 16px; height: 15px; }

/* kit 04 - Disabled: fill at 50% and a 4% edge (light); the whole field at 50% opacity (dark). The light Search Fields
   master keeps the idle label colors, which on the white window leaves it identical to an enabled field; the light
   Text Fields disabled master (the same 04 - Disabled style) sets its text in Labels/3 Tertiary, so value, placeholder
   and glyphs use mac-label-tertiary here. The kit's Value + Disabled masters have no Clear button. */
.hig-search-field--mac.is-disabled .hig-search-field__field {
  background: color-mix(in srgb, var(--mac-window-background) 50%, transparent); cursor: default;
  --hig-sf-edge: color-mix(in srgb, var(--label-primary) 4%, transparent);
  color: var(--mac-label-tertiary); --hig-sf-placeholder: var(--mac-label-tertiary);
  --hig-sf-glyph: var(--mac-label-tertiary); --hig-sf-glyph-trailing: var(--mac-label-tertiary);
}
[data-theme^="dark"] .hig-search-field--mac.is-disabled .hig-search-field__field {
  opacity: 0.5; color: var(--mac-label-primary); --hig-sf-placeholder: var(--mac-label-secondary);
  --hig-sf-glyph: var(--mac-label-primary); --hig-sf-glyph-trailing: var(--mac-label-secondary);
  --hig-sf-edge: color-mix(in srgb, var(--label-primary) 4%, transparent);
}

/* macOS toolbar search (glass): kit Titlebars and Toolbars/Medium (24) and XL (36) Search */
.hig-search-field--mac.hig-search-field--glass .hig-search-field__field {
  background: transparent; color: var(--glass-label-primary);
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-highlight), 0 0 0 0.5px var(--separator); /* restore the glass edge */
  --hig-sf-placeholder: var(--glass-label-secondary); --hig-sf-glyph: var(--glass-label-secondary);
  --hig-sf-glyph-trailing: var(--glass-label-secondary); --hig-sf-clear-pressed: var(--glass-label-primary);
}
.hig-search-field--mac.hig-search-field--glass .hig-search-field__field:focus-within {
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-highlight), 0 0 0 0.5px var(--separator),
    0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent);
}
.hig-search-field--mac.hig-search-field--glass.hig-search-field--regular .hig-search-field__field { padding: 0 6px 0 6px; }
.hig-search-field--mac.hig-search-field--glass.hig-search-field--regular .hig-search-field__glyph { width: 16px; margin-right: 4px; } /* glyph x=6, text x=26 */
.hig-search-field--mac.hig-search-field--glass.hig-search-field--xl .hig-search-field__field { padding: 0 10px 0 10px; }
.hig-search-field--mac.hig-search-field--glass.hig-search-field--xl .hig-search-field__glyph { width: 16px; margin-right: 6px; } /* glyph x=10, text x=32 */
.hig-search-field--mac.hig-search-field--glass .hig-search-field__clear { width: 12px; height: 15px; } /* kit Clear Search 12x15 */

/* ---- Sidebar ---- */
/* Sidebar — geometry from the iOS 27 kit (Sidebars page: Items/Level 0–2, States, Header, Examples/Sidebar) and the
   macOS 27 kit (Sidebars page: Small/Medium/Large Items, Folders, Header, Examples/Active; Windows/Unified Toolbar +
   Title + Sidebar). */
.hig-sidebar { box-sizing: border-box; font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; }
.hig-sidebar__list { list-style: none; margin: 0; padding: 0; }
.hig-sidebar__li { margin: 0; padding: 0; }
.hig-sidebar__row, button.hig-sidebar__header {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hig-sidebar__row { position: relative; display: flex; align-items: center; box-sizing: border-box; min-width: 0; }
.hig-sidebar__row:disabled { opacity: 0.5; cursor: default; } /* kit States/Disabled: 50% opacity */
.hig-sidebar__row .hig-icon, .hig-sidebar__header .hig-icon { pointer-events: none; }
.hig-sidebar__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.hig-sidebar__label, .hig-sidebar__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-sidebar__icon, .hig-sidebar__disclosure, .hig-sidebar__chevron, .hig-sidebar__header-chevron { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hig-sidebar__icon { color: var(--accent); } /* HIG: sidebar icons use the accent color by default */
.hig-sidebar__badge { flex: none; }
.hig-sidebar__header { display: flex; box-sizing: border-box; width: 100%; }
.hig-sidebar__header-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-sidebar__header-detail, .hig-sidebar__header-chevron { flex: none; }

/* ---- iOS / iPadOS ---- */
/* 260pt column (sidebar-width); items sit 10pt inside it and their state capsule another 10pt in, 20pt per level
   (kit Examples/Sidebar: items at x=10, Items/Level 0–2: state at x=10/30/50). */
.hig-sidebar--ios { width: var(--sidebar-width); padding: 0 10px 10px; background: var(--background-secondary); color: var(--label-primary); }
.hig-sidebar--ios .hig-sidebar__row {
  width: calc(100% - 10px - var(--hig-sidebar-level, 0) * 20px); margin-inline-start: calc(10px + var(--hig-sidebar-level, 0) * 20px);
  height: var(--sidebar-row-height); padding: 0 12px 0 10px; gap: 4px; border-radius: var(--radius-capsule);
  font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px; /* ios-body */
}
/* Selected: Fills/3 Tertiary capsule, 22pt radius (kit States/Selected 260×44). */
.hig-sidebar--ios .hig-sidebar__row.is-selected { background: var(--fill-tertiary); }
/* Symbol: 17pt Regular in a 34×36 box 10pt from the capsule edge, title 4pt after (kit Items/Leading/Composed). */
.hig-sidebar--ios .hig-sidebar__icon { width: 34px; height: 36px; font-size: 17px; }
.hig-sidebar--ios .hig-sidebar__subtitle { font: 400 13px/14px var(--font-sans); letter-spacing: -0.08px; color: var(--label-secondary); } /* kit Titles: 13pt subtitle */
/* Trailing detail (counts): 17pt Regular secondary, 8pt after the title (kit Items/Trailing/Detail only). */
.hig-sidebar--ios .hig-sidebar__badge { margin-inline-start: 4px; font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px; color: var(--label-secondary); }
/* Disclosure chevron: 13pt Bold tertiary in an 18pt box, 6pt after the detail (kit Items/Trailing/Submenu). */
.hig-sidebar--ios .hig-sidebar__chevron { width: 18px; height: 18px; margin-inline-start: 2px; font-size: 13px; color: var(--label-tertiary); }
/* Section header: 54pt; 17pt Medium secondary title at 12,21; trailing detail + 18pt disclosure (kit Header/Header). */
.hig-sidebar--ios .hig-sidebar__header {
  align-items: flex-start; gap: 8px; height: 54px; padding: 21px 12px 11px;
  font: 500 17px/22px var(--font-sans); letter-spacing: -0.43px; color: var(--label-secondary);
}
.hig-sidebar--ios .hig-sidebar__header-detail { font-weight: 400; }
/* The kit draws the header disclosure as an override placeholder; the accent color is a choice. */
.hig-sidebar--ios .hig-sidebar__header-chevron { width: 18px; height: 18px; margin-top: 2px; font-size: 13px; color: var(--accent); }
.hig-sidebar--ios .hig-sidebar__top { margin: 0 -10px; }

/* Floating: a Liquid Glass panel; its corner is concentric with the 22pt capsules inset 10pt (22 + 10 = radius-menu). */
.hig-sidebar--ios.hig-sidebar--floating { border-radius: var(--radius-menu); padding-top: 4px; }
.hig-sidebar--floating .hig-sidebar__row, .hig-sidebar--floating .hig-sidebar__label { color: var(--glass-label-primary); }
.hig-sidebar--floating .hig-sidebar__header, .hig-sidebar--floating .hig-sidebar__badge, .hig-sidebar--floating .hig-sidebar__subtitle { color: var(--glass-label-secondary); }
.hig-sidebar--floating .hig-sidebar__chevron, .hig-sidebar--floating .hig-sidebar__disclosure { color: var(--glass-label-tertiary); }
.hig-sidebar--floating .hig-sidebar__header-chevron { color: var(--accent); }
.hig-sidebar--floating .hig-sidebar__icon { color: var(--accent); }

/* ---- macOS ---- */
/* 256pt pane, sections inset 14pt and 14pt apart (kit Windows/Unified Toolbar + Title + Sidebar, Examples/Active). */
.hig-sidebar--mac { width: 256px; padding: 0 14px; color: var(--mac-label-primary); }
.hig-sidebar--mac .hig-sidebar__section { padding-bottom: 14px; }
/* Row: selection 4pt wider than the row on each side, 8pt radius (kit Items/Level 0 - Selected). The kit fill is
   11% black at 50% opacity; mac-fill-tertiary (5%) is the nearest token. Items start 14pt in; a trailing count
   ends 2pt from the row edge (kit Trailing - Detail). */
.hig-sidebar--mac .hig-sidebar__row {
  width: calc(100% + 8px); margin-inline: -4px; padding-inline: calc(4px + 14px) calc(4px + 2px); gap: 4px;
  border-radius: var(--radius-mac-menu-item);
}
.hig-sidebar--mac .hig-sidebar__row.is-selected { background: var(--mac-fill-tertiary); }
/* Rows in a section with hierarchy reserve a disclosure column; each level indents 12pt (kit Folders/Level 0–4). */
.hig-sidebar--mac .hig-sidebar__row--folder { padding-inline-start: calc(4px + var(--hig-sidebar-level, 0) * 12px); }
.hig-sidebar--mac .hig-sidebar__disclosure { color: var(--mac-label-tertiary); font-size: 11px; cursor: pointer; } /* 11pt Bold tertiary (kit) */
.hig-sidebar--mac .hig-sidebar__disclosure.is-empty { cursor: inherit; }
.hig-sidebar--mac .hig-sidebar__badge { color: var(--mac-label-secondary); font-weight: 500; }
.hig-sidebar--mac .hig-sidebar__row--folder .hig-sidebar__label { font-weight: 500; } /* folder titles are Medium (kit) */
.hig-sidebar--mac .hig-sidebar__header { align-items: center; gap: 4px; padding: 2px 0; color: var(--mac-label-tertiary); }
.hig-sidebar--mac .hig-sidebar__header-detail { font-weight: 500; color: var(--mac-label-secondary); }
.hig-sidebar--mac .hig-sidebar__header-chevron { width: 20px; color: var(--mac-label-tertiary); }

/* Small: 24pt rows, 16pt symbol column (11pt Medium), 11pt Medium titles; 18pt header, 11pt Bold (kit Small).
   Headers keep the kit's 18pt (Large 20pt) footprint but get a 24pt hit box (WCAG 2.5.8): a 6px transparent overhang
   above, cancelled by a negative margin. It reaches into the 14pt gap after the previous section (or the sidebar's
   top inset) rather than under the first row, which would cover it; the title stays at the kit's y=2. */
.hig-sidebar--small .hig-sidebar__row { height: 24px; font: 500 11px/14px var(--font-sans); letter-spacing: 0.06px; }
.hig-sidebar--small .hig-sidebar__icon { width: 16px; font-size: 11px; }
.hig-sidebar--small .hig-sidebar__disclosure { width: 12px; }
.hig-sidebar--small .hig-sidebar__header { height: 24px; margin-block: -6px 0; padding: 8px 0 2px; font: 700 11px/14px var(--font-sans); letter-spacing: 0.06px; }
.hig-sidebar--small .hig-sidebar__header-chevron { height: 14px; font-size: 11px; }
/* Medium: 32pt rows, 20pt symbol column (13pt Medium), 13pt Regular titles; 18pt header, 11pt Bold (kit Medium). */
.hig-sidebar--medium .hig-sidebar__row { height: 32px; font: 400 13px/16px var(--font-sans); letter-spacing: -0.08px; }
.hig-sidebar--medium .hig-sidebar__icon { width: 20px; font-size: 13px; }
.hig-sidebar--medium .hig-sidebar__disclosure { width: 16px; }
.hig-sidebar--medium .hig-sidebar__header { height: 24px; margin-block: -6px 0; padding: 8px 0 2px; font: 700 11px/14px var(--font-sans); letter-spacing: 0.06px; }
.hig-sidebar--medium .hig-sidebar__header-chevron { height: 14px; font-size: 11px; }
/* Large: 40pt rows, 24pt symbol column (15pt Medium), 15pt Regular titles; 20pt header, 13pt Bold (kit Large). */
.hig-sidebar--large .hig-sidebar__row { height: 40px; font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; }
.hig-sidebar--large .hig-sidebar__icon { width: 24px; font-size: 15px; }
.hig-sidebar--large .hig-sidebar__disclosure { width: 16px; }
.hig-sidebar--large .hig-sidebar__header { height: 26px; margin-block: -6px 0; padding: 8px 0 2px; font: 700 13px/16px var(--font-sans); letter-spacing: -0.08px; }
.hig-sidebar--large .hig-sidebar__header-chevron { height: 16px; font-size: 13px; }
.hig-sidebar--large .hig-sidebar__header-detail { font-size: 13px; }

/* Floating macOS sidebar: Liquid Glass panel with the default glass corner (radius-glass). The kit draws every
   sidebar header title in Labels/Vibrant/3 Tertiary (plus-darker), which keeps contrast by darkening the glass beneath;
   drawn normal on glass, glass-label-tertiary measures about 1.4:1, so headers here use glass-label-secondary
   (a deliberate one-step-up substitute for the kit's blended tertiary). */
.hig-sidebar--mac.hig-sidebar--floating { border-radius: var(--radius-glass); padding-top: 10px; }
.hig-sidebar--mac.hig-sidebar--floating .hig-sidebar__header { color: var(--glass-label-secondary); }
.hig-sidebar--mac .hig-sidebar__top { margin: 0 -14px; }

/* ---- TabBar ---- */
/* TabBar — geometry from the iOS 27 kit (Tab Bars page: iPhone 402×99, Horizontal/Tabs, Tab - Default, Search
   Selected, iPad (Regular) 510×44, iPhone Duo/Vertical) and the HIG (tvOS 68pt bar, 46pt from the top). */
.hig-tab-bar {
  box-sizing: border-box; font-family: var(--font-sans); color: var(--glass-label-primary);
  -webkit-tap-highlight-color: transparent;
}
:where(.hig-tab-bar) button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; background: transparent;
  color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:where(.hig-tab-bar) .hig-icon { pointer-events: none; }

/* ---- iPhone: the 402×99 region holds the floating bar at 21,16 (kit Tab Bars/iPhone/Default) ---- */
.hig-tab-bar--ios { display: flex; width: 100%; padding: 16px 21px 21px; }
.hig-tab-bar__list { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; width: 100%; } /* search tab 8pt after the tabs */
/* Capsule: 62pt tall, tabs 54pt tall at 8,4 (kit Horizontal/Tabs - No Search). */
.hig-tab-bar__tabs { display: flex; flex: 0 1 auto; min-width: 0; box-sizing: border-box; height: 62px; padding: 4px 8px; }
.hig-tab-bar__list--fill .hig-tab-bar__tabs { flex: 1 1 auto; }
.hig-tab-bar__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; box-sizing: border-box;
  flex: 0 1 var(--hig-tab-w, 72px); min-width: 0; height: 54px; padding: 7px 2px 6px; border-radius: var(--radius-capsule);
}
.hig-tab-bar__list--fill .hig-tab-bar__tab { flex: 1 1 0; }
/* Selection: Fills/2 Secondary capsule 4pt wider than the tab on each side (kit Tab - Default/Selected). */
.hig-tab-bar__selection { position: absolute; inset: 0 -4px; border-radius: var(--radius-capsule); background: var(--fill-secondary); }
.hig-tab-bar__icon { position: relative; display: flex; align-items: center; justify-content: center; height: 28px; font-size: 18px; } /* 18pt Semibold symbol in a 28pt box (kit) */
.hig-tab-bar__label {
  position: relative; display: block; max-width: 100%; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 10px/12px var(--font-sans); letter-spacing: -0.1px; /* 10pt Semibold, kern -0.1 (kit) */
}
.hig-tab-bar__tab.is-selected { color: var(--accent); } /* the kit fills the selected symbol and label with Blue */
/* Search tab: a separate 62pt glass circle with a 17pt Semibold magnifier (kit Tab - Search). */
.hig-tab-bar__search { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 62px; height: 62px; font-size: 17px; }
.hig-tab-bar__search.is-selected { color: var(--accent); }

/* Badge: red capsule with white text, 16pt tall, 12pt Medium (visionOS 26 kit Badges/Small/Notification Badge — the
   iOS kit draws no tab badge). Placement next to the symbol's top trailing corner is a choice.
   Numerals are white on system-red, Apple's pairing: 3.57:1 light, 3.43:1 dark, 4.56:1 light-hc (contrast.py). On the
   lighter dark-hc red white drops to 2.94:1 (below even 3:1) while black measures 7.15:1, so Increased Contrast Dark
   uses black. Set per appearance on the nearest data-theme, independent of the accent (on-accent follows the accent). */
:root, [data-theme] { --hig-tab-bar-badge-label: var(--white); }
[data-theme="dark-hc"] { --hig-tab-bar-badge-label: var(--black); }
.hig-tab-bar__badge {
  position: absolute; top: -2px; left: calc(50% + 4px); box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-capsule); background: var(--system-red); color: var(--hig-tab-bar-badge-label);
  font: 500 12px/16px var(--font-sans); letter-spacing: 0; text-align: center; pointer-events: none;
}
[dir="rtl"] .hig-tab-bar__badge { left: auto; right: calc(50% + 4px); }

/* ---- Search selected / minimized: 48pt glass button + 48pt search field, 28pt margins (kit Search Selected) ---- */
.hig-tab-bar--searching, .hig-tab-bar--minimized { align-items: center; gap: var(--padding-bezeled); padding: 0 28px 28px; }
.hig-tab-bar--searching .hig-tab-bar__list { width: auto; flex: none; }
.hig-tab-bar--minimized .hig-tab-bar__list { justify-content: space-between; }
.hig-tab-bar__mini { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; font-size: 17px; }
.hig-tab-bar__mini.is-selected { color: var(--accent); }
.hig-tab-bar__mini .hig-tab-bar__badge { top: 2px; left: calc(50% + 6px); }
.hig-tab-bar__field {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 48px; padding: 0 11px; gap: 4px;
  color: var(--glass-label-secondary); cursor: text;
}
.hig-tab-bar__field-glyph { display: inline-flex; justify-content: center; flex: none; width: 26px; font-size: 17px; } /* magnifier 26pt box at 11pt (kit) */
.hig-tab-bar__field-glyph--trailing { width: 18px; } /* dictation glyph 18pt box, 11pt from the end (kit) */
.hig-tab-bar__field input {
  appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: var(--glass-label-primary); font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px;
}
.hig-tab-bar__field input::placeholder { color: var(--glass-label-secondary); opacity: 1; }
.hig-tab-bar__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hig-tab-bar__field:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---- iPhone Duo vertical tab bar: 48pt capsule, 48pt tabs 50pt apart from y=6 (56pt apart beside search);
   search circle 8pt below; selection 44×58 (kit iPhone Duo/Vertical/Tabs, Tab - Default/Selected) ---- */
.hig-tab-bar--vertical { display: inline-flex; align-self: flex-start; width: auto; padding: 0; } /* never stretch to a neighbor's height */
.hig-tab-bar--vertical .hig-tab-bar__list { flex-direction: column; width: auto; }
.hig-tab-bar--vertical .hig-tab-bar__tabs { flex-direction: column; width: 48px; height: auto; padding: 6px 0; gap: 2px; }
.hig-tab-bar--vertical .hig-tab-bar__tab { flex: none; width: 48px; height: 48px; padding: 0; justify-content: center; }
.hig-tab-bar--vertical .hig-tab-bar__tabs--beside-search .hig-tab-bar__tab { height: 54px; }
.hig-tab-bar--vertical .hig-tab-bar__selection { inset: -5px 2px; }
.hig-tab-bar--vertical .hig-tab-bar__search { width: 48px; height: 48px; }
.hig-tab-bar--vertical .hig-tab-bar__search .hig-tab-bar__selection { inset: 2px; }

/* ---- iPadOS: 44pt capsule with 4pt inset; 36pt tabs (kit Tab Bars/iPad (Regular)/iPad 510×44) ---- */
.hig-tab-bar--ipad { display: inline-flex; align-items: center; height: 44px; padding: 4px; max-width: 100%; }
.hig-tab-bar--ipad .hig-tab-bar__list { width: auto; gap: 0; }
/* Unselected label tab: 17pt Medium, 11pt padding (kit Tab - Label/Unselected 65×36). */
.hig-tab-bar--ipad .hig-tab-bar__tab {
  position: relative; flex-direction: row; justify-content: center; gap: 6px; flex: none; width: auto; height: 36px; padding: 0 11px;
  font: 500 17px/20px var(--font-sans); letter-spacing: -0.43px;
}
/* Selected label tab: 17pt Semibold Blue on Fills/2 Secondary, 15pt padding (kit Tab - Label/Selected 74×36). */
.hig-tab-bar--ipad .hig-tab-bar__tab.is-selected { padding: 0 15px; font-weight: 600; color: var(--accent); background: var(--fill-secondary); }
.hig-tab-bar--ipad .hig-tab-bar__label { margin: 0; font: inherit; letter-spacing: inherit; }
.hig-tab-bar--ipad .hig-tab-bar__badge { position: static; flex: none; }
/* Symbol tabs (sidebar toggle, search): 52×36, 17pt Medium symbol (kit Tab - Symbol/Unselected). */
.hig-tab-bar__sym { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 36px; border-radius: var(--radius-capsule); font-size: 17px; }
.hig-tab-bar__sym.is-selected { color: var(--accent); background: var(--fill-secondary); }
/* 44pt minimum hit region around the 36pt items (HIG). */
.hig-tab-bar--ipad .hig-tab-bar__tab::before, .hig-tab-bar__sym::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--target-ios); transform: translateY(-50%);
}

/* ---- tvOS: 68pt bar whose top edge is 46pt from the top of the screen (HIG). Translucent bar, only the selected tab
   opaque, with a drop shadow when focused (HIG). No tvOS UI kit exists: the 56pt tab height (target-tv-min), 24pt
   padding (padding-borderless), tv-body labels and the inverted label-primary selection are choices. ---- */
.hig-tab-bar--tv { display: flex; justify-content: center; width: 100%; padding-top: 46px; }
.hig-tab-bar--tv .hig-tab-bar__tabs { align-items: center; height: 68px; padding: 6px; gap: 0; max-width: 100%; overflow: hidden; }
.hig-tab-bar--tv .hig-tab-bar__tab {
  flex-direction: row; justify-content: center; gap: 8px; flex: none; width: auto; height: var(--target-tv-min); padding: 0 var(--padding-borderless);
  color: var(--glass-label-secondary); transition: box-shadow 120ms linear;
}
.hig-tab-bar--tv .hig-tab-bar__tab--symbol { width: var(--target-tv-min); padding: 0; font-size: 29px; }
.hig-tab-bar--tv .hig-tab-bar__label { margin: 0; font: 500 29px/36px var(--font-sans); letter-spacing: 0; } /* tv-body */
.hig-tab-bar--tv .hig-tab-bar__tab.is-selected { background: var(--label-primary); color: var(--background-primary); } /* opaque, inverted platter (choice) */
.hig-tab-bar--tv .hig-tab-bar__tab.is-selected:focus-visible { box-shadow: var(--shadow-glass); }
.hig-tab-bar--tv .hig-tab-bar__badge { position: static; flex: none; }

@media (prefers-reduced-motion: reduce) { .hig-tab-bar * { transition: none !important; } }

/* ---- TokenField ---- */
/* TokenField — macOS only. Field metrics from the macOS 27 kit Text Fields (Mn/Sm/Rg/Lg/XL); tokens fill the kit's
   line box (the I-beam height); menus from the kit Menus/Regular. The HIG states no token geometry. */
.hig-token-field {
  position: relative; display: block; box-sizing: border-box; min-width: 0;
  font-family: var(--font-sans); font-weight: 500; color: var(--mac-label-primary); /* kit: SF Pro Medium values */
  --hig-tf-edge: color-mix(in srgb, var(--label-primary) 5%, transparent); /* kit Input Fields/01 - Idle: 1pt outside, black 5% */
}
[data-theme^="dark"] .hig-token-field { --hig-tf-edge: color-mix(in srgb, var(--label-primary) 4%, transparent); } /* kit dark: white 4% */
.hig-token-field__box {
  display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; cursor: text;
  min-height: var(--hig-tf-h); padding: var(--hig-tf-pad-y) var(--hig-tf-pad-x);
  column-gap: 4px; row-gap: 3px; /* chosen: the HIG and kit give no token spacing */
  background: var(--mac-window-background); border-radius: var(--hig-tf-radius);
  box-shadow: 0 0 0 1px var(--hig-tf-edge);
  font-size: var(--hig-tf-font); letter-spacing: var(--hig-tf-track); line-height: var(--hig-tf-line);
}
/* kit Input Fields/03 - Focus Ring: 3.5pt outside + 1pt inside, accent at 50% */
.hig-token-field.is-focused .hig-token-field__box {
  box-shadow: 0 0 0 1px var(--hig-tf-edge), 0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent);
}
/* sizes: height, radius, text inset and font from kit Text Fields; line box = kit I-beam height */
.hig-token-field--mini { --hig-tf-h: var(--mac-control-mini); --hig-tf-radius: var(--radius-mac-mini); --hig-tf-pad-x: 6px; --hig-tf-pad-y: 1px; --hig-tf-line: 14px; --hig-tf-font: 10px; --hig-tf-track: 0.12px; }
.hig-token-field--small { --hig-tf-h: var(--mac-control-small); --hig-tf-radius: var(--radius-mac-small); --hig-tf-pad-x: 6px; --hig-tf-pad-y: 2px; --hig-tf-line: 16px; --hig-tf-font: 11px; --hig-tf-track: 0.06px; }
.hig-token-field--regular { --hig-tf-h: var(--mac-control-regular); --hig-tf-radius: var(--radius-mac-regular); --hig-tf-pad-x: 6px; --hig-tf-pad-y: 3px; --hig-tf-line: 18px; --hig-tf-font: 13px; --hig-tf-track: -0.08px; }
.hig-token-field--large { --hig-tf-h: var(--mac-control-large); --hig-tf-radius: var(--radius-mac-large); --hig-tf-pad-x: 8px; --hig-tf-pad-y: 5px; --hig-tf-line: 18px; --hig-tf-font: 13px; --hig-tf-track: -0.08px; } /* kit Lg r=7 */
.hig-token-field--xl { --hig-tf-h: var(--mac-control-xl); --hig-tf-radius: var(--radius-mac-xl); --hig-tf-pad-x: 10px; --hig-tf-pad-y: 9px; --hig-tf-line: 18px; --hig-tf-font: 13px; --hig-tf-track: -0.08px; } /* kit XL r=9 */

/* The input is as wide as its text (or placeholder) and grows into the rest of the line, so the caret stays on the
   last token row while there is room for it, and moves to a new line only when the text no longer fits (as in
   NSTokenField). The 4pt minimum is room for the caret (chosen). Browsers without field-sizing size it from the
   character count (--hig-tf-chars, set by the component). */
.hig-token-field__input {
  flex: 1 1 auto; width: calc(var(--hig-tf-chars, 0) * 1ch + 4px); min-width: 4px; max-width: 100%;
  height: var(--hig-tf-line); margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; font: inherit; letter-spacing: inherit; color: inherit; caret-color: var(--accent); /* kit I-beam: accent */
}
@supports (field-sizing: content) { .hig-token-field__input { field-sizing: content; width: auto; } }
.hig-token-field__input::placeholder { color: var(--mac-label-tertiary); opacity: 1; } /* token usage: placeholder-level text */

.hig-token-field__token-wrap { position: relative; display: inline-flex; max-width: 100%; }
.hig-token-field__token {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; box-sizing: border-box;
  height: var(--hig-tf-line); margin: 0; border: 0; padding: 0 var(--hig-tf-pad-x); border-radius: var(--radius-capsule);
  background: color-mix(in srgb, var(--accent) 22%, transparent); /* kit Buttons/Bordered Tinted: accent at 22% */
  color: var(--mac-label-primary); font: inherit; letter-spacing: inherit; line-height: var(--hig-tf-line);
  cursor: default; white-space: nowrap; outline: none; user-select: none;
}
.hig-token-field__token-label { overflow: hidden; text-overflow: ellipsis; }
.hig-token-field__token.is-selected,
.hig-token-field__token.is-menu-open { background: var(--accent); color: var(--on-accent); }
.hig-token-field__token:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hig-token-field__token:has(.hig-token-field__token-chevron) { padding-right: calc(var(--hig-tf-pad-x) - 2px); }
.hig-token-field__token-chevron { display: inline-flex; align-items: center; opacity: 0.85; }

.hig-token-field.is-disabled .hig-token-field__box { background: color-mix(in srgb, var(--mac-window-background) 50%, transparent); cursor: default; } /* kit 04 - Disabled */
.hig-token-field.is-disabled .hig-token-field__token { color: var(--mac-label-tertiary); background: var(--mac-fill-tertiary); }
[data-theme^="dark"] .hig-token-field.is-disabled .hig-token-field__box { opacity: 0.5; }

/* menus (suggestions and per-token menus): kit Menus/Regular — glass, radius 12, 24pt rows, 5pt highlight inset,
   11pt text inset inside the highlight, Medium 13pt with -0.2 tracking, accent highlight */
.hig-token-field__menu {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); /* 4pt drop distance chosen */
  min-width: 192px; max-width: 320px; box-sizing: border-box; padding: 6px 5px 5px; /* kit 160pt item + 16pt side insets */
  color: var(--mac-label-primary); font: 500 13px/16px var(--font-sans); letter-spacing: -0.2px;
}
.hig-token-field__menu.hig-glass { border-radius: var(--radius-mac-menu); box-shadow: var(--shadow-mac-menu), var(--shadow-glass-highlight); }
.hig-token-field__menu-item {
  display: flex; align-items: center; height: 24px; padding: 0 11px; border-radius: var(--radius-mac-menu-item);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; outline: none;
}
.hig-token-field__menu-item.is-active { background: var(--accent); color: var(--on-accent); }
.hig-token-field__menu-item.is-disabled { color: var(--mac-label-tertiary); }
.hig-token-field__menu-separator { position: relative; height: 11px; margin: 0 11px; } /* kit Separator 11pt, 1pt line at y=5 */
.hig-token-field__menu-separator::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; border-radius: 1px; background: var(--mac-fill-secondary); }

/* ---- ActionSheet ---- */
/* ActionSheet — geometry from the iOS 27 kit (Action Sheets/Light, Examples/Action Sheet/Light). */
.hig-action-sheet-scrim {
  position: fixed; inset: 0; z-index: 1000; box-sizing: border-box;
  background: var(--scrim-alert); /* kit example: Alerts/Overlay behind the sheet */
}
/* Without a source control the sheet rests at the bottom; 36pt is the kit example's gap below the sheet. */
.hig-action-sheet-scrim--bottom { display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--margin-compact) 36px; }

.hig-action-sheet {
  box-sizing: border-box; width: var(--action-sheet-width); max-width: 100%; padding: 14px; /* kit: 260pt, groups inset 14pt */
  border-radius: var(--radius-sheet); font-family: var(--font-sans); outline: none;
}
.hig-action-sheet-anchor { position: relative; display: inline-flex; vertical-align: middle; }
.hig-action-sheet__source { display: inline-flex; }
/* Anchored: the sheet grows out of its source and covers it — in the kit example its bottom-trailing corner
   sits on the trailing toolbar button's bottom-trailing corner. */
.hig-action-sheet--anchored { position: absolute; z-index: 1001; max-width: none; }
.hig-action-sheet--above { bottom: 0; }
.hig-action-sheet--below { top: 0; }
.hig-action-sheet--align-end { right: 0; }
.hig-action-sheet--align-start { left: 0; }

.hig-action-sheet__header { padding: 8px 8px 24px; } /* kit: text at 8,8 in the 232pt group; rows start 24pt below the message */
.hig-action-sheet__title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.43px; color: var(--label-primary); } /* ios-headline */
.hig-action-sheet__message {
  margin: 10px 0 0; /* kit: message at y=40 under a 22pt title at y=8 */
  font-size: 15px; line-height: 20px; letter-spacing: -0.23px; /* ios-subheadline */
  color: color-mix(in srgb, var(--label-primary) 68%, transparent); /* kit: black / white at 68% */
}
.hig-action-sheet__actions { display: flex; flex-direction: column; gap: 10px; } /* kit: 48pt rows every 58pt */
.hig-action-sheet__button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer; box-sizing: border-box; width: 100%;
  display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 16px; border-radius: var(--radius-capsule); /* kit Alerts/􀻃/2 Secondary */
  font-family: var(--font-sans); font-size: 17px; line-height: 22px; letter-spacing: -0.43px; font-weight: 500;
  background: var(--fill-tertiary); color: var(--label-primary); -webkit-tap-highlight-color: transparent;
}
.hig-action-sheet__button--destructive { color: var(--system-red); } /* kit 3 Destructive */
.hig-action-sheet__button:disabled { cursor: default; background: var(--fill-quaternary); color: var(--label-tertiary); }
.hig-action-sheet__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Alert ---- */
/* Alert — geometry from the iOS 27 (Alerts), macOS 27 (Alerts) and visionOS 26 (Action Sheets and Alerts) kits. */
.hig-alert-scrim {
  position: fixed; inset: 0; z-index: 1000; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: var(--margin-compact);
  background: var(--scrim-alert); /* kit Alerts/Overlay */
  font-family: var(--font-sans);
}
/* visionOS: the alert floats in front of its window; the kit draws no dimming layer. */
.hig-alert-scrim--vision { background: transparent; }

.hig-alert { box-sizing: border-box; display: flex; flex-direction: column; max-height: 100%; overflow: auto; outline: none; }
.hig-alert__content { display: flex; flex-direction: column; }
.hig-alert__text { display: flex; flex-direction: column; }
.hig-alert__title, .hig-alert__message { margin: 0; overflow-wrap: anywhere; }
.hig-alert__actions { display: flex; }
.hig-alert__actions--row > * { flex: 1 1 0; min-width: 0; }
.hig-alert__actions--stack { flex-direction: column; }
.hig-alert__button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; min-width: 0;
  font-family: var(--font-sans); color: inherit; background: transparent; -webkit-tap-highlight-color: transparent;
}
.hig-alert__button:disabled { cursor: default; }
.hig-alert__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-alert__icon { display: flex; flex: none; }
.hig-alert__accessory { overflow: hidden; }

/* ---------- iOS / iPadOS: 300pt glass panel, 14pt inset (kit Alerts/Light/Default) ---------- */
.hig-alert--ios { width: var(--alert-width); max-width: 100%; padding: 14px; border-radius: var(--radius-sheet); } /* kit: groups inset 14pt */
.hig-alert--ios .hig-alert__content { padding: 8px 8px 24px; } /* kit: text at 8,8 in the 272pt group; message ends 24pt above the buttons/fields */
.hig-alert--ios .hig-alert__title { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.43px; color: var(--vibrant-label-primary); } /* ios-headline */
.hig-alert--ios .hig-alert__message {
  margin-top: 10px; /* kit: message at y=40 under a 22pt title at y=8 */
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; /* ios-body */
  color: var(--vibrant-label-secondary); /* kit: Labels - Vibrant/2 Secondary (plus-darker / plus-lighter; the token is the blend-equivalent color) */
}
.hig-alert--ios .hig-alert__actions--row { gap: 8px; } /* kit: 132pt buttons at x=0 and x=140 */
.hig-alert--ios .hig-alert__actions--stack { gap: 12px; } /* kit Buttons Stacked: 48pt buttons every 60pt */
.hig-alert--ios .hig-alert__button {
  height: 48px; padding: 0 16px; border-radius: var(--radius-capsule); /* kit Alerts/􀻃/1 Primary 120x48, label inset 16 */
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; font-weight: 500;
  background: var(--fill-tertiary); color: var(--label-primary); /* kit 2 Secondary */
}
.hig-alert--ios .hig-alert__button--primary { background: var(--accent); color: var(--on-accent); font-weight: 600; } /* kit 1 Primary: blue fill, Semibold white */
.hig-alert--ios .hig-alert__button--destructive { color: var(--system-red); } /* kit 3 Destructive: tertiary fill, red Medium label */
.hig-alert--ios .hig-alert__button:disabled { background: var(--fill-quaternary); color: var(--label-tertiary); }
/* A 44pt minimum hit region is met by the 48pt buttons. Text fields: 52pt rows in one tertiary-fill block. */
.hig-alert--ios .hig-alert__fields { background: var(--fill-tertiary); border-radius: var(--radius-capsule); margin-bottom: 19px; overflow: hidden; } /* kit Input Field x 1: capsule; buttons 19pt below */
.hig-alert--ios .hig-alert__fields--grouped { border-radius: var(--radius-group); } /* kit Input Field x 2: 26pt grouped block */
.hig-alert--ios .hig-alert__field {
  display: block; box-sizing: border-box; width: 100%; height: var(--row-height); padding: 0 16px; margin: 0; border: 0; outline: none;
  background: transparent; font-family: var(--font-sans); font-size: 17px; letter-spacing: -0.43px; font-weight: 500; /* kit Text Fields: SF Pro Medium 17 */
  color: var(--label-primary); caret-color: var(--accent);
}
.hig-alert--ios .hig-alert__field::placeholder { color: var(--placeholder-text); opacity: 1; }
/* Keyboard focus (the kit draws only the accent cursor): the 3pt focus ring around the field block, as on SearchField. */
.hig-alert--ios .hig-alert__fields:has(.hig-alert__field:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hig-alert--ios .hig-alert__field-separator { height: 1px; margin: 0 16px; background: var(--vibrant-separator); } /* kit: Separators/Vibrant hairline, 16pt inset */

/* ---------- macOS: 260pt glass panel (kit Alerts/Light/Side by Side, Stacked) ---------- */
.hig-alert-scrim--mac { padding: var(--margin-compact); }
.hig-alert--mac { width: 260px; max-width: 100%; padding: 20px 16px 16px; border-radius: var(--radius-mac-alert); color: var(--mac-label-primary); } /* kit: 260pt wide, content at y=20, buttons inset 16 */
.hig-alert--mac .hig-alert__content { padding: 0 6px 16px; } /* kit: text inset 6pt inside the 228pt column; buttons 16pt below the text */
.hig-alert--mac .hig-alert__icon { width: 64px; height: 64px; margin-bottom: 10px; align-items: center; justify-content: center; }
/* The macOS 27 kit has no icon in its alert masters: the 64pt slot is AppKit's alert icon size and the 10pt gap repeats
   the kit's title-to-message spacing (values chosen, not measured). */
.hig-alert--mac .hig-alert__icon > svg, .hig-alert--mac .hig-alert__icon > img { width: 64px; height: 64px; display: block; }
.hig-alert--mac .hig-alert__icon--glyph { color: var(--mac-label-secondary); }
.hig-alert--mac .hig-alert__icon--glyph > svg { width: 52px; height: 52px; }
.hig-alert--mac .hig-alert__title { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: -0.08px; color: var(--mac-label-primary); } /* mac-headline; kit SF Pro Bold 13/16 */
.hig-alert--mac .hig-alert__message { margin-top: 10px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--mac-label-primary); } /* mac-body; kit message at y=26 */
.hig-alert--mac .hig-alert__accessory { margin-top: 10px; }
.hig-alert--mac .hig-alert__actions--row { gap: 8px; } /* kit: 110pt buttons at x=0 and x=118 */
.hig-alert--mac .hig-alert__actions--stack { gap: 6px; } /* kit Stacked: 28pt buttons every 34pt */
.hig-alert--mac .hig-alert__button { width: 100%; padding: 0 10px; } /* 28pt capsules = Button size large (mac-control-large) */
.hig-alert--mac .hig-alert__button--destructive:not(:disabled) { background: color-mix(in srgb, var(--system-red) 23%, transparent); } /* kit: red at 23% (dark 25%) */
[data-theme^="dark"] .hig-alert--mac .hig-alert__button--destructive:not(:disabled) { background: color-mix(in srgb, var(--system-red) 25%, transparent); }
.hig-alert--mac .hig-alert__fields { display: flex; flex-direction: column; gap: 6px; margin: 0 6px 16px; }
.hig-alert--mac .hig-alert__field {
  box-sizing: border-box; width: 100%; height: var(--mac-control-regular); padding: 0 6px; margin: 0; border: 0; outline: none;
  border-radius: var(--radius-mac-regular); background: var(--mac-window-background); box-shadow: 0 0 0 1px var(--mac-label-quinary); /* kit Text Fields/3 Rg */
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--mac-label-primary); caret-color: var(--accent);
}
.hig-alert--mac .hig-alert__field:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }
.hig-alert--mac .hig-alert__field::placeholder { color: var(--mac-label-tertiary); opacity: 1; }
.hig-alert--mac .hig-alert__field-separator { display: none; }

/* ---------- visionOS: 320pt glass platter (kit Views/Alerts/2 Buttons) ---------- */
.hig-alert--vision {
  --hig-vision-label: var(--white); /* visionOS labels on glass are white (kit "Primary - onDark"; tokens.json vision type styles) */
  /* Secondary text (message, Cancel). The kit draws it white 96% at 40% opacity with plus-lighter, which ADDS
     0.4 x 0.96 x 255 = 98 to every channel of the glass beneath (102 for pure white). A glass element can't blend with
     its backdrop on the web; normal white at alpha a adds a x (255 - B) over a platter of gray B, so the same lift
     needs a = 98 / (255 - B): 0.45 over glass on black (B = 37), 0.56 at B = 80, 0.63 at B = 100. Even plus-lighter
     only reaches 4.3:1 to 3.5:1 over those platters, so the value is raised until the message clears 4.5:1 over
     platters up to gray 99 (this alert over a window over a dimmed room is about 76-102): white at 80%. */
  --hig-vision-label-secondary: color-mix(in srgb, var(--hig-vision-label) 80%, transparent);
  /* kit Materials/Glass Platter: 149,149,149 at 25%. Mixed from the constant white/black tokens so it is the same in
     every theme (visionOS has one appearance): white 58.4% + black = 149. */
  --hig-vision-glass: color-mix(in srgb, color-mix(in srgb, var(--white) 58.4%, var(--black)) 25%, transparent);
  position: relative; z-index: 0; width: 320px; max-width: 100%; padding: 20px; border-radius: 28px; /* kit: 320pt, r28, content inset 20 */
  background: var(--hig-vision-glass);
  -webkit-backdrop-filter: blur(112.5px) saturate(1.64); backdrop-filter: blur(112.5px) saturate(1.64); /* kit: blur 112.5, saturation 1.64 */
  color: color-mix(in srgb, var(--hig-vision-label) 96%, transparent); text-align: center;
}
/* Glass edge: the kit's 1.4pt inside gradient border, white 30% at the top fading out, 10% at the bottom. */
.hig-alert--vision::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hig-vision-label) 30%, transparent) 0%, transparent 40.6%, transparent 57.4%, color-mix(in srgb, var(--hig-vision-label) 10%, transparent) 100%);
  -webkit-mask: linear-gradient(var(--hig-vision-label) 0 0) content-box, linear-gradient(var(--hig-vision-label) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--hig-vision-label) 0 0) content-box exclude, linear-gradient(var(--hig-vision-label) 0 0);
}
.hig-alert--vision .hig-alert__content { align-items: center; }
.hig-alert--vision .hig-alert__icon { margin-bottom: 16px; } /* kit: 52pt icon, title 16pt below */
.hig-alert--vision .hig-alert__icon--symbol { width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center; background: var(--accent); color: var(--hig-vision-label); } /* kit 􀻃/Icons/Symbol: blue circle, white Bold symbol */
.hig-alert--vision .hig-alert__icon > svg, .hig-alert--vision .hig-alert__icon > img { display: block; }
.hig-alert--vision .hig-alert__title { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -0.45px; } /* vision-title-3 */
.hig-alert--vision .hig-alert__message { margin-top: 2px; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; color: var(--hig-vision-label-secondary); } /* vision-subheadline; kit message at y=26, 40% plus-lighter (see --hig-vision-label-secondary) */
.hig-alert--vision .hig-alert__accessory { margin-top: 16px; width: 100%; max-height: 154px; border-radius: 16px; } /* HIG: accessory view at most 154pt tall with a 16pt corner radius */
.hig-alert--vision .hig-alert__separator { height: 1px; margin-top: 16px; background: color-mix(in srgb, var(--hig-vision-label) 8%, transparent); } /* kit Controls/Separator: white at 8% */
.hig-alert--vision .hig-alert__fields { margin-top: 12px; }
.hig-alert--vision .hig-alert__field {
  display: block; box-sizing: border-box; width: 100%; height: 44px; padding: 0 20px; margin: 0; border: 0; outline: none; border-radius: 12px; /* kit Input Field/Text Field/Rounded */
  background: color-mix(in srgb, var(--glass-dim) 29%, transparent); /* kit recessed fill: black at 10% (glass-dim is the theme-invariant black) */
  box-shadow: inset 1px 1.5px 4px 0 color-mix(in srgb, var(--glass-dim) 23%, transparent), inset 0 -0.5px 1px 0 color-mix(in srgb, var(--hig-vision-label) 30%, transparent);
  font-family: var(--font-sans); font-size: 17px; font-weight: 500; letter-spacing: -0.43px; color: inherit; text-align: start; caret-color: var(--hig-vision-label);
}
.hig-alert--vision .hig-alert__field::placeholder { color: inherit; opacity: 0.4; }
.hig-alert--vision .hig-alert__field:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }
.hig-alert--vision .hig-alert__field-separator { height: 12px; }
.hig-alert--vision .hig-alert__actions { margin-top: 12px; gap: 12px; } /* kit: 44pt buttons every 56pt, 12pt below the separator */
.hig-alert--vision .hig-alert__button {
  height: 44px; padding: 0 20px; border-radius: 12px; /* kit Rounded Rect/Regular: 44pt, r12, label inset 20 */
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; font-weight: 600;
}
.hig-alert--vision .hig-alert__button:hover:not(:disabled) { background: color-mix(in srgb, var(--hig-vision-label) 8%, transparent); } /* kit Hover: white at 8% */
.hig-alert--vision .hig-alert__button--destructive { color: var(--system-red); }
.hig-alert--vision .hig-alert__button--cancel { font-weight: 400; }
.hig-alert--vision .hig-alert__button--cancel:not(:disabled) { color: var(--hig-vision-label-secondary); } /* kit Cancel - Idle: Regular label at 40% plus-lighter (see --hig-vision-label-secondary) */
.hig-alert--vision .hig-alert__button:disabled .hig-alert__label { opacity: 0.25; }

/* ---- PageControl ---- */
/* PageControl — iOS 27 kit Page Control (dots in 10pt cells, 10pt apart; 24pt ultrathin platter, radius 12, 12pt side
   padding; 8pt dots, shrinking to 6pt then 4pt at the edges) and watchOS 26 kit Vertically Tabbed Digital Crown
   Indicator (6pt dots, 2pt apart; medium 5pt, small 4pt). */
.hig-page-control {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; vertical-align: middle;
  border-radius: var(--radius-capsule); touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: default;
}
.hig-page-control--ios.hig-page-control--horizontal,
.hig-page-control--tv.hig-page-control--horizontal { min-height: var(--target-ios); } /* kit frame: 44pt tall */
.hig-page-control--ios.hig-page-control--vertical,
.hig-page-control--tv.hig-page-control--vertical { min-width: var(--target-ios); }

.hig-page-control__platter {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  height: 24px; padding: 0 12px; border-radius: 12px; /* kit Background/N Dots: 24pt platter, r=12, dots from x=12 */
}
.hig-page-control--vertical .hig-page-control__platter { flex-direction: column; height: auto; width: 24px; padding: 12px 0; }

.hig-page-control__dot {
  flex: none; box-sizing: border-box; border-radius: 50%; background-clip: content-box;
  background-color: var(--label-tertiary); /* kit Dots/Unselected: Labels/3 Tertiary */
}
.hig-page-control__dot.is-current { background-color: var(--label-primary); } /* kit Dots/Selected: Labels/1 Primary */
.hig-page-control__dot--full { width: 10px; height: 10px; padding: 1px; }   /* 8pt dot in a 10pt cell */
.hig-page-control__dot--medium { width: 10px; height: 10px; padding: 2px; } /* kit "6pt": 6pt dot in a 10pt cell */
.hig-page-control__dot--small { width: 6px; height: 6px; padding: 1px; }    /* kit "4pt": 4pt dot in a 6pt cell */

/* watchOS: always dark (the control re-scopes tokens with data-theme), white current dot, others white at 35% */
.hig-page-control--watch .hig-page-control__platter { gap: 2px; padding: 2px; height: auto; width: auto; border-radius: 0; } /* kit: 6pt dots at 8pt pitch in a 10pt strip */
.hig-page-control--watch.hig-page-control--horizontal .hig-page-control__platter { flex-direction: row; }
.hig-page-control--watch .hig-page-control__dot { background-color: color-mix(in srgb, var(--label-primary) 35%, transparent); }
.hig-page-control--watch .hig-page-control__dot.is-current { background-color: var(--label-primary); }
.hig-page-control--watch .hig-page-control__dot--full { width: 6px; height: 6px; padding: 0; }
.hig-page-control--watch .hig-page-control__dot--medium { width: 6px; height: 6px; padding: 0.5px; } /* kit Dot - Medium: 5pt */
.hig-page-control--watch .hig-page-control__dot--small { width: 6px; height: 6px; padding: 1px; }    /* kit Dot - Small: 4pt */

.hig-page-control.is-static { cursor: default; }
.hig-page-control.is-static:focus-visible { outline: none; }

/* ---- Popover ---- */
/* Popover — geometry from the iOS 27 kit (Popovers (iPad Only)) and the macOS 27 kit (Popovers). */
.hig-popover-anchor { position: relative; display: inline-flex; vertical-align: middle; }
.hig-popover { box-sizing: border-box; font-family: var(--font-sans); }
.hig-popover--anchored { position: absolute; z-index: 1001; } /* the arrow tip sits on the anchor's edge */
.hig-popover--inline { position: relative; display: inline-block; vertical-align: top; }
.hig-popover__body { position: relative; box-sizing: border-box; outline: none; }
/* A side arrow needs a minimum body height (set inline from the arrow shape); content shorter than that is centered
   on the arrow's edge rather than left at the top (centering chosen; the kit shows only taller bodies). */
.hig-popover--edge-left > .hig-popover__body, .hig-popover--edge-right > .hig-popover__body { display: flex; flex-direction: column; justify-content: center; }
.hig-popover__arrow { position: absolute; display: block; pointer-events: none; border-radius: 0; }

/* ---------- iPadOS: thick material platter (dark: regular), 13pt corners, soft 100pt shadow ---------- */
.hig-popover--ios .hig-popover__body {
  border-radius: var(--radius-platter); color: var(--label-primary);
  box-shadow: 0 10px 100px 0 color-mix(in srgb, var(--glass-dim) 86%, transparent); /* kit 'Shadow' group: black at 30% */
}
[data-theme^="dark"] .hig-popover--ios .hig-material--thick { background: var(--material-regular); } /* kit dark: Materials/Dark/2 Regular */

/* ---------- macOS: Liquid Glass Regular - Medium, 20pt corners ---------- */
.hig-popover--mac .hig-popover__body { border-radius: var(--radius-mac-popover); color: var(--mac-label-primary); }
.hig-popover--mac .hig-glass { -webkit-backdrop-filter: blur(15px) saturate(var(--saturate-glass)); backdrop-filter: blur(15px) saturate(var(--saturate-glass)); } /* kit: Regular - Medium, 15pt blur (light) */
[data-theme^="dark"] .hig-popover--mac .hig-glass { -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); }
.hig-popover--mac .hig-popover__arrow.hig-glass { box-shadow: none; border-radius: 0; } /* the outline is the arrow shape itself */

/* ---- ScrollView ---- */
/* ScrollView — scroll edge effects from the iOS 27 / macOS 27 kits (Scroll Edge Effect/Top - Hard, Top - Soft) and
   the macOS 27 kit Scrollbars (6pt capsule knob, 3pt inset, in a 12pt track). */
.hig-scroll-view {
  position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; box-sizing: border-box;
  --hig-sv-ground: var(--background-primary); /* kit iOS: Backgrounds/Primary */
  --hig-sv-hard-alpha: 85%;                   /* kit Top - Hard: color layer at 85% (light) */
  --hig-sv-line: color-mix(in srgb, var(--label-primary) 5%, transparent);  /* kit: 0.67pt edge, black 5% */
  --hig-sv-knob: color-mix(in srgb, var(--label-primary) 50%, transparent); /* kit Scrollbars/Light: black 50% */
}
.hig-scroll-view--mac { --hig-sv-ground: var(--mac-window-background); } /* kit macOS: Window Backgrounds */
[data-theme^="dark"] .hig-scroll-view {
  --hig-sv-hard-alpha: 55%; /* kit Dark/Top - Hard: 55% */
  --hig-sv-line: color-mix(in srgb, var(--label-primary) 10%, transparent);  /* kit dark: white 10% */
  --hig-sv-knob: color-mix(in srgb, var(--label-primary) 55%, transparent);  /* kit Scrollbars/Dark: white 55% */
}
.hig-scroll-view__viewport {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; outline: none;
}
.hig-scroll-view__viewport.hig-focus:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.hig-scroll-view__content { padding-top: var(--hig-sv-top); padding-bottom: var(--hig-sv-bottom); box-sizing: border-box; min-height: 100%; }

/* The native bar is replaced by the kit knob (6pt capsule, 3pt inset, 12pt track) drawn between the bars' insets.
   iOS shows it only while scrolling; macOS keeps it visible. */
.hig-scroll-view__viewport { scrollbar-width: none; }
.hig-scroll-view__viewport::-webkit-scrollbar { display: none; }
.hig-scroll-view__indicator {
  position: absolute; right: 0; width: 12px; top: calc(var(--hig-sv-top) + 3px); bottom: calc(var(--hig-sv-bottom) + 3px);
  pointer-events: none; z-index: 3; opacity: 0; transition: opacity 300ms ease-out;
}
.hig-scroll-view__indicator.is-visible { opacity: 1; transition-duration: 0ms; }
.hig-scroll-view__thumb {
  position: absolute; left: 3px; top: 0; width: 6px; border-radius: var(--radius-capsule); background: var(--hig-sv-knob);
  touch-action: none;
}
.hig-scroll-view__indicator.is-visible .hig-scroll-view__thumb { pointer-events: auto; }
/* a wider grab region around the 6pt knob (kit track width) */
.hig-scroll-view__thumb::before { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; }

/* ---- scroll edge effects: present only while content scrolls beneath the bar ---- */
.hig-scroll-view__edge {
  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; box-sizing: border-box;
  opacity: 0; transition: opacity 150ms linear;
}
.hig-scroll-view__edge.is-active { opacity: 1; }
.hig-scroll-view__edge--top { top: 0; height: var(--hig-sv-top); }
.hig-scroll-view__edge--bottom { bottom: 0; height: var(--hig-sv-bottom); }
/* hard: a more opaque blur (6pt) over the ground color with a defined edge */
.hig-scroll-view--hard .hig-scroll-view__edge {
  background: color-mix(in srgb, var(--hig-sv-ground) var(--hig-sv-hard-alpha), transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); /* kit Blur layer: background blur r6 */
}
.hig-scroll-view--hard .hig-scroll-view__edge--top { border-bottom: 0.6666px solid var(--hig-sv-line); }
.hig-scroll-view--hard .hig-scroll-view__edge--bottom { border-top: 0.6666px solid var(--hig-sv-line); }
/* soft: a variable blur — a strong blur masked by a gradient from 60% at the screen edge to clear at the bar's far edge */
.hig-scroll-view--soft .hig-scroll-view__edge {
  -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px); /* kit Blur layer: background blur r100 */
  /* A 100pt blur averages the content into the ground color; filling with the ground reproduces that average where a
     browser leaves the strip's edges unblurred (Chromium fades backdrop blur out near element edges). */
  background: var(--hig-sv-ground);
}
.hig-scroll-view--soft .hig-scroll-view__edge--top {
  -webkit-mask-image: linear-gradient(to bottom, color-mix(in srgb, var(--label-primary) 60%, transparent), transparent);
  mask-image: linear-gradient(to bottom, color-mix(in srgb, var(--label-primary) 60%, transparent), transparent); /* kit Gradient Mask at 60%; mask uses alpha only */
}
.hig-scroll-view--soft .hig-scroll-view__edge--bottom {
  -webkit-mask-image: linear-gradient(to top, color-mix(in srgb, var(--label-primary) 60%, transparent), transparent);
  mask-image: linear-gradient(to top, color-mix(in srgb, var(--label-primary) 60%, transparent), transparent);
}

/* floating bars the consumer places over the edges; empty bar areas let scrolling through */
.hig-scroll-view__bar { position: absolute; left: 0; right: 0; z-index: 2; display: flex; align-items: center; box-sizing: border-box; pointer-events: none; }
.hig-scroll-view__bar > * { pointer-events: auto; }
.hig-scroll-view__bar--top { top: 0; height: var(--hig-sv-top); }
.hig-scroll-view__bar--bottom { bottom: 0; height: var(--hig-sv-bottom); }

@media (prefers-reduced-motion: reduce) {
  .hig-scroll-view__edge, .hig-scroll-view__indicator { transition: none; }
}

/* ---- Sheet ---- */
/* Sheet — geometry from the iOS 27 kit (Sheets, Toolbars/iPhone/Top - Sheet) and macOS 27 kit (Dialogs). */
.hig-sheet-scrim {
  position: fixed; inset: 0; z-index: 1000; box-sizing: border-box;
  background: var(--scrim-sheet); /* kit Sheets/Overlay */
  font-family: var(--font-sans);
}
.hig-sheet-scrim--nonmodal { background: transparent; pointer-events: none; }
.hig-sheet-scrim--nonmodal .hig-sheet { pointer-events: auto; }
.hig-sheet { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; outline: none; overflow: hidden; }
.hig-sheet__header { position: relative; flex: none; touch-action: none; }
.hig-sheet__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.hig-sheet__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- iPhone ---------- */
/* Medium detent: an inset Liquid Glass card 8pt from the screen edges, 451pt of an 874pt screen (kit Medium Detent). */
.hig-sheet--ios.hig-sheet--medium { left: 8px; right: 8px; bottom: 8px; height: calc(100% * 451 / 874); border-radius: var(--radius-sheet); }
/* The kit renders this card with Regular - Medium glass: 15pt blur in light appearance (30pt dark). */
.hig-sheet--ios.hig-sheet--medium.hig-glass { -webkit-backdrop-filter: blur(15px) saturate(var(--saturate-glass)); backdrop-filter: blur(15px) saturate(var(--saturate-glass)); }
[data-theme^="dark"] .hig-sheet--ios.hig-sheet--medium.hig-glass { -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); }
/* Large detent: opaque, full width under the status bar, 38pt top corners (kit Large Detent). */
.hig-sheet--ios.hig-sheet--large {
  left: 0; right: 0; bottom: 0; top: var(--status-bar-height);
  border-radius: 38px 38px 0 0; background: var(--background-elevated-primary); color: var(--label-primary); /* kit: white in light, the dark elevated background in dark */
  box-shadow: 0 15px 50px 0 color-mix(in srgb, var(--glass-dim) 51%, transparent); /* kit: black at 18% */
}
.hig-sheet--ios .hig-sheet__header { height: 70px; } /* kit Toolbars/iPhone/Top - Sheet: 70pt */
.hig-sheet--ios .hig-sheet__toolbar { position: absolute; left: 16px; right: 16px; top: 16px; height: 44px; } /* kit: 44pt buttons at x=16, y=16 */
.hig-sheet--ios .hig-sheet__body { padding: 0 var(--margin-compact) var(--margin-compact); }
.hig-sheet__grabber {
  position: absolute; left: 50%; top: 5px; width: 60px; height: 4px; margin: 0 0 0 -30px; padding: 0; border: 0; cursor: grab; /* kit: 60×4 at y=5 */
  border-radius: 2px; background: var(--vibrant-fill-primary); /* kit: 207 gray plus-darker (dark: 51 gray plus-lighter); the token is the blend-equivalent color */
}
/* Keep a 44pt-tall hit region around the 4pt grabber. */
.hig-sheet__grabber::before { content: ""; position: absolute; left: -10px; right: -10px; top: -5px; height: var(--target-ios); }

/* Toolbar row: leading button, centered title, trailing button. */
.hig-sheet__toolbar { display: flex; align-items: center; }
.hig-sheet__toolbar-side { flex: 1 1 0; display: flex; min-width: var(--toolbar-button); }
.hig-sheet__toolbar-side--trailing { justify-content: flex-end; }
.hig-sheet--ios .hig-sheet__title, .hig-sheet--ipad .hig-sheet__title {
  flex: 0 1 auto; text-align: center; padding: 0 8px; /* 8pt keeps the title off the buttons: the kit title box spans 68–335 between 44pt buttons at 16 and 343 */
  font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.43px; color: var(--glass-label-primary); /* ios-headline; kit Titles - iPhone/Title */
}
.hig-sheet__tool {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--button-icon-gap); height: var(--toolbar-button);
  font-family: var(--font-sans); font-size: 17px; line-height: 22px; letter-spacing: -0.43px; font-weight: 500; /* kit: SF Pro Medium 17 */
  background: transparent; color: var(--glass-label-primary); -webkit-tap-highlight-color: transparent;
}
.hig-sheet__tool--icon { width: var(--toolbar-button); padding: 0; border-radius: 50%; } /* kit Buttons (for Inspectors): 44×44, r24 */
.hig-sheet__tool--text { padding: 0 12px; border-radius: var(--radius-capsule); } /* kit Buttons/44pt/Text: label inset 12 */
.hig-sheet__tool:disabled { cursor: default; color: var(--label-tertiary); }
/* iPhone: plain fills (kit Close Button: Fills/2 Secondary; Primary: system blue with a white symbol). */
.hig-sheet--ios .hig-sheet__tool { background: var(--fill-secondary); }
.hig-sheet--ios .hig-sheet__tool--prominent { background: var(--accent); color: var(--on-accent); }
.hig-sheet--ios .hig-sheet__tool--prominent:disabled { background: var(--fill-quaternary); color: var(--label-tertiary); }
/* iPad: Liquid Glass toolbar buttons (kit Toolbars/Buttons/44pt Symbol 1 and Symbol 1 - Prominent). */
.hig-sheet--ipad .hig-sheet__tool--prominent { color: var(--on-accent); }
.hig-sheet__tool.hig-glass:active:not(:disabled) { background-color: var(--pressed-overlay); }

/* ---------- iPad form sheet: centered, 936×770 at most, 32pt from the screen's top and bottom (kit Sheets/iPad) ---------- */
.hig-sheet-scrim--ipad { display: flex; align-items: center; justify-content: center; padding: 32px; }
.hig-sheet--ipad {
  position: relative; width: 936px; max-width: 100%; height: 770px; max-height: 100%;
  border-radius: var(--radius-menu); background: var(--background-elevated-primary); color: var(--label-primary);
}
.hig-sheet--ipad .hig-sheet__header { height: 64px; } /* kit: toolbar at y=10, 54pt tall */
.hig-sheet--ipad .hig-sheet__toolbar { position: absolute; left: 10px; right: 10px; top: 10px; height: 44px; } /* kit: 44pt buttons 10pt from the edges */
.hig-sheet--ipad .hig-sheet__body { padding: 0 var(--margin-compact) var(--margin-compact); }

/* ---------- macOS: a card over the dimmed parent window (kit Dialogs/Save Dialog) ---------- */
/* Attached to the window: it fills the nearest positioned ancestor (put the Sheet inside the window's body). */
.hig-sheet-scrim--mac { position: absolute; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: inherit; }
.hig-sheet--mac {
  position: relative; width: 390px; max-width: 100%; max-height: 100%; padding: 20px; /* kit Save Dialog: 390pt wide, 20pt inset */
  border-radius: var(--radius-mac-alert); background: var(--mac-window-background); color: var(--mac-label-primary);
  box-shadow: var(--shadow-mac-window); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; /* kit: Windows/No Sidebar/Active style */
}
.hig-sheet--mac .hig-sheet__header { touch-action: auto; }
.hig-sheet--mac .hig-sheet__title { white-space: normal; margin-bottom: 20px; font-size: 14px; font-weight: 700; color: var(--mac-label-primary); } /* kit: SF Pro Bold 14, 20pt above the form */
.hig-sheet__footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 20px; flex: none; } /* kit: 24pt push buttons 8pt apart, 20pt below the form */

/* ---- Window ---- */
/* Window — mockup frames from the macOS 27 kit (Windows, Titlebars and Toolbars), the iOS 27 kit (Windows,
   Examples/Windows) and the visionOS 26 kit (Window Controls, Examples). */
.hig-window { position: relative; box-sizing: border-box; font-family: var(--font-sans); }
.hig-window__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* The body is deliberately not positioned: a macOS Sheet placed in it dims and centers on the whole window. */
.hig-window__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.hig-window__titlebar { position: relative; flex: none; display: flex; align-items: center; box-sizing: border-box; }
.hig-window__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-window__toolbar { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hig-window__sidebar { flex: none; display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
.hig-window__sidebar-content { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ---------- macOS window controls: 14pt circles 9pt apart (kit Window Controls/Standard); panels 10pt, 7pt apart ---------- */
.hig-window__controls { display: inline-flex; gap: 9px; flex: none; }
.hig-window__control { width: 14px; height: 14px; border-radius: 50%; background: var(--mac-fill-primary); } /* inactive / unavailable: gray */
.hig-window__controls--panel { gap: 7px; }
.hig-window__controls--panel .hig-window__control { width: 10px; height: 10px; }
/* Close, minimize, zoom are fixed artwork in the kit (Titlebars/Window Controls: red, yellow, green ovals with no color
   swatch), so they keep their standard colors when Increase Contrast is on. The component sets data-theme="light" /
   "dark" on each colored dot inside a -hc theme, so the system colors below resolve to their standard values. The kit
   and the HIG show no Increase Contrast outline for them, so none is drawn. */
.hig-window:not(.hig-window--inactive) .hig-window__control--close { background: var(--system-red); }
.hig-window:not(.hig-window--inactive) .hig-window__control--minimize { background: var(--system-yellow); }
.hig-window:not(.hig-window--inactive) .hig-window__control--zoom { background: var(--system-green); }

/* ---------- macOS document window ---------- */
.hig-window--mac {
  display: flex; overflow: hidden; border-radius: var(--radius-mac-window);
  background: var(--mac-window-background); color: var(--mac-label-primary); box-shadow: var(--shadow-mac-window); /* kit Windows/No Sidebar/Active */
  font-size: 13px; line-height: 16px; letter-spacing: -0.08px;
}
.hig-window--mac.hig-window--inactive { box-shadow: var(--shadow-mac-window-inactive); }
/* Dark key windows add a 1pt inside rim of white at 20% (kit Windows/Dark/No Sidebar/Active). */
.hig-window--mac::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; }
[data-theme^="dark"] .hig-window--mac:not(.hig-window--inactive)::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mac-label-primary) 20%, transparent); }
/* Title bar only: 33pt, controls at x=9, title 16pt after them (kit Default + Title). */
.hig-window--mac .hig-window__titlebar { height: 33px; padding: 0 9px; gap: 16px; }
/* With a toolbar or sidebar the bar is unified and 52pt tall: controls at x=18, items 8pt apart, 8pt from the trailing edge. */
.hig-window--document.hig-window--with-toolbar .hig-window__titlebar,
.hig-window--document.hig-window--with-sidebar .hig-window__titlebar { height: 52px; padding: 0 8px 0 18px; gap: 8px; }
.hig-window--document.hig-window--with-sidebar .hig-window__titlebar { padding-left: 8px; }
.hig-window--mac .hig-window__heading { display: flex; flex-direction: column; min-width: 0; }
.hig-window--mac .hig-window__title { font-size: 13px; line-height: 15px; font-weight: 700; color: var(--mac-label-primary); } /* kit Title (no sidebar): Bold 13/15 */
.hig-window--document.hig-window--with-sidebar .hig-window__title { font-size: 15px; letter-spacing: -0.2px; } /* kit Title (with sidebar): Bold 15/15 */
.hig-window--mac .hig-window__subtitle { margin-top: 2px; font-size: 11px; line-height: 13px; font-weight: 500; color: var(--mac-label-tertiary); } /* kit: Medium 11, 17pt below the title's top */
.hig-window--mac.hig-window--inactive .hig-window__title { color: var(--mac-label-tertiary); }
/* Sidebar: Liquid Glass floating in the 256pt leading pane (kit Left Pane). The 8pt inset and the concentric 8pt radius
   are chosen: the kit draws the pane full-height and gives no inset. */
.hig-window--mac .hig-window__sidebar { width: 240px; margin: 8px; border-radius: calc(var(--radius-mac-window) - 8px); color: var(--mac-label-primary); }
.hig-window--mac.hig-window--inactive .hig-window__sidebar { background: var(--mac-material-ultrathick); } /* inactive windows drop vibrancy (HIG); kit Sidebar/Background/Inactive is opaque */
.hig-window--mac .hig-window__sidebar-bar { height: 44px; padding: 11px 10px 0; box-sizing: border-box; flex: none; } /* controls land at the kit's x=18, y=19 */

/* ---------- macOS utility panel (kit Windows/Utility Panel, Panel/Titlebar) ---------- */
.hig-window--panel, .hig-window--hud { border-radius: 15px; box-shadow: 0 5px 20px 0 color-mix(in srgb, var(--glass-dim) 86%, transparent); } /* kit Panels/Light: r15, black at 30% */
[data-theme^="dark"] .hig-window--panel, .hig-window--hud {
  box-shadow: 0 16px 33px 0 color-mix(in srgb, var(--background-primary) 40%, transparent), 0 0 1px 0 color-mix(in srgb, var(--background-primary) 80%, transparent); /* kit Panels/Dark (background-primary is black in dark) */
}
.hig-window--panel .hig-window__titlebar, .hig-window--hud .hig-window__titlebar {
  height: 24px; padding: 8px 8px 0; align-items: flex-start; border-bottom: 1px solid var(--separator); /* kit: 24pt bar, controls at 8,8 */
}
.hig-window--panel.hig-window--with-toolbar .hig-window__titlebar, .hig-window--hud.hig-window--with-toolbar .hig-window__titlebar { height: 56px; } /* kit Toolbar with Tabs */
.hig-window--panel .hig-window__heading, .hig-window--hud .hig-window__heading { position: absolute; left: 60px; right: 60px; top: 5px; align-items: center; }
.hig-window--panel .hig-window__title, .hig-window--hud .hig-window__title { font-size: 11px; line-height: 13px; font-weight: 500; color: var(--mac-label-primary); } /* kit: Medium 11, centered at y=7 */
.hig-window--panel.hig-window--inactive .hig-window__title { color: var(--mac-label-tertiary); }
.hig-window--panel .hig-window__toolbar, .hig-window--hud .hig-window__toolbar { position: absolute; left: 0; right: 0; top: 23px; justify-content: center; margin: 0; } /* kit: tab bar at y=23 */
/* HUD: the same panel in a dark, translucent appearance (HIG Panels). The material is chosen: the kit has no HUD. */
.hig-window--hud:not(.hig-window--inactive)::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mac-label-primary) 20%, transparent); }
.hig-window--hud { background: var(--mac-material-regular); -webkit-backdrop-filter: blur(var(--blur-mac-material)) saturate(1.9); backdrop-filter: blur(var(--blur-mac-material)) saturate(1.9); }

/* ---------- iPadOS window (kit Windows/Window 400×400 r34, Examples/Windows) ---------- */
.hig-window--ipad {
  display: flex; overflow: hidden; border-radius: var(--radius-sheet);
  background: var(--background-elevated-primary); color: var(--label-primary);
  box-shadow: 0 30px 146px 0 color-mix(in srgb, var(--glass-dim) 86%, transparent); /* kit: black at 30% */
}
.hig-window__ipad-controls { position: relative; display: inline-flex; align-items: center; gap: 4.5px; width: 41px; height: 22px; padding: 0 7px; box-sizing: border-box; flex: none; } /* kit: 6pt dots at 7, 17.5, 28 */
.hig-window__dot { width: 6px; height: 6px; border-radius: 50%; }
.hig-window__ipad-controls--inactive { border-radius: var(--radius-capsule); background: var(--glass-inactive); gap: 3px; padding: 0 8px; } /* kit Inactive: 5pt dots at 8, 18, 28 */
.hig-window__ipad-controls--inactive .hig-window__dot { width: 5px; height: 5px; background: var(--label-secondary); }
.hig-window--ipad .hig-window__titlebar { height: 44px; margin: 10px 0; padding: 0 16px; } /* kit: 54pt toolbar at y=10, 44pt item row, 16pt margins */
.hig-window--ipad .hig-window__titlebar > .hig-window__ipad-controls { margin-left: 11px; } /* kit: controls at x=27, y=21 */
.hig-window--ipad .hig-window__title {
  position: absolute; left: 50%; transform: translateX(-50%); max-width: 50%;
  font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.43px; /* ios-headline */
}
.hig-window--ipad.hig-window--inactive .hig-window__title { color: var(--label-secondary); }
.hig-window--ipad .hig-window__sidebar { width: calc(var(--sidebar-width) - 16px); margin: 8px; border-radius: var(--radius-group); } /* inset and concentric 26pt radius chosen (34 − 8); width from sidebar-width */
.hig-window--ipad.hig-window--inactive .hig-window__sidebar { background: var(--fill-quaternary); }
.hig-window--ipad .hig-window__sidebar-bar { height: 56px; padding: 13px 0 0 19px; box-sizing: border-box; flex: none; } /* controls land at the kit's x=27, y=21 */
.hig-window__resize { position: absolute; right: 0; bottom: 0; color: var(--label-secondary); pointer-events: none; } /* kit Resize - Floating 32×32; color chosen (the kit draws a placeholder) */

/* ---------- visionOS window (kit Examples 'Window Platter', System/Window Controls) ---------- */
.hig-window--vision {
  --hig-vision-label: var(--white); /* visionOS labels on glass are white (kit "Primary - onDark") */
  /* Secondary text in the window's content (subtitles, descriptions), inherited by children. The kit's secondary
     label is white 96% at 40% plus-lighter (+98 per channel); with normal blending, white at 80% reaches 4.5:1 over a
     platter up to gray 99 (derivation in Alert.css; value chosen to clear 4.5:1). */
  --hig-vision-label-secondary: color-mix(in srgb, var(--hig-vision-label) 80%, transparent);
  /* kit Materials/Glass Platter: 149,149,149 at 25%, the same in every theme (white 58.4% + black = 149). */
  --hig-vision-glass: color-mix(in srgb, color-mix(in srgb, var(--white) 58.4%, var(--black)) 25%, transparent);
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; color: color-mix(in srgb, var(--hig-vision-label) 96%, transparent);
}
.hig-window--vision .hig-window__platter {
  position: relative; z-index: 0; display: flex; width: 100%; box-sizing: border-box; overflow: hidden; border-radius: 46px; /* kit: 1280×720 platter, r46 */
  background: var(--hig-vision-glass); /* kit Materials/Glass Platter: 149,149,149 @ 25% */
  -webkit-backdrop-filter: blur(112.5px) saturate(1.64); backdrop-filter: blur(112.5px) saturate(1.64); /* kit: blur 112.5, saturation 1.64 */
}
.hig-window--vision .hig-window__platter::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hig-vision-label) 30%, transparent) 0%, transparent 40.6%, transparent 57.4%, color-mix(in srgb, var(--hig-vision-label) 10%, transparent) 100%);
  -webkit-mask: linear-gradient(var(--hig-vision-label) 0 0) content-box, linear-gradient(var(--hig-vision-label) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--hig-vision-label) 0 0) content-box exclude, linear-gradient(var(--hig-vision-label) 0 0);
}
.hig-window--vision .hig-window__sidebar { width: 320px; } /* kit Views/Sidebar: 320pt */
.hig-window--vision .hig-window__titlebar { height: 92px; padding: 0 26px; gap: 16px; } /* kit Toolbar Top: 92pt, title at x=26, buttons 26pt from the edge */
.hig-window--vision .hig-window__title { font-size: 29px; line-height: 38px; font-weight: 700; letter-spacing: 0.4px; } /* vision-large-title */
.hig-window--vision .hig-window__toolbar { gap: 16px; }
.hig-window__bar-row { position: relative; width: 212px; height: 37px; margin-top: 4px; flex: none; } /* kit: controls 212×37, 4pt below the platter */
.hig-window__bar {
  position: absolute; left: 38px; top: 24px; width: 136px; height: 10px; border-radius: 5px; /* kit Window Bar 136×10 r5 */
  background: color-mix(in srgb, var(--hig-vision-label) 30%, transparent); -webkit-backdrop-filter: blur(40.8px); backdrop-filter: blur(40.8px);
}

/* ---- ColorWell ---- */
/* ColorWell — macOS 27 kit "Color Wells" page (Color Pickers/Content Area/Standard capsules, Color Picker (Wheel))
   and the iOS 27 kit "Color Pickers" sheet (Color Grid, Opacity Meter, Swatches). */
.hig-color-well { position: relative; display: inline-flex; vertical-align: middle; font-family: var(--font-sans); }
.hig-color-well__button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; background: transparent;
  position: relative; display: inline-flex; box-sizing: border-box; cursor: pointer; flex: none;
  -webkit-tap-highlight-color: transparent;
}
.hig-color-well__button:disabled { cursor: default; }
.hig-color-well__swatch { display: block; pointer-events: none; }
/* The hidden native picker that opens as the system color picker; it sits at the well's lower edge so the
   browser anchors its popup there. */
.hig-color-well__native {
  position: absolute; left: 0; bottom: 0; inline-size: 1px; block-size: 1px; padding: 0; margin: 0; border: 0;
  opacity: 0; pointer-events: none;
}

/* ---- iOS / iPadOS (kit Color Picker (Wheel)): 28pt circle. Selected color = 18pt dot inside a 3pt hue ring;
   no color = the full hue disc with a white center. The kit's ring runs through pure red, magenta, blue, green and
   yellow; the system color tokens stand in for those hues. */
.hig-color-well--ios { inline-size: 28px; block-size: 28px; }
.hig-color-well--ios .hig-color-well__button { inline-size: 28px; block-size: 28px; border-radius: 50%; }
.hig-color-well__ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  --hig-cw-hues: conic-gradient(from 90deg, var(--system-red), var(--system-purple) 20.19%, var(--system-blue) 39.73%,
    var(--system-green) 60.02%, var(--system-yellow) 79.97%, var(--system-red)); /* kit angular stops 0/.2019/.3973/.6002/.7997/1 */
  background: var(--hig-cw-hues);
  /* only the outer 3pt shows (kit ring: 3pt inside border). A mask reads alpha only; any opaque token works. */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), var(--label-primary) calc(100% - 3px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), var(--label-primary) calc(100% - 3px));
}
.hig-color-well--ios .hig-color-well__swatch {
  position: absolute; inset: 5px; border-radius: 50%; background: var(--hig-cw-color); /* kit: 18pt dot at 5,5 */
}
.hig-color-well--ios.hig-color-well--empty .hig-color-well__ring {
  background: radial-gradient(closest-side, white 7.54%, transparent 96.8%), var(--hig-cw-hues); /* kit No Color: white center fading out (white in every theme; no token is) */
  -webkit-mask: none; mask: none;
}
.hig-color-well--ios.hig-color-well--empty .hig-color-well__swatch { display: none; }
/* 44pt minimum hit region around the 28pt well (HIG); the visual stays at kit size. */
.hig-color-well--ios .hig-color-well__button::before { content: ""; position: absolute; inset: -8px; }
.hig-color-well--ios.hig-color-well--disabled .hig-color-well__button { opacity: 0.5; } /* kit Segmented Controls/4 - Disabled uses 50% opacity; the wheel well has no disabled master */

/* ---- macOS (kit Color Pickers/Content Area/Standard): bordered capsule with a 3pt-inset capsule swatch */
.hig-color-well--mac .hig-color-well__button {
  padding: 3px; border-radius: var(--radius-capsule); background: var(--mac-fill-secondary); /* kit 01 - Bordered/01 - Idle */
}
.hig-color-well--mac .hig-color-well__swatch {
  inline-size: 100%; block-size: 100%; border-radius: var(--radius-capsule); background: var(--hig-cw-color, transparent);
  box-shadow: inset 0 0 0 1px var(--mac-fill-primary); /* kit: 1pt inside border rgba(0,0,0,.1) */
}
.hig-color-well--mac.hig-color-well--mini .hig-color-well__button { inline-size: 32px; block-size: var(--mac-control-mini); }
.hig-color-well--mac.hig-color-well--small .hig-color-well__button { inline-size: 40px; block-size: var(--mac-control-small); }
.hig-color-well--mac.hig-color-well--regular .hig-color-well__button { inline-size: 48px; block-size: var(--mac-control-regular); }
.hig-color-well--mac.hig-color-well--large .hig-color-well__button { inline-size: 56px; block-size: var(--mac-control-large); }
.hig-color-well--mac.hig-color-well--xl .hig-color-well__button { inline-size: 72px; block-size: var(--mac-control-xl); }
/* kit 3 - Selected: the well turns accent while its picker is open (kit adds a 6% plus-darker wash; the shared pressed overlay stands in) */
.hig-color-well--mac.hig-color-well--active .hig-color-well__button {
  background: linear-gradient(var(--pressed-overlay), var(--pressed-overlay)), var(--accent);
}
/* kit 4 - Disabled: rgba(0,0,0,.04) bezel (quaternary fill), swatch at 50% */
.hig-color-well--mac.hig-color-well--disabled .hig-color-well__button { background: var(--mac-fill-quaternary); }
.hig-color-well--mac.hig-color-well--disabled .hig-color-well__swatch { opacity: 0.5; }

/* drop target highlight while a color is dragged over (kit Input Fields focus ring style) */
.hig-color-well--drop .hig-color-well__button { border-radius: var(--radius-capsule); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent); }

/* ---------- variant="grid": the iOS color picker's Grid page, inline ---------- */
.hig-color-well-picker {
  inline-size: 354px; max-inline-size: 100%; box-sizing: border-box; /* kit iPhone sheet content: 354pt (iPad 370pt) */
  font-family: var(--font-sans); color: var(--label-primary);
  /* Transparency checkerboard (kit 22pt tile of rgb(58,58,60) squares over rgb(217,217,217)), mixed from system gray.
     white/black are only the color-mix endpoints here. */
  --hig-cw-check: repeating-conic-gradient(color-mix(in srgb, var(--system-gray) 41%, var(--black)) 0 25%,
    color-mix(in srgb, var(--system-gray) 33%, var(--white)) 0 50%) 0 0 / 22px 22px;
}
.hig-color-well-picker--disabled { opacity: 0.5; pointer-events: none; } /* kit Segmented Controls/4 - Disabled uses 50% opacity */

/* Color Grid: 12 × 10, radius 8. Row 0 is system gray from white to black; rows 1–4 are shades of each system color,
   row 5 the color itself, rows 6–9 tints. Mix ratios match the kit grid's blue column (rgb 0,97,253 at row 5). */
.hig-color-well__grid {
  display: grid; grid-template-rows: repeat(10, 1fr); aspect-ratio: 354 / 296; /* kit frame 354×296 */
  border-radius: var(--radius-sm); overflow: hidden;
}
.hig-color-well__row { display: grid; grid-template-columns: repeat(12, 1fr); }
.hig-color-well__cell {
  position: relative; cursor: pointer; outline: none;
  background: color-mix(in srgb, var(--hig-cw-hue) var(--hig-cw-mix), var(--hig-cw-end));
}
.hig-color-well__row--r1 { --hig-cw-mix: 34%; --hig-cw-end: var(--black); }
.hig-color-well__row--r2 { --hig-cw-mix: 49%; --hig-cw-end: var(--black); }
.hig-color-well__row--r3 { --hig-cw-mix: 67%; --hig-cw-end: var(--black); }
.hig-color-well__row--r4 { --hig-cw-mix: 85%; --hig-cw-end: var(--black); }
.hig-color-well__row--r5 { --hig-cw-mix: 100%; --hig-cw-end: var(--black); }
.hig-color-well__row--r6 { --hig-cw-mix: 77%; --hig-cw-end: var(--white); }
.hig-color-well__row--r7 { --hig-cw-mix: 55%; --hig-cw-end: var(--white); }
.hig-color-well__row--r8 { --hig-cw-mix: 35%; --hig-cw-end: var(--white); }
.hig-color-well__row--r9 { --hig-cw-mix: 18%; --hig-cw-end: var(--white); }
.hig-color-well__cell--h0 { --hig-cw-hue: var(--system-cyan); }
.hig-color-well__cell--h1 { --hig-cw-hue: var(--system-blue); }
.hig-color-well__cell--h2 { --hig-cw-hue: var(--system-indigo); }
.hig-color-well__cell--h3 { --hig-cw-hue: var(--system-purple); }
.hig-color-well__cell--h4 { --hig-cw-hue: var(--system-pink); }
.hig-color-well__cell--h5 { --hig-cw-hue: var(--system-red); }
.hig-color-well__cell--h6 { --hig-cw-hue: var(--system-orange); }
.hig-color-well__cell--h7 { --hig-cw-hue: var(--system-brown); }
.hig-color-well__cell--h8 { --hig-cw-hue: var(--system-yellow); }
.hig-color-well__cell--h9 { --hig-cw-hue: var(--system-green); }
.hig-color-well__cell--h10 { --hig-cw-hue: var(--system-mint); }
.hig-color-well__cell--h11 { --hig-cw-hue: var(--system-teal); }
/* gray row: kit values 254 · 235 · 214 · 194 · 173 · 153 · 133 · 112 · 92 · 71 · 51 · 0, mixed from system gray */
.hig-color-well__row--r0 .hig-color-well__cell { --hig-cw-hue: var(--system-gray); }
.hig-color-well__cell--g0 { --hig-cw-mix: 0%; --hig-cw-end: var(--white); }
.hig-color-well__cell--g1 { --hig-cw-mix: 18%; --hig-cw-end: var(--white); }
.hig-color-well__cell--g2 { --hig-cw-mix: 36%; --hig-cw-end: var(--white); }
.hig-color-well__cell--g3 { --hig-cw-mix: 54%; --hig-cw-end: var(--white); }
.hig-color-well__cell--g4 { --hig-cw-mix: 73%; --hig-cw-end: var(--white); }
.hig-color-well__cell--g5 { --hig-cw-mix: 90%; --hig-cw-end: var(--white); }
.hig-color-well__cell--g6 { --hig-cw-mix: 94%; --hig-cw-end: var(--black); }
.hig-color-well__cell--g7 { --hig-cw-mix: 79%; --hig-cw-end: var(--black); }
.hig-color-well__cell--g8 { --hig-cw-mix: 65%; --hig-cw-end: var(--black); }
.hig-color-well__cell--g9 { --hig-cw-mix: 50%; --hig-cw-end: var(--black); }
.hig-color-well__cell--g10 { --hig-cw-mix: 36%; --hig-cw-end: var(--black); }
.hig-color-well__cell--g11 { --hig-cw-mix: 0%; --hig-cw-end: var(--black); }
/* kit: the selected swatch carries a 3pt white border centered on its edge */
.hig-color-well__cell.is-selected { z-index: 1; box-shadow: 0 0 0 1.5px white, inset 0 0 0 1.5px white; } /* kit white in every theme; no token is (on-accent turns black in dark-hc) */
.hig-color-well__cell:focus-visible { z-index: 2; outline: 3px solid var(--focus-ring); outline-offset: -3px; }

/* Opacity Meter (kit 362×95): Footnote Bold label 16pt below the grid, a 34pt capsule slider and a 75×34 field 11pt apart */
.hig-color-well__opacity { padding: 16px 0 22px; }
.hig-color-well__opacity-label { color: var(--label-primary); }
.hig-color-well__opacity-row { display: flex; align-items: center; gap: 11px; margin-top: 5px; }
.hig-color-well__slider {
  position: relative; flex: 1 1 auto; block-size: 34px; border-radius: var(--radius-capsule); touch-action: none; cursor: pointer;
  background: linear-gradient(to right, transparent, var(--hig-cw-opaque) 85.5%), var(--hig-cw-check); /* kit gradient ends at 85.5% */
}
.hig-color-well__scrubber {
  position: absolute; top: 0; inline-size: 34px; block-size: 34px; border-radius: 50%; box-sizing: border-box;
  left: calc(var(--hig-cw-alpha, 1) * (100% - 34px));
  background: var(--hig-cw-opaque);
  box-shadow: inset 0 0 0 3px white, var(--shadow-knob); /* kit: 3pt white inside border (every theme), soft knob shadow */
}
.hig-color-well__percent {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; outline: none; flex: none; box-sizing: border-box;
  inline-size: 75px; block-size: 34px; padding: 0 0 0 14px; border-radius: var(--radius-sm); /* kit Field 75×34 r8, text at 14 */
  background: var(--fill-tertiary); /* kit draws the field in the sheet's background color; inline it needs a visible well fill */
  color: var(--label-primary); font-family: var(--font-sans);
}
.hig-color-well__percent:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Swatches (kit 362×95): 75×75 current color (r10), then saved colors as 30pt dots — 5 columns 56.75pt apart, rows 45pt apart */
.hig-color-well__tray { display: flex; align-items: flex-start; gap: 30px; margin-top: 20px; }
.hig-color-well__opacity + .hig-color-well__tray { margin-top: 0; }
.hig-color-well__current {
  flex: none; inline-size: 75px; block-size: 75px; border-radius: var(--radius-thumbnail);
  background: linear-gradient(var(--hig-cw-color), var(--hig-cw-color)), var(--hig-cw-check);
}
.hig-color-well__dots {
  flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, 30px); justify-content: space-between; row-gap: 15px;
  max-inline-size: 257px; /* kit: 26.75pt column gaps at 362pt; the 354pt iPhone sheet narrows them */
}
.hig-color-well__dot, .hig-color-well__add {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; position: relative;
  inline-size: 30px; block-size: 30px; border-radius: 50%; cursor: pointer;
}
.hig-color-well__dot.is-selected::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid white; } /* kit: 24pt ring, 2pt white in every theme */
.hig-color-well__add { display: inline-flex; align-items: center; justify-content: center; background: var(--fill-primary); color: var(--label-primary); }
.hig-color-well__add:disabled { color: var(--label-tertiary); cursor: default; }
.hig-color-well__add .hig-icon { inline-size: 25px; block-size: 25px; } /* draws the kit's 14.67pt plus */

/* ---- ComboBox ---- */
/* ComboBox — macOS 27 kit "Combo Boxes" (a Text Field master plus a trailing Menu Button), sizes Mn/Sm/Rg/Lg/XL.
   The open list follows the kit's macOS menu (Menus/Light/Examples/Regular): radius 12, 24pt items, 5pt inset highlight. */
.hig-combo-box {
  display: inline-flex; align-items: center; gap: 8px; /* label-to-field gap: not in the kit; chosen */
  position: relative; font-family: var(--font-sans); color: var(--mac-label-primary);
  vertical-align: middle;
}
.hig-combo-box__label { font-weight: 500; white-space: nowrap; color: var(--mac-label-primary); } /* kit Forms labels: 13pt Medium */
/* labelWidth: labels in a fixed column, trailing-aligned against the field, so the fields of a form line up on one
   leading edge (a label wider than the column still shows in full and pushes its field). */
.hig-combo-box--aligned .hig-combo-box__label { flex: none; box-sizing: border-box; min-inline-size: var(--hig-combo-label-w); text-align: end; }

.hig-combo-box__control {
  position: relative; display: inline-flex; align-items: stretch; box-sizing: border-box;
  flex: 1 1 120px; min-inline-size: 0; /* kit master width 120; a wider root (style.width) grows the field */
  background: var(--mac-window-background); /* kit Input Fields/01 - Idle: white (light) / rgb(30,30,30) (dark) */
  --hig-combo-edge: color-mix(in srgb, var(--label-primary) 5%, transparent); /* kit: 1pt outside border rgba(0,0,0,.05) */
  box-shadow: 0 0 0 1px var(--hig-combo-edge);
}
[data-theme^="dark"] .hig-combo-box__control { --hig-combo-edge: color-mix(in srgb, var(--label-primary) 4%, transparent); } /* kit dark: white 4% */
/* kit Input Fields/03 - Focus Ring: 3.5pt outside + 1pt inside, accent at 50% */
.hig-combo-box__control:focus-within {
  box-shadow: 0 0 0 1px var(--hig-combo-edge), 0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent);
}

.hig-combo-box__input {
  appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-inline-size: 0; inline-size: 100%;
  margin: 0; border: 0; outline: none; background: transparent; box-sizing: border-box;
  font: inherit; font-weight: 500; color: var(--mac-label-primary); /* kit value text: SF Pro Medium */
  text-overflow: ellipsis;
}
.hig-combo-box__input::placeholder { color: var(--mac-label-tertiary); opacity: 1; }

.hig-combo-box__button {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; padding: 0; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: default; color: var(--mac-label-primary);
}
.hig-combo-box__bezel {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  background: var(--mac-fill-secondary); /* kit Content Area/01 - Bordered/01 - Idle rgba(0,0,0,.08) */
}
/* kit 3 - Button Clicked doubles the fill (0.16): the shared pressed overlay (0.08) layers over the 0.08 fill */
.hig-combo-box__button:active:not(:disabled) .hig-combo-box__bezel::after { opacity: 1; }

/* ---- sizes: field height / radius / text inset / type; button width / bezel inset / bezel radius / glyph size (kit) */
.hig-combo-box--mini .hig-combo-box__control { block-size: var(--mac-control-mini); border-radius: var(--radius-mac-mini); font-size: 10px; letter-spacing: 0.12px; }
.hig-combo-box--mini .hig-combo-box__input { padding: 0 0 0 6px; }
.hig-combo-box--mini .hig-combo-box__button { inline-size: 20px; }
.hig-combo-box--mini .hig-combo-box__bezel { inline-size: 16px; block-size: 12px; border-radius: 2.5px; font-size: 9px; } /* kit BG 16x12 r2.5, glyph 9pt */
.hig-combo-box--mini .hig-combo-box__label { font-size: 10px; line-height: 13px; letter-spacing: 0.12px; }

.hig-combo-box--small .hig-combo-box__control { block-size: var(--mac-control-small); border-radius: var(--radius-mac-small); font-size: 11px; letter-spacing: 0.06px; }
.hig-combo-box--small .hig-combo-box__input { padding: 0 0 0 6px; }
.hig-combo-box--small .hig-combo-box__button { inline-size: 24px; }
.hig-combo-box--small .hig-combo-box__bezel { inline-size: 20px; block-size: 16px; border-radius: 3.5px; font-size: 10px; } /* kit BG 20x16 r3.5, glyph 10pt */
.hig-combo-box--small .hig-combo-box__label { font-size: 11px; line-height: 14px; letter-spacing: 0.06px; }

.hig-combo-box--regular .hig-combo-box__control { block-size: var(--mac-control-regular); border-radius: var(--radius-mac-regular); font-size: 13px; letter-spacing: -0.08px; }
.hig-combo-box--regular .hig-combo-box__input { padding: 0 0 0 6px; }
.hig-combo-box--regular .hig-combo-box__button { inline-size: 28px; }
.hig-combo-box--regular .hig-combo-box__bezel { inline-size: 24px; block-size: 20px; border-radius: 4.5px; font-size: 10px; } /* kit BG 24x20 r4.5, glyph 10pt */

.hig-combo-box--large .hig-combo-box__control { block-size: var(--mac-control-large); border-radius: var(--radius-mac-large); font-size: 13px; letter-spacing: -0.08px; } /* kit Text Fields/4 Lg r7 */
.hig-combo-box--large .hig-combo-box__input { padding: 0 0 0 8px; }
.hig-combo-box--large .hig-combo-box__button { inline-size: 28px; }
.hig-combo-box--large .hig-combo-box__bezel { inline-size: 24px; block-size: 24px; border-radius: 5.5px; font-size: 12.5px; } /* kit BG 24x24 r5.5, glyph 12.5pt */

.hig-combo-box--xl .hig-combo-box__control { block-size: var(--mac-control-xl); border-radius: var(--radius-mac-xl); font-size: 13px; letter-spacing: -0.08px; } /* kit Text Fields/5 XL r9 */
.hig-combo-box--xl .hig-combo-box__input { padding: 0 0 0 10px; }
.hig-combo-box--xl .hig-combo-box__button { inline-size: 36px; }
.hig-combo-box--xl .hig-combo-box__bezel { inline-size: 30px; block-size: 30px; border-radius: 6.5px; font-size: 13px; } /* kit BG 30x30 r6.5 (3pt inset), glyph 13pt */

.hig-combo-box__bezel .hig-icon { inline-size: 1.45em; block-size: 1.45em; } /* the kit glyph is SF Pro Bold at the size above */

/* ---- disabled (kit 4 - Disabled): field at 50%, quaternary-weight bezel, tertiary glyph and text */
.hig-combo-box--disabled .hig-combo-box__control { background: color-mix(in srgb, var(--mac-window-background) 50%, transparent); }
.hig-combo-box--disabled .hig-combo-box__input { color: var(--mac-label-tertiary); }
.hig-combo-box--disabled .hig-combo-box__bezel { background: var(--mac-fill-quaternary); color: var(--mac-label-tertiary); }
.hig-combo-box--disabled .hig-combo-box__label { color: var(--mac-label-tertiary); }

/* ---- the suggestion list: the macOS menu panel (kit Menus, Liquid Glass/Menus — the same material, blur and shadow as
   Menu.css .hig-menu--mac: mac-material-thick, 20pt blur, saturation 0.8 light / 1.2 dark) as wide as the field */
.hig-combo-box__list {
  position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 4px); /* 4pt drop below the field: chosen */
  box-sizing: border-box; padding: 6px 5px 5px; /* kit: items start 6pt from the top, highlight inset 5pt */
  max-block-size: 270px; overflow-y: auto; /* about 11 items; the kit sets no limit */
  border-radius: var(--radius-mac-menu);
  background: var(--mac-material-thick); box-shadow: var(--shadow-mac-menu);
  -webkit-backdrop-filter: blur(20px) saturate(0.8); backdrop-filter: blur(20px) saturate(0.8);
  color: var(--mac-label-primary);
}
[data-theme^="dark"] .hig-combo-box__list { -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-transparency="full"]) .hig-combo-box__list { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mac-window-background); }
}
:root[data-transparency="reduced"] .hig-combo-box__list { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mac-window-background); }
.hig-combo-box__list[hidden] { display: none; }
.hig-combo-box__option {
  block-size: 24px; display: flex; align-items: center; box-sizing: border-box; /* kit Regular menu item 24pt */
  padding: 0 11px; border-radius: var(--radius-mac-menu-item); /* kit: highlight extends 11pt past the text, r8 */
  font-size: 13px; font-weight: 500; letter-spacing: -0.2px; /* kit: SF Pro Medium 13, kern -0.2 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default;
}
.hig-combo-box__option.is-active { background: var(--accent); color: var(--on-accent); } /* kit 2 - Hover */
.hig-combo-box__option[aria-disabled="true"] { color: var(--mac-label-tertiary); }

/* ---- DatePicker ---- */
/* DatePicker — iOS 27 kit "Date and Time Pickers": Buttons (120×36 / 90×36 capsules), Compact Picker (320×326 /
   320×378 / 320×52 platters, radius 13, Liquid Glass), Inline Picker (402×326 / 402×382 / 402×52), Date Picker Header
   Collapsed (40pt), Date Picker Month (weekday row + 5 weeks, 38pt day circles 50pt apart, rows 51pt apart),
   Time Picker (time field 67×34, AM-PM 100×36) and Wheel (393×215, band 297×34). */
.hig-date-picker { font-family: var(--font-sans); color: var(--label-primary); box-sizing: border-box; position: relative; }

/* ---------- compact: value buttons + popover ---------- */
.hig-date-picker--compact { display: inline-flex; gap: 4px; align-items: flex-start; } /* kit Buttons/Date and Time: 4pt apart */
.hig-date-picker__anchor { position: relative; display: inline-flex; }
.hig-date-picker__value {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer; white-space: nowrap;
  block-size: 36px; padding: 0 12px; border-radius: var(--radius-capsule); background: var(--fill-tertiary); /* kit Buttons/Date */
  font: 400 17px/20px var(--font-sans); letter-spacing: -0.43px; color: var(--label-primary);
}
.hig-date-picker__value.is-open { color: var(--accent); } /* kit Buttons/…/Selected: the value turns accent while editing */
.hig-date-picker__value:disabled { color: var(--label-tertiary); cursor: default; }
/* 44pt minimum hit region around the 36pt buttons (HIG) */
.hig-date-picker__value::before { content: ""; position: absolute; inset-inline: 0; top: 50%; block-size: var(--target-ios); transform: translateY(-50%); }
.hig-date-picker__popover {
  position: absolute; z-index: 30; top: calc(100% + 8px); inset-inline-start: 0; /* 8pt below the button: chosen */
  inline-size: 320px; box-sizing: border-box; padding: 0 12px; border-radius: var(--radius-platter); /* kit 320pt, r13, 12pt content inset */
  color: var(--label-primary);
}
.hig-date-picker__popover--time { padding: 0 16px; } /* kit Compact Picker/Time: Time Picker at 16 */

/* ---------- calendar header (kit Date Picker Header Collapsed, 40pt; 44pt in the inline date-and-time picker) ---------- */
.hig-date-picker__header { display: flex; align-items: center; justify-content: space-between; block-size: 40px; padding: 13px 0 3px 8px; box-sizing: border-box; }
.hig-date-picker__calendar--tall .hig-date-picker__header { block-size: 44px; padding-top: 15px; }
.hig-date-picker__title {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; color: var(--label-primary); /* kit: 17pt Semibold title, chevron 4pt after */
  min-block-size: var(--target-ios); margin-block: -10px; border-radius: var(--radius-sm);
}
.hig-date-picker__title-chevron { display: inline-flex; color: var(--accent); transition: transform 0.2s ease; }
.hig-date-picker__title-chevron .hig-icon { inline-size: 18px; block-size: 18px; } /* draws the kit's 13pt Bold chevron */
.hig-date-picker__title.is-expanded .hig-date-picker__title-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .hig-date-picker__title-chevron { transition: none; } }
.hig-date-picker__nav { display: flex; margin-inline-end: -10px; } /* places the next arrow's glyph 4pt from the edge, as in the kit */
.hig-date-picker__arrow {
  appearance: none; -webkit-appearance: none; margin: -10px 0; border: 0; padding: 0; background: transparent; cursor: pointer;
  inline-size: 43px; block-size: var(--target-ios); display: inline-flex; align-items: center; justify-content: center;
  color: var(--glass-label-primary); border-radius: var(--radius-sm); /* kit: Labels - Liquid Glass/1 Primary, 20pt Medium */
}
.hig-date-picker__arrow .hig-icon { inline-size: 28px; block-size: 28px; }
.hig-date-picker__arrow:disabled { color: var(--label-tertiary); cursor: default; }

/* ---------- month grid (kit Date Picker Month, 286pt) ---------- */
.hig-date-picker__month { padding-bottom: 8px; position: relative; }
.hig-date-picker__weekdays, .hig-date-picker__week { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; }
.hig-date-picker__weekdays { margin-top: 8px; block-size: 18px; margin-bottom: 4px; }
.hig-date-picker__weekday {
  font: 700 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--vibrant-label-secondary); /* kit SAT: 13pt Bold, Vibrant/2 Secondary */
}
.hig-date-picker__week { block-size: 44px; align-items: center; }
.hig-date-picker__week + .hig-date-picker__week { margin-top: 7px; } /* kit weeks 51pt apart */
.hig-date-picker__day {
  inline-size: 38px; block-size: 38px; border-radius: 50%; box-sizing: border-box; cursor: pointer; outline: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 400; letter-spacing: -0.45px; font-variant-numeric: tabular-nums; color: var(--label-primary); /* kit Dates/Default: 20pt Regular */
}
.hig-date-picker__day.is-empty { cursor: default; }
/* kit Dates/Current (today): accent text, Medium, on accent at 12% */
.hig-date-picker__day.is-today { color: var(--accent); font-weight: 500; background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* kit Dates/Selected: label-colored circle, inverted Semibold text */
.hig-date-picker__day.is-selected { background: var(--label-primary); color: var(--background-primary); font-weight: 600; }
/* kit Dates/Current and Selected: accent circle, white Semibold text */
.hig-date-picker__day.is-today.is-selected { background: var(--accent); color: var(--on-accent); }
.hig-date-picker__day.is-disabled { color: var(--label-tertiary); cursor: default; } /* no kit master: unavailable days use tertiary label */
.hig-date-picker__day.is-today.is-disabled { background: transparent; }
.hig-date-picker__day:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hig-date-picker__month--wheels { block-size: 278px; display: flex; align-items: center; } /* the month's 286pt minus its 8pt foot */
.hig-date-picker__month--wheels .hig-date-picker__wheel { flex: 1; }
/* separator under the month when a time row follows (kit Separator Color 0.5pt, opaque) */
.hig-date-picker__calendar + .hig-date-picker__time-row { border-top: 0.5px solid var(--separator-opaque); }

/* ---------- time row (kit Time Picker 326×52 in calendars; Inline Picker/Time 402×52) ---------- */
.hig-date-picker__time-row { display: flex; align-items: center; justify-content: space-between; block-size: 52px; gap: 12px; }
.hig-date-picker__time-row--in-calendar { padding: 0 8px; } /* kit: label at 8, controls end 8pt from the edge */
.hig-date-picker__time-label { color: var(--label-primary); white-space: nowrap; }
.hig-date-picker__time-controls { display: flex; align-items: center; gap: 8px; } /* kit Inline Picker/Time: 8pt */
.hig-date-picker__time-row--in-calendar .hig-date-picker__time-controls { gap: 10px; } /* kit Time Picker: 10pt */
.hig-date-picker__time {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-inline-size: 74px; block-size: 34px; padding: 0 8px; border-radius: var(--radius-capsule); background: var(--fill-tertiary);
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; font-variant-numeric: tabular-nums; color: var(--label-primary);
}
.hig-date-picker__time-row--in-calendar .hig-date-picker__time { block-size: 36px; }
.hig-date-picker__time-part { min-inline-size: 22px; text-align: right; outline: none; cursor: text; border-radius: 4px; }
.hig-date-picker__time-part:focus { color: var(--accent); } /* kit Buttons/Time/Selected: the value being edited turns accent */
.hig-date-picker__time-part:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
.hig-date-picker__time-colon { inline-size: 5px; text-align: center; margin: 0 1px; }
/* AM-PM (kit 100×36 capsule, tertiary fill; 44×28 segments at 6 and 50; active background 48×28 with a soft shadow) */
.hig-date-picker__ampm {
  display: inline-flex; box-sizing: border-box; block-size: 36px; inline-size: 100px; padding: 4px 6px;
  border-radius: var(--radius-capsule); background: var(--fill-tertiary);
}
.hig-date-picker__segment {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; background: transparent; cursor: pointer; position: relative;
  inline-size: 44px; block-size: 28px; border-radius: var(--radius-capsule); z-index: 0;
  font: 500 14px/18px var(--font-sans); color: var(--label-primary); /* kit: 14pt Medium; Semibold when active */
}
.hig-date-picker__segment.is-selected { font-weight: 600; }
.hig-date-picker__segment.is-selected::before {
  content: ""; position: absolute; inset: 0 -2px; z-index: -1; border-radius: var(--radius-capsule);
  background: var(--background-primary); /* kit light: white */
  box-shadow: 0 2px 20px 0 color-mix(in srgb, var(--glass-dim) 17%, transparent); /* kit rgba(0,0,0,.06) */
}
/* kit dark: rgb(108,108,113) — no token pair matches, so mix the dark system grays */
[data-theme^="dark"] .hig-date-picker__segment.is-selected::before { background: color-mix(in srgb, var(--system-gray-2) 80%, var(--system-gray)); }

/* ---------- inline ---------- */
.hig-date-picker--inline { --hig-dp-inset-x: 16px; inline-size: 402px; max-inline-size: 100%; padding: 0 var(--hig-dp-inset-x); } /* kit 402pt, 16pt insets */
/* Bottom separator (kit Separator Color): it starts at the content inset and runs to the trailing edge (date, date and
   time: 16→402) or ends at the content inset (time: 16→386), so it follows `inset`. */
.hig-date-picker--inline::after {
  content: ""; position: absolute; inset-inline: var(--hig-dp-inset-x) 0; bottom: 0; block-size: 0.5px; background: var(--separator-opaque);
}
.hig-date-picker--inline.hig-date-picker--time::after { inset-inline-end: var(--hig-dp-inset-x); }
.hig-date-picker--inline.hig-date-picker--time .hig-date-picker__time-row { block-size: 52px; }

/* ---------- wheels ---------- */
.hig-date-picker--wheels { inline-size: 393px; max-inline-size: 100%; }
.hig-date-picker__wheel { position: relative; block-size: 215px; --hig-dp-inset: min(48px, 12.2%); user-select: none; -webkit-user-select: none; } /* kit: band 48pt in from each side of 393 (12.2%); narrower wheels keep the ratio */
.hig-date-picker__wheel--flush { --hig-dp-inset: 0px; }
.hig-date-picker__band {
  position: absolute; inset-inline: var(--hig-dp-inset); top: 90.5px; block-size: 34px; border-radius: 17px;
  background: var(--fill-quaternary); pointer-events: none; /* kit band 297×34 r17, Fills/4 Quaternary */
}
.hig-date-picker__columns { position: relative; display: flex; block-size: 100%; padding-inline: var(--hig-dp-inset); }
.hig-date-picker__col { position: relative; min-inline-size: 0; }
.hig-date-picker__scroller {
  block-size: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; outline: none;
  padding-block: calc((215px - 32px) / 2); scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.hig-date-picker__scroller::-webkit-scrollbar { display: none; }
.hig-date-picker__row {
  block-size: 32px; line-height: 32px; scroll-snap-align: center; box-sizing: border-box; padding-inline: 4px;
  font-size: 23.5px; font-weight: 400; font-variant-numeric: tabular-nums; /* measured from the kit wheel bitmap */
  white-space: nowrap; color: var(--label-primary); cursor: default;
}
.hig-date-picker__face { display: block; overflow: hidden; text-overflow: ellipsis; transform-origin: 50% 50%; }
.hig-date-picker__row.is-disabled { color: var(--label-tertiary); }
.hig-date-picker__col--center .hig-date-picker__row { text-align: center; }
.hig-date-picker__col--right .hig-date-picker__row { text-align: right; }
.hig-date-picker__col--left .hig-date-picker__row { text-align: left; }
.hig-date-picker__col:has(.hig-date-picker__scroller:focus-visible)::after {
  content: ""; position: absolute; inset-inline: 0; top: 90.5px; block-size: 34px; border-radius: 17px; pointer-events: none;
  outline: 3px solid var(--focus-ring); outline-offset: -3px;
}

/* ---- DigitEntryView ---- */
/* DigitEntryView — tvOS (TVDigitEntryViewController). The HIG page states no metrics and no tvOS UI kit exists, so the
   view is built from tvOS tokens: safe-area insets (tv-safe-*), the 66pt default control size (target-tv), the grid gap
   (tv-grid-gap) and tv-* type styles. Box fills, radius and the focus lift are chosen and noted below. */
.hig-digit-entry {
  position: relative; box-sizing: border-box; inline-size: 100%; block-size: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--tv-safe-vertical) var(--tv-safe-horizontal); /* HIG Layout: tvOS safe area 60 / 80 */
  background: var(--background-primary); color: var(--label-primary); font-family: var(--font-sans);
  text-align: center;
}
.hig-digit-entry__content { display: flex; flex-direction: column; align-items: center; gap: var(--tv-grid-gap); max-inline-size: 100%; }
.hig-digit-entry__text { display: flex; flex-direction: column; align-items: center; }
.hig-digit-entry__title { margin: 0; color: var(--label-primary); }
.hig-digit-entry__prompt { margin: 0; color: var(--label-secondary); max-inline-size: 1200px; } /* keeps the prompt to a readable measure: chosen */

/* the line of digits */
.hig-digit-entry__slots { display: flex; gap: var(--tv-grid-gap); border-radius: var(--radius-sm); outline-offset: 12px; }
.hig-digit-entry__slot {
  inline-size: var(--target-tv); block-size: var(--target-tv); box-sizing: border-box; /* tvOS default control size 66pt (HIG) */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--fill-tertiary); /* fill and radius: chosen */
  font-size: 48px; line-height: 56px; font-weight: 500; letter-spacing: 0.35px; /* tv-title-3 */
  font-variant-numeric: tabular-nums; color: var(--label-primary);
}
.hig-digit-entry__slot.is-current { background: var(--fill-primary); } /* the next digit's box reads stronger: chosen */
.hig-digit-entry__slot svg { display: block; }

/* the digit-specific keyboard: one row, 1–9, 0 and Delete */
.hig-digit-entry__keys { display: flex; gap: var(--tv-grid-gap); flex-wrap: wrap; justify-content: center; }
.hig-digit-entry__key {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; cursor: pointer;
  inline-size: var(--target-tv); block-size: var(--target-tv); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--label-secondary);
  font-family: var(--font-sans); font-size: 38px; line-height: 46px; font-weight: 500; letter-spacing: 0.37px; /* tv-headline */
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; outline: none;
}
.hig-digit-entry__key--delete .hig-icon { inline-size: 44px; block-size: 44px; }
/* tvOS focus: the focused item lifts and highlights (HIG: the focus system highlights and expands items).
   A light platter with dark label and a 1.1 scale stand in for the system focus effect: chosen. */
.hig-digit-entry__key:focus,
.hig-digit-entry__key.is-focused {
  background: var(--label-primary); color: var(--background-primary); transform: scale(1.1);
  box-shadow: var(--shadow-glass);
}
.hig-digit-entry__key:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .hig-digit-entry__key { transition: none; }
  .hig-digit-entry__key:focus, .hig-digit-entry__key.is-focused { transform: none; }
}

/* ---- ImageWell ---- */
/* ImageWell — macOS 27 kit "Image Wells": 28×28 bezel, radius 2, quinary fill, 0.5pt inner edge, a 1pt window-colored
   ring and a 1.5pt 5% outer edge; the image sits 2pt inside. Larger `size` values keep the same bezel. */
.hig-image-well {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px; /* well-to-buttons gap: chosen */
  position: relative; font-family: var(--font-sans); color: var(--mac-label-primary); vertical-align: middle;
}
.hig-image-well__bezel {
  position: relative; box-sizing: border-box; flex: none; padding: 2px; border-radius: 2px; /* kit Image 2,2 24×24, r2 */
  background: var(--mac-fill-quinary); /* kit Fills/5 Quinary */
  /* kit: inner 0.5pt rgba(0,0,0,.05); outer shadows 1pt white and 1.5pt rgba(0,0,0,.05). Drawn as stacked rings — the
     1pt ring (window background, as the kit's white is the light window color) and the full 1.5pt edge outside it —
     so the edge is not hidden under the ring (0.5pt left showing). */
  box-shadow: inset 0 0 0 0.5px var(--mac-fill-tertiary),
    0 0 0 1px var(--mac-window-background),
    0 0 0 2.5px var(--mac-fill-tertiary);
  outline: none;
}
/* Selected (first responder) and drop target: the kit's text-field focus ring, 3.5pt outside + 1pt inside at 50% accent */
.hig-image-well__bezel:focus,
.hig-image-well__bezel--drop {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent),
    0 0 0 1px var(--mac-window-background),
    0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent);
}
.hig-image-well__image {
  display: block; inline-size: 100%; block-size: 100%; object-fit: contain; /* NSImageView scales proportionally to fit */
  -webkit-user-drag: element;
}
.hig-image-well--disabled .hig-image-well__image { opacity: 0.5; } /* kit disabled controls dim their content to 50% */

.hig-image-well__actions { display: flex; gap: 8px; } /* chosen */
/* kit Buttons/Content Area/Bordered/2 Sm: 20pt, 10pt padding, radius 5, 11pt Medium on the secondary fill */
.hig-image-well__action {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: default;
  block-size: var(--mac-control-small); padding: 0 var(--button-padding-small); border-radius: var(--radius-mac-small);
  background: var(--mac-fill-secondary); color: var(--mac-label-primary);
  font: 500 11px/13px var(--font-sans); letter-spacing: 0.06px; white-space: nowrap;
}
.hig-image-well__action:disabled { background: var(--mac-fill-quaternary); color: var(--mac-label-tertiary); }
.hig-image-well__file { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; left: 0; top: 0; }

/* ---- Picker ---- */
/* Picker — iOS 27 kit Date and Time Pickers/Wheel (393×215 wheel, 297×34 band r17, quaternary fill), iOS Menus and
   Lists (pop-up accessory, checkmark rows), macOS 27 kit Pop-up Buttons, Menus and Radio Buttons. */
.hig-picker { font-family: var(--font-sans); color: var(--label-primary); box-sizing: border-box; }
.hig-picker--mac { color: var(--mac-label-primary); }

/* ---------- wheel ---------- */
.hig-picker--wheel { inline-size: 393px; max-inline-size: 100%; } /* kit wheel width */
.hig-picker__wheel {
  position: relative; block-size: 215px; /* kit */
  --hig-picker-inset: min(48px, 12.2%); /* kit: band 48pt in from each side of 393 (12.2%); narrower wheels keep the ratio */
  user-select: none; -webkit-user-select: none;
}
.hig-picker__band {
  position: absolute; inset-inline: var(--hig-picker-inset); top: 90.5px; block-size: 34px; /* kit band 297×34 at y 91 */
  border-radius: 17px; background: var(--fill-quaternary); pointer-events: none;
}
.hig-picker__columns { position: relative; display: flex; block-size: 100%; padding-inline: var(--hig-picker-inset); }
.hig-picker__col { position: relative; min-inline-size: 0; }
.hig-picker__scroller {
  block-size: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; outline: none;
  padding-block: calc((215px - 32px) / 2); /* first and last rows can reach the band */
  scroll-snap-type: y mandatory; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hig-picker__scroller::-webkit-scrollbar { display: none; }
.hig-picker__row {
  block-size: 32px; line-height: 32px; scroll-snap-align: center; box-sizing: border-box;
  /* 23.5pt Regular: measured from the kit wheel bitmap (16.5pt cap height); no type style matches */
  font-size: 23.5px; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-inline: 4px;
  color: var(--label-primary); cursor: default;
}
.hig-picker__face { display: block; overflow: hidden; text-overflow: ellipsis; transform-origin: 50% 50%; }
.hig-picker__row.is-disabled { color: var(--label-tertiary); }
.hig-picker__col--center .hig-picker__row { text-align: center; }
.hig-picker__col--right .hig-picker__row { text-align: right; }
.hig-picker__col--left .hig-picker__row { text-align: left; }
/* keyboard focus: ring the column's slice of the band */
.hig-picker__col:has(.hig-picker__scroller:focus-visible)::after {
  content: ""; position: absolute; inset-inline: 0; top: 90.5px; block-size: 34px; border-radius: 17px; pointer-events: none;
  outline: 3px solid var(--focus-ring); outline-offset: -3px;
}
.hig-picker--disabled .hig-picker__row { color: var(--label-tertiary); }

/* ---------- menu style: pop-up button + menu ---------- */
.hig-picker__menu-root { position: relative; display: inline-flex; }
.hig-picker__trigger {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
}
.hig-picker__trigger:disabled { cursor: default; }
/* iOS (kit Lists/Rows/Accessories - Trailing/Pop-up Button): 17pt secondary label, tertiary ⌃⌄ glyph 10pt after it */
.hig-picker--ios .hig-picker__trigger {
  min-block-size: var(--target-ios); gap: 10px; padding: 0;
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; color: var(--label-secondary);
}
.hig-picker--ios .hig-picker__trigger-glyph { color: var(--label-tertiary); font-size: 17px; display: inline-flex; inline-size: 12px; justify-content: center; }
.hig-picker--ios .hig-picker__trigger-glyph .hig-icon { inline-size: 24px; block-size: 24px; } /* draws the kit's 17pt glyph */
.hig-picker--ios .hig-picker__trigger:disabled { color: var(--label-tertiary); }
/* macOS renders PopUpButton (PopUpButton.css): its menu opens over the button with the selected item level with it. */
.hig-picker__trigger-label { white-space: nowrap; }

.hig-picker__menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); inset-inline-start: 0; box-sizing: border-box; /* iOS: 4pt drop below the button, chosen (no kit value) */
  max-block-size: 360px; overflow-y: auto; /* the kit sets no limit */
}
.hig-picker__menu-root--end .hig-picker__menu { inset-inline-start: auto; inset-inline-end: 0; }
.hig-picker__menu[hidden] { display: none; }
/* iOS menu (kit Menus/Light/iPhone): 250pt wide, radius 32, 10pt padding; 42pt items, 20pt-radius highlight */
.hig-picker--ios .hig-picker__menu { inline-size: var(--menu-width); padding: 10px; border-radius: var(--radius-menu); color: var(--glass-label-primary); }
.hig-picker--ios .hig-picker__item {
  position: relative; display: flex; align-items: center; block-size: 42px; box-sizing: border-box; cursor: default;
  padding: 0 16px 0 40px; /* kit: checkmark at 16pt from the highlight edge; title in the symbol column (picker items carry no symbol) */
  border-radius: 20px; font-size: 17px; line-height: 20px; letter-spacing: -0.43px;
}
.hig-picker--ios .hig-picker__item.is-active { background: var(--vibrant-fill-tertiary); } /* kit BG Selection/Show */
.hig-picker--ios .hig-picker__check { position: absolute; inset-inline-start: 16px; inline-size: 14px; font-size: 15px; display: inline-flex; }
.hig-picker--ios .hig-picker__check .hig-icon { inline-size: 18px; block-size: 18px; margin-inline-start: -2px; } /* kit 15pt Semibold ✓ */
.hig-picker--ios .hig-picker__item[aria-disabled="true"] { color: var(--glass-label-tertiary); }

/* ---------- inline style ---------- */
/* iOS: inset grouped section (kit Lists/Grouped Table View r26, Rows/Default 52pt, trailing Checkmark accessory) */
.hig-picker--ios.hig-picker--inline { inline-size: 370px; max-inline-size: 100%; }
.hig-picker--ios .hig-picker__inline { background: var(--grouped-background-secondary); border-radius: var(--radius-group); overflow: hidden; }
.hig-picker--ios .hig-picker__option {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
  min-block-size: var(--row-height); padding: 0 var(--margin-compact); box-sizing: border-box;
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; color: var(--label-primary); outline-offset: -3px;
}
.hig-picker--ios .hig-picker__option + .hig-picker__option::before {
  content: ""; position: absolute; top: 0; inset-inline: var(--margin-compact); block-size: 1px; background: var(--separator); /* kit row separator, 16pt insets */
}
.hig-picker--ios .hig-picker__option-check { display: inline-flex; inline-size: 22px; justify-content: center; font-size: 17px; color: var(--label-primary); }
.hig-picker--ios .hig-picker__option-check .hig-icon { inline-size: 22px; block-size: 22px; }
.hig-picker--ios .hig-picker__option.is-disabled,
.hig-picker--ios.hig-picker--disabled .hig-picker__option { color: var(--label-tertiary); cursor: default; }
/* macOS: radio buttons (kit Toggles - Radio Buttons/3 Rg): 24pt rows, 16pt circle, label 13pt Medium at 19pt */
.hig-picker--mac .hig-picker__inline { display: flex; flex-direction: column; }
.hig-picker--mac .hig-picker__option {
  display: inline-flex; align-items: center; gap: 3px; block-size: 24px; cursor: default; align-self: flex-start;
  font-size: 13px; font-weight: 500; letter-spacing: -0.08px; border-radius: var(--radius-mac-mini);
}
.hig-picker--mac .hig-picker__radio {
  position: relative; inline-size: 16px; block-size: 16px; border-radius: 50%; flex: none;
  background: var(--mac-fill-primary); /* kit Active, Off: Fills/1 Primary */
}
.hig-picker--mac .hig-picker__option.is-checked .hig-picker__radio { background: var(--accent); }
.hig-picker--mac .hig-picker__option.is-checked .hig-picker__radio::after {
  /* kit Dot 4.8pt, drawn as a gradient over the whole circle so it stays round at any position or zoom */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--on-accent) 2.15px, transparent 2.65px); /* 2.4pt radius, 0.5px soft edge */
}
.hig-picker--mac .hig-picker__option.is-disabled,
.hig-picker--mac.hig-picker--disabled .hig-picker__option { color: var(--mac-label-tertiary); }
.hig-picker--mac.hig-picker--disabled .hig-picker__radio { opacity: 0.5; }

/* ---------- palette style ---------- */
/* Items follow the kit's Menus control-group buttons (4pt apart) at the 44pt minimum target; symbols 22pt,
   colors as the kit's 30pt swatch dots. The selected symbol gets the kit's menu selection fill (r20). */
.hig-picker__palette { display: inline-flex; gap: 4px; }
.hig-picker__swatch {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0; cursor: pointer; position: relative;
  inline-size: var(--target-ios); block-size: var(--target-ios); border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--label-primary);
}
.hig-picker--mac .hig-picker__swatch { color: var(--mac-label-primary); }
.hig-picker__swatch.is-checked:not(.hig-picker__swatch--color) { background: var(--vibrant-fill-tertiary); color: var(--accent); }
.hig-picker__swatch:disabled { color: var(--label-tertiary); cursor: default; }
.hig-picker__dot { position: relative; inline-size: 30px; block-size: 30px; border-radius: 50%; }
.hig-picker__swatch--color.is-checked .hig-picker__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid white; /* kit selected swatch ring: white in every theme */
}
.hig-picker__swatch-text { font-size: 15px; line-height: 20px; letter-spacing: -0.23px; }

/* ---- RadioGroup ---- */
/* RadioGroup — macOS 27 kit (Toggles - Radio Buttons/Content Area, and the radio rows of the Forms page). */
.hig-radio-group { box-sizing: border-box; font-family: var(--font-sans); color: var(--mac-label-primary); }
/* Group label on the leading side, level with the first option (HIG: align the label with the first button).
   The 12pt column gap is padding-bezeled; the kit gives no label-to-group distance. */
.hig-radio-group--labeled { display: inline-grid; grid-template-columns: auto auto; column-gap: var(--padding-bezeled); align-items: start; }
.hig-radio-group__label {
  display: flex; align-items: center; min-height: var(--hig-radio-row);
  font-weight: 500; color: var(--mac-label-primary);
}
.hig-radio-group__options { display: inline-grid; justify-items: start; row-gap: 2px; } /* kit Forms: 24pt radios on a 26pt pitch */
/* Horizontal sets: equal columns sized by the longest label (HIG), 16pt apart (kit Forms 'Option 1' 71pt at x=0,
   'Option 2' at x=87). */
.hig-radio-group--horizontal .hig-radio-group__options { grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 16px; }

.hig-radio {
  position: relative; display: inline-flex; align-items: center; gap: var(--hig-radio-gap); min-height: var(--hig-radio-row);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
/* 28pt minimum hit region (target-mac) */
.hig-radio::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--target-mac)); transform: translateY(-50%); }
.hig-radio--disabled { cursor: default; }
.hig-radio__circle {
  position: relative; flex: none; display: grid; place-items: center;
  width: var(--hig-radio-d); height: var(--hig-radio-d); border-radius: 50%;
  background-color: var(--mac-fill-primary); /* Controls/Active, Off, 01 - Idle */
}
.hig-radio__input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  -webkit-appearance: none; appearance: none; background: transparent; border-radius: 50%; cursor: inherit;
}
.hig-radio--on .hig-radio__circle { background-color: var(--accent); }
[data-theme^="dark"] .hig-radio--on .hig-radio__circle { background-image: linear-gradient(var(--mac-fill-tertiary), var(--mac-fill-tertiary)); } /* + Fills/Dark Vibrant/3 Tertiary */
/* The dot is a gradient over the whole circle, so it is centred exactly and stays round at any position or zoom
   (a 4.8px box at a fractional offset rasterizes as an oval). The 0.5px soft edge stands in for anti-aliasing. */
.hig-radio__dot {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--on-accent) calc(var(--hig-radio-dot) / 2 - 0.25px), transparent calc(var(--hig-radio-dot) / 2 + 0.25px));
}
.hig-radio:not(.hig-radio--disabled):active .hig-radio__circle { background-image: linear-gradient(var(--mac-fill-primary), var(--mac-fill-primary)); } /* Off, 03 - Clicked 0.19 */
.hig-radio--on:not(.hig-radio--disabled):active .hig-radio__circle { background-image: linear-gradient(var(--mac-fill-secondary), var(--mac-fill-secondary)); } /* On, 03 - Clicked */
.hig-radio__label { position: relative; color: var(--mac-label-primary); font-weight: 500; }
.hig-radio--disabled .hig-radio__circle { background-color: var(--mac-fill-tertiary); } /* Off, 04 - Disabled */
.hig-radio--disabled.hig-radio--on .hig-radio__circle { background-color: var(--accent); opacity: 0.45; } /* On, 04 - Disabled */
.hig-radio--disabled .hig-radio__label { color: var(--mac-label-tertiary); }

/* Sizes (kit 1 Mn … 5 XL): circle, dot, circle-to-label gap, row height; SF Pro Medium 10 / 11 / 13pt labels with the
   line height and tracking of the macOS text style of that size. */
.hig-radio-group--mini { --hig-radio-d: 12px; --hig-radio-dot: 4px; --hig-radio-gap: 3px; --hig-radio-row: 14px; font-size: 10px; line-height: 13px; letter-spacing: 0.12px; }
.hig-radio-group--small { --hig-radio-d: 14px; --hig-radio-dot: 4.8px; --hig-radio-gap: 3px; --hig-radio-row: 18px; font-size: 11px; line-height: 14px; letter-spacing: 0.06px; }
.hig-radio-group--regular { --hig-radio-d: 16px; --hig-radio-dot: 4.8px; --hig-radio-gap: 3px; --hig-radio-row: 24px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-radio-group--large { --hig-radio-d: 18px; --hig-radio-dot: 5px; --hig-radio-gap: 5px; --hig-radio-row: 28px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-radio-group--xl { --hig-radio-d: 18px; --hig-radio-dot: 5px; --hig-radio-gap: 7px; --hig-radio-row: 36px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }

/* ---- SegmentedControl ---- */
/* SegmentedControl — iOS 27 kit (Segmented Controls/Small, Large; 􀻃/5 - Selected; 􀻃/3 - Touch) and macOS 27 kit
   (Segmented Controls/Content Area/Duo, Trio; 􀻃/Buttons; 􀻃/Separator; 􀻃/Margins). */
.hig-segmented {
  position: relative; box-sizing: border-box; vertical-align: middle;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; /* equal widths, sized by the widest segment */
  font-family: var(--font-sans); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  /* Knob motion: the kit is static and the HIG gives no duration; 250ms is a chosen value. */
  --hig-seg-dur: 250ms;
}
.hig-segmented__segment {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 0; margin: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer;
  white-space: nowrap; -webkit-appearance: none; appearance: none;
}
.hig-segmented__segment:disabled { cursor: default; }
/* Reserve the semibold width so the label does not shift when it becomes the selected segment. */
.hig-segmented__label { display: inline-grid; }
.hig-segmented__label::after { content: attr(data-label); font-weight: 600; visibility: hidden; height: 0; overflow: hidden; }

/* ---------- iOS: Fills/3 Tertiary capsule, 2pt inset, segments 70pt advancing 74pt (4pt gap) ---------- */
.hig-segmented--ios {
  padding: var(--segment-inset); column-gap: var(--segment-gap);
  border-radius: var(--radius-capsule); background: var(--fill-tertiary); touch-action: pan-y;
}
.hig-segmented--ios.hig-segmented--small { height: var(--segmented-small); }
.hig-segmented--ios.hig-segmented--large { height: var(--segmented-large); }
/* 44pt hit region around the 32pt control */
.hig-segmented--ios::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--target-ios)); transform: translateY(-50%);
}
.hig-segmented--ios .hig-segmented__segment {
  z-index: 1; min-width: 70px; padding: 0 4px; border-radius: var(--radius-capsule); color: var(--label-primary);
  font-size: 13.333px; line-height: 18px; letter-spacing: -0.4px; font-weight: 500; /* kit Label: SF Pro Medium 13.333pt, lh 18, kern -0.4 */
}
.hig-segmented--ios .hig-segmented__segment--selected { font-weight: 600; } /* kit 5 - Selected: Semibold */
/* The selected knob: white with a 0 2 20 6% shadow (light); 27% white without shadow (dark). */
.hig-segmented__knob {
  --hig-seg-w: calc((100% - 2 * var(--segment-inset) - (var(--hig-seg-n) - 1) * var(--segment-gap)) / var(--hig-seg-n));
  position: absolute; z-index: 0; pointer-events: none;
  top: var(--segment-inset); bottom: var(--segment-inset); width: var(--hig-seg-w);
  left: calc(var(--segment-inset) + var(--hig-seg-i) * (var(--hig-seg-w) + var(--segment-gap)));
  border-radius: var(--radius-capsule);
  background-color: var(--background-primary);
  box-shadow: var(--shadow-segment-knob); /* kit 5 - Selected */
  transition: left var(--hig-seg-dur) ease, top var(--hig-seg-dur) ease, bottom var(--hig-seg-dur) ease,
    width var(--hig-seg-dur) ease, margin var(--hig-seg-dur) ease, background-color var(--hig-seg-dur) ease, box-shadow var(--hig-seg-dur) ease;
}
[data-theme^="dark"] .hig-segmented__knob { background-color: color-mix(in srgb, var(--label-primary) 27%, transparent); box-shadow: none; } /* kit Dark/5 - Selected rgba(255,255,255,0.27) */
.hig-segmented .hig-segmented__lens { position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-glass-small), var(--shadow-glass-highlight), 0 0 0 1px var(--separator); /* clear glass + a separator hairline for the kit's Knob Glow rim */ opacity: 0; transition: opacity var(--hig-seg-dur) ease; }
/* While dragging, the knob becomes the Liquid Glass lens of 􀻃/3 - Touch: 10pt wider and 7pt taller on each side. */
.hig-segmented--dragging .hig-segmented__knob {
  top: calc(var(--segment-inset) - 7px); bottom: calc(var(--segment-inset) - 7px); margin-left: -10px;
  width: calc(var(--hig-seg-w) + 20px); background-color: transparent; box-shadow: none;
}
.hig-segmented--dragging .hig-segmented__lens { opacity: 1; }
.hig-segmented--ios.hig-segmented--disabled { opacity: 0.5; } /* kit 4 - Disabled */

/* ---------- macOS: Fills/2 Secondary track, separators between unselected segments, accent selection ---------- */
.hig-segmented--mac { height: var(--hig-seg-h); border-radius: var(--hig-seg-r); background: var(--mac-fill-secondary); }
/* 28pt hit region (target-mac) */
.hig-segmented--mac::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--target-mac)); transform: translateY(-50%);
}
.hig-segmented--mac .hig-segmented__segment {
  min-width: var(--hig-seg-minw); padding: 0 var(--hig-seg-pad); border-radius: var(--hig-seg-r);
  color: var(--mac-label-primary); font-weight: 500;
}
.hig-segmented--mac .hig-segmented__segment--icon { padding: 0; }
.hig-segmented--mac .hig-segmented__label::after { font-weight: 500; }
/* Separator/On: 1pt Labels Vibrant/5 Quinary, blended plus-darker in the kit (multiply stands in; screen in dark). */
.hig-segmented--mac .hig-segmented__segment + .hig-segmented__segment::before {
  content: ""; position: absolute; left: -0.5px; top: 50%; width: 1px; height: var(--hig-seg-sep); transform: translateY(-50%);
  border-radius: 1px; background: var(--vibrant-separator); pointer-events: none;
}
/* Separator/Off on both sides of the selected segment */
.hig-segmented--mac .hig-segmented__segment--selected::before,
.hig-segmented--mac .hig-segmented__segment--selected + .hig-segmented__segment::before { opacity: 0; }
/* On, 01 - Idle: accent + Fills Vibrant/4 Quaternary; label white */
.hig-segmented--mac .hig-segmented__segment--selected {
  background: linear-gradient(var(--mac-fill-quaternary), var(--mac-fill-quaternary)), var(--accent); color: var(--on-accent);
}
/* Off, 03 - Clicked: 0.16 (Fills/2 Secondary over the track); On, 03 - Clicked: accent + 0.15 */
.hig-segmented--mac .hig-segmented__segment:active:not(:disabled) { background: var(--mac-fill-secondary); }
.hig-segmented--mac .hig-segmented__segment--selected:active:not(:disabled) {
  background: linear-gradient(var(--mac-fill-primary), var(--mac-fill-primary)), linear-gradient(var(--mac-fill-tertiary), var(--mac-fill-tertiary)), var(--accent);
}
/* 4 - Disabled: tertiary label; the selected segment at 0.45 with its label at 0.5 */
.hig-segmented--mac .hig-segmented__segment:disabled { color: var(--mac-label-tertiary); }
.hig-segmented--mac .hig-segmented__segment--selected:disabled { color: var(--on-accent); opacity: 0.45; }
.hig-segmented--mac .hig-segmented__segment--selected:disabled > * { opacity: 0.5; }
/* Sizes (kit 1 Mn … 5 XL): height, corner, glyph-segment width, minimum label margin, separator height, label size. */
.hig-segmented--mac.hig-segmented--mini { --hig-seg-h: var(--mac-control-mini); --hig-seg-r: var(--radius-mac-mini); --hig-seg-minw: 23px; --hig-seg-pad: 6px; --hig-seg-sep: 10px; font-size: 10px; line-height: 13px; letter-spacing: 0.12px; }
.hig-segmented--mac.hig-segmented--small { --hig-seg-h: var(--mac-control-small); --hig-seg-r: var(--radius-mac-small); --hig-seg-minw: 26px; --hig-seg-pad: 8px; --hig-seg-sep: 12px; font-size: 11px; line-height: 14px; letter-spacing: 0.06px; }
.hig-segmented--mac.hig-segmented--regular { --hig-seg-h: var(--mac-control-regular); --hig-seg-r: var(--radius-mac-regular); --hig-seg-minw: 30px; --hig-seg-pad: 10px; --hig-seg-sep: 14px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-segmented--mac.hig-segmented--large { --hig-seg-h: var(--mac-control-large); --hig-seg-r: var(--radius-capsule); --hig-seg-minw: 34px; --hig-seg-pad: 12px; --hig-seg-sep: 18px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-segmented--mac.hig-segmented--xl { --hig-seg-h: var(--mac-control-xl); --hig-seg-r: var(--radius-capsule); --hig-seg-minw: 38px; --hig-seg-pad: 14px; --hig-seg-sep: 20px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }

@media (prefers-reduced-motion: reduce) {
  .hig-segmented { --hig-seg-dur: 0ms; }
}

/* ---- Slider ---- */
/* Slider — iOS 27 kit (Sliders/Glyphs, No Glyphs; 􀻃/Track; 􀻃/Knob) and macOS 27 kit (Sliders/Content Area/Standard,
   Standard + Ticked; 􀻃/Knob, Knob - Ticked; Tick Marks; Circular Slider (Dial)). */
.hig-slider {
  position: relative; box-sizing: border-box; display: flex; align-items: center;
  font-family: var(--font-sans); -webkit-tap-highlight-color: transparent;
  /* Knob face: white in every iOS kit master (control-knob); macOS Dark knobs are opaque #dedede in the kit, drawn
     here as mac-control-knob (85% white) over the window background (= 221). */
  --hig-slider-knob: var(--control-knob);
  /* Knob growth while dragging: the kit is static and the HIG gives no duration; 200ms is a chosen value. */
  --hig-slider-dur: 200ms;
}
[data-theme^="dark"] .hig-slider--mac { --hig-slider-knob: color-mix(in srgb, var(--control-knob) 85%, var(--mac-window-background)); }

.hig-slider__body { position: relative; flex: 1 1 auto; min-width: 0; height: var(--hig-body-h); }
.hig-slider__track {
  position: absolute; left: 0; right: 0; top: 50%; height: var(--hig-track-h); transform: translateY(-50%);
  overflow: hidden; border-radius: var(--radius-capsule);
}
.hig-slider__fill { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; border-radius: inherit; background: var(--hig-slider-tint, var(--accent)); }

/* The native range input sits transparently on top: it owns dragging, clicking, the keyboard and the value. */
.hig-slider__input {
  position: absolute; z-index: 2; top: 50%; height: var(--hig-hit-h); transform: translateY(-50%);
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; background: transparent;
  -webkit-appearance: none; appearance: none;
}
.hig-slider__input:disabled { cursor: default; }
.hig-slider__input::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.hig-slider__input::-moz-range-track { height: 100%; background: transparent; border: 0; }
/* The native thumb is the knob's width, so the input maps the pointer to values exactly as the knob is drawn. */
.hig-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--hig-knob-w); height: 100%; border: 0; background: transparent; }
.hig-slider__input::-moz-range-thumb { width: var(--hig-knob-w); height: 100%; border: 0; border-radius: 0; background: transparent; }

.hig-slider__knob {
  position: absolute; z-index: 1; top: 50%; pointer-events: none; box-sizing: border-box;
  width: var(--hig-knob-w); height: var(--hig-knob-h); margin-top: calc(var(--hig-knob-h) / -2);
  border-radius: var(--radius-capsule); background-color: var(--hig-slider-knob);
  transition: width var(--hig-slider-dur) ease, height var(--hig-slider-dur) ease, margin var(--hig-slider-dur) ease,
    background-color var(--hig-slider-dur) ease, box-shadow var(--hig-slider-dur) ease;
}
.hig-slider .hig-slider__lens { position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-glass-small), var(--shadow-glass-highlight), 0 0 0 1px var(--separator); /* clear glass + a separator hairline for the kit's Knob Glow rim */ opacity: 0; transition: opacity var(--hig-slider-dur) ease; }
/* Dragging (3 - Pressed / 03 - Clicked): the knob grows, centered, into a Liquid Glass lens. */
.hig-slider__input:active:not(:disabled) ~ .hig-slider__knob {
  width: var(--hig-knob-pw); height: var(--hig-knob-ph); margin-top: calc(var(--hig-knob-ph) / -2);
  margin-inline-start: calc((var(--hig-knob-w) - var(--hig-knob-pw)) / 2);
  background-color: transparent; box-shadow: none;
}
.hig-slider__input:active:not(:disabled) ~ .hig-slider__knob .hig-slider__lens { opacity: 1; }
.hig-slider__input:focus-visible ~ .hig-slider__knob { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.hig-slider__ticks { position: absolute; left: 0; right: 0; top: calc(50% + var(--hig-track-h) / 2 + var(--hig-tick-gap)); height: var(--hig-tick); pointer-events: none; }
.hig-slider__tick { position: absolute; top: 0; width: var(--hig-tick); height: var(--hig-tick); border-radius: 50%; }

/* ---------- iOS: 6pt Fills/1 Primary track (r3), accent fill, 37x24 knob, 57x38 glass knob while dragging ---------- */
.hig-slider--ios {
  gap: 12px; /* kit Glyphs: 32pt glyph boxes 12pt from the track */
  min-height: var(--target-ios);
  --hig-body-h: 24px; --hig-hit-h: var(--target-ios); --hig-track-h: var(--track-height);
  --hig-knob-w: 37px; --hig-knob-h: 24px; --hig-knob-pw: 57px; --hig-knob-ph: 38px;
  --hig-tick: 4px; --hig-tick-gap: 4px;
}
.hig-slider--ios .hig-slider__track { background: var(--fill-primary); border-radius: var(--radius-xs); }
.hig-slider--ios .hig-slider__fill { width: calc(var(--hig-slider-f) * (100% - var(--hig-knob-w)) + var(--hig-knob-w) / 2); }
.hig-slider--ios .hig-slider__input { left: 0; width: 100%; }
.hig-slider--ios .hig-slider__knob {
  inset-inline-start: calc(var(--hig-slider-f) * (100% - var(--hig-knob-w)));
  box-shadow: var(--shadow-slider-knob); /* kit Knob/1 - Idle */
}
.hig-slider--ios .hig-slider__tick {
  background: var(--label-quaternary); /* kit Track/Ticks: 4pt dots 4pt below the track, under the knob centers */
  inset-inline-start: calc(var(--hig-knob-w) / 2 + var(--hig-tick-f) * (100% - var(--hig-knob-w)) - var(--hig-tick) / 2);
}
.hig-slider--ios .hig-slider__glyph { flex: none; display: flex; justify-content: center; width: 32px; color: var(--label-secondary); }
.hig-slider--ios.hig-slider--disabled { opacity: 0.5; } /* kit 4 - Disabled */

/* ---------- macOS: Fills/1 Primary track, accent fill, lozenge knob, 2pt Labels/3 Tertiary tick marks ---------- */
.hig-slider--mac {
  padding: 0 10px; /* kit: the track starts 10pt in so the knob fits at both ends */
  height: var(--hig-body-h); --hig-hit-h: max(100%, var(--target-mac)); --hig-tick: 2px;
}
.hig-slider--mac .hig-slider__track { background: var(--mac-fill-primary); }
.hig-slider--mac .hig-slider__fill { width: max(var(--hig-track-h), calc(2px + var(--hig-slider-f) * (100% - 4px))); }
.hig-slider--mac .hig-slider__input { inset-inline-start: calc(2px - var(--hig-knob-w) / 2); width: calc(100% - 4px + var(--hig-knob-w)); }
.hig-slider--mac .hig-slider__knob {
  inset-inline-start: calc(2px + var(--hig-slider-f) * (100% - 4px) - var(--hig-knob-w) / 2);
  box-shadow: var(--shadow-mac-slider-knob); /* kit Knob/01 - Idle */
}
.hig-slider--mac .hig-slider__tick { background: var(--mac-label-tertiary); inset-inline-start: calc(2px + var(--hig-tick-f) * (100% - 4px) - var(--hig-tick) / 2); }
.hig-slider--mac .hig-slider__glyph { flex: none; display: flex; color: var(--mac-label-secondary); }
.hig-slider--mac.hig-slider--disabled .hig-slider__fill { background: var(--mac-fill-quinary); } /* Tracks/Active, Filled, 04 - Disabled */
.hig-slider--mac.hig-slider--disabled .hig-slider__tick { background: var(--mac-label-quaternary); } /* Tick Mark - Disabled */
.hig-slider--mac.hig-slider--disabled .hig-slider__glyph { color: var(--mac-label-tertiary); }
/* Sizes: control height, track, knob (idle and clicked), tick offset below the track */
.hig-slider--mac.hig-slider--mini { --hig-body-h: var(--mac-control-mini); --hig-track-h: 4px; --hig-knob-w: 16px; --hig-knob-h: 12px; --hig-knob-pw: 20px; --hig-knob-ph: 15px; --hig-tick-gap: 2px; }
.hig-slider--mac.hig-slider--small { --hig-body-h: var(--mac-control-small); --hig-track-h: 4px; --hig-knob-w: 18px; --hig-knob-h: 14px; --hig-knob-pw: 23px; --hig-knob-ph: 18px; --hig-tick-gap: 3px; }
.hig-slider--mac.hig-slider--regular { --hig-body-h: var(--mac-control-regular); --hig-track-h: var(--track-height); --hig-knob-w: 20px; --hig-knob-h: 16px; --hig-knob-pw: 25px; --hig-knob-ph: 20px; --hig-tick-gap: 3px; }
.hig-slider--mac.hig-slider--large { --hig-body-h: var(--mac-control-large); --hig-track-h: var(--track-height); --hig-knob-w: 24px; --hig-knob-h: 20px; --hig-knob-pw: 30px; --hig-knob-ph: 25px; --hig-tick-gap: 3px; }
.hig-slider--mac.hig-slider--xl { --hig-body-h: var(--mac-control-xl); --hig-track-h: var(--track-height); --hig-knob-w: 24px; --hig-knob-h: 20px; --hig-knob-pw: 30px; --hig-knob-ph: 25px; --hig-tick-gap: 4px; }
/* With tick marks the mini and small knobs become narrow, taller lozenges (kit Knob - Ticked). */
.hig-slider--mac.hig-slider--mini.hig-slider--ticked { --hig-knob-w: 8px; --hig-knob-h: 16px; --hig-knob-pw: 10px; --hig-knob-ph: 20px; }
.hig-slider--mac.hig-slider--small.hig-slider--ticked { --hig-knob-w: 10px; --hig-knob-h: 18px; --hig-knob-pw: 13px; --hig-knob-ph: 23px; }

/* ---------- macOS circular slider: a Fills/2 Secondary dial with a 2pt grabber that turns with the value ---------- */
.hig-slider--circular { display: inline-flex; vertical-align: middle; padding: 0; height: auto; }
.hig-slider__dial {
  position: relative; display: block; flex: none; width: var(--hig-dial); height: var(--hig-dial); border-radius: 50%;
  background-color: var(--mac-fill-secondary); cursor: pointer; touch-action: none;
}
.hig-slider__dial::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--target-mac)); height: max(100%, var(--target-mac)); transform: translate(-50%, -50%); border-radius: 50%; }
.hig-slider--turning .hig-slider__dial { background-image: linear-gradient(var(--mac-fill-secondary), var(--mac-fill-secondary)); } /* 3 - Clicked 0.16 */
.hig-slider__rotor { position: absolute; inset: 0; border-radius: 50%; transform: rotate(calc(var(--hig-slider-f) * 360deg)); pointer-events: none; }
.hig-slider__grabber {
  position: absolute; left: calc(50% - 1px); top: var(--hig-grab-top); width: 2px; height: var(--hig-grab-h); border-radius: 1px;
  background: color-mix(in srgb, var(--label-primary) 70%, transparent); /* kit Glyphs/Neutral - 1 Idle: 70% black / 70% white */
}
.hig-slider__input:focus-visible + .hig-slider__dial { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hig-slider--circular.hig-slider--disabled .hig-slider__dial { background-color: var(--mac-fill-quaternary); cursor: default; } /* 4 - Disabled */
.hig-slider--circular.hig-slider--disabled .hig-slider__grabber { background: color-mix(in srgb, var(--label-primary) 22%, transparent); } /* Neutral - 4 Disabled */
.hig-slider--circular.hig-slider--mini { --hig-dial: 16px; --hig-grab-h: 4px; --hig-grab-top: 2px; }
.hig-slider--circular.hig-slider--small { --hig-dial: 20px; --hig-grab-h: 5px; --hig-grab-top: 2.5px; }
.hig-slider--circular.hig-slider--regular { --hig-dial: 24px; --hig-grab-h: 6px; --hig-grab-top: 3px; }
.hig-slider--circular.hig-slider--large { --hig-dial: 28px; --hig-grab-h: 6px; --hig-grab-top: 3px; }
.hig-slider--circular.hig-slider--xl { --hig-dial: 36px; --hig-grab-h: 7px; --hig-grab-top: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hig-slider { --hig-slider-dur: 0ms; }
}

/* ---- Stepper ---- */
/* Stepper — iOS 27 kit (Stepper; 􀻃/Increment, Decrement) and macOS 27 kit (Steppers/Content Area/Outside Field,
   No Field; 􀻃/Content Area/<size>/Button - Up, Down; Text Fields/<size>/Value). */
.hig-stepper {
  box-sizing: border-box; display: inline-flex; align-items: center; vertical-align: middle;
  font-family: var(--font-sans); -webkit-tap-highlight-color: transparent;
}
.hig-stepper__label { margin-inline-end: auto; }
.hig-stepper__control { position: relative; display: inline-flex; flex: none; }
.hig-stepper__button {
  position: relative; display: grid; place-items: center; margin: 0; padding: 0; border: 0;
  font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; user-select: none; -webkit-user-select: none;
}
.hig-stepper__button:disabled { cursor: default; }
.hig-stepper__value, .hig-stepper__field { font-variant-numeric: tabular-nums; }
.hig-stepper__spin { display: inline-flex; border-radius: var(--radius-capsule); }

/* ---------- iOS: a 92x32 capsule of two 46x32 halves (Fills/3 Tertiary), a 1x24 Labels/3 Tertiary separator,
   Semibold minus and plus symbols in Labels/1 Primary ---------- */
.hig-stepper--ios { gap: var(--padding-bezeled); }
.hig-stepper--ios .hig-stepper__label,
.hig-stepper--ios .hig-stepper__value { font-size: 17px; line-height: 22px; letter-spacing: -0.43px; } /* ios-body */
.hig-stepper--ios .hig-stepper__label { color: var(--label-primary); }
.hig-stepper--ios .hig-stepper__value { color: var(--label-secondary); border-radius: 4px; } /* a row detail value; 4px only rounds the focus ring */
.hig-stepper--ios .hig-stepper__control { width: var(--stepper-width); height: var(--stepper-height); }
.hig-stepper--ios .hig-stepper__button { width: 46px; height: 100%; background: var(--fill-tertiary); color: var(--label-primary); }
.hig-stepper--ios .hig-stepper__button--decrement { border-start-start-radius: var(--radius-capsule); border-end-start-radius: var(--radius-capsule); }
.hig-stepper--ios .hig-stepper__button--increment { border-start-end-radius: var(--radius-capsule); border-end-end-radius: var(--radius-capsule); }
[data-theme^="dark"] .hig-stepper--ios .hig-stepper__button { background: var(--fill-quaternary); } /* kit Dark halves: Fills/Dark/4 Quaternary */
/* 3 - Pressed: Fills/4 Quaternary plus an 8% pressed fill */
.hig-stepper--ios .hig-stepper__button:active:not(:disabled) { background: linear-gradient(var(--pressed-overlay), var(--pressed-overlay)), var(--fill-quaternary); }
.hig-stepper--ios .hig-stepper__button:disabled { color: var(--label-tertiary); } /* 4 - Disabled */
/* 44pt hit region above and below the 32pt control */
.hig-stepper--ios .hig-stepper__button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--target-ios); transform: translateY(-50%); }
.hig-stepper--ios .hig-stepper__separator { position: absolute; z-index: 1; inset-inline-start: 45.5px; top: 4px; width: 1px; height: 24px; background: var(--label-tertiary); pointer-events: none; }
.hig-stepper--ios.hig-stepper--disabled .hig-stepper__label,
.hig-stepper--ios.hig-stepper--disabled .hig-stepper__value { color: var(--label-tertiary); }

/* ---------- macOS: a value field, 4pt, then the up/down stepper (kit Outside Field) ---------- */
.hig-stepper--mac { gap: 4px; color: var(--mac-label-primary); }
.hig-stepper--mac .hig-stepper__label { margin-inline-end: calc(var(--padding-bezeled) - 4px); font-weight: 500; color: var(--mac-label-primary); }
.hig-stepper--mac .hig-stepper__field {
  box-sizing: border-box; width: 60px; height: var(--hig-st-h); margin: 0; padding: 0 var(--hig-st-pad); border: 0; outline: none;
  border-radius: var(--hig-st-r); background: var(--mac-window-background); box-shadow: 0 0 0 1px var(--mac-fill-tertiary);
  font: inherit; font-weight: 500; color: var(--mac-label-primary); caret-color: var(--accent);
}
.hig-stepper--mac .hig-stepper__field:focus-visible {
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent); /* kit Input Fields/03 - Focus Ring */
}
.hig-stepper--mac .hig-stepper__field:disabled {
  background: color-mix(in srgb, var(--mac-window-background) 50%, transparent); box-shadow: 0 0 0 1px var(--mac-fill-quaternary); color: var(--mac-label-tertiary);
}
.hig-stepper--mac .hig-stepper__control { flex-direction: column; width: var(--hig-st-w); height: var(--hig-st-h); }
.hig-stepper--mac .hig-stepper__button { width: 100%; height: 50%; background: var(--mac-fill-secondary); color: var(--mac-label-primary); font-size: var(--hig-st-glyph); }
.hig-stepper--mac .hig-stepper__button--increment { order: -1; border-start-start-radius: var(--hig-st-r); border-start-end-radius: var(--hig-st-r); }
.hig-stepper--mac .hig-stepper__button--decrement { border-end-start-radius: var(--hig-st-r); border-end-end-radius: var(--hig-st-r); }
.hig-stepper--mac .hig-stepper__button:active:not(:disabled) { background: linear-gradient(var(--mac-fill-secondary), var(--mac-fill-secondary)), var(--mac-fill-secondary); } /* 3 - Clicked 0.16 */
/* A segment at a bound only dims its glyph; the whole stepper disabled takes the kit 4 - Disabled fill as well. */
.hig-stepper--mac .hig-stepper__button:disabled { color: var(--mac-label-tertiary); }
.hig-stepper--mac.hig-stepper--disabled .hig-stepper__button { background: var(--mac-fill-quaternary); } /* 4 - Disabled */
/* 28pt hit region (target-mac): wider than the stepper, and taller at the outer ends */
.hig-stepper--mac .hig-stepper__button::before { content: ""; position: absolute; left: 50%; width: max(100%, var(--target-mac)); transform: translateX(-50%); top: 0; bottom: 0; }
.hig-stepper--mac .hig-stepper__button--increment::before { top: min(0px, (var(--hig-st-h) - var(--target-mac)) / 2); }
.hig-stepper--mac .hig-stepper__button--decrement::before { bottom: min(0px, (var(--hig-st-h) - var(--target-mac)) / 2); }
/* separator: Labels Vibrant/4 Quaternary, blended plus-darker in the kit (multiply stands in; screen in dark) */
.hig-stepper--mac .hig-stepper__separator {
  position: absolute; z-index: 1; left: 50%; top: calc(50% - 0.5px); width: var(--hig-st-sep); height: 1px; transform: translateX(-50%);
  border-radius: 0.5px; background: var(--vibrant-label-quaternary); pointer-events: none;
}
.hig-stepper--mac.hig-stepper--disabled .hig-stepper__label { color: var(--mac-label-tertiary); }
.hig-stepper--mac .hig-stepper__spin { border-radius: var(--hig-st-r); }
/* Sizes (kit 1 Mn … 5 XL): stepper width and height, corner, field padding and text, glyph point size, separator. */
.hig-stepper--mac.hig-stepper--mini { --hig-st-w: 13px; --hig-st-h: var(--mac-control-mini); --hig-st-r: var(--radius-mac-mini); --hig-st-pad: 6px; --hig-st-glyph: 9px; --hig-st-sep: 9px; font-size: 10px; line-height: 13px; letter-spacing: 0.12px; }
.hig-stepper--mac.hig-stepper--small { --hig-st-w: 17px; --hig-st-h: var(--mac-control-small); --hig-st-r: var(--radius-mac-small); --hig-st-pad: 6px; --hig-st-glyph: 11px; --hig-st-sep: 11px; font-size: 11px; line-height: 14px; letter-spacing: 0.06px; }
.hig-stepper--mac.hig-stepper--regular { --hig-st-w: 20px; --hig-st-h: var(--mac-control-regular); --hig-st-r: var(--radius-mac-regular); --hig-st-pad: 6px; --hig-st-glyph: 13px; --hig-st-sep: 14px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-stepper--mac.hig-stepper--large { --hig-st-w: 23px; --hig-st-h: var(--mac-control-large); --hig-st-r: var(--radius-mac-large); --hig-st-pad: 8px; --hig-st-glyph: 13px; --hig-st-sep: 15px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* kit 4 Lg r=7 */
.hig-stepper--mac.hig-stepper--xl { --hig-st-w: 30px; --hig-st-h: var(--mac-control-xl); --hig-st-r: var(--radius-mac-xl); --hig-st-pad: 10px; --hig-st-glyph: 13px; --hig-st-sep: 20px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* kit 5 XL r=9 */

/* ---- TextField ---- */
/* TextField — iOS 27 kit (Text Fields/Default, Placeholder, Typing, Empty Typing; Examples/Text Fields) and macOS 27
   kit (Text Fields/<size>/Empty, Value, + Typing, + Disabled; Input Fields layer styles). */
.hig-text-field { box-sizing: border-box; font-family: var(--font-sans); }
.hig-text-field__row { position: relative; display: flex; align-items: center; gap: var(--padding-bezeled); }
.hig-text-field__label { flex: none; }
.hig-text-field__box { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; box-sizing: border-box; }
.hig-text-field__input {
  flex: 1 1 auto; align-self: stretch; min-width: 0; margin: 0; padding: 0; border: 0; outline: none; background: transparent;
  font: inherit; color: inherit; caret-color: var(--accent); -webkit-appearance: none; appearance: none; text-overflow: clip;
}
.hig-text-field__input::placeholder { opacity: 1; }
.hig-text-field__input:disabled { -webkit-text-fill-color: currentColor; }
.hig-text-field__error { display: flex; align-items: flex-start; gap: var(--button-icon-gap); color: var(--system-red); }
.hig-text-field__error:empty { display: block; padding: 0; margin: 0; }
.hig-text-field__error .hig-icon { margin-top: 0.05em; }

/* ---------- iOS: a 52pt row with 16pt insets; the value is SF Pro Medium 17pt ---------- */
.hig-text-field--ios { display: block; }
.hig-text-field--ios .hig-text-field__row { min-height: var(--row-height); padding: 0 var(--margin-compact); }
/* Row separator: the kit's 'Stack' border is bottom-only, outside, Separators/Vibrant blended plus-darker, inset
   16pt on both sides. vibrant-separator is the blend-equivalent color, drawn normal. It closes the whole field, so a
   validation message stays in its own row, above the separator. */
.hig-text-field--ios.hig-text-field--separator { position: relative; }
.hig-text-field--ios.hig-text-field--separator::after {
  content: ""; position: absolute; left: var(--margin-compact); right: var(--margin-compact); bottom: -1px; height: 1px;
  background: var(--vibrant-separator); pointer-events: none;
}
/* Keyboard focus (the kit draws only the 2x22 accent cursor): the 3pt focus ring, inside the row. */
.hig-text-field--ios .hig-text-field__row:has(.hig-text-field__input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.hig-text-field--ios .hig-text-field__label { font-size: 17px; line-height: 22px; letter-spacing: -0.43px; color: var(--label-primary); } /* ios-body */
.hig-text-field--ios .hig-text-field__box { align-self: stretch; }
.hig-text-field--ios .hig-text-field__input {
  font-size: 17px; line-height: 20px; letter-spacing: -0.43px; font-weight: 500; color: var(--label-primary); /* kit Value: SF Pro Medium 17pt, 20pt box */
}
.hig-text-field--ios .hig-text-field__input::placeholder { color: var(--placeholder-text); }
.hig-text-field--ios.hig-text-field--disabled .hig-text-field__input,
.hig-text-field--ios.hig-text-field--disabled .hig-text-field__label { color: var(--label-tertiary); }
/* Clear button: 􀁡 (xmark.circle.fill) 24pt in Labels/3 Tertiary, in a 29x36 box at the trailing end (kit Typing). */
.hig-text-field__clear {
  position: relative; flex: none; display: grid; place-items: center; width: 29px; height: 36px; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--label-tertiary); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.hig-text-field__clear::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--target-ios); height: var(--target-ios); transform: translate(-50%, -50%); }
/* Validation message, set like a list footer: 13pt, 8pt below the row, 16pt inset (kit Lists/Footer). */
.hig-text-field--ios .hig-text-field__error { padding: 8px var(--margin-compact) 6px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-text-field--ios .hig-text-field__error:empty { padding: 0; }

/* ---------- macOS: bezeled field (Input Fields/01 - Idle: window background, 1pt 5% outside border) ---------- */
.hig-text-field--mac { display: inline-flex; flex-direction: column; vertical-align: middle; color: var(--mac-label-primary); }
.hig-text-field--mac .hig-text-field__label { font-weight: 500; color: var(--mac-label-primary); } /* kit Forms 06 Body/Default (Medium) */
.hig-text-field--mac .hig-text-field__box {
  flex: 1 1 120px; width: 120px; height: var(--hig-tf-h); padding: 0 var(--hig-tf-pad); border-radius: var(--hig-tf-r);
  background: var(--mac-window-background); box-shadow: 0 0 0 1px var(--mac-fill-tertiary); cursor: text;
}
/* 28pt hit region (target-mac) for the smaller fields; clicks on it focus the input. */
.hig-text-field--mac .hig-text-field__box::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--target-mac)); transform: translateY(-50%); }
.hig-text-field--mac .hig-text-field__input { position: relative; font-weight: 500; color: var(--mac-label-primary); } /* kit Value: SF Pro Medium */
.hig-text-field--mac .hig-text-field__input::placeholder { color: var(--mac-label-tertiary); }
/* Input Fields/03 - Focus Ring: 3.5pt outside + 1pt inside, accent at 50% */
.hig-text-field--mac .hig-text-field__box:focus-within {
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent);
}
/* Input Fields/04 - Disabled: half-opacity fill, 4% border, tertiary text (dark masters also dim the field to 0.5) */
.hig-text-field--mac.hig-text-field--disabled .hig-text-field__box { background: color-mix(in srgb, var(--mac-window-background) 50%, transparent); box-shadow: 0 0 0 1px var(--mac-fill-quaternary); cursor: default; }
[data-theme^="dark"] .hig-text-field--mac.hig-text-field--disabled .hig-text-field__box { opacity: 0.5; }
.hig-text-field--mac.hig-text-field--disabled .hig-text-field__input,
.hig-text-field--mac.hig-text-field--disabled .hig-text-field__label { color: var(--mac-label-tertiary); }
/* Validation message: 11pt (macOS Subheadline), 4pt under the field. The 4pt offset is a chosen value. */
.hig-text-field--mac .hig-text-field__error { margin-top: 4px; font-size: 11px; line-height: 14px; letter-spacing: 0.06px; }
.hig-text-field--mac .hig-text-field__error:empty { margin-top: 0; }
/* Sizes (kit 1 Mn … 5 XL): height, corner, text inset; SF Pro Medium 10 / 11 / 13pt with macOS text-style leading. */
.hig-text-field--mac.hig-text-field--mini { --hig-tf-h: var(--mac-control-mini); --hig-tf-r: var(--radius-mac-mini); --hig-tf-pad: 6px; font-size: 10px; line-height: 13px; letter-spacing: 0.12px; }
.hig-text-field--mac.hig-text-field--small { --hig-tf-h: var(--mac-control-small); --hig-tf-r: var(--radius-mac-small); --hig-tf-pad: 6px; font-size: 11px; line-height: 14px; letter-spacing: 0.06px; }
.hig-text-field--mac.hig-text-field--regular { --hig-tf-h: var(--mac-control-regular); --hig-tf-r: var(--radius-mac-regular); --hig-tf-pad: 6px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-text-field--mac.hig-text-field--large { --hig-tf-h: var(--mac-control-large); --hig-tf-r: var(--radius-mac-large); --hig-tf-pad: 8px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* kit 4 Lg r=7 */
.hig-text-field--mac.hig-text-field--xl { --hig-tf-h: var(--mac-control-xl); --hig-tf-r: var(--radius-mac-xl); --hig-tf-pad: 10px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* kit 5 XL r=9 */

/* ---- Toggle ---- */
/* Toggle — geometry from the iOS 27 kit (Toggles) and the macOS 27 kit (Toggles - Switches, Toggles - Checkboxes,
   Buttons/Toggle). */
.hig-toggle {
  box-sizing: border-box; font-family: var(--font-sans); -webkit-tap-highlight-color: transparent;
  /* Knob face: white in every iOS kit master (control-knob); macOS uses mac-control-knob (85% white in dark). */
  --hig-toggle-knob: var(--control-knob);
  /* Knob motion. The kits are static and the HIG states no duration: 200ms is a chosen value. */
  --hig-toggle-dur: 200ms;
}
.hig-toggle--mac { --hig-toggle-knob: var(--mac-control-knob); }

.hig-toggle--switch,
.hig-toggle--checkbox {
  position: relative; display: inline-flex; align-items: center; vertical-align: middle;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.hig-toggle--disabled { cursor: default; }
/* Positioned so titles paint above the expanded hit-region pseudo-elements. */
.hig-toggle__label { position: relative; }
/* A labelled switch is a form row: title on the leading side, switch on the trailing side (kit Forms rows). */
.hig-toggle--switch.hig-toggle--labeled { display: flex; justify-content: space-between; gap: var(--padding-bezeled); }

/* The native checkbox sits transparently over the visual control: it takes clicks, keyboard and the focus ring. */
.hig-toggle__input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  -webkit-appearance: none; appearance: none; background: transparent; border-radius: inherit; cursor: inherit;
}

/* ---------- Switch ---------- */
.hig-toggle__track {
  position: relative; display: block; flex: none; border-radius: var(--radius-capsule);
  transition: background-color var(--hig-toggle-dur) ease;
}
.hig-toggle__knob {
  position: absolute; z-index: 1; display: block; pointer-events: none;
  top: var(--hig-knob-inset); left: var(--hig-knob-inset);
  width: var(--hig-knob-w); height: var(--hig-knob-h);
  border-radius: var(--radius-capsule); background: var(--hig-toggle-knob);
  transition: left var(--hig-toggle-dur) ease, top var(--hig-toggle-dur) ease, width var(--hig-toggle-dur) ease,
    height var(--hig-toggle-dur) ease, background-color var(--hig-toggle-dur) ease;
}
.hig-toggle--on .hig-toggle__knob { left: calc(100% - var(--hig-knob-inset) - var(--hig-knob-w)); }
/* While pressed the knob becomes a Liquid Glass lens (kit '􀻃/Knob' symbols), centered on the resting knob. */
.hig-toggle .hig-toggle__lens { position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-glass-small), var(--shadow-glass-highlight), 0 0 0 1px var(--separator); /* clear glass + a separator hairline for the kit's Knob Glow rim */ opacity: 0; transition: opacity var(--hig-toggle-dur) ease; }
.hig-toggle--switch:not(.hig-toggle--disabled):active .hig-toggle__knob {
  width: var(--hig-knob-pw); height: var(--hig-knob-ph); background-color: transparent;
  left: calc(var(--hig-knob-inset) + (var(--hig-knob-w) - var(--hig-knob-pw)) / 2);
  top: calc(var(--hig-knob-inset) + (var(--hig-knob-h) - var(--hig-knob-ph)) / 2);
}
.hig-toggle--switch.hig-toggle--on:not(.hig-toggle--disabled):active .hig-toggle__knob {
  left: calc(100% - var(--hig-knob-inset) - var(--hig-knob-w) + (var(--hig-knob-w) - var(--hig-knob-pw)) / 2);
}
.hig-toggle--switch:not(.hig-toggle--disabled):active .hig-toggle__lens { opacity: 1; }

/* iOS switch: 64x28 track, 38x24 knob 2pt in, Labels/3 Tertiary off, System Green on; pressed knob 59x37 (kit). */
.hig-toggle--ios .hig-toggle__track {
  width: var(--toggle-width); height: var(--toggle-height); background-color: var(--label-tertiary);
  --hig-knob-inset: 2px; --hig-knob-w: 38px; --hig-knob-h: 24px; --hig-knob-pw: 59px; --hig-knob-ph: 37px;
}
.hig-toggle--ios.hig-toggle--on .hig-toggle__track { background-color: var(--hig-toggle-tint, var(--system-green)); }
/* 44pt hit region around the 28pt switch; the visual stays at kit size. */
.hig-toggle--ios .hig-toggle__track::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--target-ios)); height: var(--target-ios);
  transform: translate(-50%, -50%);
}
.hig-toggle--ios.hig-toggle--disabled .hig-toggle__track { opacity: 0.5; } /* kit 4 - Disabled: opacity 0.5 */
.hig-toggle--ios.hig-toggle--switch .hig-toggle__label {
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; color: var(--label-primary); /* ios-body */
}

/* On/Off labels (Settings > Accessibility): a 1x10 bar on the leading half when on, a 10pt ring on the trailing
   half when off (kit 'AX Label' groups at y=9). The bar is white on the tint; the ring is a gray the kit gives
   without a swatch (#b2b2b2 light, #a5a5a5 dark): system-gray-2 in light themes, label-secondary in dark themes.
   The bar is white on system-green (contrast.py: 2.22:1 light, 2.02:1 dark, 4.54:1 light-hc, the kit's pairing); on the
   lighter dark-hc green white drops to 1.84:1 while black measures 11.42:1, so Increased Contrast Dark draws it black.
   Set per appearance on the nearest data-theme, independent of the accent (on-accent follows the accent). */
:root, [data-theme] { --hig-toggle-on-label: var(--white); }
[data-theme="dark-hc"] { --hig-toggle-on-label: var(--black); }
.hig-toggle__ax { position: absolute; top: 9px; pointer-events: none; }
.hig-toggle__ax--on { left: 12.5px; width: 1px; height: 10px; background: var(--hig-toggle-on-label); }
.hig-toggle__ax--off { left: 46px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--system-gray-2); }
[data-theme^="dark"] .hig-toggle__ax--off { border-color: var(--label-secondary); }

/* macOS switch: five sizes (kit Content Area/1 Mn … 5 XL); Fills/1 Primary off, accent on, knob shadow;
   pressed track adds the Clicked fill and the knob grows to the 􀻃/Knob glass lens. */
.hig-toggle--mac .hig-toggle__track { background-color: var(--mac-fill-primary); }
.hig-toggle--mac.hig-toggle--on .hig-toggle__track { background-color: var(--hig-toggle-tint, var(--accent)); }
.hig-toggle--mac .hig-toggle__knob { box-shadow: var(--shadow-knob); }
.hig-toggle--mac.hig-toggle--switch:not(.hig-toggle--disabled):active .hig-toggle__knob { box-shadow: none; }
.hig-toggle--mac.hig-toggle--switch:not(.hig-toggle--disabled):active .hig-toggle__track {
  /* kit Tracks/03 - Clicked: 0.19 off (Fills/1 Primary over itself), on + Fills/2 Secondary */
  background-image: linear-gradient(var(--mac-fill-primary), var(--mac-fill-primary));
}
.hig-toggle--mac.hig-toggle--switch.hig-toggle--on:not(.hig-toggle--disabled):active .hig-toggle__track {
  background-image: linear-gradient(var(--mac-fill-secondary), var(--mac-fill-secondary));
}
.hig-toggle--mac.hig-toggle--switch.hig-toggle--mini .hig-toggle__track { width: 36px; height: var(--mac-control-mini); --hig-knob-inset: 1.5px; --hig-knob-w: 21px; --hig-knob-h: 13px; --hig-knob-pw: 33px; --hig-knob-ph: 20px; }
.hig-toggle--mac.hig-toggle--switch.hig-toggle--small .hig-toggle__track { width: 44px; height: var(--mac-control-small); --hig-knob-inset: 2px; --hig-knob-w: 26px; --hig-knob-h: 16px; --hig-knob-pw: 40px; --hig-knob-ph: 26px; }
.hig-toggle--mac.hig-toggle--switch.hig-toggle--regular .hig-toggle__track { width: 54px; height: var(--mac-control-regular); --hig-knob-inset: 2px; --hig-knob-w: 32px; --hig-knob-h: 20px; --hig-knob-pw: 50px; --hig-knob-ph: 31px; }
.hig-toggle--mac.hig-toggle--switch.hig-toggle--large .hig-toggle__track { width: var(--toggle-width); height: var(--mac-control-large); --hig-knob-inset: 2px; --hig-knob-w: 38px; --hig-knob-h: 24px; --hig-knob-pw: 59px; --hig-knob-ph: 37px; }
.hig-toggle--mac.hig-toggle--switch.hig-toggle--xl .hig-toggle__track { width: 80px; height: var(--mac-control-xl); --hig-knob-inset: 3px; --hig-knob-w: 47px; --hig-knob-h: 30px; --hig-knob-pw: 73px; --hig-knob-ph: 46px; }
/* 28pt macOS hit region for the smaller switches. */
.hig-toggle--mac.hig-toggle--switch .hig-toggle__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--target-mac)); transform: translateY(-50%);
}
/* The kit's disabled masters reuse the idle styles; disabled is drawn at the knobs' 04 - Disabled opacity (0.5). */
.hig-toggle--mac.hig-toggle--switch.hig-toggle--disabled .hig-toggle__track { opacity: 0.5; }
.hig-toggle--mac .hig-toggle__label {
  font-size: 13px; line-height: 16px; letter-spacing: -0.08px; font-weight: 500; color: var(--mac-label-primary); /* kit Forms 06 Body/Default (Medium) */
}

/* ---------- Checkbox (macOS) — kit Toggles - Checkboxes/Content Area ---------- */
.hig-toggle--checkbox { gap: var(--hig-cb-gap); min-height: var(--hig-cb-row); }
/* 28pt hit region (target-mac) around rows smaller than that */
.hig-toggle--checkbox::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--target-mac)); transform: translateY(-50%);
}
.hig-toggle__box {
  position: relative; flex: none; display: grid; place-items: center; box-sizing: border-box;
  width: var(--hig-cb); height: var(--hig-cb); border-radius: var(--hig-cb-r);
  background-color: var(--mac-fill-primary); color: var(--on-accent);
}
.hig-toggle--checkbox.hig-toggle--on .hig-toggle__box,
.hig-toggle--checkbox.hig-toggle--mixed .hig-toggle__box { background-color: var(--hig-toggle-tint, var(--accent)); }
/* Dark Controls/Active, On adds Fills/Dark Vibrant/3 Tertiary (5% white) over the accent. */
[data-theme^="dark"] .hig-toggle--checkbox.hig-toggle--on .hig-toggle__box,
[data-theme^="dark"] .hig-toggle--checkbox.hig-toggle--mixed .hig-toggle__box { background-image: linear-gradient(var(--mac-fill-tertiary), var(--mac-fill-tertiary)); }
.hig-toggle--checkbox:not(.hig-toggle--disabled):active .hig-toggle__box { background-image: linear-gradient(var(--mac-fill-primary), var(--mac-fill-primary)); } /* Off, 03 - Clicked 0.19 */
.hig-toggle--checkbox.hig-toggle--on:not(.hig-toggle--disabled):active .hig-toggle__box,
.hig-toggle--checkbox.hig-toggle--mixed:not(.hig-toggle--disabled):active .hig-toggle__box { background-image: linear-gradient(var(--mac-fill-secondary), var(--mac-fill-secondary)); } /* On, 03 - Clicked */
.hig-toggle__check { display: block; width: var(--hig-cb-check-w); height: var(--hig-cb-check-h); pointer-events: none; }
.hig-toggle__dash { display: block; width: var(--hig-cb-dash-w); height: var(--hig-cb-dash-h); border-radius: var(--radius-capsule); background: currentColor; pointer-events: none; }
.hig-toggle--checkbox .hig-toggle__label { color: var(--mac-label-primary); font-weight: 500; }
.hig-toggle--checkbox.hig-toggle--mini { --hig-cb: 12px; --hig-cb-r: 3.5px; --hig-cb-gap: 3px; --hig-cb-row: 14px; --hig-cb-check-w: 7.87px; --hig-cb-check-h: 7.55px; --hig-cb-dash-w: 5.5px; --hig-cb-dash-h: 1.7px; }
.hig-toggle--checkbox.hig-toggle--small { --hig-cb: 14px; --hig-cb-r: 4.5px; --hig-cb-gap: 4px; --hig-cb-row: 18px; --hig-cb-check-w: 9.31px; --hig-cb-check-h: 8.93px; --hig-cb-dash-w: 6.5px; --hig-cb-dash-h: 2px; }
.hig-toggle--checkbox.hig-toggle--regular { --hig-cb: 16px; --hig-cb-r: 5.5px; --hig-cb-gap: 5px; --hig-cb-row: 24px; --hig-cb-check-w: 9.31px; --hig-cb-check-h: 8.93px; --hig-cb-dash-w: 6.5px; --hig-cb-dash-h: 2px; }
.hig-toggle--checkbox.hig-toggle--large { --hig-cb: 18px; --hig-cb-r: 6.5px; --hig-cb-gap: 5px; --hig-cb-row: 28px; --hig-cb-check-w: 11.72px; --hig-cb-check-h: 11.3px; --hig-cb-dash-w: 8px; --hig-cb-dash-h: 2px; }
.hig-toggle--checkbox.hig-toggle--xl { --hig-cb: 18px; --hig-cb-r: 6.5px; --hig-cb-gap: 7px; --hig-cb-row: 36px; --hig-cb-check-w: 11.72px; --hig-cb-check-h: 11.3px; --hig-cb-dash-w: 8px; --hig-cb-dash-h: 2px; }
/* Labels: SF Pro Medium 10 / 11 / 13pt (kit); line heights and tracking from the macOS text styles of those sizes. */
.hig-toggle--checkbox.hig-toggle--mini .hig-toggle__label { font-size: 10px; line-height: 13px; letter-spacing: 0.12px; }
.hig-toggle--checkbox.hig-toggle--small .hig-toggle__label { font-size: 11px; line-height: 14px; letter-spacing: 0.06px; }
.hig-toggle--checkbox.hig-toggle--regular .hig-toggle__label,
.hig-toggle--checkbox.hig-toggle--large .hig-toggle__label,
.hig-toggle--checkbox.hig-toggle--xl .hig-toggle__label { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
/* Disabled (kit 04 - Disabled): off box Fills/3 Tertiary; on box at 0.45 with the glyph at 0.5; tertiary label. */
.hig-toggle--checkbox.hig-toggle--disabled .hig-toggle__box { background-color: var(--mac-fill-tertiary); }
.hig-toggle--checkbox.hig-toggle--disabled.hig-toggle--on .hig-toggle__box,
.hig-toggle--checkbox.hig-toggle--disabled.hig-toggle--mixed .hig-toggle__box { background-color: var(--hig-toggle-tint, var(--accent)); opacity: 0.45; }
.hig-toggle--checkbox.hig-toggle--disabled .hig-toggle__check,
.hig-toggle--checkbox.hig-toggle--disabled .hig-toggle__dash { opacity: 0.5; }
.hig-toggle--checkbox.hig-toggle--disabled .hig-toggle__label { color: var(--mac-label-tertiary); }

/* ---------- Button that behaves like a toggle ---------- */
.hig-toggle--button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--button-icon-gap);
  margin: 0; border: 0; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none;
}
.hig-toggle--button:disabled { cursor: default; }
.hig-toggle--button.hig-toggle--icon-only { padding: 0; aspect-ratio: 1; }
/* iOS: off is the bordered style (Fills/3 Tertiary, accent symbol); on is the accent highlight the HIG describes
   for the Phone filter button, drawn as the bordered-prominent style (kit Buttons). Sizes are the button sizes. */
.hig-toggle--ios.hig-toggle--button { border-radius: var(--radius-capsule); background: var(--fill-tertiary); color: var(--accent); }
.hig-toggle--ios.hig-toggle--button.hig-toggle--on { background: var(--hig-toggle-tint, var(--accent)); color: var(--on-accent); }
.hig-toggle--ios.hig-toggle--button:disabled { background: var(--fill-quaternary); color: var(--label-tertiary); }
.hig-toggle--ios.hig-toggle--button.hig-toggle--small { height: var(--button-small); padding: 0 var(--button-padding-small); font-size: 15px; line-height: 18px; letter-spacing: -0.23px; }
.hig-toggle--ios.hig-toggle--button.hig-toggle--medium { height: var(--button-medium); padding: 0 var(--button-padding-medium); font-size: 17px; line-height: 18px; letter-spacing: -0.43px; }
.hig-toggle--ios.hig-toggle--button.hig-toggle--large { height: var(--button-large); padding: 0 var(--button-padding-large); font-size: 17px; line-height: 18px; letter-spacing: -0.43px; }
.hig-toggle--ios.hig-toggle--button.hig-toggle--icon-only { padding: 0; }
.hig-toggle--ios.hig-toggle--button.hig-toggle--small::before,
.hig-toggle--ios.hig-toggle--button.hig-toggle--medium::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--target-ios)); height: var(--target-ios); transform: translate(-50%, -50%);
}
/* macOS (kit Buttons/Content Area/Toggle): off Fills/3 Tertiary with a primary label; on the accent at 6% opacity
   with an accent label and the filled symbol. */
.hig-toggle--mac.hig-toggle--button { background: var(--mac-fill-tertiary); color: var(--mac-label-primary); font-weight: 500; }
.hig-toggle--mac.hig-toggle--button.hig-toggle--on { background: color-mix(in srgb, var(--hig-toggle-tint, var(--accent)) 6%, transparent); color: var(--hig-toggle-tint, var(--accent)); }
.hig-toggle--mac.hig-toggle--button:disabled { background: var(--mac-fill-quaternary); color: var(--mac-label-tertiary); }
.hig-toggle--mac.hig-toggle--button.hig-toggle--mini { height: var(--mac-control-mini); padding: 0 var(--mac-button-padding-mini); border-radius: var(--radius-mac-mini); font-size: 10px; line-height: 13px; letter-spacing: 0.12px; }
.hig-toggle--mac.hig-toggle--button.hig-toggle--small { height: var(--mac-control-small); padding: 0 var(--button-padding-small); border-radius: var(--radius-mac-small); font-size: 11px; line-height: 14px; letter-spacing: 0.06px; }
.hig-toggle--mac.hig-toggle--button.hig-toggle--regular { height: var(--mac-control-regular); padding: 0 var(--mac-button-padding); border-radius: var(--radius-mac-regular); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-toggle--mac.hig-toggle--button.hig-toggle--large { height: var(--mac-control-large); padding: 0 var(--mac-button-padding); border-radius: var(--radius-capsule); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-toggle--mac.hig-toggle--button.hig-toggle--xl { height: var(--mac-control-xl); padding: 0 var(--mac-button-padding); border-radius: var(--radius-capsule); font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.hig-toggle--mac.hig-toggle--button.hig-toggle--icon-only { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .hig-toggle { --hig-toggle-dur: 0ms; }
}

/* ---- Box ---- */
/* Box — HIG Boxes; macOS geometry from the macOS 27 kit Group Boxes and Forms pages. */
.hig-box { box-sizing: border-box; min-width: 0; }

/* ---- iOS / iPadOS: "use the secondary and tertiary background colors in boxes" (HIG).
   Corners: radius-group (kit inset grouped list sections). Padding: margin-compact (kit content inset 16pt). */
.hig-box--ios {
  border-radius: var(--radius-group);
  padding: var(--margin-compact);
  color: var(--label-primary);
}
.hig-box--secondary { background: var(--background-secondary); }
.hig-box--tertiary { background: var(--background-tertiary); }
/* Title inside the box, then 10pt to the content (kit Lists/Header/Nested: 10pt below the header text). */
.hig-box--ios > .hig-box__title { color: var(--label-primary); margin: 0 0 10px; }

/* ---- macOS: title above the box (HIG). Kit Group Boxes: 12pt corners (radius-mac-menu), Fills/4 Quaternary.
   Content inset 10pt horizontally and 12pt vertically (kit Forms: rows inset 10pt; row content 12pt from the top). */
.hig-box--mac { color: var(--mac-label-primary); }
.hig-box--mac > .hig-box__content {
  border-radius: var(--radius-mac-menu);
  background: var(--mac-fill-quaternary);
  padding: 12px 10px;
}
/* Title aligned with the content inset (10pt, kit Forms). The 6px gap to the box is not in the kit or HIG. */
.hig-box--mac > .hig-box__title { color: var(--mac-label-primary); margin: 0 10px 6px; }

/* ---- Collection ---- */
/* Collection — HIG Collections; tvOS grid from HIG Layout > tvOS > Grids. The HIG states no iOS or macOS item
   metrics; values below cite the closest kit layouts. */
.hig-collection {
  display: grid; box-sizing: border-box; min-width: 0; align-items: start;
  /* iOS: kit Activity View rows — 78pt items advance 92pt (14pt apart). */
  --hig-collection-gap: 14px;
  gap: var(--hig-collection-gap);
}
/* macOS: about 12pt around bezeled elements (HIG Accessibility; token padding-bezeled). */
.hig-collection--mac { --hig-collection-gap: var(--padding-bezeled); }
/* tvOS: 40pt horizontal spacing at every column count, 100pt minimum between unfocused rows (HIG). */
.hig-collection--tv { --hig-collection-gap: var(--tv-grid-gap); column-gap: var(--hig-collection-gap); row-gap: var(--tv-grid-row-gap); }

/* Horizontal row: scrolls sideways. The padding keeps focus rings (3px + 2px offset) and tvOS focus growth
   inside the scroll area so they aren't clipped. */
.hig-collection--row { grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain; padding: 5px; scroll-padding: 5px; }
.hig-collection--mac.hig-collection--row { padding: 8px; scroll-padding: 8px; }
.hig-collection--tv.hig-collection--row { padding: calc(var(--tv-grid-row-gap) / 2) var(--tv-grid-gap); scroll-padding: var(--tv-grid-gap); }

.hig-collection__item {
  position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column;
  border-radius: var(--radius-thumbnail); cursor: pointer; outline-offset: 2px;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.hig-collection__item--disabled { cursor: default; }

/* Media: content images take the thumbnail corner (kit radius-thumbnail); a fill-tertiary placeholder with a
   photo symbol stands in when an item has no image. */
.hig-collection__media {
  position: relative; display: block; width: 100%; overflow: hidden; flex: none;
  border-radius: var(--radius-thumbnail); background: var(--fill-tertiary);
}
.hig-collection__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hig-collection__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--label-tertiary);
}
.hig-collection__placeholder > svg { width: min(33%, 48px); height: auto; aspect-ratio: 1; }

/* Text below the image: 7pt gap (kit Activity View: label 7pt below the 66pt glyph). One line each. */
.hig-collection__text { display: flex; flex-direction: column; min-width: 0; margin-top: 7px; }
.hig-collection__title, .hig-collection__subtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-collection__title { color: var(--label-primary); }
.hig-collection__subtitle { color: var(--label-secondary); }
.hig-collection__item--disabled .hig-collection__title,
.hig-collection__item--disabled .hig-collection__subtitle { color: var(--label-tertiary); }

/* iOS / tvOS selection mark: the kit's 22pt accent circle with a white checkmark (Lists/Editing Selected),
   ringed in white so it reads over any image. The 6px inset from the corner is chosen. */
.hig-collection__check {
  position: absolute; inset-inline-end: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1.5px var(--on-accent);
}

/* ---- macOS: Labels/1 Primary title, Subheadline secondary subtitle 2pt below (kit Forms Title + Subtitle). */
.hig-collection--mac .hig-collection__title { color: var(--mac-label-primary); }
.hig-collection--mac .hig-collection__subtitle { color: var(--mac-label-secondary); margin-top: 2px; }
.hig-collection--mac .hig-collection__item--disabled .hig-collection__title,
.hig-collection--mac .hig-collection__item--disabled .hig-collection__subtitle { color: var(--mac-label-tertiary); }
/* Selection: a highlight that bleeds 4pt past the item with 8pt corners (kit Sidebars …/Selected background:
   x=-4, r=8); the 10% fill is mac-fill-primary. The focus ring clears the highlight. */
.hig-collection--mac .hig-collection__item--selected::before {
  content: ""; position: absolute; inset: -4px; z-index: -1; pointer-events: none;
  border-radius: var(--radius-mac-menu-item); background: var(--mac-fill-primary);
}
.hig-collection--mac .hig-collection__item:focus-visible { outline-offset: 4px; }

/* ---- tvOS: no focus ring; the focused item grows (--hig-collection-scale, set from the grid width) and lifts. */
.hig-collection--tv .hig-collection__item {
  border-radius: 0; outline: none; transform-origin: 50% 50%;
  transition: transform 200ms ease; /* duration chosen; the HIG gives none */
}
.hig-collection--tv .hig-collection__media { box-shadow: var(--shadow-glass-small); transition: box-shadow 200ms ease; }
.hig-collection--tv .hig-collection__text { margin-top: 12px; }
.hig-collection--tv .hig-collection__item--default:focus-visible,
.hig-collection--tv .hig-collection__item--default.hig-collection__item--focused,
.hig-collection--tv .hig-collection__item--default:hover:not(.hig-collection__item--disabled) {
  transform: scale(var(--hig-collection-scale, 1)); z-index: 1;
}
.hig-collection--tv .hig-collection__item--default:focus-visible .hig-collection__media,
.hig-collection--tv .hig-collection__item--default.hig-collection__item--focused .hig-collection__media,
.hig-collection--tv .hig-collection__item--default:hover:not(.hig-collection__item--disabled) .hig-collection__media { box-shadow: var(--shadow-glass); }
.hig-collection--tv .hig-collection__item--disabled .hig-collection__media { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .hig-collection--tv .hig-collection__item, .hig-collection--tv .hig-collection__media { transition: none; }
}

/* ---- ColumnView ---- */
/* ColumnView — macOS browser. Rows follow the macOS 27 kit Sidebars/Small rows (24pt, 16pt icon slot with the title
   4pt after it, chevron 11pt Bold tertiary, r8 selection); text is 13pt Body. The HIG gives no default column width:
   200px, the list inset and the preview layout are chosen. */
.hig-column-view {
  position: relative; box-sizing: border-box; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden;
  font-family: var(--font-sans); background: var(--mac-window-background); color: var(--mac-label-primary);
}
.hig-column-view *, .hig-column-view *::before, .hig-column-view *::after { box-sizing: border-box; }
.hig-column-view__column {
  position: relative; flex: none; min-width: 0; overflow-y: auto; box-shadow: inset -1px 0 var(--mac-separator);
}
.hig-column-view__list { padding: 4px 5px 4px 4px; outline: none; } /* chosen: 4pt around the rows (+1pt for the divider) */
.hig-column-view__item {
  display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 8px; /* padding chosen */
  border-radius: var(--radius-mac-menu-item); /* kit Sidebars/Small selection r8 */
  font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--mac-label-primary);
  cursor: default; outline: none; white-space: nowrap;
}
.hig-column-view__icon { flex: none; width: 16px; display: inline-flex; justify-content: center; color: var(--accent); }
.hig-column-view__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hig-column-view__chevron { flex: none; display: inline-flex; color: var(--mac-label-tertiary); }
.hig-column-view__chevron:dir(rtl) { transform: scaleX(-1); }
.hig-column-view__item:active:not(.hig-column-view__item--selected) { background: var(--pressed-overlay); }
.hig-column-view__item:focus-visible { box-shadow: inset 0 0 0 3px var(--focus-ring); }
/* The selection in the current column: accent with on-accent text. Selected ancestors along the path: a neutral fill
   (chosen: mac-fill-primary stands in for the unemphasized selection, which the kit does not draw). */
.hig-column-view__item--current { background: var(--accent); color: var(--on-accent); }
.hig-column-view__item--current .hig-column-view__icon,
.hig-column-view__item--current .hig-column-view__chevron { color: var(--on-accent); }
.hig-column-view__item--current:focus-visible { box-shadow: inset 0 0 0 2px var(--on-accent); }
.hig-column-view__item--ancestor { background: var(--mac-fill-primary); }
/* Resize handle on each column's trailing edge (HIG: let people resize columns) */
.hig-column-view__resize { position: absolute; top: 0; right: 0; bottom: 0; width: 6px; cursor: col-resize; touch-action: none; }

/* Preview of a selected item with no children (HIG: show information about the selected item) */
/* Like Finder's preview column it fills the width the columns leave: the set width is its minimum (flex basis). */
.hig-column-view__preview { box-shadow: none; display: flex; flex: 1 0 auto; }
.hig-column-view__preview-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center;
}
.hig-column-view__preview-icon { color: var(--accent); }
.hig-column-view__preview-name { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: -0.08px; overflow-wrap: anywhere; } /* Headline */
.hig-column-view__preview-info { margin: 0; width: 100%; display: grid; gap: 2px; }
.hig-column-view__preview-pair { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 14px; letter-spacing: 0.06px; } /* Subheadline */
.hig-column-view__preview-pair dt { color: var(--mac-label-secondary); }
.hig-column-view__preview-pair dd { margin: 0; color: var(--mac-label-primary); text-align: end; }

/* ---- Disclosure ---- */
/* Disclosure — macOS 27 kit (Forms disclosure rows, Disclosure Buttons) and iOS 27 kit (Lists disclosure accessory).
   The 150ms rotation and the spacing between a control and its revealed content are chosen. */
.hig-disclosure { box-sizing: border-box; font-family: var(--font-sans); }
.hig-disclosure *, .hig-disclosure *::before { box-sizing: border-box; }
.hig-disclosure__content[hidden] { display: none; }
ul.hig-disclosure__content { list-style: none; margin: 0; padding: 0; }
.hig-disclosure__trigger {
  appearance: none; -webkit-appearance: none; position: relative; margin: 0; padding: 0; border: 0; background: none;
  display: flex; align-items: center; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer;
}
.hig-disclosure__trigger:disabled { cursor: default; }
.hig-disclosure__chevron { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.hig-disclosure__chevron .hig-icon { transition: transform 150ms ease; }

/* ---------- Triangle (kit Forms/Rows - Leading/Disclosure: 13pt Semibold chevron, label-primary, 18x16 slot;
   label 13pt Medium at x=18) ---------- */
.hig-disclosure--triangle { color: var(--mac-label-primary); }
.hig-disclosure--triangle > .hig-disclosure__trigger { min-height: 16px; border-radius: var(--radius-mac-mini); }
.hig-disclosure--triangle > .hig-disclosure__trigger::before {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: var(--target-mac); transform: translateY(-50%);
}
.hig-disclosure--triangle .hig-disclosure__chevron { width: 18px; height: 16px; justify-content: flex-start; color: var(--mac-label-primary); }
.hig-disclosure--triangle .hig-disclosure__chevron .hig-icon { margin-left: -4px; }
.hig-disclosure--triangle .hig-disclosure__label { font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: -0.08px; }
.hig-disclosure--triangle.hig-disclosure--open .hig-disclosure__chevron .hig-icon { transform: rotate(90deg); }
.hig-disclosure--triangle .hig-disclosure__chevron:dir(rtl) { transform: scaleX(-1); }
.hig-disclosure--triangle > .hig-disclosure__content { padding: 8px 0 0 18px; } /* chosen: content aligns with the label */
.hig-disclosure--triangle.hig-disclosure--disabled { color: var(--mac-label-tertiary); }
.hig-disclosure--triangle.hig-disclosure--disabled .hig-disclosure__chevron { color: var(--mac-label-tertiary); }

/* ---------- Disclosure button (kit Disclosure Buttons/Content Area: Bordered fill, label-primary chevron;
   Mn 16 r4 8.5pt Bold, Sm 20 r5 10pt Bold, Rg 24 r6 13pt Semibold, Lg 28 and XL 36 capsules 13pt Semibold) ---------- */
.hig-disclosure__bar { display: flex; align-items: center; gap: 8px; } /* gap chosen */
.hig-disclosure__button {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mac-fill-secondary); color: var(--mac-label-primary);
}
.hig-disclosure__button::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, var(--target-mac)); height: max(100%, var(--target-mac));
}
.hig-disclosure__button--mini { width: var(--mac-control-mini); height: var(--mac-control-mini); border-radius: var(--radius-mac-mini); }
.hig-disclosure__button--small { width: var(--mac-control-small); height: var(--mac-control-small); border-radius: var(--radius-mac-small); }
.hig-disclosure__button--regular { width: var(--mac-control-regular); height: var(--mac-control-regular); border-radius: var(--radius-mac-regular); }
.hig-disclosure__button--large { width: var(--mac-control-large); height: var(--mac-control-large); border-radius: var(--radius-capsule); }
.hig-disclosure__button--xl { width: var(--mac-control-xl); height: var(--mac-control-xl); border-radius: var(--radius-capsule); }
/* Clicked: kit 16% fill = the 8% bordered fill + the 8% pressed overlay (hig-pressable) */
.hig-disclosure__button:disabled { background: var(--mac-fill-quaternary); color: var(--mac-label-tertiary); cursor: default; }
.hig-disclosure--open .hig-disclosure__button .hig-icon { transform: rotate(180deg); } /* points up when expanded */
.hig-disclosure--button > .hig-disclosure__content { padding-top: 8px; } /* chosen */

/* ---------- iOS DisclosureGroup (kit Lists Accessories - Trailing/Disclosure - Collapsed/Expanded:
   17pt Semibold chevron in the accent, 8pt slot; row as Lists/Rows/Default) ---------- */
.hig-disclosure--group { color: var(--label-primary); }
.hig-disclosure__row {
  width: 100%; min-height: var(--row-height); gap: 16px; justify-content: space-between;
  padding: 15px var(--margin-compact); background: var(--hig-list-row-bg, transparent);
}
.hig-disclosure__row .hig-disclosure__label { flex: 1; min-width: 0; font-size: 17px; line-height: 22px; letter-spacing: -0.43px; }
.hig-disclosure--group .hig-disclosure__chevron { width: 8px; color: var(--accent); }
.hig-disclosure--group .hig-disclosure__chevron .hig-icon { margin: 0 -6px; }
.hig-disclosure--group.hig-disclosure--open .hig-disclosure__chevron .hig-icon { transform: rotate(90deg); }
.hig-disclosure--group .hig-disclosure__chevron:dir(rtl) { transform: scaleX(-1); }
.hig-disclosure__row:active:not(:disabled) { background: linear-gradient(var(--pressed-overlay), var(--pressed-overlay)), var(--hig-list-row-bg, transparent); }
.hig-disclosure__row:focus-visible { outline-offset: -3px; }
.hig-disclosure--group.hig-disclosure--disabled .hig-disclosure__label,
.hig-disclosure--group.hig-disclosure--disabled .hig-disclosure__chevron { color: var(--label-tertiary); }
/* Inside a list section: the row separator starts at the text and ends 16pt before the edge, like list rows */
.hig-list-section__rows > .hig-disclosure--group > .hig-disclosure__row {
  background:
    linear-gradient(var(--separator), var(--separator)) no-repeat left var(--margin-compact) bottom / calc(100% - 2 * var(--margin-compact)) 1px,
    var(--hig-list-row-bg, transparent);
}
.hig-list-section__rows > .hig-disclosure--group:last-child:not(.hig-disclosure--open) > .hig-disclosure__row { background: var(--hig-list-row-bg, transparent); }
.hig-list-section__rows > .hig-disclosure--group { list-style: none; }
.hig-list-section__rows > .hig-disclosure--group:last-child > .hig-disclosure__content > .hig-list-row:last-child .hig-list-row__body { box-shadow: none; }

@media (prefers-reduced-motion: reduce) { .hig-disclosure__chevron .hig-icon { transition: none; } }

/* ---- Label ---- */
/* Label — the four system label colors (HIG Labels table) and the symbol + title arrangement of the kits.
   Type metrics come from the compiled type-style class passed as textStyle (e.g. .ios-body); nothing here sets
   font size, so the class decides. */
.hig-label {
  display: inline-flex; align-items: flex-start; max-width: 100%; vertical-align: top;
  /* Native labels are not selectable unless the app enables it (HIG: make *useful* label text selectable). */
  -webkit-user-select: none; user-select: none;
}
.hig-label--selectable { -webkit-user-select: text; user-select: text; cursor: text; }
.hig-label__title { min-width: 0; overflow-wrap: anywhere; }

/* Label colors: label / secondaryLabel / tertiaryLabel / quaternaryLabel (iOS, iPadOS, tvOS, visionOS) */
.hig-label--ios.hig-label--primary { color: var(--label-primary); }
.hig-label--ios.hig-label--secondary { color: var(--label-secondary); }
.hig-label--ios.hig-label--tertiary { color: var(--label-tertiary); }
.hig-label--ios.hig-label--quaternary { color: var(--label-quaternary); }
/* labelColor / secondaryLabelColor / tertiaryLabelColor / quaternaryLabelColor (macOS) */
.hig-label--mac.hig-label--primary { color: var(--mac-label-primary); }
.hig-label--mac.hig-label--secondary { color: var(--mac-label-secondary); }
.hig-label--mac.hig-label--tertiary { color: var(--mac-label-tertiary); }
.hig-label--mac.hig-label--quaternary { color: var(--mac-label-quaternary); }

/* The symbol sits on the first line: its box is one line of the text style tall (1lh). */
.hig-label__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 1.3em; height: 1lh;
}
.hig-label__icon > svg, .hig-label__icon > img { width: 1.3em; height: 1.3em; width: 1lh; height: 1lh; display: block; }

/* iOS: kit Sidebar Items/Leading/Symbols — a 34pt symbol column at 17pt text, title 4pt after it (x=38),
   symbol in the accent color. Expressed in em so other text styles scale the same proportions. */
.hig-label--ios .hig-label__icon { width: calc(34em / 17); margin-inline-end: calc(4em / 17); color: var(--accent); }
/* macOS: kit Forms "Title + Symbol" row — a 20pt symbol box at 13pt text, title at x=30 (10pt gap),
   symbol in Labels Vibrant Secondary. */
.hig-label--mac .hig-label__icon { width: calc(20em / 13); margin-inline-end: calc(10em / 13); color: var(--mac-label-secondary); }

/* Dimmed levels dim the symbol with the title unless iconColor overrides it. */
.hig-label--secondary .hig-label__icon,
.hig-label--tertiary .hig-label__icon,
.hig-label--quaternary .hig-label__icon { color: inherit; }

/* Icon-only: the symbol keeps its glyph size without the title column. */
.hig-label--icon-only .hig-label__icon { width: auto; margin-inline-end: 0; }

/* ---- List ---- */
/* List, ListSection, ListRow — iOS 27 kit (Lists, Sidebar, Toggles pages) and macOS 27 kit (Forms, Sidebars,
   Toggles - Switches pages). Literal px values are kit measurements without a token of their own, cited inline;
   values the kits do not give are marked "chosen". */
.hig-list {
  position: relative; box-sizing: border-box; margin: 0;
  font-family: var(--font-sans); color: var(--label-primary); -webkit-tap-highlight-color: transparent;
}
.hig-list *, .hig-list *::before, .hig-list *::after { box-sizing: border-box; }

/* ---------- iOS / iPadOS grounds ---------- */
/* Grouped styles: grouped-background-primary ground, -secondary rows (kit Examples/Lists/Grouped). */
.hig-list--ios.hig-list--insetGrouped,
.hig-list--ios.hig-list--grouped { background: var(--grouped-background-primary); --hig-list-row-bg: var(--grouped-background-secondary); }
.hig-list--ios.hig-list--plain { background: var(--background-primary); --hig-list-row-bg: var(--background-primary); }
.hig-list--ios.hig-list--sidebar { --hig-list-row-bg: transparent; padding: 0 10px; } /* kit Sidebar/Items/Level 0: row 10pt from the column edge */
/* Inset grouped: 370pt sections inset 16pt in a 402pt screen (kit Lists/Grouped Table View). */
.hig-list--ios.hig-list--insetGrouped { padding: 0 var(--margin-compact); }

/* ---------- Sections ---------- */
.hig-list-section { margin: 0; }
.hig-list-section + .hig-list-section { margin-top: 20px; } /* kit Examples/Lists/Grouped: sections 20pt apart */
.hig-list--ios.hig-list--plain .hig-list-section + .hig-list-section { margin-top: 0; } /* plain sections run on; headers separate them */
.hig-list-section__rows { position: relative; list-style: none; margin: 0; padding: 0; }
.hig-list--ios.hig-list--insetGrouped .hig-list-section__rows {
  background: var(--grouped-background-secondary); border-radius: var(--radius-group); overflow: hidden;
}
.hig-list--ios.hig-list--grouped .hig-list-section__rows { background: var(--grouped-background-secondary); }

/* Headers (kit Lists/Header/*): title 16pt from the leading edge, 10pt above and below.
   Extra Prominent 48pt (Title 2 Bold), Prominent 45pt (Title 3 Semibold), Nested 42pt (Body Semibold, secondary). */
.hig-list-section__header { display: flex; align-items: baseline; padding: 10px var(--margin-compact); }
.hig-list-section__title { flex: 1; min-width: 0; }
.hig-list--ios .hig-list-section__header--extraProminent .hig-list-section__title {
  font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.26px; color: var(--label-primary);
}
.hig-list--ios .hig-list-section__header--prominent .hig-list-section__title {
  font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.45px; color: var(--label-primary);
}
.hig-list--ios .hig-list-section__header--nested .hig-list-section__title {
  font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.43px; color: var(--label-secondary);
}
/* Trailing header action: Subheadline 15pt in the accent (kit Headers/Extra Prominent/Trailing/Action). */
.hig-list--ios .hig-list-section__action { flex: none; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; color: var(--accent); }
/* Footer (kit Lists/Footer): 13pt/16 (Footnote, tight leading), secondary, 8pt above, 30pt for one line. */
.hig-list-section__footer {
  padding: 8px var(--margin-compact) 6px;
  font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--label-secondary);
}

/* ---------- Rows (kit Lists/Rows/Default 52pt, Large 68pt) ---------- */
.hig-list-row { position: relative; display: block; margin: 0; padding: 0; list-style: none; overflow: hidden; outline: none; }
.hig-list-row__content {
  position: relative; display: flex; align-items: stretch; min-height: var(--row-height);
  padding-left: var(--margin-compact); background: var(--hig-list-row-bg);
  transition: transform 200ms ease; /* chosen: the kits give no swipe duration */
}
.hig-list-row__content::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--pressed-overlay); opacity: 0; transition: opacity 80ms linear;
}
/* Title and trailing items share the "Stack", whose bottom border is the separator: it starts at the text. */
.hig-list-row__body {
  flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 16px;
  margin-right: var(--margin-compact); /* the Stack (and its separator) ends 16pt before the trailing edge (kit) */
  padding: 14px 0; /* kit: title 15pt from the top of a 52pt row, 14pt in a 68pt row */
  box-shadow: inset 0 -1px var(--separator);
}
.hig-list-section__rows > .hig-list-row:last-child .hig-list-row__body { box-shadow: none; }
.hig-list-row__text { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; }
.hig-list-row__title {
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; color: var(--label-primary); overflow-wrap: anywhere;
}
/* kit Rows/Large Subtitle: 15pt on an 18pt line, secondary */
.hig-list-row__subtitle { font-size: 15px; line-height: 18px; letter-spacing: -0.23px; color: var(--label-secondary); }
.hig-list-row__trailing {
  flex: none; max-width: 62%; align-self: stretch; display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; /* kit Accessories - Trailing: chevron and symbols sit 16pt after the detail */
  color: var(--label-secondary);
}
.hig-list-row__detail {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; color: var(--label-secondary);
}
/* Drill-in chevron: 17pt Semibold, tertiary, 10pt slot (kit Accessories - Trailing/Drill In) */
.hig-list-row__chevron { flex: none; display: inline-flex; width: 10px; justify-content: center; color: var(--label-tertiary); }
.hig-list-row__chevron .hig-icon { margin: 0 -5px; }
/* Checkmark: 17pt Semibold, label-primary, 22pt slot (kit Accessories - Trailing/Checkmark) */
.hig-list-row__check { flex: none; display: inline-flex; width: 22px; justify-content: center; color: var(--label-primary); }
/* Info (detail disclosure) button: 17pt symbol in the accent, 22pt slot (kit Accessories - Trailing/Info) */
.hig-list-row__info {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; z-index: 1; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--accent);
}
.hig-list-row__info::before,
.hig-list-switch::before,
.hig-list-edit::before,
.hig-list-row__grabber::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, var(--target-ios)); height: max(100%, var(--target-ios));
}
.hig-list-row__info:disabled { color: var(--label-tertiary); cursor: default; }

/* The row's primary action: its ::before covers the whole row, so the full row is the hit region. */
.hig-list-row__action {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; outline: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; text-decoration: none; cursor: pointer;
}
.hig-list-row__action::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hig-list-row__action:disabled, .hig-list-row__action[aria-disabled="true"] { cursor: default; }
.hig-list-row__action:active:not(:disabled):not([aria-disabled="true"])::before { background: var(--pressed-overlay); }
.hig-list-row__action:focus-visible::before { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

/* Option rows (selectable lists) */
.hig-list-row--option { cursor: pointer; }
.hig-list-row--option:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.hig-list-row--option:active:not(.hig-list-row--disabled) .hig-list-row__content::after { opacity: 1; }
/* Persistent highlight for navigation selection: Fills/3 Tertiary, as the kit's selected sidebar item. */
.hig-list--ios .hig-list-row--highlighted .hig-list-row__content {
  background: linear-gradient(var(--fill-tertiary), var(--fill-tertiary)), var(--hig-list-row-bg);
}

/* Leading accessories */
/* Image: 42pt thumbnail, radius-thumbnail; 16pt to the text (kit Rows/Default: accessories end 16pt before the Stack). */
.hig-list-row__image {
  flex: none; align-self: center; display: flex; width: 42px; height: 42px; margin-right: 16px;
  border-radius: var(--radius-thumbnail); overflow: hidden; background: var(--fill-tertiary);
}
.hig-list-row__image > * { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Symbol: 22pt in the accent, 34pt slot (kit Accessories - Leading - Regular/With Symbol) */
.hig-list-row__symbol { flex: none; align-self: center; display: inline-flex; justify-content: center; width: 34px; margin-right: 16px; color: var(--accent); }
/* Settings-style icon tile — chosen: the iOS kit draws none; 28pt tile with the radius ratio (22.5%) of the macOS kit's
   Forms "Service Icon" tiles, white (on-accent) glyph on a system color. */
.hig-list-row__tile {
  flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: 16px; border-radius: 6.3px; color: var(--on-accent);
}

/* Edit controls: 22pt circles in a 25pt slot, 4pt before the image (kit Rows/Editing/*) */
.hig-list-edit {
  appearance: none; -webkit-appearance: none; margin: 0 4px 0 0; padding: 0 0 0 2px; border: 0; background: none;
  position: relative; z-index: 1; flex: none; align-self: center; width: 25px; height: 22px;
  display: inline-flex; align-items: center; cursor: pointer;
}
.hig-list-edit + .hig-list-row__body { margin-left: 12px; } /* 4pt + 12pt = the 16pt gap before the text */
.hig-list-edit__frame {
  width: 22px; height: 22px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-accent);
}
.hig-list-edit--delete .hig-list-edit__frame { background: var(--system-red); }
.hig-list-edit--insert .hig-list-edit__frame { background: var(--system-green); }
.hig-list-edit--selected .hig-list-edit__frame { background: var(--accent); }
.hig-list-edit--unselected .hig-list-edit__frame { box-shadow: inset 0 0 0 1.5px var(--vibrant-label-tertiary); } /* kit Editing Unselected */
/* Reorder grabber: 38pt column with a 0.5pt opaque separator on its leading edge (kit Accessories - Trailing, Grabber group) */
.hig-list-row__grabber {
  appearance: none; -webkit-appearance: none; margin: -14px 0; padding: 0 0 0 12.75px; border: 0; background: none;
  position: relative; z-index: 1; flex: none; align-self: stretch; width: 38px; display: inline-flex; align-items: center;
  box-shadow: inset 0.5px 0 var(--separator-opaque); color: var(--label-tertiary); cursor: grab;
}

/* Destructive rows and list buttons (kit Lists/Buttons: centered title in the accent; Destructive in system red) */
.hig-list-row--destructive .hig-list-row__title { color: var(--system-red); }
.hig-list-row--button .hig-list-row__text { align-items: center; text-align: center; }
.hig-list-row--button .hig-list-row__title { color: var(--accent); }
.hig-list-row--button.hig-list-row--destructive .hig-list-row__title { color: var(--system-red); }
.hig-list-row--disabled .hig-list-row__title,
.hig-list-row--disabled .hig-list-row__subtitle,
.hig-list-row--disabled .hig-list-row__detail { color: var(--label-tertiary); }
.hig-list-row--disabled .hig-list-row__symbol { opacity: 0.5; }

/* ---------- Switch (kit Toggles/On|Off/1 - Idle: 64x28 track, 38x24 knob r13 inset 2pt; green on) ---------- */
.hig-list-switch {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; cursor: pointer;
  position: relative; z-index: 1; flex: none; align-self: center;
  width: var(--toggle-width); height: var(--toggle-height); border-radius: var(--radius-capsule);
  background: var(--label-tertiary); transition: background-color 200ms ease; /* duration chosen */
}
.hig-list-switch--on { background: var(--system-green); }
/* The knob is white in every appearance; no token is white in all four themes, so light themes use
   background-primary (#fff) and dark themes label-primary (#fff). */
.hig-list-switch__knob {
  position: absolute; top: 2px; left: 2px; width: 38px; height: 24px; border-radius: 13px;
  background: var(--control-knob); transition: transform 200ms ease;
}
.hig-list-switch--on .hig-list-switch__knob { transform: translateX(22px); }
.hig-list-switch:disabled { opacity: 0.5; cursor: default; } /* kit 4 - Disabled */
/* macOS mini switch in form rows: 36x16 track, 21x13 knob inset 1.5pt (kit Toggles - Switches/Content Area/1 Mn) */
.hig-list-switch--mac { width: 36px; height: 16px; background: var(--mac-fill-primary); }
.hig-list-switch--mac.hig-list-switch--on { background: var(--accent); }
.hig-list-switch--mac .hig-list-switch__knob { top: 1.5px; left: 1.5px; width: 21px; height: 13px; border-radius: var(--radius-capsule); box-shadow: var(--shadow-knob); }
.hig-list-switch--mac.hig-list-switch--on .hig-list-switch__knob { transform: translateX(12px); }
.hig-list-switch--mac::before { width: max(100%, var(--target-mac)); height: var(--target-mac); }

/* ---------- Swipe actions (kit Lists/Rows with Swipe Actions, Slide Action) ---------- */
.hig-list-row--revealed-trailing .hig-list-row__content { border-radius: 0 var(--radius-capsule) var(--radius-capsule) 0; }
.hig-list-row--revealed-leading .hig-list-row__content { border-radius: var(--radius-capsule) 0 0 var(--radius-capsule); }
.hig-list-row__actions { position: absolute; top: 50%; transform: translateY(-50%); display: flex; gap: 10px; }
.hig-list-row__actions--trailing { right: 0; }
.hig-list-row__actions--leading { left: 0; }
.hig-list-row__swipe {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer; font-family: var(--font-sans);
  height: 44px; border-radius: var(--radius-capsule); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Symbol + Label 84x44: 16pt symbol, 13pt label 8pt after it, 14pt side padding */
.hig-list-row__swipe--label { min-width: 84px; padding: 0 14px; gap: 8px; font-size: 13px; line-height: 16px; white-space: nowrap; }
.hig-list-row__swipe--symbol { width: 60px; padding: 0; } /* Symbol 60x44, 18pt symbol */

/* ---------- Section index (kit Lists/Section Index: 16pt strip, 11pt Semibold letters on 10pt lines, accent) ---------- */
.hig-list__index {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: 16px; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hig-list__index-item {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  width: 14px; height: 10px; font-family: var(--font-sans); font-size: 11px; line-height: 10px; font-weight: 600; color: var(--accent);
}
/* Plain rows run under the index; keep their trailing content clear of the 16pt strip (chosen). */
.hig-list--indexed.hig-list--plain .hig-list-row__body { margin-right: 32px; }

/* ---------- iPadOS sidebar style (kit Sidebar: 44pt items, Fills/3 Tertiary selection r22, levels 20pt apart) ---------- */
.hig-list--ios.hig-list--sidebar .hig-list-section + .hig-list-section { margin-top: 0; }
/* Header 54pt: 17pt Medium secondary title at 12,21 in the 260pt column */
.hig-list--ios.hig-list--sidebar .hig-list-section__header { padding: 21px 12px 11px 2px; }
.hig-list--ios.hig-list--sidebar .hig-list-section__title {
  font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -0.43px; color: var(--label-secondary);
}
.hig-list--ios.hig-list--sidebar .hig-list-row { margin-left: calc(var(--hig-list-level, 0) * 20px); }
.hig-list--ios.hig-list--sidebar .hig-list-row__content { min-height: var(--sidebar-row-height); padding-left: 10px; border-radius: var(--radius-capsule); }
.hig-list--ios.hig-list--sidebar .hig-list-row__body { margin-right: 4px; padding: 4px 0; box-shadow: none; }
.hig-list--ios.hig-list--sidebar .hig-list-row__symbol { width: 34px; margin-right: 4px; } /* titles 38pt after the symbol slot */
.hig-list--ios.hig-list--sidebar .hig-list-row__subtitle { font-size: 13px; line-height: 14px; letter-spacing: -0.08px; }

/* ---------- macOS ---------- */
.hig-list--mac { color: var(--mac-label-primary); background: var(--mac-window-background); --hig-list-row-bg: transparent; }
/* plain = bordered list: rows 24pt (kit Sidebars/Small rows), 13pt body text, alternating backgrounds (HIG) */
.hig-list--mac .hig-list-row__content { min-height: 24px; padding-left: 10px; } /* 10pt inset as the kit's Forms rows */
.hig-list--mac .hig-list-row__body { margin-right: 10px; padding: 4px 0; gap: 8px; box-shadow: none; } /* gap chosen */
.hig-list--mac .hig-list-row__title { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--mac-label-primary); }
.hig-list--mac .hig-list-row__subtitle { font-size: 11px; line-height: 14px; letter-spacing: 0.06px; color: var(--mac-label-secondary); }
.hig-list--mac .hig-list-row__detail { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--mac-label-secondary); }
.hig-list--mac .hig-list-row__trailing { gap: 8px; color: var(--mac-label-secondary); }
/* Symbol: 16pt slot in the accent, title 4pt after it (kit Sidebars/Small/Items) */
.hig-list--mac .hig-list-row__symbol { width: 16px; margin-right: 4px; color: var(--accent); }
.hig-list--mac .hig-list-row__chevron { width: auto; color: var(--mac-label-secondary); }
.hig-list--mac .hig-list-row__chevron .hig-icon { margin: 0; }
.hig-list--mac .hig-list-row__check { width: auto; color: var(--mac-label-primary); }
.hig-list--mac .hig-list-row__info { width: 20px; height: 16px; color: var(--mac-label-secondary); } /* kit Forms info button: 13pt, secondary */
.hig-list--mac .hig-list-row__info::before { width: max(100%, var(--target-mac)); height: var(--target-mac); }
/* Service icon tile 24pt r5.4, white 13pt symbol, title 8pt after it (kit Forms/Rows - Leading/Sidebar Icon/Service Icon 24pt) */
.hig-list--mac .hig-list-row__tile { width: 24px; height: 24px; margin-right: 8px; border-radius: 5.4px; }
/* Image 32pt r9 with a 0.5pt inner border at 10% (kit Forms/Image Icon Rounded Corner) */
.hig-list--mac .hig-list-row__image {
  width: 32px; height: 32px; margin-right: 8px; border-radius: 9px; background: var(--mac-fill-secondary);
  box-shadow: inset 0 0 0 0.5px var(--mac-label-quaternary);
}
.hig-list--mac .hig-list-row--destructive .hig-list-row__title { color: var(--system-red); }
.hig-list--mac .hig-list-row--disabled :is(.hig-list-row__title, .hig-list-row__subtitle, .hig-list-row__detail) { color: var(--mac-label-tertiary); }
.hig-list--mac .hig-list-row__action:focus-visible::before { outline-offset: -3px; }
.hig-list--mac .hig-list-row--button .hig-list-row__title { color: var(--accent); }

/* Alternating row backgrounds (HIG: bordered style), every second row */
.hig-list--mac.hig-list--alternating .hig-list-section__rows > .hig-list-row:nth-child(even):not(.hig-list-row--highlighted) .hig-list-row__content {
  background: var(--mac-fill-quaternary);
}
/* Selected rows: accent with on-accent text */
.hig-list--mac:not(.hig-list--sidebar) .hig-list-row--highlighted .hig-list-row__content { background: var(--accent); }
.hig-list--mac:not(.hig-list--sidebar) .hig-list-row--highlighted :is(.hig-list-row__title, .hig-list-row__subtitle, .hig-list-row__detail, .hig-list-row__symbol, .hig-list-row__chevron, .hig-list-row__check, .hig-list-row__info) {
  color: var(--on-accent);
}

/* Headers and footers — chosen: the macOS kit draws no list headers; Headline (13pt Bold) and Subheadline styles */
.hig-list--mac .hig-list-section__header { padding: 6px 10px; }
.hig-list--mac .hig-list-section__title { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: -0.08px; color: var(--mac-label-primary); }
.hig-list--mac .hig-list-section__action { flex: none; font-size: 13px; line-height: 16px; color: var(--accent); }
.hig-list--mac .hig-list-section__footer { padding: 6px 10px; font-size: 11px; line-height: 14px; letter-spacing: 0.06px; color: var(--mac-label-secondary); }
.hig-list--mac .hig-list-section + .hig-list-section { margin-top: 8px; } /* chosen */

/* insetGrouped / grouped = Forms sections: quaternary fill, r12, rows inset 10pt, 40pt rows with text 12pt from the top,
   tertiary-fill row separators across the row (kit Forms/Example Forms) */
.hig-list--mac.hig-list--insetGrouped,
.hig-list--mac.hig-list--grouped { padding: 20px; } /* kit: the form sits 20pt inside the window */
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) .hig-list-section + .hig-list-section { margin-top: 20px; } /* chosen */
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) .hig-list-section__header { padding: 0 10px 8px; } /* chosen */
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) .hig-list-section__rows {
  padding: 0 10px; border-radius: var(--radius-mac-menu); background: var(--mac-fill-quaternary);
}
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) .hig-list-row__content {
  min-height: 40px; padding-left: 0; box-shadow: inset 0 -1px var(--mac-fill-tertiary);
}
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) .hig-list-section__rows > .hig-list-row:last-child .hig-list-row__content { box-shadow: none; }
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) .hig-list-row__body { margin-right: 0; padding: 12px 0; }
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) :is(.hig-list-row__title, .hig-list-row__detail) { font-weight: 500; }
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) .hig-list-row__subtitle { margin-top: 2px; }
/* Symbol: 13pt Medium, secondary, title 10pt after a 20pt slot (kit Forms "Title + Symbol") */
.hig-list--mac:is(.hig-list--insetGrouped, .hig-list--grouped) .hig-list-row__symbol { width: 20px; margin-right: 10px; color: var(--mac-label-secondary); }

/* sidebar (kit Sidebars Medium: sections 14pt from the edge, 32pt rows, 18pt headers, 14pt below each section,
   selection r8 reaching 4pt past the row at 11% black x 50%) */
.hig-list--mac.hig-list--sidebar { background: transparent; padding: 0 14px; }
.hig-list--mac.hig-list--sidebar .hig-list-section { padding-bottom: 14px; }
.hig-list--mac.hig-list--sidebar .hig-list-section + .hig-list-section { margin-top: 0; }
.hig-list--mac.hig-list--sidebar .hig-list-section__header { padding: 2px 0; }
.hig-list--mac.hig-list--sidebar .hig-list-section__title { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06px; color: var(--mac-label-tertiary); }
.hig-list--mac.hig-list--sidebar .hig-list-row { overflow: visible; margin-left: calc(var(--hig-list-level, 0) * 12px); }
.hig-list--mac.hig-list--sidebar .hig-list-row__content { min-height: 32px; margin: 0 -4px; padding-left: 18px; border-radius: var(--radius-mac-menu-item); }
.hig-list--mac.hig-list--sidebar .hig-list-row__body { margin-right: 6px; padding: 8px 0; }
.hig-list--mac.hig-list--sidebar .hig-list-row__symbol { width: 20px; margin-right: 4px; } /* Medium: 20pt symbol slot, title at 24 */
.hig-list--mac.hig-list--sidebar .hig-list-row__detail { font-weight: 500; }
.hig-list--mac.hig-list--sidebar .hig-list-row--highlighted .hig-list-row__content { background: var(--mac-fill-tertiary); } /* nearest token to 11% x 50% */
.hig-list--mac.hig-list--sidebar .hig-list-row--option:focus-visible { outline: none; }
.hig-list--mac.hig-list--sidebar .hig-list-row--option:focus-visible .hig-list-row__content { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .hig-list-row__content, .hig-list-switch, .hig-list-switch__knob { transition: none; }
}

/* ---- Lockup ---- */
/* Lockup — HIG Lockups (tvOS). No tvOS UI kit exists, so geometry comes from the HIG: widths from the tvOS grid
   table (Layout), focus growth from the HIG focused/unfocused size tables (see Lockup.jsx), states from
   Focus and selection (unfocused: small shadow; focused: larger and lifted; highlighted: unfocused size;
   unavailable: no shadow). Type: tvOS type styles. */
.hig-lockup {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--label-primary); text-align: start; box-sizing: border-box;
  position: relative; display: inline-flex; flex-direction: column; vertical-align: top; flex: none;
  cursor: pointer; outline: none; transform-origin: 50% 50%;
  transition: transform 200ms ease; /* duration chosen; the HIG gives none */
  -webkit-tap-highlight-color: transparent;
}
.hig-lockup__media {
  position: relative; display: block; width: 100%; overflow: hidden; flex: none;
  background: var(--fill-tertiary);
  box-shadow: var(--shadow-glass-small); /* unfocused: "a small drop shadow" */
  transition: box-shadow 200ms ease;
}
.hig-lockup__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hig-lockup__header { display: block; margin-bottom: 12px; }
/* 12pt between content and text: chosen (padding-bezeled); the HIG gives no lockup spacing. */
.hig-lockup__footer { display: flex; flex-direction: column; min-width: 0; margin-top: 12px; }
.hig-lockup__title, .hig-lockup__subtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-lockup__title { color: var(--label-primary); }
.hig-lockup__subtitle { color: var(--label-secondary); }

/* Focused: grows (scale from Lockup.jsx) and lifts with the panel shadow; header, content and footer scale together. */
.hig-lockup:focus-visible,
.hig-lockup--focused,
.hig-lockup:hover:not(:disabled):not(.hig-lockup--disabled) { transform: scale(var(--hig-lockup-scale, 1)); z-index: 1; }
.hig-lockup:focus-visible .hig-lockup__media,
.hig-lockup--focused .hig-lockup__media,
.hig-lockup:hover:not(:disabled):not(.hig-lockup--disabled) .hig-lockup__media { box-shadow: var(--shadow-glass); }
/* Highlighted (pressed): back to the unfocused size, still lifted. */
.hig-lockup:active:not(:disabled):not(.hig-lockup--disabled) { transform: scale(1); }

/* Poster: title and subtitle stay hidden until the poster is focused. */
.hig-lockup--poster .hig-lockup__footer { visibility: hidden; }
.hig-lockup--poster:focus-visible .hig-lockup__footer,
.hig-lockup--poster.hig-lockup--focused .hig-lockup__footer,
.hig-lockup--poster:hover:not(:disabled) .hig-lockup__footer { visibility: visible; }

/* Circle (monogram): circular picture, name centered below; initials when there's no image. */
.hig-lockup--circle { align-items: center; text-align: center; }
.hig-lockup--circle .hig-lockup__footer { align-items: center; width: 100%; }
.hig-lockup__initials {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--label-secondary);
}

/* Card: header, content and footer share one platter (background-secondary: "cards and wells").
   The platter takes the shadow; the 24pt text inset is padding-borderless, chosen (no HIG value). */
.hig-lockup--card { border-radius: var(--radius-thumbnail); overflow: hidden; background: var(--background-secondary); box-shadow: var(--shadow-glass-small); transition: transform 200ms ease, box-shadow 200ms ease; }
.hig-lockup--card .hig-lockup__media { border-radius: 0 !important; box-shadow: none; }
.hig-lockup--card .hig-lockup__header { margin: 0; padding: var(--padding-borderless) var(--padding-borderless) 0; }
.hig-lockup--card .hig-lockup__footer { margin: 0; padding: var(--padding-borderless); }
.hig-lockup--card:focus-visible,
.hig-lockup--card.hig-lockup--focused,
.hig-lockup--card:hover:not(:disabled):not(.hig-lockup--disabled) { box-shadow: var(--shadow-glass); }
.hig-lockup--card:focus-visible .hig-lockup__media,
.hig-lockup--card.hig-lockup--focused .hig-lockup__media,
.hig-lockup--card:hover .hig-lockup__media { box-shadow: none; }

/* Unavailable: rests on the content without a shadow, low-contrast text. */
.hig-lockup--disabled, .hig-lockup:disabled { cursor: default; }
.hig-lockup--disabled .hig-lockup__media, .hig-lockup:disabled .hig-lockup__media,
.hig-lockup--card.hig-lockup--disabled, .hig-lockup--card:disabled { box-shadow: none; }
.hig-lockup--disabled .hig-lockup__title, .hig-lockup:disabled .hig-lockup__title,
.hig-lockup--disabled .hig-lockup__subtitle, .hig-lockup:disabled .hig-lockup__subtitle { color: var(--label-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .hig-lockup, .hig-lockup__media, .hig-lockup--card { transition: none; }
}

/* ---- OutlineView ---- */
/* OutlineView — macOS hierarchical list. Hierarchy geometry from the macOS 27 kit Sidebars/Small rows (24pt rows,
   disclosure chevron 11pt Bold tertiary in a 12pt slot, 16pt icon slot at 16, title at 36, 12pt indentation per level);
   text is 13pt Body as in tables. Headings match Table (chosen values marked there). */
.hig-outline-view {
  position: relative; box-sizing: border-box; overflow: auto; font-family: var(--font-sans);
  background: var(--mac-window-background); color: var(--mac-label-primary);
}
.hig-outline-view *, .hig-outline-view *::before, .hig-outline-view *::after { box-sizing: border-box; }
.hig-outline-view__grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; outline: none; }

/* Headings */
.hig-outline-view__heading {
  position: sticky; top: 0; z-index: 1; padding: 0; text-align: start; vertical-align: middle;
  height: var(--target-mac); /* chosen */
  background: var(--mac-window-background); box-shadow: inset 0 -1px var(--mac-separator);
  font-size: 11px; line-height: 14px; letter-spacing: 0.06px; font-weight: 500; color: var(--mac-label-secondary); /* chosen */
}
.hig-outline-view__heading + .hig-outline-view__heading::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--mac-separator);
}
.hig-outline-view__heading--sorted { color: var(--mac-label-primary); }
.hig-outline-view__heading-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-outline-view__heading > .hig-outline-view__heading-label { display: block; padding: 0 8px; }
.hig-outline-view__sort {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; cursor: pointer;
  width: 100%; height: var(--target-mac); padding: 0 8px; display: flex; align-items: center; gap: var(--button-icon-gap);
  font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit;
}
.hig-outline-view__sort:focus-visible { outline-offset: -3px; }
.hig-outline-view__sort:active { background: var(--pressed-overlay); }
.hig-outline-view__cell--trailing .hig-outline-view__sort { flex-direction: row-reverse; }
.hig-outline-view__sort-indicator { flex: none; display: inline-flex; min-width: 12px; color: var(--mac-label-secondary); }
.hig-outline-view__resize { position: absolute; top: 0; right: -4px; z-index: 2; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.hig-outline-view__heading:last-child .hig-outline-view__resize { right: 0; width: 6px; }

/* Cells */
.hig-outline-view__cell {
  height: 24px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--mac-label-secondary);
}
.hig-outline-view__cell--primary { color: var(--mac-label-primary); }
.hig-outline-view__cell--trailing { text-align: end; font-variant-numeric: tabular-nums; }
.hig-outline-view__cell--center { text-align: center; }
.hig-outline-view__primary {
  display: flex; align-items: center; min-width: 0;
  padding-inline-start: calc(var(--hig-outline-level, 0) * 12px); /* kit: each level indents 12pt */
}
.hig-outline-view__disclosure {
  position: relative; flex: none; width: 12px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--mac-label-tertiary);
}
.hig-outline-view__disclosure::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; } /* 20pt hit region */
.hig-outline-view__disclosure .hig-icon { transition: transform 150ms ease; } /* duration chosen */
.hig-outline-view__disclosure--open .hig-icon { transform: rotate(90deg); }
.hig-outline-view__disclosure:dir(rtl) { transform: scaleX(-1); }
.hig-outline-view__icon { flex: none; width: 16px; margin-inline-start: 4px; display: inline-flex; justify-content: center; color: var(--accent); }
.hig-outline-view__label { min-width: 0; margin-inline-start: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rows */
.hig-outline-view__row { cursor: default; outline: none; }
/* Row fills sit on the cells (not the row) so the inset focus ring paints above them. */
.hig-outline-view--alternating .hig-outline-view__row:nth-child(even):not(.hig-outline-view__row--selected) > td { background-color: var(--mac-fill-quaternary); }
.hig-outline-view .hig-outline-view__row.hig-outline-view__row--selected > td { background-color: var(--accent); }
.hig-outline-view__row--selected .hig-outline-view__cell,
.hig-outline-view__row--selected .hig-outline-view__disclosure,
.hig-outline-view__row--selected .hig-outline-view__icon { color: var(--on-accent); }
.hig-outline-view__row:active:not(.hig-outline-view__row--selected) > td { background-image: linear-gradient(var(--pressed-overlay), var(--pressed-overlay)); }
.hig-outline-view__row:focus-visible > td { box-shadow: inset 0 3px var(--focus-ring), inset 0 -3px var(--focus-ring); }
.hig-outline-view__row:focus-visible > td:first-child { box-shadow: inset 3px 0 var(--focus-ring), inset 0 3px var(--focus-ring), inset 0 -3px var(--focus-ring); }
.hig-outline-view__row:focus-visible > td:last-child { box-shadow: inset -3px 0 var(--focus-ring), inset 0 3px var(--focus-ring), inset 0 -3px var(--focus-ring); }
.hig-outline-view__row--selected:focus-visible > td { box-shadow: inset 0 2px var(--on-accent), inset 0 -2px var(--on-accent); }
.hig-outline-view__row--selected:focus-visible > td:first-child { box-shadow: inset 2px 0 var(--on-accent), inset 0 2px var(--on-accent), inset 0 -2px var(--on-accent); }
.hig-outline-view__row--selected:focus-visible > td:last-child { box-shadow: inset -2px 0 var(--on-accent), inset 0 2px var(--on-accent), inset 0 -2px var(--on-accent); }
.hig-outline-view__row--selected:focus-visible > td:only-child,
.hig-outline-view__row:focus-visible > td:only-child { box-shadow: inset 0 0 0 3px var(--focus-ring); }
.hig-outline-view__row--selected:focus-visible > td:only-child { box-shadow: inset 0 0 0 2px var(--on-accent); }

@media (prefers-reduced-motion: reduce) { .hig-outline-view__disclosure .hig-icon { transition: none; } }

/* ---- SplitView ---- */
/* SplitView — HIG Split views (macOS thin divider: one point) with pane widths and edges from the macOS 27 kit windows
   (256pt sidebar, no line at the sidebar edge) and the iOS 27 kit iPad split view (320pt sidebar, 350pt content column,
   0.5pt opaque separator between content and detail). */
.hig-split-view {
  position: relative; display: flex; flex-direction: row; align-items: stretch; box-sizing: border-box;
  min-width: 0; min-height: 0; height: 100%; overflow: hidden;
}
.hig-split-view--ios { background: var(--background-primary); color: var(--label-primary); }
.hig-split-view--mac { background: var(--mac-window-background); color: var(--mac-label-primary); }
.hig-split-view--tv { color: var(--label-primary); }

.hig-split-view__pane {
  position: relative; flex: none; min-width: 0; min-height: 0; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: auto;
}
.hig-split-view__pane--flex { flex: 1 1 0; }
.hig-split-view__pane.is-hidden { display: none !important; }
/* iPadOS sidebar: Liquid Glass (functional layer) running the full height of the column, as in the kit example */
.hig-split-view--ios .hig-split-view__pane--sidebar.hig-glass {
  border-radius: 0; color: var(--label-primary);
  box-shadow: 0.5px 0 0 0 var(--separator); /* glass rim on the trailing edge only */
}
/* macOS sidebar: the kit fills it rgba(250,250,250,.8), which has no token; mac-material-thick is the nearest material (chosen). */
.hig-split-view--mac .hig-split-view__pane--sidebar.hig-material { color: var(--mac-label-primary); }

/* ---- dividers ---- */
.hig-split-view__divider { position: relative; flex: none; z-index: 2; box-sizing: border-box; outline-offset: 2px; touch-action: none; }
.hig-split-view--mac .hig-split-view__divider { width: 1px; background: var(--mac-separator); } /* HIG: thin divider, one point */
.hig-split-view--ios .hig-split-view__divider { width: 0; border-left: 0.5px solid var(--separator-opaque); } /* kit Column 1: 0.5pt opaque separator */
.hig-split-view__divider--plain,
.hig-split-view__divider.is-collapsed { background: transparent !important; border-left-color: transparent !important; } /* kit: no line at the sidebar edge */
/* hit region wider than the visible line: target-mac-min (20) on macOS, target-ios-min (28) on iPad */
.hig-split-view__divider.is-resizable::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--target-mac-min); transform: translateX(-50%); cursor: col-resize;
}
.hig-split-view--ios .hig-split-view__divider.is-resizable::before { width: var(--target-ios-min); }
.hig-split-view__divider:focus-visible { outline: 3px solid var(--focus-ring); }

/* ---- Table ---- */
/* Table — multicolumn table. The macOS 27 kit has no table masters: macOS rows take the kit's 24pt list row
   (Sidebars/Small) with 13pt body text; iPadOS rows take the iOS kit's 52pt list row and Nested header. Cell padding,
   heading height and heading type are chosen (marked). */
.hig-table { position: relative; box-sizing: border-box; overflow: auto; font-family: var(--font-sans); }
.hig-table *, .hig-table *::before, .hig-table *::after { box-sizing: border-box; }
.hig-table--mac { background: var(--mac-window-background); color: var(--mac-label-primary); }
.hig-table--ios { background: var(--background-primary); color: var(--label-primary); }
.hig-table__grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; outline: none; }

/* ---------- Column headings ---------- */
.hig-table__heading {
  position: sticky; top: 0; z-index: 1; padding: 0; text-align: start; font-weight: inherit; vertical-align: middle;
  background: inherit;
}
.hig-table--mac .hig-table__heading {
  height: var(--target-mac); /* chosen: the macOS default control size */
  background: var(--mac-window-background); box-shadow: inset 0 -1px var(--mac-separator);
  font-size: 11px; line-height: 14px; letter-spacing: 0.06px; font-weight: 500; color: var(--mac-label-secondary); /* chosen: Subheadline, Medium */
}
/* Thin dividers between headings (chosen inset) */
.hig-table--mac .hig-table__heading + .hig-table__heading::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--mac-separator);
}
/* iPadOS: the Nested list header style, 42pt (kit Lists/Header/Nested: 17pt Semibold, secondary) */
.hig-table--ios .hig-table__heading {
  height: 42px; background: var(--background-primary); box-shadow: inset 0 -1px var(--separator);
  font-size: 17px; line-height: 22px; letter-spacing: -0.43px; font-weight: 600; color: var(--label-secondary);
}
.hig-table__heading-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-table__heading > .hig-table__heading-label { display: block; padding: 0 8px; }
.hig-table__sort {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; cursor: pointer;
  width: 100%; height: 100%; min-height: inherit; padding: 0 8px; display: flex; align-items: center;
  gap: var(--button-icon-gap); font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit;
}
.hig-table--mac .hig-table__sort { height: var(--target-mac); }
.hig-table--ios .hig-table__sort { height: 42px; }
.hig-table__sort:focus-visible { outline-offset: -3px; }
.hig-table__sort:active { background: var(--pressed-overlay); }
.hig-table__heading--sorted { color: var(--mac-label-primary); }
.hig-table--ios .hig-table__heading--sorted { color: var(--label-primary); }
.hig-table__cell--trailing .hig-table__sort { flex-direction: row-reverse; }
.hig-table__cell--center .hig-table__sort { justify-content: center; }
.hig-table__sort-indicator { flex: none; display: inline-flex; min-width: 12px; color: var(--mac-label-secondary); }
.hig-table--ios .hig-table__sort-indicator { min-width: 16px; color: var(--accent); }
/* Resize handle on the trailing edge of each heading */
.hig-table__resize { position: absolute; top: 0; right: -4px; z-index: 2; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.hig-table__heading:last-child .hig-table__resize { right: 0; width: 6px; }

/* ---------- Cells ---------- */
.hig-table__cell { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.hig-table__cell--leading { text-align: start; }
.hig-table__cell--trailing { text-align: end; font-variant-numeric: tabular-nums; }
.hig-table__cell--center { text-align: center; }
.hig-table--mac .hig-table__cell { height: 24px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; } /* kit 24pt rows, Body */
.hig-table--ios .hig-table__cell {
  height: var(--row-height); font-size: 17px; line-height: 22px; letter-spacing: -0.43px;
  box-shadow: inset 0 -1px var(--separator);
}
/* iPadOS rows: separators start at the 16pt content margin, as list rows */
.hig-table--ios .hig-table__cell:first-child,
.hig-table--ios .hig-table__heading:first-child > * { padding-left: var(--margin-compact); }
.hig-table--ios .hig-table__cell:last-child,
.hig-table--ios .hig-table__heading:last-child > * { padding-right: var(--margin-compact); }
.hig-table--ios .hig-table__cell:first-child {
  box-shadow: none;
  background-image: linear-gradient(var(--separator), var(--separator)); background-repeat: no-repeat;
  background-position: right bottom; background-size: calc(100% - var(--margin-compact)) 1px;
}
.hig-table--ios .hig-table__row:last-child .hig-table__cell { box-shadow: none; background-image: none; }

/* Row fills sit on the cells (not the row) so the inset focus ring paints above them. */
.hig-table__row { cursor: default; outline: none; }
/* Alternating row backgrounds (HIG: bordered style) */
.hig-table--alternating.hig-table--mac .hig-table__row:nth-child(even):not(.hig-table__row--selected) > .hig-table__cell { background-color: var(--mac-fill-quaternary); }
.hig-table--alternating.hig-table--ios .hig-table__row:nth-child(even):not(.hig-table__row--selected) > .hig-table__cell { background-color: var(--fill-quaternary); }
/* Selection: accent with on-accent text */
.hig-table .hig-table__row--selected { color: var(--on-accent); }
.hig-table .hig-table__row.hig-table__row--selected > .hig-table__cell { box-shadow: none; background-color: var(--accent); background-image: none; }
.hig-table__row:active:not(.hig-table__row--selected) > .hig-table__cell { background-image: linear-gradient(var(--pressed-overlay), var(--pressed-overlay)); }
/* Keyboard focus: a 3pt focus ring inside the row (on accent rows, an on-accent ring inside it) */
.hig-table .hig-table__row:focus-visible > .hig-table__cell { box-shadow: inset 0 3px var(--focus-ring), inset 0 -3px var(--focus-ring); }
.hig-table .hig-table__row:focus-visible > .hig-table__cell:first-child { box-shadow: inset 3px 0 var(--focus-ring), inset 0 3px var(--focus-ring), inset 0 -3px var(--focus-ring); }
.hig-table .hig-table__row:focus-visible > .hig-table__cell:last-child { box-shadow: inset -3px 0 var(--focus-ring), inset 0 3px var(--focus-ring), inset 0 -3px var(--focus-ring); }
.hig-table .hig-table__row.hig-table__row--selected:focus-visible > .hig-table__cell { box-shadow: inset 0 2px var(--on-accent), inset 0 -2px var(--on-accent); }
.hig-table .hig-table__row.hig-table__row--selected:focus-visible > .hig-table__cell:first-child { box-shadow: inset 2px 0 var(--on-accent), inset 0 2px var(--on-accent), inset 0 -2px var(--on-accent); }
.hig-table .hig-table__row.hig-table__row--selected:focus-visible > .hig-table__cell:last-child { box-shadow: inset -2px 0 var(--on-accent), inset 0 2px var(--on-accent), inset 0 -2px var(--on-accent); }
.hig-table__empty > td { height: 48px; text-align: center; color: var(--mac-label-tertiary); }
.hig-table--ios .hig-table__empty > td { color: var(--label-tertiary); }

/* ---- TabView ---- */
/* TabView — HIG Tab views. macOS tab strip uses the macOS 27 kit Segmented Controls (Content Area, 3 Rg) metrics;
   the content area uses the kit Group Boxes style. watchOS uses the watchOS 26 kit Vertically Tabbed Digital Crown
   Indicator (46mm). */

/* ---------- macOS ---------- */
.hig-tab-view--mac { display: flex; flex-direction: column; min-width: 0; color: var(--mac-label-primary); }

/* The tabbed control is centered on the top edge of the content area (HIG), straddling it by half its height.
   Track: Fills/2 Secondary over the window background (kept opaque so the box edge doesn't show through),
   24pt tall (mac-control-regular), 6pt corners (radius-mac-regular). */
.hig-tab-view__tabs {
  position: relative; z-index: 1; align-self: center; display: inline-flex; max-width: 100%;
  height: var(--mac-control-regular); border-radius: var(--radius-mac-regular);
  background: linear-gradient(var(--mac-fill-secondary), var(--mac-fill-secondary)), var(--mac-window-background);
  margin-bottom: calc(var(--mac-control-regular) / -2);
}
/* Segment: 13pt Medium label, 16pt line, 10pt minimum margins (kit Margins/Trio - 3 Rg), Labels/1 Primary. */
.hig-tab-view__tab {
  -webkit-appearance: none; appearance: none; margin: 0; border: 0; background: transparent; color: inherit;
  height: 100%; padding: 0 10px; border-radius: var(--radius-mac-regular); white-space: nowrap; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: -0.08px;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
/* Separators: 1x14 at y=5 between unselected segments (kit Separator/On). The kit draws them in the vibrant
   quinary label with plus-darker; the non-vibrant separator token renders the same contrast in CSS. */
.hig-tab-view__tab + .hig-tab-view__tab::before {
  content: ""; position: absolute; left: -0.5px; top: 5px; width: 1px; height: 14px; border-radius: 1px;
  background: var(--separator); pointer-events: none;
}
.hig-tab-view__tab--selected::before,
.hig-tab-view__tab--selected + .hig-tab-view__tab::before { display: none; }
/* Selected segment: accent fill, white label (kit On, 1 - Idle). Pressed adds the 8% overlay (hig-pressable),
   which over the 8% track matches the kit's 16% Clicked fill. */
.hig-tab-view__tab--selected { background: var(--accent); color: var(--on-accent); }
.hig-tab-view__tab:disabled { color: var(--mac-label-tertiary); cursor: default; }

/* Content area: group-box styling (12pt corners, Fills/4 Quaternary). Content inset 10pt / 12pt (kit Forms);
   the top inset adds half the tab strip so content starts below it. */
.hig-tab-view--mac > .hig-tab-view__panel {
  flex: 1 1 auto; min-height: 0; box-sizing: border-box; border-radius: var(--radius-mac-menu);
  padding: calc(var(--mac-control-regular) / 2 + 12px) 10px 12px;
}
.hig-tab-view--bezeled > .hig-tab-view__panel { background: var(--mac-fill-quaternary); }
.hig-tab-view--line > .hig-tab-view__panel { box-shadow: inset 0 0 0 1px var(--mac-separator); }
.hig-tab-view--borderless > .hig-tab-view__panel { border-radius: 0; }
.hig-tab-view--hidden-tabs > .hig-tab-view__panel { padding-top: 12px; }
.hig-tab-view__panel[hidden] { display: none; }

/* ---------- watchOS: vertical pages, page control next to the Digital Crown ---------- */
/* The watch screen is always dark (the component sets data-theme="dark"); 46mm screen 208x248 (kit).
   Corners: the kit's 46mm display mask (Hardware / 46mm / Button Indicator 'Mask') is a continuous curve that passes
   through (14.85, 14.85) on the corner diagonal; the circular radius through that point is 14.85 / (1 - 1/sqrt 2) = 50.7.
   A hairline `separator` ring keeps the black screen's edge visible on a black page. */
.hig-tab-view--watch {
  position: relative; width: 208px; height: 248px; overflow: hidden; box-sizing: border-box; border-radius: 50.7px;
  background: var(--background-primary); color: var(--label-primary); box-shadow: 0 0 0 1px var(--separator);
}
/* Page content inside the kit 46mm text safe area (15pt sides, 18pt top). */
.hig-tab-view--watch > .hig-tab-view__panel {
  position: absolute; inset: 0; box-sizing: border-box; overflow-y: auto; padding: 18px 15px;
  scrollbar-width: none;
}
.hig-tab-view--watch > .hig-tab-view__panel::-webkit-scrollbar { display: none; }
.hig-tab-view--watch > .hig-tab-view__panel:focus-visible { outline-offset: -3px; }
/* Indicator column: 10pt at the trailing edge, centered on the crown (kit 46mm crown area y=45, 46pt tall);
   6pt dots on an 8pt pitch; current dot white, others white at 35%. */
.hig-tab-view__dots {
  position: absolute; top: 45px; right: 0; width: 10px; height: 46px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
/* The dots indicate; they aren't tap targets on watchOS (people swipe or turn the Digital Crown), so they take no
   pointer input and stay out of the tab order — the page itself pages (see TabView.jsx). */
.hig-tab-view__dot {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; padding: 0; border: 0; pointer-events: none;
  width: 6px; height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--label-primary) 35%, transparent);
  transition: height 200ms ease; /* duration chosen; the HIG gives none */
}
.hig-tab-view__dot.hig-tab-view__tab--selected { background: var(--label-primary); }
@media (prefers-reduced-motion: reduce) { .hig-tab-view__dot { transition: none; } }

/* ---- Chart ---- */
/* Chart — Swift Charts-style marks (HIG Charts, Charting data). Neither the HIG nor the UI kits give chart metrics;
   values chosen here are listed in Chart.jsx and the README. Axis text is label-secondary at the iOS Caption 2 size
   (macOS Caption 1), axis titles at Footnote (macOS Subheadline); grid lines are the separator hairline. */
.hig-chart {
  margin: 0; min-width: 0; font-family: var(--font-sans); color: var(--label-primary);
  /* Surface behind the plot: rings around symbols use it. Set it to the chart's real background when not on background-primary. */
  --hig-chart-surface: var(--background-primary);
}
.hig-chart--mac { color: var(--mac-label-primary); --hig-chart-surface: var(--mac-window-background); }
.hig-chart__header { margin-bottom: 8px; } /* chosen */
.hig-chart__title { color: var(--label-primary); }
.hig-chart__subtitle { color: var(--label-secondary); }
.hig-chart--mac .hig-chart__title { color: var(--mac-label-primary); }
.hig-chart--mac .hig-chart__subtitle { color: var(--mac-label-secondary); }

.hig-chart__area { position: relative; width: 100%; touch-action: pan-y; -webkit-tap-highlight-color: transparent; border-radius: var(--radius-sm); }
.hig-chart__svg { display: block; overflow: visible; }

/* Axis value labels: iOS Caption 2 (11/13, +0.06) · macOS Caption 1 (10/13, +0.12), from tokens.json */
.hig-chart__tick { fill: var(--label-secondary); font-size: 11px; letter-spacing: 0.06px; font-variant-numeric: tabular-nums; }
.hig-chart--mac .hig-chart__tick { fill: var(--mac-label-secondary); font-size: 10px; letter-spacing: 0.12px; }
/* Axis titles: iOS Footnote (13/18, −0.08) · macOS Subheadline (11/14, +0.06) */
.hig-chart__axis-title { fill: var(--label-secondary); font-size: 13px; letter-spacing: -0.08px; }
.hig-chart--mac .hig-chart__axis-title { fill: var(--mac-label-secondary); font-size: 11px; letter-spacing: 0.06px; }

.hig-chart__grid { stroke: var(--separator); stroke-width: 1; }
/* Selection rule: a recessive vertical line at the selected X (label-tertiary chosen). */
.hig-chart__rule { stroke: var(--label-tertiary); stroke-width: 1; }
.hig-chart--mac .hig-chart__rule { stroke: var(--mac-label-tertiary); }
/* Area fill: the series color as a 20% wash under its 2px line (chosen). */
.hig-chart__area-fill { fill-opacity: 0.2; }
.hig-chart__ringed { stroke: var(--hig-chart-surface); paint-order: stroke; }
.hig-chart__ring { stroke: var(--hig-chart-surface); }

/* Selection callout (content layer, so no glass): background-secondary platter with a separator hairline,
   radius-sm; 6/8px padding chosen. Values lead (Subheadline Semibold), labels follow (Caption 1, secondary). */
.hig-chart__callout {
  position: absolute; z-index: 1; pointer-events: none; box-sizing: border-box; white-space: nowrap;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--background-secondary); box-shadow: inset 0 0 0 0.5px var(--separator);
}
.hig-chart__callout-x { color: var(--label-secondary); }
.hig-chart__callout-row { display: flex; align-items: center; gap: 4px; }
.hig-chart__callout-value { color: var(--label-primary); font-variant-numeric: tabular-nums; }
.hig-chart__callout-unit { color: var(--label-secondary); }
.hig-chart--mac .hig-chart__callout-x,
.hig-chart--mac .hig-chart__callout-unit { color: var(--mac-label-secondary); }
.hig-chart--mac .hig-chart__callout-value { color: var(--mac-label-primary); }

/* Legend: below the plot, leading-aligned; 4px swatch gap and 12px item gap chosen. Text never wears the series color. */
.hig-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; color: var(--label-secondary); }
.hig-chart--mac .hig-chart__legend { color: var(--mac-label-secondary); }
.hig-chart__legend-item { display: inline-flex; align-items: center; gap: 4px; }
.hig-chart__swatch { display: block; flex: none; overflow: visible; }

/* ---- ImageView ---- */
/* ImageView — HIG Image views. Content images get rounded corners from a radius token (default radius-thumbnail,
   the kit's thumbnail corner); the background is transparent unless `background` names a color token. */
.hig-image-view {
  position: relative; display: inline-block; vertical-align: top; overflow: hidden;
  box-sizing: border-box; max-width: 100%; flex: none;
}
.hig-image-view--natural { line-height: 0; }
.hig-image-view__img { display: block; width: 100%; -webkit-user-select: none; user-select: none; }
.hig-image-view--natural .hig-image-view__img { height: auto; }
.hig-image-view--boxed .hig-image-view__img { position: absolute; inset: 0; height: 100%; }
/* With no image and no aspect ratio there is nothing to size the box; show a square placeholder. */
.hig-image-view--natural.hig-image-view--empty { aspect-ratio: 1; }

/* Placeholder: a large-shape fill (fill-tertiary) with a photo symbol in placeholder-level label color.
   The symbol is a third of the box, at most 48px — proportions chosen here, not given by the HIG or kits. */
.hig-image-view__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--fill-tertiary); color: var(--label-tertiary);
}
.hig-image-view__placeholder > svg { width: min(33%, 48px); height: auto; aspect-ratio: 1; }
.hig-image-view--natural:not(.hig-image-view--empty) .hig-image-view__placeholder { position: absolute; }

/* Symbolic image: an interface icon tinted with a color token (default accent); no frame of its own. */
.hig-image-view--symbol { display: inline-flex; align-items: center; justify-content: center; overflow: visible; line-height: 0; }

/* ---- TextView ---- */
/* TextView — HIG Text views: leading-aligned text in the system label color, scrolling when it overflows.
   Type metrics come from the type-style class (textStyle); nothing here sets the font size. */
.hig-text-view {
  display: block; width: 100%; box-sizing: border-box; margin: 0; border: 0; border-radius: 0;
  -webkit-appearance: none; appearance: none; resize: none; background: transparent;
  color: var(--label-primary); text-align: start; white-space: pre-wrap; overflow-wrap: break-word;
  overflow: auto; caret-color: var(--accent); /* kit Text Fields/Cursor: system blue */
  padding: var(--hig-text-view-py, 0px) var(--hig-text-view-px, 0px);
}
.hig-text-view::placeholder { color: var(--placeholder-text); opacity: 1; }
.hig-text-view--readonly { cursor: text; }
.hig-text-view--unselectable { -webkit-user-select: none; user-select: none; cursor: default; }
/* `rows` sets the visible height in lines of the text style; more content scrolls. */
.hig-text-view--rows {
  height: calc(var(--hig-text-view-rows) * 1.3em + 2 * var(--hig-text-view-py, 0px));
  height: calc(var(--hig-text-view-rows) * 1lh + 2 * var(--hig-text-view-py, 0px));
}

/* ---- iOS / iPadOS / visionOS bordered (the default when editable): an input well in fill-tertiary
   (tertiarySystemFill: "input wells"), radius-group corners (kit grouped inputs), text inset 16pt
   horizontally and 15pt vertically (kit Lists/Rows/Default and Text Fields: text at x=16, y=15). */
.hig-text-view--bordered:not(.hig-text-view--mac) {
  --hig-text-view-py: 15px; --hig-text-view-px: var(--margin-compact);
  background: var(--fill-tertiary); border-radius: var(--radius-group);
}
.hig-text-view--disabled { color: var(--label-tertiary); cursor: default; }
.hig-text-view--bordered.hig-text-view--disabled:not(.hig-text-view--mac) { background: var(--fill-quaternary); }

/* ---- macOS: kit Text Fields/3 Rg — window-background field, 1pt outside border in Fills/3 Tertiary,
   6pt corners (radius-mac-regular), text inset 6pt; 4pt top and bottom (16pt line in the 24pt field). */
.hig-text-view--mac { color: var(--mac-label-primary); }
.hig-text-view--mac::placeholder { color: var(--mac-label-tertiary); }
.hig-text-view--mac.hig-text-view--bordered {
  --hig-text-view-py: 4px; --hig-text-view-px: 6px;
  background: var(--mac-window-background); border-radius: var(--radius-mac-regular);
  box-shadow: 0 0 0 1px var(--mac-fill-tertiary);
}
.hig-text-view--mac.hig-text-view--disabled { color: var(--mac-label-tertiary); }
.hig-text-view--mac.hig-text-view--bordered.hig-text-view--disabled { background: var(--mac-fill-quaternary); }
/* kit Input Fields/03 - Focus Ring: 3.5pt accent outside + 1pt inside, layer at 50% opacity. */
.hig-text-view--mac.hig-text-view--bordered.hig-focus:focus-visible {
  outline: 3.5px solid color-mix(in srgb, var(--focus-ring) 50%, transparent); outline-offset: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent);
}

/* ---- tvOS: display only. */
.hig-text-view--tv { color: var(--label-primary); }

/* ---- Gauge ---- */
/* Gauge — accessory gauges from the iOS 27 kit (System/Lock Screen Widgets: Circular Open Gauge 2, Circular Closed
   Gauge, Rectangular Text Gauge); macOS level indicators per the HIG Gauges page.
   The Lock Screen kit draws in vibrant labels (gauge track Vibrant/3 Tertiary, fill and text Vibrant/2 Secondary);
   in app content the same roles map to label-tertiary / label-secondary. Current values use label-primary. */
.hig-gauge { font-family: var(--font-sans); box-sizing: border-box; color: var(--label-secondary); }
.hig-gauge--mac { color: var(--mac-label-secondary); }

/* ---- Circular (58pt dial) */
.hig-gauge--circular { position: relative; display: inline-block; vertical-align: middle; width: 58px; height: 58px; flex: none; }
.hig-gauge__dial { position: absolute; inset: 0; display: block; overflow: visible; }
.hig-gauge__track { stroke: var(--label-tertiary); }
.hig-gauge__fill { stroke: var(--label-secondary); }
.hig-gauge__dot { fill: var(--label-secondary); }
.hig-gauge--tinted .hig-gauge__dot { fill: var(--label-primary); }
.hig-gauge--mac .hig-gauge__track { stroke: var(--mac-label-tertiary); }
.hig-gauge--mac .hig-gauge__fill { stroke: var(--mac-label-secondary); }
.hig-gauge--mac .hig-gauge__dot { fill: var(--mac-label-secondary); }
.hig-gauge--mac.hig-gauge--tinted .hig-gauge__dot { fill: var(--mac-label-primary); }
.hig-gauge__value,
.hig-gauge__min,
.hig-gauge__max,
.hig-gauge__caption { position: absolute; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
/* Standard (open) gauge: current value 24.52pt Medium in a 29pt box at y 12.5; ends 12.26pt Medium in 15pt boxes at
   y 43, centred 17.5pt in from each side (kit Circular Open Gauge 2; the kit's right centre is 40, mirrored to 40.5). */
.hig-gauge--circular .hig-gauge__value {
  left: 0; right: 0; top: 12.5px; height: 29px; line-height: 29px;
  font-size: 24.52px; font-weight: 500; color: var(--label-primary);
}
.hig-gauge--mac.hig-gauge--circular .hig-gauge__value { color: var(--mac-label-primary); }
.hig-gauge__min, .hig-gauge__max, .hig-gauge__caption { top: 43px; height: 15px; line-height: 15px; font-size: 12.26px; font-weight: 500; }
.hig-gauge__min { left: 17.5px; transform: translateX(-50%); }
.hig-gauge__max { right: 17.5px; transform: translateX(50%); }
.hig-gauge__caption { left: 0; right: 0; } /* kit Circular Open Gauge 3: "AQI" centred in the gap */
/* Capacity (closed) gauge: centre value 17pt Regular, 24pt line (kit Circular Open Gauge "35" label). */
.hig-gauge--circular.hig-gauge--style-capacity .hig-gauge__value { top: 17px; height: 24px; line-height: 24px; font-size: 17px; font-weight: 400; }

/* ---- Linear (kit Rectangular Text Gauge: title 15/20 Semibold, second line 15/16 Regular, 6pt gap, 8pt capsule bar) */
.hig-gauge--linear { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.hig-gauge__header { display: flex; flex-direction: column; }
.hig-gauge__name { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.23px; color: var(--label-primary); }
.hig-gauge__current { font-size: 15px; line-height: 16px; font-weight: 400; letter-spacing: -0.23px; }
.hig-gauge--mac .hig-gauge__name { color: var(--mac-label-primary); }
/* Endpoint labels sit inline at the ends of the bar: 12.26pt Medium as on the circular gauge; the 6pt gap repeats
   the kit's text-to-bar gap (the kit's linear gauge shows no endpoint labels). */
.hig-gauge__row { display: flex; align-items: center; gap: 6px; }
.hig-gauge__end { flex: none; font-size: 12.26px; line-height: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hig-gauge__bar { position: relative; flex: 1; min-width: 0; height: 8px; border-radius: var(--radius-capsule); }
.hig-gauge__bar-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--label-secondary); }
.hig-gauge--mac .hig-gauge__bar-fill { background: var(--mac-label-secondary); }
/* capacity: translucent track, fill clipped at the value */
.hig-gauge--style-capacity .hig-gauge__bar { background: var(--label-tertiary); }
.hig-gauge--mac.hig-gauge--style-capacity .hig-gauge__bar { background: var(--mac-label-tertiary); }
.hig-gauge--linear.hig-gauge--style-capacity .hig-gauge__bar-fill {
  clip-path: inset(0 calc((1 - var(--hig-gauge-f)) * 100%) 0 0 round 4px);
}
.hig-gauge--linear.hig-gauge--style-capacity:dir(rtl) .hig-gauge__bar-fill {
  clip-path: inset(0 0 0 calc((1 - var(--hig-gauge-f)) * 100%) round 4px);
}
/* standard: the whole path in the tint, an 8pt indicator dot with a 2.2pt cut-out around it
   (the cut-out gap of kit Circular Open Gauge: (9.9 − 5.5) / 2). Masks carry alpha only; the opaque accent token stands in for "opaque". */
.hig-gauge--linear.hig-gauge--style-standard .hig-gauge__bar-fill { background: var(--label-tertiary); }
.hig-gauge--mac.hig-gauge--linear.hig-gauge--style-standard .hig-gauge__bar-fill { background: var(--mac-label-tertiary); }
.hig-gauge--linear.hig-gauge--style-standard .hig-gauge__bar-fill {
  --hig-gauge-x: calc(4px + (100% - 8px) * var(--hig-gauge-f));
  -webkit-mask-image: radial-gradient(circle at var(--hig-gauge-x) 50%, transparent 6.2px, var(--accent) 6.25px);
  mask-image: radial-gradient(circle at var(--hig-gauge-x) 50%, transparent 6.2px, var(--accent) 6.25px);
}
.hig-gauge--linear.hig-gauge--style-standard:dir(rtl) .hig-gauge__bar-fill {
  --hig-gauge-x: calc(100% - 4px - (100% - 8px) * var(--hig-gauge-f));
}
.hig-gauge__bar-dot {
  position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%;
  inset-inline-start: calc((100% - 8px) * var(--hig-gauge-f)); background: var(--label-secondary);
}
.hig-gauge--tinted .hig-gauge__bar-dot { background: var(--label-primary); }
.hig-gauge--mac .hig-gauge__bar-dot { background: var(--mac-label-secondary); }
.hig-gauge--mac.hig-gauge--tinted .hig-gauge__bar-dot { background: var(--mac-label-primary); }

/* ---- macOS level indicators. The macOS 27 kit has no level indicator; the continuous track reuses the kit's
   regular progress bar (10pt capsule, --mac-track track, 0.5pt --mac-track-border border).
   Default fill system-green (HIG), system-yellow / system-red past the thresholds. */
.hig-gauge--capacity,
.hig-gauge--levelDiscrete,
.hig-gauge--relevance { display: flex; align-items: center; gap: 6px; width: 100%; }
.hig-gauge__level {
  position: relative; flex: 1; min-width: 0; height: 10px; border-radius: var(--radius-capsule);
  background: var(--mac-track); box-shadow: inset 0 0 0 0.5px var(--mac-track-border);
}
.hig-gauge__level-fill {
  position: absolute; inset: 0; border-radius: inherit;
  clip-path: inset(0 calc((1 - var(--hig-gauge-f)) * 100%) 0 0 round 5px);
}
.hig-gauge--capacity:dir(rtl) .hig-gauge__level-fill { clip-path: inset(0 0 0 calc((1 - var(--hig-gauge-f)) * 100%) round 5px); }
/* Discrete: equal rectangular segments, one per unit of capacity. Segment gap (2px) and corner (radius-xs) are
   chosen — the HIG shows the style but gives no metrics. */
.hig-gauge__segments { display: flex; flex: 1; min-width: 0; gap: 2px; height: 10px; }
.hig-gauge__segment {
  flex: 1; min-width: 0; border-radius: var(--radius-xs);
  background: var(--mac-track); box-shadow: inset 0 0 0 0.5px var(--mac-track-border);
}
.hig-gauge__segment--on { box-shadow: none; }
/* Relevance: a shaded bar with no track (HIG). Height 6pt (the kit's small progress bar) and mac-gray are chosen. */
.hig-gauge__relevance { position: relative; flex: 1; min-width: 0; height: 6px; }
.hig-gauge__relevance-fill { display: block; height: 100%; background: var(--mac-gray); }

/* ---- ProgressIndicator ---- */
/* ProgressIndicator — geometry from the iOS 27 and macOS 27 UI kits (Progress Indicators pages). */
.hig-progress { font-family: var(--font-sans); box-sizing: border-box; }
.hig-progress--spinner,
.hig-progress--circular { display: inline-flex; align-items: center; vertical-align: middle; }
.hig-progress--bar { display: flex; flex-direction: column; align-items: stretch; width: 100%; }

/* ---- Spinner (activity indicator): 8 capsule spokes, stepping clockwise.
   Timing (8 steps per 1s revolution) matches the Button loading spinner; the kits are static. */
.hig-progress__spinner { flex: none; display: block; animation: hig-progress-spin 1s steps(8) infinite; }
.hig-progress--ios .hig-progress__spinner { color: var(--label-secondary); } /* kit: Labels/2 Secondary */
.hig-progress--mac .hig-progress__spinner { color: var(--label-primary); }  /* kit: black (light) / white (dark) spokes at 6–55% */
.hig-progress__spinner--small { width: var(--spinner-small); height: var(--spinner-small); }
.hig-progress__spinner--regular { width: var(--spinner-regular); height: var(--spinner-regular); }
.hig-progress__spinner--large { width: var(--spinner-large); height: var(--spinner-large); }
.hig-progress__spinner--mac-small { width: 16px; height: 16px; }   /* kit Circular/Indeterminate/2 Sm */
.hig-progress__spinner--mac-regular { width: 32px; height: 32px; } /* kit Circular/Indeterminate/3 Rg */
@keyframes hig-progress-spin { to { transform: rotate(360deg); } }

/* iOS spinner with a label (kit "Indeterminate Spinner with Label", 402×62): a centred row,
   20pt spinner, 8pt gap, Body 17/22 in label-secondary, 20pt above and below, 5pt at the sides. */
.hig-progress--ios.hig-progress--spinner.hig-progress--labeled {
  display: flex; justify-content: center; gap: 8px; padding: 20px 5px;
}
.hig-progress__label { color: var(--label-secondary); }
.hig-progress--mac .hig-progress__label { color: var(--mac-label-secondary); }
/* Circular determinate with a label: label on the trailing side, same 8pt gap as the kit spinner row. */
.hig-progress--circular.hig-progress--labeled { gap: 8px; }
/* Bar with a label: the label sits above the track. The 8pt gap reuses the kit's spinner-to-label gap (no bar label in the kits). */
.hig-progress--bar.hig-progress--labeled { gap: 8px; }

/* ---- Circular determinate (macOS kit geometry: 16 / 32pt, 5pt ring, accent fill, round end caps) */
.hig-progress__ring { flex: none; display: block; }
.hig-progress__ring-fill { stroke: var(--accent); }
.hig-progress--ios .hig-progress__ring-track { stroke: var(--fill-primary); }
/* kit track: --mac-track */
.hig-progress--mac .hig-progress__ring-track { stroke: var(--mac-track); }

/* ---- Bar */
.hig-progress__track {
  position: relative; display: block; overflow: hidden; width: 100%;
  border-radius: var(--radius-capsule);
}
.hig-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
/* iOS (kit Table View Row): 4pt capsule track in Fills/1 Primary, System Blue fill. */
.hig-progress--ios .hig-progress__track { height: 4px; background: var(--fill-primary); }
/* macOS (kit Content Area/Linear): 6pt (2 Sm) or 10pt (3 Rg) capsule, 140pt default width in the kit.
   Track: rgba(0,0,0,0.06) + 0.5pt rgba(0,0,0,0.07) border; tokens --mac-track / --mac-track-border. */
.hig-progress--mac .hig-progress__track {
  background: var(--mac-track); box-shadow: inset 0 0 0 0.5px var(--mac-track-border);
}
.hig-progress--mac .hig-progress__track--small { height: 6px; }
.hig-progress--mac .hig-progress__track--regular { height: 10px; }
/* At 0% the kit still shows a cap: 8×6 (small) and 10×10 (regular). */
.hig-progress--mac .hig-progress__track--small .hig-progress__fill { min-width: 8px; }
.hig-progress--mac .hig-progress__track--regular .hig-progress__fill { min-width: 10px; }

/* macOS indeterminate bar (kit Linear/Indeterminate): a bar 60% of the track (84 of 140pt), solid at its
   trailing end and fading to transparent toward its leading end (alpha mask from 100% to 4.67% of its width),
   sweeping leading → trailing. Mask colors only carry alpha; the accent token stands in for "opaque".
   The 1.4s sweep is not in the kit (static), chosen to match the spinner's pace. */
.hig-progress__fill--indeterminate {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 60%; min-width: 0 !important;
  -webkit-mask-image: linear-gradient(to right, transparent 4.67%, var(--accent));
  mask-image: linear-gradient(to right, transparent 4.67%, var(--accent));
  animation: hig-progress-sweep 1.4s linear infinite;
}
@keyframes hig-progress-sweep { from { left: -60%; } to { left: 100%; } }
.hig-progress:dir(rtl) .hig-progress__fill--indeterminate {
  -webkit-mask-image: linear-gradient(to left, transparent 4.67%, var(--accent));
  mask-image: linear-gradient(to left, transparent 4.67%, var(--accent));
  animation-name: hig-progress-sweep-rtl;
}
@keyframes hig-progress-sweep-rtl { from { left: 100%; } to { left: -60%; } }

/* Reduced motion: keep the indicators moving (HIG: a stationary indicator reads as stalled), but slower. */
@media (prefers-reduced-motion: reduce) {
  .hig-progress__spinner { animation-duration: 2s; }
  .hig-progress__fill--indeterminate { animation-duration: 2.8s; }
}

/* ---- RatingIndicator ---- */
/* RatingIndicator — macOS level indicator, rating style (HIG Rating indicators). The macOS 27 kit has no rating
   indicator; symbol sizes are chosen to match adjacent mac text (see RatingIndicator.jsx), colors are mac label tokens. */
.hig-rating {
  position: relative; display: inline-flex; align-items: center; vertical-align: middle;
  gap: 0; /* constant spacing: the glyph boxes abut; the star's own side bearings give the space between symbols */
  color: var(--mac-label-tertiary); /* empty symbols */
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  border-radius: var(--radius-mac-small);
}
.hig-rating__symbol { display: block; flex: none; }
.hig-rating__symbol--filled { color: var(--mac-label-primary); }
.hig-rating--editable { cursor: default; touch-action: none; }
/* Hover preview of the rating a click would set (editable only). */
.hig-rating--previewing .hig-rating__symbol--filled { color: var(--mac-label-secondary); }
/* A 28pt-tall hit region (target-mac) around the visible row; the glyphs keep their size. */
.hig-rating--editable::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: max(100%, var(--target-mac)); transform: translateY(-50%);
}
.hig-rating--disabled { color: var(--mac-label-quaternary); }
.hig-rating--disabled .hig-rating__symbol--filled { color: var(--mac-label-tertiary); }

/* ---- Complication ---- */
/* Complication — frame and image sizes from the HIG Complications Specifications tables (set inline per family and
   case size); gauge geometry from the watchOS 26 kit Graphical Circular masters. The frame is scoped to the dark
   token set: watch faces are dark. */
.hig-complication {
  /* Complications use SF Compact Rounded (HIG). Local stack: the compact rounded face where installed, the rounded
     system face (--font-rounded), then --font-compact. */
  font-family: "SF Compact Rounded", var(--font-rounded), var(--font-compact);
  font-weight: 500; /* HIG default SwiftUI text: Rounded, Medium */
  position: relative; display: inline-grid; place-items: center; vertical-align: top; box-sizing: border-box;
  color: var(--label-primary); line-height: 1.15;
  --hig-cx-accent: var(--hig-cx-app, var(--accent));
}
.hig-complication *, .hig-complication *::before, .hig-complication *::after { box-sizing: border-box; }
/* the black watch-face ground, extending past the region by the kit face margins (set per watch size in the JSX) */
.hig-complication--ground { background: var(--background-primary); padding: var(--hig-cx-face-y, 0) var(--hig-cx-face-x, 0); }
/* the HIG region (frame size set inline); layouts position against it */
.hig-complication__region { position: relative; display: grid; place-items: inherit; }
.hig-complication--unavailable { display: inline-block; padding: 6px 10px; font-size: 13px; color: var(--label-secondary); }

/* the system's circular mask on circular, extra-large, gauge and corner images (HIG) */
.hig-complication__disc { position: relative; display: grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none; }
.hig-complication__disc--plain { overflow: visible; }
.hig-complication__disc--square { border-radius: var(--radius-xs); }
.hig-complication--corner .hig-complication__disc { position: absolute; }
.hig-complication__disc > .hig-complication__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hig-complication__image {
  width: 100%; height: 100%; display: grid; place-items: center; text-align: center; border-radius: 50%;
  background: var(--hig-cx-accent); color: var(--label-primary); /* kit Graphical Circular/Image: a colored disc, white glyph */
}
.hig-complication--circularSmall .hig-complication__image,
.hig-complication--modularSmall .hig-complication__image,
.hig-complication--extraLarge .hig-complication__image { background: none; color: var(--hig-cx-accent); }

/* gauges: track fill-primary, value in the accent; kit ring thickness 4.5 of 47 */
.hig-complication__track { stroke: var(--fill-primary); }
.hig-complication__value { stroke: var(--hig-cx-accent); }
.hig-complication__indicator { fill: var(--label-primary); stroke: var(--background-primary); } /* kit Current Value Indicator, 1.5pt outline */
.hig-complication__gauge-text { position: relative; font-weight: 600; font-variant-numeric: tabular-nums; transform: translateY(-5.3%); } /* kit value text 2.5pt above center in 47 */
.hig-complication__open-image { position: absolute; left: 50%; bottom: 3.2%; transform: translateX(-50%); display: grid; place-items: center; color: var(--hig-cx-accent); } /* kit Image 1.5pt from the bottom in 47 */
.hig-complication__closed-image { position: relative; display: grid; place-items: center; border-radius: 50%; overflow: hidden; color: var(--label-primary); text-align: center; }
.hig-complication__closed-image .hig-complication__gauge-text { transform: none; }
.hig-complication__stack { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hig-complication__stack-image { display: grid; place-items: center; color: var(--hig-cx-accent); }
.hig-complication__line { white-space: nowrap; }
.hig-complication__line--secondary { color: var(--label-secondary); }

/* bezel and corner text / gauge along an arc */
.hig-complication__arc { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.hig-complication__arc-text { fill: currentColor; font-family: inherit; font-weight: 500; letter-spacing: 0.02em; }
.hig-complication--corner .hig-complication__arc-text { font-weight: 600; fill: var(--hig-cx-accent); } /* HIG corner default: Semibold */
.hig-complication--corner .hig-complication__disc--plain { color: var(--hig-cx-accent); }

/* inline / utilitarian: one line, optional flat image (text size: no source — watch Caption 1, 15/17.5) */
.hig-complication__inline { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 15px; line-height: 17.5px; }
.hig-complication__flat { display: inline-flex; align-items: center; justify-content: center; color: var(--hig-cx-accent); }

/* rectangular: region = the HIG "large image without title" size; large images get the HIG 4pt corner radius */
.hig-complication__rect { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; text-align: left; overflow: hidden; }
.hig-complication--largeImageWithTitle .hig-complication__rect { justify-content: space-between; }
.hig-complication__title { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--hig-cx-accent); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hig-complication--largeImageWithTitle .hig-complication__title { font-size: 15px; line-height: 18px; } /* kit LABEL SF Compact Semibold 15 */
.hig-complication__rect-icon { display: inline-grid; place-items: center; flex: none; }
.hig-complication__large-image { display: block; overflow: hidden; border-radius: 4px; background: var(--fill-tertiary); }
.hig-complication__large-image > * { display: block; width: 100%; height: 100%; }
.hig-complication__bar { display: block; width: 100%; height: var(--track-height); margin-top: auto; border-radius: var(--radius-capsule); background: var(--fill-primary); overflow: hidden; }
.hig-complication__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--hig-cx-accent); }

/* legacy modular large: a header row and up to three rows (columns, standard body, table) */
.hig-complication--modularLarge { place-items: start; }
.hig-complication__modular-large { display: flex; flex-direction: column; width: 100%; }
.hig-complication__row { display: flex; gap: 0.5em; white-space: nowrap; }
.hig-complication__modular-large--columns .hig-complication__row,
.hig-complication__modular-large--table .hig-complication__row { justify-content: space-between; }
.hig-complication__modular-large--table .hig-complication__cell:first-child { color: var(--label-secondary); }

/* tinted mode: desaturated, then one color from the wearer's choice (HIG) for images, gauges and text.
   Tracks and image plates keep the dark fill-primary opacity (36%) of that color. */
.hig-complication--tinted {
  --hig-cx-accent: var(--hig-cx-tint);
  --label-primary: var(--hig-cx-tint);
  --label-secondary: color-mix(in srgb, var(--hig-cx-tint) 60%, transparent);
  --fill-primary: color-mix(in srgb, var(--hig-cx-tint) 36%, transparent);
  --fill-tertiary: color-mix(in srgb, var(--hig-cx-tint) 24%, transparent);
}
.hig-complication--tinted .hig-complication__image { background: color-mix(in srgb, var(--hig-cx-tint) 36%, transparent); }
.hig-complication--tinted :is(img, picture, video, image) { filter: grayscale(1); }

/* ---- Control ---- */
/* Control — iOS 27 kit System/Control Center/􀻃/Controls - iPhone (1x1 68, 2x1 155×69, 2x2 155×155, r34) and
   Controls - iPad (1x1 66, 2x1 142×66 capsules, 2x2 142×142 r28), System/Lock Screen Widgets/Control (58, circle).
   Control Center and the Lock Screen are dark contexts in both appearances (kit: white glyphs over a dimmed
   wallpaper), so the control is scoped to the dark token set. */
.hig-control {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; cursor: pointer; background-color: transparent;
  display: inline-flex; flex: none; box-sizing: border-box; vertical-align: top; text-align: left;
  font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; user-select: none;
  color: var(--on-media); /* labels and symbols on clear glass are white (HIG) */
}
.hig-control *, .hig-control *::before, .hig-control *::after { box-sizing: border-box; }
.hig-control:disabled { cursor: default; color: var(--label-tertiary); } /* disabled: tertiary label (kit convention) */
/* kit Liquid Glass/Clear in Control Center blurs 13.5 (the Lock Screen control keeps the clear glass's 3) */
.hig-control.hig-glass--clear:not(.hig-control--lockScreen) { -webkit-backdrop-filter: blur(13.5px); backdrop-filter: blur(13.5px); }
/* pressed: glass controls darken their own background beneath the glass fills (as in Button) */
.hig-control.hig-glass:active:not(:disabled):not(.hig-control--on) { background-color: var(--pressed-overlay); }

/* ---- sizes */
.hig-control--iphone.hig-control--1x1 { width: 68px; height: 68px; border-radius: 34px; align-items: center; justify-content: center; }
.hig-control--ipad.hig-control--1x1 { width: 66px; height: 66px; border-radius: var(--radius-capsule); align-items: center; justify-content: center; }
.hig-control--iphone.hig-control--2x1 { width: 155px; height: 69px; border-radius: 34px; align-items: center; gap: 7px; padding: 0 14px; } /* well 41 at 14,14; text at 62 */
.hig-control--ipad.hig-control--2x1 { width: 142px; height: 66px; border-radius: var(--radius-capsule); align-items: center; gap: 8px; padding: 0 14px; } /* well 40 at 14,13; text at 62 */
.hig-control--iphone.hig-control--2x2 { width: 155px; height: 155px; border-radius: 34px; flex-direction: column; justify-content: space-between; padding: 14px; } /* text at 16,103 */
.hig-control--ipad.hig-control--2x2 { width: 142px; height: 142px; border-radius: 28px; flex-direction: column; justify-content: space-between; padding: 14px; } /* text at 16,90 */
.hig-control--lockScreen { width: 58px; height: 58px; border-radius: 50%; align-items: center; justify-content: center; }

/* ---- symbol well (2x1, 2x2): iPhone white at 15%, iPad Fills/Dark - Vibrant/2 Secondary */
.hig-control__well { display: grid; place-items: center; flex: none; }
.hig-control__well--platter { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--label-primary) 15%, transparent); } /* white 15% in the dark scope */
.hig-control--iphone.hig-control--2x1 .hig-control__well--platter { width: 41px; height: 41px; }
.hig-control--ipad .hig-control__well--platter { background: var(--vibrant-fill-secondary); }
.hig-control__symbol { display: grid; place-items: center; color: inherit; }
.hig-control__text { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; } /* kit Title y 1, Detail y 17 */
.hig-control--2x2 .hig-control__text { padding-left: 2px; }
.hig-control__title { font-size: 14px; line-height: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* kit SFPro-Semibold 14 */
.hig-control__value { font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: color-mix(in srgb, var(--white) 33%, transparent); } /* kit Detail SFPro-Medium 14, white 33% (iPhone) */
.hig-control--ipad .hig-control__value { color: color-mix(in srgb, var(--white) 40%, transparent); } /* kit iPad white 40% */

/* ---- on state (toggles): the platter turns white, title black, the symbol takes the tint (HIG; kit On masters) */
.hig-control--on { background-color: var(--label-primary); }
.hig-control--on .hig-control__symbol { color: var(--hig-control-tint); }
.hig-control--on .hig-control__well--platter { background: none; }
.hig-control--on .hig-control__title { color: var(--background-primary); }
.hig-control--on .hig-control__value { color: color-mix(in srgb, var(--background-primary) 40%, transparent); } /* kit Detail black 40% */
/* the Lock Screen shows the symbol only; an on toggle tints its symbol (HIG) */
.hig-control--lockScreen.hig-control--on { background-color: transparent; }

/* ---- redacted (locked device) and in-progress actions */
.hig-control__redaction { display: inline-block; height: 0.8em; vertical-align: middle; border-radius: var(--radius-capsule); background: color-mix(in srgb, currentColor 30%, transparent); }
.hig-control__symbol--busy { animation: hig-control-busy 1s ease-in-out infinite alternate; } /* HIG: animate the symbol while the action runs */
@keyframes hig-control-busy { to { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .hig-control__symbol--busy { animation: none; opacity: 0.6; } }

/* ---- Action button: symbol and value in the Dynamic Island, in the tint color */
.hig-control--action-button {
  display: inline-flex; align-items: center; width: max-content; height: 36.67px; border-radius: var(--radius-capsule); overflow: hidden;
  /* HIG Live Activities: the Dynamic Island's black opaque background is the camera cutout's color — the system's
     one literal color (shared with LiveActivity). */
  background: var(--black);
  color: var(--hig-control-tint); font-family: var(--font-sans);
}
.hig-control__camera { flex: none; width: 125px; height: 36.67px; } /* kit iPhone 17 Pro Dynamic Island 125 */
.hig-control__island-region { flex: none; display: flex; align-items: center; width: 52.33px; height: 36.67px; } /* HIG compact 52.33×36.67 */
.hig-control__island-region--leading { justify-content: flex-end; }
.hig-control__island-region--trailing { justify-content: flex-start; }
.hig-control__island-value { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.23px; white-space: nowrap; }
/* Hint: the HIG gives no hint geometry. The trailing region grows with the text from the compact 52.33 and the text
   ends where the capsule's straight edge does (inset by the 18.33 end radius, chosen); the island never grows past the
   HIG's expanded Dynamic Island width for a 393pt screen (371) — longer hints truncate with an ellipsis. */
.hig-control--action-button:has(.hig-control__hint) { max-width: 371px; }
.hig-control__island-region--trailing:has(.hig-control__hint) { flex: 0 1 auto; width: auto; min-width: 52.33px; padding-inline-end: calc(36.67px / 2); }
.hig-control__hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.23px; white-space: nowrap; color: var(--label-primary); }

/* ---- LiveActivity ---- */
/* LiveActivity — sizes from the HIG Live Activities Specifications tables; the TrueDepth camera region from the
   iOS 27 kit status bars (Dynamic Island 125×37 on iPhone 17 Pro, 95×37 on iPhone 18 Pro / Pro Max). */
.hig-live-activity { box-sizing: border-box; font-family: var(--font-sans); }
.hig-live-activity *, .hig-live-activity *::before, .hig-live-activity *::after { box-sizing: border-box; }

/* ---------- Dynamic Island: compact, minimal, expanded ---------- */
.hig-live-activity__island {
  display: inline-flex; align-items: center; vertical-align: top; overflow: hidden;
  width: max-content; /* a fixed HIG size: never stretched by a flex or grid parent */
  height: var(--hig-la-height); border-radius: var(--radius-capsule);
  /* HIG Live Activities: "the Dynamic Island uses a black opaque background" — it is the TrueDepth camera cutout's
     own color. This is the one literal color in HIG Native: no token may vary it by theme. */
  background: var(--black);
  color: var(--label-primary);
}
/* HIG: on dark backgrounds a key line, tinted with keyColor, outlines the Dynamic Island (line width: no source; 1px). */
[data-theme^="dark"] .hig-live-activity__island { box-shadow: 0 0 0 1px var(--hig-la-key); }
.hig-live-activity__camera { flex: none; width: var(--hig-la-camera); height: var(--hig-la-height); }
.hig-live-activity__region { flex: none; display: flex; align-items: center; height: var(--hig-la-height); min-width: 0; overflow: hidden; }
/* compact: each element is the HIG 62.33×36.67 (430pt screen) or 52.33×36.67 (393pt) frame; content sits snug against
   the camera with no padding between them (HIG). `fit` shrinks each element to its content up to that maximum. */
.hig-live-activity--compact .hig-live-activity__region { width: var(--hig-la-compact); }
.hig-live-activity--compact .hig-live-activity__region--leading { justify-content: flex-end; }
.hig-live-activity--compact .hig-live-activity__region--trailing { justify-content: flex-start; }
.hig-live-activity--fit .hig-live-activity__region { width: auto; max-width: var(--hig-la-compact); }
/* fit: the outer side keeps the concentric margin of the HIG's 28pt content circle, (36.67 − 28) / 2 */
.hig-live-activity--fit .hig-live-activity__region--leading { padding-inline-start: calc((var(--hig-la-height) - var(--hig-la-limited)) / 2); }
.hig-live-activity--fit .hig-live-activity__region--trailing { padding-inline-end: calc((var(--hig-la-height) - var(--hig-la-limited)) / 2); }
/* limited width (HIG Oct 2026): compact and minimal content must fit a 28pt-diameter circle, placed concentric with
   the island's rounded end: (36.67 − 28) / 2 from the edge. */
.hig-live-activity--limited .hig-live-activity__region {
  width: var(--hig-la-limited); height: var(--hig-la-limited); border-radius: 50%; justify-content: center;
}
.hig-live-activity--limited .hig-live-activity__region--leading { margin-inline-start: calc((var(--hig-la-height) - var(--hig-la-limited)) / 2); }
.hig-live-activity--limited .hig-live-activity__region--trailing { margin-inline-end: calc((var(--hig-la-height) - var(--hig-la-limited)) / 2); }
/* minimal: 36.67–45 × 36.67 — a circle, or an oval when the content is wider */
.hig-live-activity--minimal .hig-live-activity__region--minimal { justify-content: center; min-width: var(--hig-la-min-w); max-width: var(--hig-la-max-w); }
.hig-live-activity--minimal.hig-live-activity--limited .hig-live-activity__region--minimal {
  min-width: 0; margin-inline: calc((var(--hig-la-height) - var(--hig-la-limited)) / 2);
}
/* expanded: 408 (430pt screen) / 371 (393pt) wide, 84–160 tall; content wraps the camera at the top. Corner radius and
   inner margin are not given by the HIG: radius-sheet (concentric with the device corner) and the 14pt Live
   Activity margin are used (see README). */
.hig-live-activity__island.hig-live-activity--expanded {
  display: grid; height: auto; width: var(--hig-la-width); max-width: 100%;
  min-height: 84px; max-height: 160px;
  grid-template-columns: minmax(0, 1fr) var(--hig-la-camera) minmax(0, 1fr);
  grid-template-rows: var(--hig-la-height) auto auto;
  grid-template-areas: "leading camera trailing" "leading center trailing" "bottom bottom bottom";
  align-content: start; padding: 0 14px 14px; border-radius: var(--radius-sheet);
}
.hig-live-activity--expanded .hig-live-activity__camera { grid-area: camera; }
.hig-live-activity--expanded .hig-live-activity__area--leading { grid-area: leading; align-self: center; display: flex; justify-content: flex-start; min-width: 0; }
.hig-live-activity--expanded .hig-live-activity__area--trailing { grid-area: trailing; align-self: center; display: flex; justify-content: flex-end; min-width: 0; }
.hig-live-activity--expanded .hig-live-activity__area--center { grid-area: center; min-width: 0; text-align: center; }
.hig-live-activity--expanded .hig-live-activity__area--bottom { grid-area: bottom; min-width: 0; padding-top: 14px; }

/* ---------- Lock Screen: 408 / 371 (iPhone), 500 / 425 (iPad) wide, 84–160 tall, 14pt standard margins (HIG).
   Default background follows the appearance (HIG: light in light, dark in dark); corner radius matches the kit
   notification banner (radius-banner) because the HIG aligns Live Activities with notifications. */
.hig-live-activity--lock-screen {
  display: flex; flex-direction: column; justify-content: center; gap: 14px; position: relative; isolation: isolate;
  width: var(--hig-la-width); max-width: 100%; min-height: 84px; max-height: 160px; overflow: hidden;
  padding: 14px; border-radius: var(--radius-banner);
  background: var(--hig-la-bg, var(--background-elevated-primary)); color: var(--label-primary);
}
.hig-live-activity--custom { display: block; }
.hig-live-activity__row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hig-live-activity__row .hig-live-activity__area--leading, .hig-live-activity__row .hig-live-activity__area--trailing { flex: none; }
.hig-live-activity__row .hig-live-activity__area--center { flex: 1 1 auto; min-width: 0; }
/* StandBy: the Lock Screen presentation scaled 2x (HIG); the default background blends with the bezel (black). */
.hig-live-activity--standby { zoom: 2; max-width: none; background: var(--hig-la-bg, var(--background-primary)); }
/* StandBy Night Mode: a monochromatic red tint (HIG). */
.hig-live-activity--night > * { filter: grayscale(1); }
.hig-live-activity--night::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--system-red); mix-blend-mode: multiply; pointer-events: none; }

/* ---------- Apple Watch Smart Stack (HIG watchOS table; kit widget Background r14.5, Layout Guide margins) */
.hig-live-activity--smart-stack {
  display: flex; flex-direction: column; overflow: hidden;
  width: var(--hig-la-width); height: var(--hig-la-h); border-radius: 14.5px; padding: 11px 9.5px 11.5px;
  background: var(--hig-la-bg, var(--system-gray-4)); /* kit Background/Solid Color rgb(58,58,58) */
  color: var(--label-primary); font-family: var(--font-rounded);
}
.hig-live-activity__corners { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }

/* ---- NotificationBanner ---- */
/* NotificationBanner — geometry from the iOS 27 kit (System/Notifications: Over Light / Over Dark banners,
   Expanded), the macOS 27 kit (Notifications/Single, Stacked, BG) and the watchOS 26 kit
   (Templates/<size>/Notifications: Short Look, Long Look, Long Look Body; Components/Buttons/Pill). */
.hig-notification-banner { box-sizing: border-box; font-family: var(--font-sans); }
.hig-notification-banner *, .hig-notification-banner *::before, .hig-notification-banner *::after { box-sizing: border-box; }
.hig-notification-banner p { margin: 0; }

/* App icon slot: a token-colored tile with an interface icon (never a real app icon). The corner is the kit
   placeholder icon mask measured as a circular radius: 65 of 256 px = 25.4% of the side. */
.hig-notification-banner__icon {
  flex: none; display: grid; place-items: center; overflow: hidden;
  width: 38.33px; height: 38.33px; border-radius: 25.4%; /* kit Banners/1 Single 'Icon' 38.33×38.33 */
  background: var(--hig-nb-icon-fill, var(--accent)); color: var(--on-accent);
}
.hig-notification-banner__image { flex: none; display: block; width: 32px; height: 32px; border-radius: 6px; overflow: hidden; } /* kit 'Image' 32×32 r6 */
.hig-notification-banner__image > img, .hig-notification-banner__image > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.hig-notification-banner__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-notification-banner__time { flex: none; white-space: nowrap; }

/* ---------- iOS / iPadOS banner (kit 300×62.33, r22, Liquid Glass/Clear; instances 370 on iPhone, 424 on iPad) */
.hig-notification-banner--ios { position: relative; isolation: isolate; width: var(--hig-nb-width, 370px); max-width: 100%; }
.hig-notification-banner--ios .hig-notification-banner__banner {
  display: flex; align-items: flex-start;
  gap: 10px;                     /* kit: icon 14→52.33, text column at 62.33 */
  padding: 12px 14px;            /* kit: Stack/Text at y 12, 14 leading and trailing */
  min-height: 62.33px;           /* kit Banners/1 Single */
  border-radius: var(--radius-banner);
}
/* Kit "Over Light" banners use Labels/Light - Vibrant, "Over Dark" Labels/Dark - Vibrant, on the same Liquid
   Glass/Clear. The vibrant tokens follow the nearest data-theme, which `over` sets to the content beneath. */
.hig-notification-banner--ios .hig-notification-banner__banner.hig-glass--clear { color: var(--vibrant-label-primary); }
.hig-notification-banner--ios .hig-notification-banner__main { flex: 1 1 auto; min-width: 0; }
.hig-notification-banner--ios .hig-notification-banner__titlerow { display: flex; align-items: baseline; }
.hig-notification-banner--ios .hig-notification-banner__banner .hig-notification-banner__title { flex: 1 1 auto; font-size: 15px; line-height: 17px; font-weight: 600; letter-spacing: -0.23px; } /* kit SFPro-Semibold 15 lh17 */
.hig-notification-banner--ios .hig-notification-banner__banner .hig-notification-banner__time {
  min-width: 57px; text-align: right;   /* kit 'Time' 57 wide, right aligned */
  font-size: 15px; line-height: 17px; letter-spacing: -0.23px; color: var(--vibrant-label-secondary);
}
.hig-notification-banner--ios .hig-notification-banner__banner .hig-notification-banner__body { font-size: 15px; line-height: 18px; letter-spacing: -0.23px; } /* kit SFPro-Regular 15 lh18 */
/* with image: kit 300×78 — icon and text centered, time over a 32pt image in the trailing column */
.hig-notification-banner--with-image .hig-notification-banner__banner { align-items: center; min-height: 78px; }
.hig-notification-banner--with-image .hig-notification-banner__aside {
  flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  min-width: 57px; gap: 5px; /* kit: Time 0–17, Image 22–54 */
}
/* stacked group: kit 2 Double / 3 Triple — 63pt peeks, r24, inset 20 and 40, 8pt apart */
.hig-notification-banner--stack-1 { padding-bottom: 8px; }
.hig-notification-banner--stack-2 { padding-bottom: 16px; }
.hig-notification-banner--ios .hig-notification-banner__peek { position: absolute; z-index: -1; height: 63px; border-radius: 24px; }
.hig-notification-banner--ios .hig-notification-banner__peek--1 { left: 20px; right: 20px; bottom: 0; }
.hig-notification-banner--stack-2 .hig-notification-banner__peek--1 { bottom: 8px; }
.hig-notification-banner--ios .hig-notification-banner__peek--2 { left: 40px; right: 40px; bottom: 0; }

/* ---------- iOS expanded notification (kit iPhone 370 r26 / iPad 501) and action menu (kit 250, r32) */
.hig-notification-banner--expanded { display: flex; flex-direction: column; align-items: center; gap: 10px; /* kit: menu 10pt below */ }
.hig-notification-banner__card {
  width: 100%; overflow: hidden; border-radius: var(--radius-group);
  /* kit fill white / rgb(17,17,17); the nearest tokens are the elevated backgrounds (see report) */
  background: var(--background-elevated-primary); color: var(--label-primary);
}
.hig-notification-banner--expanded .hig-notification-banner__header { display: flex; align-items: flex-start; gap: 12px; padding: 14px; min-height: 66px; } /* kit Header 66: Icon 14,14; Content at 64 */
.hig-notification-banner--expanded .hig-notification-banner__icon { width: 38px; height: 38px; } /* kit 'Icon' group 38×38 */
.hig-notification-banner--expanded .hig-notification-banner__main { flex: 1 1 auto; min-width: 0; padding-top: 1px; } /* kit Title at y 1 */
.hig-notification-banner--expanded .hig-notification-banner__titlerow { display: flex; align-items: baseline; }
.hig-notification-banner--expanded .hig-notification-banner__title { flex: 1 1 auto; font-size: 15px; line-height: 17px; font-weight: 600; letter-spacing: -0.23px; }
.hig-notification-banner--expanded .hig-notification-banner__time { min-width: 40px; text-align: right; font-size: 13px; line-height: 17px; letter-spacing: -0.08px; color: var(--label-secondary); } /* kit 'Time' 40 wide, 13pt */
.hig-notification-banner--expanded .hig-notification-banner__body { margin-top: 1px; font-size: 15px; line-height: 17px; letter-spacing: -0.23px; } /* kit iPhone Description y 19, lh17 */
.hig-notification-banner--ipad.hig-notification-banner--expanded .hig-notification-banner__body { line-height: 18px; } /* kit iPad lh18 */
.hig-notification-banner__detail { display: block; }
.hig-notification-banner__image--detail { width: 100%; height: 304px; border-radius: 0; } /* kit iPhone Body 370×304 */
.hig-notification-banner--ipad .hig-notification-banner__image--detail { height: 274px; } /* kit iPad Body 501×274 */
.hig-notification-banner--ios .hig-notification-banner__actions {
  display: flex; flex-direction: column; gap: 20px;  /* kit rows at y 20 and 62 */
  width: var(--menu-width); padding: 20px 26px; border-radius: var(--radius-menu);
}
.hig-notification-banner__action {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; cursor: pointer; font: inherit; text-align: left;
  display: flex; align-items: center; gap: 14px; /* kit Symbol 20 wide, Label at 34 */
  color: inherit; -webkit-tap-highlight-color: transparent;
}
.hig-notification-banner--ios .hig-notification-banner__action {
  position: relative; height: 22px; font-size: 17px; line-height: 22px; letter-spacing: -0.43px; color: var(--glass-label-primary);
}
/* each 22pt row keeps a 44pt hit region (HIG) inside the 20pt gaps */
.hig-notification-banner--ios .hig-notification-banner__action::before { content: ""; position: absolute; left: -26px; right: -26px; top: -11px; bottom: -11px; }
.hig-notification-banner__action-symbol { flex: none; width: 20px; display: inline-flex; justify-content: center; }
.hig-notification-banner__action-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hig-notification-banner__action--destructive, .hig-notification-banner--ios .hig-notification-banner__action--destructive { color: var(--system-red); }

/* ---------- macOS banner (kit Notifications/Single 344×78; BG r20, shadow-mac-notification) */
.hig-notification-banner--mac { position: relative; isolation: isolate; width: 344px; max-width: 100%; }
.hig-notification-banner--mac .hig-notification-banner__banner {
  display: flex; align-items: flex-start; gap: 12px;  /* kit: icon 14→46, text at 58 */
  padding: 12px 14px; min-height: 78px;
  border-radius: var(--radius-glass);                 /* kit BG r20 */
  color: var(--glass-label-primary);
  box-shadow: var(--shadow-mac-notification), var(--shadow-glass-highlight), 0 0 0 0.5px var(--separator);
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); /* kit Liquid Glass/Light/Notification r15 */
}
[data-theme^="dark"] .hig-notification-banner--mac .hig-notification-banner__banner,
[data-theme^="dark"] .hig-notification-banner--mac .hig-notification-banner__peek { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* kit Dark/Notification r10 */
.hig-notification-banner--mac .hig-notification-banner__icon { width: 32px; height: 32px; align-self: center; } /* kit App Icon 32×32 */
.hig-notification-banner--mac .hig-notification-banner__main { flex: 1 1 auto; min-width: 0; }
.hig-notification-banner--mac .hig-notification-banner__aside { flex: none; min-width: 32px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } /* kit Timestamp 0–14, Image 22–54 */
.hig-notification-banner--mac .hig-notification-banner__time { color: var(--glass-label-secondary); }
.hig-notification-banner--mac.hig-notification-banner--stacked { padding-bottom: 8px; }
.hig-notification-banner--mac .hig-notification-banner__peek {
  position: absolute; z-index: -1; left: 16px; right: 16px; top: -2px; bottom: 0; /* kit Stacked BG 312×88 at 16,-2 */
  border-radius: 22px; box-shadow: var(--shadow-glass-highlight), 0 0 0 0.5px var(--separator);
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
}
[data-theme^="dark"] .hig-notification-banner--mac.hig-notification-banner--stacked { padding-bottom: 6px; } /* kit Dark/Stacked 312×86 */
[data-theme^="dark"] .hig-notification-banner--mac .hig-notification-banner__peek { border-radius: 16px; }

/* ---------- watchOS short look and long look (kit Templates/44mm, 46mm, 49mm; dark-only screens) */
.hig-notification-banner--watch {
  position: relative; width: var(--hig-nw-w); min-height: var(--hig-nw-h); max-width: 100%;
  background: var(--background-primary); color: var(--label-primary); font-family: var(--font-compact);
}
.hig-notification-banner--watch-44mm { --hig-nw-w: 184px; --hig-nw-h: 224px; --hig-nw-icon: 108px; --hig-nw-icon-top: 32px; --hig-nw-gap: 8.5px; --hig-nw-pad: 9.5px;
  --hig-nw-top: 35px; --hig-nw-text-x: 7.5px; --hig-nw-text-b: 10.5px; --hig-nw-long-icon: 34px; --hig-nw-long-icon-y: -17.5px; --hig-nw-long-icon-x: 8.5px;
  --hig-nw-time: 75%; --hig-nw-title-y: 1px; --hig-nw-btn-w: 163px; --hig-nw-btn-h: 51px; --hig-nw-btn-lh: 19px; }
.hig-notification-banner--watch-46mm { --hig-nw-w: 208px; --hig-nw-h: 248px; --hig-nw-icon: 117px; --hig-nw-icon-top: 36px; --hig-nw-gap: 14px; --hig-nw-pad: 15px;
  --hig-nw-top: 40.5px; --hig-nw-text-x: 12px; --hig-nw-text-b: 13.5px; --hig-nw-long-icon: 35px; --hig-nw-long-icon-y: -21px; --hig-nw-long-icon-x: 12px;
  --hig-nw-time: 50%; --hig-nw-title-y: 1px; --hig-nw-btn-w: 178px; --hig-nw-btn-h: 53px; --hig-nw-btn-lh: 20px; }
.hig-notification-banner--watch-49mm { --hig-nw-w: 205px; --hig-nw-h: 251px; --hig-nw-icon: 117px; --hig-nw-icon-top: 36px; --hig-nw-gap: 15.54px; --hig-nw-pad: 12px;
  --hig-nw-top: 44.5px; --hig-nw-text-x: 12.5px; --hig-nw-text-b: 14.5px; --hig-nw-long-icon: 36px; --hig-nw-long-icon-y: -24px; --hig-nw-long-icon-x: 13.5px;
  --hig-nw-time: 50%; --hig-nw-title-y: 0px; --hig-nw-btn-w: 174px; --hig-nw-btn-h: 54px; --hig-nw-btn-lh: 19px; }
.hig-notification-banner--watch .hig-notification-banner__icon { border-radius: 50%; } /* watchOS icons are circular (HIG App icons; kit r256 of 512) */
/* short look: large icon, Title 3 (20/22.5 Semibold) and a 2-line Footnote 1 (14/16.5) preview, centered */
.hig-notification-banner__short { display: flex; flex-direction: column; align-items: center; padding: var(--hig-nw-icon-top) var(--hig-nw-pad) 0; text-align: center; }
.hig-notification-banner__icon--short { width: var(--hig-nw-icon); height: var(--hig-nw-icon); }
.hig-notification-banner__short .hig-notification-banner__title { width: 100%; margin-top: var(--hig-nw-gap); font-size: 20px; line-height: 22.5px; font-weight: 600; }
.hig-notification-banner__short .hig-notification-banner__body {
  margin-top: 2px; font-size: 14px; line-height: 16.5px; /* kit: content 2pt below the 22.5pt title */
  /* Chromium centers a clamped line before it appends the ellipsis, so the ellipsis can overhang the box by up to half
     its width and be clipped ("before.."): a little inline padding, taken back from the margins, leaves it room. */
  align-self: stretch; padding-inline: 0.6em; margin-inline: -0.6em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /* kit: "Max 2 lines" */
}
/* long look: content platter (HIG: white at 18% to match system notifications), custom actions, Dismiss */
.hig-notification-banner__long { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--hig-nw-top) 2px 4px; } /* kit platter inset 2; 4pt between pills */
.hig-notification-banner__platter {
  position: relative; width: 100%; border-radius: 18px; /* kit Long Look Body r18 */
  padding: 7px var(--hig-nw-text-x) var(--hig-nw-text-b);
  background: color-mix(in srgb, var(--label-primary) 18%, transparent);
}
.hig-notification-banner__icon--long { position: absolute; left: var(--hig-nw-long-icon-x); top: var(--hig-nw-long-icon-y); width: var(--hig-nw-long-icon); height: var(--hig-nw-long-icon); }
.hig-notification-banner__long .hig-notification-banner__time { display: block; text-align: right; font-size: 12px; line-height: 14.5px; color: color-mix(in srgb, var(--label-primary) var(--hig-nw-time), transparent); }
.hig-notification-banner__long .hig-notification-banner__title { margin-top: var(--hig-nw-title-y); font-size: 17px; line-height: 19.5px; font-weight: 600; white-space: normal; }
.hig-notification-banner__long .hig-notification-banner__body { margin-top: var(--hig-nw-title-y); font-size: 17px; line-height: 19.5px; }
.hig-notification-banner__custom { margin-top: 4px; }
.hig-notification-banner--watch .hig-notification-banner__actions { display: contents; }
.hig-notification-banner--watch .hig-notification-banner__action {
  flex: none; justify-content: center; width: var(--hig-nw-btn-w); max-width: 100%; height: var(--hig-nw-btn-h); padding: 0 6px;
  border-radius: var(--radius-capsule); font-family: var(--font-compact); font-size: 17px; line-height: var(--hig-nw-btn-lh); font-weight: 500; text-align: center;
  /* kit Pill fill white 8% with screen blending; over the black screen that is the same as a normal 8% white */
  color: var(--label-primary); background: color-mix(in srgb, var(--label-primary) 8%, transparent);
}
.hig-notification-banner--watch .hig-notification-banner__action--destructive { color: var(--system-red); }
.hig-notification-banner--watch .hig-notification-banner__action-label { flex: none; }

/* ---- Snippet ---- */
/* Snippet — the system card for App Intents results and confirmations (HIG Snippets).
   The HIG page states only the 400pt custom-view maximum and the button order; the iOS 27 and macOS 27 kits
   have no snippet symbol (searched 'Snippet|Siri'). The card therefore uses the kits' other system-provided
   cards — Alerts (Liquid Glass/Regular - Large, side-by-side system buttons) and expanded notifications —
   for its insets and buttons; each borrowed value is cited, and chosen values are marked "chosen". */
.hig-snippet {
  box-sizing: border-box; display: flex; flex-direction: column; max-width: 100%;
  margin: 0; font-family: var(--font-sans); color: var(--glass-label-primary);
  border-radius: var(--radius-group); /* chosen: no snippet in the kit; radius-group = kit expanded-notification corner (26pt) */
}
.hig-snippet__dialogue { margin: 0; color: var(--glass-label-primary); overflow-wrap: break-word; }
/* The custom view: your content, clipped at the HIG's 400pt maximum height. */
.hig-snippet__view { position: relative; max-height: 400px; overflow: hidden; } /* HIG: 400pt maximum height */
.hig-snippet__view-inner { display: flow-root; }
.hig-snippet__actions { display: flex; gap: 8px; } /* kit Alerts/Light/Default: 132 + 8 + 132pt buttons */
.hig-snippet__button { flex: 1 1 0; min-width: 0; }
.hig-snippet__button .hig-button__label { overflow: hidden; text-overflow: ellipsis; }

/* ---- iOS / iPadOS ---- */
.hig-snippet--ios {
  width: 370px; /* chosen: iPhone 402pt screen less 2 × margin-compact — the kit's expanded-notification width */
  padding: 14px; gap: 14px; /* kit Alerts and expanded notifications: content inset 14pt from the card edge */
}
.hig-snippet--ios .hig-snippet__dialogue { padding: 8px 8px 0; } /* kit Alerts: text sits 8pt inside the 14pt content group */
/* System-provided buttons: the kit's alert buttons — 48pt capsules; primary accent fill with a Semibold label,
   secondary tertiary fill with a Medium primary-label title (Alerts/􀻃/Light/1 Primary, 2 Secondary). */
.hig-snippet .hig-snippet__actions .hig-button--ios { height: 48px; padding: 0 16px; font-size: 17px; line-height: 22px; letter-spacing: -0.43px; } /* kit: 48pt tall, label inset 16pt, 17/22 */
.hig-snippet .hig-snippet__actions .hig-snippet__button--primary.hig-button--ios { font-weight: 600; }
.hig-snippet .hig-snippet__actions .hig-snippet__button--secondary.hig-button--ios { font-weight: 500; }
.hig-snippet .hig-snippet__actions .hig-snippet__button--secondary.hig-button--ios:not(:disabled) { color: var(--label-primary); }

/* ---- macOS ---- */
.hig-snippet--mac {
  width: 344px; /* chosen: the macOS 27 kit's notification width (Notifications/Light/Single 344pt), where Siri cards appear */
  padding: 16px; gap: 16px; /* kit macOS Alerts/Light/Side by Side: content and buttons inset 16pt; text-to-buttons 16pt */
}
.hig-snippet--mac .hig-snippet__dialogue { padding: 4px 6px 0; } /* kit macOS Alerts: text group at 20pt (16 + 4), text inset 6pt */
/* macOS system buttons: kit Alerts/􀻃/Light/Buttons — 28pt capsules (Button platform mac, size large), 8pt apart. */

/* ---- TopShelf ---- */
/* TopShelf — a mockup of the tvOS Top Shelf on a 1920 × 1080 (1x pt) canvas, scaled down to its frame.
   Image sizes come from the HIG Top Shelf tables (set in TopShelf.jsx); there is no tvOS UI kit, so positions
   inside the screen use the HIG Layout tvOS values (safe area 80/60pt, grid spacing 40pt) and are marked "chosen"
   where the HIG gives no number. */
.hig-top-shelf {
  position: relative; box-sizing: border-box; width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; font-family: var(--font-sans); color: var(--label-primary);
  background: var(--background-secondary);
  box-shadow: 0 0 0 1px var(--separator); /* frame hairline (separator) so the canvas edge reads on any ground */
}
.hig-top-shelf__screen {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; /* tvOS screen, 1x */
  transform-origin: 0 0; overflow: hidden; overflow: clip;
}
.hig-top-shelf__screen p { margin: 0; }

/* Images: drawn at their actual size and cropped by the visible (focused or unfocused) box. */
.hig-top-shelf__art { position: absolute; left: 0; top: 0; display: block; overflow: hidden; border-radius: inherit; }
.hig-top-shelf__art img { position: absolute; display: block; max-width: none; object-fit: cover; user-select: none; }
.hig-top-shelf__art--empty { background: var(--fill-secondary); }

/* ---- Focusable row items and banners ---- */
.hig-top-shelf__row { position: absolute; left: 0; top: 0; width: 1920px; height: 720px; } /* the Top Shelf band (static image height 720pt) */
.hig-top-shelf__cell { display: contents; }
.hig-top-shelf__item,
.hig-top-shelf__banner,
.hig-top-shelf__app {
  position: absolute; display: block; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-thumbnail); /* chosen: the HIG gives no Top Shelf corner radius */
  -webkit-tap-highlight-color: transparent;
}
.hig-top-shelf__item > .hig-top-shelf__art,
.hig-top-shelf__banner > .hig-top-shelf__art,
.hig-top-shelf__app > .hig-top-shelf__art { position: relative; }
.hig-top-shelf__item.is-focused,
.hig-top-shelf__app.is-focused { z-index: 2; box-shadow: var(--shadow-glass); } /* chosen: the lift of the system focus effect, drawn with the glass panel shadow */
.hig-top-shelf__banner--neighbor { cursor: default; }
.hig-top-shelf__item:focus-visible,
.hig-top-shelf__app:focus-visible { outline-width: 6px; outline-offset: 6px; } /* the 3px ring, doubled so it survives the canvas scale */

/* Labels: Caption 1 (tv-caption-1, 25/32 Medium). Section labels secondary, the focused item's label primary. */
.hig-top-shelf__label { position: absolute; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hig-top-shelf__label--section { color: var(--label-secondary); max-width: 1760px; }
.hig-top-shelf__label--item,
.hig-top-shelf__dock .hig-top-shelf__label { color: var(--label-primary); text-align: center; }

/* ---- Dock (system-drawn; abstract placeholders except your app) ---- */
.hig-top-shelf__dock { position: absolute; left: 0; width: 1920px; height: 236px; }
.hig-top-shelf__app { top: 0; width: 320px; height: 192px; } /* HIG Layout five-column grid width (320pt) at the 5:3 app-icon shape */
.hig-top-shelf__app--placeholder { background: var(--fill-secondary); cursor: default; }

/* ---- Carousel (actions and details): full-screen media, title, Play and More Info ---- */
.hig-top-shelf__carousel { position: absolute; inset: 0; color: var(--on-media); } /* white labels over full-screen media under the glass-dim layer (HIG Materials: white on clear glass over media) */
.hig-top-shelf__media { width: 1920px; height: 1080px; border-radius: 0; }
.hig-top-shelf__scrim { position: absolute; inset: 0; pointer-events: none; }
/* chosen: the HIG's 35% dimming layer (glass-dim), faded toward the text so the media stays visible */
.hig-top-shelf__carousel--actions .hig-top-shelf__scrim { background: linear-gradient(to top, var(--glass-dim), transparent 60%); }
.hig-top-shelf__carousel--details .hig-top-shelf__scrim {
  background: linear-gradient(to bottom, var(--glass-dim), transparent 70%), linear-gradient(to top, var(--glass-dim), transparent 40%);
}
.hig-top-shelf__info { position: absolute; left: var(--tv-safe-horizontal); display: flex; flex-direction: column; }
.hig-top-shelf__carousel--actions .hig-top-shelf__info {
  bottom: calc(var(--tv-safe-vertical) + var(--target-tv) + var(--tv-grid-gap)); /* chosen: one grid gap above the buttons */
  max-width: 1760px; /* the safe-area width */
}
.hig-top-shelf__carousel--details .hig-top-shelf__info {
  top: var(--tv-safe-vertical); /* HIG: the title appears near the top of the screen */
  width: 860px; /* chosen: the HIG Layout two-column unfocused width, as the text measure */
  gap: 8px; /* chosen */
}
.hig-top-shelf__screen .hig-top-shelf__summary { margin-top: 16px; } /* chosen */
.hig-top-shelf__buttons {
  position: absolute; left: var(--tv-safe-horizontal); bottom: var(--tv-safe-vertical);
  display: flex; gap: var(--tv-grid-gap); /* chosen: tv-grid-gap between the two buttons */
}
.hig-top-shelf__button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; /* chosen */
  height: var(--target-tv); /* 66pt — the HIG default tvOS control size */
  padding: 0 40px; /* chosen */
  white-space: nowrap; font-family: var(--font-sans);
}
.hig-top-shelf__button.hig-glass--clear { color: var(--on-media); } /* HIG: labels on clear glass over media are white */
.hig-top-shelf__button.is-focused { color: var(--glass-label-primary); } /* focused: regular glass, glass label */
.hig-top-shelf__button:focus-visible { outline-width: 6px; outline-offset: 6px; }

/* ---- Static image: fit to the 1920 width, mirrored below itself and blurred ---- */
.hig-top-shelf__static { position: absolute; inset: 0; }
.hig-top-shelf__static > .hig-top-shelf__art { border-radius: 0; }
.hig-top-shelf__reflection { position: absolute; left: 0; width: 1920px; overflow: hidden; }
.hig-top-shelf__reflection img { position: absolute; left: 0; top: 0; width: 1920px; display: block; max-width: none; transform: scaleY(-1); }
.hig-top-shelf__reflection-blur {
  position: absolute; left: 0; width: 1920px;
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); /* chosen: the HIG gives no blur radius */
}

@media (prefers-reduced-motion: no-preference) {
  .hig-top-shelf__row { transition: transform 200ms ease; } /* chosen */
}

/* ---- Widget ---- */
/* Widget — frames at the HIG Specifications sizes; corner radii and glass from the iOS 27 kit
   (System/Home Screen/Widgets: iPhone r28, iPad r21, "Liquid Glass/Widget Glass") and the watchOS 26 kit
   (System/Widgets/<size>/Background r14.5, Layout Guide margins). */
.hig-widget {
  box-sizing: border-box; display: inline-flex; flex-direction: column; align-items: center; vertical-align: top;
  font-family: var(--font-sans); color: var(--label-primary);
  /* accented rendering: iPhone, iPad and Mac tint the primary and accent groups white (HIG) — white content on clear glass */
  --hig-widget-accent: var(--white);
}
.hig-widget *, .hig-widget *::before, .hig-widget *::after { box-sizing: border-box; }
.hig-widget__surface {
  position: relative; overflow: hidden;
  width: var(--hig-widget-w); height: var(--hig-widget-h);
  background: var(--hig-widget-bg, transparent);
}
/* Kit "Liquid Glass/Widget Glass" rims every full-color widget: its normal-blend specular edge stands in. */
.hig-widget .hig-widget__surface { border-radius: var(--hig-widget-r); box-shadow: var(--shadow-glass-highlight); }
.hig-widget .hig-widget__surface.hig-glass { border-radius: var(--hig-widget-r); position: relative; }
.hig-widget__content { position: relative; z-index: 1; width: 100%; height: 100%; padding: var(--hig-widget-pad); }
/* Home Screen name label: kit 'Widget Name' SF Pro Medium 12, white, centered, 6pt below the widget — drawn over the
   wallpaper in both appearances, with the kit's Home Screen label shadow (App Icons/Home Screen 'App Name': 0 2 25 black). */
.hig-widget__label { margin-top: 6px; font-size: 12px; line-height: 14px; font-weight: 500; text-align: center; color: var(--on-media); text-shadow: 0 2px 25px var(--black); }
.hig-widget--unavailable { display: inline-block; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--fill-quaternary); color: var(--label-secondary); font-size: 13px; }

/* ---- accessory families (iPhone / iPad Lock Screen) */
.hig-widget--accessoryCircular .hig-widget__surface,
.hig-widget--accessoryCircular .hig-widget__surface.hig-glass { border-radius: 50%; box-shadow: none; }
.hig-widget--accessoryRectangular.hig-widget--iphone .hig-widget__surface,
.hig-widget--accessoryRectangular.hig-widget--ipad .hig-widget__surface,
.hig-widget--accessoryInline .hig-widget__surface { box-shadow: none; }
.hig-widget--accessoryInline .hig-widget__content { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.hig-widget--no-background .hig-widget__surface { background: transparent; box-shadow: none; }
/* AccessoryWidgetBackground: kit Circular masters draw a 58pt blurred disc inside the 72pt frame (inset 7/72),
   filled Labels/Dark - Vibrant/4 Quaternary with plus-lighter. */
.hig-widget--accessory-background .hig-widget__surface::before {
  content: ""; position: absolute; inset: 9.72%; border-radius: 50%;
  /* plus-lighter of #262626 adds 15% white; drawn as a 15% wash of the (white) vibrant primary label */
  background: color-mix(in srgb, var(--vibrant-label-primary) 15%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); /* kit 'Blur' r20 */
}
.hig-widget--accessoryCircular .hig-widget__content { display: grid; place-items: center; text-align: center; }

/* ---- watchOS Smart Stack tile (dark-only) */
.hig-widget--watch { font-family: var(--font-rounded); --hig-widget-accent: var(--hig-widget-tint); }
.hig-widget--watch .hig-widget__surface { box-shadow: none; }

/* ---- rendering modes ---- */
/* Vibrant (Lock Screen, StandBy at night): content desaturated and drawn in the vibrant grays (HIG: white or light
   gray for prominent content, darker grays for secondary). The frame is scoped to the dark token set. */
.hig-widget--vibrant .hig-widget__content {
  color: var(--vibrant-label-primary);
  /* The kit blends vibrant grays plus-lighter (#999 adds 60% white, #404040 25%, #262626 15%); CSS can't blend
     through the page's stacking contexts, so each gray is drawn as that share of white over the backdrop. */
  --label-primary: var(--vibrant-label-primary);
  --label-secondary: color-mix(in srgb, var(--vibrant-label-primary) 60%, transparent);
  --label-tertiary: color-mix(in srgb, var(--vibrant-label-primary) 25%, transparent);
  --label-quaternary: color-mix(in srgb, var(--vibrant-label-primary) 15%, transparent);
  /* vibrant fills #333 / #1f1f1f / #121212 add 20% / 12% / 7% white the same way */
  --fill-primary: color-mix(in srgb, var(--vibrant-label-primary) 20%, transparent);
  --fill-secondary: color-mix(in srgb, var(--vibrant-label-primary) 12%, transparent);
  --fill-tertiary: color-mix(in srgb, var(--vibrant-label-primary) 7%, transparent);
  --separator: color-mix(in srgb, var(--vibrant-label-primary) 10%, transparent); /* #1a1a1a */
  --accent: var(--vibrant-label-primary); --system-red: var(--vibrant-label-primary); --system-orange: var(--vibrant-label-primary);
  --system-yellow: var(--vibrant-label-primary); --system-green: var(--vibrant-label-primary); --system-mint: var(--vibrant-label-primary);
  --system-teal: var(--vibrant-label-primary); --system-cyan: var(--vibrant-label-primary); --system-blue: var(--vibrant-label-primary);
  --system-indigo: var(--vibrant-label-primary); --system-purple: var(--vibrant-label-primary); --system-pink: var(--vibrant-label-primary);
  --system-brown: var(--vibrant-label-primary); --system-gray: var(--label-secondary); --system-gray-2: var(--label-tertiary);
  --system-gray-3: var(--label-tertiary); --system-gray-4: var(--label-quaternary);
  --system-gray-5: var(--label-quaternary); --system-gray-6: var(--label-quaternary);
}
.hig-widget--vibrant .hig-widget__content :is(img, picture, video, image) { filter: grayscale(1); }
.hig-widget--vibrant.hig-widget--systemSmall .hig-widget__surface,
.hig-widget--vibrant.hig-widget--systemMedium .hig-widget__surface,
.hig-widget--vibrant.hig-widget--systemLarge .hig-widget__surface { background: transparent; box-shadow: none; } /* StandBy: background removed */

/* Accented (tinted / clear Home Screen; watch): the background becomes Liquid Glass and every view takes one solid
   color per group — the primary group white, the accent group ([data-widget-accent]) --hig-widget-accent. */
.hig-widget--accented .hig-widget__content,
.hig-widget--accented .hig-widget__content [data-widget-accent] {
  color: var(--hig-widget-group);
  --label-primary: var(--hig-widget-group);
  --label-secondary: color-mix(in srgb, var(--hig-widget-group) 60%, transparent);
  --label-tertiary: color-mix(in srgb, var(--hig-widget-group) 30%, transparent);
  --label-quaternary: color-mix(in srgb, var(--hig-widget-group) 18%, transparent);
  --fill-primary: color-mix(in srgb, var(--hig-widget-group) 20%, transparent);
  --fill-secondary: color-mix(in srgb, var(--hig-widget-group) 16%, transparent);
  --fill-tertiary: color-mix(in srgb, var(--hig-widget-group) 12%, transparent);
  --accent: var(--hig-widget-group); --system-red: var(--hig-widget-group); --system-orange: var(--hig-widget-group);
  --system-yellow: var(--hig-widget-group); --system-green: var(--hig-widget-group); --system-mint: var(--hig-widget-group);
  --system-teal: var(--hig-widget-group); --system-cyan: var(--hig-widget-group); --system-blue: var(--hig-widget-group);
  --system-indigo: var(--hig-widget-group); --system-purple: var(--hig-widget-group); --system-pink: var(--hig-widget-group);
  --system-brown: var(--hig-widget-group); --system-gray: var(--hig-widget-group);
}
/* the kit's label opacities (60/30/18%) and fill opacities (20/16/12%) are applied to the group color */
.hig-widget--accented .hig-widget__content { --hig-widget-group: var(--white); }
.hig-widget--accented .hig-widget__content [data-widget-accent] { --hig-widget-group: var(--hig-widget-accent); }
.hig-widget--accented .hig-widget__content :is(img, picture, video, image) { filter: grayscale(1); }
/* clear Liquid Glass over bright content gets the HIG's 35% dimming layer (glass-dim) so white content stays legible */
.hig-widget--accented .hig-widget__surface.hig-glass--clear { background: var(--glass-dim); }
.hig-widget--accented.hig-widget--watch .hig-widget__surface { background: var(--hig-widget-bg, transparent); }