/* Shared design tokens and base styles: a calm, businesslike workspace. One typeface (Inter) for
   everything, neutral cool greys, one blue for actions, and yellow only for what needs attention.
   Fields, code and cards are "surfaces" and follow the theme: text on a surface is always var(--ink),
   so contrast holds in both modes. */

@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-wght-normal.f052ee44c3.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-ext-wght-normal.48f540fb71.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light dark;
  --paper: #f4f5f8;      /* the page background */
  --surface: #ffffff;    /* cards, fields, code blocks */
  --sunken: #f8f9fb;     /* table heads, quiet areas inside a card */
  --field-line: #7a8098; /* borders of fields and buttons: 3.5:1 on paper, 3.9:1 on surface */
  --ink: #171a2c;        /* text */
  --muted: #5a6075;      /* secondary text, 6.2:1 on surface */
  --line: #e2e5ee;       /* dividers */
  --pen: #2f49d1;        /* actions and links */
  --pen-soft: #e9edfd;   /* a selected or hovered row, a quiet badge */
  --on-pen: #ffffff;
  --mark: #fde68a;       /* attention: open comments, a new version */
  --mark-ink: #5b4300;
  --danger: #b3261e;
  --shadow: 0 1px 2px rgb(16 20 40 / 6%), 0 4px 16px rgb(16 20 40 / 6%);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Type scale: 14px base */
  --t-1: 0.75rem; --t0: 0.875rem; --t1: 0.9375rem; --t2: 1.0625rem; --t3: 1.25rem; --t4: 1.5rem; --t5: 1.75rem;
  --radius: 6px;
  --radius-lg: 10px;
  --control: 34px;       /* height of buttons and fields; larger on touch screens */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1120; --surface: #181b2d; --sunken: #14172a; --field-line: #6c7290; --ink: #eceef6; --muted: #a5abc1;
    --line: #272b42; --pen: #8fa2ff; --pen-soft: #212849; --on-pen: #0e1122; --mark: #6b5410; --mark-ink: #fff1c2; --danger: #ff8a80;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 25%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t0)/1.55 var(--sans);
  font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: var(--pen); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.small { font-size: var(--t-1); }
.num { font-variant-numeric: tabular-nums; }

/* Controls */
button, input, select, textarea { font: inherit; color: inherit; }
button, .button {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: var(--control); padding: 0 12px;
  border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); cursor: pointer;
  font-weight: 550; text-decoration: none; color: var(--ink); white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
button:hover, .button:hover { border-color: var(--ink); }
button.primary { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }
button.primary:hover { filter: brightness(1.08); }
button.quiet { border-color: transparent; background: transparent; padding: 0 8px; color: var(--pen); }
button.quiet:hover { border-color: var(--line); background: var(--pen-soft); }
button.danger { color: var(--danger); }
button[disabled] { opacity: 0.5; cursor: default; }
input, textarea, select { min-height: var(--control); padding: 6px 10px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
::placeholder { color: var(--muted); opacity: 1; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid color-mix(in srgb, var(--pen) 35%, transparent); outline-offset: 0; border-color: var(--pen); }

/* Small labels: a count that needs you, or a role next to a name. */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: var(--t-1); font-weight: 600; line-height: 18px; white-space: nowrap;
  background: var(--pen-soft); color: var(--pen); }
.badge.attention { background: var(--mark); color: var(--mark-ink); }
.badge.plain { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }

/* Fingers need bigger targets than pointers. */
@media (pointer: coarse) { :root { --control: 40px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }