/* Design: tokens, element defaults, and components in one file. No build, no dependencies.
   Layers match Tailwind's, so app utilities and unlayered app CSS always win. */

@layer theme, base, components, utilities;

@layer theme {
  :root {
    color-scheme: light dark;

    /* Grays carry the UI. One accent, spent on meaning. Danger is urgent or destructive. */
    --bg: light-dark(#f7f7f8, #0f0f11);
    /* A hair off white, so the pure white inner edge catches the light. */
    --surface: light-dark(#fafafb, #18181b);
    --edge: light-dark(#fff, rgb(255 255 255 / 0.06));
    --ink: light-dark(#1c1c1e, #f5f5f7);
    --text: light-dark(#3a3a3c, #d1d1d6);
    --muted: light-dark(#606065, #8e8e93);
    --faint: light-dark(#c7c7cc, #48484a);
    --line: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
    --hover: light-dark(rgb(0 0 0 / 0.035), rgb(255 255 255 / 0.045));
    --select: light-dark(rgb(0 0 0 / 0.055), rgb(255 255 255 / 0.075));
    /* Accent fills and rings; accent-ink is the same hue when it has to carry text. */
    --accent: light-dark(#0b8cd6, #49adf5);
    --accent-ink: light-dark(#00639d, #49adf5);
    --danger: light-dark(#b82128, #ff6369);
    /* Shadow color. Each layer takes a share of it. */
    --shade: light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
    /* What an element sits on. Surfaces reset it, so rings and sticky headers match their ground. */
    --plane: var(--bg);

    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --type-xs: 11.5px;
    --type-sm: 12.5px;
    --type-md: 13.5px;
    --type-lg: 15px;
    --type-xl: 20px;
    --type-2xl: 26px;

    /* Nothing is perfectly square; xs is the least any shape gets. */
    --corner-xs: 4px;
    --corner-sm: 6px;
    --corner-md: 8px;
    --corner-lg: 12px;
    --corner-xl: 16px;
    /* Shadows are layered: a 0.5px ring, the bright inner edge, then soft drops. */
    --bevel:
      0 0 0 0.5px var(--line), inset 0 0 0 0.5px var(--edge),
      0 1px 1px color-mix(in srgb, var(--shade) 35%, transparent),
      0 1px 3px color-mix(in srgb, var(--shade) 27%, transparent);
    --raised:
      0 0 0 0.5px var(--line), inset 0 0 0 0.5px var(--edge),
      0 1px 3px color-mix(in srgb, var(--shade) 50%, transparent),
      0 2px 8px color-mix(in srgb, var(--shade) 40%, transparent);
    /* Menus, modals, drawers, toasts: the ring, the edge, and four drops, deep enough to read over a scrim. */
    --floating:
      0 0 0 0.5px var(--line), inset 0 0 0 0.5px var(--edge),
      0 1px 3px color-mix(in srgb, var(--shade) 50%, transparent),
      0 4px 12px color-mix(in srgb, var(--shade) 50%, transparent),
      0 12px 32px color-mix(in srgb, var(--shade) 75%, transparent),
      0 32px 72px var(--shade);

    /* Density. Apps may retune these; touch screens grow them. */
    --control: 28px;
    --row: 40px;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* A damped spring with a 2% overshoot, for things that travel a distance. */
    --spring: linear(0, 0.054, 0.177, 0.328, 0.48, 0.618, 0.734, 0.826, 0.896, 0.946, 0.98, 1.001, 1.013, 1.019, 1.02, 1.019, 1.016, 1.013, 1.01, 1.007, 1.005, 1.003, 1);
    --fast: 140ms;
    --enter: 240ms;
    --exit: 160ms;
    --fade: 600ms;
  }
  :root[data-theme="light"] {
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
  }
  @media (pointer: coarse) {
    :root {
      --control: 40px;
      --row: 48px;
    }
  }
}

@layer base {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  :root {
    font: 450 var(--type-md) / 1.45 var(--font);
    color: var(--text);
    background: var(--bg);
    accent-color: var(--accent);
    interpolate-size: allow-keywords;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    min-height: 100dvh;
  }
  h1,
  h2,
  h3,
  h4 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  h1 {
    font-size: var(--type-xl);
  }
  h2 {
    font-size: var(--type-lg);
  }
  h3,
  h4 {
    font-size: var(--type-md);
  }
  p {
    text-wrap: pretty;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  :where(p, li, dd) a:not([class]) {
    text-decoration: underline;
    text-decoration-color: var(--faint);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--fast);
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
  }
  button,
  summary,
  select,
  label:has(input:not(:disabled)),
  :where(input[type="checkbox"], input[type="radio"]) {
    cursor: pointer;
  }
  a,
  button,
  input,
  select,
  textarea,
  summary,
  label {
    touch-action: manipulation;
  }
  :disabled,
  [aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  img,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }
  img,
  video,
  canvas,
  iframe {
    border-radius: var(--corner-xs);
  }
  img,
  video {
    height: auto;
  }
  ::placeholder {
    color: var(--muted);
    opacity: 1;
  }
  ::selection {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
  }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  code,
  kbd,
  pre,
  samp {
    font-family: var(--mono);
    font-size: 0.92em;
  }
  kbd {
    padding: 1px 5px;
    border-radius: var(--corner-xs);
    box-shadow: var(--bevel);
    font-size: var(--type-xs);
    color: var(--muted);
    background: var(--surface);
  }
  hr {
    border: 0;
    border-top: 0.5px solid var(--line);
  }
  table {
    border-collapse: collapse;
  }
  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }
  summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  /* A caret in a round target that fills on hover, and turns as it opens. */
  summary::before {
    content: "";
    flex: none;
    width: calc(var(--control) - 4px);
    height: calc(var(--control) - 4px);
    margin-inline-start: -6px;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition:
      rotate var(--enter) var(--ease),
      background-color var(--fast);
  }
  details[open] > summary::before {
    rotate: 90deg;
  }
  details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size var(--exit) var(--ease),
      content-visibility var(--exit) allow-discrete;
  }
  details[open]::details-content {
    block-size: auto;
    transition-duration: var(--enter);
  }
  /* theme.js fades light and dark as one view transition; elements hold still underneath it. */
  :root:active-view-transition-type(theme) :is(*, ::before, ::after) {
    transition: none !important;
  }
  :root:active-view-transition-type(theme)::view-transition-old(root),
  :root:active-view-transition-type(theme)::view-transition-new(root) {
    animation-duration: var(--fade);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  .icon {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate var(--fast) var(--ease);
  }

  /* Buttons: bordered by default; primary is ink, not accent. */

  .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--control);
    padding: 0 12px;
    border-radius: var(--corner-md);
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink);
    background-color: var(--surface);
    box-shadow: var(--bevel);
    user-select: none;
    transition:
      background-color var(--fast),
      color var(--fast),
      box-shadow var(--fast),
      opacity var(--fast),
      scale var(--fast) var(--ease);
  }
  .button:active:not(:disabled) {
    scale: 0.97;
  }
  .button.primary {
    color: var(--bg);
    background-color: var(--ink);
    box-shadow:
      inset 0 0.5px 0 rgb(255 255 255 / 0.16),
      0 1px 1px color-mix(in srgb, var(--shade) 55%, transparent),
      0 1px 3px color-mix(in srgb, var(--shade) 40%, transparent);
  }
  .button.quiet,
  .button.icon {
    background-color: transparent;
    box-shadow: none;
  }
  .button.quiet {
    color: var(--text);
  }
  .button.icon {
    width: var(--control);
    padding: 0;
    color: var(--muted);
  }
  .button.danger {
    color: var(--danger);
  }
  .button.small {
    height: calc(var(--control) - 4px);
    padding: 0 8px;
    font-size: var(--type-sm);
  }
  .button.small.icon {
    width: calc(var(--control) - 4px);
  }
  .button:is([aria-expanded="true"], :has(+ :popover-open)) {
    background-color: color-mix(in srgb, var(--surface), var(--ink) 6%);
  }
  .button:is(.quiet, .icon):is([aria-expanded="true"], :has(+ :popover-open)) {
    background-color: var(--select);
  }
  .button[aria-busy="true"] {
    cursor: progress;
  }
  /* Busy: a spinner joins the label, which should end in an ellipsis ("Saving…"). */
  .spinner,
  .button[aria-busy="true"]::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: turn 700ms linear infinite;
  }
  @keyframes turn {
    to {
      rotate: 1turn;
    }
  }
  /* Icon buttons show their label as a tooltip, after a beat. */
  .button.icon[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    z-index: 1;
    padding: 4px 8px;
    border-radius: var(--corner-sm);
    white-space: nowrap;
    pointer-events: none;
    font-size: var(--type-xs);
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--floating);
    opacity: 0;
    translate: -50% 0;
    transition:
      opacity var(--fast),
      top var(--fast) var(--ease);
  }
  /* At the end of a row, the tooltip aligns right so it stays inside its container. */
  .button.icon[aria-label]:last-child::after {
    left: auto;
    right: 0;
    translate: none;
  }
  .button.icon[aria-label]:focus-visible::after {
    top: calc(100% + 6px);
    opacity: 1;
  }

  /* Fields. A .field holds a label, a control, and an optional <small> hint or error. */

  .field {
    display: grid;
    align-content: start;
    gap: 6px;
    font-size: var(--type-sm);
    font-weight: 500;
    color: var(--text);
  }
  .field small {
    font-size: var(--type-xs);
    font-weight: 450;
    color: var(--muted);
  }
  .field:has([aria-invalid="true"]) small {
    color: var(--danger);
  }
  /* An .input is the control itself, or a wrapper around one with icons or units beside it. */
  .input {
    width: 100%;
    min-height: var(--control);
    padding: 0 10px;
    border-radius: var(--corner-md);
    font-size: var(--type-md);
    font-weight: 450;
    color: var(--ink);
    background-color: var(--surface);
    box-shadow:
      inset 0 0 0 0.5px var(--line),
      0 0 0 0 transparent;
    transition: box-shadow var(--enter) var(--ease);
  }
  .input:has(> input) {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: text;
  }
  .input > input {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    outline: none;
  }
  .input > :not(input) {
    color: var(--muted);
  }
  .input:is(:focus-visible, :has(> :focus-visible)) {
    outline: none;
    box-shadow:
      inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 70%, transparent),
      0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .input:is([aria-invalid="true"], :has(> [aria-invalid="true"])) {
    box-shadow:
      inset 0 0 0 0.5px var(--danger),
      0 0 0 0 transparent;
  }
  .input:is([aria-invalid="true"], :has(> [aria-invalid="true"])):is(:focus-visible, :has(> :focus-visible)) {
    box-shadow:
      inset 0 0 0 0.5px var(--danger),
      0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
  }
  textarea.input {
    padding: 7px 10px;
    min-height: calc(var(--control) * 2.5);
    line-height: 1.5;
    resize: vertical;
    field-sizing: content;
  }
  select.input {
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5l3 3 3-3'/%3E%3C/svg%3E");
    background-position: right 7px center;
    background-size: 16px;
    background-repeat: no-repeat;
  }

  /* Checkboxes and radios: native inputs, drawn here so the mark springs in. */
  :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
    appearance: none;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: var(--corner-xs);
    color: var(--faint);
    background: var(--surface);
    box-shadow:
      0 0 0 0.5px color-mix(in srgb, var(--ink) 30%, transparent),
      inset 0 0 0 0.5px var(--edge),
      0 1px 2px color-mix(in srgb, var(--shade) 35%, transparent);
    transition:
      background-color var(--fast),
      color var(--fast),
      box-shadow var(--fast);
  }
  input[type="radio"] {
    border-radius: 50%;
  }
  input[type="checkbox"]:not([role="switch"])::before {
    content: "";
    width: 4.5px;
    height: 8px;
    margin-top: -2px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    border-radius: 0 0 1px 0;
    rotate: 45deg;
  }
  input[type="checkbox"]:indeterminate::before {
    width: 8px;
    height: 0;
    margin-top: 0;
    border-width: 0 0 1.5px;
    rotate: 0deg;
  }
  input[type="radio"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"])::before {
    opacity: 0;
    scale: 0.4;
    transition:
      opacity var(--fast),
      scale var(--enter) var(--spring);
  }
  :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):is(:checked, :indeterminate) {
    color: var(--bg);
    background: var(--accent);
    box-shadow:
      0 0 0 0.5px var(--accent),
      inset 0 0.5px 0 rgb(255 255 255 / 0.2),
      0 1px 2px color-mix(in srgb, var(--shade) 35%, transparent);
  }
  :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):is(:checked, :indeterminate)::before {
    opacity: 1;
    scale: 1;
  }
  input[type="checkbox"][role="switch"] {
    appearance: none;
    position: relative;
    flex: none;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: var(--faint);
    box-shadow:
      inset 0 0 0 0.5px var(--line),
      inset 0 1px 2px color-mix(in srgb, var(--shade) 35%, transparent);
    transition: background-color var(--enter);
  }
  input[type="checkbox"][role="switch"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
      0 0 0 0.5px rgb(0 0 0 / 0.04),
      0 1px 2px rgb(0 0 0 / 0.15),
      0 2px 4px rgb(0 0 0 / 0.08);
    transition: translate var(--enter) var(--spring);
  }
  input[type="checkbox"][role="switch"]:checked {
    background: var(--accent);
  }
  input[type="checkbox"][role="switch"]:checked::before {
    translate: 12px 0;
  }

  /* Choosing: one of a few (segmented), filters and tags (chip), status (badge), places (tabs). */

  .segmented {
    position: relative;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--corner-md);
    background: var(--hover);
  }
  .segmented > * {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: calc(var(--control) - 4px);
    padding: 0 10px;
    border-radius: var(--corner-sm);
    font-size: var(--type-sm);
    font-weight: 500;
    color: var(--muted);
    transition:
      color var(--fast),
      background-color var(--enter) var(--ease),
      box-shadow var(--enter) var(--ease);
  }
  .segmented > :is([aria-pressed="true"], [aria-selected="true"], :has(:checked)) {
    color: var(--ink);
  }
  /* Selection indicators travel from the old choice to the new one: anchored to the pick, they move when it moves.
     A segmented control or tab bar always has one choice picked. (A :has() check here stops WebKit animating it.) */
  @supports (anchor-scope: --a) {
    .segmented {
      anchor-scope: --picked;
    }
    .segmented > :is([aria-pressed="true"], [aria-selected="true"], :has(:checked)) {
      anchor-name: --picked;
    }
    .segmented::before {
      content: "";
      position: absolute;
      position-anchor: --picked;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      border-radius: var(--corner-sm);
      background: var(--surface);
      box-shadow: var(--bevel);
      transition:
        left var(--enter) var(--ease),
        right var(--enter) var(--ease);
    }
  }
  @supports not (anchor-scope: --a) {
    .segmented > :is([aria-pressed="true"], [aria-selected="true"], :has(:checked)) {
      background-color: var(--surface);
      box-shadow: var(--bevel);
    }
  }
  .segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .segmented > :has(:focus-visible) {
    outline: 2px solid var(--accent);
  }
  .chip,
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: var(--type-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--muted);
  }
  .chip {
    box-shadow: inset 0 0 0 0.5px var(--line);
    transition:
      color var(--fast),
      background-color var(--fast),
      box-shadow var(--fast);
  }
  .badge {
    font-weight: 500;
    background: var(--hover);
  }
  .chip[aria-pressed="true"],
  .badge.accent {
    color: var(--accent-ink);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: inset 0 0 0 0.5px transparent;
  }
  .badge.danger {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
  }
  .tabs {
    position: relative;
    display: flex;
    gap: 16px;
    border-bottom: 0.5px solid var(--line);
  }
  .tabs > * {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 1px;
    font-weight: 500;
    color: var(--muted);
    transition: color var(--fast);
  }
  /* The underline is a rounded bar that grows from the middle. */
  .tabs > ::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
    opacity: 0;
    scale: 0 1;
    transition:
      opacity var(--fast),
      scale var(--enter) var(--ease);
  }
  .tabs > :is([aria-current="page"], [aria-selected="true"]) {
    color: var(--ink);
  }
  @supports (anchor-scope: --a) {
    .tabs {
      anchor-scope: --tab;
    }
    .tabs > :is([aria-current="page"], [aria-selected="true"]) {
      anchor-name: --tab;
    }
    .tabs::after {
      content: "";
      position: absolute;
      position-anchor: --tab;
      left: anchor(left);
      right: anchor(right);
      bottom: -1px;
      height: 2px;
      border-radius: 1px;
      background: var(--ink);
      transition:
        left var(--enter) var(--ease),
        right var(--enter) var(--ease);
    }
  }
  @supports not (anchor-scope: --a) {
    .tabs > :is([aria-current="page"], [aria-selected="true"])::after {
      opacity: 1;
      scale: 1;
    }
  }

  /* People */

  .avatar {
    --hue: 240;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    color: light-dark(hsl(var(--hue) 45% 32%), hsl(var(--hue) 70% 86%));
    background: light-dark(hsl(var(--hue) 65% 91%), hsl(var(--hue) 28% 26%));
    box-shadow: 0 0 0 1.5px var(--plane);
  }
  .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
  }

  /* Collections. Hover fills bleed past the text edge, so text lines up with the column. */

  .list {
    display: grid;
    gap: 2px;
    margin-inline: -8px;
    padding: 0;
    list-style: none;
  }
  .row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--row);
    padding: 0 8px;
    border-radius: var(--corner-md);
    transition: background-color var(--fast);
  }
  .row:is([aria-selected="true"], [aria-current="page"], [aria-current="true"]) {
    background: var(--select);
  }
  .row:focus-visible {
    outline-offset: -2px;
  }
  /* Tables read like lists: no row lines, rounded fills, numbers aligned right. */
  .table {
    width: calc(100% + 16px);
    margin-inline: -8px;
    border-collapse: separate;
    border-spacing: 0 2px;
    font-variant-numeric: tabular-nums;
  }
  .table th {
    position: sticky;
    top: 0;
    height: 32px;
    padding: 0 12px;
    text-align: start;
    white-space: nowrap;
    font-size: var(--type-xs);
    font-weight: 500;
    color: var(--muted);
    background: var(--plane);
    box-shadow: inset 0 -0.5px 0 var(--line);
  }
  .table td {
    height: var(--row);
    padding: 0 12px;
    transition: background-color var(--fast);
  }
  .table :is(th, td):first-child {
    padding-left: 8px;
  }
  .table :is(th, td):last-child {
    padding-right: 8px;
  }
  .table td:first-child {
    border-radius: var(--corner-md) 0 0 var(--corner-md);
  }
  .table td:last-child {
    border-radius: 0 var(--corner-md) var(--corner-md) 0;
  }
  .table .num {
    text-align: end;
  }
  .table tr[aria-selected="true"] > td {
    background: var(--select);
  }
  /* Label and value pairs, like a record's details. */
  .properties {
    display: grid;
    grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
    align-items: baseline;
    gap: 10px 16px;
  }
  .properties dt {
    font-size: var(--type-sm);
    color: var(--muted);
  }
  .properties dd {
    color: var(--ink);
  }

  /* Surfaces: raised cards; floating menus, sheets, and toasts in the top layer, so no z-index. */

  .card {
    --plane: var(--surface);
    padding: 16px;
    border-radius: var(--corner-lg);
    background: var(--surface);
    box-shadow: var(--raised);
  }
  :is(a, button).card {
    display: block;
    width: 100%;
    text-align: start;
    transition:
      box-shadow var(--enter) var(--ease),
      translate var(--enter) var(--ease);
  }
  .banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--corner-lg);
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 8%, var(--plane));
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .banner.danger {
    background: color-mix(in srgb, var(--danger) 8%, var(--plane));
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--danger) 22%, transparent);
  }
  .banner > :not(.button, .icon) {
    flex: 1;
  }
  .menu,
  .sheet,
  .toast {
    --plane: var(--surface);
    border: 0;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--floating);
    opacity: 0;
    transition:
      opacity var(--exit),
      translate var(--exit) var(--ease),
      scale var(--exit) var(--ease),
      display var(--exit) allow-discrete,
      overlay var(--exit) allow-discrete;
  }
  :is(.menu, .toast):popover-open,
  .sheet[open] {
    opacity: 1;
    translate: 0;
    scale: 1;
    transition-duration: var(--enter);
  }
  .menu {
    min-width: 180px;
    padding: 4px;
    border-radius: var(--corner-md);
    scale: 0.97;
    translate: 0 -4px;
  }
  @starting-style {
    .menu:popover-open {
      opacity: 0;
      scale: 0.97;
      translate: 0 -4px;
    }
  }
  @supports (position-area: bottom) {
    .menu {
      inset: auto;
      margin: 6px 0;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
    }
  }
  /* Menu items: buttons, links, or listbox options. */
  .menu > :is(button, a, [role="option"]) {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: calc(var(--control) + 2px);
    padding: 0 8px;
    border-radius: var(--corner-xs);
    text-align: start;
    color: var(--ink);
    cursor: pointer;
    transition:
      background-color var(--fast),
      color var(--fast);
  }
  .menu > [aria-selected="true"] {
    font-weight: 500;
    color: var(--accent-ink);
  }
  .menu > :is(button, a, [role="option"]):focus-visible {
    outline: none;
    color: var(--bg);
    background: var(--accent-ink);
  }
  .menu > :is(button, a, [role="option"]) + :is(button, a, [role="option"]) {
    margin-top: 2px;
  }
  .menu > .danger {
    color: var(--danger);
  }
  .menu > hr {
    margin: 4px 8px;
  }
  .sheet {
    width: min(560px, calc(100% - 32px));
    max-height: min(80dvh, 720px);
    margin: 12vh auto auto;
    padding: 20px;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: var(--corner-lg);
    scale: 0.98;
  }
  /* Modals grow into place on a spring and shrink away a little as they leave. */
  .sheet[open] {
    transition-timing-function: var(--spring);
  }
  @starting-style {
    .sheet[open] {
      opacity: 0;
      scale: 0.95;
    }
  }
  .sheet::backdrop {
    background: rgb(0 0 0 / 0);
    transition:
      background-color var(--exit),
      display var(--exit) allow-discrete,
      overlay var(--exit) allow-discrete;
  }
  .sheet[open]::backdrop {
    background: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.45));
    transition-duration: var(--enter);
  }
  @starting-style {
    .sheet[open]::backdrop {
      background: rgb(0 0 0 / 0);
    }
  }
  .sheet.drawer {
    width: min(440px, calc(100% - 16px));
    height: calc(100dvh - 16px);
    max-height: none;
    margin: 8px 8px 8px auto;
    scale: 1;
  }
  .sheet.drawer:not([open]) {
    translate: 24px 0;
  }
  @starting-style {
    .sheet.drawer[open] {
      opacity: 0;
      translate: 24px 0;
      scale: 1;
    }
  }
  .sheet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -4px 0 12px;
  }
  .sheet footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
  }
  .toast {
    inset: auto 0 max(24px, env(safe-area-inset-bottom));
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 12px;
    border-radius: var(--corner-md);
    font-weight: 500;
    color: var(--ink);
    translate: 0 12px;
    transition-timing-function: var(--spring);
  }
  @starting-style {
    .toast:popover-open {
      opacity: 0;
      translate: 0 12px;
    }
  }

  .empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 18vh 16px;
    text-align: center;
  }
  .empty p {
    max-width: 36ch;
    color: var(--muted);
  }

  /* Hover only where hover exists, so taps don't leave sticky highlights.
     :where() keeps hover weaker than selected and pressed states.
     Hover previews the click: chevrons dip, a close × turns, a knob leans, a faint mark appears. */

  @media (hover: hover) {
    .button:hover {
      background-color: color-mix(in srgb, var(--surface), var(--ink) 4%);
    }
    .button:is(.quiet, .icon):hover {
      background-color: var(--hover);
    }
    .button.primary:hover {
      background-color: var(--ink);
      opacity: 0.86;
    }
    .button.danger:hover {
      background-color: color-mix(in srgb, var(--danger) 8%, var(--surface));
    }
    .button.icon:hover {
      color: var(--ink);
    }
    .button.icon[aria-label]:hover::after {
      top: calc(100% + 6px);
      opacity: 1;
      transition-delay: 600ms;
    }
    .button:is([popovertarget], [aria-haspopup]):hover > .icon:last-child {
      translate: 0 1.5px;
    }
    :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):not(:checked, :indeterminate):hover::before {
      opacity: 1;
      scale: 0.85;
    }
    input[type="checkbox"][role="switch"]:hover {
      background: color-mix(in srgb, var(--faint), var(--ink) 12%);
    }
    input[type="checkbox"][role="switch"]:checked:hover {
      background: color-mix(in srgb, var(--accent), black 10%);
    }
    .segmented > :not([aria-pressed="true"], [aria-selected="true"], :has(:checked)):hover {
      color: var(--text);
      background-color: color-mix(in srgb, var(--surface) 50%, transparent);
    }
    :where(.chip, .row, .menu > :is(button, a, [role="option"])):hover,
    :where(.table tbody tr:hover > td) {
      background-color: var(--hover);
    }
    :where(.chip):not([aria-pressed="true"]):hover {
      color: var(--accent-ink);
    }
    :where(.tabs > *):hover {
      color: var(--text);
    }
    .tabs > :not([aria-current="page"], [aria-selected="true"]):hover::after {
      opacity: 0.15;
      scale: 1;
    }
    summary:hover::before {
      background-color: var(--hover);
    }
    :where(p, li, dd) a:not([class]):hover {
      text-decoration-color: currentColor;
    }
    :is(a, button).card:hover {
      translate: 0 -1px;
      box-shadow: var(--floating);
    }
  }

  /* Touch: bigger targets, and 16px inputs so iOS doesn't zoom. Phones get floating bottom sheets. */

  @media (pointer: coarse) {
    .input {
      font-size: 16px;
    }
  }
  @media (max-width: 799px) {
    .sheet {
      width: calc(100% - 16px);
      max-width: none;
      max-height: calc(100dvh - 16px - env(safe-area-inset-top));
      margin: auto 8px 8px;
      padding-bottom: max(20px, env(safe-area-inset-bottom));
      border-radius: var(--corner-xl);
      translate: 0 calc(100% + 16px);
      scale: 1;
      transition-timing-function: var(--spring);
    }
    @starting-style {
      .sheet[open] {
        translate: 0 calc(100% + 16px);
        scale: 1;
      }
    }
  }
}