/*
 * Qoralo UI system: tokens, base and shared layout primitives.
 * Every product surface (dashboard, flows, admin, documents) builds on this file.
 * Layout values live here as tokens; screen CSS composes primitives and must not
 * invent its own gutters, widths, gaps, radii or type sizes (scripts/ui-layout-lint.mjs).
 */
@font-face { font-family: "Qoralo Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Space: a 4px base. */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Device safe areas. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Semantic layout spacing. */
  --page-gutter: var(--space-4);
  --page-pad-top: var(--space-5);
  --page-pad-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-8));
  --header-gap: var(--space-6);
  --section-gap: var(--space-8);
  --card-gap: var(--space-4);
  --card-pad: var(--space-4);
  --card-pad-compact: var(--space-3);
  --stack-gap: var(--space-3);
  --control-gap: var(--space-2);
  --field-gap: var(--space-2);

  /* Widths and shell geometry. */
  --content-max: 1200px;
  --narrow-max: 720px;
  --prose-max: 680px;
  --aside-w: 360px;
  --metric-min: 148px;
  --card-min: 280px;
  --sidebar-w: 240px;
  --sidebar-w-compact: 56px;
  --topbar-h: 52px;
  --tabbar-h: 56px;
  --sheet-w: 520px;
  --sheet-w-wide: 640px;
  --sheet-max-h: 760px;
  --preview-phone-w: 273px;
  --preview-mobile-w: 392px;
  --preview-desktop-min: 1024px;
  --preview-desktop-max: 1442px;
  --preview-phone-radius: 46px;
  --preview-notch-w: 74px;
  --menu-min: 200px;
  --help-w: 380px;
  --qr-preview: 160px;
  --look-min: 120px;
  --chart-h: 160px;
  --settings-nav-w: 300px;
  --doc-nav-w: 200px;
  --header-main-min: 320px;

  /* Controls. */
  --control-h: 40px;
  --control-h-sm: 32px;
  --tab-h: calc(var(--control-h) - var(--space-1-5));
  --field-h: 44px;
  --row-h: 48px;
  --tap: 44px;
  --icon-sm: 14px;
  --icon: 16px;
  --icon-lg: 20px;

  /* Radius by role. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* Type. */
  --font-ui: "Qoralo Inter", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-meta: 12px;
  --fs-ui: 13px;
  --fs-body: 14px;
  --fs-input: 16px;
  --fs-prose: 15px;
  --fs-prose-h2: 18px;
  --fs-section: 15px;
  --fs-title: 26px;
  --fs-metric: 26px;
  --lh-tight: 1.2;
  --lh-ui: 1.45;
  --lh-body: 1.55;
  --ls-title: -0.022em;
  --ls-section: -0.012em;
  --ls-ui: -0.006em;
  --fw-regular: 400;
  --fw-medium: 510;
  --fw-semibold: 590;

  /* Colour: neutral foundation, one accent. */
  --c-ground: #f7f7f8;
  --c-surface: #ffffff;
  --c-subtle: #f1f1f3;
  --c-hover: #ececf0;
  --c-selected: #e8e8ed;
  --c-ink: #1c1d21;
  --c-muted: #5f6068;
  --c-faint: #7c7d85;
  --c-border: #e1e1e6;
  --c-border-strong: #c9c9d1;
  --c-accent: #7652e8;
  --c-accent-hover: #6845d9;
  --c-accent-press: #5933c4;
  --c-accent-soft: #f1edfd;
  --c-accent-text: #5933c4;
  --c-on-accent: #ffffff;
  --c-success: #1d7348;
  --c-success-soft: #e6f4ec;
  --c-danger: #b42318;
  --c-danger-soft: #fdecea;
  --c-warning: #8a5a00;
  --c-warning-soft: #fdf3dc;
  --c-focus: rgba(118, 82, 232, 0.32);
  --c-backdrop: rgba(18, 18, 24, 0.36);
  --focus-ring: 0 0 0 3px var(--c-focus);
  --underline-offset: 3px;
  --shadow-overlay: 0 12px 32px rgba(18, 18, 24, 0.14), 0 1px 3px rgba(18, 18, 24, 0.08);

  /* Motion. */
  --dur-quick: 100ms;
  --dur-fade: 150ms;
  --dur-layout: 200ms;
}

@media (min-width: 768px) {
  :root {
    --page-gutter: var(--space-6);
    --page-pad-top: var(--space-6);
    --page-pad-bottom: var(--space-12);
    --control-h: 32px;
    --control-h-sm: 28px;
    --tab-h: calc(var(--control-h) - var(--space-1-5));
    --field-h: 36px;
    --row-h: 44px;
    --fs-input: 14px;
    --fs-title: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: var(--space-8);
    --page-pad-top: var(--space-8);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  font-feature-settings: "cv01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, h4, p, dl, dd, ol, ul, figure) { margin: 0; }
/* Unclassed headings never fall back to browser sizes; roles come from primitives. */
:where(h1, h2, h3, h4, h5, h6) { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-section); }
:where(ol, ul) { padding: 0; list-style: none; }
:where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) { cursor: pointer; }
:where(a) { color: inherit; }
:where(img, svg) { display: block; max-width: 100%; }
:where(svg.studio-icon) { flex: none; }
[hidden], .ui-shell [hidden] { display: none; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
::selection { background: var(--c-accent-soft); }

.ui-sr-only, .studio-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ui-skip-link, .studio-skip-link {
  position: absolute; left: var(--space-2); top: var(--space-2); z-index: 100;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--c-ink); color: var(--c-surface); transform: translateY(-200%);
}
.ui-skip-link:focus, .studio-skip-link:focus { transform: none; }

/* ---------- Text roles ---------- */
.ui-text-muted { color: var(--c-muted); }
.ui-text-meta { color: var(--c-muted); font-size: var(--fs-meta); }
.ui-link, .studio-dark-link, .studio-text-link {
  color: var(--c-ink); font-weight: var(--fw-medium); text-decoration: underline;
  text-decoration-color: var(--c-border-strong); text-underline-offset: var(--underline-offset);
}
.ui-link:hover, .studio-dark-link:hover, .studio-text-link:hover { text-decoration-color: var(--c-ink); }

/* ---------- Application shell ---------- */
.ui-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--c-ground);
}
.ui-region-slot { display: contents; }
.ui-main { min-width: 0; display: flex; flex-direction: column; }
.ui-content { flex: 1; min-width: 0; outline: none; }

.ui-sidebar { display: none; }

.ui-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-2);
  min-height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) var(--page-gutter) 0;
  background: var(--c-ground);
  border-bottom: 1px solid var(--c-border);
}
.ui-topbar__brand { display: inline-flex; align-items: center; margin-right: auto; }
.ui-topbar__brand img { width: auto; height: var(--space-5); }
.ui-topbar__context { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; }
.ui-topbar__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.ui-topbar__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-section); font-weight: var(--fw-semibold); letter-spacing: var(--ls-section);
}

.ui-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
.ui-tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5);
  min-width: 0; color: var(--c-muted); text-decoration: none;
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
}
.ui-tabbar__item .studio-icon { width: var(--icon-lg); height: var(--icon-lg); }
.ui-tabbar__item[aria-current="page"] { color: var(--c-accent-text); }

@media (min-width: 768px) {
  .ui-shell { grid-template-columns: var(--sidebar-w-compact) minmax(0, 1fr); }
  .ui-tabbar { display: none; }
  .ui-sidebar {
    position: sticky; top: 0;
    display: flex; flex-direction: column; gap: var(--space-4);
    height: 100dvh; padding: var(--space-3) var(--space-2);
    background: var(--c-ground);
    border-right: 1px solid var(--c-border);
    overflow-y: auto;
  }
}
@media (min-width: 1024px) {
  .ui-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .ui-sidebar { padding: var(--space-3); }
}

/* Flow routes: no navigation, the task fills a narrow centred column. */
.ui-shell[data-flow] { grid-template-columns: minmax(0, 1fr); }
.ui-shell[data-flow] :is(.ui-sidebar, .ui-tabbar) { display: none; }
.ui-shell[data-flow] .ui-page { margin-inline: auto; --page-pad-bottom: var(--space-12); }

