/* One stylesheet for every page, in the same idiom as accrue and the data room:
   a warm paper ground, one card shape with a soft shadow, pill controls, a
   serif display face for headings against Geist for everything else, and a
   single brand colour doing the work that a dozen accents used to.

   The token names those two use are the ones defined here. The names this desk
   grew up with (--ground, --panel, --rule, --read, --write) are kept as
   aliases: a page that sets a colour inline goes on working, and changing the
   palette is still one block of values in one file.

   Light is defined on bare :root; dark redefines only the tokens. The system
   default stamps no attribute at all, which is what lets the media query decide
   again: "system" is the absence of a choice, not a third palette. */
:root {
  color-scheme: light;
  --page: #f6f5f1;
  --surface: #fcfcfb;
  --surface-2: #f0eee8;
  --ink: #0c1422;
  --ink-2: #4b5261;
  --muted: #7d828c;
  --line: #e2e0d8;
  --line-strong: #d0cdc2;
  --brand: #0f5c4d;
  --brand-2: #0b4a3e;
  --brand-wash: #e4f1ec;
  --on-brand: #ffffff;
  --accent: #b8471c;
  --accent-wash: #fbeae2;
  --good: #006300;
  --bad: #b42318;
  --warn-ink: #7a4b00;
  --warn-bg: #fdf3dc;
  --shadow: 0 1px 2px rgba(12, 20, 34, 0.04), 0 8px 24px -12px rgba(12, 20, 34, 0.08);
  /* One gutter for the console: the bar, the toolbars and the page column all
     start on the same line down the left. */
  --gutter: clamp(0.9rem, 2.5vw, 1.6rem);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Newsreader", ui-serif, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The former names, pointing at the new ones. Custom properties resolve where
     they are used, so these follow the theme without being restated in it. */
  --ground: var(--page);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --ink-soft: var(--ink-2);
  --ink-faint: var(--muted);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --read: var(--brand);
  --read-bg: var(--brand-wash);
  --write: var(--accent);
  --write-bg: var(--accent-wash);
  --warn: var(--warn-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0b0d10; --surface: #15171b; --surface-2: #1c1f24;
    --ink: #f3f3f0; --ink-2: #c3c2b7; --muted: #8d9098;
    --line: #2a2d33; --line-strong: #3b3e44;
    --brand: #5ccfae; --brand-2: #86dcc3; --brand-wash: #122a24; --on-brand: #06201a;
    --accent: #f0805a; --accent-wash: #2b1a14;
    --good: #2fbf4a; --bad: #f07b72;
    --warn-ink: #f2c46b; --warn-bg: #2d2412;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0d10; --surface: #15171b; --surface-2: #1c1f24;
  --ink: #f3f3f0; --ink-2: #c3c2b7; --muted: #8d9098;
  --line: #2a2d33; --line-strong: #3b3e44;
  --brand: #5ccfae; --brand-2: #86dcc3; --brand-wash: #122a24; --on-brand: #06201a;
  --accent: #f0805a; --accent-wash: #2b1a14;
  --good: #2fbf4a; --bad: #f07b72;
  --warn-ink: #f2c46b; --warn-bg: #2d2412;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-wash); }

/* Headings are the display serif; everything that labels, counts or identifies
   stays in the sans or the mono. */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.35rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); letter-spacing: -0.02em; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
h4 { font-family: var(--sans); font-weight: 600; font-size: 0.9rem; }
p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
code, pre, kbd { font-family: var(--mono); font-feature-settings: "zero" 1; }
code { font-size: 0.84em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.06em 0.32em; }
pre { margin: 0 0 1rem; padding: 0.9rem 1rem; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 0.79rem; line-height: 1.55; }
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
small, .small { font-size: 0.82rem; }
.muted { color: var(--ink-2); }
.faint { color: var(--muted); }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.narrow { max-width: 46rem; }
.eyebrow, .kicker {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.kicker {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); padding: 0.2rem 0.7rem;
  color: var(--ink-2); letter-spacing: 0.06em;
}
.kicker .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); display: inline-block; }
.sub, .lead-in { color: var(--ink-2); font-size: clamp(0.97rem, 1.5vw, 1.05rem); line-height: 1.7; max-width: 62ch; }

/* -- Bands: the section rhythm ------------------------------------------- */
.band { border-bottom: 1px solid var(--line); }
.band.alt { background: var(--surface-2); }
.band > .wrap { padding-top: clamp(2.2rem, 5vw, 3.8rem); padding-bottom: clamp(2.2rem, 5vw, 3.8rem); }
.sec-head { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.8rem; }

