/* bidi UI kit (UI-1): the reusable component layer for pages that opt in.
   Load it after site.css (or after a page's own style block). Every rule
   uses logical properties, so right-to-left needs almost nothing special.
   The few direction-specific rules use :dir(rtl) on the component itself
   (or the dir attribute an overlay carries), never the page's dir, so an
   English cell inside an Arabic page still renders correctly. Minimum font
   size anywhere: 11px.
   Pattern names follow namethatui.com; see docs/UI-PATTERNS.md.

   The look is the dark UI the founder approved on 15 October 2026: near-black
   panels a step above the ground, 1px hairlines, white text with two greys,
   pill buttons (the primary one a white pill with dark ink), cards with 16px
   corners, panels, dialogs and drawers with 20px, fields with 12px, light
   cobalt for links and focus rings, cobalt for fills.

   How this file grows (D-12): one append-only
   region per component fenced by "component: <name>" and "end: <name>"
   markers (kebab-case, the same name as the region in ui.js). An item that
   adds a component appends a new region before "motion"; an item that
   extends one edits inside its fence and nowhere else, so parallel items
   never rewrite each other's lines. test_ui_kit checks the fences.

   No tokens here: every value (colour, type, radius, motion, layers) comes from assets/tokens.css,
   which every page links first, a page that loads nothing else included. */


/* ==== component: base ==== */
/* Arabic inside any element marked lang="ar": the Arabic face, no negative tracking.
   (KIT-1) A page that sets its own Arabic type and loads the kit only for what the kit
   itself puts on screen (the Alert dialog, a toast) says so with
   <html data-ui-scope="overlays">: there the rule covers the kit's own surfaces and leaves
   the page's type alone. :where() keeps the first selector's weight what it always was. */
:lang(ar):where(:not([data-ui-scope="overlays"], [data-ui-scope="overlays"] *)),
[data-ui-scope="overlays"] :is(.ui-overlay, .ui-toasts, .ui-tooltip, .ui-menu, .ui-popover):lang(ar),
[data-ui-scope="overlays"] :is(.ui-overlay, .ui-toasts, .ui-tooltip, .ui-menu, .ui-popover) :lang(ar) { --font-display: var(--font-arabic); --font-body: var(--font-arabic); font-family: var(--font-arabic); letter-spacing: 0; }
:lang(ar) :is(h1, h2, h3, h4, .ui-title) { letter-spacing: 0; }

.ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ui-scroll-lock { overflow: hidden; }

/* ==== end: base ==== */

/* ==== component: buttons ==== */
/* ---------- Buttons: pills. The hover fill and its ring live on ::before and only its opacity fades;
   the words never change colour mid-hover. 40 tall (32 small, 48 large; small is 40 on a phone or a
   touch screen, through --h-sm). ---------- */
.ui-btn { position: relative; isolation: isolate; display: inline-flex; min-height: var(--h-md); align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--raised); color: var(--text); font: 600 14px/20px var(--font-body); letter-spacing: 0; box-shadow: none; cursor: pointer; transition: scale var(--dur-move) var(--spring), opacity var(--dur-fade) var(--ease-fade); }
.ui-btn::before { position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: var(--lift); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); opacity: 0; content: ''; pointer-events: none; transition: opacity var(--dur-fade) var(--ease-fade); }
.ui-btn:hover::before { opacity: 1; }
.ui-btn:active { scale: .96; transition-duration: var(--dur-press); }
.ui-btn:disabled { opacity: .5; cursor: default; scale: none; }
.ui-btn:disabled::before { opacity: 0; }
/* Not available for now but still focusable (busy, or nothing to act on): it keeps the keyboard. */
.ui-btn[aria-disabled="true"] { opacity: .5; cursor: default; scale: none; }
.ui-btn[aria-disabled="true"]::before { opacity: 0; }
.ui-btn[aria-disabled="true"][aria-busy="true"] { cursor: progress; }
/* A part of the page the plan does not include (the founder, 2026-10-11: "any thing not allowed
   should not be clickable"): shown, dimmed, inert (nothing inside takes a click, a key or focus);
   the plan note that explains it sits outside, where its Change plan link still works. */
.is-plan-locked { opacity: .5; filter: saturate(.4); cursor: not-allowed; user-select: none; }
.is-plan-locked * { pointer-events: none; }
button.ui-radio-card.is-plan-locked, .ui-btn.is-plan-locked { scale: none; box-shadow: none; }
.ui-btn svg { width: 16px; height: 16px; flex: none; }
/* A link that is a button to the eye (a download): no underline, the same ring. */
a.ui-btn { text-decoration: none; }
/* The primary button is the reference's white pill with dark ink. A link dressed as one keeps its ink
   whatever link colour the block around it sets (a Callout, a prose block). */
.ui-btn-primary { border-color: transparent; background: var(--pill); color: var(--pill-ink); }
.ui-btn-primary::before { background: #fff; box-shadow: none; }
a.ui-btn.ui-btn-primary, a.ui-btn.ui-btn-primary:is(:link, :visited, :hover, :focus-visible, :active) { color: var(--pill-ink); text-decoration: none; }
.ui-btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.ui-btn-ghost::before { background: rgba(255,255,255,.04); box-shadow: none; }
.ui-btn-ghost:hover { color: var(--text); }
.ui-btn-danger { border-color: color-mix(in srgb, var(--err-line) 55%, transparent); background: transparent; color: var(--err); }
.ui-btn-danger::before { background: var(--err-soft); box-shadow: inset 0 0 0 1px var(--err-line); }
.ui-btn-sm { min-height: var(--h-sm); padding: 0 12px; font-size: 13px; }
.ui-btn-lg { min-height: var(--h-lg); padding: 0 24px; font: 600 16px/24px var(--font-body); }
.ui-icon-btn { width: var(--h-md); min-height: var(--h-md); padding: 0; }
.ui-icon-btn.ui-btn-sm { width: var(--h-sm); min-height: var(--h-sm); }
.ui-icon-btn svg { width: 17px; height: 17px; }
:where(.ui-btn, .ui-chip, .ui-tab, .ui-segment, .ui-menu-item, .ui-option, .ui-page, .ui-table th button, .ui-close):focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }

/* ==== end: buttons ==== */

/* ==== component: kbd ==== */
/* ---------- Kbd hint ---------- */
.ui-kbd { display: inline-flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; padding: 0 6px; border: 1px solid var(--line-2); border-block-end-width: 2px; border-radius: var(--r-xs); background: var(--raised); color: var(--text-2); font: 600 11px/1 var(--font-mono); letter-spacing: .02em; vertical-align: middle; }
/* Key combinations read left to right in both languages. */
.ui-kbd-group { display: inline-flex; align-items: center; gap: 4px; direction: ltr; unicode-bidi: isolate; }
.ui-kbd-group .ui-kbd-plus { color: var(--text-2); font-size: 11px; }

/* ==== end: kbd ==== */

/* ==== component: badge ==== */
/* ---------- Badge, chip, status pill ---------- */
.ui-badge { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 6px; border-radius: var(--r-pill); background: var(--cobalt); color: #fff; font: 600 11px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.ui-badge[data-tone="neutral"] { background: var(--lift); color: var(--text); }
.ui-badge[data-tone="dot"] { min-width: 8px; width: 8px; height: 8px; padding: 0; }
/* P-34: a marker in words on a record (a conversation's sentiment). The status pairs keep AA; the word is always there, so the tone only helps. */
.ui-badge[data-tone="ok"], .ui-badge[data-tone="warn"], .ui-badge[data-tone="err"], .ui-badge[data-tone="off"] { padding: 0 8px; border: 1px solid transparent; white-space: nowrap; }
.ui-badge[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); color: var(--ok); }
.ui-badge[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); color: var(--warn); }
.ui-badge[data-tone="err"] { border-color: color-mix(in srgb, var(--err) 35%, transparent); background: var(--err-soft); color: var(--err); }
.ui-badge[data-tone="off"] { border-color: var(--line-2); background: var(--raised); color: var(--text-2); }
/* A tag is the reference's neutral quiet pill: 24 tall, the word in the first grey on a faint fill. */
.ui-tag { display: inline-flex; min-height: var(--h-xs); align-items: center; gap: 4px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: rgba(255,255,255,.06); color: var(--text-2); font: 600 12px/16px var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ui-chip { display: inline-flex; min-height: var(--h-sm); align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--panel); color: var(--text-2); font: 600 13px/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-fade) var(--ease-fade), border-color var(--dur-fade) var(--ease-fade), color var(--dur-fade) var(--ease-fade); }
.ui-chip:hover { border-color: rgba(255,255,255,.3); color: var(--text); }
/* The pressed chip is the white pill, with a tick: never the colour alone. */
.ui-chip[aria-pressed="true"] { border-color: transparent; background: var(--pill); color: var(--pill-ink); }
.ui-chip[aria-pressed="true"]::before { width: 10px; height: 6px; margin-block-start: -3px; border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); content: ''; }
/* The tick is drawn from two borders: in a right-to-left chip it uses the other inline side, or it would read as a chevron. */
.ui-chip[aria-pressed="true"]:dir(rtl)::before { border-inline-start: 0; border-inline-end: 2px solid currentColor; }
.ui-chip-remove { display: grid; width: 20px; height: 20px; place-items: center; margin-inline-end: -6px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; }
.ui-chip-remove:hover { background: var(--line-2); color: var(--text); }
.ui-chip-remove svg { width: 11px; height: 11px; }
.ui-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* The status pill is the reference's quiet pill (.m-pill): 24 tall, the word in sentence case, Manrope 12 600.
   Neutral: the first grey on a faint fill. The ok and the amber tones (and the error tone beside them) carry a 6px
   dot before the word; the blue tone, like the neutral one, carries none. The word says the state; the dot and the
   colour only help. Each tone keeps AA on its own fill. */
.ui-pill { display: inline-flex; min-height: var(--h-xs); align-items: center; gap: 4px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: rgba(255,255,255,.06); color: var(--text-2); font: 600 12px/16px var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ui-pill:is([data-status="live"], [data-status="ok"], [data-status="warn"], [data-status="pending"], [data-status="error"], [data-status="failed"])::before { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; content: ''; }
.ui-pill[data-status="live"], .ui-pill[data-status="ok"] { background: var(--ok-soft); color: var(--ok); }
.ui-pill[data-status="warn"], .ui-pill[data-status="pending"] { background: var(--warn-soft); color: var(--warn); }
.ui-pill[data-status="error"], .ui-pill[data-status="failed"] { background: var(--err-soft); color: var(--err); }
.ui-pill[data-status="info"] { background: rgba(157,184,255,.12); color: var(--cobalt-2); }
.ui-pill[data-status="off"], .ui-pill[data-status="paused"] { background: rgba(255,255,255,.06); color: var(--text-2); }
:lang(ar) .ui-pill { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

/* ==== end: badge ==== */

/* ==== component: avatar ==== */
/* ---------- Avatar, avatar group, status dot ---------- */
.ui-avatar { position: relative; display: inline-grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 50%; background: var(--lift); color: var(--text); font: 600 12.5px/1 var(--font-display); letter-spacing: 0; overflow: visible; }
.ui-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ui-avatar[data-size="sm"] { width: 28px; height: 28px; font-size: 11px; }
.ui-avatar[data-size="lg"] { width: 48px; height: 48px; font-size: 16px; }
.ui-avatar[data-tone="ink"] { background: var(--pill); color: var(--pill-ink); }
.ui-avatar[data-tone="signature"] { background: color-mix(in srgb, var(--orange) 18%, var(--panel)); color: var(--orange); }
.ui-status-dot { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 10px; height: 10px; border: 2px solid var(--panel); border-radius: 50%; background: var(--text-3); }
/* A state is never a colour alone: a full dot (available), a ring (away), a square (busy), each at 3:1 or
   more on the dark ring around it. Next to the Avatar, the page says the state in words for a screen reader. */
.ui-status-dot[data-state="online"] { background: var(--ok); }
.ui-status-dot[data-state="away"] { background: var(--panel); box-shadow: inset 0 0 0 2px var(--warn); }
.ui-status-dot[data-state="busy"] { border-radius: 3px; background: var(--err); }
/* Off shift (P-19): a short bar, the fourth shape, in the quiet grey. */
.ui-status-dot[data-state="off"] { inset-block-end: 2px; height: 6px; border-radius: 3px; background: var(--text-2); }
.ui-avatar-group { display: inline-flex; align-items: center; }
.ui-avatar-group .ui-avatar { box-shadow: 0 0 0 2px var(--panel); }
.ui-avatar-group .ui-avatar + .ui-avatar { margin-inline-start: -10px; }
.ui-avatar-group .ui-avatar-more { background: var(--raised); color: var(--text-2); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 11px; }

/* ==== end: avatar ==== */

/* ==== component: progress ==== */
/* ---------- Progress bar: the reference's readiness bar, an 8 px track on the hairline colour, the fill running
   from cobalt to orange (the other way in a right-to-left page) ---------- */
.ui-progress { --value: 0; display: grid; gap: 8px; }
.ui-progress-track { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.ui-progress-fill { width: calc(var(--value) * 1%); height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--cobalt), var(--orange)); transition: width var(--dur-move) var(--spring); }
.ui-progress-fill:dir(rtl) { background: linear-gradient(270deg, var(--cobalt), var(--orange)); }
.ui-progress[data-tone="hot"] .ui-progress-fill { background: var(--err-line); }
.ui-progress-label { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); font: 600 12px/16px var(--font-body); }
.ui-progress-label strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ui-spinner { width: 18px; height: 18px; border: 2px solid var(--line-2); border-block-start-color: var(--cobalt-2); border-radius: 50%; animation: ui-spin 800ms linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
/* ---------- Progress ring (P-43): the same value round, for something small and round (a
   sample playing in Settings > Channels > Voice; the widget's mic draws its own copy). The
   ring fills clockwise from the top; in Arabic it fills the other way, the reading direction.
   The value is said in its middle and as aria-valuetext, as on the bar. ---------- */
.ui-progress.ui-progress-ring { --ui-ring-size: 44px; position: relative; display: inline-grid; width: var(--ui-ring-size); height: var(--ui-ring-size); place-items: center; gap: 0; border-radius: 50%; background: conic-gradient(var(--cobalt-2) calc(var(--value) * 1%), var(--line-2) 0); }
.ui-progress.ui-progress-ring::before { position: absolute; inset: 4px; border-radius: 50%; background: var(--panel); content: ''; }
.ui-progress.ui-progress-ring > * { position: relative; }
.ui-progress.ui-progress-ring:dir(rtl) { transform: scaleX(-1); }
.ui-progress.ui-progress-ring:dir(rtl) > * { transform: scaleX(-1); }
.ui-progress-ring [data-ui-progress-value] { color: var(--text); font: 600 11px/1 var(--font-body); font-variant-numeric: tabular-nums; }
@media (forced-colors: active) { .ui-progress.ui-progress-ring { border: 2px solid CanvasText; } }

/* ==== end: progress ==== */

/* ==== component: skeleton ==== */
/* ---------- Skeleton ---------- */
.ui-skeleton { position: relative; display: block; min-height: 12px; border-radius: var(--r-sm); background: var(--raised); overflow: hidden; }
.ui-skeleton::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); transform: translateX(-100%); animation: ui-shimmer 1.4s ease-in-out infinite; content: ''; }
.ui-skeleton:dir(rtl)::after { animation-name: ui-shimmer-rtl; }
@keyframes ui-shimmer { to { transform: translateX(100%); } }
@keyframes ui-shimmer-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.ui-skeleton[data-shape="circle"] { border-radius: 50%; }
.ui-skeleton[data-shape="text"] { height: 12px; }
.ui-skeleton-stack { display: grid; gap: 12px; }

/* ==== end: skeleton ==== */

/* ==== component: tabs ==== */
/* ---------- Tabs: the reference's dashboard tabs, a hairline track of 8px tiles; the chosen tab is the white
   pill colour with dark ink ---------- */
.ui-tablist { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; border: 0; border-radius: var(--r-md); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.ui-tab { display: inline-flex; min-height: var(--h-sm); align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: 600 13px/20px var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--dur-fade) var(--ease-fade), background-color var(--dur-fade) var(--ease-fade); }
.ui-tab:hover { color: var(--text); }
.ui-tab[hidden] { display: none; }
.ui-tab[aria-selected="true"] { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.ui-tab[aria-selected="true"] .ui-badge { background: var(--pill-ink); color: var(--pill); }
.ui-tabpanel { padding-block-start: var(--block); }
.ui-tabpanel[hidden] { display: none; }
.ui-tabs[data-variant="underline"] .ui-tablist { width: auto; gap: 4px; padding: 0; border: 0; border-block-end: 1px solid var(--line-2); border-radius: 0; background: transparent; box-shadow: none; }
.ui-tabs[data-variant="underline"] .ui-tab { border-radius: 0; margin-block-end: -1px; border-block-end: 2px solid transparent; }
.ui-tabs[data-variant="underline"] .ui-tab[aria-selected="true"] { background: transparent; color: var(--text); border-block-end-color: var(--cobalt-2); box-shadow: none; }

/* ==== end: tabs ==== */

/* ==== component: segmented ==== */
/* ---------- Segmented control (toggle group): the same pill track as the tabs ---------- */
.ui-segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.ui-segment { display: inline-flex; min-height: var(--h-sm); align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font: 600 13px/1 var(--font-body); cursor: pointer; transition: color var(--dur-fade) var(--ease-fade), background-color var(--dur-fade) var(--ease-fade), box-shadow var(--dur-fade) var(--ease-fade); }
.ui-segment:hover { color: var(--text); }
/* The chosen segment is the white pill; its accent ring says "selected" without leaning on the fill alone. */
.ui-segment[aria-checked="true"] { background: var(--pill); color: var(--pill-ink); box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.ui-segment svg { width: 14px; height: 14px; }

/* ==== end: segmented ==== */

/* ==== component: steps ==== */
/* ---------- Steps (stepper / wizard progress) ---------- */
.ui-steps { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: ui-step; }
.ui-step { position: relative; display: flex; flex: 1; min-width: 0; align-items: flex-start; gap: 12px; padding-inline-end: 12px; }
/* The connector is a flex item after the label: it fills what the label leaves, so it never runs under the words (either direction). */
.ui-step:not(:last-child)::after { flex: 1 1 0; min-width: 12px; height: 1px; margin-block-start: 13px; border-radius: 1px; background: var(--line-2); content: ''; }
.ui-step[data-state="done"]:not(:last-child)::after { background: var(--cobalt-2); }
.ui-step-dot { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--panel); color: var(--text-2); font: 600 12px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ui-step[data-state="current"] .ui-step-dot { border-color: transparent; background: var(--pill); color: var(--pill-ink); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.ui-step[data-state="done"] .ui-step-dot { border-color: var(--cobalt); background: var(--cobalt); color: #fff; }
.ui-step-dot svg { width: 13px; height: 13px; }
.ui-step-text { display: grid; gap: 2px; padding-block-start: 4px; min-width: 0; }
.ui-step-label { font: 600 13px/1.3 var(--font-body); color: var(--text-2); }
.ui-step[data-state="current"] .ui-step-label, .ui-step[data-state="done"] .ui-step-label { color: var(--text); }
.ui-step-hint { color: var(--text-2); font: 400 12px/16px var(--font-body); }
.ui-steps[data-layout="vertical"] { flex-direction: column; gap: 16px; }
.ui-steps[data-layout="vertical"] .ui-step:not(:last-child)::after { position: absolute; inset-block-start: 32px; inset-inline-start: 13px; width: 1px; min-width: 0; height: calc(100% - 16px); margin: 0; }
/* On a phone only the current step shows its name, so five steps never widen the page. The others are
   hidden from the eye only: every step keeps its name (and its "Step n of 5") for a screen reader. */
@media (max-width: 560px) {
  .ui-step-hint { display: none; }
  .ui-step-label { font-size: 12px; }
  .ui-steps:not([data-layout="vertical"]) .ui-step { gap: 6px; padding-inline-end: 6px; }
  /* The one name shown takes the room the hidden ones leave, so "Add two DNS records" reads on one or two
     lines, not one word per line. */
  .ui-steps:not([data-layout="vertical"]) .ui-step[data-state="current"] { flex-grow: 4; }
  .ui-steps:not([data-layout="vertical"]) .ui-step:not([data-state="current"]) .ui-step-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .ui-steps:not([data-layout="vertical"]) .ui-step:not(:last-child)::after { min-width: 6px; }
}

/* ==== end: steps ==== */

/* ==== component: radio-card ==== */
/* Radio cards (one choice from a few, each with a description and a figure): cards, 16 px corners */
.ui-radio-cards { display: grid; gap: 8px; }
.ui-radio-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); color: var(--text); cursor: pointer; transition: border-color var(--dur-fade) var(--ease-fade), box-shadow var(--dur-fade) var(--ease-fade), background-color var(--dur-fade) var(--ease-fade); }
.ui-radio-card:hover { background: var(--raised); }
.ui-radio-card:has(input:checked) { border-color: var(--cobalt-2); box-shadow: 0 0 0 3px rgba(42,91,224,.28); }
.ui-radio-card:has(input:focus-visible) { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-radio-card input { margin: 0; width: 18px; height: 18px; accent-color: var(--cobalt); }
.ui-radio-card strong { display: block; color: var(--text); font: 600 14px/1.3 var(--font-body); }
.ui-radio-card small { display: block; color: var(--text-2); font: 400 12px/1.45 var(--font-body); }
.ui-radio-card-figure { color: var(--text); font: 600 15px/1.2 var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-radio-card[data-current] { background: var(--raised); }
/* "Current" is said in words (a tag inside the card), never by the tint alone. */
.ui-radio-card .ui-tag { margin-inline-start: 8px; background: var(--lift); vertical-align: middle; }
:lang(ar) .ui-radio-card strong, :lang(ar) .ui-radio-card-figure { font-family: var(--font-arabic); letter-spacing: 0; }
/* P-12: two layouts. "row" sets a few cards side by side (a theme); "tiles" is a grid of
   small cards whose figure is an icon above the name (an icon picker). The radio stays
   visible in both, so the choice never rests on the border colour alone. */
.ui-radio-cards[data-layout="row"] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ui-radio-cards[data-layout="tiles"] { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.ui-radio-cards[data-layout="tiles"] .ui-radio-card { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; padding: 10px 6px; text-align: center; }
.ui-radio-cards[data-layout="tiles"] .ui-radio-card strong { font-size: 12px; overflow-wrap: anywhere; }
/* A tile shows its choice with its border and a small tick in the corner, not a bare radio circle
   above the icon. The radio stays a real input: it takes the keyboard and the click. */
.ui-radio-cards[data-layout="tiles"] .ui-radio-card { position: relative; padding-block: 14px 10px; }
.ui-radio-cards[data-layout="tiles"] .ui-radio-card input { position: absolute; top: 6px; inset-inline-end: 6px; width: 18px; height: 18px; border-radius: 50%; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ui-radio-cards[data-layout="tiles"] .ui-radio-card input:checked { background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.ui-radio-cards[data-layout="tiles"] .ui-radio-card:hover:not(:has(input:checked)) { border-color: rgba(255,255,255,.3); }
.ui-radio-card-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--r-md); background: var(--cobalt-soft); color: var(--cobalt-2); overflow: hidden; }
.ui-radio-card-icon svg { width: 22px; height: 22px; }
.ui-radio-card-icon img { width: 100%; height: 100%; object-fit: cover; }
/* A customer's own image (their logo, an uploaded face) sits on white, as in their widget's header circle. */
.ui-radio-card-icon:has(img) { background: #fff; }
.ui-radio-card[hidden] { display: none; }
/* A Radio card that opens a dialog instead of choosing (Actions > Booking): a <button aria-haspopup="dialog">
   in the card's dress. Its state is the card's Status pill; [data-current] tints it. */
button.ui-radio-card { width: 100%; margin: 0; color: inherit; font: inherit; text-align: start; }
button.ui-radio-card:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
button.ui-radio-card[aria-disabled="true"] { cursor: default; }
/* ==== end: radio-card ==== */

/* ==== component: callout ==== */
/* ---------- Callout / inline banner: a notice, 12 px corners, a soft fill and a hairline in its colour ---------- */
.ui-callout { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--cobalt-2) 28%, transparent); border-radius: var(--r-md); background: var(--cobalt-soft); color: var(--text); font: 400 14px/20px var(--font-body); }
.ui-callout-icon { display: grid; width: 22px; height: 22px; place-items: center; color: var(--cobalt-2); }
.ui-callout-icon svg { width: 18px; height: 18px; }
/* A name the callout quotes (a workspace named after a long address) breaks instead of pushing the page sideways. */
.ui-callout-body { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.ui-callout-title { font-weight: 600; }
.ui-callout p { margin: 0; }
.ui-callout a:not(.ui-btn) { color: var(--cobalt-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ui-callout[data-kind="success"] { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: var(--ok-soft); }
.ui-callout[data-kind="success"] .ui-callout-icon { color: var(--ok); }
.ui-callout[data-kind="warn"] { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); }
.ui-callout[data-kind="warn"] .ui-callout-icon { color: var(--warn); }
.ui-callout[data-kind="error"] { border-color: color-mix(in srgb, var(--err) 30%, transparent); background: var(--err-soft); }
.ui-callout[data-kind="error"] .ui-callout-icon { color: var(--err); }
.ui-callout[data-kind="neutral"] { border-color: var(--line-2); background: var(--raised); }
.ui-callout[data-kind="neutral"] .ui-callout-icon { color: var(--text-2); }
.ui-close { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; transition: background-color var(--dur-fade) var(--ease-fade), color var(--dur-fade) var(--ease-fade); }
.ui-close:hover { background: rgba(255,255,255,.06); color: var(--text); }
.ui-close svg { width: 14px; height: 14px; }
.ui-callout .ui-close { margin-block: -6px; margin-inline: 0 -8px; }
/* A phone's or a touch screen's thumb: the close button is a 40 px target there. */
@media (max-width: 767.98px), (pointer: coarse) { .ui-close { width: 40px; height: 40px; } }

/* ==== end: callout ==== */

/* ==== component: empty ==== */
/* ---------- Empty state ---------- */
.ui-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 24px; border: 1px dashed var(--line-2); border-radius: var(--r-xl); background: transparent; text-align: center; }
.ui-empty-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-block-end: 4px; border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--cobalt-2); }
.ui-empty-icon svg { width: 22px; height: 22px; }
.ui-empty-title { margin: 0; font: 600 16px/24px var(--font-display); letter-spacing: -0.01em; color: var(--text); }
.ui-empty-body { max-width: 40ch; margin: 0; color: var(--text-2); font: 400 14px/20px var(--font-body); }
.ui-empty .ui-btn { margin-block-start: 8px; }

/* ==== end: empty ==== */

/* ==== component: copy ==== */
/* ---------- Copy button and the code it copies (the reference's code box: light cobalt on the ground) ---------- */
.ui-copy[data-copied="true"] { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); color: var(--ok); }
.ui-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; padding-inline: 12px 8px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ground); color: var(--cobalt-2); font: 400 13px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.ui-code code { flex: 1 1 12ch; min-width: 0; direction: ltr; unicode-bidi: isolate; text-align: start; }
/* The copy button keeps its width: in a narrow drawer it drops under the code
   instead of being squeezed to one character per line. */
.ui-code { flex-wrap: wrap; }
.ui-code .ui-btn { flex: none; white-space: nowrap; }

/* ==== end: copy ==== */

/* ==== component: toast ==== */
/* ---------- Toast stack ---------- */
.ui-toasts { position: fixed; z-index: var(--ui-z-toast); inset-block-end: 16px; inset-inline-end: 16px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.ui-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-block: 12px; padding-inline: 16px 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--raised); color: var(--text); box-shadow: 0 24px 64px -16px rgba(0,0,0,.8); font: 400 14px/20px var(--font-body); pointer-events: auto; animation: ui-toast-in var(--dur-move) var(--spring) both; }
.ui-toast::before { position: absolute; content: none; }
.ui-toast[data-leaving] { animation: ui-toast-out 200ms ease forwards; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateY(6px); } }
.ui-toast-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--cobalt-soft); color: var(--cobalt-2); }
.ui-toast-icon svg { width: 13px; height: 13px; }
.ui-toast[data-kind="success"] .ui-toast-icon { background: var(--ok-soft); color: var(--ok); }
.ui-toast[data-kind="warn"] .ui-toast-icon { background: var(--warn-soft); color: var(--warn); }
.ui-toast[data-kind="error"] .ui-toast-icon { background: var(--err-soft); color: var(--err); }
.ui-toast-body { display: grid; gap: 2px; min-width: 0; }
.ui-toast-title { font-weight: 600; }
.ui-toast-message { color: var(--text-2); }
.ui-toast-action { justify-self: start; margin-block-start: 6px; padding: 0; border: 0; background: none; color: var(--cobalt-2); font: 600 13px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ui-toast .ui-close { margin-block: -4px 0; margin-inline: 0 -4px; }
/* On a phone a drawer's or a modal's action buttons sit at the bottom edge, exactly
   where a toast would land: there the stack comes down from the top instead. */
@media (max-width: 560px) { .ui-toasts { inset-block-end: auto; inset-block-start: 12px; inset-inline-end: 16px; } }
/* A wider screen has the same clash beside an end-side drawer: it runs down the stack's edge
   with its action buttons at the bottom, and a toast there sits on the button just pressed and
   stays, paused, while the pointer rests on it. While one is open the stack moves to the other
   edge, over the dimmed page; where the screen leaves no room beside the widest drawer, it comes
   down from the top, where it can cover the drawer's heading but none of its buttons. */
@media (min-width: 561px) {
  :root:has(.ui-overlay[data-side="end"]:not([hidden])) .ui-toasts { inset-inline: 16px auto; }
}
@media (min-width: 561px) and (max-width: 999px) {
  :root:has(.ui-overlay[data-side="end"]:not([hidden])) .ui-toasts { inset-block: 12px auto; }
}

/* ==== end: toast ==== */

/* ==== component: overlay ==== */
/* ---------- Overlays: scrim, modal, drawer, sheet. Panels with 20 px corners and a hairline. ---------- */
.ui-overlay { position: fixed; z-index: var(--ui-z-overlay); inset: 0; display: grid; place-items: center; padding: 16px; overscroll-behavior: contain; }
.ui-overlay[hidden] { display: none; }
.ui-scrim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ui-fade var(--dur-fade) var(--ease-fade) both; cursor: default; }
@keyframes ui-fade { from { opacity: 0; } }
.ui-modal, .ui-drawer { position: relative; display: flex; flex-direction: column; max-height: calc(100vh - 32px); border: 1px solid var(--line-2); background: var(--panel); color: var(--text); box-shadow: 0 40px 120px -40px rgba(0,0,0,.9); overflow: hidden; }
.ui-modal { width: min(520px, 100%); border-radius: var(--r-xl); animation: ui-pop var(--dur-move) var(--spring) both; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(12px); } }
.ui-overlay[data-side] { place-items: stretch end; padding: 0; }
.ui-overlay[data-side="start"] { place-items: stretch start; }
.ui-overlay[data-side="bottom"] { place-items: end stretch; }
.ui-drawer { width: min(440px, 100vw); max-height: 100vh; height: 100%; border-block: 0; border-radius: 0; animation: ui-slide-end var(--dur-move) var(--spring) both; }
.ui-overlay[data-side="end"] .ui-drawer { border-inline-end: 0; }
.ui-overlay[data-side="start"] .ui-drawer { border-inline-start: 0; animation-name: ui-slide-start; }
.ui-overlay[data-side="bottom"] .ui-drawer { width: 100%; height: auto; max-height: min(86vh, 720px); border: 1px solid var(--line-2); border-block-end: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; animation-name: ui-slide-up; }
@keyframes ui-slide-end { from { transform: translateX(var(--ui-slide, 24px)); opacity: 0; } }
@keyframes ui-slide-start { from { transform: translateX(calc(var(--ui-slide, 24px) * -1)); opacity: 0; } }
.ui-overlay[dir="rtl"] { --ui-slide: -24px; }
@keyframes ui-slide-up { from { transform: translateY(24px); opacity: 0; } }
.ui-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 0; }
.ui-dialog-head .ui-close { margin-block: -6px 0; margin-inline: 0 -8px; flex: none; }
/* A heading that names something long (a workspace named after an address) breaks inside the
   card instead of pushing the close button out of it. */
