/* 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));
  /* the quietest text (counts, shortcuts, placeholders, group labels): the palette's --text-muted where a tool has it,
     else the muted tone pulled a little toward the paper. Opaque, so it keeps ≥4:1 (a 70% alpha read at ~2.6:1). */
  --ui-subtle: var(--text-muted, color-mix(in srgb, var(--ui-muted) 85%, var(--ui-bg)));
  --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-seg-on: var(--ui-s3);   /* the chosen segment's pill: white on a light paper */
  --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: one set, in core.css (the tiers --ui-fast/-moderate/-slow and their -exit, --duration-*, the curves);
     ui.js reads the tiers there and writes each tier's spring curve (--ui-ease-*). Colour on hover and press:
     var(--duration-hover), there at once, leaving over --duration-fast. tests/motion-contract.mjs keeps
     core.css, ui.js and springs.ts equal. */
}
/* 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);
  /* a dark paper lifts only a few % toward white, which left the chosen segment nearly level with its 5% track:
     the pill is an ink wash instead, one calm step above the track (light papers keep the white pill) */
  --ui-seg-on: color-mix(in srgb, var(--ui-fg) 13%, var(--ui-bg));
  --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 var(--ui-moderate) var(--ease-out-ui), height var(--ui-moderate) var(--ease-out-ui), background-color var(--duration-hover) var(--ease-out-ui) !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(--duration-hover) var(--ease-out-ui), scale var(--duration-press) var(--ease-out-ui);
}
.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 var(--duration-press) var(--ease-out-ui), background-color var(--duration-hover) var(--ease-out-ui);
}
/* the press is there at once (the give from tool-base.css, the ring closing here); letting go takes --duration-press */
.ui-button:active:not(:disabled), .ui-icon-button:active:not(:disabled) { transition-duration: 0s; }
.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: 0s; }
.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, .armed) { --btn-bg: var(--ui-danger-soft); }   /* armed keeps its solid fill under the pointer */
  .ui-button[data-variant="danger"].armed:hover:not(:disabled) { --btn-bg: var(--c-alert-hover, var(--ui-danger)); }
  .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); }
/* at work (SakinExport.busy → .sk-busy, --sk-p 0..1, [data-sk-indet] while the count is unknown): the button keeps its
   fill and full colour (it is busy, not unavailable) and a thin bar fills along its foot */
.ui-button.sk-busy, .ui-icon-button.sk-busy { overflow: hidden; cursor: progress; }
.ui-button.sk-busy:disabled, .ui-icon-button.sk-busy:disabled { opacity: 1; cursor: progress; }
.ui-button.sk-busy::after, .ui-icon-button.sk-busy::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; background: currentColor; opacity: .55; pointer-events: none;
  transform-origin: left center; scale: var(--sk-p, 0) 1; transition: scale var(--duration-panel) var(--ease-out-strong);
}
.ui-button.sk-busy[data-sk-indet]::after, .ui-icon-button.sk-busy[data-sk-indet]::after { right: auto; width: 34%; scale: 1; animation: ui-busy-indet 1.15s var(--ease-move) infinite; }
@keyframes ui-busy-indet { from { translate: -100% 0; } to { translate: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-button.sk-busy[data-sk-indet]::after, .ui-icon-button.sk-busy[data-sk-indet]::after { animation: none; width: 100%; opacity: .3; } }
.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(--duration-hover) var(--ease-out-ui), text-decoration-color var(--duration-hover) var(--ease-out-ui); }
.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(--duration-hover) var(--ease-out-ui), background-color var(--duration-hover) var(--ease-out-ui); 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(--duration-hover) var(--ease-out-ui), background-color var(--duration-hover) var(--ease-out-ui); 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(--duration-hover) var(--ease-out-ui), 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; }
/* a field with its label inside the box ([data-float]): the label rests in the middle while the field is empty and
   moves up, smaller (13 → 11 px, the micro size), on focus or once it holds text; the box keeps its place and size.
   For forms people fill in (TRT Print's person), not for panel controls: its 44 px is a height of its own, decided
   for forms only (docs/ui2/kurallar.md §4). Markup: .ui-field[data-float] > label[for] + input.ui-input[placeholder=" "]
   (the blank placeholder lets :placeholder-shown tell empty from filled). The label follows the input's dir. */
/* a required field: a red * after the label (the form says once, under the fields, what it means) */
.ui-req { color: var(--ui-danger-text); margin-inline-start: 2px; }
.ui-field[data-float] { position: relative; --float-h: 44px; --float-x: 10px; }
.ui-field[data-float] > .ui-input { height: var(--float-h); padding: 16px var(--float-x) 0; }
.ui-field[data-float] > label {
  position: absolute; top: 0; left: var(--float-x); right: var(--float-x); height: var(--float-h); min-height: 0;
  line-height: var(--float-h); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; transform-origin: left center;
  transition: transform var(--ui-moderate-exit, 120ms) var(--ui-ease-exit, ease-out);
}
.ui-field[data-float] > label:dir(rtl) { transform-origin: right center; }
.ui-field[data-float]:has(> .ui-input[dir="rtl"]) > label { direction: rtl; transform-origin: right center; }
.ui-field[data-float]:has(> .ui-input[dir="ltr"]) > label { direction: ltr; transform-origin: left center; }
.ui-field[data-float]:has(> .ui-input:is(:focus, :not(:placeholder-shown), :autofill, :-webkit-autofill)) > label {
  transform: translateY(-10px) scale(.85); transition: transform var(--ui-moderate, 160ms) var(--ui-ease-moderate, ease-out);
}
/* 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) 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(--duration-hover) var(--ease-out-ui), background-color var(--duration-hover) var(--ease-out-ui); }
.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(--duration-hover) var(--ease-out-ui); }
.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(--duration-hover) var(--ease-out-ui); 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(--duration-hover) var(--ease-out-ui); }
.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(--duration-hover) var(--ease-out-ui); 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(--duration-hover) var(--ease-out-ui); }
.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(--duration-hover) var(--ease-out-ui), 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-seg-on); 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-seg-on); 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-seg-on); --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(--duration-hover) var(--ease-out-ui), color var(--duration-hover) var(--ease-out-ui); }
: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) it grows a little, in both
   directions, from its button (ui.js place() sets transform-origin on the button; the data-side origins above are the
   fallback). Leaving: a ghost from where the eye is (ui.js exitGhost); opened again meanwhile, it carries on from there. */
.ui-popover, .ui-menu { animation: ui-pop-in var(--ui-moderate) var(--ui-ease-moderate) both; }
.ui-popover.hidden, .ui-menu.hidden { display: none; }
.ui-ghost { animation: none !important; }
@keyframes ui-pop-in { from { opacity: 0; transform: scale(.97); } }
.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)); }
/* a menu is 288 wide (224 for a submenu), a picker too; a tool's own class or width: wins */
:where(.ui-menu[role="menu"]) { width: 288px; max-height: min(480px, calc(100dvh - 16px)); }
:where(.ui-menu[role="menu"].ui-menu-sub) { width: 224px; }
/* a Select's list: as wide as its button (or wider for long options), 300 high at most */
.ui-menu[data-select] { min-width: 0; max-height: min(300px, calc(100dvh - 16px)); }
.ui-menu-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; flex: none;
  height: var(--ui-row); min-height: var(--ui-row); padding: 0 6px; 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(--duration-hover) var(--ease-out-ui), background-color var(--duration-hover) var(--ease-out-ui);
}
.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"]) > .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); 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(6px + 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); }
/* the search field on top of a menu: sticky, edge to edge, a hairline under it; rows scroll beneath */
.ui-menu-search { position: sticky; top: -4px; z-index: 2; flex: none; display: flex; align-items: center; gap: 4px; height: var(--ui-row); margin: -4px -4px 2px; padding: 0 10px; background: inherit; box-shadow: inset 0 -1px 0 var(--ui-border-soft); }
.ui-menu-search > .ui-icon { flex: none; color: var(--ui-muted); transition: color var(--duration-hover) var(--ease-out-ui); }
.ui-menu-search:focus-within > .ui-icon { color: var(--ui-fg); stroke-width: 2; }
.ui-menu-search > input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ui-fg); font: inherit; outline: none; box-shadow: none; }
.ui-menu-search > input::placeholder { color: var(--ui-muted); }
.ui-menu-empty { padding: 24px var(--ui-sp-2); color: var(--ui-muted); text-align: center; }
.ui-menu > [hidden] { display: none; }
.ui-menu-group { display: flex; flex-direction: column; }
.ui-menu-swatch { flex: none; width: 14px; height: 14px; margin: 1px; border-radius: 50%; 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); gap: var(--ui-sp-2); padding-inline: var(--ui-sp-2); }
.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); }
/* a preset row's colours (Cover's program colours): small squares after its name */
.ui-pick-sw { display: inline-flex; gap: 2px; margin-left: auto; flex: none; }
.ui-pick-sw i { width: 10px; height: 10px; border-radius: 2px; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-fg, currentColor) 18%, transparent); }
.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); gap: var(--ui-sp-2); padding-inline: var(--ui-sp-2); }
.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) var(--ui-ease-fast) both; }
/* data-state="warm" (core.js tips): moving from one button to the next while a tip shows, the next one is simply there */
.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); }

/* Page lists (SakinPages, pages.js; docs/ui2/sayfa-sistemi.md): reordering by hand. The rows stay put; one accent line
   shows the place, a small chip follows the pointer. Rows: one line, "number name"; the add button sits at the panel's
   foot (.sk-p-foot). */