/* -- Nav ------------------------------------------------------------------ */
/* The masthead sits over the page rather than beside it: the ground shows
   through, blurred, so scrolling content passes under something that still
   reads as part of the page.

   Its row is the page's own column — the same width and the same gutter as
   .wrap — so the wordmark starts exactly where the heading under it does. The
   bar itself still spans the window, because a rule stopping short of the edge
   reads as a mistake. Full-bleed pages (the records browser, the log) mark
   their nav `wide` and take the toolbar's gutter instead. */
.nav, .sitenav {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--page) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav-inner {
  max-width: 72rem; margin: 0 auto; padding: 0.55rem clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: 0.5rem 1.25rem; flex-wrap: wrap;
}
.nav.wide .nav-inner { max-width: none; padding-left: 0.9rem; padding-right: 0.9rem; }
.nav-mark { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.nav-links { display: flex; align-items: center; gap: 0.15rem; flex: 1; }
.nav-side { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.nav .brand {
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
}
.nav .brand:hover { text-decoration: none; }
.nav .mark { width: 23px; height: 23px; display: block; flex: none; }
/* The plain square, for a nav written before the mark existed. */
.nav .dot { width: 20px; height: 20px; border-radius: 7px; background: var(--brand); display: inline-block; }
.nav a.link {
  font-size: 0.86rem; text-decoration: none; color: var(--ink-2); white-space: nowrap;
  border-radius: 999px; padding: 0.3rem 0.7rem; transition: background-color 120ms, color 120ms;
}
.nav a.link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.nav a.link[aria-current="page"] { background: var(--ink); color: var(--page); }
.nav a.link.quiet { color: var(--muted); }
.nav a.link.quiet:hover { color: var(--ink); }
.nav .spacer { flex: 1; }
/* Which desk am I looking at? A server can hold several, and the same address
   can be an account in more than one of them. */
.nav .org {
  font-size: 0.82rem; color: var(--ink-2); white-space: nowrap;
  border-left: 1px solid var(--line); padding-left: 0.75rem;
  overflow: hidden; text-overflow: ellipsis; max-width: 16rem;
}
.nav .org:empty { display: none; }
/* Too narrow for three groups on one line: the links take a row of their own
   and scroll sideways, rather than wrapping into a stack that pushes the page
   down every time somebody signs in. */
@media (max-width: 54rem) {
  .nav-links {
    order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem)); padding: 0 clamp(1rem, 4vw, 2.5rem) 0.15rem;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav.wide .nav-links { margin: 0 -0.9rem; padding: 0 0.9rem 0.15rem; }
  .nav .org { max-width: 9rem; }
}

/* -- The app shell -------------------------------------------------------- */
/* Inside the desk, the sections live down the side rather than along the top.
   A console gains pages — records, the log, the team, the keys — and a row of
   links across the top runs out of room and starts wrapping; a column does
   not, and it leaves the whole width of the window for the thing being
   looked at. The public pages keep the masthead above. */
.shell { display: flex; min-height: 100vh; }
.side {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 15.5rem; flex: none;
  display: flex; flex-direction: column; border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, var(--page));
}
.side-head { height: 3.5rem; flex: none; display: flex; align-items: center; padding: 0 1rem; }
.side-head .brand {
  display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0;
  font-size: 0.93rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none;
}
.side-head .brand:hover { text-decoration: none; }
.side-head .mark { width: 22px; height: 22px; flex: none; display: block; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0.2rem 0.6rem; }
.side-nav .eyebrow { padding: 0.75rem 0.65rem 0.3rem; }
a.side-item {
  display: flex; align-items: center; gap: 0.6rem; border-radius: 10px; padding: 0.4rem 0.65rem;
  font-size: 0.86rem; color: var(--ink-2); text-decoration: none; transition: background-color 120ms, color 120ms;
}
a.side-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
a.side-item[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 500; }
a.side-item svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
a.side-item[aria-current="page"] svg { color: var(--brand); }
.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 0.55rem 0.6rem; }
/* Which desk this is. A server can hold several, and the same address can be
   an account in more than one of them. */
