/*!
 * ReferForge design system
 * ---------------------------------------------------------------------------
 * Hand-authored, no build step. LogicTree's servers do not carry Node, so this
 * ships as plain CSS rather than a compiled Tailwind bundle -- one file, one
 * request, nothing to rebuild on deploy.
 *
 * Contents
 *   1. Tokens (light + dark)
 *   2. Base & typography
 *   3. Layout: shell, topbar, sidebar
 *   4. Cards, stat tiles, charts
 *   5. Tables
 *   6. Forms
 *   7. Buttons, badges, alerts
 *   8. Prose (rendered markdown)
 *   9. Public pages
 *  10. Responsive
 */

/* ========================================================================== *
 * 1. Tokens
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Brand
 * ---------------------------------------------------------------------------
 * Sampled from the supplied logo artwork:
 *   gold        #E0941A   the "Forge" wordmark and the rising arrow
 *   deep teal   #006078   the "Refer" wordmark
 *   teal-green  #00A89C   the referral-network nodes
 *   ink navy    #0C1830   the tagline
 *
 * Gold carries the identity but sits at 2.45:1 on white, so it is never used
 * for body text or as a background behind white text. Where it fills a button
 * it takes navy ink, exactly as the wordmark does.
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces & ink -- shared with the chart layer so plots sit on the page
     rather than floating in their own colour world. Warmed very slightly to
     sit under the gold rather than fight it. */
  --surface-1: #fffdf8;      /* card / chart surface */
  --surface-2: #faf8f2;      /* page plane */
  --surface-3: #f2efe6;      /* subtle fill: table head, ghost hover */
  --text-primary: #0c1830;   /* the logo's tagline navy */
  --text-secondary: #4a5568;
  --text-muted: #8a8578;
  --gridline: #e6e1d5;
  --axis: #c9c3b4;
  --border: rgba(12, 24, 48, 0.12);
  --border-strong: rgba(12, 24, 48, 0.20);

  /* Categorical series, fixed order -- never cycled, never reassigned by rank.
     Validated (lightness band, chroma floor, CVD separation, normal-vision
     floor) against the --surface-1 above. The gold and teal-green sit below
     3:1, so every chart ships direct labels, a tooltip, or an adjacent table. */
  --series-1: #0086ac;   /* teal-blue */
  --series-2: #e0941a;   /* brand gold */
  --series-3: #00a89c;   /* brand teal-green */
  --series-4: #7a5ea8;   /* violet, only reached at four series */

  /* Status. Reserved -- never reused as a series colour. Always with a label. */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --status-good-text: #04630d;

  --brand: #00708c;          /* interactive teal: 5.1:1 on the light surface */
  --brand-ink: #ffffff;
  --brand-wash: #e4f2f6;

  --gold: #e0941a;
  --gold-ink: #0c1830;       /* navy on gold, as in the wordmark */
  --gold-wash: #fdf3e0;
  --green: #00a89c;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05);
  --shadow: 0 1px 3px rgba(11, 11, 11, 0.07), 0 4px 12px rgba(11, 11, 11, 0.04);

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-w: 232px;
}

/* Dark mode is selected, not flipped: each series is re-stepped for the dark
   surface and re-validated against it, rather than inverted from the light
   value. Declared twice -- once for the OS setting, once for the in-page
   toggle, which must win in both directions. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --surface-1: #1a1917;
    --surface-2: #100f0e;
    --surface-3: #262421;
    --text-primary: #ffffff;
    --text-secondary: #c8c3b6;
    --text-muted: #8f8a7d;
    --gridline: #2d2b28;
    --axis: #3a3833;
    --border: rgba(255, 255, 255, 0.11);
    --border-strong: rgba(255, 255, 255, 0.20);

    --series-1: #0e8cb2;
    --series-2: #c08312;
    --series-3: #0c9f90;
    --series-4: #8a72c4;

    --status-good-text: #16b516;

    --brand: #34b3d1;
    --brand-wash: #10333d;

    --gold: #e0a33d;
    --gold-ink: #14100a;
    --gold-wash: #33260f;
    --green: #1abcae;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1917;
  --surface-2: #100f0e;
  --surface-3: #262421;
  --text-primary: #ffffff;
  --text-secondary: #c8c3b6;
  --text-muted: #8f8a7d;
  --gridline: #2d2b28;
  --axis: #3a3833;
  --border: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.20);
  --series-1: #0e8cb2;
  --series-2: #c08312;
  --series-3: #0c9f90;
  --series-4: #8a72c4;
  --status-good-text: #16b516;
  --brand: #34b3d1;
  --brand-wash: #10333d;
  --gold: #e0a33d;
  --gold-ink: #14100a;
  --gold-wash: #33260f;
  --green: #1abcae;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ========================================================================== *
 * 2. Base & typography
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.6rem; letter-spacing: -0.02em; }
h2 { font-size: 1.2rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .text-sm { font-size: .8125rem; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); font-size: .875em; }
.nums { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========================================================================== *
 * 3. Layout
 * ========================================================================== */

.shell { display: flex; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  height: 56px; padding: 0 1.25rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.brandmark {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem;
  color: var(--text-primary);
}
.brandmark:hover { text-decoration: none; }
.brandmark svg { display: block; }

/* --- Logo lockups ---------------------------------------------------------
   The supplied artwork has its own navy wordmark, which would disappear on the
   dark surface. Rather than ship a second file, the dark theme lifts it just
   enough to read while leaving the gold and teal untouched. */
.logo { display: block; }
.logo--mark { width: 24px; height: 24px; flex: none; }
.logo--horizontal { width: auto; height: 34px; max-width: 100%; }
.logo--stacked { width: auto; height: auto; max-width: 280px; }

.logo--hero { height: auto; max-width: 420px; margin: 0 auto 1.5rem; }

:root[data-theme="dark"] .logo--horizontal,
:root[data-theme="dark"] .logo--stacked,
:root:where(:not([data-theme="light"])) .logo--horizontal,
:root:where(:not([data-theme="light"])) .logo--stacked {
  filter: brightness(1.35) saturate(1.05);
}
@media (prefers-color-scheme: light) {
  :root:where(:not([data-theme="dark"])) .logo--horizontal,
  :root:where(:not([data-theme="dark"])) .logo--stacked { filter: none; }
}

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  padding: 1rem .75rem 2rem;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}

.sidebar__group { margin-bottom: 1.25rem; }
.sidebar__label {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  padding: 0 .625rem; margin-bottom: .375rem;
}

.navlink {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: .9rem; font-weight: 500;
}
.navlink:hover { background: var(--surface-3); color: var(--text-primary); text-decoration: none; }
.navlink[aria-current="page"] { background: var(--brand-wash); color: var(--brand); font-weight: 600; }
.navlink__badge {
  margin-left: auto; font-size: .6875rem; font-weight: 700;
  background: var(--status-critical); color: #fff;
  padding: .0625rem .375rem; border-radius: 999px;
}

.main { flex: 1 1 auto; min-width: 0; }
.container { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.container--narrow { max-width: 720px; }
.container--wide { max-width: 1400px; }

.page-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.page-head p { margin: .125rem 0 0; color: var(--text-secondary); }

.stack > * + * { margin-top: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* ========================================================================== *
 * 4. Cards, stat tiles, charts
 * ========================================================================== */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--border);
}
.card__head h2, .card__head h3 { margin: 0; }
.card__body { padding: 1.125rem; }
.card__body--flush { padding: 0; }
.card__foot {
  padding: .75rem 1.125rem;
  border-top: 1px solid var(--border);
  background: var(--surface-3);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Stat tile -- a single number does not need a chart around it. */
.stat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  box-shadow: var(--shadow-sm);
}
.stat__label {
  display: flex; align-items: center; gap: .375rem;
  font-size: .8125rem; font-weight: 600; color: var(--text-secondary);
  margin-bottom: .25rem;
}
.stat__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.stat__value {
  font-size: 1.75rem; font-weight: 680; letter-spacing: -0.03em;
  line-height: 1.1; color: var(--text-primary);
}
.stat__meta { font-size: .8125rem; color: var(--text-muted); margin-top: .25rem; }
.stat__delta { font-weight: 600; }
.stat__delta--up { color: var(--status-good-text); }
.stat__delta--down { color: var(--status-critical); }

/* Chart figure. The SVG is drawn by rf-charts.js against these same tokens. */
.figure { margin: 0; }
.figure__caption {
  font-size: .8125rem; color: var(--text-muted); margin-top: .5rem;
}
.chart { width: 100%; position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.legend {
  display: flex; flex-wrap: wrap; gap: .875rem;
  margin: 0 0 .75rem; padding: 0; list-style: none;
  font-size: .8125rem; color: var(--text-secondary);
}
.legend li { display: inline-flex; align-items: center; gap: .375rem; }
.legend__swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }

.chart-tip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .5rem .625rem;
  font-size: .8125rem; line-height: 1.4;
  white-space: nowrap;
  opacity: 0; transition: opacity .1s ease;
}
.chart-tip[data-visible="true"] { opacity: 1; }
.chart-tip__title { font-weight: 650; margin-bottom: .25rem; color: var(--text-primary); }
.chart-tip__row { display: flex; align-items: center; gap: .5rem; }
.chart-tip__row span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

.chart-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; color: var(--text-muted); font-size: .875rem;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
}

/* ========================================================================== *
 * 5. Tables
 * ========================================================================== */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.table {
  width: 100%; border-collapse: collapse; font-size: .875rem;
}
.table th, .table td {
  padding: .625rem .875rem; text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table thead th {
  background: var(--surface-3);
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-3); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__empty {
  padding: 2.5rem 1rem; text-align: center; color: var(--text-muted);
}

/* ========================================================================== *
 * 6. Forms
 * ========================================================================== */

.field { margin-bottom: 1rem; }
.field label, .label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--text-secondary); margin-bottom: .3125rem;
}
.field__hint { font-size: .8125rem; color: var(--text-muted); margin-top: .3125rem; }
.field__error { font-size: .8125rem; color: var(--status-critical); margin-top: .3125rem; font-weight: 500; }

.input, .select, .textarea {
  width: 100%; padding: .5rem .625rem;
  font: inherit; font-size: .9rem; color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.input[aria-invalid="true"] { border-color: var(--status-critical); }
.textarea { min-height: 130px; resize: vertical; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6; }
.input--color { padding: .25rem; height: 38px; }

.check {
  display: flex; gap: .625rem; align-items: flex-start;
  font-size: .9rem; color: var(--text-secondary);
}
.check input { margin-top: .2rem; flex: none; width: 16px; height: 16px; accent-color: var(--brand); }

.fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; margin: 0 0 1rem;
}
.fieldset legend {
  padding: 0 .375rem; font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}

/* Advanced settings tucked away -- simple by default (design principle D6). */
details.disclosure {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1rem; background: var(--surface-1);
}
details.disclosure > summary {
  cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text-secondary);
  list-style: none;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "▸ "; color: var(--text-muted); }
details.disclosure[open] > summary::before { content: "▾ "; }
details.disclosure[open] > summary { margin-bottom: .875rem; }

/* ========================================================================== *
 * 7. Buttons, badges, alerts
 * ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
  padding: .5rem .875rem; font: inherit; font-size: .875rem; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--surface-1); color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn:hover { text-decoration: none; background: var(--surface-3); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Gold fill with navy ink -- the wordmark's own contrast pairing, and the
   only readable way to use a colour that sits at 2.45:1 against white. */
.btn--primary {
  background: var(--gold); color: var(--gold-ink); border-color: transparent;
  font-weight: 650;
}
.btn--primary:hover { background: var(--gold); filter: brightness(1.06); }

/* Teal alternative, for a second action beside a gold primary. */
.btn--teal { background: var(--brand); color: #fff; border-color: transparent; }
.btn--teal:hover { background: var(--brand); filter: brightness(1.08); }
.btn--danger { background: var(--status-critical); color: #fff; border-color: transparent; }
.btn--danger:hover { background: var(--status-critical); filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-3); }
.btn--sm { padding: .3125rem .5625rem; font-size: .8125rem; }
.btn--lg { padding: .6875rem 1.25rem; font-size: .9375rem; }
.btn--block { width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .125rem .4375rem; border-radius: var(--radius-sm);
  font-size: .75rem; font-weight: 650; line-height: 1.45;
  border: 1px solid transparent; white-space: nowrap;
}
/* Status colour never carries meaning alone -- every badge has its label. */
.badge--ok { background: rgba(12,163,12,.12); color: var(--status-good-text); border-color: rgba(12,163,12,.28); }
.badge--info { background: var(--brand-wash); color: var(--brand); border-color: rgba(42,120,214,.28); }
.badge--warn { background: rgba(250,178,25,.16); color: #8a5b00; border-color: rgba(250,178,25,.35); }
.badge--bad { background: rgba(208,59,59,.12); color: var(--status-critical); border-color: rgba(208,59,59,.3); }
.badge--muted { background: var(--surface-3); color: var(--text-muted); border-color: var(--border); }
:root[data-theme="dark"] .badge--warn,
:root:where(:not([data-theme="light"])) .badge--warn { color: #f0b73c; }

.alert {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: .75rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface-1);
  font-size: .9rem; margin-bottom: 1rem;
}
.alert__icon { flex: none; font-weight: 800; line-height: 1.5; }
.alert--success { background: rgba(12,163,12,.08); border-color: rgba(12,163,12,.3); color: var(--status-good-text); }
.alert--error { background: rgba(208,59,59,.08); border-color: rgba(208,59,59,.3); color: var(--status-critical); }
.alert--warn { background: rgba(250,178,25,.1); border-color: rgba(250,178,25,.35); }
.alert--info { background: var(--brand-wash); border-color: rgba(42,120,214,.3); }
.alert p:last-child { margin-bottom: 0; }

/* One-time secret reveal. Deliberately loud: it is shown once and never again. */
.secret-box {
  border: 2px solid var(--status-warning); border-radius: var(--radius);
  background: rgba(250,178,25,.08); padding: 1rem; margin-bottom: 1rem;
}
.secret-value {
  display: flex; gap: .5rem; align-items: center;
  font-family: var(--font-mono); font-size: .8125rem;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: .5rem .625rem;
  word-break: break-all; margin-top: .5rem;
}
.secret-value code { flex: 1 1 auto; min-width: 0; }

.copyfield {
  display: flex; gap: .5rem; align-items: stretch;
}
.copyfield .input { font-family: var(--font-mono); font-size: .8125rem; }

.snippet {
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .875rem 1rem;
  font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6;
  overflow-x: auto; white-space: pre; margin: 0;
}

/* ========================================================================== *
 * 8. Prose (rendered markdown)
 * ========================================================================== */

.prose { color: var(--text-secondary); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3 { color: var(--text-primary); margin-top: 1.75rem; }
.prose h1 { font-size: 1.35rem; }
.prose h2 { font-size: 1.1rem; }
.prose h3 { font-size: .975rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.375rem; }
.prose li { margin-bottom: .3125rem; }
.prose strong { color: var(--text-primary); font-weight: 650; }
.prose code {
  font-family: var(--font-mono); font-size: .875em;
  background: var(--surface-3); padding: .0625rem .3125rem; border-radius: var(--radius-sm);
}
.prose blockquote {
  margin: 0 0 1rem; padding-left: 1rem;
  border-left: 3px solid var(--border-strong); color: var(--text-muted);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.75rem 0; }
.prose a { text-decoration: underline; }

/* ========================================================================== *
 * 9. Public pages
 * ========================================================================== */

.public-nav {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0 1.25rem; height: 60px;
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.public-nav a.navitem { color: var(--text-secondary); font-size: .9rem; font-weight: 500; }
.public-nav a.navitem:hover { color: var(--text-primary); text-decoration: none; }

/* Profile hero. --site-brand is set inline per site; everything else is a token. */
.profile-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-1);
  padding: 2rem 1.75rem;
  margin-bottom: 1.5rem;
}
.profile-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--site-brand, var(--brand));
}
.profile-hero__top { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }

/* --- Homepage screenshot -------------------------------------------------
   Shown as a browser-chrome framed preview so it reads as "their site" rather
   than as a stray image. Fixed aspect ratio, so a tall or short capture cannot
   push the payout terms below the fold. */
.shot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  box-shadow: var(--shadow);
}
.shot__bar {
  display: flex; align-items: center; gap: .375rem;
  padding: .4375rem .625rem;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.shot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--axis); flex: none; }
.shot__url {
  margin-left: .375rem; font-size: .75rem; color: var(--text-muted);
  font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 16:10 is not a taste call -- it is exactly the capture viewport (1280x800),
   so object-fit has nothing to crop and the frame shows the whole homepage as
   the visitor would see it. Any other ratio silently cuts the page off. */
.shot__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  background: var(--surface-1);
}
.shot--profile { margin-top: 1.5rem; }
.shot--thumb { margin: 0 -1.125rem; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
.shot__caption { font-size: .75rem; color: var(--text-muted); margin-top: .5rem; }

/* Directory card with a screenshot leads with the image. */
.program-card--shot { padding-top: 0; }
.program-card--shot .shot--thumb { margin-top: 0; }
.profile-logo {
  width: 64px; height: 64px; border-radius: var(--radius);
  object-fit: contain; background: var(--surface-3);
  border: 1px solid var(--border); flex: none;
}
.profile-logo--fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 750; color: #fff;
  background: var(--site-brand, var(--brand)); border-color: transparent;
}
.profile-hero h1 { margin-bottom: .25rem; }
.profile-hero__headline { font-size: 1.05rem; color: var(--text-secondary); margin: 0; }