/* Sidebar parts. */
.ui-sidebar__brand {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 var(--space-2);
  border-radius: var(--radius-md); text-decoration: none; color: var(--c-ink);
}
.ui-sidebar__brand img { width: auto; height: var(--space-5); }
.ui-sidebar__brand-mark { display: none; }
.ui-sidebar__group { display: grid; gap: var(--space-0-5); }
.ui-sidebar__label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  height: var(--space-6); padding: 0 var(--space-2);
  color: var(--c-muted); font-size: var(--fs-meta); font-weight: var(--fw-medium);
}
.ui-sidebar__label button {
  border: 0; background: none; padding: 0; color: var(--c-muted);
  font-size: var(--fs-meta); font-weight: var(--fw-medium);
}
.ui-sidebar__label button:hover { color: var(--c-ink); }
.ui-nav-item {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-md); background: none;
  color: var(--c-muted); text-decoration: none; text-align: left;
  font-size: var(--fs-ui); font-weight: var(--fw-medium);
}
.ui-nav-item .studio-icon { width: var(--icon); height: var(--icon); }
.ui-nav-item:hover { background: var(--c-hover); color: var(--c-ink); }
.ui-nav-item[aria-current="page"], .ui-nav-item.is-current { background: var(--c-selected); color: var(--c-ink); }
.ui-nav-item > span:not(.ui-nav-item__meta) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav-item__meta { margin-left: auto; color: var(--c-muted); font-size: var(--fs-meta); font-weight: var(--fw-regular); }
.ui-sidebar__footer { margin-top: auto; display: grid; gap: var(--space-2); }
.ui-sidebar__account {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--row-h); padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--c-border);
}
.ui-sidebar__account-copy { display: grid; min-width: 0; }
.ui-sidebar__account-copy strong, .ui-sidebar__account-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sidebar__account-copy strong { font-size: var(--fs-ui); font-weight: var(--fw-medium); }
.ui-sidebar__account-copy span { color: var(--c-muted); font-size: var(--fs-meta); }
.ui-sidebar__compact-only { display: none; }

.ui-sidebar__page { display: flex; align-items: center; gap: var(--space-0-5); min-width: 0; }
.ui-sidebar__page > .ui-nav-item { flex: 1; min-width: 0; }
.ui-sidebar__page-options { width: var(--control-h-sm); height: var(--control-h-sm); opacity: 0; }
.ui-sidebar__page:hover .ui-sidebar__page-options, .ui-sidebar__page-options:focus-visible { opacity: 1; }
.ui-sidebar__note { padding: var(--space-1) var(--space-2); color: var(--c-muted); font-size: var(--fs-meta); }

/* Topbar parts. */
.ui-topbar__switcher { min-width: 0; max-width: 100%; padding-inline: var(--space-1) var(--space-2); }
.ui-topbar__switcher-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }
.ui-topbar__switcher-chevron { transform: rotate(90deg); color: var(--c-muted); }
.ui-topbar__title { display: none; }
.ui-topbar__label { font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: var(--ls-section); }
.ui-topbar.has-collapsed-title .ui-topbar__title { display: block; }
.ui-topbar.has-collapsed-title .ui-topbar__switcher { display: none; }
.ui-topbar__notifications { position: relative; }
.ui-topbar__notifications .ui-icon-button { position: relative; }
.ui-topbar__count {
  position: absolute; top: var(--space-0-5); right: var(--space-0-5);
  min-width: var(--space-4); height: var(--space-4); padding: 0 var(--space-1);
  border-radius: var(--radius-full); background: var(--c-accent); color: var(--c-on-accent);
  font-size: var(--fs-meta); font-weight: var(--fw-semibold); line-height: var(--space-4); text-align: center;
}
.ui-topbar .ui-topbar__wide { display: none; }
.ui-topbar .studio-save-status { display: none; }
.ui-topbar .studio-header-quick-label { display: none; }
.ui-topbar .studio-header-quick-action { width: var(--control-h); padding: 0; }
@media (min-width: 768px) {
  .ui-topbar .ui-topbar__wide { display: inline-flex; }
  .ui-topbar .studio-save-status { display: inline-flex; }
  .ui-topbar .studio-header-quick-label { display: inline; }
  .ui-topbar .studio-header-quick-action { width: auto; padding: 0 var(--space-3); }
  .ui-topbar.has-collapsed-title .ui-topbar__switcher { display: inline-flex; }
  .ui-topbar.has-collapsed-title .ui-topbar__title { display: none; }
}

/* Compact rail between tablet and desktop: icons only. */
@media (min-width: 768px) and (max-width: 1023px) {
  .ui-sidebar { align-items: center; }
  .ui-sidebar__brand { justify-content: center; width: var(--control-h); padding: 0; }
  .ui-sidebar__brand img:not(.ui-sidebar__brand-mark) { display: none; }
  .ui-sidebar__brand-mark { display: block; width: var(--icon-lg); height: var(--icon-lg); }
  .ui-nav-item { justify-content: center; width: var(--control-h); padding: 0; }
  .ui-nav-item > span, .ui-nav-item__meta, .ui-sidebar__label, .ui-sidebar__full-only, .ui-sidebar__account-copy { display: none; }
  .ui-sidebar__compact-only { display: flex; }
  .ui-sidebar__account { justify-content: center; padding: var(--space-2) 0; }
}

