/* SakinLab UI 2 — the central stylesheet of the component library (contracts: docs/ui2/README.md).
   A page opts in with <html data-ui="2">; nothing here styles a page that hasn't. Component classes are ui-*.
   Design system: Fluid Functionalism (MIT, see docs/ui2/THIRD-PARTY.md) — its surfaces ladder, shadow recipes, type
   scale, sizes, shapes and motion tiers — carried in SakinLab's own palette and its five appearances
   (light, dark, green, blue, cloud). The tools' palette tokens (--panel, --text, --muted, --c-accent …) stay the
   source of every colour; this file only derives from them. UI type is Inter; a user's design fonts are untouched. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin-opsz.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-opsz.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ======================================================================================================
   1. Tokens
   ====================================================================================================== */
:root:is([data-ui="2"], [data-ff-color]) {   /* tokens only: a legacy page that hosts a Fluid island (Guide) needs them too */
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: var(--ui-font);   /* UI chrome only; tools draw designs with their own named fonts */

  /* colour roles, all from the palette */
  --ui-fg: var(--text, var(--ink));   /* site pages (core.css only) have the ink and paper, tools the panel roles */
  --ui-muted: var(--muted, var(--ink-soft));
  --ui-subtle: color-mix(in srgb, var(--ui-muted) 70%, transparent);
  --ui-bg: var(--panel, var(--paper));
  --ui-canvas: var(--bg-canvas, var(--paper));
  --ui-accent: var(--c-accent);
  --ui-on-accent: var(--c-on-accent);
  --ui-accent-hover: var(--c-accent-hover);
  --ui-accent-press: var(--c-accent-press);
  --ui-accent-soft: color-mix(in srgb, var(--c-accent) 16%, transparent);
  --ui-accent-text: var(--c-accent-text, var(--c-accent));
  --ui-danger: var(--c-alert);
  --ui-danger-text: var(--c-alert-text, var(--c-alert));
  --ui-danger-soft: color-mix(in srgb, var(--c-alert) 12%, transparent);
  --ui-ok: var(--c-ok);
  --ui-focus: var(--c-accent);

  /* interaction washes (FF --hover/--active/--tint) mixed from the ink, so every appearance gets its own */
  --ui-hover-a: 4%; --ui-active-a: 7%; --ui-tint-a: 7%; --ui-tint-hover-a: 10%; --ui-border-a: 12%;
  --ui-hover: color-mix(in srgb, var(--ui-fg) var(--ui-hover-a), transparent);
  --ui-active: color-mix(in srgb, var(--ui-fg) var(--ui-active-a), transparent);
  --ui-tint: color-mix(in srgb, var(--ui-fg) var(--ui-tint-a), transparent);
  --ui-tint-hover: color-mix(in srgb, var(--ui-fg) var(--ui-tint-hover-a), transparent);
  --ui-border: color-mix(in srgb, var(--ui-fg) var(--ui-border-a), transparent);
  --ui-border-soft: color-mix(in srgb, var(--ui-fg) 7%, transparent);
  --ui-track: color-mix(in srgb, var(--ui-fg) 5%, transparent);

  /* surfaces ladder (FF --surface-1..8): the panel lifted toward white; light papers lift far, dark ones a little */
  --ui-lift-2: 40%; --ui-lift-3: 100%; --ui-lift-4: 100%;
  --ui-s1: var(--ui-bg);
  --ui-s2: color-mix(in srgb, var(--ui-bg), #fff var(--ui-lift-2));
  --ui-s3: color-mix(in srgb, var(--ui-bg), #fff var(--ui-lift-3));
  --ui-s4: color-mix(in srgb, var(--ui-bg), #fff var(--ui-lift-4));
  --ui-scrim: rgb(0 0 0 / .4);
  --ui-tip-bg: var(--ui-fg);
  --ui-tip-fg: var(--ui-bg);

  /* shadow recipes (FF): light = additive drops; dark = inset highlight + ring + drops */
  --ui-sh: rgb(0 0 0 / .06);
  --ui-shadow-1: 0 0 0 1px var(--ui-sh);
  --ui-shadow-2: 0 0 0 1px var(--ui-sh), 0 1px 1px -.5px var(--ui-sh);
  --ui-shadow-3: 0 0 0 1px var(--ui-sh), 0 1px 1px -.5px var(--ui-sh), 0 3px 3px -1.5px var(--ui-sh);
  --ui-shadow-4: 0 0 0 1px var(--ui-sh), 0 1px 1px -.5px var(--ui-sh), 0 3px 3px -1.5px var(--ui-sh), 0 6px 6px -3px var(--ui-sh);
  --ui-shadow-5: 0 0 0 1px var(--ui-sh), 0 1px 1px -.5px var(--ui-sh), 0 3px 3px -1.5px var(--ui-sh), 0 6px 6px -3px var(--ui-sh), 0 12px 12px -6px var(--ui-sh);
  --ui-shadow-6: 0 0 0 1px var(--ui-sh), 0 1px 1px -.5px var(--ui-sh), 0 3px 3px -1.5px var(--ui-sh), 0 6px 6px -3px var(--ui-sh), 0 12px 12px -6px var(--ui-sh), 0 24px 24px -12px var(--ui-sh);

  /* type scale (FF, Inter): display 28/34 · title 16/22 · subtitle 14/20 · body 13/20 · caption 12/16 · micro 11/14 */
  --ui-fs-display: 28px; --ui-lh-display: 34px;
  --ui-fs-title: 16px; --ui-lh-title: 22px;
  --ui-fs-subtitle: 14px; --ui-lh-subtitle: 20px;
  --ui-fs-body: 13px; --ui-lh-body: 20px;
  --ui-fs-caption: 12px; --ui-lh-caption: 16px;
  --ui-fs-micro: 11px; --ui-lh-micro: 14px;
  /* the same roles as the density sets them (FF type-scale: body = labels and control text, caption = descriptions, group labels and meta,
     micro = counters and tiny badges; compact 12/18 · 11/14 · 10/12, default 13/20 · 12/16 · 11/14): --ui-fs/--ui-lh, -sub and -mini */
  --ui-fs-sub: 12px; --ui-lh-sub: 16px; --ui-fs-mini: 11px; --ui-lh-mini: 14px;
  --ui-w-normal: 400; --ui-w-semibold: 550; --ui-w-bold: 700;

  /* sizes (FF default): control 36 · row 32 · icon 16 · gap 8 */
  --ui-h: 36px; --ui-row: 32px; --ui-icon: 16px; --ui-gap: 8px; --ui-pad-x: 16px;
  --ui-fs: var(--ui-fs-body); --ui-lh: var(--ui-lh-body); --ui-fs-sub: 12px; --ui-lh-sub: 16px; --ui-fs-mini: 11px; --ui-lh-mini: 14px;

  /* shapes. Item/box/small are the content radii (cards, thumbnails, panels drawn by the tools); the three role
     radii below are what the Shape preference moves (FF shape-context: button · item · container), so a Pill
     interface never rounds a picture, a card or a note */
  --ui-r-item: 8px; --ui-r-box: 12px; --ui-r-small: 6px; --ui-r-ring: 10px;
  --ui-r-control: var(--ui-r-item);   /* button, input, select, slider, segmented, button group */
  --ui-r-row: var(--ui-r-item);       /* menu and nav rows, list rows, hover and selection layers */
  --ui-r-surface: var(--ui-r-box);    /* menu, popover, dialog, floating bar */
  --ui-r-chip: var(--ui-r-small);     /* chip, badge, tooltip */

  /* spacing (4-grid; Finder's 2/6 half-steps where a dense list needs them) */
  --ui-sp-0: 2px; --ui-sp-1: 4px; --ui-sp-15: 6px; --ui-sp-2: 8px; --ui-sp-3: 12px; --ui-sp-4: 16px; --ui-sp-5: 20px; --ui-sp-6: 24px; --ui-sp-7: 28px; --ui-label-w: 72px;

  /* motion (filled by ui.js from the spring tiers: --ui-fast/-moderate/-slow, --ui-ease-*, --ui-ease-exit) */
  --ui-ease-exit: cubic-bezier(.23, 1, .32, 1);
}
/* Motion contract: on a UI 2 page the legacy short durations (core.css) come from the same tiers as the vanilla library
   and the Fluid islands (springs.ts), so a press, a fade and a small move keep one tempo whoever draws them. The
   larger scene motions (--duration-panel, -scene, -spring, -reveal) have no tier and stay core.css's.
   tests/motion-contract.mjs keeps ui.js and springs.ts equal. */
:root[data-ui="2"] { --duration-press: var(--ui-moderate-exit, 120ms); --duration-fast: var(--ui-moderate, 160ms); --duration-ui: var(--ui-slow, 240ms); }
/* Dark papers: dark, green, blue — FF's dark recipes, additive lifts */
:root:is([data-ui="2"], [data-ff-color]):is([data-appearance="dark"], [data-appearance="green"], [data-appearance="blue"]) {
  --ui-hover-a: 6%; --ui-active-a: 10%; --ui-tint-a: 10%; --ui-tint-hover-a: 14%; --ui-border-a: 12%;
  --ui-lift-2: 3.5%; --ui-lift-3: 6%; --ui-lift-4: 8.5%;
  --ui-scrim: rgb(0 0 0 / .72);
  --ui-shadow-1: inset 0 0 0 1px rgb(255 255 255 / .02);
  --ui-shadow-2: inset 0 1px 0 0 rgb(255 255 255 / .01), inset 0 0 0 1px rgb(255 255 255 / .02), 0 1px 1px -.5px rgb(0 0 0 / .18);
  --ui-shadow-3: inset 0 1px 0 0 rgb(255 255 255 / .02), inset 0 0 0 1px rgb(255 255 255 / .04), 0 0 0 1px rgb(0 0 0 / .12), 0 1px 1px -.5px rgb(0 0 0 / .18), 0 3px 3px -1.5px rgb(0 0 0 / .18);
  --ui-shadow-4: inset 0 1px 0 0 rgb(255 255 255 / .02), inset 0 0 0 1px rgb(255 255 255 / .04), 0 0 0 1px rgb(0 0 0 / .14), 0 1px 1px -.5px rgb(0 0 0 / .18), 0 3px 3px -1.5px rgb(0 0 0 / .18), 0 6px 6px -3px rgb(0 0 0 / .18);
  --ui-shadow-5: inset 0 1px 0 0 rgb(255 255 255 / .04), inset 0 0 0 1px rgb(255 255 255 / .04), 0 0 0 1px rgb(0 0 0 / .16), 0 1px 1px -.5px rgb(0 0 0 / .18), 0 3px 3px -1.5px rgb(0 0 0 / .18), 0 6px 6px -3px rgb(0 0 0 / .18), 0 12px 12px -6px rgb(0 0 0 / .18);
  --ui-shadow-6: inset 0 1px 0 0 rgb(255 255 255 / .04), inset 0 0 0 1px rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .18), 0 1px 1px -.5px rgb(0 0 0 / .18), 0 3px 3px -1.5px rgb(0 0 0 / .18), 0 6px 6px -3px rgb(0 0 0 / .18), 0 12px 12px -6px rgb(0 0 0 / .18), 0 24px 24px -12px rgb(0 0 0 / .18);
}
:root:is([data-ui="2"], [data-ff-color]):is([data-appearance="green"], [data-appearance="blue"]) { --ui-scrim: rgb(0 0 0 / .5); --ui-lift-3: 7%; --ui-lift-4: 10%; }
:root:is([data-ui="2"], [data-ff-color])[data-appearance="cloud"] { --ui-lift-2: 30%; --ui-lift-3: 70%; --ui-lift-4: 85%; }

/* Compact density (FF compact: control 28 · row 28 · icon 14 · gap 4 · body 12/18): every tool panel, bar and menu */
:root[data-ui="2"] [data-density="compact"], :root[data-ui="2"][data-density="compact"],
:root[data-ui="2"][data-ui-density="compact"], :root[data-ui="2"][data-ui-density="compact"] [data-density="default"],
:root[data-ui="2"] .ui-bar :is(.ui-popover, .ui-menu) {   /* a bar's own popovers: FF's toolbar popups are compact */
  --ui-h: 28px; --ui-row: 28px; --ui-icon: 16px; --ui-gap: 4px; --ui-pad-x: 12px;
  --ui-fs: var(--ui-fs-caption); --ui-lh: 18px; --ui-fs-sub: 11px; --ui-lh-sub: 14px; --ui-fs-mini: 10px; --ui-lh-mini: 12px;
}
:root[data-ui="2"][data-density="default"]:not([data-ui-density="compact"]), :root[data-ui="2"]:not([data-ui-density="compact"]) [data-density="default"] { --ui-h: 36px; --ui-row: 32px; --ui-icon: 16px; --ui-gap: 8px; --ui-pad-x: 16px; --ui-fs: var(--ui-fs-body); --ui-lh: var(--ui-lh-body); --ui-fs-sub: 12px; --ui-lh-sub: 16px; --ui-fs-mini: 11px; --ui-lh-mini: 14px; }
/* The two sizes of the family (FF size-context): a tool page is compact (<html data-density="compact">: Figma-sized
   panels, bars, menus and dialogs); Collect's Simple mode (<html data-library-simple>) is the large, default step all
   through, its sidebars and menus included */
:root[data-ui="2"][data-library-simple], :root[data-ui="2"][data-library-simple] :is([data-density], .ui-bar :is(.ui-popover, .ui-menu)) {
  --ui-h: 36px; --ui-row: 32px; --ui-icon: 16px; --ui-gap: 8px; --ui-pad-x: 16px; --ui-fs: var(--ui-fs-body); --ui-lh: var(--ui-lh-body); --ui-fs-sub: 12px; --ui-lh-sub: 16px; --ui-fs-mini: 11px; --ui-lh-mini: 14px;
}

/* Density in Settings, every page: Compact inside Simple, and Default (the large step) on a tool page */
:root[data-ui="2"][data-library-simple][data-ui-density="compact"], :root[data-ui="2"][data-library-simple][data-ui-density="compact"] :is([data-density], .ui-bar :is(.ui-popover, .ui-menu)) {
  --ui-h: 28px; --ui-row: 28px; --ui-icon: 16px; --ui-gap: 4px; --ui-pad-x: 12px; --ui-fs: var(--ui-fs-caption); --ui-lh: 18px; --ui-fs-sub: 11px; --ui-lh-sub: 14px; --ui-fs-mini: 10px; --ui-lh-mini: 12px;
}

:root[data-ui="2"][data-ui-density="default"]:not([data-library-simple]), :root[data-ui="2"][data-ui-density="default"] :is([data-density], .ui-bar :is(.ui-popover, .ui-menu)) {
  --ui-h: 36px; --ui-row: 32px; --ui-icon: 16px; --ui-gap: 8px; --ui-pad-x: 16px; --ui-fs: var(--ui-fs-body); --ui-lh: var(--ui-lh-body); --ui-fs-sub: 12px; --ui-lh-sub: 16px; --ui-fs-mini: 11px; --ui-lh-mini: 14px;
}

/* Shape preference (SakinUI.prefs → <html data-ui-shape>). Rounded is the shipped UI 2 and writes nothing.
   Pill = FF's pill shape map: controls and rows become capsules, containers 24 px; content radii stay. */
:root[data-ui="2"][data-ui-shape="pill"] {
  --ui-r-control: 999px; --ui-r-row: 999px; --ui-r-surface: 24px; --ui-r-chip: 999px; --ui-r-ring: 999px;
}
:root[data-ui="2"][data-ui-shape="pill"] .ui-textarea { border-radius: 16px; }
/* a dialog or a big panel keeps a calmer corner than a menu (FF: container radius for popups, 24 for sheets) */
:root[data-ui="2"][data-ui-shape="pill"] :is(.ui-callout, .ui-section) { border-radius: 16px; }
/* the change itself: radius and size cross-fade once (FF ShapeProvider "transitioning", 180 ms), never on load */
:root[data-ui="2"].ui-prefs-moving :is(.ui-button, .ui-icon-button, .ui-input, .ui-select, .ui-input-group, .ui-segmented, .ui-seg, .ui-chip, .ui-menu, .ui-popover, .ui-dialog, .ui-bar, .ui-menu-item, .ui-nav-item, .ui-hl, .ui-ind) {
  transition: border-radius 180ms ease-out, height 180ms ease-out, background-color var(--ui-fast, 80ms) linear !important;
}
/* Icon family preference (data-ui-icons): a filled family (Phosphor) stays filled wherever a rule draws strokes */
:root[data-ui="2"] svg[data-ui-fill] { fill: currentColor !important; stroke: none !important; }

/* Font option (Settings > Interface): UI type only; designs and exports never read --ui-font */
@font-face { font-family: "Geist UI"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist.woff2") format("woff2"); }
:root[data-ui-font="geist"] { --ui-font: "Geist UI", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ======================================================================================================
   2. Base
   ====================================================================================================== */
:root[data-ui="2"] body { font-family: var(--ui-font); font-size: var(--ui-fs); line-height: var(--ui-lh); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:root[data-ui="2"] :is(button, input, select, textarea) { font: inherit; letter-spacing: inherit; }
:root[data-ui="2"] :focus-visible { outline: 1px solid var(--ui-focus); outline-offset: 0; }
:root[data-ui="2"] ::selection { background: var(--ui-accent-soft); }
:root[data-ui="2"] * { scrollbar-width: thin; scrollbar-color: var(--ui-border) transparent; }
:root[data-ui="2"] [hidden]:not([hidden="until-found"]) { display: none !important; }

.ui-positioned { position: relative; }
.ui-icon { width: var(--ui-icon); height: var(--ui-icon); flex: none; display: block; stroke-width: 1.5; transition: stroke-width var(--ui-fast, 80ms) linear; }
span[data-ui-icon] { display: inline-block; flex: none; width: var(--ui-icon); height: var(--ui-icon); }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-muted { color: var(--ui-muted); }
.ui-caption { font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
.ui-micro { font-size: var(--ui-fs-micro); line-height: var(--ui-lh-micro); }
.ui-title { font-size: var(--ui-fs-title); line-height: var(--ui-lh-title); font-weight: var(--ui-w-semibold); color: var(--ui-fg); margin: 0; }
.ui-subtitle { font-size: var(--ui-fs-subtitle); line-height: var(--ui-lh-subtitle); font-weight: var(--ui-w-semibold); color: var(--ui-fg); margin: 0; }
.ui-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-grow { flex: 1 1 auto; min-width: 0; }
.ui-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A label that turns semibold on hover/selection without moving its neighbours (FF's invisible bold copy):
   <span class="ui-t" data-t="Label">Label</span>. ui.js fills data-t when a template doesn't. */
.ui-t { display: inline-grid; min-width: 0; }
.ui-t::after { content: attr(data-t); font-weight: var(--ui-w-semibold); height: 0; visibility: hidden; overflow: hidden; white-space: nowrap; pointer-events: none; user-select: none; }

/* Fluid hover highlight and selection indicator: layers owned by ui.js (one per group) */
.ui-hl, .ui-ind { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; border-radius: var(--ui-r-row); opacity: 0; will-change: transform, width, height; }
.ui-hl { background: var(--ui-hover); }
.ui-hl[data-on], .ui-ind[data-on] { opacity: 1; }
.ui-ind { background: var(--ui-active); }
[data-ui-hover] > :not(.ui-hl, .ui-ind), [data-ui-indicator] > :not(.ui-hl, .ui-ind) { position: relative; z-index: 1; }

/* ======================================================================================================
   3. Buttons (FF button.tsx): the ground is an inset layer whose 1px spread collapses on press
   ====================================================================================================== */
.ui-button, .ui-icon-button {
  --btn-bg: transparent; --btn-ring: transparent; --btn-fg: var(--ui-fg);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-gap);
  height: var(--ui-h); padding: 0 var(--ui-pad-x); margin: 0; border: 0; border-radius: var(--ui-r-control); background: none;
  color: var(--btn-fg); font: inherit; font-size: var(--ui-fs); line-height: var(--ui-lh); font-weight: var(--ui-w-semibold);
  white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; text-decoration: none;
  transition: color var(--ui-fast, 80ms) linear;
}
.ui-button::before, .ui-icon-button::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit;
  background: var(--btn-bg); box-shadow: 0 0 0 1px var(--btn-bg), inset 0 0 0 0 var(--btn-ring), 0 0 0 1px var(--btn-ring);
  transition: box-shadow 180ms cubic-bezier(.23, 1, .32, 1), background-color var(--ui-fast, 80ms) ease;
}
.ui-button:active:not(:disabled)::before, .ui-icon-button:active:not(:disabled)::before { box-shadow: 0 0 0 0 var(--btn-bg), inset 0 0 0 1px var(--btn-ring), 0 0 0 0 var(--btn-ring); transition-duration: 80ms, 80ms; }
.ui-button { gap: 6px; }
.ui-button > .ui-icon:first-child { margin-inline-start: -2px; }
.ui-icon-button { width: var(--ui-h); padding: 0; flex: none; --btn-fg: var(--ui-muted); }
.ui-icon-button > .ui-icon { margin: 0; }
.ui-button:disabled, .ui-icon-button:disabled, .ui-button[aria-disabled="true"] { opacity: .45; cursor: default; }
.ui-button:focus-visible, .ui-icon-button:focus-visible { outline: 1px solid var(--ui-focus); outline-offset: 0; }

/* primary: SakinLab's accent is the action colour */
.ui-button[data-variant="primary"] { --btn-bg: var(--ui-accent); --btn-fg: var(--ui-on-accent); }
/* secondary: a tint of the ink */
.ui-button[data-variant="secondary"], .ui-button:not([data-variant]) { --btn-bg: var(--ui-tint); }
/* tertiary: a hairline ring */
.ui-button[data-variant="tertiary"] { --btn-ring: var(--ui-border); }
/* ghost: muted until hovered */
.ui-button[data-variant="ghost"] { --btn-fg: var(--ui-muted); padding: 0 calc(var(--ui-pad-x) - 4px); }
.ui-button[data-variant="danger"] { --btn-fg: var(--ui-danger-text); --btn-ring: color-mix(in srgb, var(--ui-danger) 35%, transparent); }
.ui-button[data-variant="danger"].armed { --btn-bg: var(--ui-danger); --btn-fg: var(--c-on-alert, #fff); }   /* "click again" */
.ui-button[data-variant="danger-solid"] { --btn-bg: var(--ui-danger); --btn-fg: var(--c-on-alert, #fff); }
@media (hover: hover) and (pointer: fine) {
  .ui-button[data-variant="primary"]:hover:not(:disabled) { --btn-bg: var(--ui-accent-hover); }
  .ui-button:is([data-variant="secondary"], :not([data-variant])):hover:not(:disabled) { --btn-bg: var(--ui-tint-hover); }
  .ui-button:is([data-variant="tertiary"], [data-variant="ghost"]):hover:not(:disabled), .ui-icon-button:hover:not(:disabled) { --btn-bg: var(--ui-hover); --btn-fg: var(--ui-fg); }
  .ui-button[data-variant="danger"]:hover:not(:disabled) { --btn-bg: var(--ui-danger-soft); }
  .ui-icon-button:hover:not(:disabled) > .ui-icon { stroke-width: 2; }
}
.ui-button[data-variant="primary"]:active:not(:disabled) { --btn-bg: var(--ui-accent-press); }
.ui-button:is([data-variant="tertiary"], [data-variant="ghost"]):active:not(:disabled), .ui-icon-button:active:not(:disabled) { --btn-bg: var(--ui-active); }
/* a toggled icon button (aria-pressed / aria-expanded / .is-on): the active wash, ink-coloured */
.ui-icon-button:is([aria-pressed="true"], [aria-expanded="true"], .is-on, .active) { --btn-bg: var(--ui-active); --btn-fg: var(--ui-fg); }
.ui-icon-button[data-tone="accent"]:is([aria-pressed="true"], .is-on) { --btn-bg: var(--ui-accent-soft); --btn-fg: var(--ui-accent-text); }
.ui-button[data-block] { width: 100%; }
.ui-button[data-size="small"], .ui-icon-button[data-size="small"] { --ui-h: 24px; --ui-pad-x: 8px; --ui-icon: 16px; font-size: var(--ui-fs-caption); }
.ui-icon-button[data-size="small"] { width: 24px; }
/* large: a page's call to action (marketing pages) */
.ui-button[data-size="large"] { --ui-h: 44px; --ui-pad-x: 22px; --ui-icon: 18px; font-size: var(--ui-fs-subtitle, 15px); }
/* a two-state icon button: [data-swap="off"] shows at rest, [data-swap="on"] while pressed (.active / aria-pressed),
   e.g. the eye that hides a layer: <button class="ui-icon-button ui-swap"><span data-swap="off" data-ui-icon="eye"></span><span data-swap="on" data-ui-icon="eye-off"></span></button> */
.ui-swap > [data-swap="on"], .ui-swap:is(.active, [aria-pressed="true"]) > [data-swap="off"] { display: none; }
.ui-swap:is(.active, [aria-pressed="true"]) > [data-swap="on"] { display: inline-flex; }
/* a quiet text link-button (FF ghost, no padding) */
.ui-link { border: 0; background: none; padding: 0; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs); cursor: pointer; text-decoration: underline; text-decoration-color: var(--ui-border); text-underline-offset: 3px; transition: color var(--ui-fast, 80ms) linear, text-decoration-color var(--ui-fast, 80ms) linear; }
.ui-link:hover { color: var(--ui-fg); text-decoration-color: currentColor; }
.ui-link:disabled { opacity: .45; cursor: default; }

/* ======================================================================================================
   4. Fields: input, textarea, select trigger, field label, input group
   ====================================================================================================== */
.ui-input, .ui-textarea, .ui-select {
  box-sizing: border-box; width: 100%; min-width: 0; height: var(--ui-h); margin: 0; padding: 0 10px;
  border: 0; border-radius: var(--ui-r-control); background: transparent; color: var(--ui-fg);
  box-shadow: inset 0 0 0 1px var(--ui-border); font: inherit; font-size: var(--ui-fs); line-height: var(--ui-lh);
  transition: box-shadow var(--ui-fast, 80ms) linear, background-color var(--ui-fast, 80ms) linear; outline: none;
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-subtle); }
@media (hover: hover) and (pointer: fine) { .ui-input:hover:not(:focus):not(:disabled), .ui-textarea:hover:not(:focus):not(:disabled), .ui-select:hover:not(:disabled) { background: var(--ui-hover); } }
.ui-input:focus, .ui-textarea:focus, .ui-select:focus-visible, .ui-input-group:focus-within { box-shadow: inset 0 0 0 1px var(--ui-focus); outline: none; }
.ui-input:disabled, .ui-textarea:disabled, .ui-select:disabled { opacity: .5; }
.ui-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--ui-danger); }
/* FF's InputField look, for the fields its island does not draw (textarea, units, swatches, scrubbers) and for every
   field until the island is warm: no frame at rest, a tint and the border on hover, the card surface and the border
   while typing (no accent ring) */
.ui-input, .ui-textarea, .ui-input-group:not(.shell-color) { background: var(--ui-track); box-shadow: inset 0 0 0 1px transparent; }
@media (hover: hover) and (pointer: fine) { .ui-input:hover:not(:focus):not(:disabled), .ui-textarea:hover:not(:focus):not(:disabled), .ui-input-group:not(.shell-color):hover:not(:focus-within) { background: var(--ui-track); box-shadow: inset 0 0 0 1px var(--ui-border); } }
.ui-input:focus, .ui-textarea:focus, .ui-input-group:not(.shell-color):focus-within { background: var(--ui-s3); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-input[aria-invalid="true"]:not(:focus) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-danger) 50%, transparent); }
.sk-export-folder .folder-control > .ui-icon-button { width: 24px; height: 24px; margin-inline-end: -3px; }   /* the folder button on the function column, as the head buttons above it */
.ui-textarea { height: auto; min-height: calc(var(--ui-h) * 2); padding: 7px 10px; resize: none; display: block; }
.ui-input[type="number"] { font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ui-input[type="number"]::-webkit-inner-spin-button, .ui-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* input group: a leading icon or a unit suffix inside the same box */
.ui-input-group { position: relative; display: flex; align-items: center; gap: 6px; height: var(--ui-h); padding: 0 10px; border-radius: var(--ui-r-control); box-shadow: inset 0 0 0 1px var(--ui-border); color: var(--ui-muted); transition: box-shadow var(--ui-fast, 80ms) linear, background-color var(--ui-fast, 80ms) linear; min-width: 0; }
.ui-input-group > input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; color: var(--ui-fg); outline: none; font: inherit; font-size: var(--ui-fs); }
.ui-input-group > input::placeholder { color: var(--ui-subtle); }
@media (hover: hover) and (pointer: fine) { .ui-input-group:hover:not(:focus-within) { background: var(--ui-hover); } }
.ui-input-group > .ui-affix { flex: none; font-size: var(--ui-fs-caption); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
/* filled is the search field's look (FF search: a tinted well with its glyph); every field that holds a value (inputs,
   selects, colours) is the one outlined field, in every tool, whatever variant a template asked for */
.ui-input-group[data-variant="filled"]:not(.shell-color) { background: var(--ui-track); box-shadow: inset 0 0 0 1px transparent; }

/* select trigger (a button over a native <select> that stays the value owner) */
.ui-select { display: inline-flex; align-items: center; gap: 6px; text-align: start; cursor: pointer; padding: 0 6px 0 10px; }
.ui-select > .ui-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select > .ui-icon { color: var(--ui-muted); transition: color var(--ui-fast, 80ms) linear, stroke-width var(--ui-fast, 80ms) linear; }
.ui-select > [data-ui-icon] { color: var(--ui-muted); }
.ui-select:hover > .ui-icon { color: var(--ui-fg); stroke-width: 2; }
.ui-select[data-variant="ghost"] { box-shadow: none; }
.ui-select-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }

/* a field: label above (caption, muted) or beside ([data-inline]) */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-field > label, .ui-label { min-height: 20px; font-size: var(--ui-fs); line-height: var(--ui-lh); color: var(--ui-muted); font-weight: var(--ui-w-normal); }   /* 20 + 4 + 28: the same 52 as FF's field */
.ui-field[data-inline] { flex-direction: row; align-items: center; gap: var(--ui-sp-2); }
.ui-field[data-inline] > label { flex: 0 0 auto; min-width: var(--ui-label-w); }
/* two fields side by side: each column is (panel 217 - 8) / 2 = 104 px, label above (the 52 px field) */
.ui-field-row { display: flex; gap: var(--ui-sp-2); min-width: 0; }
.ui-field-row > * { flex: 1 1 0; }
/* the text hierarchy of a panel (FF roles): label = body, hint and section title = caption, badge = micro */
.ui-hint { font-size: var(--ui-fs-sub); line-height: var(--ui-lh-sub); min-height: 16px; color: var(--ui-muted); margin: 0; }
.ui-hint[data-tone="danger"] { color: var(--ui-danger-text); }
.ui-hint[data-tone="warn"] { color: var(--warn-text, #825700); }
.ui-hint:empty { display: none; }

/* ======================================================================================================
   5. Choice controls: switch, checkbox, radio
   ====================================================================================================== */
.ui-switch { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--ui-sp-2); margin: 0; padding: 0; border: 0; background: none; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--ui-tint-hover); transition: background-color var(--ui-moderate, 160ms) linear; }
.ui-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 0 0 .5px rgb(0 0 0 / .06); transition: transform var(--ui-moderate, 160ms) var(--ui-ease-moderate, ease-out); }
.ui-switch:is([aria-checked="true"], [aria-pressed="true"], .is-on, .active) { color: var(--ui-fg); }
.ui-switch:is([aria-checked="true"], [aria-pressed="true"], .is-on, .active) .ui-switch-track { background: var(--ui-accent); }
.ui-switch:is([aria-checked="true"], [aria-pressed="true"], .is-on, .active) .ui-switch-thumb { transform: translateX(14px); }
[dir="rtl"] .ui-switch:is([aria-checked="true"], [aria-pressed="true"], .is-on, .active) .ui-switch-thumb { transform: translateX(-14px); }
[dir="rtl"] .ui-switch-thumb { left: auto; right: 2px; }
/* the same switch over a real checkbox (a form's own state): <label class="ui-switch" data-block><span class="ui-grow">…</span>
   <input type="checkbox"><span class="ui-switch-track"><span class="ui-switch-thumb"></span></span></label> */
/* Switch row (SakinUI.switch): FF's own switch keeps its geometry and motion; the colours are the palette's */
.ui-switch-host { display: flex; align-items: center; }
.ui-switch-host > .ui-switch { color: var(--ui-fg); }
.ui-switch-host > .ui-switch .ui-switch-label { margin-inline-start: var(--ui-sp-2); }
.ui-switch-host > .ui-switch .ui-switch-track { background: var(--ui-tint-hover); }
.ui-switch-host > .ui-switch[aria-checked="true"] .ui-switch-track { background: var(--ui-accent); }
.ui-switch-host > .ui-switch[aria-checked="true"] .ui-switch-thumb { transform: translateX(14px); }
.ui-switch > input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-switch:has(> input:checked) { color: var(--ui-fg); }
.ui-switch:has(> input:checked) .ui-switch-track { background: var(--ui-accent); }
.ui-switch:has(> input:checked) .ui-switch-thumb { transform: translateX(14px); }
[dir="rtl"] .ui-switch:has(> input:checked) .ui-switch-thumb { transform: translateX(-14px); }
[data-density="compact"] .ui-switch:has(> input:checked) .ui-switch-thumb { transform: translateX(12px); }
.ui-switch:has(> input:focus-visible) .ui-switch-track { box-shadow: 0 0 0 2px var(--ui-focus); }
.ui-switch:has(> input:disabled) { opacity: .5; cursor: default; }
.ui-switch[data-block] { display: flex; width: 100%; min-height: var(--ui-row); }
[data-density="compact"] .ui-switch-track { width: 28px; height: 16px; }
[data-density="compact"] .ui-switch-thumb { width: 12px; height: 12px; }
[data-density="compact"] .ui-switch:is([aria-checked="true"], [aria-pressed="true"], .is-on, .active) .ui-switch-thumb { transform: translateX(12px); }
[dir="rtl"] [data-density="compact"] .ui-switch:is([aria-checked="true"], [aria-pressed="true"], .is-on, .active) .ui-switch-thumb { transform: translateX(-12px); }
.ui-switch:focus-visible { outline: none; }
.ui-switch:focus-visible .ui-switch-track { outline: 1px solid var(--ui-focus); outline-offset: 2px; }
.ui-switch:disabled { opacity: .45; cursor: default; }

.ui-check, .ui-radio { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 16px; height: 16px; margin: 0; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ui-border); background: transparent; cursor: pointer; transition: box-shadow var(--ui-fast, 80ms) linear, background-color var(--ui-fast, 80ms) linear; }
.ui-radio { border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .ui-check:hover:not(:disabled):not(:checked), .ui-radio:hover:not(:disabled):not(:checked) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ui-fg) 35%, transparent); } }
.ui-check:checked, .ui-check:indeterminate, .ui-radio:checked { background: var(--ui-accent); box-shadow: inset 0 0 0 1.5px var(--ui-accent); }
.ui-check::after { content: ""; position: absolute; inset: 0; background: var(--ui-on-accent); opacity: 0; transform: scale(.6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: opacity var(--ui-fast, 80ms) linear, transform var(--ui-moderate, 160ms) var(--ui-ease-moderate, ease-out); }
.ui-check:indeterminate::after { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); -webkit-mask-size: 8px 1.5px; mask-size: 8px 1.5px; }
.ui-radio::after { content: ""; position: absolute; inset: 5px; border-radius: 999px; background: var(--ui-on-accent); opacity: 0; transform: scale(.4); transition: opacity var(--ui-fast, 80ms) linear, transform var(--ui-moderate, 160ms) var(--ui-ease-moderate, ease-out); }
.ui-check:is(:checked, :indeterminate)::after, .ui-radio:checked::after { opacity: 1; transform: none; }
.ui-check:disabled, .ui-radio:disabled { opacity: .45; cursor: default; }
[data-density="compact"] :is(.ui-check, .ui-radio) { width: 14px; height: 14px; border-radius: 4px; }
[data-density="compact"] .ui-radio { border-radius: 999px; }
[data-density="compact"] .ui-radio::after { inset: 4px; }
.ui-choice { display: flex; align-items: center; gap: var(--ui-sp-2); min-height: var(--ui-row); color: var(--ui-muted); cursor: pointer; font-size: var(--ui-fs); transition: color var(--ui-fast, 80ms) linear; }
.ui-choice:hover, .ui-choice:has(:checked) { color: var(--ui-fg); }

