/*
 * The site's stylesheet. Everything it draws reads the custom properties in the first block, so a
 * theme restyles the site by setting them (see assets.rs for theme folders). Colours are written as
 * light-dark(light, dark); most tints are mixed from --brand, so one colour is enough to rebrand.
 *
 * The properties are set on :host as well as :root, for the site's header at the top of reports, which
 * sits in a shadow root of its own (see report_header.html). A theme should set them on both.
 */

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root, :host {
  /* colour */
  --brand: light-dark(#2d6a4f, #7cc39b);            /* buttons, links, highlights */
  --brand-ink: light-dark(#ffffff, #0f2419);        /* text on --brand */
  --bg: light-dark(#f6f4ef, #141312);
  --surface: light-dark(#ffffff, #1d1c1a);          /* cards */
  --surface-sunk: light-dark(#efece4, #181715);     /* wells, inputs */
  --text: light-dark(#1e1c18, #ece8df);
  --text-muted: light-dark(#6a655b, #a29c8f);
  --border: light-dark(#e3ded2, #33302b);
  --success: light-dark(#2f7d4f, #7cc39b);
  --warning: light-dark(#a8661a, #e2b04f);
  --danger: light-dark(#b8433b, #ef8a82);

  /* mixed from the above */
  --brand-soft: color-mix(in oklab, var(--brand) 13%, var(--surface));
  --brand-strong: color-mix(in oklab, var(--brand) 82%, var(--text));
  --danger-soft: color-mix(in oklab, var(--danger) 12%, var(--surface));
  --warning-soft: color-mix(in oklab, var(--warning) 14%, var(--surface));
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand) 45%, transparent);

  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);                 /* headings */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-size: 16px;
  --leading: 1.55;
  --heading-weight: 750;
  --heading-tracking: -0.025em;

  /* shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-button: 999px;                           /* 999px for pills, or match --radius */
  --border-width: 1px;

  /* depth */
  --shadow-sm: 0 1px 2px rgb(20 18 14 / 0.06);
  --shadow: 0 1px 2px rgb(20 18 14 / 0.05), 0 10px 28px -12px rgb(20 18 14 / 0.16);
  --shadow-lg: 0 2px 6px rgb(20 18 14 / 0.06), 0 28px 56px -18px rgb(20 18 14 / 0.26);

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;

  /* layout */
  --content-width: 1120px;
  --narrow-width: 720px;
  --gutter: 20px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --speed: 160ms;

  /* the faint chessboard behind the front page's opening; 0 turns it off */
  --pattern-opacity: 0.045;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
/* a link to a part of a page shows it below the sticky header, not under it */
/* room kept for a scrollbar on every page, so a short page lines up with a long one where scrollbars take room */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; scrollbar-gutter: stable; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: var(--text-size)/var(--leading) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
  line-height: 1.15; margin: 0 0 var(--space-3); text-wrap: balance;
}
h1 { font-size: clamp(30px, 4.2vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: 19px; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--brand); text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
::selection { background: var(--brand-soft); }

.container { width: 100%; max-width: calc(var(--content-width) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
/* an account's pages keep to one column under the logo, as wide as the order form's, so going from one to
   the next moves nothing */
.narrow > * { max-width: var(--narrow-width); }
.muted { color: var(--text-muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-4); top: -60px; z-index: 10; background: var(--surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-3); }
.eyebrow { font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--space-3); }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--text-muted); max-width: 62ch; }
.page-head { padding: var(--space-7) 0 var(--space-5); }
.page-head .lede { margin-bottom: 0; }
.stack > * + * { margin-top: var(--space-4); }

/* ---------------------------------------------------------------- header and footer */

.site-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--border-width) solid color-mix(in oklab, var(--border) 70%, transparent);
}
.header-row { display: flex; align-items: center; gap: var(--space-4); height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 750; letter-spacing: -0.01em; font-size: 17px; margin-right: auto; }
.brand img { height: 30px; width: auto; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; }
.brand-mark svg { width: 18px; height: 18px; }
.site-nav { display: flex; align-items: center; gap: var(--space-1); }
.site-nav > a { color: var(--text-muted); text-decoration: none; font-size: 15px; font-weight: 550; padding: 8px 12px; border-radius: var(--radius-sm); }
.site-nav > a:hover { color: var(--text); background: var(--surface-sunk); }
.site-nav > a[aria-current="page"] { color: var(--text); }
@media (max-width: 560px) { .site-nav > a.optional { display: none; } }

.icon-button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-muted); cursor: pointer;
}
.icon-button:hover { color: var(--text); background: var(--surface-sunk); }
.icon-button svg { width: 19px; height: 19px; }
/* the sun when the page is light and the moon when it's dark, one over the other with the other unseen;
   light-dark() follows the color-scheme, which reaches into the report's header where :root can't */
.theme-toggle svg { grid-area: 1 / 1; }
.theme-toggle .sun { color: light-dark(currentColor, transparent); }
.theme-toggle .moon { color: light-dark(transparent, currentColor); }

.account { position: relative; }
.account summary { list-style: none; cursor: pointer; border-radius: 50%; }
.account summary::-webkit-details-marker { display: none; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: 15px; margin-left: var(--space-1);
}
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: var(--space-2);
  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.menu .who { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: var(--border-width) solid var(--border); margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.menu .who span { display: block; font-size: 14px; color: var(--text-muted); }
.menu form { margin: 0; }
.menu hr { border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-2) 0; }
.menu-item {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 15px; color: var(--text); background: none; border: 0;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
}
.menu-item:hover { background: var(--surface-sunk); }

.site-footer { border-top: var(--border-width) solid var(--border); margin-top: var(--space-8); padding: var(--space-6) 0; color: var(--text-muted); font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.footer-links { display: flex; gap: var(--space-4); }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-about { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-build { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.8; }

/* the header at the top of a report: a shadow root's host, styled apart from the report around it */
:host {
  display: block; background: var(--bg); color: var(--text);
  font: var(--text-size)/var(--leading) var(--font-sans); -webkit-font-smoothing: antialiased;
}
:host .site-header { position: static; }
@media print { :host { display: none; } }

/* ---------------------------------------------------------------- buttons */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-weight: 650; font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  padding: 13px 22px; border-radius: var(--radius-button); cursor: pointer;
  border: var(--border-width) solid var(--border); background: var(--surface); color: var(--text);
  transition: transform var(--speed) var(--ease), background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.button:hover { background: var(--surface-sunk); }
.button:active { transform: translateY(1px); }
.button svg { width: 18px; height: 18px; }
.button.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.button.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.button.large { padding: 16px 28px; font-size: 17px; }
.button.small { padding: 7px 14px; font-size: 14px; }
.button.small svg { width: 16px; height: 16px; }
.button.danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.button.danger:hover { background: color-mix(in oklab, var(--danger) 85%, var(--text)); }
.button.block { display: flex; width: 100%; }
.button[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.link-button { font: inherit; background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------- cards, badges, notes */

.card {
  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }
.card.flat { box-shadow: none; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; line-height: 1;
  padding: 6px 10px; border-radius: 999px; background: var(--surface-sunk); color: var(--text-muted); white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.ready { background: var(--brand-soft); color: var(--brand-strong); }
.badge.live { background: var(--warning-soft); color: var(--warning); }
.badge.live::before { animation: pulse 1.4s var(--ease) infinite; }
.badge.failed { background: var(--danger-soft); color: var(--danger); }
.badge.plain::before { display: none; }
@keyframes pulse { 50% { opacity: 0.3; } }
.note { border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--surface-sunk); margin-bottom: var(--space-4); }
.note.error { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.note.info { background: var(--brand-soft); color: var(--brand-strong); }
.note.warning { background: var(--warning-soft); color: color-mix(in oklab, var(--warning) 70%, var(--text)); }
.note.error a, .note.warning a { color: inherit; font-weight: 650; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* ---------------------------------------------------------------- forms */

.field { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 650; font-size: 15px; padding: 0; }
.hint { font-size: 14px; color: var(--text-muted); }
.input {
  font: inherit; width: 100%; padding: 13px 14px; color: var(--text); background: var(--surface-sunk);
  border: var(--border-width) solid var(--border); border-radius: var(--radius); transition: border-color var(--speed), box-shadow var(--speed);
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); background: var(--surface); }
.input-prefixed { position: relative; }
.input-prefixed span { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
.input-prefixed .input { padding-left: 32px; }
/* a drop-down that looks like the other fields, with an arrow of its own */
.select { position: relative; display: block; }
.select .input { appearance: none; padding-right: 40px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); rotate: 45deg;
}

/* a row of choices that reads as one control: radio buttons underneath */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px;
  background: var(--surface-sunk); border: var(--border-width) solid var(--border); border-radius: calc(var(--radius) + 2px);
}
.segmented label { position: relative; display: block; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: block; text-align: center; padding: 10px 8px; border-radius: var(--radius); font-weight: 600; font-size: 15px; color: var(--text-muted);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
/* the chosen one stands up from the track: a card on it in light, and in dark, where a shadow doesn't show,
   a clearly lighter one with the brand's colour round it */
.segmented input:checked + span {
  background: light-dark(var(--surface), color-mix(in oklab, var(--text) 15%, var(--surface)));
  color: var(--text);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px light-dark(transparent, color-mix(in oklab, var(--brand) 60%, transparent));
}
.segmented input:focus-visible + span { box-shadow: var(--focus-ring); }
.segmented label:hover span { color: var(--text); }
.segmented.wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
/* a choice that costs more than the others, such as a report of two or three credits: in the warning colour, saying
   what it costs under it, with every choice in the row as tall */
.segmented:has(.more-credits) label { display: flex; }
.segmented:has(.more-credits) span { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.segmented .more-credits span { color: var(--warning); }
.segmented .more-credits small { font-size: 11px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.segmented .more-credits input:checked + span {
  background: var(--warning-soft); color: var(--warning); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--warning);
}
.segmented .more-credits:hover span { color: var(--warning); }
.more-credits-hint b { color: var(--warning); font-weight: 650; }

/* ---------------------------------------------------------------- the front page */

.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--pattern-opacity);
  background: repeating-conic-gradient(var(--text) 0 25%, transparent 0 50%) 0 0 / 56px 56px;
  mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, black, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; right: -160px; top: -220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--brand) 22%, transparent), transparent 65%);
}
.hero-grid { display: grid; gap: clamp(36px, 6vw, 72px); align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(36px, 5.6vw, 62px); margin-bottom: var(--space-4); }
.hero .lede { margin-bottom: var(--space-6); }
.signin { display: grid; gap: var(--space-3); max-width: 380px; }
.signin form { display: flex; gap: var(--space-2); margin: 0; }
.signin .input { padding: 12px 14px; }
/* the "Get your report" buttons lead here: the sign-in buttons pulse, to say they're the next step */
.signin .button.nudge, .signin:target .button { animation: nudge 0.8s var(--ease) 3; }
@keyframes nudge {
  0% { box-shadow: var(--shadow-sm), 0 0 0 0 color-mix(in oklab, var(--brand) 60%, transparent); }
  25% { transform: scale(1.04); }
  50% { transform: scale(1); }
  100% { box-shadow: var(--shadow-sm), 0 0 0 16px color-mix(in oklab, var(--brand) 0%, transparent); }
}
.hero .reassure { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 14px; }
.reassure li { display: flex; align-items: center; gap: 6px; }
.reassure svg { width: 16px; height: 16px; color: var(--brand); }

/* the example report beside the opening */
.preview { position: relative; display: grid; gap: var(--space-4); }
.preview .card { padding: var(--space-5); border-radius: var(--radius-lg); }
.preview .card:nth-child(2) { margin-left: clamp(0px, 5vw, 48px); }
.preview .card:nth-child(3) { margin-left: clamp(0px, 2.5vw, 24px); }
.preview .tag { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.preview h3 { margin-bottom: var(--space-3); font-size: 17px; }
.preview .big { font-family: var(--font-display); font-size: 34px; font-weight: 750; letter-spacing: -0.03em; color: var(--brand); line-height: 1; }
.bars { display: grid; gap: 7px; margin-top: var(--space-3); }
.bars div { display: grid; grid-template-columns: 92px 1fr 42px; gap: var(--space-3); align-items: center; font-size: 13px; color: var(--text-muted); }
.bars i { height: 8px; border-radius: 4px; background: var(--surface-sunk); position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--brand); }
.bars i.bad::after { background: var(--danger); }
.bars b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.example-label { position: absolute; top: -12px; right: 12px; z-index: 1; }
/* under the examples: that they're a few of many */
.preview .card.more { padding: var(--space-4) var(--space-5); border-style: dashed; background: transparent; box-shadow: none; font-size: 14px; color: var(--text-muted); }
.preview .card.more p { margin: 0; }
.preview .card.more b { color: var(--text); }

.section { padding: clamp(56px, 8vw, 96px) 0 0; }
.section-head { max-width: 640px; margin-bottom: var(--space-6); }
.section-head.center { margin-left: auto; margin-right: auto; }
.steps { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: var(--space-4);
  background: var(--brand-soft); color: var(--brand-strong); font-weight: 750;
}
.features { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.feature { padding: var(--space-5); }
.feature .icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); margin-bottom: var(--space-4); }
.feature .icon svg { width: 22px; height: 22px; }
.feature p { color: var(--text-muted); margin: 0; }

.pricing { max-width: 480px; margin: 0 auto; text-align: center; padding: clamp(28px, 4vw, 44px); }
.price { font-family: var(--font-display); font-size: 56px; font-weight: 780; letter-spacing: -0.04em; line-height: 1; margin: var(--space-3) 0 var(--space-2); }
.price-about { margin: 0 0 var(--space-1); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ticks { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); display: grid; gap: var(--space-3); text-align: left; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-2); }
.ticks svg { width: 18px; height: 18px; margin-top: 3px; color: var(--brand); }
/* the reports of more games, which cost more than the price above: in the warning colour, as the order
   form picks them out */
.bigger { text-align: left; background: var(--warning-soft); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-6); }
.bigger p { margin: var(--space-1) 0 0; font-weight: 600; }
.bigger .bigger-head { margin: 0 0 var(--space-2); font-weight: 700; color: var(--warning); }
.bigger .bigger-note { margin-top: var(--space-2); font-size: 14px; font-weight: 500; color: var(--text-muted); }

.faq { max-width: var(--narrow-width); margin: 0 auto; }
.faq details { border-bottom: var(--border-width) solid var(--border); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-weight: 650; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--text-muted); transition: rotate var(--speed) var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--text-muted); margin-top: calc(-1 * var(--space-2)); padding-bottom: var(--space-3); }