/* ---------- Page container and header ---------- */
.ui-page {
  display: grid; align-content: start; gap: var(--header-gap);
  width: 100%; max-width: calc(var(--content-max) + 2 * var(--page-gutter));
  min-width: 0;
  padding: var(--page-pad-top) var(--page-gutter) var(--page-pad-bottom);
  container-type: inline-size; container-name: page;
}
.ui-page--narrow { max-width: calc(var(--narrow-max) + 2 * var(--page-gutter)); }
.ui-page--editor { max-width: none; }
.ui-page--centered { margin-inline: auto; }
.ui-page--flow { margin-inline: auto; max-width: calc(var(--narrow-max) + 2 * var(--page-gutter)); }
.ui-page__body { display: grid; align-content: start; gap: var(--section-gap); min-width: 0; }

.ui-page-header { display: grid; gap: var(--space-4); min-width: 0; }
.ui-page-header__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.ui-page-header__main { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 var(--header-main-min); }
.ui-page-header__title {
  font-size: var(--fs-title); line-height: var(--lh-tight); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title); overflow-wrap: anywhere; outline: none;
}
.ui-page-header__desc { color: var(--c-muted); font-size: var(--fs-body); line-height: var(--lh-ui); }
.ui-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--control-gap); }
.ui-page-header__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); min-width: 0; }

/* ---------- Sections ---------- */
.ui-section { display: grid; align-content: start; gap: var(--stack-gap); min-width: 0; }
.ui-section__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ui-section__heading { display: grid; gap: var(--space-0-5); min-width: 0; }
.ui-section__title { font-size: var(--fs-section); line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: var(--ls-section); }
.ui-section__desc { color: var(--c-muted); font-size: var(--fs-ui); }

/* ---------- Grids ---------- */
.ui-stack { display: grid; align-content: start; gap: var(--card-gap); min-width: 0; }
.ui-grid-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--metric-min), 1fr)); gap: var(--space-3); min-width: 0; }
.ui-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, var(--card-min))), 1fr)); gap: var(--card-gap); min-width: 0; }
/* Smaller repeated items (tiles, thumbnails, compact controls); empty tracks keep their width. */
.ui-grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, var(--metric-min))), 1fr)); gap: var(--space-3); min-width: 0; }
.ui-grid-main-aside { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "aside"; gap: var(--card-gap); align-items: start; min-width: 0; }
.ui-grid-main-aside--aside-first { grid-template-areas: "aside" "main"; }
.ui-grid-main-aside__main { grid-area: main; display: grid; align-content: start; gap: var(--card-gap); min-width: 0; }
.ui-grid-main-aside__aside { grid-area: aside; display: grid; align-content: start; gap: var(--card-gap); min-width: 0; }
@container page (min-width: 880px) {
  .ui-grid-main-aside, .ui-grid-main-aside--aside-first { grid-template-columns: minmax(0, 1fr) var(--aside-w); grid-template-areas: "main aside"; }
  .ui-grid-main-aside--sticky > .ui-grid-main-aside__aside { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
}

/* Settings archetype: a list of sections beside the open section; phones show one at a time. */
.ui-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); align-items: start; min-width: 0; }
.ui-settings-layout__nav, .ui-settings-layout__detail { display: grid; align-content: start; gap: var(--card-gap); min-width: 0; }
.is-detail-open .ui-settings-layout__nav { display: none; }
.ui-page:not(.is-detail-open) .ui-settings-layout__detail { display: none; }
@container page (min-width: 760px) {
  .ui-settings-layout { grid-template-columns: var(--settings-nav-w) minmax(0, 1fr); }
  .ui-page:not(.is-detail-open) .ui-settings-layout__detail, .ui-page.is-detail-open .ui-settings-layout__nav { display: grid; }
  .ui-settings-layout__nav { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
}

/* ---------- Cards ---------- */
.ui-card, .studio-card {
  display: grid; align-content: start; gap: var(--stack-gap);
  min-width: 0; padding: var(--card-pad);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.ui-card--compact { padding: var(--card-pad-compact); gap: var(--space-2); }
.ui-card--flush { padding: 0; gap: 0; overflow: hidden; }
/* Inset group inside a card (preview, option, comparison): a fill, never a second border. */
.ui-well { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-subtle); }
.ui-card--interactive { text-decoration: none; color: inherit; transition: border-color var(--dur-fade); }
.ui-card--interactive:hover { border-color: var(--c-border-strong); }
.ui-card__header, .studio-card-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); min-width: 0; }
.ui-card__header > div, .studio-card-heading > div { display: grid; gap: var(--space-0-5); min-width: 0; }
.ui-card__title, .studio-card-heading h2, .studio-card-heading h3 { font-size: var(--fs-body); line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: var(--ls-section); }
.ui-card__desc, .studio-card-heading p { color: var(--c-muted); font-size: var(--fs-ui); }
.ui-card--flush > .ui-card__header, .ui-card--flush > .studio-card-heading { padding: var(--card-pad) var(--card-pad) var(--space-3); }