.ui-dialog-head > :not(.ui-close) { min-width: 0; overflow-wrap: anywhere; }
.ui-eyebrow { margin: 0 0 8px; color: var(--text-2); font: 600 12px/16px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; }
:lang(ar) .ui-eyebrow { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.ui-title { margin: 0; font: 600 20px/28px var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.ui-dialog-body { padding: 12px 24px 4px; overflow: auto; color: var(--text-2); font: 400 14px/22px var(--font-body); }
.ui-dialog-body p { margin: 0 0 12px; }
.ui-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 16px 24px 24px; margin-block-start: auto; }
.ui-sheet-grip { width: 40px; height: 4px; margin: 12px auto 0; border-radius: var(--r-pill); background: var(--line-2); }
@media (max-width: 560px) { .ui-dialog-head, .ui-dialog-body, .ui-dialog-foot { padding-inline: 16px; } }

/* ==== end: overlay ==== */

/* ==== component: popover ==== */
/* ---------- Popover, tooltip, dropdown menu (anchored overlays): raised panels with a hairline ---------- */
.ui-popover, .ui-menu { position: fixed; z-index: var(--ui-z-overlay); min-width: 200px; max-width: min(360px, calc(100vw - 24px)); padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--raised); color: var(--text); box-shadow: 0 24px 64px -16px rgba(0,0,0,.8); animation: ui-pop-near var(--dur-fade) var(--spring) both; }
/* An anchored overlay rises 4px into place, less than the 8px ui.js keeps from the window's edges: even while it
   comes in, nothing of it (a Popover's last button) is past the window. */
@keyframes ui-pop-near { from { opacity: 0; transform: translateY(4px); } }
.ui-popover[hidden], .ui-menu[hidden], .ui-tooltip[hidden] { display: none; }
.ui-popover { padding: 16px; border-radius: var(--r-lg); font: 400 14px/20px var(--font-body); }
.ui-popover h4 { margin: 0 0 4px; font: 600 14px/1.3 var(--font-display); letter-spacing: -0.01em; }
.ui-popover p { margin: 0; color: var(--text-2); }
.ui-menu { display: grid; gap: 2px; }
.ui-menu[hidden] { display: none; }
.ui-menu-item { display: flex; min-height: 36px; align-items: center; gap: 12px; width: 100%; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: 500 14px/1.2 var(--font-body); text-align: start; cursor: pointer; }
/* The focused item carries a ring, not only the fill: a fill a step lighter than the menu is about
   1.1:1, which nobody steering by keyboard can see (the destructive items sit in these menus). */
.ui-menu-item:hover, .ui-menu-item:focus-visible { background: var(--lift); }
.ui-menu-item:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: -2px; }
/* The checked item of a menu (menuitemradio, menuitemcheckbox) carries a check mark as well as its
   weight, so it is seen and not only told to assistive tech: never the colour alone. */
.ui-menu-item[aria-checked="true"] { font-weight: 800; }
.ui-menu-item[aria-checked="true"]::after { flex: none; width: 5px; height: 10px; margin-inline-start: auto; border: solid var(--cobalt-2); border-width: 0 2px 2px 0; transform: rotate(45deg); content: ""; }
.ui-menu-item[data-tone="danger"] { color: var(--err); }
.ui-menu-item[data-tone="danger"]:focus-visible { outline-color: var(--err); }
.ui-menu-item[data-tone="danger"]:hover, .ui-menu-item[data-tone="danger"]:focus-visible { background: var(--err-soft); }
.ui-menu-item svg { width: 15px; height: 15px; color: var(--text-2); }
.ui-menu-item .ui-kbd { margin-inline-start: auto; }
.ui-menu-sep { height: 1px; margin: 4px 8px; background: var(--line-2); }
.ui-tooltip { position: fixed; z-index: var(--ui-z-tooltip); max-width: 260px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--lift); color: var(--text); font: 500 12px/1.4 var(--font-body); box-shadow: 0 8px 24px -8px rgba(0,0,0,.8); pointer-events: none; animation: ui-fade 120ms ease both; }

/* ==== end: popover ==== */

/* ==== component: palette ==== */
/* ---------- Command palette ---------- */
.ui-palette-overlay { align-items: start; padding-block-start: min(14vh, 120px); }
.ui-palette { position: relative; width: min(600px, 100%); border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--raised); box-shadow: 0 40px 120px -40px rgba(0,0,0,.9); overflow: hidden; animation: ui-pop var(--dur-move) var(--spring) both; }
.ui-palette-input-row { display: flex; align-items: center; gap: 12px; padding: 4px 16px; border-block-end: 1px solid var(--line-2); }
.ui-palette-input-row svg { width: 18px; height: 18px; flex: none; color: var(--text-2); }
.ui-palette-input { flex: 1; min-width: 0; min-height: var(--h-lg); border: 0; background: transparent; color: var(--text); font: 400 16px/1.2 var(--font-body); outline: none; }
.ui-palette-input::placeholder { color: var(--text-2); }
.ui-palette-list { max-height: min(52vh, 420px); margin: 0; padding: 8px; list-style: none; overflow: auto; }
.ui-palette-group { padding: 8px 12px 4px; color: var(--text-2); font: 600 12px/16px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; }
:lang(ar) .ui-palette-group { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.ui-option { display: flex; min-height: 40px; align-items: center; gap: 12px; padding: 0 12px; border-radius: var(--r-sm); color: var(--text); font: 500 14px/1.2 var(--font-body); cursor: pointer; }
.ui-option[aria-selected="true"] { background: var(--cobalt-soft-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cobalt-2) 40%, transparent); }
.ui-option-hint { margin-inline-start: 6px; color: var(--text-2); font-weight: 400; font-size: 12px; }
.ui-option .ui-kbd-group { margin-inline-start: auto; }
.ui-palette-empty { padding: 24px 16px; color: var(--text-2); font: 400 14px/1.5 var(--font-body); text-align: center; }
.ui-palette-foot { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 16px; border-block-start: 1px solid var(--line); color: var(--text-2); font: 500 12px/1.3 var(--font-body); }
.ui-palette-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ==== end: palette ==== */