.closing { text-align: center; padding: clamp(36px, 6vw, 64px); background: var(--brand-soft); border-color: transparent; box-shadow: none; }
.closing p { color: var(--text-muted); }

/* ---------------------------------------------------------------- ordering */

/* the form as wide as the other pages' column, and the summary beside it while there's room, under it after */
.order-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, var(--narrow-width)) minmax(0, 1fr); align-items: start; }
@media (max-width: 1080px) { .order-grid { grid-template-columns: minmax(0, var(--narrow-width)); } }
.aside { position: sticky; top: 88px; }
.aside h3 { margin-bottom: var(--space-4); }
.summary { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: var(--border-width) solid var(--border); }
.summary div { display: flex; justify-content: space-between; gap: var(--space-3); }
.summary dt { color: var(--text-muted); }
.summary dd { margin: 0; font-weight: 650; text-align: right; }
.fine-print { font-size: 14px; color: var(--text-muted); margin: var(--space-3) 0 0; text-align: center; }
.recap-player { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.recap-player .initial { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); font-weight: 750; font-size: 18px; text-transform: uppercase; }
.recap-player .player-name { font-size: 22px; font-weight: 750; overflow-wrap: anywhere; }
.recap-player .player-site { color: var(--text-muted); white-space: nowrap; }
.recap-player .hint { display: block; margin-top: var(--space-1); }
.credits-left, .credits-back { margin: var(--space-5) 0 0; }
.credits-left + .credits-back { margin-top: var(--space-3); }
.confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.confirm-actions .button { flex: 1 1 auto; white-space: normal; }