/* Metric card. */
.ui-metric, .studio-metric {
  display: grid; align-content: start; gap: var(--space-1);
  min-width: 0; padding: var(--card-pad-compact) var(--card-pad);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
}
.ui-metric__label, .studio-metric-label { color: var(--c-muted); font-size: var(--fs-ui); font-weight: var(--fw-medium); }
.ui-metric__value, .studio-metric-value {
  font-size: var(--fs-metric); line-height: var(--lh-tight); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title); font-variant-numeric: tabular-nums;
}
.ui-metric__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--space-5); color: var(--c-muted); font-size: var(--fs-meta); }

/* ---------- Lists and rows ---------- */
.ui-list, .studio-list { display: grid; min-width: 0; }
.ui-row, .studio-list-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--row-h); min-width: 0; padding: var(--space-2) 0;
  border: 0; border-top: 1px solid var(--c-border); background: none;
  color: inherit; text-decoration: none; text-align: left; width: 100%;
}
.ui-list > :first-child, .studio-list > :first-child { border-top: 0; }
a.ui-row:hover, button.ui-row:hover, a.studio-list-row:hover, button.studio-list-row:hover { background: var(--c-subtle); }
.ui-card--flush .ui-row, .ui-card--flush .studio-list-row { padding-inline: var(--card-pad); }
.ui-row__icon, .studio-list-icon {
  display: grid; place-items: center; flex: none;
  width: var(--space-8); height: var(--space-8);
  border-radius: var(--radius-md); background: var(--c-subtle); color: var(--c-muted);
}
.ui-row__icon .studio-icon, .studio-list-icon .studio-icon { width: var(--icon); height: var(--icon); }
.ui-row__copy, .studio-list-copy { display: grid; min-width: 0; flex: 1; }
.ui-row__title, .studio-list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); font-weight: var(--fw-medium); }
.ui-row__desc, .studio-list-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); font-size: var(--fs-ui); }
.ui-row__trailing { flex: none; color: var(--c-muted); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.studio-chevron { width: var(--icon); height: var(--icon); color: var(--c-faint); }

/* ---------- Tables ---------- */
.ui-table-wrap { overflow-x: auto; min-width: 0; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); }
.ui-table-wrap table, .ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.ui-table-wrap th, .ui-table th {
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--c-border); background: var(--c-subtle);
  color: var(--c-muted); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-align: left; white-space: nowrap;
}
.ui-table-wrap td, .ui-table td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--c-border); vertical-align: top; }
.ui-table-wrap tbody tr:first-child td, .ui-table tbody tr:first-child td { border-top: 0; }
.ui-table-wrap tbody tr:hover td, .ui-table tbody tr:hover td { background: var(--c-subtle); }
/* Inside a card a table drops its own frame and lines up with the card's inner edge. */
.ui-card .ui-table-wrap { border: 0; border-radius: 0; }
.ui-card .ui-table-wrap th { background: none; }
.ui-card .ui-table-wrap :is(th, td):first-child { padding-left: 0; }
.ui-card .ui-table-wrap :is(th, td):last-child { padding-right: 0; }

/* ---------- Buttons ---------- */
.ui-button, .studio-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  min-height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-md);
  background: var(--c-surface); color: var(--c-ink);
  font-size: var(--fs-ui); font-weight: var(--fw-medium); line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-quick), border-color var(--dur-quick);
}
.ui-button .studio-icon, .studio-button .studio-icon { width: var(--icon); height: var(--icon); }
.ui-button:hover, .studio-button:hover { background: var(--c-subtle); }
.ui-button:active, .studio-button:active { background: var(--c-hover); }
.ui-button:disabled, .studio-button:disabled, .ui-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ui-button--primary, .studio-button--primary, .ui-button.is-primary {
  background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent);
}
.ui-button--primary:hover, .studio-button--primary:hover, .ui-button.is-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.ui-button--primary:active, .studio-button--primary:active { background: var(--c-accent-press); border-color: var(--c-accent-press); }
.ui-button--ghost, .studio-button--ghost { background: transparent; border-color: transparent; }
.ui-button--ghost:hover, .studio-button--ghost:hover { background: var(--c-hover); }
.ui-button--danger, .studio-button--danger { color: var(--c-danger); }
.ui-button--danger:hover, .studio-button--danger:hover { background: var(--c-danger-soft); border-color: var(--c-danger); }
.ui-button--sm { min-height: var(--control-h-sm); padding: 0 var(--space-2); }
/* Buttons keep their own width in grid layouts and follow the container's alignment; only --block fills the row. */
.ui-button { width: fit-content; }
.ui-button--block { width: 100%; }
.ui-icon-button, .studio-icon-button {
  display: inline-grid; place-items: center; flex: none;
  width: var(--control-h); height: var(--control-h); padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--c-muted);
}
.ui-icon-button .studio-icon, .studio-icon-button .studio-icon { width: var(--icon); height: var(--icon); }
.ui-icon-button:hover, .studio-icon-button:hover { background: var(--c-hover); color: var(--c-ink); }
.ui-icon-button--bordered { border-color: var(--c-border-strong); background: var(--c-surface); }

