/* your.os's components: shadcn/ui's, drawn from tokens instead of Tailwind
   classes. A component is a class (.ui-button) and its variants are data
   attributes (data-variant="outline"), so a page's style map and the style
   pencil reach every one of them through the same tokens (spec/shell.md,
   "shadcn's components, for the chrome"). Every colour, radius and shadow
   below is a token; a theme is these tokens and nothing else. */
@layer ui.tokens, ui.base, ui.components, ui.motion;

@font-face { font-family: "Geist"; src: url(/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

@layer ui.tokens {
  :root {
    color-scheme: light dark;
    /* shadcn's names on the carousel's slate; the second value is dark. The
       ink is the one colour for text and buttons alike. Secondary text is a
       step darker than the carousel's grey, which is too faint to read at
       paragraph size. */
    --background: light-dark(#f6f7f9, #1a1f27);
    --foreground: light-dark(#334155, #dbe1ea);
    --card: light-dark(#ffffff, #212733);
    --card-foreground: var(--foreground);
    --popover: light-dark(#ffffff, #212733);
    --popover-foreground: var(--foreground);
    --primary: light-dark(#334155, #dbe1ea);
    --primary-foreground: light-dark(#f6f7f9, #1a1f27);
    --secondary: light-dark(#eceff3, #262d38);
    --secondary-foreground: light-dark(#334155, #dbe1ea);
    --muted: light-dark(#eceff3, #262d38);
    --muted-foreground: light-dark(#5f6e83, #8b95a5);
    --accent: light-dark(#eceff3, #262d38);
    --accent-foreground: light-dark(#334155, #dbe1ea);
    --border: light-dark(#dde2e8, #2d3440);
    --input: light-dark(#818a99, #6b7585);
    --ring: light-dark(#818a99, #6f7a8a);
    /* A shade off the page's, either way: code sits on --code-bg, and a
       workspace's panes on --night, as the docs site draws them. */
    --code-bg: light-dark(#eef1f4, #161b22);
    --night: light-dark(#eef1f4, #151a21);
    --radius: 0.625rem;
    /* The colours are London's line colours. Each line is a category (a
       machine, a pane); they fill, they're never text. */
    --line-central: #dc241f;
    --line-piccadilly: light-dark(#0019a8, #4d6bff);
    --line-district: #00782a;
    --line-circle: #ffd300;
    --line-victoria: #0098d4;
    --line-elizabeth: #6950a1;
    --line-overground: #ee7c0e;
    --line-bakerloo: #b36305;
    --line-jubilee: #a0a5a9;
    --line-metropolitan: #9b0056;
    --line-dlr: #00a4a7;
    /* The brand is the carousel's orange, the one highlight: redder and
       deeper than Overground's, which stays a line. The states take
       District, Circle and Central, darkened or lightened where they're text. */
    --brand: light-dark(#e06418, #ff8b4d);
    /* WCAG AA, held by test/contrast.spec.mjs: the brand fills and edges at
       3:1, so its text is a deeper shade, and what sits on it is ink. */
    --brand-text: light-dark(#b35118, #ff8b4d);
    --brand-foreground: #1a1f27;
    --success: light-dark(#00782a, #3fbf63);
    --warning: light-dark(#8a6d00, #ffd300);
    --destructive: light-dark(#dc241f, #ff5a52);
    --destructive-foreground: light-dark(#ffffff, #1a1f27);
    --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / 5%);
    --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 10%), 0 1px 2px -1px oklch(0% 0 0 / 10%);
    --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 10%), 0 2px 4px -2px oklch(0% 0 0 / 10%);
    --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 10%), 0 4px 6px -4px oklch(0% 0 0 / 10%);
    --ease: cubic-bezier(.2, .7, .1, 1);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

@layer ui.base {
  *, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
  body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  :focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
  /* Radix locks scroll under a modal with an injected <style>, which the
     pages' CSP refuses; this does the same from here. */
  body:has(.ui-overlay[data-state="open"]) { overflow: hidden; }
}

@layer ui.components {
  /* Button */
  .ui-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex-shrink: 0;
    height: 2.25rem; padding: .5rem 1rem; border-radius: calc(var(--radius) - 2px); border: 1px solid transparent;
    font: 500 .875rem/1.25rem var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none;
    background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs);
    transition: background-color .15s, color .15s, box-shadow .15s, opacity .15s;
  }
  .ui-button:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); }
  .ui-button:disabled, .ui-button[aria-disabled="true"] { pointer-events: none; opacity: .5; }
  .ui-button svg { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }
  .ui-button[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
  .ui-button[data-variant="destructive"]:hover { background: color-mix(in srgb, var(--destructive) 90%, transparent); }
  .ui-button[data-variant="outline"] { background: var(--background); color: var(--foreground); border-color: var(--border); }
  .ui-button[data-variant="outline"]:hover { background: var(--accent); color: var(--accent-foreground); }
  .ui-button[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
  .ui-button[data-variant="secondary"]:hover { background: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 6%); }
  .ui-button[data-variant="ghost"] { background: transparent; color: inherit; box-shadow: none; }
  .ui-button[data-variant="ghost"]:hover { background: var(--accent); color: var(--accent-foreground); }
  .ui-button[data-variant="link"] { background: transparent; color: var(--primary); box-shadow: none; height: auto; padding: 0; text-underline-offset: 4px; }
  .ui-button[data-variant="link"]:hover { text-decoration: underline; }
  .ui-button[data-size="sm"] { height: 2rem; padding: 0 .75rem; gap: .375rem; }
  .ui-button[data-size="lg"] { height: 2.5rem; padding: 0 1.5rem; }
  .ui-button[data-size="icon"] { width: 2.25rem; padding: 0; }
  .ui-button[data-size="icon-sm"] { width: 2rem; height: 2rem; padding: 0; }

  /* Badge */
  .ui-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem; width: fit-content;
    padding: .125rem .5rem; border-radius: calc(var(--radius) - 2px); border: 1px solid transparent;
    font: 500 .75rem/1rem var(--font-sans); white-space: nowrap;
    background: var(--primary); color: var(--primary-foreground);
  }
  .ui-badge svg { width: .75rem; height: .75rem; }
  .ui-badge[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
  .ui-badge[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
  .ui-badge[data-variant="outline"] { background: transparent; color: var(--foreground); border-color: var(--border); }
  .ui-badge[data-variant="success"] { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
  .ui-badge[data-variant="warning"] { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
  .ui-badge[data-variant="brand"] { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text); }

  /* A status dot: a standing fact, so it whispers. */
  .ui-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--muted-foreground); opacity: .6; flex-shrink: 0; }
  .ui-dot[data-state="ok"] { background: var(--success); opacity: 1; }
  .ui-dot[data-state="off"] { background: var(--warning); opacity: 1; }
  .ui-dot[data-state="error"] { background: var(--destructive); opacity: 1; }

  /* Card */
  .ui-card {
    display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0;
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm);
  }
  .ui-card-header { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: .375rem; padding: 0 1.5rem; }
  .ui-card-title { margin: 0; font: 600 1rem/1 var(--font-sans); letter-spacing: -.01em; }
  .ui-card-description { margin: 0; grid-column: 1; color: var(--muted-foreground); font-size: .875rem; line-height: 1.25rem; }
  .ui-card-action { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; display: flex; gap: .5rem; align-items: center; }
  .ui-card-content { padding: 0 1.5rem; min-width: 0; }
  .ui-card-footer { display: flex; align-items: center; gap: .5rem; padding: 0 1.5rem; }

  /* Input, Textarea, Label */
  .ui-input, .ui-textarea {
    width: 100%; min-width: 0; padding: .25rem .75rem; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
    background: transparent; color: var(--foreground); font: 400 .875rem/1.25rem var(--font-sans); box-shadow: var(--shadow-xs);
    transition: box-shadow .15s, border-color .15s; outline: none;
  }
  .ui-input { height: 2.25rem; }
  .ui-textarea { min-height: 4rem; padding: .5rem .75rem; resize: vertical; field-sizing: content; }
  .ui-input::placeholder, .ui-textarea::placeholder { color: var(--muted-foreground); }
  .ui-input:focus-visible, .ui-textarea:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
  .ui-input:disabled, .ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
  .ui-input[aria-invalid="true"] { border-color: var(--destructive); }
  .ui-native-select {
    appearance: none; height: 2.25rem; min-width: 0; padding: 0 2rem 0 .75rem; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center / 1rem;
    color: var(--foreground); font: 400 .875rem/1.25rem var(--font-sans); box-shadow: var(--shadow-xs); cursor: pointer; outline: none;
  }
  .ui-native-select:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
  .ui-native-select option { background: var(--popover); color: var(--popover-foreground); }
  /* A native checkbox, in the primary colour. */
  input[type="checkbox"].ui-check { width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
  .ui-label { display: flex; align-items: center; gap: .5rem; font: 500 .875rem/1 var(--font-sans); user-select: none; }

  /* Separator */
  .ui-separator { flex-shrink: 0; background: var(--border); border: 0; margin: 0; }
  .ui-separator[data-orientation="horizontal"] { height: 1px; width: 100%; }
  .ui-separator[data-orientation="vertical"] { width: 1px; align-self: stretch; }

  /* Kbd, Code */
  .ui-kbd {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem;
    border-radius: calc(var(--radius) - 6px); background: var(--muted); color: var(--muted-foreground);
    font: 500 .75rem/1 var(--font-sans); pointer-events: none; user-select: none;
  }
  .ui-code { font-family: var(--font-mono); font-size: .8125rem; font-variant-ligatures: none; background: var(--muted); padding: .2em .4em; border-radius: calc(var(--radius) - 6px); }
  /* A command to copy: one line of code and its button. */
  .ui-snippet {
    display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .25rem .25rem .25rem .75rem;
    background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  }
  .ui-snippet > code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: .8125rem/1.5rem var(--font-mono); font-variant-ligatures: none; scrollbar-width: none; }

  /* Alert */
  .ui-alert {
    position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; row-gap: .125rem; align-items: start;
    padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); color: var(--card-foreground); font-size: .875rem; line-height: 1.25rem;
  }
  .ui-alert:not(:has(> svg)) { grid-template-columns: 1fr; }
  .ui-alert > svg { width: 1rem; height: 1rem; translate: 0 .125rem; color: currentColor; }
  .ui-alert[data-variant="destructive"] { color: var(--destructive); }
  .ui-alert[data-variant="destructive"] .ui-alert-description { color: color-mix(in srgb, var(--destructive) 90%, transparent); }
  .ui-alert-title { grid-column-start: -2; font-weight: 500; min-height: 1rem; letter-spacing: -.01em; }
  .ui-alert-description { grid-column-start: -2; color: var(--muted-foreground); display: grid; gap: .25rem; }
  .ui-alert-description p { margin: 0; }

  /* Skeleton */
  .ui-skeleton { background: var(--accent); border-radius: calc(var(--radius) - 2px); animation: ui-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

  /* Table */
  .ui-table-wrap { position: relative; width: 100%; overflow-x: auto; }
  .ui-table { width: 100%; caption-side: bottom; border-collapse: collapse; font-size: .875rem; }
  .ui-table thead tr { border-bottom: 1px solid var(--border); }
  .ui-table tbody tr { border-bottom: 1px solid var(--border); transition: background-color .15s; }
  .ui-table tbody tr:last-child { border-bottom: 0; }
  .ui-table tbody tr:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
  .ui-table th { height: 2.5rem; padding: 0 .5rem; text-align: left; vertical-align: middle; font-weight: 500; white-space: nowrap; color: var(--foreground); }
  .ui-table td { padding: .5rem; vertical-align: middle; }
  .ui-table caption { margin-top: 1rem; color: var(--muted-foreground); font-size: .875rem; }

  /* Tabs */
  .ui-tabs { display: flex; flex-direction: column; gap: .5rem; }
  .ui-tabs-list {
    display: inline-flex; align-items: center; justify-content: center; width: fit-content; height: 2.25rem; padding: 3px;
    background: var(--muted); color: var(--muted-foreground); border-radius: var(--radius);
  }
  .ui-tabs-trigger {
    display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: .375rem; height: 100%;
    padding: .25rem .5rem; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); background: none; color: inherit;
    font: 500 .875rem/1.25rem var(--font-sans); white-space: nowrap; cursor: pointer; transition: color .15s, box-shadow .15s;
  }
  .ui-tabs-trigger:hover { color: var(--foreground); }
  .ui-tabs-trigger[data-state="active"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
  :root[data-theme="dark"] .ui-tabs-trigger[data-state="active"] { background: color-mix(in srgb, var(--input) 40%, var(--card)); border-color: var(--input); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-tabs-trigger[data-state="active"] { background: color-mix(in srgb, var(--input) 40%, var(--card)); border-color: var(--input); } }
  .ui-tabs-trigger:disabled { pointer-events: none; opacity: .5; }
  .ui-tabs-content { flex: 1; outline: none; }

  /* Overlay surfaces: Dialog, Sheet, Popover, DropdownMenu, Select, Tooltip */
  .ui-overlay { position: fixed; inset: 0; z-index: 50; background: oklch(0% 0 0 / 50%); }
  .ui-dialog {
    position: fixed; left: 50%; top: 50%; z-index: 50; translate: -50% -50%;
    display: grid; gap: 1rem; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.5rem;
    background: var(--background); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  }
  .ui-dialog-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; opacity: .7; border-radius: 4px; cursor: pointer; transition: opacity .15s; }
  .ui-dialog-close:hover { opacity: 1; }
  .ui-dialog-close svg { width: 1rem; height: 1rem; }
  .ui-dialog-header { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
  .ui-dialog-footer { display: flex; flex-direction: column-reverse; gap: .5rem; }
  @media (min-width: 640px) { .ui-dialog-footer { flex-direction: row; justify-content: flex-end; } }
  .ui-dialog-title { margin: 0; font: 600 1.125rem/1 var(--font-sans); letter-spacing: -.01em; }
  .ui-dialog-description { margin: 0; color: var(--muted-foreground); font-size: .875rem; line-height: 1.25rem; }

  .ui-sheet {
    position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 1rem;
    background: var(--background); color: var(--foreground); box-shadow: var(--shadow-lg);
  }
  .ui-sheet[data-side="right"] { inset: 0 0 0 auto; width: 75%; max-width: 24rem; border-left: 1px solid var(--border); }
  .ui-sheet[data-side="left"] { inset: 0 auto 0 0; width: 75%; max-width: 24rem; border-right: 1px solid var(--border); }
  .ui-sheet[data-side="top"] { inset: 0 0 auto 0; border-bottom: 1px solid var(--border); }
  .ui-sheet[data-side="bottom"] { inset: auto 0 0 0; border-top: 1px solid var(--border); }
  .ui-sheet .ui-dialog-header { padding: 1rem 1rem 0; }
  .ui-sheet-body { flex: 1; overflow: auto; padding: 0 1rem 1rem; }

  .ui-popover {
    z-index: 50; width: 18rem; padding: 1rem; outline: none;
    background: var(--popover); color: var(--popover-foreground);
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-md);
  }
  .ui-menu {
    z-index: 50; min-width: 8rem; max-height: var(--radix-dropdown-menu-content-available-height); overflow: hidden auto; padding: .25rem;
    background: var(--popover); color: var(--popover-foreground);
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-md);
  }
  .ui-menu-item {
    position: relative; display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem;
    border-radius: calc(var(--radius) - 4px); font-size: .875rem; line-height: 1.25rem; outline: none; cursor: default; user-select: none;
  }
  a.ui-menu-item { color: inherit; text-decoration: none; }
  .ui-menu-item[data-highlighted] { background: var(--accent); color: var(--accent-foreground); }
  .ui-menu-item[data-disabled] { pointer-events: none; opacity: .5; }
  .ui-menu-item[data-variant="destructive"] { color: var(--destructive); }
  .ui-menu-item[data-variant="destructive"][data-highlighted] { background: color-mix(in srgb, var(--destructive) 10%, transparent); }
  .ui-menu-item[data-inset] { padding-left: 2rem; }
  .ui-menu-item svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); pointer-events: none; }
  .ui-menu-indicator { position: absolute; left: .5rem; display: flex; width: .875rem; height: .875rem; align-items: center; justify-content: center; }
  .ui-menu-item:has(.ui-menu-indicator) { padding-left: 2rem; }
  .ui-menu-label { padding: .375rem .5rem; font: 500 .875rem/1.25rem var(--font-sans); }
  .ui-menu-label[data-inset] { padding-left: 2rem; }
  .ui-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--border); }
  .ui-menu-shortcut { margin-left: auto; color: var(--muted-foreground); font-size: .75rem; letter-spacing: .1em; }

  .ui-select-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; width: fit-content; height: 2.25rem; padding: .5rem .75rem;
    border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--foreground);
    font: 400 .875rem/1.25rem var(--font-sans); white-space: nowrap; box-shadow: var(--shadow-xs); cursor: pointer; outline: none;
  }
  .ui-select-trigger[data-size="sm"] { height: 2rem; }
  .ui-select-trigger[data-placeholder] { color: var(--muted-foreground); }
  .ui-select-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
  .ui-select-trigger svg { width: 1rem; height: 1rem; opacity: .5; }
  .ui-select-content { min-width: var(--radix-select-trigger-width); max-height: var(--radix-select-content-available-height); }
  .ui-select-viewport { padding: 0; }

  .ui-tooltip {
    z-index: 50; width: fit-content; max-width: 20rem; padding: .375rem .75rem; border-radius: calc(var(--radius) - 2px);
    background: var(--primary); color: var(--primary-foreground); font-size: .75rem; line-height: 1rem; text-wrap: balance;
  }
  .ui-tooltip-arrow { fill: var(--primary); }

  /* Switch, Checkbox */
  .ui-switch {
    display: inline-flex; align-items: center; flex-shrink: 0; width: 2rem; height: 1.15rem; padding: 0;
    border: 1px solid transparent; border-radius: 99px; background: var(--input); box-shadow: var(--shadow-xs); cursor: pointer; transition: background-color .15s;
  }
  .ui-switch[data-state="checked"] { background: var(--primary); }
  .ui-switch-thumb { display: block; width: 1rem; height: 1rem; border-radius: 50%; background: var(--background); transition: translate .15s var(--ease); }
  .ui-switch[data-state="checked"] .ui-switch-thumb { translate: calc(100% - 2px) 0; background: var(--primary-foreground); }
  .ui-switch:disabled { opacity: .5; cursor: not-allowed; }
  .ui-checkbox {
    display: grid; place-items: center; flex-shrink: 0; width: 1rem; height: 1rem; padding: 0;
    border: 1px solid var(--input); border-radius: 4px; background: transparent; color: var(--primary-foreground); box-shadow: var(--shadow-xs); cursor: pointer;
  }
  .ui-checkbox[data-state="checked"] { background: var(--primary); border-color: var(--primary); }
  .ui-checkbox svg { width: .875rem; height: .875rem; }

  /* Toast */
  .ui-toaster { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; width: min(22rem, calc(100% - 2rem)); pointer-events: none; }
  .ui-toast {
    display: flex; align-items: center; gap: .75rem; padding: 1rem; pointer-events: auto;
    background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    font-size: .875rem; line-height: 1.25rem;
  }
  .ui-toast-body { flex: 1; min-width: 0; }
  .ui-toast-title { font-weight: 500; }
  .ui-toast-description { color: var(--muted-foreground); }
  .ui-toast[data-variant="error"] .ui-toast-title { color: var(--destructive); }

  /* Collapsible needs no look of its own; ScrollArea is the browser's. */
  .ui-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

  .ui-muted { color: var(--muted-foreground); }
  .ui-mono { font-family: var(--font-mono); font-variant-ligatures: none; }
}

@layer ui.motion {
  @keyframes ui-pulse { 50% { opacity: .5; } }
  @keyframes ui-fade-in { from { opacity: 0; } }
  @keyframes ui-fade-out { to { opacity: 0; } }
  @keyframes ui-zoom-in { from { opacity: 0; scale: .95; } }
  @keyframes ui-zoom-out { to { opacity: 0; scale: .95; } }
  @keyframes ui-slide-from-right { from { translate: 100% 0; } }
  @keyframes ui-slide-to-right { to { translate: 100% 0; } }
  @keyframes ui-slide-from-left { from { translate: -100% 0; } }
  @keyframes ui-slide-to-left { to { translate: -100% 0; } }
  @keyframes ui-slide-from-bottom { from { translate: 0 100%; } }
  @keyframes ui-slide-to-bottom { to { translate: 0 100%; } }
  @keyframes ui-slide-from-top { from { translate: 0 -100%; } }
  @keyframes ui-slide-to-top { to { translate: 0 -100%; } }
  @media (prefers-reduced-motion: no-preference) {
    .ui-overlay[data-state="open"] { animation: ui-fade-in .15s; }
    .ui-overlay[data-state="closed"] { animation: ui-fade-out .15s; }
    .ui-dialog[data-state="open"], .ui-popover[data-state="open"], .ui-menu[data-state="open"], .ui-tooltip[data-state$="open"] { animation: ui-zoom-in .15s var(--ease); }
    .ui-dialog[data-state="closed"], .ui-popover[data-state="closed"], .ui-menu[data-state="closed"], .ui-tooltip[data-state="closed"] { animation: ui-zoom-out .1s; }
    .ui-sheet[data-side="right"][data-state="open"] { animation: ui-slide-from-right .3s var(--ease); }
    .ui-sheet[data-side="right"][data-state="closed"] { animation: ui-slide-to-right .2s; }
    .ui-sheet[data-side="left"][data-state="open"] { animation: ui-slide-from-left .3s var(--ease); }
    .ui-sheet[data-side="left"][data-state="closed"] { animation: ui-slide-to-left .2s; }
    .ui-sheet[data-side="bottom"][data-state="open"] { animation: ui-slide-from-bottom .3s var(--ease); }
    .ui-sheet[data-side="bottom"][data-state="closed"] { animation: ui-slide-to-bottom .2s; }
    .ui-sheet[data-side="top"][data-state="open"] { animation: ui-slide-from-top .3s var(--ease); }
    .ui-sheet[data-side="top"][data-state="closed"] { animation: ui-slide-to-top .2s; }
    .ui-toast { animation: ui-zoom-in .2s var(--ease); }
  }
}