/* ---------------------------------------------------------------- a report's progress */

/* the heading's own space below it, which it gives up to line up with the button or chips beside it, goes under
   the row instead, so the page starts at the same height as one with a heading alone */
.job-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4);
            padding-bottom: calc(var(--space-5) + var(--space-3)); }
.job-head h1 { margin: 0; overflow-wrap: anywhere; }
.status { margin-top: var(--space-5); }
.status-line { display: flex; align-items: center; gap: var(--space-3); font-size: 18px; font-weight: 600; margin-bottom: var(--space-5); }
.spinner { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2.5px solid var(--brand-soft); border-top-color: var(--brand); animation: spin 0.9s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.progress { height: 10px; border-radius: 5px; background: var(--surface-sunk); overflow: hidden; margin-bottom: var(--space-5); }
.progress i { display: block; height: 100%; border-radius: 5px; background: var(--brand); transition: width 0.6s var(--ease); }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.stepper li { counter-increment: s; display: grid; gap: var(--space-2); font-size: 14px; color: var(--text-muted); }
.stepper li::before { content: ""; height: 4px; border-radius: 2px; background: var(--border); }
.stepper li.done::before, .stepper li.now::before { background: var(--brand); }
.stepper li.now { color: var(--text); font-weight: 650; }
@media (max-width: 560px) { .stepper li span { display: none; } .stepper li.now span { display: inline; } .stepper { grid-template-columns: repeat(4, 1fr); } }
.finished { text-align: center; padding: var(--space-4) 0 var(--space-2); }
.finished .tick { width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.finished .tick svg { width: 28px; height: 28px; }
.finished-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* ---------------------------------------------------------------- a person's reports */

.list { padding: var(--space-2); }
.row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
  padding: var(--space-4); border-radius: var(--radius); color: var(--text); text-decoration: none;
}
.row + .row { border-top: var(--border-width) solid var(--border); border-top-left-radius: 0; border-top-right-radius: 0; }
.row:hover { background: var(--surface-sunk); }
.row .initial { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); font-weight: 750; font-size: 18px; text-transform: uppercase; }
.row .what b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .what span { font-size: 14px; color: var(--text-muted); }
.empty { text-align: center; padding: clamp(40px, 7vw, 72px) var(--space-5); }
.empty .icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: 16px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.empty .icon svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- messages */

