:root {
  /* One ground for header, page and lists: the UI is flat, so rows and
     sections are told apart by lines and space, not by a change of surface. */
  --color-surface: light-dark(white, var(--zinc-900));
  --color-bg: var(--color-surface);
  /* What floats over the page (menus) needs a ground of its own: a shadow
     barely reads on a dark page. */
  --color-surface-raised: light-dark(white, var(--zinc-800));
  /* A row picked up from the list (unfolded, swiped open): a step lighter than
     the page, but short of the secondary buttons sitting on it, so they don't
     vanish into it. Dark mode has no palette step between the two. */
  --color-surface-selected: light-dark(var(--zinc-50), color-mix(in oklab, var(--zinc-900), var(--zinc-800)));
  --color-surface-negative: light-dark(var(--red-100), var(--red-950));
  --color-text: light-dark(var(--zinc-950), white);
  --color-text-reversed: light-dark(white, var(--zinc-950));
  /* Text beside a control rather than content: full strength on a light page,
     a shade back from white on a dark one, where white glares. */
  --color-text-soft: light-dark(var(--zinc-950), var(--zinc-500));
  --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
  --color-text-negative: light-dark(var(--red-600), var(--red-400));
  --color-negative: light-dark(var(--red-600), var(--red-700));
  --color-text-on-negative: white;
  --color-link: light-dark(var(--blue-700), var(--blue-400));
  --color-border-light: light-dark(var(--zinc-100), var(--zinc-800));
  --color-border: light-dark(var(--zinc-200), var(--zinc-700));
  --color-border-dark: light-dark(var(--zinc-400), var(--zinc-600));
  --color-selected: light-dark(var(--sky-100), var(--sky-950));
  --color-selected-dark: light-dark(var(--blue-300), var(--blue-800));
  --color-highlight: light-dark(var(--yellow-200), var(--yellow-900));
  --color-primary: light-dark(var(--zinc-900), var(--zinc-50));
  --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));

  /* Glass: controls that float over the page let it show through, frosted,
     a shade lighter than the page so they lift without changing its color.
     Light catches the glass at the top and, fainter, bounces back up from the
     bottom; those two rims and sheens are what make a translucent shape read
     as a thing rather than a smudge. */
  --color-glass: light-dark(rgb(from white r g b / .55), rgb(from var(--zinc-600) r g b / .45));
  --color-glass-hover: rgb(from var(--color-text) r g b / .06);
  --color-glass-rim: light-dark(white, rgb(from white r g b / .35));
  --color-glass-rim-low: light-dark(rgb(from white r g b / .8), rgb(from white r g b / .18));
  --color-glass-edge: light-dark(rgb(from black r g b / .07), rgb(from black r g b / .5));
  --glass-sheen: linear-gradient(to bottom,
    light-dark(rgb(from white r g b / .9), rgb(from white r g b / .1)), transparent 40%,
    transparent 65%, light-dark(rgb(from white r g b / .6), rgb(from white r g b / .05)));
  --glass-filter: var(--blur-xs) var(--saturate-150);
  --glass-shadow:
    inset 0 var(--border) 0 var(--color-glass-rim),
    inset 0 calc(var(--border) * -1) 0 var(--color-glass-rim-low),
    0 0 0 var(--border) var(--color-glass-edge),
    var(--shadow-lg);

  /* Section dividers run edge to edge of the page, past the content's gutters.
     A border-image outset only paints, so the line overflows without scrolling. */
  --divider-block-start: linear-gradient(var(--color-border) 0 0) 1 0 0 / var(--border) 0 0 / 0 100vw;
  --divider-block-end: linear-gradient(var(--color-border) 0 0) 0 0 1 / 0 0 var(--border) / 0 100vw;

  /* Barcodes are machine strings, not prose: monospace keeps the digits legible
     and keeps them from reading as part of the product name. */
  --font-code: var(--font-monospace-code);
}

* {
  border-color: var(--color-border);
  scrollbar-color: #C1C1C1 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
}

/*
 * iOS standalone PWAs paint the status bar / notch area with the body's
 * background color, so body carries the header's surface color and #main
 * paints the actual page background below it.
 */
body {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
  color: var(--color-text);
}

/*
 * Touch devices: iOS Safari zooms into any field whose font-size is below 16px,
 * so bump the inputs there instead of locking the viewport scale — pinch-zoom
 * stays available on both phones and desktop.
 */
@media (pointer: coarse) {
  :root {
    --input-font-size: 1rem;
  }
}

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

body {
  -webkit-tap-highlight-color: transparent;
}

/* No double-tap-to-zoom delay on things you tap, links and buttons included. */
:is(a, button, label, summary, .btn, [role="button"]) {
  touch-action: manipulation;
}