/* ==== component: table ==== */
/* ---------- Data table, filter chips, pagination ---------- */
/* position: relative makes the wrapper the containing block of the table's visually
   hidden labels (.ui-sr-only is position: absolute). Without it they escaped the scroll
   container's clipping and, in a right-to-left page on a phone, widened the whole
   document to the table's scroll width. */
.ui-table-wrap { position: relative; display: grid; gap: 12px; min-width: 0; }
.ui-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
/* The reference's tables: compact rows standing on hairlines inside the panel, no frame of their own; the
   head row in small capitals, 32 tall; a row 40 tall (20 of words and 10 above and below). The first and
   last columns sit on the panel's own edges. */
.ui-table-scroll { position: relative; overflow-x: auto; border: 0; border-radius: 0; background: transparent; }
.ui-table { width: 100%; border-collapse: collapse; color: var(--text); font: 400 13px/20px var(--font-body); }
.ui-table th { padding: 0; text-align: start; border-block-end: 1px solid var(--line); color: var(--text-2); font: 600 12px/16px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap; }
:lang(ar) .ui-table th { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.ui-table th > span, .ui-table th > button { display: inline-flex; min-height: 32px; align-items: center; gap: 4px; padding: 0 12px; }
.ui-table th > button { min-height: var(--h-sm); }
.ui-table th > .ui-sr-only { min-height: 0; padding: 0; }
.ui-table th > button { border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; border-radius: var(--r-sm); }
.ui-table th > button:hover { color: var(--text); }
.ui-table th[aria-sort] > button { color: var(--text); }
.ui-sort-icon { width: 12px; height: 12px; opacity: .45; }
.ui-table th[aria-sort] .ui-sort-icon { opacity: 1; }
.ui-table th[aria-sort="descending"] .ui-sort-icon { transform: rotate(180deg); }
.ui-table td { padding: 10px 12px; border-block-end: 1px solid var(--line); color: var(--text); overflow-wrap: anywhere; }
.ui-table td:first-child, .ui-table th:first-child > :is(span, button) { padding-inline-start: 0; }
.ui-table td:last-child, .ui-table th:last-child > :is(span, button) { padding-inline-end: 0; }
.ui-table tbody tr:last-child td { border-block-end: 0; }
.ui-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.ui-table td.ui-num, .ui-table th.ui-num { text-align: end; font-variant-numeric: tabular-nums; }
.ui-table td.ui-num { font-family: var(--font-mono); font-size: 13px; }
/* A figure with an Arabic unit beside it (a size, an amount): a monospace face sets Arabic
   letters apart, so the cell reads in the Arabic face with tabular digits. */
:lang(ar) .ui-table td.ui-num { font-family: var(--font-arabic); }
.ui-table .ui-nowrap { white-space: nowrap; }
/* Stacked (D-12, table({ stack: true })): below 600px each row is a card and each value sits under
   its column's name, so a row's last action is on a phone's screen instead of past a scroll. The
   kit gives the parts their table roles, so the display change takes nothing from a screen reader;
   a sort button stays in the head row, the other headings are read but not drawn. */
.ui-table-label { display: none; }
@media (max-width: 600px) {
  .ui-table-stack, .ui-table-stack tbody { display: block; }
  .ui-table-stack thead tr { display: flex; flex-wrap: wrap; border-block-end: 1px solid var(--line); }
  .ui-table-stack th { display: block; border: 0; }
  .ui-table-stack th:not(:has(> button)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ui-table-stack tbody tr { display: grid; gap: 8px; padding: 12px 0; border-block-end: 1px solid var(--line); }
  .ui-table-stack tbody tr:last-child { border-block-end: 0; }
  .ui-table-stack td { display: block; padding: 0; border: 0; }
  .ui-table-stack tbody tr:hover td { background: transparent; }
  .ui-table-stack .ui-table-label { display: block; margin-block-end: 4px; color: var(--text-2); font: 600 12px/16px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; }
  :lang(ar) .ui-table-stack .ui-table-label { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
}
/* Emails, keys and URLs stay left to right and whole inside an Arabic table. */
.ui-table td code { font: 400 13px/1.4 var(--font-mono); color: var(--cobalt-2); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.ui-table-empty td { padding: 24px 16px; color: var(--text-2); text-align: center; }
.ui-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-2); font: 500 13px/1.4 var(--font-body); }
.ui-pagination { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-page { display: inline-grid; min-width: 32px; height: 32px; place-items: center; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font: 600 13px/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.ui-page:hover { background: var(--raised); color: var(--text); }
.ui-page[aria-current="page"] { border-color: transparent; background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.ui-page:disabled { opacity: .4; cursor: default; background: transparent; }
.ui-page svg { width: 14px; height: 14px; }
.ui-ellipsis { display: inline-grid; min-width: 24px; height: 32px; place-items: center; color: var(--text-2); font: 600 13px/1 var(--font-body); }
@media (max-width: 767.98px), (pointer: coarse) { .ui-page { min-width: 40px; height: 40px; } }

/* ==== end: table ==== */

/* ==== component: date-range ==== */
/* ---------- Date range picker, and the kit's form field: raised dark fields, 12 px corners, a hairline,
   a cobalt ring on focus ---------- */
.ui-daterange { display: grid; gap: 12px; }
.ui-daterange-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-daterange-inputs { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.ui-field { display: grid; gap: 8px; min-width: 0; }
.ui-field-label { color: var(--text); font: 600 14px/20px var(--font-body); }
/* A help or error line may quote what was typed (a long address): it breaks instead of widening the page. */
.ui-field-help { color: var(--text-2); font: 400 13px/20px var(--font-body); overflow-wrap: anywhere; }
.ui-field-error { color: var(--err); font: 500 13px/20px var(--font-body); overflow-wrap: anywhere; }
.ui-field-error[hidden] { display: none; }
.ui-input { min-height: var(--h-lg); width: 100%; padding: 0 16px; border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--raised); color: var(--text); font: 500 15px/1.2 var(--font-body); box-shadow: none; transition: border-color var(--dur-fade) var(--ease-fade), box-shadow var(--dur-fade) var(--ease-fade); }
.ui-input::placeholder { color: var(--text-2); }
/* A transparent outline, not none: forced-colors mode drops box-shadow and repaints
   the outline in a system colour, so the field keeps a focus indicator there. */
.ui-input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
.ui-input[aria-invalid="true"] { border-color: var(--err-line); }
.ui-input[type="date"] { font-variant-numeric: tabular-nums; }
/* A dropdown wears the kit's chevron, so it matches the kit's other menus instead of the browser's own. */
select.ui-input { padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A8F98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-position: right 14px center; background-repeat: no-repeat; background-size: 16px 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
select.ui-input:dir(rtl) { background-position: left 14px center; }
select.ui-input[multiple], select.ui-input[size]:not([size="1"]) { padding-inline-end: 16px; background-image: none; }
@media (forced-colors: active) { select.ui-input { background-image: none; -webkit-appearance: auto; appearance: auto; } }
/* A long-text field (P-11): the same input, taller, resized on the block axis only. */
textarea.ui-input { min-height: 132px; max-height: 60vh; padding-block: 12px; line-height: 1.6; resize: vertical; }
.ui-daterange-inputs .ui-field { flex: 1 1 150px; }
.ui-daterange-to { align-self: center; padding-block-start: 24px; color: var(--text-2); font: 500 13px/1 var(--font-body); }
.ui-daterange-summary { color: var(--text-2); font: 500 13px/1.4 var(--font-body); }
.ui-daterange-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ==== end: date-range ==== */

/* ==== component: checkbox-group ==== */
/* ---------- Checkbox group (a fieldset of native checkboxes with visible labels) ---------- */
.ui-checkbox-group { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-checkbox-group legend { padding: 0; margin-block-end: 8px; color: var(--text); font: 600 14px/1.3 var(--font-body); }
.ui-checkbox-group[data-columns="2"] .ui-checkbox-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-checkbox-list { display: grid; gap: 4px 12px; }
.ui-checkbox { display: flex; align-items: flex-start; gap: 12px; min-height: 32px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--text); font: 400 14px/1.45 var(--font-body); cursor: pointer; }
.ui-checkbox:hover { background: var(--raised); }
.ui-checkbox input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--cobalt); }
.ui-checkbox input:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-checkbox-text { display: grid; gap: 1px; min-width: 0; }
.ui-checkbox-text code { font: 400 12px/1.4 var(--font-mono); color: var(--text-2); direction: ltr; unicode-bidi: isolate; text-align: start; }
.ui-checkbox .ui-tag { margin-inline-start: 6px; vertical-align: middle; }
@media (max-width: 560px) { .ui-checkbox-group[data-columns="2"] .ui-checkbox-list { grid-template-columns: 1fr; } }
@media (max-width: 767.98px), (pointer: coarse) { .ui-checkbox { min-height: 40px; align-items: center; } .ui-checkbox input { margin-block-start: 0; } }

/* ==== end: checkbox-group ==== */

/* ==== component: timeline ==== */
/* ---------- Timeline (events in the order they happened; a dot on a line) ---------- */
.ui-timeline { position: relative; display: grid; gap: 16px; margin: 0; padding: 0; padding-inline-start: 24px; list-style: none; }
.ui-timeline::before { position: absolute; inset-block: 6px; inset-inline-start: 6px; width: 1px; background: var(--line-2); content: ''; }
.ui-timeline-item { position: relative; display: grid; gap: 6px; min-width: 0; color: var(--text-2); font: 400 13px/1.5 var(--font-body); }
.ui-timeline-item::before { position: absolute; inset-block-start: 4px; inset-inline-start: -23px; width: 10px; height: 10px; border: 2px solid var(--cobalt-2); border-radius: 50%; background: var(--panel); content: ''; }
.ui-timeline-item[data-status="succeeded"]::before { border-color: var(--ok); background: var(--ok-soft); }
.ui-timeline-item[data-status="retrying"]::before, .ui-timeline-item[data-status="pending"]::before { border-color: var(--warn); background: var(--warn-soft); }
.ui-timeline-item[data-status="failed"]::before { border-color: var(--err); background: var(--err-soft); }
.ui-timeline-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ui-timeline-head strong { color: var(--text); font-weight: 600; }
.ui-timeline-head time { font-variant-numeric: tabular-nums; }
.ui-timeline-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==== end: timeline ==== */

/* ==== component: code-block ==== */
/* ---------- Code block (a bounded, left-to-right, scrollable excerpt with a label) ---------- */
.ui-code-block { display: grid; gap: 4px; min-width: 0; }
.ui-code-block-label { color: var(--text-2); font: 600 12px/16px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; }
:lang(ar) .ui-code-block-label { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.ui-code-block pre { margin: 0; max-height: 180px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ground); color: var(--cobalt-2); font: 400 13px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; direction: ltr; unicode-bidi: isolate; text-align: start; }
.ui-code-block pre code { font: inherit; }
.ui-code-block pre:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
/* The "diff" variant (P-36): what a change takes away and adds, a line each, built by bidiUI.diff().
   Unlike the excerpt above it holds people's words, so each line runs in its own direction (an Arabic
   value reads right to left in an English page); the sign column and the hidden "Added", "Removed"
   say the change, so it never rests on colour alone, and a removed line is struck through. */
.ui-code-block[data-variant="diff"] .ui-diff { display: grid; max-height: 280px; margin: 0; padding: 6px 0; overflow: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ground); list-style: none; font: 400 14px/1.6 var(--font-body); }
.ui-diff:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-diff-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 2px 12px; color: var(--text); }
.ui-diff-line[data-op="add"] { background: var(--ok-soft); }
.ui-diff-line[data-op="del"] { background: var(--err-soft); }
.ui-diff-line[data-op="del"] .ui-diff-text { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--err) 60%, transparent); }
.ui-diff-sign { flex: none; width: 1.2ch; color: var(--text-2); font: 600 13px/1.6 var(--font-mono); text-align: center; }
.ui-diff-line[data-op="add"] .ui-diff-sign { color: var(--ok); }
.ui-diff-line[data-op="del"] .ui-diff-sign { color: var(--err); }
.ui-diff-label { flex: none; max-width: 45%; color: var(--text-2); font-weight: 600; }
.ui-diff-text { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; text-align: start; unicode-bidi: plaintext; }
.ui-diff-text[data-empty] { color: var(--text-2); font-style: italic; }
:lang(ar) .ui-code-block[data-variant="diff"] .ui-diff { font-family: var(--font-arabic); }
@media (forced-colors: active) {
  .ui-diff-line[data-op="add"] { border-inline-start: 3px solid CanvasText; }
  .ui-diff-line[data-op="del"] { border-inline-start: 3px dashed CanvasText; }
}