.message { max-width: 560px; margin: clamp(40px, 8vw, 96px) auto 0; text-align: center; }
.message .lede { margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* rather than pulse, the sign-in buttons keep a ring */
  .signin .button.nudge, .signin:target .button { box-shadow: var(--shadow-sm), 0 0 0 4px color-mix(in oklab, var(--brand) 40%, transparent); }
}

/* ---------------------------------------------------------------- long text: the privacy policy and terms */

.prose { max-width: 68ch; padding-bottom: var(--space-6); }
.prose h2 { font-size: 22px; margin-top: var(--space-6); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--text-muted); }

/* ---------------------------------------------------------------- packs of credits, on the order form and front page */

.packs { display: grid; gap: var(--space-2); }
.packs label {
  display: flex; align-items: center; gap: var(--space-3); cursor: pointer;
  padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius);
  background: var(--surface); transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.packs label:hover { border-color: color-mix(in oklab, var(--brand) 40%, var(--border)); }
.packs label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.packs input { accent-color: var(--brand); margin: 0; width: 18px; height: 18px; }
.pack-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.pack-name { font-weight: 650; white-space: nowrap; }
.pack-price { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* (it may wrap after "about", so a pack fits on the narrowest phones) */
.pack-about { display: block; text-align: right; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: normal; }
.save { white-space: nowrap; font-size: 13px; font-weight: 650; color: var(--success); background: color-mix(in oklab, var(--success) 13%, var(--surface)); padding: 2px 8px; border-radius: 999px; }
.pack-offer { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-weight: 600; color: var(--brand-strong); }
/* a pack too small for the report chosen, such as one credit for a report of two */
.packs label:has(input:disabled) { cursor: not-allowed; background: var(--surface-sunk); border-color: var(--border); color: var(--text-muted); }
.packs label:has(input:disabled) .save { display: none; }
.too-few { font-size: 13px; font-weight: 600; color: var(--warning); }
.packs label:not(:has(input:disabled)) .too-few { display: none; }
/* the parts of the order form for buying a pack, shown when a report takes more credits than they have */
fieldset.shop { border: 0; padding: 0; margin: 0; min-width: 0; }
/* reports are slow to start just now: said under the button */
.queue-slow { margin: var(--space-4) 0 0; font-size: 15px; }

/* ---------------------------------------------------------------- tables: credits, and the admin pages' accounts */

.table-wrap { overflow-x: auto; padding: var(--space-2) var(--space-3); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--border); white-space: nowrap;
}
.table td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .date { white-space: nowrap; color: var(--text-muted); }
.table .gain { color: var(--success); font-weight: 650; }
.table .spend { color: var(--text-muted); }
.table .sub { display: block; font-size: 14px; color: var(--text-muted); }
.table .links { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 14px; margin-top: 2px; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .table .optional { display: none; }
  .table-wrap { padding: var(--space-1); }
  .table td, .table th { padding-left: var(--space-2); padding-right: var(--space-2); }
}