/* ======================================================================================================
   6. Slider (FF slider.tsx "scrubber"): a bordered box, the fill is the value, label left, value right.
   The native <input type=range> lies on top, transparent: it keeps the value, the keyboard and the events.
   ====================================================================================================== */
.ui-slider { --p: 50%; position: relative; display: flex; align-items: center; height: var(--ui-h); min-width: 0; border-radius: var(--ui-r-control); box-shadow: inset 0 0 0 1px var(--ui-border); overflow: hidden; color: var(--ui-fg); font-size: var(--ui-fs); cursor: ew-resize; user-select: none; touch-action: none; transition: box-shadow var(--ui-fast, 80ms) linear; isolation: isolate; }
.ui-slider-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); z-index: -1; background: var(--ui-active); transition: background-color var(--ui-fast, 80ms) linear; }
.ui-slider-handle { position: absolute; top: 6px; bottom: 6px; left: var(--p); width: 2px; margin-left: -3px; border-radius: 1px; background: var(--ui-muted); opacity: .55; z-index: 2; transition: opacity var(--ui-fast, 80ms) linear, background-color var(--ui-fast, 80ms) linear; pointer-events: none; }
.ui-slider-label { position: relative; z-index: 2; padding: 0 10px; color: var(--ui-muted); white-space: nowrap; pointer-events: none; transition: color var(--ui-fast, 80ms) linear; }
.ui-slider-value { position: relative; z-index: 2; margin-inline-start: auto; padding: 0 10px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.ui-slider > input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ui-slider:hover .ui-slider-fill { background: var(--ui-tint-hover); }
.ui-slider:hover .ui-slider-handle, .ui-slider:focus-within .ui-slider-handle { opacity: 1; background: var(--ui-fg); }
.ui-slider:hover .ui-slider-label, .ui-slider:focus-within .ui-slider-label { color: var(--ui-fg); }
.ui-slider:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--ui-focus); }
.ui-slider:has(input:disabled) { opacity: .45; cursor: default; }
[dir="rtl"] .ui-slider-fill { inset: 0 0 0 auto; }
[dir="rtl"] .ui-slider-handle { left: auto; right: var(--p); margin: 0 -3px 0 0; }
/* the bare line form, for bars where a box would be too heavy (video seek, brush size) */
.ui-slider[data-variant="line"] { box-shadow: none; height: 20px; overflow: visible; }
.ui-slider[data-variant="line"]::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ui-tint-hover); z-index: -2; }
.ui-slider[data-variant="line"] .ui-slider-fill { top: 50%; bottom: auto; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ui-fg); }
.ui-slider[data-variant="line"] .ui-slider-handle { top: 50%; bottom: auto; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px; background: #fff; opacity: 1; box-shadow: 0 0 0 .5px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .25); }

/* ======================================================================================================
   7. Segmented control and tabs (FF tabs.tsx / tabs-subtle.tsx): one indicator travels to the chosen item
   ====================================================================================================== */
.ui-segmented { --ui-seg-pad: max(2px, calc((var(--ui-h) - 28px) / 2)); position: relative; display: inline-flex; align-items: stretch; gap: 0; padding: var(--ui-seg-pad); border-radius: var(--ui-r-control); background: var(--ui-track); min-width: 0; }
.ui-segmented[data-block] { display: flex; width: 100%; }
.ui-segmented[data-block] > .ui-seg { flex: 1 1 0; }
.ui-seg { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: calc(var(--ui-h) - 2 * var(--ui-seg-pad, 2px)); min-width: 0; padding: 0 10px; margin: 0; border: 0; border-radius: calc(var(--ui-r-control) - var(--ui-seg-pad, 2px)); background: transparent; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs); white-space: nowrap; cursor: pointer; transition: color var(--ui-fast, 80ms) linear, font-weight var(--ui-fast, 80ms) linear; -webkit-tap-highlight-color: transparent; }
.ui-seg:hover, .ui-seg[data-hover] { color: var(--ui-fg); }
.ui-seg:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .active, .sel) { color: var(--ui-fg); font-weight: var(--ui-w-semibold); }
/* before the indicator has measured (and with no JS), the chosen item paints its own ground */
.ui-seg:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .active, .sel) { background: var(--ui-s3); box-shadow: var(--ui-shadow-2); }
.ui-segmented[data-ui-indicated] > .ui-seg { background: transparent; box-shadow: none; }
.ui-segmented > .ui-ind { background: var(--ui-s3); box-shadow: var(--ui-shadow-2); border-radius: calc(var(--ui-r-control) - var(--ui-seg-pad, 2px)); }
.ui-segmented > .ui-hl { border-radius: calc(var(--ui-r-control) - var(--ui-seg-pad, 2px)); }
.ui-seg:disabled { opacity: .45; cursor: default; }
.ui-seg > .ui-icon { margin: 0 -2px; }
.ui-seg[data-icon-only] { padding: 0; width: calc(var(--ui-h) - 2 * var(--ui-seg-pad, 2px)); }
.ui-seg:focus-visible { outline: 1px solid var(--ui-focus); outline-offset: -1px; }
/* subtle tabs: no track, the chosen item gets the active wash */
.ui-segmented[data-variant="subtle"] { background: transparent; padding: 0; gap: 2px; }
.ui-segmented[data-variant="subtle"] > .ui-ind, .ui-segmented[data-variant="subtle"] > .ui-seg:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .active, .sel) { background: var(--ui-active); box-shadow: none; }
.ui-segmented[data-variant="subtle"][data-ui-indicated] > .ui-seg { background: transparent; }
.ui-segmented[data-variant="subtle"] > .ui-seg { height: var(--ui-h); border-radius: var(--ui-r-control); }
.ui-segmented[data-variant="subtle"] > .ui-ind, .ui-segmented[data-variant="subtle"] > .ui-hl { border-radius: var(--ui-r-control); }