/* ==== end: code-block ==== */

/* ==== component: dropzone ==== */
/* ---------- File dropzone (a native file input behind a drop target, with per-type hints) ---------- */
.ui-dropzone { position: relative; display: grid; gap: 12px; padding: 24px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-xl); background: var(--panel); text-align: center; transition: border-color var(--dur-fade) var(--ease-fade), background-color var(--dur-fade) var(--ease-fade), box-shadow var(--dur-fade) var(--ease-fade); }
/* The input stays in the tab order and keeps its native behaviour (Enter and Space open the
   picker); it is only out of sight. Its focus ring is drawn on the zone. */
.ui-dropzone-input { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden; }
.ui-dropzone-face { display: grid; justify-items: center; gap: 8px; cursor: pointer; }
.ui-dropzone-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--cobalt-2); }
.ui-dropzone-icon svg { width: 22px; height: 22px; }
.ui-dropzone-title { color: var(--text); font: 600 14px/1.35 var(--font-body); }
.ui-dropzone-face .ui-btn { pointer-events: none; }
.ui-dropzone-hints { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font: 400 13px/1.5 var(--font-body); }
.ui-dropzone-status { min-height: 1.5em; margin: 0; color: var(--text); font: 500 13px/1.5 var(--font-body); overflow-wrap: anywhere; }
.ui-dropzone-status[data-kind="error"] { color: var(--err); }
.ui-dropzone:hover, .ui-dropzone[data-drag] { border-color: var(--cobalt-2); background: var(--cobalt-soft); }
.ui-dropzone[data-drag] { box-shadow: 0 0 0 4px rgba(42,91,224,.28); }
.ui-dropzone:has(.ui-dropzone-input:focus-visible) { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-dropzone[aria-busy="true"] { border-style: solid; }
.ui-dropzone[aria-busy="true"] .ui-dropzone-face { cursor: progress; opacity: .6; }
:lang(ar) .ui-dropzone-title { font-family: var(--font-arabic); letter-spacing: 0; }
/* ==== end: dropzone ==== */

/* ==== component: switch ==== */
/* ---------- Toggle switch (P-15, P-16: a setting that takes effect at once). A native
   checkbox with role="switch" inside its label: the keyboard, the checked state and the
   form value come from the input; the track and thumb are drawn from its state by the
   .ui-switch-track that follows it. The thumb's side says on or off, never the colour
   alone, and the off track's hairline is light enough to be seen as a control on the
   panels (3:1). A switch with a .ui-switch-text block (a label and a <small> hint) is a
   setting row of its own and gets the 44px touch row; a bare one fits a table cell. ---------- */
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 32px; color: var(--text); font: 500 14px/1.35 var(--font-body); cursor: pointer; }
.ui-switch input { position: absolute; inset-block-start: 50%; inset-inline-start: 0; width: 40px; height: 24px; margin: 0; transform: translateY(-50%); opacity: 0; cursor: pointer; }
.ui-switch-track { position: relative; flex: none; width: 40px; height: 24px; border: 1px solid #5A5E66; border-radius: var(--r-pill); background: var(--lift); transition: background-color var(--dur-fade) var(--ease-fade), border-color var(--dur-fade) var(--ease-fade); }
.ui-switch-track::after { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: inset-inline-start var(--dur-move) var(--spring), background-color var(--dur-fade) var(--ease-fade); content: ''; }
.ui-switch input:checked + .ui-switch-track { border-color: var(--cobalt); background: var(--cobalt); }
.ui-switch input:checked + .ui-switch-track::after { inset-inline-start: 18px; background: #fff; }
.ui-switch input:focus-visible + .ui-switch-track { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-switch input:disabled, .ui-switch:has(input:disabled) { cursor: default; }
.ui-switch input:disabled + .ui-switch-track { opacity: .5; }
.ui-switch:has(.ui-switch-text) { gap: 12px; min-height: 44px; font-size: 14px; line-height: 1.4; }
.ui-switch-text { display: grid; gap: 2px; min-width: 0; }
.ui-switch-text small { color: var(--text-2); font: 400 13px/1.45 var(--font-body); }
/* A bare switch (a table cell) is a 40 px target on a phone or a touch screen. */
@media (max-width: 767.98px), (pointer: coarse) { .ui-switch { min-height: 40px; min-width: 40px; } }
@media (forced-colors: active) {
  .ui-switch-track { border-color: ButtonText; }
  .ui-switch-track::after { background: ButtonText; }
  .ui-switch input:checked + .ui-switch-track { background: Highlight; }
  .ui-switch input:focus-visible + .ui-switch-track { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) { .ui-switch-track, .ui-switch-track::after { transition: none; } }

/* ==== end: switch ==== */

/* ==== component: accordion ==== */
/* ---------- Accordion (native details and summary; the chevron sits at the inline end) ---------- */
.ui-accordion { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.ui-accordion > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: var(--r-md); color: var(--text); font: 600 14px/1.3 var(--font-body); cursor: pointer; list-style: none; }
.ui-accordion > summary::-webkit-details-marker { display: none; }
.ui-accordion > summary::after { width: 8px; height: 8px; flex: none; margin-inline: auto 4px; border-inline-end: 2px solid var(--text-2); border-block-end: 2px solid var(--text-2); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-move) var(--spring); content: ''; }
.ui-accordion[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* The chevron is two borders too: in Arabic it uses the other inline side, so it still points down (and up when open). */
.ui-accordion:dir(rtl) > summary::after { border-inline-end: 0; border-inline-start: 2px solid var(--text-2); }
.ui-accordion > summary:hover { background: var(--raised); }
.ui-accordion > summary:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-accordion-hint { color: var(--text-2); font: 400 13px/1.4 var(--font-body); }
.ui-accordion-body { display: grid; gap: 12px; padding: 4px 16px 16px; color: var(--text-2); font: 400 14px/1.55 var(--font-body); }
.ui-accordion-body p { margin: 0; }
.ui-accordion-group { display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .ui-accordion > summary::after { transition: none; } }
/* ==== end: accordion ==== */

/* ==== component: forced-colors ==== */
/* ---------- Windows high contrast (forced colours): state that the kit draws with
   backgrounds and shadows is redrawn with outlines and borders the system keeps. ---------- */
@media (forced-colors: active) {
  .ui-menu-item:focus-visible, .ui-option[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ui-input:focus-visible { outline: 2px solid Highlight; }
  .ui-pill, .ui-tag, .ui-chip { border: 1px solid CanvasText; }
  .ui-chip[aria-pressed="true"], .ui-tab[aria-selected="true"], .ui-segment[aria-checked="true"], .ui-page[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ui-btn { border: 1px solid ButtonText; }
  .ui-radio-card:has(input:checked) { outline: 2px solid Highlight; }
  .ui-radio-card:has(input:focus-visible) { outline: 3px solid Highlight; outline-offset: 2px; }
  .ui-dropzone:has(.ui-dropzone-input:focus-visible), .ui-dropzone[data-drag] { outline: 3px solid Highlight; outline-offset: 2px; }
  .ui-menu-item[aria-checked="true"]::after { border-color: CanvasText; }
  /* The Status dots keep four looks the system cannot repaint into one: a full dot, a ring,
     a square and a short bar, drawn in system colours. */
  .ui-status-dot { forced-color-adjust: none; border-color: Canvas; }
  .ui-status-dot[data-state="online"] { background: CanvasText; }
  .ui-status-dot[data-state="away"] { background: Canvas; box-shadow: none; outline: 2px solid CanvasText; outline-offset: -4px; }
  .ui-status-dot[data-state="busy"] { background: CanvasText; border-radius: 2px; }
  .ui-status-dot[data-state="off"] { background: GrayText; }
}

/* ==== end: forced-colors ==== */

/* ==== component: toolbar ==== */
/* ---------- Toolbar (P-09, P-10: the controls that act on the view below it; the filter sits
   at the inline start, the actions at the inline end, and it wraps on a phone) ---------- */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; min-width: 0; }
.ui-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ui-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }
.ui-toolbar .ui-segmented { max-width: 100%; overflow-x: auto; }
/* A count inside a segment is quiet until its segment is the chosen one. */
.ui-toolbar .ui-segment .ui-badge { background: var(--lift); color: var(--text); }
.ui-toolbar .ui-segment[aria-checked="true"] .ui-badge { background: var(--pill-ink); color: var(--pill); }
.ui-toolbar .ui-badge:empty { display: none; }
.ui-toolbar .ui-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
@media (max-width: 560px) { .ui-toolbar-group { flex: 1 1 100%; } }
/* Panel: a toolbar with labelled fields (search, filters, dates) sits in its own hairline box,
   every group takes a full row and the fields line up on their bottom edge. */
.ui-toolbar[data-variant="panel"] { align-items: end; justify-content: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ui-toolbar[data-variant="panel"] > .ui-toolbar-group { flex: 1 1 100%; align-items: end; gap: 12px; }
.ui-toolbar[data-variant="panel"] > .ui-toolbar-group > .ui-field, .ui-toolbar[data-variant="panel"] > .ui-toolbar-group > .ui-combobox { flex: 1 1 150px; }
/* Many filters: an even grid, the search field across the whole first row. */
.ui-toolbar-group[data-layout="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ui-toolbar-group[data-layout="grid"] > * { min-width: 0; }
.ui-toolbar-group[data-layout="grid"] > .ui-toolbar-wide { grid-column: 1 / -1; }
/* Search field: a magnifier at the leading edge, a clear button at the trailing edge once there is text. */
.ui-search { position: relative; display: flex; align-items: center; min-width: 0; }
.ui-search > svg { position: absolute; inset-inline-start: 14px; width: 16px; height: 16px; color: var(--text-2); pointer-events: none; }
.ui-search .ui-input { padding-inline: 40px 44px; }
.ui-search .ui-input::-webkit-search-cancel-button { appearance: none; }
.ui-search .ui-close { position: absolute; inset-inline-end: 8px; }
.ui-search .ui-close[hidden] { display: none; }

/* ==== end: toolbar ==== */

/* ==== component: inline-edit ==== */
/* ---------- Inline edit (P-09: a value that becomes its control in place) ---------- */
.ui-inline-edit { display: inline-flex; align-items: center; min-width: 0; }
.ui-inline-edit-view { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 4px 6px; margin-inline-start: -6px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.ui-inline-edit-view[hidden] { display: none; }
.ui-inline-edit-view:hover { border-color: var(--line-2); background: var(--raised); }
.ui-inline-edit-view:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-inline-edit-view[aria-busy="true"] { opacity: .6; cursor: progress; }
.ui-inline-edit-icon { width: 12px; height: 12px; flex: none; color: var(--text-2); }
.ui-inline-edit-input { min-height: 32px; max-width: 100%; padding: 0 8px; border: 1px solid var(--cobalt-2); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: 500 14px/1.2 var(--font-body); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
.ui-inline-edit-input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
/* Free text (P-22): the field takes the row's width, the value wraps instead of pushing the drawer wider. */
input.ui-inline-edit-input { width: 100%; min-width: 0; }
.ui-inline-edit:has(input.ui-inline-edit-input) { display: flex; }
@media (max-width: 767.98px), (pointer: coarse) { .ui-inline-edit-view, .ui-inline-edit-input { min-height: 40px; } }
.ui-inline-edit-view { max-width: 100%; text-align: start; overflow-wrap: anywhere; }

/* ==== end: inline-edit ==== */

/* ==== component: combobox ==== */
/* ---------- Combobox (P-09, P-10: a text field with a filtered list of choices, one value) ---------- */
.ui-combobox { position: relative; display: grid; gap: 8px; min-width: 0; }
.ui-combobox-control { position: relative; display: flex; align-items: center; }
.ui-combobox-control .ui-input { padding-inline-end: 44px; text-overflow: ellipsis; }
.ui-combobox-toggle { position: absolute; inset-inline-end: 6px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; }
.ui-combobox-toggle:hover { background: var(--lift); color: var(--text); }
.ui-combobox-toggle svg { width: 14px; height: 14px; }
@media (max-width: 767.98px), (pointer: coarse) { .ui-combobox-toggle { width: 40px; height: 40px; inset-inline-end: 4px; } }
.ui-combobox[data-open] .ui-combobox-toggle svg { transform: rotate(180deg); }
.ui-combobox-list { position: absolute; z-index: 30; inset-block-start: calc(100% + 6px); inset-inline: 0; min-width: 190px; max-height: 264px; margin: 0; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--raised); box-shadow: 0 24px 64px -16px rgba(0,0,0,.8); list-style: none; overflow: auto; }
.ui-combobox-list[hidden] { display: none; }
.ui-combobox-list .ui-option { min-height: 36px; gap: 8px; font-size: 14px; }
/* The option the arrows are on carries a ring, not only the fill (a fill a step lighter is about
   1.1:1); the chosen one carries a check mark (never the fill alone). */
.ui-combobox-list .ui-option[aria-selected="true"] { background: transparent; box-shadow: none; }
.ui-combobox-list .ui-option[data-active] { background: var(--lift); outline: 2px solid var(--cobalt-2); outline-offset: -2px; }
.ui-combobox-list .ui-option[aria-selected="true"]::after { width: 10px; height: 6px; margin-inline-start: auto; margin-block-start: -3px; border-inline-start: 2px solid var(--cobalt-2); border-block-end: 2px solid var(--cobalt-2); transform: rotate(-45deg); content: ''; }
/* The tick is drawn from two borders: in a right-to-left list it uses the other inline side, or it would read as a chevron. */
.ui-combobox-list .ui-option:dir(rtl)[aria-selected="true"]::after { border-inline-start: 0; border-inline-end: 2px solid var(--cobalt-2); }
.ui-combobox-empty { padding: 12px; color: var(--text-2); font: 400 13px/1.4 var(--font-body); }
/* Inside a dialog the list sits in the flow, so the dialog's scroll area never clips it. */
.ui-dialog-body .ui-combobox-list { position: static; border-color: var(--line-2); box-shadow: none; }

/* ==== end: combobox ==== */

/* ==== component: split-pane ==== */
/* ---------- Split pane (controls beside the thing they change; one column on a phone) ---------- */
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 32px; align-items: start; }
.ui-split-main { display: grid; gap: 24px; min-width: 0; align-content: start; }
.ui-split-aside { display: grid; gap: 12px; min-width: 0; align-content: start; }
/* Pinned only where the screen can show it whole: the stage is 600px tall and sits 92px down, so on a
   shorter window (a laptop at 150 to 200 % zoom) a pinned aside would keep its lower part out of reach. */
@media (min-width: 901px) and (min-height: 820px) { .ui-split-aside { position: sticky; inset-block-start: 92px; } }
.ui-split-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ui-split-title { margin: 0; color: var(--text); font: 600 14px/1.3 var(--font-body); }
/* The stage is bidi's frame around a preview of the customer's own look (the widget in Settings >
   Appearance): the frame is dark, the preview inside keeps its own colour scheme. */
.ui-split-stage { position: relative; min-height: 600px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--raised); color-scheme: normal; scrollbar-color: auto; }
.ui-split-note { margin: 0; color: var(--text-2); font: 400 13px/1.5 var(--font-body); }
.ui-split-group { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-split-group > legend, .ui-split-group-title { float: none; margin: 0 0 4px; padding: 0; color: var(--text); font: 600 16px/24px var(--font-display); letter-spacing: -0.01em; }
:lang(ar) .ui-split-group > legend, :lang(ar) .ui-split-group-title, :lang(ar) .ui-split-title { font-family: var(--font-arabic); letter-spacing: 0; }
.ui-split-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ui-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ui-split-pair { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) { .ui-split-stage { border: 1px solid CanvasText; } }
/* P-17: three panes for a list worked in place (the Helpdesk): a narrow navigation column, the list, and
   the record that is open. Each pane is a hairline box that scrolls on its own, so the list stays in view
   while the record is read. Two columns on a laptop (the navigation becomes a row above), one on a phone. */
/* The three panes are one window, as the reference draws a dashboard: a hairline frame, the panes parted by
   hairlines, no frame of their own. */
.ui-split[data-layout="triple"] { grid-template-columns: minmax(176px, 216px) minmax(260px, 340px) minmax(0, 1fr); gap: 0; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-lg); }
.ui-split[data-layout="triple"] > .ui-split-pane { border: 0; border-radius: 0; background: transparent; }
.ui-split[data-layout="triple"] > .ui-split-pane + .ui-split-pane { border-inline-start: 1px solid var(--line); }
.ui-split-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); box-shadow: none; }
.ui-split-pane[data-scroll] { max-height: min(78vh, 860px); overflow-y: auto; overscroll-behavior: contain; }
.ui-split-nav { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-split-nav-item { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: 500 14px/1.25 var(--font-body); text-align: start; cursor: pointer; }
.ui-split-nav-item:hover { background: var(--raised); color: var(--text); }
.ui-split-nav-item[aria-current="true"] { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.ui-split-nav-item:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-split-nav-count { flex: none; color: var(--text-2); font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.ui-split-nav-item[aria-current="true"] .ui-split-nav-count { color: var(--cobalt-2); }
@media (max-width: 1180px) {
  .ui-split[data-layout="triple"] { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
  .ui-split[data-layout="triple"] > .ui-split-pane:first-child { grid-column: 1 / -1; }
  .ui-split[data-layout="triple"] > .ui-split-pane:first-child .ui-split-nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ui-split[data-layout="triple"] > .ui-split-pane:first-child { border-block-end: 1px solid var(--line); }
  .ui-split[data-layout="triple"] > .ui-split-pane:nth-child(2) { border-inline-start: 0; }
}
@media (max-width: 900px) {
  .ui-split[data-layout="triple"] { grid-template-columns: minmax(0, 1fr); }
  .ui-split-pane[data-scroll] { max-height: none; overflow: visible; }
  .ui-split[data-layout="triple"] > .ui-split-pane:first-child { border-block-end: 0; }
  .ui-split[data-layout="triple"] > .ui-split-pane + .ui-split-pane { border-inline-start: 0; border-block-start: 1px solid var(--line); }
}
@media (forced-colors: active) { .ui-split-pane { border: 1px solid CanvasText; } .ui-split-nav-item[aria-current="true"] { outline: 2px solid Highlight; } }

/* ==== end: split-pane ==== */

/* ==== component: color-picker ==== */
/* ---------- Color picker (a native swatch, the hex beside it, a few presets) ---------- */
.ui-color { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ui-color-swatch { width: var(--h-lg); height: var(--h-lg); flex: none; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--raised); cursor: pointer; }
.ui-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.ui-color-swatch::-webkit-color-swatch { border: 0; border-radius: var(--r-sm); }
.ui-color-swatch::-moz-color-swatch { border: 0; border-radius: var(--r-sm); }
.ui-color-swatch:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
/* A colour value is code: it stays left to right inside an Arabic form. */
.ui-color-hex { width: 13ch; flex: none; font-family: var(--font-mono); letter-spacing: .02em; text-transform: uppercase; direction: ltr; text-align: start; }
.ui-color-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-color-preset { width: 28px; height: 28px; padding: 0; border: 2px solid var(--panel); border-radius: 50%; background: var(--swatch, var(--cobalt)); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; }
.ui-color-preset[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.ui-color-preset:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 3px; }
.ui-color .ui-field-error { flex-basis: 100%; }
@media (max-width: 767.98px), (pointer: coarse) { .ui-color-preset { width: 40px; height: 40px; } }
@media (forced-colors: active) { .ui-color-preset { forced-color-adjust: none; } .ui-color-preset[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; } }

/* ==== end: color-picker ==== */

/* ==== component: slider ==== */
/* ---------- Slider (P-12, P-16: a native range input with a filled track, a thumb you can
   grab and its value said in words; ui.js paints the fill). Stacked by default: a head
   with the label and the value, the range, an optional scale. data-layout="inline" puts
   the value beside the range, for a field that already has its label above. ---------- */
.ui-slider { --ui-slider-fill: 0%; display: grid; gap: 8px; min-width: 0; }
.ui-slider[data-layout="inline"] { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.ui-slider-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ui-slider-label { color: var(--text); font: 600 14px/1.3 var(--font-body); }
.ui-slider-value { color: var(--text-2); font: 500 13px/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.ui-slider[data-layout="inline"] .ui-slider-value { min-width: 6ch; color: var(--text); font: 600 13px/1 var(--font-body); text-align: end; }
.ui-slider input[type="range"] { width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
.ui-slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--cobalt) var(--ui-slider-fill), var(--line-2) var(--ui-slider-fill)); }
.ui-slider:dir(rtl) input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--cobalt) var(--ui-slider-fill), var(--line-2) var(--ui-slider-fill)); }
.ui-slider input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--line-2); }
.ui-slider input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--cobalt); }
.ui-slider input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--pill); box-shadow: 0 1px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.2); appearance: none; -webkit-appearance: none; }
.ui-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--pill); box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.ui-slider input[type="range"]:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 4px; border-radius: var(--r-pill); }
.ui-slider input[type="range"]:disabled { opacity: .5; cursor: default; }
.ui-slider-scale { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); font: 500 12px/1.3 var(--font-body); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px), (pointer: coarse) { .ui-slider input[type="range"] { height: 40px; } }
@media (forced-colors: active) { .ui-slider input[type="range"]::-webkit-slider-runnable-track { border: 1px solid CanvasText; } .ui-slider input[type="range"]::-webkit-slider-thumb { background: Highlight; } }