.terms-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 1.25rem;
}
.terms-grid > div { background: var(--surface-1); padding: 1rem 1.125rem; }
.terms-grid dt {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: .1875rem;
}
.terms-grid dd {
  margin: 0; font-size: 1.35rem; font-weight: 680;
  letter-spacing: -0.02em; color: var(--site-brand, var(--brand));
}
.terms-grid dd small { font-size: .8125rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

.btn--site {
  background: var(--site-brand, var(--brand));
  color: #fff; border-color: transparent;
}
.btn--site:hover { filter: brightness(1.08); }

/* Directory.

   auto-fit rather than auto-fill: with only two or three programs listed,
   auto-fill would hold empty tracks open and leave the cards as narrow columns,
   which makes a 16:10 website preview inside them read as a thin strip. auto-fit
   collapses the empty tracks so the cards widen into the available space and the
   screenshots look like the websites they are.

   The 460px cap stops a lone program from stretching a card across the full
   page, where the preview would tower over everything else on it. */
.program-grid {
  display: grid;
  /* Tracks cap at 460px rather than 1fr: with 1fr the tracks stretch to fill the
     row while the cards inside stay capped, which opens uneven gaps between
     them. Capping the track keeps every gutter the same width and leaves the
     slack at the end of the row, where it reads as intentional.

     min() keeps this from overflowing a phone, where 400px exceeds the screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 460px));
  gap: 1.25rem;
}
.program-card {
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.125rem;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.program-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--site-brand, var(--brand));
}
.program-card:hover { box-shadow: var(--shadow); }
.program-card__top { display: flex; gap: .75rem; align-items: center; }
.program-card__logo { width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none; object-fit: contain; background: var(--surface-3); }
.program-card__rate {
  font-size: 1.15rem; font-weight: 700; color: var(--site-brand, var(--brand));
  letter-spacing: -0.02em;
}
.program-card h3 { margin: 0; font-size: .975rem; }
.program-card p { margin: 0; font-size: .875rem; color: var(--text-secondary); }
.program-card__foot { margin-top: auto; display: flex; align-items: center; gap: .75rem; }

/* Landing */
.hero { padding: 3.5rem 0 3rem; text-align: center; }
.hero h1 { font-size: 2.5rem; letter-spacing: -0.035em; margin-bottom: .75rem; }
.hero p { font-size: 1.1rem; color: var(--text-secondary); max-width: 620px; margin: 0 auto 1.75rem; }

/* Picks up the gold of the arrow in the logo mark. */
.hero h1 em { font-style: normal; color: var(--gold); }

.tagline {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green); margin-bottom: .875rem;
}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

/* Feature cards get a gold top rule, echoing the profile hero. */
.feature-grid .card { position: relative; overflow: hidden; }
.feature-grid .card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold));
}

.footer {
  border-top: 1px solid var(--border); background: var(--surface-1);
  padding: 1.5rem 1.25rem; margin-top: 3rem;
  font-size: .8125rem; color: var(--text-muted);
}
.footer a { color: var(--text-secondary); }

/* ========================================================================== *
 * 10. Responsive
 * ========================================================================== */

.mobile-only { display: none; }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .shell { display: block; }
  .mobile-only { display: inline-flex; }

  /* The sidebar collapses into a disclosure panel under the topbar rather than
     an overlay drawer -- no JS, no focus trap, nothing to get stuck behind. */
  .sidebar {
    position: static; width: auto; height: auto;
    border-right: 0; border-bottom: 1px solid var(--border);
    padding: .75rem 1rem 1rem;
  }
  #nav-toggle:not(:checked) ~ .shell .sidebar { display: none; }
  .sidebar__group { margin-bottom: .75rem; }
  .sidebar__group ul { display: flex; flex-wrap: wrap; gap: .25rem; }
  .navlink { padding: .375rem .625rem; }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .terms-grid { grid-template-columns: minmax(0, 1fr); }
  .container { padding: 1.25rem 1rem 3rem; }
  .hero { padding: 2.5rem 0 2rem; }
  .hero h1 { font-size: 1.85rem; }
  .stat__value { font-size: 1.5rem; }
  .page-head { flex-direction: column; align-items: stretch; }
  .profile-hero { padding: 1.5rem 1.25rem; }
}

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

@media print {
  .sidebar, .topbar, .btn, .footer { display: none !important; }
  body { background: #fff; }
  .card, .stat { box-shadow: none; border-color: #ccc; }
}