/* button group: actions side by side on one track (align, rotate, flip); a toggled one (.active / aria-pressed) gets the raised ground */
.ui-button-group { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: var(--ui-r-control); background: var(--ui-track); min-width: 0; }
.ui-button-group > .ui-icon-button { --ui-h: 24px; flex: 1 1 0; width: auto; min-width: 24px; border-radius: calc(var(--ui-r-control) - 2px); }
.ui-button-group > .ui-icon-button:is(.active, [aria-pressed="true"]) { --btn-bg: var(--ui-s3); --btn-fg: var(--ui-fg); box-shadow: var(--ui-shadow-2); }
.ui-inline > .ui-button-group, .ui-inline > .ui-input-group { flex: 1 1 0; }

/* tool tiles: a segmented group of tools, each an icon over its value; the chosen one (aria-pressed / .sel)
   drives the slider below it, and .changed marks a value moved from its default. Groups sit side by side in .ui-tiles.
   <div class="ui-tiles"><div class="ui-segmented"><button class="ui-seg ui-tile"><svg…/><span class="ui-tile-value">–</span></button>…</div>…</div> */
.ui-tiles { display: flex; gap: var(--ui-gap); min-width: 0; }
.ui-tiles > .ui-segmented { flex: 1 1 0; display: flex; }
.ui-tile { flex: 1 1 0; flex-direction: column; gap: 2px; height: auto; min-height: 40px; padding: 5px 2px; }
.ui-tile > svg, .ui-tile > .ui-icon { width: var(--ui-icon); height: var(--ui-icon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ui-tile-value { font-size: var(--ui-fs-micro); line-height: var(--ui-lh-micro); font-weight: var(--ui-w-normal); color: var(--ui-muted); font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ui-seg.ui-tile.sel { font-weight: var(--ui-w-normal); }
.ui-tile.changed .ui-tile-value, .ui-tile.sel .ui-tile-value { color: var(--ui-fg); }
.ui-tile.changed > svg { color: var(--ui-accent-text); }
.ui-tiles[data-bare] .ui-tile-value { display: none; }
.ui-tiles[data-bare] .ui-tile { min-height: 0; height: calc(var(--ui-h) - 4px); padding: 0; }

/* Tags and chips: one family for every tag, filter chip, selected-filter indicator, auto tag, preset chip and compact
   label, wherever it sits (cards, rows, sidebars, dialogs, inspectors, popovers). Small is the default everywhere:
   20 px, micro type, 6 px sides, 12 px glyphs. Medium (data-size="medium", or every chip at once when the System page's
   Tags option is Medium: <html data-ui-tags="m">) is 24 px with caption type. Radius is the shape's chip radius
   (Rounded 6 / Pill round); hover, pressed and focus are the same for all; a tag's colour arrives as --sw (its dot)
   or as a tint (chipTint in Collect). Badges are the same box, not a button. Nothing in a tool sizes a chip. */
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--ui-sp-1); }
.ui-chip, .ui-badge { --chip-h: 20px; --chip-px: 6px; --chip-fs: var(--ui-fs-mini); --chip-icon: 12px; --chip-gap: 4px; }
.ui-chip[data-size="medium"], .ui-badge[data-size="medium"], :root[data-ui-tags="m"] :is(.ui-chip, .ui-badge) { --chip-h: 24px; --chip-px: 8px; --chip-fs: var(--ui-fs-caption); }
/* a marker inside a thumbnail (a history thumb's "AI"): the family's micro step, never a tag a person reads or picks */
.ui-badge[data-size="micro"] { --chip-h: 14px; --chip-px: 3px; --chip-fs: 9px; }
.ui-chip { display: inline-flex; align-items: center; gap: var(--chip-gap); height: var(--chip-h); padding: 0 var(--chip-px); border: 0; border-radius: var(--ui-r-chip); background: var(--ui-track); color: var(--ui-muted); font: inherit; font-size: var(--chip-fs); line-height: 1; cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: background-color var(--ui-fast, 80ms) linear, color var(--ui-fast, 80ms) linear; }
:root[data-ui="2"] .ui-chip { font-size: var(--chip-fs); line-height: 1; }   /* over the button reset: a button chip and a span chip are one size */
.ui-chip:hover { background: var(--ui-tint-hover); color: var(--ui-fg); }
.ui-chip:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.ui-chip:is([aria-pressed="true"], [aria-checked="true"], .active, .on) { background: var(--ui-accent-soft); color: var(--ui-accent-text); font-weight: var(--ui-w-semibold); }
.ui-chip > .ui-icon { --ui-icon: var(--chip-icon); }
.ui-chip.muted { opacity: .5; }
span.ui-chip { cursor: default; }
span.ui-chip:hover { background: var(--ui-track); color: var(--ui-muted); }
@media (pointer: coarse) { button.ui-chip { position: relative; } button.ui-chip::after { content: ""; position: absolute; inset: -4px 0; } }
.ui-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: var(--ui-lh-micro); }   /* line-height 1 plus overflow hidden clipped descenders (g, p, y) */
.ui-chip[data-size="medium"] > span, :root[data-ui-tags="m"] .ui-chip > span { line-height: var(--ui-lh-caption); }
.ui-chip[data-dot]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sw, currentColor); }
.ui-chip-count { flex: none; color: var(--ui-subtle); font-variant-numeric: tabular-nums; }
.ui-chip:is([aria-pressed="true"], .on) > .ui-chip-count { color: inherit; opacity: .7; }
.ui-chip-x { flex: none; display: inline-grid; place-items: center; width: calc(var(--chip-h) - 4px); height: calc(var(--chip-h) - 4px); margin-inline: 0 calc(-1 * var(--chip-px) + 2px); padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; opacity: .7; }
.ui-chip-x:hover { opacity: 1; background: var(--ui-hover); }
.ui-chip-x > .ui-icon { --ui-icon: var(--chip-icon); }
.ui-chip-label { display: inline-flex; align-items: center; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ui-chip-label:hover > span { text-decoration: underline; text-underline-offset: 2px; }

/* ======================================================================================================
   8. Overlays: popover, menu (FF dropdown.tsx + menu-item.tsx), tooltip, dialog, toast
   ====================================================================================================== */
.ui-popover, .ui-menu {
  position: fixed; z-index: 1000; box-sizing: border-box; margin: 0; border: 0; border-radius: var(--ui-r-surface);
  background: var(--ui-s3); color: var(--ui-fg); box-shadow: var(--ui-shadow-4); font-size: var(--ui-fs); line-height: var(--ui-lh);
  overflow: auto; overscroll-behavior: contain; transform-origin: top center;
}
.ui-popover { padding: var(--ui-sp-3); min-width: 220px; max-width: min(360px, calc(100vw - 16px)); }
.ui-popover[data-side="top"], .ui-menu[data-side="top"] { transform-origin: bottom center; }
.ui-popover[data-side="left"], .ui-menu[data-side="left"] { transform-origin: right top; }
.ui-popover[data-side="right"], .ui-menu[data-side="right"] { transform-origin: left top; }
/* entering: each time the box is shown (an animation restarts when display comes back), from its side */
.ui-popover, .ui-menu { animation: ui-pop-in var(--ui-fast, 80ms) var(--ui-ease-fast, ease-out) both; }
.ui-popover[data-side="top"], .ui-menu[data-side="top"] { animation-name: ui-pop-in-up; }
.ui-popover:is([data-side="left"], [data-side="right"]), .ui-menu:is([data-side="left"], [data-side="right"]) { animation-name: ui-pop-in-side; }
.ui-popover.hidden, .ui-menu.hidden { display: none; }
.ui-ghost { animation: none !important; }
@keyframes ui-pop-in { from { opacity: 0; transform: translateY(-4px) scaleY(.96); } }
@keyframes ui-pop-in-up { from { opacity: 0; transform: translateY(4px) scaleY(.96); } }
@keyframes ui-pop-in-side { from { opacity: 0; transform: scale(.98); } }
.ui-popover[hidden], .ui-menu[hidden] { display: none; }
.ui-pop-title { margin: 0 0 var(--ui-sp-2); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); font-weight: var(--ui-w-semibold); color: var(--ui-fg); }
.ui-pop-sep { height: 1px; margin: var(--ui-sp-3) calc(var(--ui-sp-3) * -1); background: var(--ui-border-soft); border: 0; }
.ui-pop-row { display: flex; align-items: center; gap: var(--ui-sp-2); min-height: var(--ui-h); }
.ui-pop-row + .ui-pop-row { margin-top: var(--ui-sp-1); }
.ui-pop-head { display: flex; align-items: center; gap: var(--ui-sp-1); min-height: 24px; margin: -2px 0 var(--ui-sp-2); }
.ui-pop-head > .ui-pop-title { flex: 1 1 auto; margin: 0; }
.ui-pop-head .ui-icon-button { --ui-h: 24px; --ui-icon: 16px; margin: -2px -4px -2px 0; }
.ui-popover > * + :is(.ui-slider, .ui-button, .ui-segmented, .ui-hint, .ui-inline, .ui-slider-row) { margin-top: var(--ui-sp-2); }
.ui-pop-actions { display: flex; justify-content: flex-end; gap: var(--ui-sp-2); margin-top: var(--ui-sp-3); }

.ui-menu { display: flex; flex-direction: column; padding: 4px; min-width: 180px; max-width: min(320px, calc(100vw - 16px)); }
.ui-menu-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: var(--ui-sp-2); flex: none;
  height: var(--ui-row); min-height: var(--ui-row); padding: 0 var(--ui-sp-2); margin: 0; border: 0; border-radius: var(--ui-r-row);
  background: transparent; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs); text-align: start; text-decoration: none;
  white-space: nowrap; cursor: pointer; outline: none; transition: color var(--ui-fast, 80ms) linear, background-color var(--ui-moderate, 160ms) linear;
}
.ui-menu-item > .ui-t, .ui-menu-item > .ui-menu-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: font-weight var(--ui-fast, 80ms) linear; }
.ui-menu-item > .ui-icon { color: currentColor; }
.ui-menu-item:is([data-hover], :focus-visible), .ui-menu-item[aria-expanded="true"] { color: var(--ui-fg); }
.ui-menu-item:is([data-hover], :focus-visible, [aria-expanded="true"]) > :is(.ui-t, .ui-menu-text) { font-weight: var(--ui-w-semibold); }
.ui-menu-item:is([data-hover], :focus-visible, [aria-expanded="true"]) > .ui-icon { stroke-width: 2; }
/* without the fluid highlight (touch, a page without ui.js) the row paints its own ground */
.ui-menu:not([data-ui-hover]) .ui-menu-item:is(:hover, :focus-visible) { background: var(--ui-hover); }
.ui-menu-item:is([aria-checked="true"], [aria-selected="true"], .active) { background: var(--ui-active); color: var(--ui-fg); }
.ui-menu-item:is([aria-checked="true"], [aria-selected="true"], .active) > :is(.ui-t, .ui-menu-text) { font-weight: var(--ui-w-semibold); }
.ui-menu-item:disabled, .ui-menu-item[aria-disabled="true"] { opacity: .45; cursor: default; }
.ui-menu-item[data-danger] { color: var(--ui-danger-text); }
.ui-menu-item[data-danger][data-hover] { background: var(--ui-danger-soft); }
.ui-menu-item[data-danger][data-hover] ~ .ui-hl, .ui-menu:has(.ui-menu-item[data-danger][data-hover]) > .ui-hl { opacity: 0; }
.ui-menu-kbd, .ui-menu-hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--ui-sp-3); color: var(--ui-subtle); font-size: var(--ui-fs-caption); font-variant-numeric: tabular-nums; }
.ui-menu-check { flex: none; width: var(--ui-icon); height: var(--ui-icon); margin-inline-start: auto; color: var(--ui-fg); }
.ui-menu-check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--ui-moderate, 160ms) var(--ui-ease-moderate, ease-out); }
.ui-menu-item:is([aria-checked="true"], [aria-selected="true"], .active) .ui-menu-check path { stroke-dashoffset: 0; }
.ui-menu-sub-arrow { flex: none; margin-inline-start: auto; color: var(--ui-subtle); }
[dir="rtl"] .ui-menu-sub-arrow { transform: scaleX(-1); }
.ui-menu-sep { flex: none; height: 1px; margin: 4px -4px; background: var(--ui-border-soft); border: 0; }
.ui-menu-label { flex: none; padding: 6px var(--ui-sp-2) 4px; color: var(--ui-muted); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
.ui-menu-item[style*="--depth"] { padding-inline-start: calc(8px + var(--depth, 0) * 14px); }
.ui-menu-item[style*="--folder"] > .ui-icon { color: var(--folder); }
.ui-menu-note { padding: 0 var(--ui-sp-2) var(--ui-sp-1); max-width: 260px; color: var(--ui-muted); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
.ui-menu-search { flex: none; margin: 0 0 4px; }
.ui-menu-empty { padding: var(--ui-sp-2); color: var(--ui-muted); font-size: var(--ui-fs-caption); }
.ui-menu-group { display: flex; flex-direction: column; }
.ui-menu-swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--sw, currentColor); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
/* the shared picker (SakinPick contract): a head with title / search / close, sections, a footer */
.ui-pick { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ui-pick-head { display: flex; align-items: center; gap: 4px; flex: none; min-height: 36px; padding: 4px 4px 4px 12px; box-shadow: inset 0 -1px 0 var(--ui-border-soft); }
.ui-pick-title { flex: 1 1 auto; min-width: 0; font-size: var(--ui-fs-caption); font-weight: var(--ui-w-semibold); color: var(--ui-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pick-find { flex: none; padding: 4px 8px; box-shadow: inset 0 -1px 0 var(--ui-border-soft); }
.ui-pick-q { display: flex; width: 100%; height: 28px; }
.ui-pick-list { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px; display: flex; flex-direction: column; }
.ui-pick-form { padding: 12px; overflow: auto; }
.ui-pick .ui-menu-item { height: auto; min-height: var(--ui-row); }
.ui-pick .ui-menu-item.is-muted .ui-menu-text { opacity: .6; }
.ui-pick-chips { flex-wrap: nowrap; }
.ui-pick-chips .ui-chip { height: 20px; padding: 0 6px; font-size: var(--ui-fs-micro); }
.ui-pick-tool { opacity: 0; margin-inline-end: -4px; }
.ui-menu-item[data-hover] .ui-pick-tool, .ui-menu-item:focus-visible .ui-pick-tool, .ui-pick-tool[data-armed] { opacity: 1; }
.ui-pick-tool[data-armed] { --btn-fg: var(--ui-danger-text); --btn-bg: var(--ui-danger-soft); }
@media (hover: none) { .ui-pick-tool { opacity: 1; } }
.ui-menu-item[data-armed] { color: var(--ui-danger-text); }
.ui-menu-row-tools { display: flex; gap: 0; margin-inline-start: auto; opacity: 0; transition: opacity var(--ui-fast, 80ms) linear; }
.ui-menu-item[data-hover] .ui-menu-row-tools, .ui-menu-item:focus-within /* the shared picker (SakinPick contract): a head with title / search / close, sections, a footer */
.ui-pick { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ui-pick-head { display: flex; align-items: center; gap: 4px; flex: none; min-height: 36px; padding: 4px 4px 4px 12px; box-shadow: inset 0 -1px 0 var(--ui-border-soft); }
.ui-pick-title { flex: 1 1 auto; min-width: 0; font-size: var(--ui-fs-caption); font-weight: var(--ui-w-semibold); color: var(--ui-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pick-find { flex: none; padding: 4px 8px; box-shadow: inset 0 -1px 0 var(--ui-border-soft); }
.ui-pick-q { display: flex; width: 100%; height: 28px; }
.ui-pick-list { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px; display: flex; flex-direction: column; }
.ui-pick-form { padding: 12px; overflow: auto; }
.ui-pick .ui-menu-item { height: auto; min-height: var(--ui-row); }
.ui-pick .ui-menu-item.is-muted .ui-menu-text { opacity: .6; }
.ui-pick-chips { flex-wrap: nowrap; }
.ui-pick-chips .ui-chip { height: 20px; padding: 0 6px; font-size: var(--ui-fs-micro); }
.ui-pick-tool { opacity: 0; margin-inline-end: -4px; }
.ui-menu-item[data-hover] .ui-pick-tool, .ui-menu-item:focus-visible .ui-pick-tool, .ui-pick-tool[data-armed] { opacity: 1; }
.ui-pick-tool[data-armed] { --btn-fg: var(--ui-danger-text); --btn-bg: var(--ui-danger-soft); }
@media (hover: none) { .ui-pick-tool { opacity: 1; } }
.ui-menu-item[data-armed] { color: var(--ui-danger-text); }
.ui-menu-row-tools { opacity: 1; }

.ui-tooltip { position: fixed; z-index: 2147483600; max-width: 260px; padding: 4px 8px; border-radius: var(--ui-r-chip); background: var(--ui-tip-bg); color: var(--ui-tip-fg); font-family: var(--ui-font); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); font-weight: var(--ui-w-normal); pointer-events: none; white-space: normal; overflow-wrap: anywhere; box-shadow: var(--ui-shadow-3); }
.ui-tooltip[data-state="open"] { animation: ui-tip-in var(--ui-fast, 80ms) var(--ui-ease-fast, ease-out) both; }
.ui-tooltip-ff { z-index: 2147483600 !important; }   /* FF's tooltip (sakin-tooltip island): above every layer, like the vanilla box */
.ui-tooltip kbd, .ui-kbd { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; margin-inline-start: 6px; border-radius: 4px; background: color-mix(in srgb, currentColor 16%, transparent); font: inherit; font-size: var(--ui-fs-micro); font-variant-numeric: tabular-nums; }
.ui-tooltip:not(.visible) { display: none; }
@keyframes ui-tip-in { from { opacity: 0; transform: translateY(2px); } }

/* Item check: the round select mark on a gallery item (SakinGallery, gallery.js). Geometry and showing stay with the
   gallery; the colours are the library's: a dark veil on media, the accent once the item is selected. */
:root[data-ui="2"] .ui-item-check { border-color: var(--ui-on-accent); }
:root[data-ui="2"] .sk-g-item.is-selected > .ui-item-check { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-on-accent); }
:root[data-ui="2"] .sk-g-item.is-selected { outline-color: var(--ui-accent); }

/* Card button: a whole card that starts something (trt's "new project" tools). Surface 2, raised on hover. */
.ui-card-button { display: flex; align-items: center; gap: var(--ui-sp-3); box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0 var(--ui-sp-3); border: 0; border-radius: var(--ui-r-surface); background: var(--ui-s2); box-shadow: var(--ui-shadow-1, 0 0 0 1px var(--ui-border-soft)); color: var(--ui-fg); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--ui-moderate, 160ms) linear; }
.ui-card-button:is(:hover, :focus-visible) { background: var(--ui-s3); }

.ui-dialog-backdrop { position: fixed; inset: 0; z-index: 900; background: var(--ui-scrim); animation: ui-fade-in var(--ui-moderate, 160ms) linear both; }
.ui-dialog-backdrop[data-state="closed"] { animation: ui-fade-out var(--ui-moderate-exit, 120ms) var(--ui-ease-exit) both; pointer-events: none; }
.ui-dialog {
  position: fixed; z-index: 901; left: 50%; top: 50%; translate: -50% -50%; box-sizing: border-box;
  width: calc(100vw - 32px); max-width: 400px; max-height: calc(100dvh - 32px); overflow: auto; margin: 0; padding: var(--ui-sp-6);
  border: 0; border-radius: var(--ui-r-surface); background: var(--ui-s3); color: var(--ui-fg); box-shadow: var(--ui-shadow-6);
  font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); outline: none;
}
.ui-dialog[data-size="md"] { max-width: 540px; }
.ui-dialog[data-size="lg"] { max-width: 880px; }
.ui-dialog[data-size="full"] { max-width: none; width: calc(100vw - 32px); height: calc(100dvh - 32px); }
.ui-dialog[data-pad="none"] { padding: 0; }
.ui-dialog[data-state="open"] { animation: ui-dialog-in var(--ui-slow, 240ms) var(--ui-ease-slow, ease-out) both; }
.ui-dialog[hidden] { display: none; }
.ui-dialog-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ui-sp-4); padding-inline-end: 28px; }
.ui-dialog-title { margin: 0; font-size: var(--ui-fs-title); line-height: var(--ui-lh-title); font-weight: var(--ui-w-semibold); color: var(--ui-fg); }
.ui-dialog-desc { margin: 0; color: var(--ui-muted); }
.ui-dialog-close { position: absolute; top: 12px; inset-inline-end: 12px; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: var(--ui-sp-2); margin-top: var(--ui-sp-6); }
@keyframes ui-dialog-in { from { opacity: 0; transform: scale(.97); } }
@keyframes ui-fade-in { from { opacity: 0; } }
@keyframes ui-fade-out { to { opacity: 0; } }

.ui-toast { position: fixed; z-index: 2147483500; left: 50%; bottom: 24px; translate: -50% 0; display: flex; align-items: center; gap: var(--ui-sp-2); max-width: min(520px, calc(100vw - 32px)); min-height: 36px; box-sizing: border-box; padding: 8px 12px; border-radius: var(--ui-r-box); background: var(--ui-tip-bg); color: var(--ui-tip-fg); font-family: var(--ui-font); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); box-shadow: var(--ui-shadow-5); pointer-events: auto; }
.ui-toast[data-state="open"] { animation: ui-toast-in var(--ui-slow, 240ms) var(--ui-ease-slow, ease-out) both; }
.ui-toast[data-state="closed"] { animation: ui-toast-out var(--ui-slow-exit, 160ms) var(--ui-ease-exit) both; pointer-events: none; }
.ui-toast[data-tone="danger"] { background: var(--ui-danger); color: var(--c-on-alert, #fff); }
.ui-toast .ui-button { --btn-fg: inherit; --btn-bg: color-mix(in srgb, currentColor 14%, transparent); height: 24px; padding: 0 8px; font-size: var(--ui-fs-caption); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateY(4px); } }

/* ======================================================================================================
   9. Structure: toolbar (app header), sidebar, panel section (accordion), nav item, floating bar, list row
   ====================================================================================================== */
.ui-toolbar { display: flex; align-items: center; gap: var(--ui-sp-2); height: 44px; min-height: 44px; padding: 0 var(--ui-sp-2); box-sizing: border-box; background: var(--ui-s1); color: var(--ui-fg); box-shadow: inset 0 -1px 0 var(--ui-border-soft); position: relative; z-index: 20; }
.ui-toolbar-group { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ui-toolbar-title { display: flex; align-items: center; gap: var(--ui-sp-2); min-width: 0; font-size: var(--ui-fs-body); line-height: var(--ui-lh-caption); font-weight: var(--ui-w-semibold); color: var(--ui-fg); }
.ui-toolbar-meta { color: var(--ui-muted); font-size: var(--ui-fs-sub); line-height: var(--ui-lh-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ui-toolbar-spacer { flex: 1 1 auto; }
.ui-divider { flex: none; width: 1px; height: 16px; margin: 0 var(--ui-sp-1); background: var(--ui-border); }
.ui-divider[data-axis="x"] { width: auto; height: 1px; margin: var(--ui-sp-2) 0; background: var(--ui-border-soft); }

.ui-sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--ui-s1); color: var(--ui-fg); box-sizing: border-box; }
.ui-sidebar[data-side="left"] { box-shadow: inset -1px 0 0 var(--ui-border-soft); }
.ui-sidebar[data-side="right"] { box-shadow: inset 1px 0 0 var(--ui-border-soft); }
[dir="rtl"] .ui-sidebar[data-side="left"] { box-shadow: inset 1px 0 0 var(--ui-border-soft); }
[dir="rtl"] .ui-sidebar[data-side="right"] { box-shadow: inset -1px 0 0 var(--ui-border-soft); }
.ui-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Sidebar styles (Settings → Interface, <html data-ui-sidebar>): one sidebar, three looks (FF's variants), the same rows and behaviour.
   standard  on the window's edge with a hairline (shipped; writes nothing)
   floating  a detached surface: 8 px off the edges, the surface radius, a soft shadow (FF's floating sidebar)
   inset     FF's inset: panels flat on the page ground (no edge line), the workspace is the rounded card
   On a phone the panels are drawers whatever the style. */
@media (min-width: 851px) {
  :root[data-ui="2"][data-ui-sidebar="floating"] .ui-sidebar[data-side] { margin: 8px; border-radius: var(--ui-r-surface); background: var(--ui-s2, var(--ui-s1)); box-shadow: var(--ui-shadow-3), 0 0 0 1px var(--ui-border-soft); overflow: hidden; }
  :root[data-ui="2"][data-ui-sidebar="floating"] .ui-sidebar[data-side="left"] { margin-inline-end: 0; }
  :root[data-ui="2"][data-ui-sidebar="floating"] .ui-sidebar[data-side="right"] { margin-inline-start: 0; }
  /* inset (FF): the panels give up their own surface and sit on the page ground; the workspace becomes the card.
     The workspace is whichever element a tool marks: crop #cs-stage, twit #stage, collect #main, grid/guide #workspace */
  :root[data-ui="2"][data-ui-sidebar="inset"] :is(.ui-sidebar[data-side], .ui-rail, .ui-toolbar, .ui-rail-top, .shell-panel, #left-sidebar, #right-sidebar, #left, #right, #side-panel, #sk-panel-left, #sk-panel-right) { background: transparent; box-shadow: none; }
  :root[data-ui="2"][data-ui-sidebar="inset"] :is(#cs-stage, #stage, .collect-main, #workspace) { margin: 0 8px 8px; border-radius: var(--ui-r-surface); background-color: var(--ui-s2, var(--ui-s1)); box-shadow: var(--ui-shadow-3); overflow: hidden; }
}

/* Same two looks on the Collect pages that are not a tool shell: detail (source | media | info), note info, archive.
   floating  the side blocks are detached cards, 8 px off the page edge, the media area is a card too
   inset     side blocks sit flat on the page ground (no hairline), the media area is the rounded card */
@media (min-width: 851px) {
  :root[data-ui="2"]:is([data-ui-sidebar="floating"], [data-ui-sidebar="inset"]) .collect-detail.ui-dialog { background: color-mix(in srgb, var(--ui-bg), var(--ui-fg) 4%); }
  :root[data-ui="2"]:is([data-ui-sidebar="floating"], [data-ui-sidebar="inset"]) .collect-detail:not(.is-fullscreen) .detail-body { gap: 0; padding: 0 8px 8px; }
  :root[data-ui="2"]:is([data-ui-sidebar="floating"], [data-ui-sidebar="inset"]) .collect-detail:not(.is-fullscreen) .detail-media { border-radius: var(--ui-r-surface); overflow: hidden; box-shadow: var(--ui-shadow-3); }
  :root[data-ui="2"][data-ui-sidebar="floating"] .collect-detail:not(.is-fullscreen) :is(.detail-info, .detail-from) { margin: 0 0 0 8px; border-radius: var(--ui-r-surface); background: var(--ui-s2, var(--ui-s1)); box-shadow: var(--ui-shadow-3), 0 0 0 1px var(--ui-border-soft); }
  :root[data-ui="2"][data-ui-sidebar="floating"] .collect-detail:not(.is-fullscreen) .detail-from { margin: 0 8px 0 0; }
  :root[data-ui="2"][data-ui-sidebar="inset"] .collect-detail:not(.is-fullscreen) :is(.detail-info, .detail-from) { background: transparent; box-shadow: none; }
  :root[data-ui="2"][data-ui-sidebar="floating"] .collect-note .note-info { margin: 8px; border-radius: var(--ui-r-surface); background: var(--ui-s2, var(--ui-s1)); box-shadow: var(--ui-shadow-3), 0 0 0 1px var(--ui-border-soft); border: 0; }
  :root[data-ui="2"][data-ui-sidebar="inset"] .collect-note .note-info { background: transparent; box-shadow: none; border: 0; }
  :root[data-ui="2"]:is([data-ui-sidebar="floating"], [data-ui-sidebar="inset"]) :is(.collect-note, .collect-archive).ui-dialog { background: color-mix(in srgb, var(--ui-bg), var(--ui-fg) 4%); }
  :root[data-ui="2"]:is([data-ui-sidebar="floating"], [data-ui-sidebar="inset"]) .collect-archive .archive-stage { margin: 0 8px 8px; border-radius: var(--ui-r-surface); box-shadow: var(--ui-shadow-3); }
}

/* layout primitives: a row of controls, and a slider with a trailing button (Reset) */
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-sp-2); min-width: 0; }
/* a sub-heading inside a section (Prompts, Prompt): caption, muted, with its own small tools */
.ui-sub { min-height: 24px; }
.ui-sub-title { flex: none; color: var(--ui-muted); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
.ui-sub > .ui-input { flex: 1 1 auto; min-width: 0; }
.ui-sub > .ui-sub-title + .ui-icon-button { margin-inline-start: auto; }
.ui-inline { display: flex; align-items: center; gap: var(--ui-gap); min-width: 0; }
.ui-inline > .ui-slider { flex: 1 1 auto; }
/* choice card (radio-group.tsx card variant): a preview, a name and one line; role=radio aria-checked
   <div class="ui-choice-cards" role="radiogroup"><button class="ui-choice-card" role="radio" aria-checked><i class="ui-choice-media">…</i><b>Name</b><span>One line</span></button></div> */
.ui-choice-cards { display: flex; flex-direction: column; gap: var(--ui-sp-1); }
.ui-choice-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--ui-sp-2); align-items: center; width: 100%; padding: var(--ui-sp-1); border: 0; border-radius: var(--ui-r-row); background: transparent; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); text-align: start; cursor: pointer; transition: background-color var(--ui-moderate, 160ms) linear, color var(--ui-fast, 80ms) linear; }
.ui-choice-card > .ui-choice-media { grid-row: 1 / 3; width: 88px; aspect-ratio: 16 / 9; margin: 0; border-radius: var(--ui-r-small); box-shadow: inset 0 0 0 1px var(--ui-border-soft); background: var(--ui-track); overflow: hidden; }
.ui-choice-card > b { align-self: end; color: var(--ui-fg); font-weight: var(--ui-w-semibold); font-size: var(--ui-fs); }
.ui-choice-card > span { align-self: start; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ui-choice-card:not(:has(> .ui-choice-media)) { grid-template-columns: 1fr; min-height: var(--ui-row); color: var(--ui-fg); font-size: var(--ui-fs); }
@media (hover: hover) and (pointer: fine) { .ui-choice-card:hover { background: var(--ui-hover); color: var(--ui-fg); } }
.ui-choice-card[aria-checked="true"] { background: var(--ui-active); color: var(--ui-fg); }
.ui-choice-card[aria-checked="true"] > .ui-choice-media { box-shadow: 0 0 0 2px var(--ui-accent); }
.ui-choice-card:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }

.ui-slider-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ui-sp-1); }
.ui-section { display: flex; flex-direction: column; gap: var(--ui-sp-2); padding: var(--ui-sp-3) var(--ui-panel-gutter, 16px); min-width: 0; }
.ui-section + .ui-section { box-shadow: inset 0 1px 0 var(--ui-border-soft); }
.ui-section[data-grow] { flex: 1 1 auto; min-height: 0; }
.ui-section-head { display: flex; align-items: center; gap: var(--ui-sp-1); min-height: 28px; margin: 0; }
.ui-section-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--ui-fs-sub); line-height: var(--ui-lh-sub); font-weight: var(--ui-w-semibold); color: var(--ui-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-section-head > .ui-section-meta { color: var(--ui-muted); font-size: var(--ui-fs-caption); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* the head's buttons end on the content's edge (the function column) and stand 8 apart (docs/tasarim-yonergesi.md §4) */
.ui-section-head .ui-icon-button { --ui-h: 24px; --ui-icon: 16px; margin-block: -2px; }
.ui-section-head .ui-icon-button + .ui-icon-button { margin-inline-start: var(--ui-sp-1); }
.ui-section-head .actions { gap: var(--ui-sp-2); }
/* the panel is 249: 16 on both sides would leave an odd 217 and halves on half pixels. The spare pixel goes to the canvas side: content 216, halves 104 + 8 + 104 */
:is([data-sk-panel="left"], #left) .ui-section { padding-inline-end: calc(var(--ui-panel-gutter, 16px) + 1px); }
:is([data-sk-panel="right"], #right) .ui-section { padding-inline-start: calc(var(--ui-panel-gutter, 16px) + 1px); }
/* accordion: <details class="ui-section" data-accordion><summary class="ui-section-head">… */
details.ui-section > summary { list-style: none; cursor: pointer; border-radius: var(--ui-r-small); }
details.ui-section > summary::-webkit-details-marker { display: none; }
.ui-section-chev { flex: none; color: var(--ui-subtle); transition: transform var(--ui-moderate, 160ms) var(--ui-ease-moderate, ease-out), color var(--ui-fast, 80ms) linear; }
details.ui-section:not([open]) .ui-section-chev { transform: rotate(-90deg); }
[dir="rtl"] details.ui-section:not([open]) .ui-section-chev { transform: rotate(90deg); }
details.ui-section > summary:hover .ui-section-chev { color: var(--ui-fg); }
details.ui-section:not([open]) { gap: 0; }
/* a <details> lays its body out in ::details-content (a block), so the section's flex gap stopped at the summary and the
   fields inside an accordion section touched each other: the body is the section's column, same gap as a <section> */
details.ui-section::details-content { display: flex; flex-direction: column; gap: inherit; }
@supports not selector(::details-content) { details.ui-section > summary ~ * + * { margin-top: var(--ui-sp-3); } }
/* the same accordion driven by a tool's own state: .ui-section.acc(.collapsed) with a .ui-section-head */
.ui-section.acc > .ui-section-head { cursor: pointer; user-select: none; border-radius: var(--ui-r-small); }
.ui-section.acc > .ui-section-head:hover .ui-section-chev { color: var(--ui-fg); }
.ui-section.acc.collapsed { gap: 0; }
/* the panel rhythm, one for every tool (Fluid's sidebar: 8 px around a group): section 12/16, 12 between its fields, a label
   4 above its field, 24 px head (22 + the -2 margin above), a closed section one 44 px row */
.ui-sidebar .ui-section { gap: var(--ui-sp-3); }
.ui-sidebar .ui-field { gap: var(--ui-sp-1); }
.ui-sidebar .ui-field > label, .ui-sidebar .ui-label { margin: 0; }
.ui-section.acc.collapsed > .ui-section-head, details.ui-section:not([open]) > .ui-section-head { margin: 0; }
/* a closed section is one 44 px row, the height of a panel head: 10 above and below the 24 px head */
:is(details.ui-section:not([open]), .ui-section.acc.collapsed) { gap: 0; padding-block: 8px; }   /* 8 + 28 + 8: a closed row of 44, its head on the 4 px rows */
.ui-section.acc.collapsed > :not(.ui-section-head) { display: none !important; }
.ui-section.acc.collapsed .ui-section-chev { transform: rotate(-90deg); }
[dir="rtl"] .ui-section.acc.collapsed .ui-section-chev { transform: rotate(90deg); }
.ui-section .acc-peek { display: none; }
.ui-section.acc.collapsed .acc-peek { display: flex; align-items: center; gap: var(--ui-sp-1); min-width: 0; }
.ui-section.acc.collapsed .acc-sum { display: block; flex: 1 1 auto; text-align: end; }
.ui-section-head > .ui-section-icon { flex: none; color: var(--ui-muted); }
.ui-section-head > .actions { display: flex; align-items: center; gap: var(--ui-sp-2); flex: none; margin-inline: auto 0; }
.ui-section-head > .actions .ui-icon-button { margin-inline: 0; }   /* the group sets the spacing */

.ui-nav { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ui-nav-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: var(--ui-sp-2); width: 100%; box-sizing: border-box;
  height: var(--ui-row); padding: 0 var(--ui-sp-2); padding-inline-start: calc(var(--ui-sp-2) + var(--depth, 0) * 14px); margin: 0; border: 0; border-radius: var(--ui-r-row);
  background: transparent; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs); text-align: start; text-decoration: none; cursor: pointer;
  transition: color var(--ui-fast, 80ms) linear, background-color var(--ui-moderate, 160ms) linear; -webkit-tap-highlight-color: transparent;
}
.ui-nav-item > .ui-icon { color: var(--ui-ico, currentColor); }
.ui-nav-item > :is(.ui-t, .ui-nav-text) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav-item:is([data-hover], :focus-visible) { color: var(--ui-fg); }
.ui-nav-item:is([data-hover], :focus-visible) > .ui-icon { stroke-width: 2; }
.ui-nav:not([data-ui-hover]) .ui-nav-item:hover { background: var(--ui-hover); color: var(--ui-fg); }
.ui-nav-item:is([aria-current="page"], [aria-current="true"], [aria-selected="true"], .active) { background: var(--ui-active); color: var(--ui-fg); }
.ui-nav-item:is([aria-current="page"], [aria-current="true"], [aria-selected="true"], .active) > :is(.ui-t, .ui-nav-text) { font-weight: var(--ui-w-semibold); }
.ui-nav-item[data-drop-target] { background: var(--ui-accent-soft); color: var(--ui-accent-text); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.ui-nav-count { flex: none; color: var(--ui-subtle); font-size: var(--ui-fs-caption); font-variant-numeric: tabular-nums; }
.ui-nav-twist { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-inline-start: -4px; border-radius: 4px; color: var(--ui-subtle); transition: transform var(--ui-moderate, 160ms) var(--ui-ease-moderate, ease-out); }
.ui-nav-twist[aria-expanded="true"] { transform: rotate(90deg); }
[dir="rtl"] .ui-nav-twist { transform: scaleX(-1); }
[dir="rtl"] .ui-nav-twist[aria-expanded="true"] { transform: rotate(-90deg); }

/* Bars: one family for every floating bar and micro toolbar (FF toolbar geometry). The bar owns its controls' size:
   it sets --ui-h / --ui-icon / --ui-fs for everything inside, so a button, a segmented control, a select or a
   divider in a bar never brings its own height, radius or selected state. Three profiles, one size ladder:
     main (no data-profile)  the prominent bars at a work area's foot: Collect's add and selection bars, Crop's
                             picture bar, Studio's mark bar ......................................... Medium
     corner                  the small bars in a work area's corners: view buttons, zoom · fit · full screen,
                             hand, map ............................................. Small (option: Mini)
     overlay                 the micro bars over a picture: Crop's resolution and empty-edge notices, Studio's
                             per-mask notices, the frame's remove button .............................. Mini
   Ladder (control / bar / glyph): Large 36 / 44 / 16 · Medium 32 / 40 / 16 · Small 28 / 36 / 14 · Mini 24 / 32 / 14
   (overlay bars sit on a 2 px gutter: 28). data-size="l|m|s|xs" pins a bar to a step. The System page chooses the
   main and corner steps (<html data-ui-bar-main / data-ui-bar-corner>); nothing else in a tool sizes a bar.
   Radius is concentric: the controls' radius plus the gutter, so Rounded and Pill both close evenly. */
.ui-bar {
  --bar-ctl: 32px; --bar-icon: 16px; --bar-fs: var(--ui-fs-body); --bar-pad: 4px; --bar-gap: 2px; --bar-shadow: var(--ui-shadow-4);
  --ui-h: var(--bar-ctl); --ui-row: var(--bar-ctl); --ui-icon: var(--bar-icon); --ui-fs: var(--bar-fs); --ui-gap: 4px;
  display: inline-flex; align-items: center; gap: var(--bar-gap); height: calc(var(--bar-ctl) + 2 * var(--bar-pad)); padding: var(--bar-pad);
  border-radius: calc(var(--ui-r-control) + var(--bar-pad)); background: var(--ui-s3); color: var(--ui-fg); box-shadow: var(--bar-shadow);
  box-sizing: border-box; font-size: var(--bar-fs); white-space: nowrap;
}
.ui-bar[data-size="l"], :root[data-ui-bar-main="l"] .ui-bar:not([data-profile], [data-size]) { --bar-ctl: 36px; --bar-icon: 16px; --bar-fs: var(--ui-fs-body); }
.ui-bar[data-size="m"] { --bar-ctl: 32px; --bar-icon: 16px; --bar-fs: var(--ui-fs-body); }
.ui-bar[data-size="s"], .ui-bar[data-profile="corner"] { --bar-ctl: 28px; --bar-icon: 14px; --bar-fs: var(--ui-fs-caption); }
.ui-bar[data-size="xs"], .ui-bar[data-profile="overlay"], :root[data-ui-bar-corner="xs"] .ui-bar[data-profile="corner"]:not([data-size]) { --bar-ctl: 24px; --bar-icon: 14px; --bar-fs: var(--ui-fs-caption); }
/* Narrow screens: corner bars take the Mini step and the gutters close up, so the bars of two corners (Collect's views
   and its zoom) never meet; the controls stay 24 px, the WCAG 2.2 minimum pointer target. A bar pinned with data-size keeps its step. */
@media (max-width: 480px) { .ui-bar[data-profile="corner"]:not([data-size]) { --bar-ctl: 24px; --bar-icon: 14px; --bar-fs: var(--ui-fs-caption); --bar-pad: 3px; --bar-gap: 0px; } }
.ui-bar[data-profile="overlay"] { --bar-pad: 2px; --bar-gap: 0px; --bar-shadow: var(--ui-shadow-3); }
.ui-bar[hidden] { display: none; }
/* every control in a bar: the bar's height, its radius, one hover and one selected state (the active wash) */
.ui-bar :is(.ui-button, .ui-icon-button, .ui-select, .ui-seg):not(:is(.ui-popover, .ui-menu) *) { height: var(--bar-ctl); min-height: 0; border-radius: var(--ui-r-control); font-size: var(--bar-fs); }
.ui-bar :is(.ui-icon-button, .ui-seg[data-icon-only]):not(:is(.ui-popover, .ui-menu) *) { width: var(--bar-ctl); min-width: var(--bar-ctl); padding: 0; }
.ui-bar .ui-button:not(:is(.ui-popover, .ui-menu) *) { --ui-pad-x: calc(var(--bar-ctl) / 4 + 2px); padding: 0 var(--ui-pad-x); gap: calc(var(--bar-ctl) / 8 + 2px); }
.ui-bar .ui-segmented:not(:is(.ui-popover, .ui-menu) *) { --ui-seg-pad: 2px; height: var(--bar-ctl); padding: 0; gap: var(--bar-gap); background: none; box-shadow: none; }
.ui-bar .ui-segmented > :is(.ui-ind, .ui-hl):not(:is(.ui-popover, .ui-menu) *) { border-radius: var(--ui-r-control); }
.ui-bar .ui-segmented > .ui-ind, .ui-bar .ui-seg:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .active, .sel):not(:is(.ui-popover, .ui-menu) *) { background: var(--ui-active); box-shadow: none; }
.ui-bar .ui-seg:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .active, .sel):not(:is(.ui-popover, .ui-menu) *) { color: var(--ui-fg); font-weight: var(--ui-w-normal); }
.ui-bar .ui-icon-button:is([aria-pressed="true"], .is-on, .active):not(:is(.ui-popover, .ui-menu) *) { --btn-bg: var(--ui-active); --btn-fg: var(--ui-fg); }
.ui-bar .ui-divider:not(:is(.ui-popover, .ui-menu) *) { width: 1px; height: calc(var(--bar-ctl) / 2); margin: 0 2px; background: var(--ui-border); border: 0; flex: none; }
/* a state in a bar, not a button (the selection count, a zoom level on its own): muted, on the bar's line */
.ui-bar-label { display: inline-flex; align-items: center; height: var(--bar-ctl); padding: 0 calc(var(--bar-ctl) / 4 + 2px); color: var(--ui-muted); font-size: var(--bar-fs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bar-label + .ui-divider { margin-inline-start: 0; }
/* too narrow for the words, or asked for (data-icons-only): every labelled button shows its glyph alone, its name
   in the tooltip (SakinUI.fitBar measures and sets it) */
.ui-bar[data-icons-only] .ui-button:has(> .ui-icon) { width: var(--bar-ctl); min-width: var(--bar-ctl); padding: 0; justify-content: center; }
.ui-bar[data-icons-only] .ui-button:has(> .ui-icon) > :not(.ui-icon) { display: none; }
/* touch screens: a 40 px hit area round each control of a small bar, without moving anything */
@media (pointer: coarse) {
  .ui-bar :is(button, a) { position: relative; }
  .ui-bar :is(button, a)::after { content: ""; position: absolute; inset: min(0px, calc((var(--bar-ctl) - 40px) / 2)) -1px; }
}
/* an overlay control on its own (the frame's remove ×, an overview card's ×): the overlay bar's look for one button;
   a status glyph over a picture (a card's low-resolution mark): the same surface, smaller, not a button */
.ui-icon-button[data-overlay] { --ui-h: 28px; --ui-icon: 16px; width: 28px; height: 28px; border-radius: calc(var(--ui-r-control) + 2px); --btn-bg: var(--ui-s3); --btn-fg: var(--ui-muted); box-shadow: var(--ui-shadow-3); }
.ui-icon-button[data-overlay]:hover { --btn-bg: var(--ui-s3); --btn-fg: var(--ui-fg); }
.ui-icon-button[data-tone="danger"]:hover:not(:disabled) { --btn-bg: var(--ui-danger-soft); --btn-fg: var(--ui-danger-text); }
.ui-overlay-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--ui-r-chip); background: var(--ui-s3); box-shadow: var(--ui-shadow-2); --ui-icon: 12px; }
/* the shared colour picker (SakinColor.picker → Fluid's ColorPicker island) in a popover: its panel keeps its own
   12 px inset, so it sits flush with the popover's edges */
/* what a tool stacks above a corner bar (Collect's "Remove examples") reads the corner bar's real height */
:root[data-ui="2"] { --bar-s-h: 36px; }
:root[data-ui="2"][data-ui-bar-corner="xs"] { --bar-s-h: 32px; }
.ui-popover .cp-ff, .sk-pick .cp-ff { margin-inline: -12px; }
/* a legacy page (Guide) styles bare inputs and buttons without a layer; inside a Fluid island those rules step back */
:root:not([data-ui="2"]) :is([data-ff], [data-base-ui-portal]) :is(input, textarea, select, button) { all: revert-layer; }
/* a Fluid list opened from inside a popover, a pick box or a dialog sits above them (below tooltips and toasts) */
[data-base-ui-portal] > * { z-index: 1100; }
/* a tool dialog framed by FF's Dialog (sakin-dialog island): below the menus and pickers opened from inside it */
[data-base-ui-portal]:has(> [data-sakin-dialog-slot]) > * { z-index: 900; }
[data-base-ui-portal]:has(> [data-sakin-dialog-slot]) > :not([data-sakin-dialog-slot]) { background: var(--ui-scrim); }
/* FF's reset (Tailwind preflight) is scoped to its portal: the tool's own icons keep the vertical-align they had */
[data-sakin-dialog-slot] svg { vertical-align: baseline; }
/* the element inside the FF frame: FF draws scrim, position, surface and shape; the tool's element keeps padding and layout */
:where(.ui-dialog)[data-ff-frame] { position: static; translate: none; box-shadow: none; border-radius: 0; animation: none; }
/* a tool popover framed by Base UI's Popover (sakin-popover island): portalled into the element's own parent, where the
   portal node takes no room; the vanilla box's level; the element keeps its .ui-popover surface, FF places and moves it */
[data-base-ui-portal]:has([data-sakin-popover-slot]) { display: contents; }
[data-base-ui-portal] > .sakin-popover-pos { z-index: 1000; }
/* FF's toast stack (sakin-toast island): the vanilla toast's colours on queued-stack's cards */
.sakin-toast { background: var(--ui-tip-bg); color: var(--ui-tip-fg); }
.sakin-toast[data-tone="danger"] { background: var(--ui-danger); color: var(--c-on-alert, #fff); }
.sakin-toast .ui-button { --btn-fg: inherit; --btn-bg: color-mix(in srgb, currentColor 14%, transparent); flex: none; height: 24px; padding: 0 8px; font-size: var(--ui-fs-caption); }
/* a label over the work: the frame's size, a studio's name (overlay family's text, no box) */
.ui-overlay-label { color: var(--ui-muted); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }

/* breadcrumbs: the place in a toolbar (Collect's board path); the last step is where you are, any step is a drop target */
.ui-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-w-semibold); }
.ui-crumbs > button { flex-shrink: 1; min-width: 0; height: 24px; max-width: 180px; padding: 0 6px; border: 0; border-radius: var(--ui-r-control); background: none; color: var(--ui-muted); font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background-color var(--ui-fast) linear, color var(--ui-fast) linear; }
.ui-crumbs > button:hover { background: var(--ui-hover); color: var(--ui-fg); }
.ui-crumbs > button:is(:last-child, [aria-current="page"]) { color: var(--ui-fg); }
.ui-crumbs > button.sk-g-over { background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.ui-crumb-sep { display: inline-flex; color: var(--ui-subtle); --ui-icon: 12px; }
.ui-crumb-sep::before { content: none; }

/* a list row (image lists, file rows, metadata): thumbnail · text · trailing tools */
.ui-row { position: relative; display: flex; align-items: center; gap: var(--ui-sp-2); min-height: var(--ui-row); padding: 4px var(--ui-sp-2); border-radius: var(--ui-r-row); color: var(--ui-fg); box-sizing: border-box; transition: background-color var(--ui-moderate, 160ms) linear; }
.ui-row:hover { background: var(--ui-hover); }
.ui-row:is([aria-selected="true"], .active, .selected) { background: var(--ui-accent-soft); }
.ui-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-meta { color: var(--ui-muted); font-size: var(--ui-fs-micro); line-height: var(--ui-lh-micro); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-tools { display: flex; gap: 0; opacity: 0; transition: opacity var(--ui-fast, 80ms) linear; }
.ui-row:is(:hover, :focus-within, [aria-selected="true"], .active, .selected) .ui-row-tools { opacity: 1; }
@media (hover: none) { .ui-row-tools { opacity: 1; } }

/* key-value metadata */
.ui-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--ui-sp-3); margin: 0; font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
.ui-meta dt { color: var(--ui-muted); }
.ui-meta dd { margin: 0; color: var(--ui-fg); min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* badge, swatch, empty state, spinner, callout */
.ui-badge { display: inline-flex; align-items: center; gap: var(--chip-gap); height: var(--chip-h); padding: 0 var(--chip-px); border-radius: var(--ui-r-chip); background: var(--ui-tint); color: var(--ui-muted); font-size: var(--chip-fs); box-sizing: border-box; line-height: 1; font-weight: var(--ui-w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-badge[data-tone="accent"] { background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.ui-badge[data-tone="danger"] { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-badge[data-tone="warn"] { background: var(--warn-wash, rgb(212 160 23 / .12)); color: var(--warn-text, #825700); }
.ui-badge[data-tone="ok"] { background: color-mix(in srgb, var(--ui-ok) 16%, transparent); color: var(--success-ink, var(--ui-ok)); }
.ui-swatch { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ui-r-small); background: var(--sw, #fff); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); cursor: pointer; }
.ui-swatch:is([aria-pressed="true"], .active) { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 0 0 2px var(--ui-s3), 0 0 0 3px var(--ui-accent); }
.ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-sp-2); padding: var(--ui-sp-6); color: var(--ui-muted); text-align: center; font-size: var(--ui-fs-body); }
.ui-empty > .ui-icon { --ui-icon: 24px; color: var(--ui-subtle); stroke-width: 1.25; }
.ui-empty-title { margin: 0; color: var(--ui-fg); font-size: var(--ui-fs-subtitle); line-height: var(--ui-lh-subtitle); font-weight: var(--ui-w-semibold); }
.ui-spinner { flex: none; width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: ui-spin .7s linear infinite; box-sizing: border-box; }
@keyframes ui-spin { to { transform: rotate(1turn); } }
.ui-callout { display: flex; gap: var(--ui-sp-2); padding: var(--ui-sp-2) var(--ui-sp-3); border-radius: var(--ui-r-item); background: var(--ui-track); color: var(--ui-muted); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
.ui-callout[data-tone="warn"] { background: var(--warn-wash, rgb(212 160 23 / .12)); color: var(--warn-text, #825700); }
.ui-callout[data-tone="danger"] { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-callout > .ui-icon { margin-top: 1px; }
.ui-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--ui-s3); color: var(--ui-fg); box-shadow: var(--ui-shadow-3); font-size: var(--ui-fs-caption); white-space: nowrap; }

/* panel chrome injected by SakinPanels (tool.js) on a UI 2 page: the toggle in the header, the resize edge */
.ui-panel-resize { position: absolute; top: 0; bottom: 0; width: 7px; z-index: 30; cursor: col-resize; touch-action: none; }
.ui-panel-resize::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--ui-accent); opacity: 0; transition: opacity var(--ui-fast, 80ms) linear; }
.ui-panel-resize:hover::after, .ui-panel-resize[data-dragging]::after { opacity: 1; transition-delay: 120ms; }


/* ======================================================================================================
   11. Shared chrome drawn by tool.js / core.js on a UI 2 page (panels, settings, rail, export format)
   The panel layout engine (drawer, strip, open/closed widths) stays in tool-base.css, which a UI 2 page loads in the
   "legacy" cascade layer: these controls take their visibility (display) from it and everything visual from here.
   ====================================================================================================== */
:root[data-ui="2"] :is(.sk-panel-toggle, .sk-panel-fold, .sk-panel-seg).ui-icon-button { display: revert-layer; }
/* the legacy sheet gives .sk-panel-fold its flex centring only off UI 2, so on UI 2 it fell back to block and the icon sat at the left of its 36 px box: same centring as the section buttons */
:root[data-ui="2"] .sk-panel-fold.ui-icon-button { display: inline-flex; align-items: center; justify-content: center; }
:root[data-ui="2"] .sk-panel-fold .ui-icon, :root[data-ui="2"] .sk-panel-seg .ui-icon { transform: none; }
/* panel spacing, one value in every tool (Fluid's sidebar: 8 px around a group, 8 px inside a row = text at 16; controls sit 8 px
   from the edge): content gutter 16, hide/show button 36 px (4 px rows), 8 px from the edge, centred in the 44 px head */
:root[data-ui="2"] { --ui-panel-gutter: 16px; --ui-panel-inset: 8px; --ui-panel-head: 44px; --ui-panel-btn: 36px; }
:root[data-ui="2"] :is(.sk-panel-fold, .sk-panel-seg).ui-icon-button { width: var(--ui-panel-btn); height: var(--ui-panel-btn); min-height: var(--ui-panel-btn); --ui-h: var(--ui-panel-btn); --ui-icon: 16px; }
/* the hide-panel button is a plain ghost icon button (FF SidebarTrigger): an open panel is not a pressed button */
:root[data-ui="2"] .sk-panel-fold.ui-icon-button[aria-expanded="true"]:not(:hover, :active) { --btn-bg: transparent; --btn-fg: var(--ui-muted); }
:root[data-ui="2"] [data-sk-panel] > .sk-panel-strip { height: var(--ui-panel-head); margin-bottom: 0; padding-inline: var(--ui-panel-inset); box-sizing: border-box; }
:root[data-ui="2"] :is(body.sk-closed-left [data-sk-panel="left"], body.sk-closed-right [data-sk-panel="right"]) > .sk-panel-strip { height: auto; padding: var(--ui-panel-inset) 0 0; }
/* open, the strip of Crop and Twit (a panel with no row of its own for the arrow) takes no row: the button floats at the panel's inner
   edge, on the first section's head line, and that head leaves it room */
:root[data-ui="2"] :is(body:not(.sk-closed-left) [data-sk-panel="left"], body:not(.sk-closed-right) [data-sk-panel="right"])[data-sk-collapsible="mini"] { position: relative; }
:root[data-ui="2"] :is(body:not(.sk-closed-left) [data-sk-panel="left"], body:not(.sk-closed-right) [data-sk-panel="right"])[data-sk-collapsible="mini"] > .sk-panel-strip { position: absolute; top: 4px; inset-inline-end: var(--ui-panel-inset); height: auto; padding: 0; z-index: 3; }
:root[data-ui="2"] body:not(.sk-closed-right) [data-sk-panel="right"][data-sk-collapsible="mini"] > .sk-panel-strip { inset-inline-end: auto; inset-inline-start: var(--ui-panel-inset); }
:root[data-ui="2"] body:not(.sk-closed-left) [data-sk-panel="left"] > [data-sk-first] .ui-section-head { padding-inline-end: 44px; }
:root[data-ui="2"] body:not(.sk-closed-right) [data-sk-panel="right"] > [data-sk-first] .ui-section-head { padding-inline-start: 44px; }
/* a 44 px closed panel shows icons only: UI 2 inputs and groups set their own display unlayered, which beats the legacy
   sheets' hide rules, so the search field and its hint are hidden here */
:root[data-ui="2"] body.sk-closed-left .collect-side :is(.side-search, .side-search-kbd) { display: none; }
/* the closed strip tops with the same button, 8 px from the edge, in Collect as in every tool */
:root[data-ui="2"] body.sk-closed-left .collect-side .side-top { height: auto; align-items: flex-start; padding-top: var(--ui-panel-inset); }
:root[data-ui="2"] .sk-panel-strip { gap: 2px; }
:root[data-ui="2"] .ui-panel-resize { width: 7px; }
:root[data-ui="2"] .ui-panel-resize::after { right: 0; width: 1px; background: var(--ui-accent); opacity: 0; transition: opacity var(--ui-fast, 80ms) linear; }
:root[data-ui="2"] .ui-panel-resize:is(:hover, :focus-visible)::after, :root[data-ui="2"] body.sk-resizing .ui-panel-resize::after { opacity: 1; background: var(--ui-accent); }

:root[data-ui="2"] :is(.sk-zoom, .sk-g-bar).ui-bar { display: revert-layer; }   /* shown and hidden by the tool (tool-base.css, gallery.css): display only */
:root[data-ui="2"] .sk-recenter.ui-pill { display: revert-layer; border: 0; font: inherit; font-size: var(--ui-fs-caption); cursor: pointer; background: var(--ui-s3); color: var(--ui-fg); box-shadow: var(--ui-shadow-4); }
.ui-settings-bar { display: flex; align-items: center; gap: 4px; }
/* on a site page (no slot in a toolbar): fixed top right, on the site grid of core.css (--ruler, --u, --m) */
.ui-settings-bar:not(.in-slot) { position: fixed; z-index: 32; top: calc(var(--ruler, 0px) + var(--u, 12px)); inset-inline-end: var(--u, 12px); }
@media (min-width: 1220px) { body:not([data-app]) .ui-settings-bar:not(.in-slot) { inset-inline-end: var(--m, 12px); } }
.ui-settings-bar .lang-btn { --ui-pad-x: 8px; gap: 2px; font-variant-numeric: tabular-nums; }
.ui-settings-bar .lang-btn .ui-icon { --ui-icon: 12px; }
.ui-settings-bar .themes { --ui-h: 28px; --ui-icon: 16px; }
/* a narrow masthead shows only the current appearance; a tap steps to the next one (core.js) */
@media (max-width: 620px) { .ui-settings-bar .themes > .ui-seg:not([aria-pressed="true"]) { display: none; } .ui-settings-bar .themes > :is(.ui-ind, .ui-hl) { display: none; } }
.ui-settings { width: 300px; max-height: calc(100vh - 64px); overflow: auto; padding: var(--ui-sp-2) var(--ui-sp-3); }
/* Settings → Interface → Sidebar: a radio card per style with a small window drawn in it */
.ui-set-cards { display: flex; flex-direction: column; gap: var(--ui-sp-1); padding: var(--ui-sp-1) 0; color: var(--ui-muted); }
.ui-set-cards > .ui-label { margin: 0; color: inherit; font-size: var(--ui-fs-caption); }
.ui-set-cards .ui-choice-card { grid-template-columns: 64px minmax(0, 1fr); }
.ui-set-cards .ui-choice-media { width: 64px; height: auto; aspect-ratio: 88 / 50; }
.set-sb-art .w { fill: var(--ui-canvas); }
.set-sb-art .s { fill: var(--ui-s1); }
.set-sb-art .s.raised { fill: var(--ui-s3); filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .18)); }
.set-sb-art .s.ring { stroke: var(--ui-border); stroke-width: 1; }
.set-sb-art .edge { stroke: var(--ui-border); stroke-width: 1; }
.set-sb-art .r { fill: var(--ui-border); }
.set-sb-art .r.on { fill: var(--ui-accent); opacity: .55; }
.ui-set-sec { display: flex; flex-direction: column; padding: var(--ui-sp-1) 0; }
.ui-set-sec + .ui-set-sec { box-shadow: inset 0 1px 0 var(--ui-border-soft); margin-top: var(--ui-sp-1); padding-top: var(--ui-sp-2); }
.ui-set-sec > .ui-pop-title { margin: 2px 0 2px; }
.ui-set-sec > .ui-pop-row { justify-content: space-between; color: var(--ui-muted); cursor: pointer; min-height: var(--ui-row); }
.ui-set-sec > .ui-pop-row:hover { color: var(--ui-fg); }
.ui-set-sec > .ui-menu-item { margin: 0 calc(var(--ui-sp-2) * -1); }
.ui-set-sec > .ui-menu-item:hover { background: var(--ui-hover); color: var(--ui-fg); }
.ui-set-sec > .ui-hint { margin: 2px 0 4px; }

.ui-rail { gap: 0; background: var(--ui-s1); box-shadow: inset -1px 0 0 var(--ui-border-soft); }
.ui-rail-top { flex: none; width: 100%; height: 44px; display: grid; place-items: center; box-shadow: inset 0 -1px 0 var(--ui-border-soft); }
.ui-rail-list { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: var(--ui-sp-1); }
.ui-rail-btn { --ui-h: 32px; --ui-icon: 18px; }
.ui-rail-btn .logo, .ui-rail-btn .logo svg { width: 18px; height: 18px; display: block; color: inherit; }
.ui-rail-list > .ui-ind { background: var(--ui-active); }
.ui-rail-list > .ui-rail-btn[aria-current="page"] { --btn-fg: var(--ui-fg); }
.ui-rail-list[data-ui-indicated] > .ui-rail-btn[aria-current="page"] { --btn-bg: transparent; }

.sk-fmt-pop { width: 248px; }
[data-sk-format].changed { --btn-fg: var(--ui-accent-text); }

/* ======================================================================================================
   10. Reduced motion: travel goes, the 80ms fades stay
   ====================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ui-popover, .ui-menu, .ui-tooltip[data-state="open"], .ui-dialog[data-state="open"], .ui-toast[data-state="open"] { animation: ui-fade-in 80ms linear both !important; }
  .ui-toast[data-state="closed"] { animation: ui-fade-out 80ms linear both !important; }
  .ui-switch-thumb, .ui-check::after, .ui-radio::after, .ui-section-chev, .ui-nav-twist, .ui-menu-check path { transition-duration: 0ms !important; }
}

/* Line standard (FF: one 1 px hairline for structure, --ui-border only on controls).
   Legacy panels, the rail, the header and the rulers carried a solid 1 px border on top of the hairline above, so their edge read
   as a thicker, darker line than every other divider; the hairline (box-shadow) stays, the border goes. */
:root[data-ui="2"] :is(.ui-sidebar, .ui-rail, .ui-toolbar, .ui-rail-top, .shell-panel) { border-width: 0; }
:root[data-ui="2"] .sk-ruler { border-color: var(--ui-border-soft); }
/* the tab strip above a panel's first section already sits under the header: no second line */
:root[data-ui="2"] .shell-head { box-shadow: none; }

/* One header in every tool: the same padding, the same settings cluster anchored to the right edge (gear, language, themes at
   the same x and y whatever else a tool puts in its header), and one app mark: the line glyph at the rail's 18 px (the app icons share one grid: 3.75 to 20.25, tiles 6.5 wide, 3.5 apart, radius 1, 1.5 line). */
:root[data-ui="2"] .ui-toolbar.ui-toolbar { padding: 0 var(--ui-sp-2) 0 var(--ui-sp-3); }
:root[data-ui="2"] .ui-toolbar :is(.tb-settings, .ui-settings-bar, .hdr-settings) { display: flex; align-items: center; gap: 4px; height: 28px; margin: 0; flex: none; }
:root[data-ui="2"] .ui-toolbar :is(#settings-btn, .sk-set-btn) { margin: 0; }
:root[data-ui="2"] .ui-toolbar :is(.tb-right, .header-end) { gap: var(--ui-sp-1); }
:root[data-ui="2"] .app-title { gap: var(--ui-sp-2); height: 28px; font-size: var(--ui-fs-body); line-height: var(--ui-lh-caption); font-weight: var(--ui-w-semibold); align-items: center; }   /* one title box in every tool (Crop had none) */
:root[data-ui="2"] .app-title .logo[data-glyph] { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-fg); }
:root[data-ui="2"] .app-title .logo[data-glyph] svg { width: 18px; height: 18px; }
:root[data-ui="2"] .ui-toolbar .hdr-settings > * { align-self: center; }
:root[data-ui="2"] .ui-toolbar .hdr-settings .ui-settings-bar { height: 28px; }
@media (max-width: 360px) {
  :root[data-ui="2"] body[data-app] .ui-toolbar.ui-toolbar { padding-inline: var(--ui-sp-1); gap: var(--ui-sp-1); }
  :root[data-ui="2"] body[data-app] .ui-toolbar .app-title { gap: var(--ui-sp-1); }
}
/* inset: the ground a step darker than the panel paper, so the flat panels read as a column beside the card, not as air */
@media (min-width: 851px) { :root[data-ui="2"][data-ui-sidebar="inset"] body { background: color-mix(in srgb, var(--ui-bg), var(--ui-fg) 4%); } }
/* inset: the panels have no edge, so their section dividers stop short of it (12 px gutters) instead of running to the window */
@media (min-width: 851px) { :root[data-ui="2"][data-ui-sidebar="inset"] .ui-sidebar .ui-section + .ui-section { box-shadow: none; background-image: linear-gradient(var(--ui-border-soft), var(--ui-border-soft)); background-size: calc(100% - 24px) 1px; background-position: 12px 0; background-repeat: no-repeat; } }
/* inset: the thin tool rail is the one bar that keeps its edge line, it is what separates the tools from the panel beside it */
@media (min-width: 851px) { :root[data-ui="2"][data-ui-sidebar="inset"] .ui-rail { box-shadow: inset -1px 0 0 var(--ui-border-soft) !important; } }

.ui-panel-resize[data-sk-side="right"]::after, :root[data-ui="2"] .ui-panel-resize[data-sk-side="right"]::after { right: auto; left: 0; }
/* while a popup, menu or dialog is open, the resize grip underneath must not react */
body:has(:is(.ui-popover, .ui-menu, .sk-set-pop, .sk-help-pop, .sk-dialog-back, .ui-dialog-backdrop):not(.hidden, [hidden])) .sk-panel-resize { pointer-events: none; }

/* A stale tooltip position during resize must never enlarge the document. */
.ui-tooltip-portal { position: fixed; inset: 0; overflow: clip; pointer-events: none; z-index: 2147483600; }