.side-foot .org {
  display: block; padding: 0.15rem 0.65rem 0.45rem; font-size: 0.78rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-foot .org:empty { display: none; }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: 3.5rem; flex: none;
  display: flex; align-items: center; gap: 0.6rem; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--page) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.topbar .title { font-size: 0.93rem; font-weight: 600; letter-spacing: -0.01em; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.topbar .menu-btn { display: none; }
.page { flex: 1; min-width: 0; }
/* Left-aligned against the bar above it rather than centred in the window:
   with a column down the side, centring puts the heading and the bar's own
   contents on two different lines. */
.page > .wrap {
  margin: 0; max-width: 74rem;
  padding: 1.75rem var(--gutter) 4rem;
}
/* The pages that are one tall thing — the records browser, the log — fill what
   is left and scroll inside themselves rather than moving the chrome. */
.page.flush { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* One person's own menu, the way every other tool here does it: a disclosure,
   so it works before any script has run. */
.menu { position: relative; }
.menu > summary { display: inline-flex; align-items: center; border-radius: 999px; }
.menu > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.menu .who-btn {
  width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 600; color: var(--ink);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 50; width: 15rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 0.35rem;
}
.menu-panel .who { padding: 0.5rem 0.6rem 0.6rem; border-bottom: 1px solid var(--line); margin-bottom: 0.35rem; }
.menu-panel .who .name { font-size: 0.85rem; font-weight: 500; }
.menu-panel .who .mail, .menu-panel .who .where { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.menu-panel a, .menu-panel button {
  display: flex; width: 100%; justify-content: flex-start; border: 0; background: none;
  border-radius: 9px; padding: 0.35rem 0.6rem; font-size: 0.84rem; color: var(--ink-2); text-decoration: none;
  min-height: 0;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.menu-panel .sep { border-top: 1px solid var(--line); margin: 0.35rem 0; }
.menu-panel .pref {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.25rem 0.6rem; font-size: 0.84rem; color: var(--ink-2);
}
.menu-panel .theme { margin: 0; }

/* Narrow: the bar keeps the page's own tools and drops what the page repeats
   elsewhere, rather than pushing the account out of the window. */
@media (max-width: 48rem) {
  .topbar .heading, .topbar .hide-sm { display: none; }
  .topbar .title { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Narrow: the column becomes a drawer, opened from the bar. */
@media (max-width: 60rem) {
  .side {
    position: fixed; z-index: 60; left: 0; top: 0; transform: translateX(-100%);
    transition: transform 160ms ease-out; background: var(--surface);
  }
  .side[data-open="true"] { transform: none; box-shadow: var(--shadow); }
  .side-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.3); }
  .topbar .menu-btn { display: inline-flex; margin-left: -0.35rem; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* -- Theme switch --------------------------------------------------------- */
.theme {
  display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); padding: 2px; margin-right: 0.3rem;
}
.theme button {
  background: none; border: 0; border-radius: 999px; color: var(--muted); cursor: pointer;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0; text-transform: none;
  padding: 0.15rem 0.6rem; line-height: 1.5;
}
.theme button:hover { color: var(--ink); background: var(--surface-2); }
.theme button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

/* -- Controls ------------------------------------------------------------- */
button, .btn {
  font-family: var(--sans); font-size: 0.84rem; font-weight: 500; letter-spacing: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; min-height: 2.125rem; padding: 0.3rem 0.85rem; cursor: pointer; line-height: 1.5;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  text-decoration: none; transition: background-color 120ms, border-color 120ms, opacity 120ms;
}
button:hover, .btn:hover { background: var(--surface-2); text-decoration: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary, button.primary {
  background: var(--brand); border-color: transparent; color: var(--on-brand); font-weight: 500;
}
.btn-primary:hover, button.primary:hover { background: var(--brand-2); border-color: transparent; }
.btn-read { background: var(--brand-wash); border-color: transparent; color: var(--brand); }
.btn-read:hover { background: var(--brand-wash); border-color: transparent; opacity: 0.85; }
/* A disclosure whose summary is a button: the marker is the button's own shape. */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary.btn { display: inline-flex; }
details[open] > summary.btn { background: var(--surface-2); }
button.danger { color: var(--bad); }
button.danger:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: var(--bad); }
button.plain, .btn-ghost { border-color: transparent; background: none; color: var(--muted); padding: 0.3rem 0.5rem; }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
/* An icon in a button is an icon, not a picture: it takes the text's size. */
button svg, .btn svg { width: 16px; height: 16px; flex: none; }
button.plain:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn-lg { min-height: 2.5rem; padding: 0.5rem 1.2rem; font-size: 0.9rem; }
.btn-sm { min-height: 1.75rem; padding: 0.15rem 0.65rem; font-size: 0.78rem; }

input, select, textarea {
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.4rem 0.75rem; width: 100%;
}
/* A ring rather than a hard outline: the same focus the other tools show. */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash);
}
.band.alt input, .band.alt select, .band.alt textarea, .card input, .card select, .card textarea { background: var(--surface); }
.band.alt .card input, .band.alt .card select, .band.alt .card textarea { background: var(--page); }
select { cursor: pointer; font-size: 0.86rem; }
textarea { resize: vertical; min-height: 6rem; line-height: 1.55; }
label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); margin: 0 0 0.3rem; }
.field { margin: 0 0 0.95rem; }
.field .hint { font-size: 0.78rem; color: var(--muted); margin: 0.3rem 0 0; }
fieldset { border: 0; padding: 0; margin: 0; }

/* -- Surfaces ------------------------------------------------------------- */
.card, .panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 1.2rem 1.25rem;
}
.band.alt .card, .band.alt .panel { background: var(--page); }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* Cells that used to be separated by a hairline are their own cards now, with
   the gap doing what the rule did. */