.sk-p-marker { position: fixed; z-index: 1001; left: 0; top: 0; height: 2px; border-radius: 2px; background: var(--ui-accent); pointer-events: none; }
.sk-p-chip { position: fixed; z-index: 1002; left: 0; top: 0; display: flex; padding: 3px; border-radius: var(--ui-r-control); background: var(--ui-s3); box-shadow: var(--ui-shadow-4); pointer-events: none; }
.sk-p-chip.is-empty { width: 28px; height: 20px; }
.sk-p-chip > :is(img, canvas, .sk-p-thumb) { display: block; max-width: 40px; max-height: 30px; border-radius: 2px; }
.sk-p-count { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--ui-accent); color: var(--ui-on-accent); font-size: var(--ui-fs-mini); font-weight: var(--ui-w-semibold); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.sk-p-dragging { background: var(--ui-active); }
.sk-p-grabbing, .sk-p-grabbing * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.sk-p-grabbing .ui-tooltip { display: none; }
.sk-p-foot { flex: none; padding: var(--ui-sp-2) var(--ui-sp-3); border-top: 1px solid var(--ui-border-soft); }

/* 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(--duration-hover) var(--ease-out-ui); }
.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(--duration-hover) var(--ease-out-ui), color var(--duration-hover) var(--ease-out-ui); }
.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); }
/* Export: one skeleton in every tool (SakinExport.panel, tool.js), at the foot of the right panel as Twit's. The tool's
   own rows (the options slot) stand in the column as if written there; the line under the buttons says what is made */
.sk-export { flex: none; margin-top: auto; box-shadow: inset 0 1px 0 var(--ui-border-soft); }
.sk-export > .ui-field { margin: 0; }
.sk-export > [data-sk-slot="options"] { display: contents; }
.sk-export > [data-sk-slot="options"] > :empty { display: none; }   /* a mount point with nothing in it takes no gap */
.sk-export [data-sk-slot="head"] { display: flex; align-items: center; }
.sk-export-hint { text-align: center; }
.sk-export-hint:empty { display: none; }
/* 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(--duration-hover) var(--ease-out-ui); }
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(--duration-hover) var(--ease-out-ui), background-color var(--duration-hover) var(--ease-out-ui); -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 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(--duration-hover) var(--ease-out-ui), color var(--duration-hover) var(--ease-out-ui); }
.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(--duration-hover) var(--ease-out-ui); }
.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 var(--ui-fast) linear both !important; }
  .ui-toast[data-state="closed"] { animation: ui-fade-out var(--ui-fast) linear both !important; }
  .ui-switch-thumb, .ui-check::after, .ui-radio::after, .ui-field[data-float] > label, .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; }

/* command menu (commands.js): field, tabs, grouped rows, in the dialog frame */
.ui-cmd { display: flex; flex-direction: column; width: min(560px, calc(100vw - 16px)); max-height: min(520px, 70dvh); padding: 0; overflow: hidden; }
.ui-cmd-field { flex: none; border-bottom: 1px solid var(--ui-border-soft); }
.ui-cmd-field input { width: 100%; height: 44px; padding: 0 var(--ui-sp-4); border: 0; background: transparent; color: var(--ui-fg); font: inherit; font-size: var(--ui-fs-body); outline: none; }
.ui-cmd-field input::placeholder { color: var(--ui-subtle); }
.ui-cmd-tabs { flex: none; display: flex; gap: 2px; padding: 6px var(--ui-sp-3) 0; }
.ui-cmd-tab { height: 26px; padding: 0 var(--ui-sp-2); border: 0; border-radius: var(--ui-r-row); background: transparent; color: var(--ui-muted); font: inherit; font-size: var(--ui-fs-caption); cursor: pointer; transition: color var(--duration-hover) var(--ease-out-ui), background-color var(--duration-hover) var(--ease-out-ui); }
.ui-cmd-tab[aria-selected="true"] { background: var(--ui-active); color: var(--ui-fg); font-weight: var(--ui-w-semibold); }
@media (hover: hover) and (pointer: fine) { .ui-cmd-tab:hover { color: var(--ui-fg); } }
.ui-cmd-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
.ui-cmd-group { padding: 8px var(--ui-sp-2) 4px; color: var(--ui-subtle); font-size: var(--ui-fs-caption); }
.ui-cmd-item { 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-muted); font-size: var(--ui-fs); cursor: pointer; }
.ui-cmd-item[aria-selected="true"] { background: var(--ui-active); color: var(--ui-fg); }
.ui-cmd-item[aria-selected="true"] .ui-cmd-text { font-weight: var(--ui-w-semibold); }
.ui-cmd-item[aria-disabled="true"] { opacity: .45; cursor: default; }
.ui-cmd-ico { flex: none; width: var(--ui-icon); height: var(--ui-icon); }
.ui-cmd-thumb { flex: none; width: 22px; height: 22px; border-radius: 4px; object-fit: cover; background: var(--ui-hover); }
.ui-cmd-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-cmd-desc { color: var(--ui-subtle); font-size: var(--ui-fs-caption); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.ui-cmd-kbd, .ui-cmd-action { flex: none; color: var(--ui-subtle); font-size: var(--ui-fs-caption); font-family: inherit; }
.ui-cmd-action { visibility: hidden; }
.ui-cmd-item[aria-selected="true"] .ui-cmd-action { visibility: visible; }
.ui-cmd-empty { padding: var(--ui-sp-5, 24px) var(--ui-sp-3); color: var(--ui-subtle); font-size: var(--ui-fs); text-align: center; }