/* ---------- Fields ---------- */
.ui-field, .studio-field { display: grid; gap: var(--field-gap); min-width: 0; }
.ui-field__label, .studio-field-label { font-size: var(--fs-ui); font-weight: var(--fw-medium); color: var(--c-ink); }
.ui-field__help, .studio-field-helper { color: var(--c-muted); font-size: var(--fs-meta); line-height: var(--lh-ui); }
.ui-field__error { color: var(--c-danger); font-size: var(--fs-meta); }
/* Field children use :where() so components can restyle an inner input without a specificity fight. */
.ui-input,
:where(.ui-field, .studio-field) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  width: 100%; min-width: 0; min-height: var(--field-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-md);
  background: var(--c-surface); color: var(--c-ink);
  font-size: var(--fs-input); line-height: var(--lh-ui);
  transition: border-color var(--dur-quick), box-shadow var(--dur-quick);
}
textarea.ui-input, :where(.ui-field, .studio-field) textarea {
  padding: var(--space-2) var(--space-3); resize: none; field-sizing: content; min-height: calc(var(--field-h) * 2); max-height: calc(var(--field-h) * 8);
}
select.ui-input, :where(.ui-field, .studio-field) select { padding-right: var(--space-8); }
.ui-input:hover, :where(.ui-field, .studio-field) :where(input, select, textarea):hover { border-color: var(--c-faint); }
.ui-input:focus, :where(.ui-field, .studio-field) :where(input, select, textarea):focus {
  outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring);
}
.ui-input:disabled, :where(.ui-field, .studio-field) :where(input, select, textarea):disabled { background: var(--c-subtle); color: var(--c-muted); }
:where(.ui-field, .studio-field) :where(input, select, textarea)::placeholder, .ui-input::placeholder { color: var(--c-faint); }
.ui-field[aria-invalid="true"] :is(input, select, textarea), .ui-field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--c-danger); }
.ui-check { display: flex; align-items: flex-start; gap: var(--space-2); min-height: var(--space-6); font-size: var(--fs-body); }
.ui-check input { width: var(--icon); height: var(--icon); margin: var(--space-0-5) 0 0; accent-color: var(--c-accent); flex: none; }
.ui-form { display: grid; gap: var(--space-4); min-width: 0; }
.ui-form > .ui-button, form > .ui-button, form > .studio-button { justify-self: start; }
.ui-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--control-gap); }

/* Switch. */
.ui-switch {
  position: relative; flex: none; width: var(--space-10); height: var(--space-6);
  padding: 0; border: 0; border-radius: var(--radius-full); background: var(--c-border-strong);
  transition: background var(--dur-fade);
}
.ui-switch::after {
  content: ""; position: absolute; top: var(--space-0-5); left: var(--space-0-5);
  width: var(--space-5); height: var(--space-5); border-radius: 50%;
  background: var(--c-surface); box-shadow: 0 1px 2px rgba(18, 18, 24, 0.24);
  transition: transform var(--dur-fade);
}
.ui-switch[aria-checked="true"] { background: var(--c-accent); }
.ui-switch[aria-checked="true"]::after { transform: translateX(var(--space-4)); }
.ui-switch:disabled { opacity: 0.5; }

/* ---------- Tabs and segmented controls ---------- */
.ui-tabs, .studio-segmented-tabs {
  display: inline-flex; align-items: center; gap: var(--space-0-5);
  padding: var(--space-0-5); border: 1px solid var(--c-border); border-radius: var(--radius-md);
  background: var(--c-subtle); max-width: 100%; overflow-x: auto;
}
.ui-tab, .studio-segmented-tabs :is(button, a) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  min-height: var(--tab-h); padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none;
  color: var(--c-muted); font-size: var(--fs-ui); font-weight: var(--fw-medium);
  text-decoration: none; white-space: nowrap;
}
.ui-tab:hover, .studio-segmented-tabs :is(button, a):hover { color: var(--c-ink); }
.ui-tab[aria-selected="true"], .ui-tab[aria-pressed="true"], .ui-tab[aria-current="page"],
.studio-segmented-tabs :is(button, a):is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) {
  background: var(--c-surface); border-color: var(--c-border); color: var(--c-ink);
}