.grid { display: grid; gap: 1rem; }
.grid > * {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 1.1rem 1.15rem; margin: 0;
}
.band.alt .grid > * { background: var(--page); }
@media (min-width: 44rem) {
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A plain two-column layout with no cell chrome, for forms. */
.cols2 { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .cols2 { grid-template-columns: 1fr 1fr; } }

/* -- Chips, badges -------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; padding: 0.1rem 0.55rem; line-height: 1.55;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap; border: 0;
}
.chip button { border: 0; background: none; padding: 0 0 0 0.15rem; color: var(--muted); font-size: 1em; cursor: pointer; }
.chip button:hover { background: none; color: var(--accent); }
.tag { font-family: var(--mono); font-size: 0.74rem; }
.badge {
  display: inline-block; border-radius: 999px; font-size: 0.73rem; font-weight: 500; letter-spacing: 0;
  padding: 0.1rem 0.55rem; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; border: 0;
}
.b-good { background: var(--brand-wash); color: var(--brand); }
.b-bad { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.b-primary { background: var(--accent-wash); color: var(--accent); }
.b-warn { background: var(--warn-bg); color: var(--warn-ink); }
.b-flat { background: var(--surface-2); color: var(--muted); }

/* -- Messages ------------------------------------------------------------- */
.note {
  border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 12px;
  padding: 0.75rem 0.95rem; font-size: 0.88rem; background: var(--surface-2);
}
.note.good { border-left-color: var(--brand); background: var(--brand-wash); border-color: transparent; }
.note.bad { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: transparent; }
.note.warn { border-left-color: var(--warn-ink); background: var(--warn-bg); border-color: transparent; }
.note :last-child { margin-bottom: 0; }

/* -- Tables --------------------------------------------------------------- */
/* A wide table has always scrolled sideways. The trouble is that macOS hides
   the scrollbar until you scroll one, so a table continuing past the right edge
   looks like a table that has been cut off — which is what it was reported as.
   These are the standard CSS-only scroll shadows: the two `local` gradients are
   painted onto the scrolling content and so slide away from an edge as you
   leave it, uncovering the fixed shadow underneath. No script, and right on
   every resize without being told. */
.table-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left center / 2.2rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right center / 2.2rem 100% no-repeat local,
    linear-gradient(to right, rgba(12, 20, 34, 0.14), transparent) left center / 0.7rem 100% no-repeat scroll,
    linear-gradient(to left, rgba(12, 20, 34, 0.14), transparent) right center / 0.7rem 100% no-repeat scroll,
    var(--surface);
}
/* At least as wide as its contents need, and the full width when there is more
   room than that — so a column is never squeezed into unreadability instead of
   scrolling. */
table { border-collapse: collapse; width: 100%; min-width: max-content; font-size: 0.86rem; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted);
  white-space: nowrap; user-select: none; border-bottom: 1px solid var(--line);
}
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

/* -- Auth pages ----------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.auth .card { width: 100%; max-width: 27rem; padding: 1.6rem 1.7rem; }
.auth h1 { font-size: clamp(1.6rem, 4vw, 2rem); margin-bottom: 0.35rem; }
.auth .sub { color: var(--ink-2); font-size: 0.92rem; margin-bottom: 1.4rem; }
.auth button[type="submit"], .auth .btn-wide { width: 100%; justify-content: center; }
/* Where a page offers two ways in, one heading sits above both and the cards
   stack under it — rather than each card carrying a title of its own. */
.auth-stack { width: 100%; max-width: 27rem; display: flex; flex-direction: column; gap: 1.2rem; }
.auth-stack > * { margin: 0; }
.auth-stack .or { font-size: 0.82rem; color: var(--muted); text-align: center; }
.auth .foot { margin-top: 1.1rem; font-size: 0.82rem; color: var(--muted); text-align: center; }