.balance-card { margin-bottom: var(--space-5); }
.balance { font-size: 20px; margin: 0 0 var(--space-1); }
.balance b { font-family: var(--font-display); font-size: 44px; font-weight: 780; letter-spacing: -0.03em; margin-right: 4px; }
.section-title { font-size: 22px; margin-top: var(--space-6); }

/* ---------------------------------------------------------------- the admin pages */

.search { display: flex; gap: var(--space-2); flex: 1; max-width: 420px; }
.search .input { flex: 1; }
.search .button { padding: 10px 18px; }
.admin-grid { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: var(--space-4); align-items: start; }
.admin-grid .balance-card { margin: 0; }
@media (max-width: 700px) { .admin-grid { grid-template-columns: 1fr; } }
.grant h3 { margin-bottom: var(--space-4); }
.grant-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3); }
.grant-row .field { margin-bottom: var(--space-3); }
.grant .hint { margin-left: var(--space-3); }
.danger-zone { margin-top: var(--space-7); border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* ---------------------------------------------------------------- under the header on a report: how long it's kept, and a copy to save */

.report-bar { background: var(--brand-soft); border-bottom: var(--border-width) solid color-mix(in oklab, var(--brand) 25%, var(--border)); }
.report-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); font-size: 14px; color: var(--brand-strong); font-weight: 600; }

/* ---------------------------------------------------------------- inviting friends */

.invite-lede { margin-top: 0; }
.copy-row { display: flex; gap: var(--space-2); }
.copy-row .input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 15px; }
.invite-nudge { margin: var(--space-5) 0 0; font-size: 15px; color: var(--text-muted); }