/* kit v1.2.4, copied from metaproject/ui/kit */
/* base.css: the --kit-* tokens every kit module reads, and the rules every app shares
   (hidden means hidden, focus rings, tap targets, reduced motion).

   The kit has no look of its own. Each app maps these tokens to its own colors once, after
   this file, for example:
     :root { --kit-bg: var(--bg); --kit-ink: var(--ink); --kit-accent: var(--accent); ... }
   Because the mapping is var() to var(), a dark theme that redefines --bg also changes
   --kit-bg; nothing here needs a dark block. Values below are neutral fallbacks only. */

:root {
  /* Colors */
  --kit-bg: Canvas;
  --kit-surface: Canvas;
  --kit-surface-2: color-mix(in srgb, CanvasText 7%, Canvas);
  --kit-ink: CanvasText;
  --kit-muted: color-mix(in srgb, CanvasText 68%, Canvas); /* must stay >= 4.5:1 on bg and surface */
  --kit-line: color-mix(in srgb, CanvasText 14%, Canvas);
  --kit-accent: #0a62c9;
  --kit-on-accent: #fff;      /* text on an accent fill, set per theme (>= 4.5:1) */
  --kit-danger: #b42318;
  --kit-on-danger: #fff;      /* text on a danger fill, set per theme (>= 4.5:1) */
  --kit-scrim: rgb(0 0 0 / .32);
  --kit-shadow: 0 10px 30px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .08);
  /* Toasts are an inverted pill: page ink as the fill. The action color must pass on that fill,
     which usually means the OTHER theme's accent (compare: accent on ink was 3.3:1 / 2.1:1). */
  --kit-toast-bg: var(--kit-ink);
  --kit-toast-ink: var(--kit-bg);
  --kit-toast-action: var(--kit-toast-ink);

  /* Shape and spacing */
  --kit-radius: 12px;
  --kit-radius-lg: 18px;
  --kit-gutter: 16px;
  --kit-bar-row: 44px;        /* iOS navigation bar height */
  --kit-fade: 8px;            /* the soft edge under the app bar */
  --kit-target: 40px;         /* minimum tap target */
  /* One height for every control that sits in a row with others (app-bar buttons, pills,
     selectors, segmented controls, icon buttons), so neighbors always line up. Controls keep
     their own look; only the box height is shared. The hit area still grows to --kit-target. */
  --kit-control-h: 36px;
  --kit-control-radius: 10px;
  --kit-font-min: 12px;       /* smallest text; dense grids may opt out in their AGENTS.md */
  --kit-ease: cubic-bezier(.2, .8, .2, 1);
  --kit-dur: .22s;
  /* Motion (README "Motion"). */
  --kit-ease-out: cubic-bezier(.2, .9, .3, 1);
  --kit-ease-in: cubic-bezier(.4, 0, 1, 1);
  /* Popovers, iOS-style (v1.2): grow from 30% on a spring that peaks at 1.02 (POP_SPRING in
     popover.js; override with --kit-pop-spring), fade in over the first 120 ms; close by shrinking
     to 50% and fading. For calmer motion, e.g. v1.1's: --kit-pop-in: .18s; --kit-pop-scale: .96. */
  --kit-pop-in: .24s;
  --kit-pop-fade: .08s;
  --kit-pop-scale: .4;
  --kit-pop-out: .12s;
  --kit-pop-out-scale: .5;

  /* Layers: content < app bar < toast. Sheets and popovers use the browser's top layer
     (<dialog>, [popover]) so they need no z-index; these are the fallbacks. */
  --kit-z-bar: 15;
  --kit-z-pop: 50;
  --kit-z-toast: 60;
}

/* No double-tap-to-zoom: a quick open-close of a menu read as a double tap and zoomed the page
   (Derek, compare, 2026-10-18). manipulation keeps panning and pinch-zoom (text can still be
   enlarged) and drops the double-tap delay. Elements that set their own touch-action keep it. */
html { touch-action: manipulation; }
/* Fingers need more room than a mouse pointer. */
@media (pointer: coarse) { :root { --kit-target: 44px; } }

[hidden] { display: none !important; }

/* Rings only for keyboard focus, never for taps. */
:where(button, a, input, select, textarea, [tabindex]):focus { outline: none; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--kit-accent); outline-offset: 2px;
}

/* A control that looks smaller than a finger keeps its look but gets a full-size hit area.
   The ::before grows to --kit-target in each direction the control is short of it, and never
   shrinks a control that is already big enough. Use ::before so the app keeps ::after. */
.kit-hit { position: relative; }
.kit-hit::before {
  content: ""; position: absolute;
  inset: min(0px, calc((100% - var(--kit-target)) / 2)) min(0px, calc((100% - var(--kit-target)) / 2));
}

/* A control in a row: the shared height, contents centered on one line. Text, icons and the
   chevron all sit on the box's center line (align-items: center, not baseline), so a caret never
   rides high or low next to its label. */
.kit-control {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  box-sizing: border-box; height: var(--kit-control-h); line-height: 1.2; white-space: nowrap;
}
/* Caret next to a label: an inline SVG (chevron.js), never a text glyph (▾ ⌄ ˅ sit on the
   text baseline and differ per font). Sized in em so it follows the label's font size. */
.kit-chevron { width: .75em; height: .75em; flex: none; display: block; }

/* Text for screen readers only (labels, live text). */
.kit-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* One global switch: every kit animation reads --kit-dur, and this also stops app ones. */
@media (prefers-reduced-motion: reduce) {
  :root { --kit-dur: 0s; }  /* popovers and the pager read the media query themselves: fade only, instant jumps */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}