/* ==== end: slider ==== */

/* ==== component: tag-input ==== */
/* ---------- Tag input (token field; P-12, P-15): several short values in one field. Each
   value is a token with its own remove button; the text entry sits after the last token
   and wraps with them. A value that is left-to-right by nature (an email) keeps dir="ltr"
   inside an Arabic field; a phrase (a question) wraps inside its token. ---------- */
/* min-width: 0 lets the field be as wide as its column and no wider: a long token (a long email
   address) is cut short with an ellipsis inside it instead of widening the field and the page. */
.ui-tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; min-height: var(--h-lg); padding: 6px 8px; border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--raised); box-shadow: none; cursor: text; transition: border-color var(--dur-fade) var(--ease-fade), box-shadow var(--dur-fade) var(--ease-fade); }
/* A transparent outline keeps a focus indicator in forced-colors mode, as on .ui-input. */
.ui-tag-input:focus-within { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
.ui-tag-input[data-invalid="true"] { border-color: var(--err-line); }
.ui-tag-list { display: contents; margin: 0; padding: 0; list-style: none; }
.ui-tag-token { display: inline-flex; max-width: 100%; min-height: 30px; align-items: center; gap: 4px; padding-block: 0; padding-inline: 10px 4px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--lift); color: var(--text); font: 500 13px/1.2 var(--font-body); }
.ui-tag-token-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tag-input[data-phrases] .ui-tag-token { padding-block: 4px; line-height: 1.35; }
.ui-tag-input[data-phrases] .ui-tag-token-text { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.ui-tag-remove { display: grid; flex: none; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.ui-tag-remove:hover { background: var(--line-2); color: var(--text); }
.ui-tag-remove:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 1px; }
.ui-tag-remove svg { width: 11px; height: 11px; }
/* The width is the kit's, not the input's own (twenty characters of its face, which in the Arabic
   face is wider than a phone field): flex still grows the entry over the rest of the row. */
.ui-tag-entry { flex: 1 1 140px; width: 110px; min-width: 110px; min-height: 30px; padding: 0 4px; border: 0; background: transparent; color: var(--text); font: 500 15px/1.2 var(--font-body); outline: none; }
.ui-tag-entry::placeholder { color: var(--text-2); }
/* A phone's or a touch screen's thumb: the remove button and the entry are 40 px targets; the remove button
   keeps its place in the token (its extra reach overlaps the token's own padding). */
@media (max-width: 767.98px), (pointer: coarse) { .ui-tag-remove { width: 40px; height: 40px; margin-block: -8px; margin-inline-end: -8px; } .ui-tag-entry { min-height: 40px; } }
@media (forced-colors: active) {
  .ui-tag-input:focus-within { outline: 2px solid Highlight; }
  .ui-tag-token { border-color: CanvasText; }
}

/* ==== end: tag-input ==== */

/* ==== component: alert-dialog ==== */
/* ---------- Alert dialog (KIT-1): one question, two answers. Built by bidiUI.confirm() on
   the modal's surface: an icon that says how serious it is, the question as the title, the
   consequence under it, Cancel and the confirm button at the inline end. ---------- */
.ui-alert-dialog { width: min(440px, 100%); }
.ui-alert-dialog .ui-dialog-head { align-items: center; justify-content: flex-start; gap: 16px; }
.ui-alert-icon { display: grid; flex: none; width: 40px; height: 40px; place-items: center; border-radius: var(--r-md); background: var(--cobalt-soft); color: var(--cobalt-2); }
.ui-alert-icon svg { width: 20px; height: 20px; }
.ui-alert-dialog[data-tone="danger"] .ui-alert-icon { background: var(--err-soft); color: var(--err); }
.ui-alert-dialog .ui-title { font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.ui-alert-dialog .ui-dialog-body { padding-block-start: 12px; }
.ui-alert-dialog .ui-dialog-body p { overflow-wrap: anywhere; }
.ui-alert-dialog .ui-dialog-body p:last-child { margin-block-end: 0; }
/* The note slot (CARRY-2): what stays as it is, or who can undo this. Quieter than the
   consequence above it, set off by a hairline, and still part of what the dialog describes. */
.ui-alert-note { margin-block: 12px 0; padding-block-start: 12px; border-block-start: 1px solid var(--line); color: var(--text-2); font: 400 13px/1.55 var(--font-body); }
.ui-alert-dialog .ui-field-error { margin-block-start: 12px; }
.ui-alert-dialog .ui-dialog-foot .ui-btn { min-width: 108px; }
.ui-alert-dialog .ui-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.ui-alert-dialog .ui-btn[aria-disabled="true"] { opacity: .5; cursor: default; scale: none; }
/* On a phone the two answers share the row equally, so neither is a small target. */
@media (max-width: 560px) { .ui-alert-dialog .ui-dialog-foot .ui-btn { flex: 1 1 0; min-width: 0; } }
/* ==== end: alert-dialog ==== */

/* ==== component: composer ==== */
/* ---------- Composer (P-17): the box a person writes a message in. A head (a Segmented control for what is
   being written, a hint with its Kbd), the text, a foot (a status line and the action). The text takes its
   own direction from what is typed (dir="auto"), whatever the page's language. data-mode="note" tints the
   box, so an internal note is never mistaken for a reply to the visitor. ---------- */
.ui-composer { display: grid; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--field-line); border-radius: var(--r-xl); background: var(--raised); box-shadow: none; transition: border-color var(--dur-fade) var(--ease-fade), background-color var(--dur-fade) var(--ease-fade); }
.ui-composer:focus-within { border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.24); }
.ui-composer[data-mode="note"] { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.ui-composer[data-mode="note"]:focus-within { border-color: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); }
.ui-composer-head, .ui-composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ui-composer-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font: 400 13px/1.4 var(--font-body); }
.ui-composer-input { width: 100%; min-height: 84px; max-height: 40vh; padding: 4px 2px; border: 0; background: transparent; color: var(--text); font: 400 15px/1.6 var(--font-body); resize: vertical; unicode-bidi: plaintext; }
.ui-composer-input:focus-visible { outline: 2px solid transparent; }
.ui-composer-input::placeholder { color: var(--text-2); }
/* On the warm note background the placeholder carries an instruction ("the visitor never sees it"):
   it takes the muted grey, which keeps 4.5:1 there too. */
