/* 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); }
  }
}

/* The editor's chrome, on ui/'s tokens (ui.css goes first in the built
   app.css). The page being edited is drawn as it publishes (publish.ts's
   BASE), on its own tokens; its components bring their own styles
   (components.tsx). */
body { margin: 0; background: var(--background); font-size: 14px; }
.loading { width: min(72rem, 100% - 32px); margin: 40px auto; color: var(--muted-foreground); }
code { font-family: var(--font-mono); font-size: .9em; font-variant-ligatures: none; }
kbd { font: 500 .75rem/1 var(--font-sans); padding: 2px 5px; border-radius: 4px; background: var(--muted); border: 1px solid var(--border); }

/* The bar. */
.ed-bar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--background) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.ed-bar-inner { width: min(84rem, 100% - 32px); margin-inline: auto; height: 3.25rem; display: flex; align-items: center; gap: 12px; }
.ed-brand { display: flex; align-items: center; gap: 8px; color: var(--foreground); text-decoration: none; font-weight: 600; letter-spacing: -.01em; padding-right: 12px; border-right: 1px solid var(--border); }
.ed-brand img { display: block; }
.where { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted-foreground); white-space: nowrap; }
.where code { color: var(--foreground); }
.where-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.people { display: flex; gap: 6px; margin-left: auto; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.person { font: 500 12px/1 var(--font-sans); padding: 5px 9px; border-radius: 99px; color: white; background: var(--hue); white-space: nowrap; }
.actions { display: flex; align-items: center; gap: 6px; }
.ui-button[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.ui-button svg { width: 1rem; height: 1rem; }
.bar-why { width: min(84rem, 100% - 32px); margin: 12px auto 0; display: grid; gap: 8px; }
.why { color: var(--destructive); font-size: 13px; margin: 6px 0; }
.ui-alert.why { margin: 0; }
.hint { color: var(--muted-foreground); font-size: 13px; line-height: 1.45; margin: 4px 0 10px; }
@media (min-width: 641px) { .narrow-only { display: none; } }

/* Twelve hues for people; a tab picks one by its peer id. */
.hue-0 { --hue: oklch(60% 0.17 25); } .hue-1 { --hue: oklch(62% 0.16 55); } .hue-2 { --hue: oklch(64% 0.15 85); }
.hue-3 { --hue: oklch(60% 0.15 125); } .hue-4 { --hue: oklch(58% 0.14 155); } .hue-5 { --hue: oklch(58% 0.12 185); }
.hue-6 { --hue: oklch(58% 0.13 215); } .hue-7 { --hue: oklch(56% 0.16 255); } .hue-8 { --hue: oklch(55% 0.18 285); }
.hue-9 { --hue: oklch(57% 0.18 315); } .hue-10 { --hue: oklch(59% 0.18 345); } .hue-11 { --hue: oklch(55% 0.02 260); }

/* The page beside its panel. --you is this tab's own hue. */
.desk { --you: var(--hue, var(--ring)); width: min(84rem, 100% - 32px); margin: 24px auto 56px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
/* The page as it publishes: its paper, its type, its tokens. */
.desk > .page {
  margin: 0; padding: 48px 56px; min-width: 0;
  background: light-dark(#fbfaf7, #16181d); font: 17px/1.6 system-ui, sans-serif;
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm);
}
.page { position: relative; color: var(--ink); }
.page a { color: var(--accent); }
/* The first block sits flush with the paper's padding, as it publishes. */
.desk > .page > .block:first-child > * { margin-top: 0; }
.page .tx { display: block; outline: none; white-space: pre-wrap; word-wrap: break-word; min-height: 1lh; }
.page.picking [data-node] { cursor: crosshair; }
.page.picking [data-node]:hover { outline: 1px dashed var(--you); outline-offset: 2px; }
.missing { border: 1px dashed var(--muted); border-radius: 6px; padding: 8px 12px; margin: .6em 0; }
.missing-props { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 13px; }
.missing-props dt { font-family: var(--font-mono); color: var(--muted); }
.missing-props dd { margin: 0; color: var(--ink); }
/* A file's tables: each row and cell is a block of the doc, so the blocks'
   own boxes step aside and the table lays out as one. */
.page .c-table { display: table; border-collapse: collapse; width: 100%; font-size: 15px; }
.page .c-table .block { display: contents; }
.page .c-table .grip { display: none; }
.page .c-row { display: table-row; }
.page .c-table > :first-child .c-row, .page .c-table > .c-row:first-child { font-weight: 600; }
.page .c-cell { display: table-cell; border-bottom: 1px solid var(--line); }
.page .c-markdown { border: 1px dashed var(--line); }
.missing-why { display: block; font-size: 13px; color: var(--muted); }
.empty { border: 1px dashed var(--line); border-radius: 6px; padding: 10px; color: var(--muted); font: 13px/1.4 var(--font-sans); text-align: center; }
.c-made { position: relative; }
.c-made::after { content: ""; position: absolute; inset: -4px; border: 1px dashed color-mix(in srgb, var(--you) 35%, transparent); border-radius: 6px; pointer-events: none; }

/* Blocks: a handle in the margin, a line where a drop will land. */
.block { position: relative; }
.grip {
  position: absolute; left: -30px; top: 2px; width: 22px; height: 26px; padding: 0;
  border: 0; border-radius: calc(var(--radius) - 4px); background: none; color: var(--muted-foreground); cursor: grab;
  font-size: 15px; line-height: 26px; opacity: 0; transition: opacity .12s, background-color .12s;
}
/* A nested block's handle sits further out, so a container's and its first
   child's never overlap; only the innermost block under the pointer shows. */
.block .block > .grip { left: -52px; }
.block .block .block > .grip { left: -74px; }
.block:hover:not(:has(.block:hover)) > .grip, .grip:focus-visible, .block.selected > .grip, .block.picked > .grip { opacity: 1; }
.grip:hover { background: var(--accent); color: var(--accent-foreground); }
.block.selected, .block.picked { outline: 2px solid color-mix(in srgb, var(--you) 55%, transparent); outline-offset: 4px; border-radius: 4px; }
.block.drop-before::before, .block.drop-after::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--you); z-index: 2;
}
.block.drop-before::before { top: -3px; }
.block.drop-after::after { bottom: -3px; }
.flag { position: absolute; right: 0; top: -18px; font: 500 11px/1.5 var(--font-sans); padding: 0 6px; border-radius: 4px 4px 0 0; background: var(--hue); color: white; z-index: 3; }
.badge { position: absolute; right: -28px; top: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: oklch(80% 0.13 85); color: oklch(25% 0.05 85); font: 600 11px/18px var(--font-sans); text-align: center; }
.comment-mark { background: oklch(88% 0.12 90 / .55); border-bottom: 2px solid oklch(75% 0.15 85); }

/* Other people's carets. */
.cursors { position: absolute; inset: 0; pointer-events: none; }
.caret { position: absolute; left: 0; top: 0; width: 2px; background: var(--hue); }
.caret-name { position: absolute; left: 0; bottom: 100%; font: 500 11px/1.4 var(--font-sans); padding: 0 5px; border-radius: 3px 3px 3px 0; background: var(--hue); color: white; white-space: nowrap; }

/* `/` in an empty block: a menu of the library. */
.slash-menu { position: absolute; left: 0; top: 0; z-index: 6; width: 220px; max-height: 18rem; font-family: var(--font-sans); }
.slash-menu .library { grid-template-columns: 1fr; gap: 0; }
.slash-menu .ui-menu-item { width: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.slash-menu .ui-menu-item:hover, .slash-menu .ui-menu-item:focus-visible { background: var(--accent); color: var(--accent-foreground); box-shadow: none; }

/* The source view. */
.source { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 16px; box-shadow: var(--shadow-sm); }
.source .hint { margin-top: 0; }
.source-text.ui-textarea { min-height: 70vh; font: 13px/1.6 var(--font-mono); font-variant-ligatures: none; tab-size: 2; padding: 12px; field-sizing: fixed; }

/* The panel. */
.side {
  position: sticky; top: calc(3.25rem + 20px); max-height: calc(100vh - 3.25rem - 40px); overflow: auto;
  background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.side-tabs-root.ui-tabs { gap: 0; }
.side .side-tabs { display: flex; width: auto; margin: 10px 10px 0; }
.side .side-tabs .ui-tabs-trigger { font-size: 13px; padding: .25rem .375rem; }
.side-body { padding: 12px 14px 16px; }
.side-body > div > section:first-child > h3:first-child { margin-top: 4px; }
.side h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin: 16px 0 6px; }
.side h3 code { font-size: 11px; color: var(--muted-foreground); font-weight: 400; }
.side h4 { font-size: 13px; margin: 12px 0 4px; }
.side section + section { border-top: 1px solid var(--border); margin-top: 14px; }
.side .ui-input, .side .ui-native-select { height: 2rem; font-size: 13px; }
.side .ui-textarea { font-size: 13px; margin-bottom: 8px; }
.pencil { width: 100%; }
.rows { width: 100%; border-collapse: collapse; }
.rows th { text-align: left; font-weight: 400; font-family: var(--font-mono); font-size: 12px; padding: 4px 8px 4px 0; white-space: nowrap; vertical-align: top; line-height: 2rem; }
.rows td { padding: 4px 0; }
.rows td .ui-input { width: 100%; }
.rows .value { display: flex; align-items: center; gap: 2px; }
.rows .meta { display: flex; gap: 8px; font-size: 11px; min-width: 0; margin-top: 2px; }
.rows .computed { color: var(--muted-foreground); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.src { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.src-set { color: var(--you); }
.src-token { color: var(--success); }
.reset.ui-button { width: 1.75rem; height: 1.75rem; color: var(--muted-foreground); }
.add { display: flex; gap: 4px; margin-top: 8px; }
.add .ui-native-select { flex: 1.3; } .add .ui-input { flex: 1; }
.library { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.library .ui-button { width: 100%; justify-content: flex-start; }
.field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px; }
.field > span { color: var(--muted-foreground); font-weight: 500; }
.field.check { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.field.check > span { color: var(--foreground); font-weight: 400; }
.field .as { flex-basis: 100%; }
.def { margin: 8px 0; }
.def-edit { margin: 8px 0 0; padding: 12px 12px 12px 40px; font: 15px/1.55 system-ui, sans-serif; background: light-dark(#fbfaf7, #16181d); border: 1px solid var(--border); border-radius: var(--radius); }
.filter { display: flex; gap: 4px; margin: 12px 0 8px; }
.threads, .versions, .changes { list-style: none; padding: 0; margin: 0; }
.thread, .versions li { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; background: var(--background); }
.thread.resolved { opacity: .7; }
.thread .on { display: block; border: 0; padding: 0; background: none; text-align: left; color: var(--muted-foreground); font: inherit; font-size: 12px; cursor: pointer; }
.thread .on:hover { color: var(--foreground); }
.thread q { color: var(--foreground); }
.message { margin: 6px 0; line-height: 1.45; }
.thread form { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.thread form .ui-input { flex: 1 1 100%; }
.versions li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v-head { display: flex; justify-content: space-between; gap: 8px; flex-basis: 100%; font-weight: 500; }
.v-head time { color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.authors { color: var(--muted-foreground); font-size: 12px; margin: 0 0 4px; flex-basis: 100%; }
.preview { flex-basis: 100%; }
.preview .page { margin: 8px 0; padding: 20px; zoom: .55; background: light-dark(#fbfaf7, #16181d); font: 17px/1.6 system-ui, sans-serif; border: 1px solid var(--border); border-radius: var(--radius); }
.diff { font: 11.5px/1.45 var(--font-mono); white-space: pre-wrap; word-break: break-word; margin: 0; }
.diff .add { color: var(--success); display: block; } .diff .del { color: var(--destructive); display: block; }
.ask .ui-button, .suggestion .ui-button { margin-right: 4px; }
.changes li { margin: 6px 0; }
.changes .refused { color: var(--muted-foreground); }

@media (max-width: 920px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .ed-bar-inner { gap: 8px; }
  .where, .people .person:not(.me), .wide-only { display: none; }
  .ed-brand span { display: none; }
  .desk { width: calc(100% - 16px); margin-top: 8px; gap: 12px; }
  .desk > .page { padding: 28px 18px 28px 40px; }
  .grip, .block .block > .grip, .block .block .block > .grip { left: -28px; }
}