/*
 * Sairik Labs UI system.
 *
 * Loaded last by both hosts and scoped to `@layer system`, which is declared
 * after `overrides` in tokens.css. That makes this file the single place where
 * shared component behaviour is decided, without having to unpick the legacy
 * per-page stylesheets first.
 *
 * Sections
 *   01 Element rhythm
 *   02 Layout shells and containers
 *   03 Typography
 *   04 Buttons and links
 *   05 Forms
 *   06 Surfaces: card, panel, section
 *   07 Status: badge, alert, toast, inline message
 *   08 Data: table, toolbar, pagination, stat, chart
 *   09 Navigation: tabs, segmented, breadcrumb, menu
 *   10 Overlays: dialog, drawer, popover, tooltip
 *   11 States: empty, loading, skeleton, error
 *   12 Marketing chrome
 *   13 Application chrome
 *   14 Utilities
 */

@layer system {
  /* ==================================================================== *
   * 01 Element rhythm
   * ==================================================================== */

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--lh-body);
    letter-spacing: var(--tracking-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Working surfaces read at 14px so a table row, a form label and a menu
     item can share one grid without any of them shouting. */
  .shell-app-body,
  .workspace-page-body,
  .surface-app {
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
  }

  ::selection {
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
  }

  /* One focus treatment everywhere. Never remove it without replacing it. */
  :focus-visible {
    outline: var(--ring-width) solid var(--color-focus);
    outline-offset: var(--ring-offset);
    border-radius: var(--r-xs);
  }
  :focus:not(:focus-visible) {
    outline: none;
  }

  .ui-icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    font-size: 1rem;
  }

  hr {
    height: 1px;
    margin: var(--sp-6) 0;
    border: 0;
    background: var(--color-divider);
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  :is(.shell-app-body, .workspace-page-body, .surface-app) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  :is(.shell-app-body, .workspace-page-body, .surface-app) ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--r-pill);
    background: var(--color-border-strong);
    background-clip: content-box;
  }
  :is(.shell-app-body, .workspace-page-body, .surface-app) ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-faint);
    background-clip: content-box;
  }
  :is(.shell-app-body, .workspace-page-body, .surface-app) ::-webkit-scrollbar-track {
    background: transparent;
  }

  /* ==================================================================== *
   * 02 Layout shells and containers
   * ==================================================================== */

  /* `.shell` is the horizontal container. It caps reading width on very
     wide displays instead of letting lines run to 2000px. */
  .shell {
    width: 100%;
    max-width: var(--shell-content-max);
    margin-inline: auto;
    padding-inline: var(--shell-gutter);
  }
  .shell.is-wide {
    max-width: var(--shell-wide-max);
  }
  .shell.is-prose {
    max-width: var(--shell-prose-max);
  }

  .shell-public {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background: var(--color-canvas);
  }
  .shell-public > main {
    min-width: 0;
  }

  .shell-focus {
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    min-height: 100dvh;
    padding: var(--sp-6) var(--shell-gutter) var(--sp-16);
    background:
      radial-gradient(120% 70% at 50% -10%, var(--color-brand-faint), transparent 60%),
      var(--color-canvas);
  }
  .shell-focus > main {
    display: grid;
    align-content: center;
    width: min(100%, 26rem);
  }

  /* Application shell: fixed sidebar, fixed topbar, one scrolling region.
     The page itself never scrolls, so the chrome cannot drift away. */
  .shell-app.workspace-shell,
  .workspace-shell.shell-app {
    display: grid;
    grid-template-columns: var(--shell-sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--shell-topbar-h) minmax(0, 1fr);
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: var(--color-canvas);
  }

  .shell-app > .workspace-sidebar,
  .shell-app > .app-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .shell-app > .dashboard-header,
  .shell-app > .app-topbar {
    grid-area: topbar;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: var(--shell-topbar-h);
    min-height: var(--shell-topbar-h);
    padding-inline: var(--sp-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .shell-app > .workspace-main,
  .shell-app > .app-main {
    grid-area: main;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: auto;
    scroll-padding-top: var(--sp-4);
  }

  .shell-app > .workspace-mobile-nav,
  .shell-app > .app-mobilenav {
    display: none;
    grid-area: mobilenav;
  }

  @media (max-width: 64rem) {
    .shell-app.workspace-shell,
    .workspace-shell.shell-app {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--shell-topbar-h) minmax(0, 1fr) auto;
      grid-template-areas:
        "topbar"
        "main"
        "mobilenav";
    }
    .shell-app > .workspace-sidebar,
    .shell-app > .app-sidebar {
      display: none;
    }
    .shell-app > .workspace-mobile-nav,
    .shell-app > .app-mobilenav {
      display: flex;
      height: calc(var(--shell-mobilenav-h) + env(safe-area-inset-bottom, 0px));
    }
  }

  /* The standard page body inside the app shell. Content is capped so a
     34-inch display shows a readable column, not a stretched one. */
  .ui-page {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    width: 100%;
    max-width: var(--shell-wide-max);
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-5) var(--sp-16);
  }
  @media (max-width: 48rem) {
    .ui-page {
      gap: var(--sp-5);
      padding: var(--sp-4) var(--sp-4) var(--sp-12);
    }
  }

  .ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .ui-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
  }
  .ui-row.is-between {
    justify-content: space-between;
  }
  .ui-spacer {
    flex: 1 1 auto;
  }

  /* Responsive column set. `--min` is the point at which a column may no
     longer hold its content, so the grid rewraps rather than squeezing. */
  .ui-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr));
  }

  /* ==================================================================== *
   * 03 Typography
   * ==================================================================== */

  .ui-display {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }
  .ui-h1,
  .ui-page-title {
    margin: 0;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
  }
  .ui-h2 {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
  }
  .ui-h3 {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
  }
  .ui-h4 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
  }
  .ui-lede {
    margin: 0;
    max-width: var(--measure-lede);
    color: var(--color-text-secondary);
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
  }
  .ui-body {
    margin: 0;
    max-width: var(--measure-reading);
    line-height: var(--lh-body);
  }
  .ui-small {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }
  .ui-caption {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }
  .ui-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-control);
    letter-spacing: var(--tracking-label);
  }

  /* Section eyebrow. Small caps carry the label role without needing a
     heavier weight or a colour block. */
  .eyebrow,
  .ui-eyebrow {
    display: inline-block;
    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-control);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* Numeric data. Tabular figures keep columns aligned and make deltas
     scannable without extra rules or separators. */
  .ui-num,
  .ui-metric-value,
  [data-numeric] {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: var(--numeric-features);
    letter-spacing: -0.01em;
  }

  .ui-prose {
    max-width: var(--measure-reading);
    line-height: var(--lh-relaxed);
  }
  .ui-prose > * + * {
    margin-top: var(--sp-4);
  }
  .ui-prose :is(h2, h3, h4) {
    margin-top: var(--sp-10);
    margin-bottom: var(--sp-3);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
  }
  .ui-prose h2 {
    font-size: var(--fs-2xl);
  }
  .ui-prose h3 {
    font-size: var(--fs-xl);
  }
  .ui-prose a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  .ui-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ui-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* ==================================================================== *
   * 04 Buttons and links
   * ==================================================================== */

  /*
   * Three levels of emphasis, and only one primary per view:
   *   primary    the single action the page exists for
   *   secondary  bordered, for real but non-defining actions
   *   ghost      toolbar and row-level actions
   * `danger` is a modifier on any level, not a fourth level.
   */
  .ui-btn,
  .button,
  .ui-button {
    --_bg: var(--color-action);
    --_fg: var(--color-action-text);
    --_bd: var(--color-action);
    --_h: var(--control-h-lg);
    --_px: var(--sp-4);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--_h);
    padding: 0 var(--_px);
    border: 1px solid var(--_bd);
    border-radius: var(--r-control);
    background: var(--_bg);
    color: var(--_fg);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-control);
    letter-spacing: var(--tracking-label);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }
  .ui-btn .ui-icon,
  .button .ui-icon,
  .ui-button .ui-icon {
    font-size: 1.0625em;
    margin-inline: -0.1em;
  }
  .ui-btn:hover,
  .button:hover,
  .ui-button:hover {
    --_bg: var(--color-action-hover);
    --_bd: var(--color-action-hover);
  }
  .ui-btn:active,
  .button:active,
  .ui-button:active {
    transform: translateY(0.5px);
  }
  .ui-btn:disabled,
  .ui-btn[aria-disabled="true"],
  .button:disabled,
  .button[aria-disabled="true"],
  .ui-button:disabled {
    opacity: 0.45;
    pointer-events: none;
  }

  .ui-btn.is-secondary,
  .ui-btn.secondary,
  .button.outline,
  .ui-button.is-outline {
    --_bg: var(--color-surface);
    --_fg: var(--color-text);
    --_bd: var(--color-control-border);
  }
  .ui-btn.is-secondary:hover,
  .ui-btn.secondary:hover,
  .button.outline:hover,
  .ui-button.is-outline:hover {
    --_bg: var(--color-surface-hover);
    --_bd: var(--color-control-border-hover);
  }

  .ui-btn.is-ghost,
  .button.ghost,
  .ui-button.is-ghost {
    --_bg: transparent;
    --_fg: var(--color-text-secondary);
    --_bd: transparent;
  }
  .ui-btn.is-ghost:hover,
  .button.ghost:hover,
  .ui-button.is-ghost:hover {
    --_bg: var(--color-surface-hover);
    --_fg: var(--color-text);
    --_bd: transparent;
  }

  .ui-btn.is-brand,
  .button.brand {
    --_bg: var(--color-brand);
    --_fg: var(--color-text-inverse);
    --_bd: var(--color-brand);
  }
  .ui-btn.is-brand:hover,
  .button.brand:hover {
    --_bg: var(--color-brand-strong);
    --_bd: var(--color-brand-strong);
  }

  .ui-btn.is-danger,
  .button.danger,
  .ui-button.is-danger {
    --_bg: var(--color-danger-fg);
    --_fg: var(--color-text-inverse);
    --_bd: var(--color-danger-fg);
  }
  .ui-btn.is-danger:hover,
  .button.danger:hover {
    --_bg: oklch(38% 0.16 26);
    --_bd: oklch(38% 0.16 26);
  }
  /* A destructive action offered as a secondary control still has to look
     destructive, or the confirm dialog is the first warning the user gets. */
  .ui-btn.is-danger.is-secondary,
  .button.danger.outline {
    --_bg: var(--color-surface);
    --_fg: var(--color-danger-fg);
    --_bd: var(--color-danger-line);
  }
  .ui-btn.is-danger.is-secondary:hover,
  .button.danger.outline:hover {
    --_bg: var(--color-danger-bg);
    --_bd: var(--color-danger-fg);
  }

  .ui-btn.is-xs,
  .button.tiny {
    --_h: var(--control-h-xs);
    --_px: var(--sp-2);
    font-size: var(--fs-xs);
  }
  .ui-btn.is-sm,
  .button.small,
  .ui-button.is-sm {
    --_h: var(--control-h-sm);
    --_px: var(--sp-3);
    font-size: var(--fs-sm);
  }
  .ui-btn.is-md {
    --_h: var(--control-h-md);
    --_px: var(--sp-3);
  }
  .ui-btn.is-lg,
  .button.large,
  .ui-button.is-lg {
    --_h: var(--control-h-xl);
    --_px: var(--sp-6);
    font-size: var(--fs-md);
  }
  .ui-btn.is-full,
  .button.full,
  .ui-button.is-full {
    width: 100%;
  }

  /* Square control for icon-only actions. Keeps the 24px hit target rule
     without inheriting the text button's horizontal padding. */
  .ui-icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--control-h-md);
    height: var(--control-h-md);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }
  .ui-icon-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .ui-icon-btn .ui-icon {
    font-size: 1.0625rem;
  }
  .ui-icon-btn.is-sm {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
  }
  .ui-icon-btn.is-bordered {
    border-color: var(--color-control-border);
    background: var(--color-surface);
  }

  /* Busy state for any action that starts server work. The label stays in
     place so the button does not resize mid-click. */
  .ui-btn[data-busy="true"],
  .button[data-busy="true"] {
    color: transparent !important;
    pointer-events: none;
  }
  .ui-btn[data-busy="true"]::after,
  .button[data-busy="true"]::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid color-mix(in oklab, var(--_fg) 35%, transparent);
    border-top-color: var(--_fg);
    border-radius: 50%;
    animation: ui-spin 0.6s linear infinite;
  }

  @keyframes ui-spin {
    to {
      transform: rotate(1turn);
    }
  }

  .ui-link {
    color: var(--color-link);
    text-decoration: none;
    text-underline-offset: 0.2em;
  }
  .ui-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  /* Trailing arrow that leans out on hover. Used for "read more" style
     links where a full button would be too much weight. */
  .ui-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-link);
    font-weight: var(--fw-medium);
    text-decoration: none;
  }
  .ui-link-arrow .ui-icon {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .ui-link-arrow:hover .ui-icon {
    transform: translateX(2px);
  }

  /* ==================================================================== *
   * 05 Forms
   * ==================================================================== */

  .ui-field {
    display: grid;
    gap: var(--sp-half);
    min-width: 0;
  }
  .ui-field > label,
  .ui-field > .ui-field-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-control);
  }
  /* Required is marked on the label, not by an asterisk floating in the
     placeholder where it disappears the moment someone types. */
  .ui-field.is-required > label::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-danger-fg);
  }
  .ui-field .ui-field-optional {
    margin-left: auto;
    color: var(--color-text-faint);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
  }
  .ui-field .hint,
  .ui-field .ui-field-hint {
    margin: var(--sp-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }
  .ui-field .error,
  .ui-field .ui-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-1);
    margin: var(--sp-1) 0 0;
    color: var(--color-danger-fg);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }

  .ui-input,
  .ui-textarea,
  .ui-select,
  .ui-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .ui-field textarea,
  .ui-field select {
    width: 100%;
    min-height: var(--control-h-lg);
    padding: 0 var(--sp-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--r-control);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: var(--lh-control);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }
  .ui-textarea,
  .ui-field textarea {
    min-height: 6rem;
    padding: var(--sp-3);
    line-height: var(--lh-body);
    resize: vertical;
  }
  :is(.ui-input, .ui-textarea, .ui-select, .ui-field input, .ui-field textarea, .ui-field select)::placeholder {
    color: var(--color-text-faint);
  }
  :is(.ui-input, .ui-textarea, .ui-select, .ui-field input, .ui-field textarea, .ui-field select):hover:not(:disabled) {
    border-color: var(--color-control-border-hover);
  }
  :is(.ui-input, .ui-textarea, .ui-select, .ui-field input, .ui-field textarea, .ui-field select):focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: var(--focus-ring);
  }
  :is(.ui-input, .ui-textarea, .ui-select, .ui-field input, .ui-field textarea, .ui-field select):disabled {
    border-color: var(--color-control-border-disabled);
    background: var(--color-surface-sunken);
    color: var(--color-text-faint);
    cursor: not-allowed;
  }
  /* Readonly stays readable: the value still matters, only editing is off. */
  :is(.ui-input, .ui-textarea, .ui-field input, .ui-field textarea)[readonly] {
    border-color: transparent;
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
  }
  .ui-field.is-invalid :is(input, textarea, select),
  :is(.ui-input, .ui-textarea, .ui-select)[aria-invalid="true"] {
    border-color: var(--color-danger-fg);
  }
  .ui-field.is-invalid :is(input, textarea, select):focus {
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklab, var(--color-danger-fg) 40%, transparent);
  }
  .ui-field.is-valid :is(input, textarea, select) {
    border-color: var(--color-success-line);
  }

  .ui-select,
  .ui-field select {
    padding-right: var(--sp-8);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
      calc(100% - 17px) calc(50% + 1px),
      calc(100% - 12px) calc(50% + 1px);
    background-size:
      5px 5px,
      5px 5px;
    background-repeat: no-repeat;
    appearance: none;
  }

  .ui-input-group {
    display: flex;
    align-items: stretch;
    min-width: 0;
  }
  .ui-input-group > :is(input, .ui-input) {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: var(--r-control) 0 0 var(--r-control);
  }
  .ui-input-group > :last-child {
    border-radius: 0 var(--r-control) var(--r-control) 0;
    margin-left: -1px;
  }

  /* Search field: the icon sits inside so the control reads as search
     without needing a label above it in a toolbar. */
  .ui-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .ui-search > .ui-icon {
    position: absolute;
    left: var(--sp-3);
    color: var(--color-text-faint);
    pointer-events: none;
    font-size: 0.9375rem;
  }
  .ui-search > input {
    width: 100%;
    min-height: var(--control-h-md);
    padding: 0 var(--sp-3) 0 calc(var(--sp-3) + 1.4rem);
    border: 1px solid var(--color-control-border);
    border-radius: var(--r-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-base);
  }
  .ui-search > input:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: var(--focus-ring);
  }
  .ui-search > input::-webkit-search-cancel-button {
    cursor: pointer;
  }
  .ui-search-clear {
    position: absolute;
    right: var(--sp-1);
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }
  .ui-search-clear:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }

  /* Checkbox and radio: drawn from the control border so they sit in the
     same visual family as inputs rather than the browser default. */
  .ui-check,
  .ui-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sp-2);
    cursor: pointer;
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
  }
  .ui-check input[type="checkbox"],
  .ui-radio input[type="radio"],
  input[type="checkbox"].ui-checkbox,
  input[type="radio"].ui-radio-input {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0.15rem 0 0;
    border: 1px solid var(--color-control-border);
    border-radius: var(--r-xs);
    background: var(--color-surface);
    appearance: none;
    cursor: pointer;
    transition:
      background-color var(--dur-instant) var(--ease-out),
      border-color var(--dur-instant) var(--ease-out);
  }
  .ui-radio input[type="radio"],
  input[type="radio"].ui-radio-input {
    border-radius: 50%;
  }
  :is(.ui-check input, .ui-radio input, input.ui-checkbox, input.ui-radio-input):hover:not(:disabled) {
    border-color: var(--color-control-border-hover);
  }
  :is(.ui-check input, input.ui-checkbox):checked,
  :is(.ui-check input, input.ui-checkbox):indeterminate {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 100%;
  }
  :is(.ui-check input, input.ui-checkbox):indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
  }
  :is(.ui-radio input, input.ui-radio-input):checked {
    border-color: var(--color-brand);
    border-width: 5px;
  }
  :is(.ui-check input, .ui-radio input, input.ui-checkbox, input.ui-radio-input):focus-visible {
    outline: var(--ring-width) solid var(--color-focus);
    outline-offset: var(--ring-offset);
  }
  :is(.ui-check, .ui-radio):has(input:disabled) {
    color: var(--color-text-faint);
    cursor: not-allowed;
  }

  /* Switch is reserved for settings that apply immediately. Anything that
     needs a Save button uses a checkbox. */
  .ui-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
  }
  .ui-switch input {
    position: relative;
    flex: none;
    width: 2.125rem;
    height: 1.25rem;
    margin: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--color-border-strong);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .ui-switch input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--elev-1);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .ui-switch input:checked {
    background: var(--color-brand);
  }
  .ui-switch input:checked::after {
    transform: translateX(0.875rem);
  }
  .ui-switch input:focus-visible {
    outline: var(--ring-width) solid var(--color-focus);
    outline-offset: var(--ring-offset);
  }

  /* Choice cards: a radio group where each option needs a description.
     Used instead of a select whenever the choice has consequences. */
  .ui-choice-group {
    display: grid;
    gap: var(--sp-2);
  }
  .ui-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--color-surface);
    cursor: pointer;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }
  .ui-choice:hover {
    border-color: var(--color-control-border-hover);
  }
  .ui-choice:has(input:checked) {
    border-color: var(--color-brand);
    background: var(--color-brand-faint);
  }
  .ui-choice-body {
    display: grid;
    gap: var(--sp-half);
    min-width: 0;
  }
  .ui-choice-body strong {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
  }
  .ui-choice-body small {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }

  /* Fieldsets group related inputs so a long form reads as a few decisions
     rather than thirty boxes. */
  .ui-fieldset {
    display: grid;
    gap: var(--sp-4);
    padding: 0;
    margin: 0;
    border: 0;
  }
  .ui-fieldset > legend,
  .ui-fieldset-head {
    display: grid;
    gap: var(--sp-1);
    padding: 0;
    margin-bottom: var(--sp-1);
  }
  .ui-fieldset-head strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
  }
  .ui-fieldset-head small {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }
  .ui-form-section + .ui-form-section {
    margin-top: var(--sp-8);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--color-divider);
  }
  .ui-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
  }
  /* Cancel sits to the left of Save on wide screens and below it on narrow
     ones, so the primary action is always the last thing under the thumb. */
  @media (max-width: 30rem) {
    .ui-form-actions {
      flex-direction: column-reverse;
      align-items: stretch;
    }
  }

  /* File input / dropzone */
  .ui-dropzone {
    display: grid;
    place-items: center;
    gap: var(--sp-2);
    padding: var(--sp-10) var(--sp-6);
    border: 1px dashed var(--color-control-border);
    border-radius: var(--r-lg);
    background: var(--color-surface-sunken);
    text-align: center;
    cursor: pointer;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }
  .ui-dropzone:hover,
  .ui-dropzone.is-over {
    border-color: var(--color-brand);
    background: var(--color-brand-faint);
  }
  .ui-dropzone .ui-icon {
    font-size: 1.5rem;
    color: var(--color-text-muted);
  }
  .ui-dropzone strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
  }
  .ui-dropzone small {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }

  /* ==================================================================== *
   * 06 Surfaces
   * ==================================================================== */

  /*
   * A card is for a repeated object in a collection. A panel is for a
   * region of one page. Neither is a way to add a border for its own sake,
   * and neither nests inside the other.
   */
  .ui-card,
  .ui-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--r-card);
    background: var(--color-surface);
  }
  .ui-card > * ,
  .ui-panel > * {
    min-width: 0;
  }
  .ui-card.is-interactive {
    text-decoration: none;
    color: inherit;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }
  .ui-card.is-interactive:hover {
    border-color: var(--color-control-border-hover);
    background: var(--color-surface-hover);
  }
  .ui-card.is-flat,
  .ui-panel.is-flat {
    border-color: transparent;
    background: var(--color-surface-sunken);
  }

  .ui-panel-head,
  .ui-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-divider);
  }
  .ui-panel-head-title {
    display: grid;
    gap: var(--sp-half);
    min-width: 0;
  }
  .ui-panel-head-title strong,
  .ui-panel-head h2,
  .ui-panel-head h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-heading);
  }
  .ui-panel-head-title small,
  .ui-panel-head p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }
  .ui-panel-head-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
  }
  .ui-panel-body {
    padding: var(--sp-5);
  }
  .ui-panel-body.is-flush {
    padding: 0;
  }
  .ui-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--color-divider);
    background: var(--color-surface-sunken);
    border-radius: 0 0 var(--r-card) var(--r-card);
  }

  /* Page header. Title, one-line purpose, and the page's actions — nothing
     else competes at this level. */
  .ui-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
  }
  .ui-page-head-main {
    display: grid;
    gap: var(--sp-1);
    min-width: 0;
  }
  .ui-page-head-main h1 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
  }
  .ui-page-head-main p {
    margin: 0;
    max-width: 60ch;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
  }
  .ui-page-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }

  /* Section header inside a page. Uses a rule rather than another card
     boundary so nested containers do not pile up. */
  .ui-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: var(--sp-4);
  }
  .ui-section-head h2,
  .ui-section-head h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-heading);
  }
  .ui-section-head-aside {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }

  .ui-divider {
    height: 1px;
    border: 0;
    background: var(--color-divider);
  }

  .ui-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
  }
  .ui-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ui-avatar.is-sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--fs-2xs);
  }
  .ui-avatar.is-lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--fs-base);
  }

  /* ==================================================================== *
   * 07 Status
   * ==================================================================== */

  /*
   * One badge component, four semantic tones plus neutral. Tone is chosen
   * by meaning, never to add colour: neutral is the default and most
   * statuses should stay neutral so the ones that matter stand out.
   */
  .ui-badge,
  .ui-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 1.375rem;
    padding: 0 var(--sp-2);
    border: 1px solid var(--color-neutral-line);
    border-radius: var(--r-badge);
    background: var(--color-neutral-bg);
    color: var(--color-neutral-fg);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .ui-badge.is-success,
  .ui-badge.success {
    border-color: var(--color-success-line);
    background: var(--color-success-bg);
    color: var(--color-success-fg);
  }
  .ui-badge.is-warning,
  .ui-badge.warning {
    border-color: var(--color-warning-line);
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
  }
  .ui-badge.is-danger,
  .ui-badge.danger {
    border-color: var(--color-danger-line);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
  }
  .ui-badge.is-info,
  .ui-badge.info {
    border-color: var(--color-info-line);
    background: var(--color-info-bg);
    color: var(--color-info-fg);
  }
  .ui-badge.is-brand {
    border-color: var(--color-brand-border);
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
  }
  .ui-badge.is-strong {
    border-color: transparent;
    background: var(--color-text);
    color: var(--color-text-inverse);
  }

  /* Status dot: for row-level state where a full badge would add too much
     ink to every line of a table. */
  .ui-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    white-space: nowrap;
  }
  .ui-dot::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-neutral-fg);
  }
  .ui-dot.is-success::before {
    background: var(--color-success-fg);
  }
  .ui-dot.is-warning::before {
    background: var(--color-warning-fg);
  }
  .ui-dot.is-danger::before {
    background: var(--color-danger-fg);
  }
  .ui-dot.is-info::before {
    background: var(--color-info-fg);
  }
  .ui-dot.is-muted::before {
    background: var(--color-text-faint);
  }
  /* A live process gets a pulse; a settled state does not. */
  .ui-dot.is-live::before {
    background: var(--color-info-fg);
    animation: ui-pulse 1.8s var(--ease-in-out) infinite;
  }
  @keyframes ui-pulse {
    0%,
    100% {
      opacity: 1;
      box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-info-fg) 45%, transparent);
    }
    60% {
      opacity: 0.8;
      box-shadow: 0 0 0 4px transparent;
    }
  }

  /* Alert: a message about the page. Toast: a message about what just
     happened. They are not interchangeable. */
  .ui-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-neutral-line);
    border-radius: var(--r-md);
    background: var(--color-neutral-bg);
    color: var(--color-text);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
  }
  .ui-alert > .ui-icon {
    margin-top: 0.1em;
    font-size: 1.0625rem;
    color: var(--color-neutral-fg);
  }
  .ui-alert-body {
    display: grid;
    gap: var(--sp-1);
    min-width: 0;
    flex: 1 1 auto;
  }
  .ui-alert-body strong {
    font-weight: var(--fw-semibold);
  }
  .ui-alert-body p {
    margin: 0;
    color: var(--color-text-secondary);
  }
  .ui-alert.is-success {
    border-color: var(--color-success-line);
    background: var(--color-success-bg);
  }
  .ui-alert.is-success > .ui-icon {
    color: var(--color-success-fg);
  }
  .ui-alert.is-warning {
    border-color: var(--color-warning-line);
    background: var(--color-warning-bg);
  }
  .ui-alert.is-warning > .ui-icon {
    color: var(--color-warning-fg);
  }
  .ui-alert.is-danger,
  .ui-inline-error {
    border-color: var(--color-danger-line);
    background: var(--color-danger-bg);
  }
  .ui-alert.is-danger > .ui-icon {
    color: var(--color-danger-fg);
  }
  .ui-alert.is-info {
    border-color: var(--color-info-line);
    background: var(--color-info-bg);
  }
  .ui-alert.is-info > .ui-icon {
    color: var(--color-info-fg);
  }

  .ui-inline-error {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-danger-line);
    border-radius: var(--r-md);
    color: var(--color-danger-fg);
    font-size: var(--fs-base);
  }

  /*
   * Toasts stack in a fixed region anchored to the bottom-right on desktop
   * and the top on mobile, where the bottom edge belongs to navigation.
   * A bare `.toast` rendered by the server before scripts run positions
   * itself, so the message is never lost.
   */
  .toast-region {
    position: fixed;
    z-index: var(--z-toast);
    right: var(--sp-5);
    bottom: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: min(24rem, calc(100vw - 2 * var(--sp-5)));
    pointer-events: none;
  }
  .toast,
  .ui-toast {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: var(--z-toast);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    max-width: min(24rem, calc(100vw - 2 * var(--sp-5)));
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-neutral-fg);
    border-radius: var(--r-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elev-3);
    color: var(--color-text);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    pointer-events: auto;
  }
  .toast-region > .toast {
    position: static;
    max-width: none;
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity var(--dur-normal) var(--ease-out),
      transform var(--dur-normal) var(--ease-out);
  }
  .toast-region > .toast.visible {
    opacity: 1;
    transform: none;
  }
  .toast-region > .toast.leaving {
    opacity: 0;
    transform: translateY(-4px);
  }
  .toast > .ui-icon {
    flex: none;
    margin-top: 0.1em;
    font-size: 1.0625rem;
    color: var(--color-neutral-fg);
  }
  .toast > span {
    flex: 1 1 auto;
    min-width: 0;
  }
  .toast > button {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--color-text-faint);
    cursor: pointer;
  }
  .toast > button:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .toast.success,
  .ui-toast.is-success {
    border-left-color: var(--color-success-fg);
  }
  .toast.success > .ui-icon {
    color: var(--color-success-fg);
  }
  .toast.error,
  .ui-toast.is-danger {
    border-left-color: var(--color-danger-fg);
  }
  .toast.error > .ui-icon {
    color: var(--color-danger-fg);
  }
  .toast.warning,
  .ui-toast.is-warning {
    border-left-color: var(--color-warning-fg);
  }
  .toast.warning > .ui-icon {
    color: var(--color-warning-fg);
  }
  .toast.info > .ui-icon {
    color: var(--color-info-fg);
  }
  @media (max-width: 48rem) {
    .toast-region {
      right: var(--sp-3);
      left: var(--sp-3);
      bottom: auto;
      top: var(--sp-3);
      width: auto;
    }
    .toast,
    .ui-toast {
      right: var(--sp-3);
      left: var(--sp-3);
      bottom: auto;
      top: var(--sp-3);
      max-width: none;
    }
  }

  /* Progress. `--progress` is set inline by whatever owns the value. */
  .ui-progress {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0.375rem;
    border-radius: var(--r-pill);
    background: var(--color-surface-active);
  }
  .ui-progress > :is(i, span, b) {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-brand);
    transition: width var(--dur-normal) var(--ease-out);
  }
  .ui-progress.is-indeterminate > :is(i, span, b) {
    width: 35%;
    animation: ui-indeterminate 1.2s var(--ease-in-out) infinite;
  }
  @keyframes ui-indeterminate {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(320%);
    }
  }

  /* ==================================================================== *
   * 08 Data
   * ==================================================================== */

  /*
   * Tables are the primary interface of the admin console, so they get
   * real attention: a sticky header, hairline row rules instead of zebra
   * striping, a hover tint, right-aligned figures, and an action column
   * that stays reachable while the row scrolls horizontally.
   */
  .ui-table-frame {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--r-card);
    background: var(--color-surface);
  }

  .ui-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--color-divider);
  }
  .ui-table-toolbar .ui-search {
    flex: 1 1 16rem;
    max-width: 22rem;
  }
  .ui-table-toolbar-end {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
  }

  .ui-table-scroll,
  .table-wrap {
    overflow: auto;
    min-width: 0;
    overscroll-behavior-x: contain;
  }

  .ui-table,
  .ui-table-frame table,
  .admin-table-panel table,
  .table-wrap > table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-base);
  }

  :is(.ui-table, .ui-table-frame table, .admin-table-panel table, .table-wrap > table) thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
  }
  :is(.ui-table, .ui-table-frame table, .admin-table-panel table, .table-wrap > table) tbody td {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-text-secondary);
    vertical-align: middle;
  }
  :is(.ui-table, .ui-table-frame table, .admin-table-panel table, .table-wrap > table) tbody tr:last-child td {
    border-bottom: 0;
  }
  :is(.ui-table, .ui-table-frame table, .admin-table-panel table, .table-wrap > table) tbody tr {
    transition: background-color var(--dur-instant) linear;
  }
  :is(.ui-table, .ui-table-frame table, .admin-table-panel table, .table-wrap > table) tbody tr:hover {
    background: var(--color-surface-hover);
  }
  :is(.ui-table, .ui-table-frame table, .admin-table-panel table, .table-wrap > table)
    tbody
    tr:has(input[data-row-select]:checked) {
    background: var(--color-brand-faint);
  }
  /* The first data column is the row's identity; give it the text colour
     and weight that says so. */
  :is(.ui-table, .admin-table-panel table) tbody td:first-of-type,
  :is(.ui-table, .admin-table-panel table) tbody td[data-column]:first-of-type {
    color: var(--color-text);
  }

  .ui-table.is-compact tbody td,
  .ui-table-frame.is-compact tbody td {
    padding: var(--sp-2) var(--sp-3);
  }
  .ui-table.is-relaxed tbody td {
    padding: var(--sp-4) var(--sp-3);
  }

  /* Alignment is a property of the data type, not the column position. */
  :is(.ui-table, .admin-table-panel table) :is(th, td).is-numeric,
  :is(.ui-table, .admin-table-panel table) :is(th, td)[data-align="end"],
  :is(.ui-table, .admin-table-panel table) :is(th, td)[data-column="amount"],
  :is(.ui-table, .admin-table-panel table) :is(th, td)[data-column="price"],
  :is(.ui-table, .admin-table-panel table) :is(th, td)[data-column="credits"],
  :is(.ui-table, .admin-table-panel table) :is(th, td)[data-column="balance"] {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
  }
  :is(.ui-table, .admin-table-panel table) td[data-column="created"],
  :is(.ui-table, .admin-table-panel table) td[data-column="updated"],
  :is(.ui-table, .admin-table-panel table) td[data-column="date"],
  :is(.ui-table, .admin-table-panel table) td[data-column="expires"] {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ui-table th.is-sortable,
  .admin-sort-link {
    color: inherit;
    text-decoration: none;
  }
  .admin-sort-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-1);
    margin: calc(var(--sp-1) * -1) calc(var(--sp-1) * -1);
    border-radius: var(--r-xs);
    color: inherit;
    font: inherit;
  }
  .admin-sort-link:hover {
    background: var(--color-surface-active);
    color: var(--color-text);
  }
  .admin-sort-link .sort-icon {
    font-size: 0.8125rem;
    opacity: 0.5;
  }
  th[aria-sort]:not([aria-sort="none"]) .admin-sort-link {
    color: var(--color-text);
  }
  th[aria-sort]:not([aria-sort="none"]) .sort-icon {
    opacity: 1;
    color: var(--color-brand);
  }

  /* Selection and action columns are chrome, not data: keep them narrow
     and let them stay put while the data scrolls. */
  .admin-select-column,
  .ui-table .is-select-col {
    width: 2.5rem;
    padding-inline: var(--sp-3) 0 !important;
  }
  .admin-actions-column,
  .admin-row-actions,
  .ui-table .is-action-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
  }
  .admin-row-actions {
    position: sticky;
    right: 0;
    background: inherit;
  }
  tbody tr:hover .admin-row-actions {
    background: var(--color-surface-hover);
  }

  /* Identity cell: avatar plus two lines. The pattern used wherever a row
     represents a person or an account. */
  .admin-identity-cell,
  .ui-identity {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }
  .admin-identity-cell > span:last-child,
  .ui-identity-body {
    display: grid;
    gap: 0;
    min-width: 0;
  }
  .admin-identity-cell strong,
  .ui-identity-body strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-identity-cell small,
  .ui-identity-body small {
    color: var(--color-text-muted);
    font-size: var(--fs-2xs);
    line-height: 1.35;
  }
  .admin-identity-cell:hover strong {
    color: var(--color-link);
  }
  .admin-row-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
  }
  .admin-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .admin-email-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 100%;
    padding: var(--sp-1) var(--sp-2);
    margin: calc(var(--sp-1) * -1) calc(var(--sp-2) * -1);
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--fs-base);
    cursor: pointer;
  }
  .admin-email-chip:hover {
    background: var(--color-surface-active);
  }
  .admin-email-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-email-chip .ui-icon {
    flex: none;
    font-size: 0.875rem;
    color: var(--color-text-faint);
  }
  .admin-email-chip .ui-icon.verified {
    color: var(--color-success-fg);
  }
  .admin-email-chip .ui-icon.unverified {
    color: var(--color-warning-fg);
  }

  /* Signed amounts read as a direction, not just a number. */
  .admin-amount {
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: var(--fw-medium);
  }
  .admin-amount.positive {
    color: var(--color-success-fg);
  }
  .admin-amount.negative {
    color: var(--color-danger-fg);
  }

  .ui-table-foot,
  .admin-table-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-top: 1px solid var(--color-divider);
    background: var(--color-surface-sunken);
  }

  /* Below the table breakpoint each row becomes a stacked record using the
     `data-label` already emitted for each cell. */
  @media (max-width: 60rem) {
    .admin-responsive-table table,
    .ui-table.is-responsive {
      display: block;
    }
    .admin-responsive-table thead,
    .ui-table.is-responsive thead {
      display: none;
    }
    .admin-responsive-table tbody,
    .ui-table.is-responsive tbody {
      display: grid;
      gap: var(--sp-3);
      padding: var(--sp-3);
    }
    .admin-responsive-table tbody tr,
    .ui-table.is-responsive tbody tr {
      display: grid;
      gap: var(--sp-1);
      padding: var(--sp-3);
      border: 1px solid var(--color-border);
      border-radius: var(--r-md);
      background: var(--color-surface);
    }
    .admin-responsive-table tbody td,
    .ui-table.is-responsive tbody td {
      display: grid;
      grid-template-columns: minmax(6rem, 32%) minmax(0, 1fr);
      gap: var(--sp-3);
      align-items: center;
      padding: var(--sp-1) 0;
      border: 0;
    }
    .admin-responsive-table tbody td::before,
    .ui-table.is-responsive tbody td::before {
      content: attr(data-label);
      color: var(--color-text-muted);
      font-size: var(--fs-2xs);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
    }
    .admin-responsive-table tbody td.admin-select-column,
    .admin-responsive-table tbody td:empty {
      display: none;
    }
    .admin-responsive-table .admin-row-actions {
      position: static;
      grid-template-columns: 1fr;
      justify-items: stretch;
      padding-top: var(--sp-3);
      margin-top: var(--sp-2);
      border-top: 1px solid var(--color-divider);
      text-align: left;
    }
    .admin-responsive-table .admin-row-actions::before {
      display: none;
    }
  }

  /* Pagination */
  .ui-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
  }
  .ui-pagination-pages {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
  .ui-pagination-page,
  .ui-pagination-arrow {
    display: grid;
    place-items: center;
    min-width: var(--control-h-md);
    height: var(--control-h-md);
    padding: 0 var(--sp-2);
    border: 1px solid transparent;
    border-radius: var(--r-control);
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }
  .ui-pagination-page:hover,
  .ui-pagination-arrow:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .ui-pagination-page.current {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--fw-semibold);
  }
  .ui-pagination-arrow.disabled {
    color: var(--color-text-faint);
    pointer-events: none;
  }
  .ui-pagination-arrow.previous .ui-icon {
    transform: rotate(180deg);
  }
  .ui-pagination-ellipsis {
    padding-inline: var(--sp-1);
    color: var(--color-text-faint);
  }
  .ui-pagination-summary {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
  }

  /* Metric. The number leads, the label supports it, and the change is a
     separate token so it can be scanned independently. */
  .ui-metric {
    display: grid;
    gap: var(--sp-1);
    min-width: 0;
  }
  .ui-metric-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
  }
  .ui-metric-value {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .ui-metric-value small {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
  }
  .ui-metric-note {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }
  .ui-metric-note.is-up {
    color: var(--color-success-fg);
  }
  .ui-metric-note.is-down {
    color: var(--color-danger-fg);
  }

  /* Metric row: separated by rules, not boxes, so four numbers read as one
     summary instead of four cards. */
  .ui-metric-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    border: 1px solid var(--color-border);
    border-radius: var(--r-card);
    background: var(--color-surface);
  }
  .ui-metric-row > * {
    padding: var(--sp-4) var(--sp-5);
    border-left: 1px solid var(--color-divider);
  }
  .ui-metric-row > *:first-child {
    border-left: 0;
  }
  @media (max-width: 48rem) {
    .ui-metric-row > * {
      border-left: 0;
      border-top: 1px solid var(--color-divider);
    }
    .ui-metric-row > *:first-child {
      border-top: 0;
    }
  }

  /* Sparkline / bar chart primitives. Charts inherit the same restraint:
     one accent, gridlines at divider weight, labels at caption size. */
  .ui-chart {
    --chart-ink: var(--color-brand);
    display: block;
    width: 100%;
  }
  .ui-chart .grid line,
  .ui-chart line.grid {
    stroke: var(--color-divider);
    stroke-width: 1;
  }
  .ui-chart .axis text,
  .ui-chart text {
    fill: var(--color-text-muted);
    font-size: var(--fs-2xs);
  }
  .ui-chart .series-fill {
    fill: color-mix(in oklab, var(--chart-ink) 12%, transparent);
  }
  .ui-chart .series-line {
    fill: none;
    stroke: var(--chart-ink);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ui-bar-track {
    display: grid;
    gap: var(--sp-2);
  }
  .ui-bar {
    display: grid;
    grid-template-columns: minmax(5rem, 30%) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
  }
  .ui-bar-label {
    overflow: hidden;
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ui-bar-meter {
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--r-xs);
    background: var(--color-surface-active);
  }
  .ui-bar-meter > i {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-brand);
  }
  .ui-bar-value {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* Definition list for record detail views. Two columns on wide screens,
     stacked on narrow ones, with the label always the quieter element. */
  .ui-detail-list {
    display: grid;
    gap: 0;
    margin: 0;
  }
  .ui-detail-list > div {
    display: grid;
    grid-template-columns: minmax(7rem, 16rem) minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .ui-detail-list > div:last-child {
    border-bottom: 0;
  }
  .ui-detail-list dt {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
  }
  .ui-detail-list dd {
    margin: 0;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--fs-base);
    overflow-wrap: anywhere;
  }
  @media (max-width: 40rem) {
    .ui-detail-list > div {
      grid-template-columns: 1fr;
      gap: var(--sp-1);
    }
  }

  /* ==================================================================== *
   * 09 Navigation
   * ==================================================================== */

  .ui-tabs {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: none;
  }
  .ui-tabs::-webkit-scrollbar {
    display: none;
  }
  .ui-tabs > :is(a, button) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + 1px);
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .ui-tabs > :is(a, button):hover {
    color: var(--color-text);
  }
  .ui-tabs > :is(a, button):is(.active, [aria-selected="true"], [aria-current="page"]) {
    color: var(--color-text);
  }
  .ui-tabs > :is(a, button):is(.active, [aria-selected="true"], [aria-current="page"])::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--color-brand);
  }

  /* Segmented control for mutually exclusive view modes. Not for
     navigation — that is what tabs are for. */
  .ui-segmented {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--color-surface-sunken);
  }
  .ui-segmented > :is(a, button, label) {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    height: calc(var(--control-h-md) - 4px);
    border: 0;
    border-radius: calc(var(--r-md) - 2px);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .ui-segmented > :is(a, button, label):is(.active, [aria-pressed="true"], [aria-current="true"], :has(input:checked)) {
    background: var(--color-surface);
    box-shadow: var(--elev-1);
    color: var(--color-text);
  }

  .ui-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
  }
  .ui-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }
  .ui-breadcrumb a:hover {
    color: var(--color-text);
  }
  .ui-breadcrumb .ui-icon {
    font-size: 0.8125rem;
    color: var(--color-text-faint);
  }
  .ui-breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: var(--fw-medium);
  }

  /* Vertical nav used by both sidebars. */
  .ui-nav {
    display: grid;
    gap: 1px;
  }
  .ui-nav-group + .ui-nav-group {
    margin-top: var(--sp-4);
  }
  .ui-nav-group > h2,
  .ui-nav-group > .ui-nav-title {
    margin: 0 0 var(--sp-1);
    padding: 0 var(--sp-3);
    color: var(--color-text-faint);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .ui-nav a,
  .ui-nav button,
  .ui-nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 0 var(--sp-3);
    height: var(--control-h-md);
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--dur-instant) linear,
      color var(--dur-instant) linear;
  }
  .ui-nav :is(a, button):hover,
  .ui-nav-item:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .ui-nav :is(a, button):is(.active, [aria-current="page"]),
  .ui-nav-item.active {
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
    font-weight: var(--fw-semibold);
  }
  .ui-nav .ui-icon {
    flex: none;
    font-size: 1rem;
    opacity: 0.85;
  }
  .ui-nav-count {
    margin-left: auto;
    color: var(--color-text-faint);
    font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
  }

  /* Menus built on <details> so they work without JavaScript. */
  .ui-menu-panel,
  .locale-menu-panel,
  .admin-more-menu-panel,
  .account-menu-panel {
    position: absolute;
    z-index: var(--z-popover);
    min-width: 12rem;
    padding: var(--sp-1);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elev-3);
    animation: ui-pop var(--dur-fast) var(--ease-out);
  }
  @keyframes ui-pop {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.985);
    }
  }
  :is(.ui-menu-panel, .locale-menu-panel, .admin-more-menu-panel, .account-menu-panel) :is(a, button) {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--fs-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  :is(.ui-menu-panel, .locale-menu-panel, .admin-more-menu-panel, .account-menu-panel) :is(a, button):hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  :is(.ui-menu-panel, .locale-menu-panel, .admin-more-menu-panel, .account-menu-panel) hr {
    margin: var(--sp-1) 0;
  }
  .ui-menu-label {
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    color: var(--color-text-faint);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* ==================================================================== *
   * 10 Overlays
   * ==================================================================== */

  dialog.ui-dialog,
  dialog.confirm-dialog {
    width: min(30rem, calc(100vw - 2rem));
    max-height: min(80dvh, 44rem);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--r-dialog);
    background: var(--color-surface-raised);
    box-shadow: var(--elev-4);
    color: var(--color-text);
  }
  dialog.ui-dialog::backdrop,
  dialog.confirm-dialog::backdrop {
    background: var(--color-overlay);
    backdrop-filter: blur(2px);
  }
  dialog.ui-dialog[open],
  dialog.confirm-dialog[open] {
    animation: ui-dialog-in var(--dur-normal) var(--ease-out);
  }
  @keyframes ui-dialog-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
  }
  .ui-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
  }
  .ui-dialog-head h2 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-heading);
  }
  .ui-dialog-body {
    padding: 0 var(--sp-5) var(--sp-5);
    overflow: auto;
    color: var(--color-text-secondary);
    line-height: var(--lh-body);
  }
  .ui-dialog-foot,
  dialog.confirm-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--color-divider);
    background: var(--color-surface-sunken);
  }
  dialog.confirm-dialog .confirm-dialog-card {
    display: grid;
    gap: 0;
  }
  dialog.confirm-dialog .confirm-dialog-copy {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-5);
  }
  dialog.confirm-dialog .confirm-dialog-copy h2 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
  }
  dialog.confirm-dialog .confirm-dialog-copy p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: var(--lh-body);
  }
  dialog.confirm-dialog .confirm-dialog-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: var(--sp-5) var(--sp-5) 0;
    border-radius: var(--r-md);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
  }

  /* Drawer: an edge-anchored surface for filters and secondary detail. */
  .ui-drawer {
    position: fixed;
    z-index: var(--z-drawer);
    top: 0;
    bottom: 0;
    right: 0;
    width: min(26rem, 100vw);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    box-shadow: var(--elev-4);
    transform: translateX(100%);
    transition: transform var(--dur-normal) var(--ease-out);
  }
  .ui-drawer.is-open,
  .ui-drawer[open] {
    transform: none;
  }
  .ui-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--color-overlay);
  }
  @media (max-width: 40rem) {
    .ui-drawer {
      top: auto;
      left: 0;
      width: auto;
      max-height: 88dvh;
      border-left: 0;
      border-top: 1px solid var(--color-border);
      border-radius: var(--r-xl) var(--r-xl) 0 0;
      transform: translateY(100%);
    }
  }

  /* Tooltip driven by `data-tooltip`. Delayed so it never fires during a
     casual pass across a toolbar. */
  [data-tooltip] {
    position: relative;
  }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: var(--z-tooltip);
    top: calc(100% + 6px);
    left: 50%;
    max-width: 16rem;
    width: max-content;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    white-space: normal;
    opacity: 0;
    transform: translate(-50%, -2px);
    pointer-events: none;
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
    transition-delay: 0s;
  }
  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 400ms;
  }
  [data-tooltip=""]::after {
    display: none;
  }
  /* A tooltip is a hover affordance, so a touch device never gets to read it.
     Leaving it rendered is not free either: it is laid out at the trigger's
     width plus its own text, which pushed the page sideways whenever the
     trigger sat near a screen edge. */
  @media (hover: none) {
    [data-tooltip]::after {
      display: none;
    }
  }
  /* Header actions sit hard against the right edge, so a centred tooltip has
     nowhere to go. Anchor those to the same edge as their trigger. */
  .site-header .nav-actions [data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translateY(-2px);
  }
  .site-header .nav-actions [data-tooltip]:hover::after,
  .site-header .nav-actions [data-tooltip]:focus-visible::after {
    transform: translateY(0);
  }

  /* ==================================================================== *
   * 11 States
   * ==================================================================== */

  /*
   * Every collection needs four states, and the empty state carries the
   * most weight: it is the first thing a new account sees.
   */
  .ui-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    /* Flat by default. An empty state almost always sits inside a panel or
       a table that already draws the container, and a dashed box inside a
       bordered card is the classic card-in-card. */
    padding: var(--sp-12) var(--sp-6);
    border: 0;
    border-radius: 0;
    background: none;
    text-align: center;
  }
  .ui-empty-state.is-boxed {
    border: 1px dashed var(--color-border);
    border-radius: var(--r-card);
    background: var(--color-surface-sunken);
  }
  .ui-empty-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--sp-1);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
  }
  .ui-empty-icon .ui-icon {
    font-size: 1.25rem;
  }
  .ui-empty-state h2,
  .ui-empty-state h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
  }
  .ui-empty-state p {
    margin: 0;
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
  }
  .ui-empty-state .button,
  .ui-empty-state .ui-btn {
    margin-top: var(--sp-3);
  }
  .ui-empty-state.is-compact {
    padding: var(--sp-8) var(--sp-4);
  }

  /* Skeletons mirror the shape of the content they replace, so the layout
     does not jump when data lands. */
  .ui-skeleton {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4);
  }
  .ui-skeleton-line {
    display: block;
    height: 0.75rem;
    border-radius: var(--r-xs);
    background: linear-gradient(
      90deg,
      var(--color-surface-active) 25%,
      var(--color-surface-hover) 37%,
      var(--color-surface-active) 63%
    );
    background-size: 400% 100%;
    animation: ui-shimmer 1.4s linear infinite;
  }
  .ui-skeleton-line.heading {
    width: 32%;
    height: 1rem;
  }
  .ui-skeleton-line.subheading {
    width: 52%;
  }
  .ui-skeleton-line.row {
    width: 100%;
    height: 1.25rem;
  }
  .ui-skeleton-line.row:nth-child(even) {
    width: 88%;
  }
  @keyframes ui-shimmer {
    to {
      background-position: -400% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ui-skeleton-line {
      animation: none;
    }
  }

  .ui-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ui-spin 0.6s linear infinite;
  }

  /* A region waiting on a refresh dims and stops accepting input, but keeps
     the previous data visible so the user does not lose their place. */
  [data-async-region][aria-busy="true"] {
    position: relative;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--dur-fast) linear;
  }

  /* ==================================================================== *
   * 12 Marketing chrome
   * ==================================================================== */

  .shell-public-body {
    font-size: 1rem;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid transparent;
    background: color-mix(in srgb, var(--color-canvas) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    transition:
      border-color var(--dur-normal) var(--ease-out),
      background-color var(--dur-normal) var(--ease-out);
  }
  /* The header only grows a border once the page has moved, so the top of
     the page stays a single uninterrupted surface. */
  .site-header.scrolled {
    border-bottom-color: var(--color-border);
    background: color-mix(in srgb, var(--color-canvas) 96%, transparent);
  }
  .site-header .nav-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    min-height: 4rem;
  }
  .site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    color: var(--color-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.015em;
    text-decoration: none;
  }
  .site-header .brand img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-sm);
  }
  .site-header .desktop-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-right: auto;
  }
  .site-header .desktop-nav > a,
  .site-header .nav-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    text-decoration: none;
    cursor: pointer;
  }
  .site-header .desktop-nav > a:hover,
  .site-header .nav-menu-trigger:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .site-header .desktop-nav > a[aria-current="page"] {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
  }
  .site-header .nav-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
  }
  .site-header .locale-pill {
    display: grid;
    place-items: center;
    width: var(--control-h-md);
    height: var(--control-h-md);
    border-radius: var(--r-control);
    color: var(--color-text-secondary);
    list-style: none;
    cursor: pointer;
  }
  .site-header .locale-pill::-webkit-details-marker {
    display: none;
  }
  .site-header .locale-pill:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .locale-menu,
  .account-popover,
  .nav-menu,
  .admin-more-menu,
  .admin-view-picker {
    position: relative;
  }
  .locale-menu > summary,
  .account-popover > summary,
  .admin-more-menu > summary,
  .admin-view-picker > summary {
    list-style: none;
  }
  .locale-menu > summary::-webkit-details-marker,
  .account-popover > summary::-webkit-details-marker,
  .admin-more-menu > summary::-webkit-details-marker,
  .admin-view-picker > summary::-webkit-details-marker {
    display: none;
  }
  .locale-menu-panel,
  .account-menu-panel,
  .admin-more-menu-panel {
    top: calc(100% + var(--sp-2));
    right: 0;
    /* A lower layer still sets `left` for a fixed-position phone variant that
       this rule takes away by restoring `absolute`. Left plus right plus a
       min-width over-constrains the box, so the browser drops `right` and the
       menu drifts off the side of the screen. */
    left: auto;
  }
  /* Anchored to a trigger that already sits at the right edge, so the panel
     only has the space to its left to work with. */
  @media (max-width: 30rem) {
    .site-header :is(.locale-menu-panel, .account-menu-panel, .admin-more-menu-panel) {
      width: min(18rem, calc(100vw - var(--sp-6)));
    }
  }
  .locale-menu-panel .locale-flag,
  .mobile-locale-options .locale-flag {
    display: inline-grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.5rem;
    padding-inline: var(--sp-1);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xs);
    background: var(--color-canvas-alt);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .locale-menu-panel > a {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-3);
    min-height: var(--control-h-lg);
  }
  .locale-menu-panel .locale-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
  }
  .locale-menu-panel .locale-copy strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-control);
  }
  .locale-menu-panel .locale-copy small {
    color: var(--color-text-muted);
    font-size: var(--fs-3xs);
    line-height: var(--lh-control);
  }
  .locale-menu-panel .locale-check {
    margin-left: auto;
    color: var(--color-brand);
  }

  .account-popover > summary .account-avatar {
    display: grid;
    place-items: center;
    width: var(--control-h-md);
    height: var(--control-h-md);
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
  }
  .account-popover > summary .account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: var(--control-h-md);
    height: var(--control-h-md);
    padding: 0 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--r-control);
    background: var(--color-surface);
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    /* `gap` is the only spacer. A lower layer also puts a 5px block margin on
       these bars, which pushed them further apart than the close transform
       below travels, so the open state formed a chevron instead of a cross. */
    margin: 0;
    border-radius: 2px;
    background: var(--color-text);
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  @media (max-width: 62rem) {
    .site-header .desktop-nav,
    .site-header .desktop-auth {
      display: none;
    }
    .nav-toggle {
      display: flex;
    }
    .site-header .nav-actions {
      margin-left: auto;
    }
  }

  .mobile-nav {
    display: none;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .mobile-nav.open {
    display: block;
    max-height: calc(100dvh - 4rem);
    overflow: auto;
  }
  body.mobile-nav-open {
    overflow: hidden;
  }
  .mobile-nav-inner {
    display: grid;
    gap: var(--sp-1);
    padding-block: var(--sp-3) var(--sp-6);
    /* The drawer is full height by design, but its rows are not: a lower layer
       gives this a `min-height` of the viewport, and a stretch-aligned grid
       spread five links over 780px. */
    align-content: start;
  }
  /* "Products" is a peer of the other destinations, so it reads as one. It was
     inheriting a muted secondary colour and lighter weight from a lower layer,
     which made the one item with a submenu look like the one disabled item. */
  .mobile-main-link,
  .mobile-nav-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-control);
    color: var(--color-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-product-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    min-height: 3.75rem;
    padding: var(--sp-2);
    border-radius: var(--r-control);
    color: var(--color-text);
    text-decoration: none;
  }
  .mobile-product-link .nav-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--color-brand-strong); background: var(--color-brand-faint); }
  .mobile-product-link b,
  .mobile-product-link small { display: block; }
  .mobile-product-link b { font-size: var(--fs-sm); }
  .mobile-product-link small { margin-top: .15rem; color: var(--color-text-muted); font-size: var(--fs-xs); line-height: 1.35; }
  .mobile-main-link:hover,
  .mobile-product-link:hover,
  .mobile-nav-group > summary:hover {
    background: var(--color-surface-hover);
  }
  .mobile-nav-group > summary > .ui-icon {
    color: var(--color-text-muted);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .mobile-nav-group[open] > summary > .ui-icon {
    transform: rotate(90deg);
  }
  .mobile-auth {
    display: grid;
    /* One per row. A lower layer still pairs these two-up from when the drawer
       carried sign in and sign up together, which left a lone action sitting at
       half width looking like it had lost its partner. */
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding-block: var(--sp-3);
  }
  .mobile-auth .button {
    --_h: var(--control-h-xl);
    width: 100%;
  }

  /* Marketing section rhythm. Sections alternate surface rather than
     stacking cards, which is what gives a long page its pace. */
  .ui-section {
    padding-block: clamp(3.5rem, 7vw, 7rem);
  }
  .ui-section.is-tight {
    padding-block: clamp(2.5rem, 4.5vw, 4rem);
  }
  .ui-section.is-alt {
    background: var(--color-canvas-alt);
    border-block: 1px solid var(--color-border-subtle);
  }
  .ui-section-intro {
    display: grid;
    gap: var(--sp-3);
    max-width: 42rem;
    margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
  }
  .ui-section-intro.is-centered {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
  }
  .ui-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 2.6vw + 0.8rem, 2.75rem);
    font-weight: var(--fw-medium);
    line-height: 1.12;
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-canvas-alt);
    color: var(--color-text-secondary);
    font-size: var(--fs-md);
  }
  /* Mobile first, because the desktop track list cannot collapse: its floors
     add up to 16rem + 9rem + gap, which is wider than a phone. Stated the
     other way round it forced the whole document to scroll sideways on every
     handset. The link lists are short, so two columns beats one — it halves
     the height without crowding. */
  .site-footer .footer-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8) var(--sp-6);
    padding-block: clamp(3rem, 5vw, 4.5rem) var(--sp-10);
  }
  @media (min-width: 40rem) {
    .site-footer .footer-main {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .site-footer .footer-main {
      grid-template-columns: minmax(16rem, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
      gap: clamp(2rem, 4vw, 4rem);
    }
  }
  .site-footer .footer-brand-block {
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    max-width: 26rem;
    /* Full bleed until the brand column exists as its own track. */
    grid-column: 1 / -1;
  }
  @media (min-width: 64rem) {
    .site-footer .footer-brand-block {
      grid-column: auto;
    }
  }
  /* A lower layer hides the last two link groups below 64rem so its own
     narrower grid would fit. That grid is gone; the groups are not optional. */
  .site-footer .footer-main > div:not(.footer-brand-block) {
    display: flex;
    flex-direction: column;
  }
  .site-footer .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    text-decoration: none;
  }
  .site-footer .footer-brand img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-sm);
  }
  .site-footer .footer-brand-block p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
  }
  .site-footer .footer-address {
    font-size: var(--fs-sm);
  }
  .site-footer .footer-heading {
    margin: 0 0 var(--sp-3);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .site-footer .footer-main > div > a {
    display: block;
    padding-block: var(--sp-1);
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    text-decoration: none;
  }
  .site-footer .footer-main > div > a:hover {
    color: var(--color-text);
  }
  .site-footer .footer-cookie-settings {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }
  .site-footer .footer-bottom {
    border-top: 1px solid var(--color-border-subtle);
    padding-block: var(--sp-5);
    color: var(--color-text-faint);
    font-size: var(--fs-sm);
  }

  /* ==================================================================== *
   * 13 Application chrome
   * ==================================================================== */

  .workspace-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: none;
    height: var(--shell-topbar-h);
    padding-inline: var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
  }
  .workspace-brand .workspace-logo {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--color-text);
    color: var(--color-text-inverse);
    font-size: 0.8125rem;
  }
  .workspace-brand > span:last-child {
    display: grid;
    min-width: 0;
    line-height: 1.25;
  }
  .workspace-brand strong {
    overflow: hidden;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-brand small {
    color: var(--color-text-muted);
    font-size: var(--fs-2xs);
  }

  .workspace-context-back {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    margin: var(--sp-3) var(--sp-3) 0;
    padding: 0 var(--sp-2);
    height: var(--control-h-sm);
    border-radius: var(--r-control);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-decoration: none;
  }
  .workspace-context-back:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .workspace-context-back .ui-icon {
    font-size: 0.875rem;
  }

  /* Sidebar navigation. Groups are separated by space and a quiet label,
     not by boxes, so eleven destinations still scan as one list. */
  .admin-section-nav,
  .workspace-nav {
    display: grid;
    align-content: start;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-3);
  }
  .admin-section-nav-scroll {
    display: grid;
    gap: var(--sp-5);
  }
  .admin-nav-group {
    display: grid;
    gap: 1px;
  }
  .admin-nav-group > h2 {
    margin: 0 0 var(--sp-1);
    padding-inline: var(--sp-2);
    color: var(--color-text-faint);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .admin-nav-group-links {
    display: grid;
    gap: 1px;
  }
  /* Overview is the rail's landing page, not a category. It leads unlabelled
     and is separated by a rule so the headed groups below still read as a set. */
  .admin-nav-group-links--lead {
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-1);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .admin-nav-group-links > a,
  .workspace-nav > a,
  .workspace-nav-button {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    /* Long tool names wrap rather than truncate — in a three-item nav the
       full name is worth more than a uniform row height. */
    height: auto;
    min-height: var(--control-h-md);
    padding-block: var(--sp-2);
    padding-inline: var(--sp-2);
    text-align: start;
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--dur-instant) linear,
      color var(--dur-instant) linear;
  }
  .admin-nav-group-links > a:hover,
  .workspace-nav > a:hover,
  .workspace-nav-button:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .admin-nav-group-links > a.active,
  .workspace-nav > a.active {
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
    font-weight: var(--fw-semibold);
  }
  .admin-section-nav-icon,
  .workspace-nav > a > span:first-child,
  .workspace-nav-button > span:first-child {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.125rem;
    color: inherit;
    opacity: 0.8;
  }
  .admin-nav-group-links > a.active .admin-section-nav-icon,
  .workspace-nav > a.active > span:first-child {
    opacity: 1;
  }
  .workspace-nav > small {
    display: block;
    padding: var(--sp-4) var(--sp-2) var(--sp-1);
    color: var(--color-text-faint);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .workspace-nav > small:first-child {
    padding-top: 0;
  }

  .workspace-account {
    flex: none;
    padding: var(--sp-3);
    border-top: 1px solid var(--color-border);
  }
  .workspace-account-popover > summary,
  .workspace-account .account-popover > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--r-control);
    cursor: pointer;
  }
  .workspace-account-popover > summary:hover {
    background: var(--color-surface-hover);
  }
  .workspace-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
  }
  .workspace-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .workspace-account-popover > summary > span:nth-child(2) {
    display: grid;
    min-width: 0;
    line-height: 1.3;
  }
  .workspace-account-popover strong {
    overflow: hidden;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-account-popover small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--fs-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-account .account-chevron {
    margin-left: auto;
    color: var(--color-text-faint);
  }
  .workspace-account .account-menu-panel {
    bottom: calc(100% + var(--sp-2));
    top: auto;
    left: 0;
    right: 0;
  }

  /* Topbar carries orientation and global actions only. Page identity
     belongs to the page, not to the chrome. */
  .dashboard-header .dashboard-breadcrumbs,
  .app-topbar .dashboard-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
  }
  .dashboard-header .dashboard-breadcrumbs .ui-icon {
    font-size: 0.8125rem;
    color: var(--color-text-faint);
  }
  .dashboard-header .dashboard-page-title {
    margin: 0;
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-header .dashboard-header-actions,
  .app-topbar .dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
  }
  .dashboard-header .locale-pill,
  .app-topbar .locale-pill {
    display: grid;
    place-items: center;
    width: var(--control-h-md);
    height: var(--control-h-md);
    border-radius: var(--r-control);
    color: var(--color-text-secondary);
    list-style: none;
    cursor: pointer;
  }
  .dashboard-header .locale-pill:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }

  /* Mobile tab bar. Four destinations maximum; anything else goes behind
     the More sheet. */
  .app-mobilenav,
  .workspace-mobile-nav {
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .app-mobilenav > :is(a, button),
  .workspace-mobile-nav > :is(a, button) {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--sp-1);
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    text-decoration: none;
    cursor: pointer;
  }
  .app-mobilenav > :is(a, button) .ui-icon,
  .workspace-mobile-nav > :is(a, button) .ui-icon {
    font-size: 1.125rem;
  }
  .app-mobilenav > .active,
  .workspace-mobile-nav > .active {
    color: var(--color-brand);
  }

  /* The admin list page. One header, one toolbar, one table — no nested
     panels, and search is visible rather than hidden behind a drawer. */
  .admin-page.shell {
    max-width: none;
    padding: 0;
  }
  .admin-content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    width: 100%;
    max-width: var(--shell-wide-max);
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-5) var(--sp-16);
  }
  @media (max-width: 48rem) {
    .admin-content {
      padding: var(--sp-4) var(--sp-4) var(--sp-12);
    }
  }
  .app-heading,
  .admin-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
  }
  .app-heading > div:first-child,
  .admin-heading > div:first-child {
    display: grid;
    gap: var(--sp-1);
    min-width: 0;
  }
  .app-heading h1,
  .admin-heading h1 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
  }
  .app-heading p,
  .admin-heading p {
    margin: 0;
    max-width: 62ch;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
  }
  /* The page title already says which console this is. */
  .admin-heading .eyebrow {
    display: none;
  }
  .admin-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }

  .admin-table-panel,
  .admin-data-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--r-card);
    background: var(--color-surface);
  }
  .admin-table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--color-divider);
  }
  .admin-record-count {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-1);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
  }
  .admin-record-count strong {
    color: var(--color-text);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }
  /* Bulk actions only exist once something is selected. */
  .admin-bulk-tools {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    padding-left: var(--sp-3);
    margin-left: var(--sp-1);
    border-left: 1px solid var(--color-divider);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
  }
  .admin-bulk-tools.has-selection {
    display: flex;
  }
  .admin-view-picker,
  .admin-column-picker {
    margin-left: auto;
  }
  .admin-view-picker + .admin-column-picker {
    margin-left: 0;
  }
  .admin-view-picker > summary,
  .admin-column-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--control-h-md);
    padding-inline: var(--sp-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--r-control);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
  }
  .admin-view-picker > summary:hover,
  .admin-column-picker-trigger:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .admin-view-picker > div {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + var(--sp-2));
    right: 0;
    display: grid;
    gap: var(--sp-3);
    width: 18rem;
    padding: var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elev-3);
  }
  .admin-view-picker label {
    display: grid;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
  }
  .admin-view-actions {
    display: flex;
    gap: var(--sp-2);
  }
  .admin-column-menu-panel {
    width: 17rem;
    padding: var(--sp-2);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elev-3);
  }
  .admin-column-menu-heading {
    display: grid;
    gap: var(--sp-half);
    padding: var(--sp-2) var(--sp-2) var(--sp-3);
  }
  .admin-column-menu-heading strong {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
  }
  .admin-column-menu-heading small {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }
  .admin-column-actions {
    display: flex;
    gap: var(--sp-1);
    padding: 0 var(--sp-2) var(--sp-2);
  }
  .admin-column-actions button {
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xs);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
  }
  .admin-column-options {
    display: grid;
    max-height: 18rem;
    overflow: auto;
  }
  .admin-column-options label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--r-control);
    font-size: var(--fs-base);
    cursor: pointer;
  }
  .admin-column-options label:hover {
    background: var(--color-surface-hover);
  }

  /* Active filters read as removable tokens directly under the toolbar,
     so the current query is always visible without opening the drawer. */
  .active-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
  }
  .active-filter-row > span:first-child {
    color: var(--color-text-muted);
  }
  .active-filter-row > a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--control-h-sm);
    padding-inline: var(--sp-2);
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    text-decoration: none;
  }
  .active-filter-row > a:hover {
    border-color: var(--color-danger-line);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
  }
  .active-filter-row > a b {
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
  }
  .active-filter-row .clear-all {
    border-color: transparent;
    background: transparent;
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border-radius: var(--r-pill);
    background: var(--color-brand);
    color: var(--color-text-inverse);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }

  /* Filter drawer */
  .admin-filter-bar[data-filter-drawer] {
    position: fixed;
    z-index: var(--z-drawer);
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(26rem, 100vw);
    padding: 0;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface-raised);
    box-shadow: var(--elev-4);
    transform: translateX(101%);
    visibility: hidden;
    transition:
      transform var(--dur-normal) var(--ease-out),
      visibility 0s linear var(--dur-normal);
  }
  .admin-filter-bar[data-filter-drawer].open {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  body.filter-drawer-open {
    overflow: hidden;
  }
  .admin-filter-card-head {
    display: none;
  }
  .admin-filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-divider);
  }
  .admin-filter-drawer-head > div {
    display: grid;
    gap: var(--sp-half);
  }
  .admin-filter-drawer-head strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
  }
  .admin-filter-close {
    display: grid;
    place-items: center;
    width: var(--control-h-md);
    height: var(--control-h-md);
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }
  .admin-filter-close:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
  .admin-filter-grid {
    display: grid;
    gap: var(--sp-4);
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--sp-5);
  }
  .admin-filter-grid label,
  .admin-filter-field {
    display: grid;
    gap: var(--sp-1);
    min-width: 0;
  }
  .admin-filter-grid label > span,
  .admin-filter-field > span {
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
  }
  .admin-filter-grid :is(input, select) {
    width: 100%;
    min-height: var(--control-h-lg);
    padding: 0 var(--sp-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--r-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-base);
  }
  .admin-filter-grid select[multiple] {
    min-height: 6rem;
    padding: var(--sp-1);
  }
  /* Faceted multi-select. The native <select multiple> stays in the DOM as
     the form value and is replaced visually by a searchable list. */
  .admin-facet-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }
  .admin-facet-filter {
    position: relative;
  }
  .admin-facet-trigger {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: var(--control-h-lg);
    padding: 0 var(--sp-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--r-control);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--fs-base);
    text-align: left;
    cursor: pointer;
  }
  .admin-facet-trigger:hover {
    border-color: var(--color-control-border-hover);
  }
  .admin-facet-trigger > span {
    color: var(--color-text-muted);
  }
  .admin-facet-trigger > strong {
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--fw-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-facet-trigger > em {
    display: grid;
    place-items: center;
    min-width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--r-pill);
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
    font-size: var(--fs-2xs);
    font-style: normal;
    font-weight: var(--fw-semibold);
  }
  .admin-facet-trigger > .ui-icon {
    margin-left: auto;
    color: var(--color-text-faint);
  }
  .admin-facet-trigger.has-value {
    border-color: var(--color-brand-border);
  }
  .admin-facet-panel {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + var(--sp-1));
    left: 0;
    right: 0;
    display: grid;
    padding: var(--sp-1);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elev-3);
  }
  .admin-facet-search {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--sp-1);
  }
  .admin-facet-search .ui-icon {
    position: absolute;
    left: var(--sp-3);
    color: var(--color-text-faint);
    pointer-events: none;
  }
  .admin-facet-search input {
    width: 100%;
    min-height: var(--control-h-md);
    padding: 0 var(--sp-2) 0 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--r-control);
    background: var(--color-surface);
    font: inherit;
    font-size: var(--fs-base);
  }
  .admin-facet-options {
    display: grid;
    max-height: 15rem;
    overflow: auto;
    padding: var(--sp-1) 0;
  }
  .admin-facet-option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--r-control);
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    cursor: pointer;
  }
  .admin-facet-option:hover {
    background: var(--color-surface-hover);
  }
  .admin-facet-option[aria-selected="true"] {
    color: var(--color-text);
    font-weight: var(--fw-medium);
  }
  .admin-facet-check {
    display: grid;
    place-items: center;
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-control-border);
    border-radius: var(--r-xs);
    color: var(--color-text-inverse);
    font-size: 0.7rem;
  }
  .admin-facet-option[aria-selected="true"] .admin-facet-check {
    border-color: var(--color-brand);
    background: var(--color-brand);
  }
  .admin-facet-option small {
    margin-left: auto;
    color: var(--color-text-faint);
    font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
  }
  .admin-facet-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-1) var(--sp-1);
    border-top: 1px solid var(--color-divider);
  }

  .admin-filter-actions {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--color-divider);
    background: var(--color-surface-sunken);
  }
  .admin-filter-actions .button {
    flex: 1 1 auto;
  }
  .admin-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--color-overlay);
    animation: ui-fade-in var(--dur-fast) linear;
  }
  @keyframes ui-fade-in {
    from {
      opacity: 0;
    }
  }
  /* Bottom-anchored panels (the mobile history drawer) rise into place rather
     than appearing, so the gesture that opens them has a visible result. */
  @keyframes ui-slide-up {
    from {
      opacity: 0;
      transform: translateY(1.5rem);
    }
  }

  .admin-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
    display: none;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  }
  [aria-busy="true"] > .admin-loading-overlay {
    display: block;
  }

  /* ==================================================================== *
   * 14 Utilities
   * ==================================================================== */

  .ui-hide {
    display: none !important;
  }
  @media (max-width: 48rem) {
    .ui-hide-sm {
      display: none !important;
    }
  }
  @media (min-width: 48.0625rem) {
    .ui-only-sm {
      display: none !important;
    }
  }
  .ui-muted {
    color: var(--color-text-muted);
  }
  .ui-strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
  }
  .ui-nowrap {
    white-space: nowrap;
  }
  .ui-full {
    width: 100%;
  }

  .navigation-progress {
    position: fixed;
    z-index: var(--z-skip);
    inset: 0 auto auto 0;
    width: 0;
    height: 2px;
    background: var(--color-brand);
    opacity: 0;
    transition:
      width var(--dur-slow) var(--ease-out),
      opacity var(--dur-fast) linear;
  }
  .navigation-progress.active {
    width: 68%;
    opacity: 1;
  }

  .skip-link {
    position: fixed;
    z-index: var(--z-skip);
    top: var(--sp-3);
    left: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-control);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus {
    transform: none;
  }

  /* Route-change overlay.
     The markup ships on every page but its old stylesheet was only linked
     on workspace routes, so on the marketing site the skeleton rendered in
     normal flow above the header. It belongs here, where every page can
     see it, and it stays out of the way until the body is marked busy. */
  .page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    background: color-mix(in oklab, var(--color-canvas) 74%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(4px);
    transition:
      opacity var(--dur-normal) var(--ease-out),
      visibility 0s linear var(--dur-normal);
  }
  body[aria-busy="true"] .page-loading-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .page-loading-card {
    width: min(44rem, 100%);
    padding: var(--sp-6);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    background: var(--color-surface);
    box-shadow: var(--elev-3);
  }
  .page-loading-card > .route-skeleton {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .route-skeleton {
    display: grid;
    gap: var(--sp-4);
  }

  /* Cookie consent and preference dialog (shared by marketing, auth, workspace). */
  .cookie-consent-banner {
    position: fixed;
    z-index: var(--z-skip);
    right: 22px;
    bottom: 22px;
    display: grid;
    width: min(760px, calc(100vw - 44px));
    gap: 17px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--background) 96%, transparent);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--color-ink) 20%, transparent);
    backdrop-filter: blur(22px);
    pointer-events: auto;
  }

  body:has([data-cookie-banner]) {
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px));
  }

  body.auth-page-body:has([data-cookie-banner]) {
    padding-bottom: 0;
  }

  body.workspace-page-body:has([data-cookie-banner]) {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .auth-page-body .cookie-consent-banner {
    position: relative;
    inset: auto;
    right: auto;
    left: auto;
    bottom: auto;
    z-index: var(--z-raised);
    width: min(560px, calc(100% - 24px));
    max-height: none;
    margin: 18px auto 24px;
    overflow: visible;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .auth-page-body .cookie-consent-copy {
    gap: 10px;
  }

  .auth-page-body .cookie-consent-icon {
    display: none;
  }

  .auth-page-body .cookie-consent-copy .eyebrow {
    display: none;
  }

  .auth-page-body .cookie-consent-copy h2,
  .auth-page-body .cookie-consent-heading {
    margin: 0 0 4px;
    font-size: 0.92rem;
  }

  .auth-page-body .cookie-consent-copy p:not(.cookie-consent-heading) {
    font-size: 0.7rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .auth-page-body .cookie-consent-copy a {
    margin-top: 4px;
  }

  .auth-page-body .cookie-consent-actions {
    gap: 6px;
  }

  .auth-page-body .cookie-consent-actions .button {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 0.78rem;
  }

  .cookie-consent-copy {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 14px;
  }

  .cookie-consent-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 10%, var(--muted));
    color: var(--primary);
  }

  .cookie-consent-copy > div {
    min-width: 0;
  }

  .cookie-consent-copy .eyebrow {
    font-size: 0.54rem;
  }

  .cookie-consent-copy h2,
  .cookie-consent-heading {
    margin: 3px 0 6px;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--foreground);
  }

  .cookie-consent-copy p:not(.cookie-consent-heading) {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.62;
  }

  .cookie-consent-copy a {
    display: inline-block;
    margin-top: 7px;
    color: var(--foreground);
    font-size: 0.64rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .cookie-consent-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cookie-consent-actions .button {
    min-height: 39px;
  }

  .cookie-settings-dialog {
    width: min(720px, calc(100vw - 36px));
    max-width: 48rem;
    max-height: min(760px, calc(100vh - 36px));
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--background);
    box-shadow: 0 30px 90px color-mix(in srgb, var(--color-ink) 28%, transparent);
  }

  .cookie-settings-dialog::backdrop {
    background: color-mix(in srgb, var(--color-ink) 48%, transparent);
    backdrop-filter: blur(4px);
  }

  .cookie-settings-dialog > .dialog-close-row {
    position: absolute;
    z-index: var(--z-raised);
    top: 13px;
    right: 13px;
  }

  .cookie-settings-dialog > .dialog-close-row button {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
  }

  .cookie-settings-dialog > header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 22px 58px 19px 22px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 34%, transparent);
  }

  .cookie-settings-heading-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
  }

  .cookie-settings-dialog > header > div {
    display: grid;
    gap: 3px;
  }

  .cookie-settings-dialog h2 {
    margin: 0;
    font-size: 1.15rem;
  }

  .cookie-settings-dialog > header p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.68rem;
  }

  .cookie-category-list {
    display: grid;
    gap: 12px;
    padding: 18px 22px;
  }

  .cookie-category-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
  }

  .cookie-category-card.essential {
    background: color-mix(in srgb, var(--muted) 34%, var(--surface));
  }

  .cookie-category-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--muted);
    color: var(--primary);
  }

  .cookie-category-card > div:nth-child(2) {
    min-width: 0;
  }

  .cookie-category-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cookie-category-title h3 {
    margin: 0;
    font-size: 0.8rem;
  }

  .cookie-category-title span {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.52rem;
    font-weight: 700;
  }

  .cookie-category-card p {
    margin: 6px 0 0;
    color: var(--muted-foreground);
    font-size: 0.66rem;
    line-height: 1.55;
  }

  .cookie-category-card .feature-switch {
    margin-top: 5px;
  }

  .cookie-settings-dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 28%, transparent);
  }

  .cookie-settings-dialog > footer > div {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .footer-cookie-settings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .footer-cookie-settings .ui-icon {
    width: 14px;
    height: 14px;
  }

  @media (max-width: 48rem) {
    .cookie-consent-banner {
      right: 12px;
      bottom: max(12px, env(safe-area-inset-bottom));
      left: 12px;
      width: auto;
      max-height: min(46vh, 340px);
      overflow: auto;
      overscroll-behavior: contain;
      padding: 14px;
    }
    .workspace-page-body .cookie-consent-banner {
      bottom: calc(76px + env(safe-area-inset-bottom));
    }
    .auth-page-body .cookie-consent-banner {
      position: relative;
      inset: auto;
      width: min(560px, calc(100% - 24px));
      max-height: none;
      margin: 16px auto 20px;
      overflow: visible;
    }
    .cookie-consent-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .cookie-consent-actions .button {
      width: 100%;
    }
    .cookie-consent-actions .button:last-child {
      grid-column: 1/-1;
    }
    .cookie-settings-dialog {
      width: calc(100vw - 20px);
      max-height: calc(100vh - 20px);
    }
    .cookie-category-card {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .cookie-category-card > .feature-switch {
      grid-column: 2;
      justify-self: start;
    }
    .cookie-settings-dialog > footer {
      align-items: stretch;
      flex-direction: column;
    }
    .cookie-settings-dialog > footer > div {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .cookie-settings-dialog > footer .button {
      width: 100%;
    }
    .auth-page-body:has([data-cookie-banner]) {
      padding-bottom: 0;
    }
  }

  @media (max-width: 30rem) {
    .cookie-consent-copy {
      gap: 10px;
    }
    .cookie-consent-icon {
      width: 38px;
      height: 38px;
    }
    .cookie-consent-actions {
      grid-template-columns: 1fr;
    }
    .cookie-consent-actions .button:last-child {
      grid-column: auto;
    }
    .cookie-category-list {
      padding: 14px;
    }
    .cookie-settings-dialog > header {
      padding-left: 16px;
    }
    .cookie-settings-dialog > footer {
      padding: 14px;
    }
    .cookie-settings-dialog > footer > div {
      grid-template-columns: 1fr;
    }
  }
}