.ui-composer[data-mode="note"] .ui-composer-input::placeholder { color: var(--muted); }
/* dir="auto" on an empty box resolves to left-to-right, which would set an Arabic placeholder from the
   wrong edge with its full stop on the wrong side. While only the placeholder shows, the box follows the
   page; the moment something is typed, the text's own direction takes over again. */
.ui-composer-input:placeholder-shown { direction: inherit; unicode-bidi: normal; }
.ui-composer-input:lang(ar) { font-family: var(--font-arabic); }
.ui-composer-status { flex: 1 1 160px; min-width: 0; margin: 0; color: var(--text-2); font: 500 13px/1.4 var(--font-body); }
.ui-composer-status[data-kind="error"] { color: var(--err); }
.ui-composer-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (forced-colors: active) { .ui-composer { border: 1px solid CanvasText; } .ui-composer[data-mode="note"] { border-style: dashed; } }

/* ==== end: composer ==== */

/* ==== component: multi-select ==== */
/* ---------- Multi-select (P-23): several values from a fixed list, in one field. Each chosen
   value is a token with its own remove button (the tag input's tokens); the text entry
   after the last token filters a listbox that stays open while values are ticked. Every
   option carries a drawn checkbox, painted from aria-selected so the two cannot disagree.
   A decorative mark (a flag, written as text) may sit in front of an option's name. ---------- */
.ui-multiselect { position: relative; display: grid; gap: 8px; min-width: 0; }
.ui-multiselect-field { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--h-lg); padding-block: 6px; padding-inline: 8px 44px; border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--raised); box-shadow: none; cursor: text; transition: border-color var(--dur-fade) var(--ease-fade), box-shadow var(--dur-fade) var(--ease-fade); }
/* A transparent outline keeps a focus indicator in forced-colors mode, as on .ui-input. */
.ui-multiselect-field:focus-within { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
.ui-multiselect-field .ui-combobox-toggle { inset-block-start: 5px; }
.ui-multiselect[data-open] .ui-combobox-toggle svg { transform: rotate(180deg); }
.ui-multiselect-mark { flex: none; font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; }
.ui-tag-token .ui-multiselect-mark { margin-inline-end: 6px; }
.ui-multiselect-list .ui-option { gap: 12px; }
.ui-multiselect-box { display: grid; flex: none; width: 18px; height: 18px; place-items: center; border: 1.5px solid #5A5E66; border-radius: var(--r-xs); background: var(--panel); color: #fff; }
.ui-multiselect-box svg { width: 12px; height: 12px; opacity: 0; }
.ui-multiselect-list .ui-option[aria-selected="true"] .ui-multiselect-box { border-color: var(--cobalt); background: var(--cobalt); }
.ui-multiselect-list .ui-option[aria-selected="true"] .ui-multiselect-box svg { opacity: 1; }
/* The checkbox says "chosen" here, so the combobox's end tick is not drawn a second time. */
.ui-multiselect-list .ui-option[aria-selected="true"]::after { content: none; }
.ui-multiselect-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (forced-colors: active) {
  .ui-multiselect-field:focus-within { outline: 2px solid Highlight; }
  .ui-multiselect-box { border-color: CanvasText; }
  .ui-multiselect-list .ui-option[aria-selected="true"] .ui-multiselect-box { background: Highlight; color: HighlightText; }
}
/* ==== end: multi-select ==== */

/* ==== component: chat-attachment ==== */
/* ---------- Chat bubble, the "file" variant: a visitor's photo or PDF in a transcript (P-27) ----------
   The bubble holds one button: the photo's thumbnail (or a document mark and the file's kind) that
   opens the Modal dialog with the whole file and what the assistant read. RTL by construction. */
.ui-chat-attachment { display: grid; gap: 6px; }
.ui-chat-attachment-open { display: inline-grid; justify-items: start; gap: 6px; max-width: 100%; margin: 0; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--raised); color: var(--text); font: 500 13px/1.4 var(--font-body); text-align: start; cursor: zoom-in; transition: border-color var(--dur-fade) var(--ease-fade); }
.ui-chat-attachment-open:hover { border-color: var(--cobalt-2); }
.ui-chat-attachment-open:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-chat-attachment-open img { display: block; width: 168px; max-width: 100%; height: auto; max-height: 168px; object-fit: cover; border-radius: var(--r-sm); background: var(--lift); }
.ui-chat-attachment-doc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; }
.ui-chat-attachment-doc svg { width: 22px; height: 22px; flex: none; color: var(--cobalt-2); }
.ui-chat-attachment-meta { display: block; color: var(--text-2); font: 400 12px/1.4 var(--font-body); }
.ui-chat-attachment-figure { display: grid; min-height: 120px; margin: 0 0 16px; place-items: center; overflow: hidden; border-radius: var(--r-md); background: var(--raised); }
.ui-chat-attachment-figure img { display: block; max-width: 100%; height: auto; max-height: min(60vh, 520px); object-fit: contain; }
.ui-chat-attachment-figure .ui-chat-attachment-doc { padding: 24px; color: var(--text); font: 600 14px/1.4 var(--font-body); }
.ui-chat-attachment-text { max-height: 30vh; margin: 0; padding: 12px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--ground); color: var(--text); font: 400 14px/1.6 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ui-chat-attachment-text[data-empty] { color: var(--text-2); }
/* A scroller the keyboard can reach (tabindex="0", role="region"): it says when it has focus. */
.ui-chat-attachment-text:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.ui-modal[data-size="wide"] { width: min(720px, 100%); }
:lang(ar) :is(.ui-chat-attachment-open, .ui-chat-attachment-meta, .ui-chat-attachment-figure .ui-chat-attachment-doc) { font-family: var(--font-arabic); }
/* ==== end: chat-attachment ==== */

/* ==== component: charts ==== */
/* ---------- Charts (P-32): bar, line and sparkline as inline SVG, drawn by assets/charts.js ----------
   Series in the cobalt family first: the light cobalt, green, orange, then cobalt itself; the axis and the
   grid on hairlines; the figures in Sora; the readout of the chosen point on a raised panel (the reference's
   palette, as the dashboard draws it).
   A series is told apart by colour AND by dash or mark (s1 solid, s2 dashed, s3 dotted, s4 long dash),
   and the legend says its name. Every point is a keyboard stop: the focused one wears a ring drawn on
   its hit area, a guide line marks its day, and the readout under the chart says it in words. The
   Figure is a hairline card with a Segmented control for the Data table view. RTL: charts.js
   mirrors the geometry; nothing here is physical. */