/* ---------- Badges, chips, deltas ---------- */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--space-5); padding: 0 var(--space-1-5);
  border-radius: var(--radius-sm); background: var(--c-subtle); color: var(--c-muted);
  font-size: var(--fs-meta); font-weight: var(--fw-medium); white-space: nowrap; width: fit-content;
}
.ui-badge--accent { background: var(--c-accent-soft); color: var(--c-accent-text); }
.ui-badge--success { background: var(--c-success-soft); color: var(--c-success); }
.ui-badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.ui-badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.studio-pro-badge .studio-icon { width: var(--fs-meta); height: var(--fs-meta); }
.studio-delta {
  display: inline-flex; align-items: center; min-height: var(--space-5); padding: 0 var(--space-1-5);
  border-radius: var(--radius-sm); font-size: var(--fs-meta); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums; background: var(--c-subtle); color: var(--c-muted);
}
.studio-delta--positive { background: var(--c-success-soft); color: var(--c-success); }
.studio-delta--negative { background: var(--c-danger-soft); color: var(--c-danger); }
.ui-chip, .studio-chip {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  min-height: var(--control-h-sm); padding: 0 var(--space-3);
  border: 1px solid var(--c-border); border-radius: var(--radius-full);
  background: var(--c-surface); color: var(--c-ink);
  font-size: var(--fs-ui); font-weight: var(--fw-medium); white-space: nowrap;
}
.ui-chip[aria-pressed="true"], .studio-chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }

/* Status dot. */
.ui-status {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  color: var(--c-muted); font-size: var(--fs-ui); font-weight: var(--fw-medium); white-space: nowrap;
}
.ui-status::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--c-faint); }
.ui-status.is-live { color: var(--c-success); }
.ui-status.is-live::before { background: var(--c-success); }
.ui-status.is-attention { color: var(--c-danger); }
.ui-status.is-attention::before { background: var(--c-danger); }

/* Progress. */
.ui-progress, .studio-progress-track { height: var(--space-1-5); border-radius: var(--radius-full); background: var(--c-subtle); overflow: hidden; }
.ui-progress > span, .studio-progress-track > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-accent); }

/* ---------- Empty state ---------- */
.ui-empty, .studio-empty-state {
  display: grid; justify-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-4); text-align: center; color: var(--c-muted);
}
.ui-empty .studio-icon, .studio-empty-state .studio-icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--c-faint); }
.ui-empty h3, .studio-empty-state h3 { color: var(--c-ink); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.ui-empty p, .studio-empty-state p { max-width: var(--prose-max); font-size: var(--fs-ui); }
.ui-empty > :last-child:is(a, button), .studio-empty-state > :last-child:is(a, button, div) { margin-top: var(--space-2); }

/* ---------- Sheets and dialogs ---------- */
.ui-sheet, .studio-sheet {
  width: min(var(--sheet-w), calc(100vw - 2 * var(--space-4)));
  max-height: min(calc(100dvh - 2 * var(--space-8)), var(--sheet-max-h));
  padding: 0; margin: auto;
  border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  background: var(--c-surface); color: var(--c-ink);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.ui-sheet[open], .studio-sheet[open] { display: flex; flex-direction: column; }
.ui-sheet--wide { width: min(var(--sheet-w-wide), calc(100vw - 2 * var(--space-4))); }
.ui-sheet::backdrop, .studio-sheet::backdrop { background: var(--c-backdrop); }
.ui-sheet__grabber, .studio-sheet-grabber { display: none; }
.ui-sheet__header, .studio-sheet-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--c-border);
}
.ui-sheet__header > div, .studio-sheet-header > div { display: grid; gap: var(--space-0-5); min-width: 0; }
.ui-sheet__title, .studio-sheet-header h2 { font-size: var(--fs-section); font-weight: var(--fw-semibold); letter-spacing: var(--ls-section); line-height: var(--lh-tight); }
.ui-sheet__desc, .studio-sheet-header p { color: var(--c-muted); font-size: var(--fs-ui); }
.ui-sheet__body, .studio-sheet-body { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-4); overflow-y: auto; min-height: 0; flex: 1; }
.ui-sheet__footer, .studio-sheet-footer {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--control-gap);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--c-border); background: var(--c-surface);
}
@media (max-width: 767px) {
  .ui-sheet, .studio-sheet {
    width: 100%; max-width: 100%; max-height: calc(100dvh - var(--space-8));
    margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
    padding-bottom: var(--safe-bottom);
  }
  .ui-sheet__grabber, .studio-sheet-grabber {
    display: block; flex: none; width: var(--space-10); height: var(--space-1);
    margin: var(--space-2) auto 0; border-radius: var(--radius-full); background: var(--c-border-strong);
  }
}

/* Menus (details-based popovers). */
.ui-menu {
  position: absolute; z-index: 50; display: grid; gap: var(--space-0-5);
  min-width: var(--menu-min); padding: var(--space-1);
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
  background: var(--c-surface); box-shadow: var(--shadow-overlay);
}
.ui-menu :is(button, a) {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--c-ink); font-size: var(--fs-ui); text-align: left; text-decoration: none; white-space: nowrap;
}
.ui-menu :is(button, a):hover:not(:disabled) { background: var(--c-subtle); }
.ui-menu :is(button, a):disabled { color: var(--c-faint); cursor: not-allowed; }
.ui-menu .is-danger { color: var(--c-danger); }

/* ---------- Toast ---------- */
.ui-toast-region, .studio-toast-region {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-3)); z-index: 60;
  transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2 * var(--space-4));
}
.studio-toast {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--c-ink); color: var(--c-surface);
  box-shadow: var(--shadow-overlay); font-size: var(--fs-ui);
}
.studio-toast-check { display: grid; place-items: center; color: var(--c-success-soft); }
.studio-toast-check .studio-icon { width: var(--icon); height: var(--icon); }
.studio-toast-action {
  margin-left: var(--space-2); padding: var(--space-1) var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.14);
  color: var(--c-surface); font-size: var(--fs-ui); font-weight: var(--fw-semibold);
}
@media (min-width: 768px) {
  .ui-toast-region, .studio-toast-region { bottom: var(--space-6); }
}

/* ---------- Help launcher ---------- */
.ui-help-fab, .studio-help-fab {
  position: fixed; right: var(--space-4); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-3)); z-index: 45;
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
  border: 1px solid var(--c-border-strong); border-radius: 50%;
  background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-overlay);
}
.ui-help-fab .studio-icon, .studio-help-fab .studio-icon { width: var(--icon-lg); height: var(--icon-lg); }
body:has(dialog[open]) :is(.ui-help-fab, .studio-help-fab) { display: none; }
@media (min-width: 768px) {
  .ui-help-fab, .studio-help-fab { right: var(--space-6); bottom: var(--space-6); width: var(--space-10); height: var(--space-10); }
}

/* ---------- Device frame: the iPhone around every phone preview ---------- */
/* The iframe renders at a real phone width (width/height attributes) and scales to the frame via --preview-scale. */
.ui-device {
  --preview-scale: 0.7;
  position: relative; display: grid; justify-items: start; align-items: start; overflow: hidden;
  box-sizing: content-box; justify-self: center;
  width: min(calc(100% - 2 * var(--space-3)), var(--preview-phone-w)); aspect-ratio: 390 / 844;
  border: var(--space-2-5) solid var(--c-ink); border-radius: var(--preview-phone-radius); background: var(--c-ink);
}
.ui-device::after {
  content: ""; position: absolute; z-index: 1; top: var(--space-2); left: 50%;
  width: var(--preview-notch-w); height: var(--space-5); border-radius: var(--radius-full); background: var(--c-ink); transform: translateX(-50%);
}
.ui-device > iframe { display: block; flex: none; max-width: none; border: 0; background: var(--c-surface); transform: scale(var(--preview-scale)); transform-origin: top left; }

/* ---------- Avatar ---------- */
.ui-avatar, .studio-avatar {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  width: var(--space-8); height: var(--space-8); border-radius: 50%;
  background: var(--c-subtle); color: var(--c-muted);
  font-size: var(--fs-meta); font-weight: var(--fw-semibold);
}
.ui-avatar img, .studio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar--sm, .studio-avatar--small { width: var(--space-6); height: var(--space-6); }

/* ---------- Startup ---------- */
.studio-startup {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 100dvh; color: var(--c-muted); font-size: var(--fs-ui);
}
.studio-startup-mark { width: var(--icon); height: var(--icon); border: 2px solid var(--c-border-strong); border-top-color: var(--c-accent); border-radius: 50%; animation: ui-spin calc(var(--dur-layout) * 4) linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}