.ui-chart { --chart: var(--cobalt-2); position: relative; display: grid; gap: 8px; min-width: 0; }
.ui-chart-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ui-chart text { fill: var(--text-2); font: 400 12px/1 var(--font-body); font-variant-numeric: tabular-nums; }
:lang(ar) .ui-chart text { font-family: var(--font-arabic); }
.ui-chart .ui-chart-name { fill: var(--text-2); font-weight: 600; }
/* The figures in Sora, as every counter of the reference. */
.ui-chart .ui-chart-value { fill: var(--text); font-family: var(--font-display); font-weight: 600; }
:lang(ar) .ui-chart .ui-chart-value { font-family: var(--font-arabic); }
.ui-chart-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ui-chart-grid.ui-chart-axis { stroke: var(--line-2); }
.ui-chart-s1 { --chart: var(--cobalt-2); }
.ui-chart-s2 { --chart: var(--ok); }
.ui-chart-s3 { --chart: var(--orange); }
.ui-chart-s4 { --chart: var(--cobalt); }
.ui-chart-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart-line.ui-chart-s2 { stroke-dasharray: 7 4; }
.ui-chart-line.ui-chart-s3 { stroke-dasharray: 2 4; }
.ui-chart-line.ui-chart-s4 { stroke-dasharray: 12 4; }
.ui-chart-dot { fill: var(--panel); stroke: var(--chart); stroke-width: 1.5; }
.ui-chart-bar { fill: var(--chart); }
.ui-chart-bar.ui-chart-s2 { fill: color-mix(in srgb, var(--chart) 60%, var(--panel)); stroke: var(--chart); stroke-width: 1; }
.ui-chart-guide { stroke: var(--line-2); stroke-opacity: 1; stroke-dasharray: none; }
.ui-chart-stop { fill: transparent; cursor: crosshair; }
.ui-chart-stop:focus, .ui-chart-row:focus { outline: none; }
/* The ring: drawn on the hit area so it shows on every engine (an outline on SVG is not reliable). */
.ui-chart-stop:focus-visible, .ui-chart-row:focus-visible .ui-chart-stop { fill: rgba(157,184,255,.1); stroke: var(--cobalt-2); stroke-width: 2; }
.ui-chart-row .ui-chart-stop { cursor: default; }
.ui-chart-row.is-active .ui-chart-bar { fill: color-mix(in srgb, var(--chart) 80%, var(--text)); }
.ui-chart-readout { justify-self: start; margin: 0; min-height: var(--h-sm); padding: var(--row) var(--stack); border-radius: var(--r-sm); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: var(--type-caption); font-weight: 600; }
.ui-chart-legend { display: flex; flex-wrap: wrap; gap: var(--pair) var(--split); margin: 0; padding: 0; color: var(--text-2); font: var(--type-micro); font-weight: 600; list-style: none; }
.ui-chart-legend[hidden] { display: none; }
.ui-chart-key { display: inline-flex; align-items: center; gap: var(--row); }
.ui-chart-key::before { width: var(--sp-16); height: 0; border-block-start: 2px solid var(--chart); content: ''; }
.ui-chart-key.ui-chart-s2::before { border-block-start-style: dashed; }
.ui-chart-key.ui-chart-s3::before { border-block-start-style: dotted; }
.ui-chart[data-empty] .ui-chart-svg { opacity: .55; }
:lang(ar) :is(.ui-chart-readout, .ui-chart-legend) { font-family: var(--font-arabic); }
.ui-sparkline { display: block; overflow: visible; }
.ui-sparkline-line { fill: none; stroke: var(--cobalt-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ui-sparkline-area { fill: rgba(157,184,255,.12); }
.ui-sparkline-dot { fill: var(--cobalt-2); }
.ui-figure { position: relative; display: grid; gap: var(--stack); min-width: 0; margin: 0; padding: var(--in-s); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: none; }
.ui-figure-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--row) var(--stack); }
.ui-figure-title { margin: 0; color: var(--text); font: var(--type-small); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
:lang(ar) .ui-figure-title { font-family: var(--font-arabic); letter-spacing: 0; }
.ui-figure-view .ui-segment { min-height: var(--h-sm); padding: 0 var(--stack); font: var(--type-micro); font-weight: 600; }
@media (max-width: 767.98px), (pointer: coarse) { .ui-figure-view .ui-segment { min-height: 40px; } }
.ui-figure-chart[hidden], .ui-figure-table[hidden] { display: none; }
@media (forced-colors: active) {
  .ui-chart-line, .ui-sparkline-line { stroke: CanvasText; }
  .ui-chart-bar, .ui-sparkline-dot { fill: CanvasText; }
  .ui-chart-stop:focus-visible, .ui-chart-row:focus-visible .ui-chart-stop { stroke: Highlight; }
  .ui-chart-key::before { border-color: CanvasText; }
  .ui-chart-readout { border: 1px solid CanvasText; }
}
/* ==== end: charts ==== */

/* ==== component: breadcrumb ==== */
/* ---------- Breadcrumb (P-33): a trail from the top level to where the person is ----------
   An <ol> in a <nav aria-label>; every step but the last is a button back to it, the last is the
   current one (aria-current="page"). The separator is drawn here, so it is never read out, and its
   chevron turns with the reading direction. Names keep their own direction (dir="auto"). */
.ui-breadcrumb { min-width: 0; }
.ui-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; font: 500 13px/1.4 var(--font-body); }
.ui-breadcrumb-item { display: inline-flex; align-items: center; min-width: 0; }
.ui-breadcrumb-item + .ui-breadcrumb-item::before { display: inline-block; width: 7px; height: 7px; margin-inline: 8px 9px; border-block-start: 1.75px solid var(--text-2); border-inline-end: 1.75px solid var(--text-2); content: ''; transform: rotate(45deg); }
.ui-breadcrumb-item:dir(rtl) + .ui-breadcrumb-item::before { transform: rotate(-45deg); }
.ui-breadcrumb-link { min-height: 28px; max-width: 22ch; overflow: hidden; margin: 0; padding: 2px 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--cobalt-2); font: inherit; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ui-breadcrumb-link:hover { background: var(--raised); }
.ui-breadcrumb-link:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 1px; }
@media (max-width: 767.98px), (pointer: coarse) { .ui-breadcrumb-link { min-height: 40px; } }
.ui-breadcrumb-current { max-width: 30ch; overflow: hidden; padding: 2px 6px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
:lang(ar) .ui-breadcrumb-list { font-family: var(--font-arabic); }
/* ==== end: breadcrumb ==== */

/* ==== component: treemap ==== */
/* ---------- Treemap (P-33): nested groups as rectangles sized by their share, drawn by
   assets/charts.js (bidiCharts.treemap, figure kind "treemap") ----------
   Cells are buttons placed from the inline start (inset-inline-start), so the biggest sits at the
   top left in English and the top right in Arabic with no mirrored maths. Five shades of cobalt,
   biggest brightest, all with light text at AA. A cell that holds subtopics carries a corner mark;
   the opened cell an inner ring; the focused cell the kit's focus ring. A cell too small for words
   keeps its name for the screen reader and the readout. */
.ui-treemap { display: grid; gap: 8px; min-width: 0; }
.ui-treemap-plot { position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-md); background: var(--raised); }
.ui-treemap-cell { --cell: color-mix(in srgb, var(--cobalt) 14%, var(--panel)); position: absolute; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-width: 0; overflow: hidden; margin: 0; padding: var(--row) var(--stack); border: 0; border-radius: var(--r-sm); background: var(--cell); color: var(--text); text-align: start; cursor: pointer; transition: filter var(--dur-fade) var(--ease-fade), box-shadow var(--dur-fade) var(--ease-fade); }
.ui-treemap-cell[data-tier="1"] { --cell: color-mix(in srgb, var(--cobalt) 62%, var(--panel)); }
.ui-treemap-cell[data-tier="2"] { --cell: color-mix(in srgb, var(--cobalt) 48%, var(--panel)); }
.ui-treemap-cell[data-tier="3"] { --cell: color-mix(in srgb, var(--cobalt) 34%, var(--panel)); }
.ui-treemap-cell[data-tier="4"] { --cell: color-mix(in srgb, var(--cobalt) 22%, var(--panel)); }
.ui-treemap-cell:hover { filter: brightness(1.15); }
.ui-treemap-cell:focus { outline: none; }
.ui-treemap-cell:focus-visible { z-index: 1; box-shadow: 0 0 0 2px var(--cobalt-2), 0 0 0 4px var(--panel); }
.ui-treemap-cell[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--text); }
.ui-treemap-cell[data-parent]::after { position: absolute; inset-block-start: 7px; inset-inline-end: 7px; width: 7px; height: 7px; border-block-start: 2px solid var(--text); border-inline-end: 2px solid var(--text); border-radius: 1px; content: ''; opacity: .55; }
.ui-treemap-cell[data-parent] { padding-inline-end: 22px; }
/* A name keeps its own direction (dir="auto") but lines up with the cell's start. */
.ui-treemap-name { display: -webkit-box; overflow: hidden; font: var(--type-caption); font-weight: 600; text-align: match-parent; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: break-word; }
.ui-treemap-value { color: var(--text); font: var(--type-micro); font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Narrow or short: the name on one line, cut with an ellipsis; the value stays in the cell's name. */
.ui-treemap-cell.is-compact { justify-content: flex-start; padding: var(--pair) var(--row); }
.ui-treemap-cell.is-compact[data-parent] { padding-inline-end: 18px; }
.ui-treemap-cell.is-compact .ui-treemap-name { display: block; font: var(--type-micro); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-treemap-cell.is-compact .ui-treemap-value { display: none; }
.ui-treemap-cell.is-small { padding: 0; }
.ui-treemap-cell.is-small > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ui-treemap[data-empty] .ui-treemap-plot::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-2); font: 500 13px/1.4 var(--font-body); content: attr(data-empty-text); }
.ui-treemap-link { min-height: 28px; margin: 0; padding: 2px 0; border: 0; background: transparent; color: var(--cobalt-2); font: 500 13px/1.4 var(--font-body); text-align: start; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; unicode-bidi: plaintext; }
.ui-treemap-link:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; border-radius: 4px; }
.ui-figure-crumbs:empty { display: none; }
@media (max-width: 767.98px), (pointer: coarse) { .ui-treemap-link { min-height: 40px; } }
:lang(ar) :is(.ui-treemap-name, .ui-treemap-value, .ui-treemap-link) { font-family: var(--font-arabic); }
@media (forced-colors: active) {
  .ui-treemap-cell { border: 1px solid CanvasText; }
  .ui-treemap-cell:focus-visible { outline: 3px solid Highlight; }
  .ui-treemap-cell[aria-current="true"] { outline: 2px solid CanvasText; outline-offset: -4px; }
}
@media (prefers-reduced-motion: reduce) { .ui-treemap-cell { transition: none; } }
/* ==== end: treemap ==== */

/* ==== component: chat-bubble ==== */
/* ---------- Chat bubble (P-36): the rounded box around one message in a conversation log ----------
   The log is role="log"; each message is a row whose side says who wrote it: "sent" (the person
   using the screen) sits at the inline end on a cobalt-tinted panel, "received" at the inline start on
   the raised panel. The tail is the one squared corner on the writer's side. The words take their own
   direction (dir="auto" on the bubble, plaintext bidi), and the meta line names the writer and the
   time, so the side is never the only cue. The typing indicator is three dots with words for a screen
   reader. RTL: the sides mirror with the page. */
.ui-chat-log { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ui-chat-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-chat-row[data-side="sent"] { align-items: flex-end; }
.ui-chat-row[data-side="received"] { align-items: flex-start; }
.ui-chat-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--text-2); font: 500 12px/1.3 var(--font-body); }
.ui-chat-meta strong { color: var(--text); font-weight: 600; }
.ui-chat-bubble { max-width: min(88%, 540px); margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); color: var(--text); box-shadow: none; font: 400 14px/1.6 var(--font-body); white-space: pre-line; overflow-wrap: anywhere; text-align: start; unicode-bidi: plaintext; }
.ui-chat-row[data-side="sent"] .ui-chat-bubble { border-color: color-mix(in srgb, var(--cobalt-2) 26%, transparent); background: var(--cobalt-soft); border-end-end-radius: var(--r-xs); }
.ui-chat-row[data-side="received"] .ui-chat-bubble { border-end-start-radius: var(--r-xs); }
.ui-chat-row[data-state="error"] .ui-chat-bubble { border-color: color-mix(in srgb, var(--err) 40%, transparent); background: var(--err-soft); }
.ui-chat-note { margin: 0; color: var(--text-2); font: 400 12px/1.4 var(--font-body); }
.ui-chat-typing { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; }
.ui-chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt-2); opacity: .35; animation: ui-typing 1.2s ease-in-out infinite; }
.ui-chat-typing i:nth-child(2) { animation-delay: .15s; }
.ui-chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ui-typing { 0%, 70%, 100% { opacity: .35; transform: none; } 35% { opacity: 1; transform: translateY(-3px); } }
:lang(ar) :is(.ui-chat-bubble, .ui-chat-meta, .ui-chat-note) { font-family: var(--font-arabic); }
@media (prefers-reduced-motion: reduce) { .ui-chat-typing i { animation: none; opacity: .7; } }
@media (forced-colors: active) {
  .ui-chat-bubble { border: 1px solid CanvasText; }
  .ui-chat-row[data-side="sent"] .ui-chat-bubble { border-width: 2px; }
}
/* ==== end: chat-bubble ==== */

/* ==== component: sidebar ==== */
/* ---------- Sidebar (source list, FINAL-2): a navigation column of links in titled groups ----------
   A <nav> holding groups (.ui-sidebar-group: a heading and a list of links). The reference's settings menu:
   each group's name in small capitals, 36 px rows in the first grey, the current link white on the lighter
   row with a light bar at its inline start, so the place is never told by colour alone; links keep their
   focus ring. Under 980 px the column folds behind its disclosure button (.ui-sidebar-toggle, the current
   destination's name on it), opened by bidiUI.sidebar(). RTL: the bar and the chevron follow the reading
   direction through logical properties. */
.ui-sidebar { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: none; }
.ui-sidebar-toggle { display: none; }
.ui-sidebar-body { display: grid; gap: 12px; min-width: 0; }
.ui-sidebar-group { display: grid; gap: 4px; min-width: 0; }
.ui-sidebar-group[hidden] { display: none; }
.ui-sidebar-heading { margin: 0; padding: 8px 12px 4px; color: var(--text-2); font: 600 12px/16px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; }
:lang(ar) .ui-sidebar-heading { font-size: 12px; letter-spacing: 0; text-transform: none; }
.ui-sidebar-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-sidebar-list > li[hidden] { display: none; }
.ui-sidebar-link { position: relative; display: flex; align-items: center; min-height: 36px; padding: 8px 12px; border-radius: var(--r-sm); color: var(--text-2); font: 600 13px/20px var(--font-body); text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur-press) var(--ease-fade), background-color var(--dur-fade) var(--ease-fade); }
.ui-sidebar-link:hover { color: var(--text); background: var(--raised); }
.ui-sidebar-link[aria-current="page"] { color: var(--text); background: var(--lift); box-shadow: none; }
.ui-sidebar-link[aria-current="page"]::before { position: absolute; inset-block: 10px; inset-inline-start: 0; width: 2px; border-radius: 2px; background: var(--cobalt-2); content: ''; }
.ui-sidebar-link:focus-visible, .ui-sidebar-toggle:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 1px; }
.ui-sidebar-rule { height: 1px; margin: 4px 12px; border: 0; background: var(--line); }
@media (max-width: 979px) {
  .ui-sidebar { padding: 4px; }
  .ui-sidebar-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); font: 600 14px/20px var(--font-body); text-align: start; cursor: pointer; }
  .ui-sidebar-toggle-label { color: var(--text-2); font-weight: 500; }
  .ui-sidebar-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ui-sidebar-toggle svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur-move) var(--spring); }
  .ui-sidebar[data-open] .ui-sidebar-toggle svg { transform: rotate(180deg); }
  .ui-sidebar:not([data-open]) .ui-sidebar-body { display: none; }
  .ui-sidebar[data-open] .ui-sidebar-body { padding: 8px 4px; }
  .ui-sidebar-link { min-height: 44px; }
}
/* ==== end: sidebar ==== */

/* ==== component: motion ==== */
/* ---------- Motion preferences (stays last: it overrides every component above) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-toast, .ui-modal, .ui-drawer, .ui-popover, .ui-menu, .ui-tooltip, .ui-palette, .ui-scrim { animation: none !important; }
  .ui-skeleton::after, .ui-spinner { animation: none; }
  .ui-progress-fill, .ui-btn, .ui-btn::before { transition: none; }
  .ui-btn:active { scale: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .ui-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,.75); }
}
/* ==== end: motion ==== */