/* SponsorSwitch. See DESIGN.md for the reasoning behind these values. */

:root {
  /* Neutrals tinted toward the brand's own hue (168, spruce), not toward warm-by-default.
     Lightness is unchanged from the previous indigo-tinted set, so contrast ratios hold. */
  --page: oklch(0.988 0.003 168);
  --panel: oklch(0.962 0.006 168);
  --panel-2: oklch(0.938 0.008 168);
  --surface: oklch(1 0 0);
  --line: oklch(0.885 0.008 168);
  --line-strong: oklch(0.8 0.012 168);
  --ink: oklch(0.24 0.022 168);
  --ink-muted: oklch(0.455 0.02 168);
  --ink-faint: oklch(0.58 0.016 168);

  /* Spruce carries interaction, as it does on the landing page. */
  --accent: oklch(0.33 0.055 168);
  --accent-hover: oklch(0.26 0.045 168);
  --accent-soft: oklch(0.945 0.018 168);
  --accent-ink: oklch(0.3 0.05 168);
  --on-accent: oklch(0.97 0.008 92);

  /* Amber is the signal colour, again matching the landing page. Used for attention, never
     for decoration. */
  --signal: oklch(0.62 0.15 62);
  --signal-bright: oklch(0.79 0.155 72);
  --signal-soft: oklch(0.955 0.045 80);

  /* Dark chrome, so the tool reads as the same product as the page that sent people here. */
  --chrome: oklch(0.26 0.045 168);
  --chrome-lift: oklch(0.33 0.05 168);
  --chrome-line: oklch(0.45 0.035 168 / 0.45);
  --chrome-ink: oklch(0.95 0.012 92);
  --chrome-ink-dim: oklch(0.8 0.016 92);

  /* Outcome colours. Strong and worth-applying are deliberately related, because the two
     outcomes are related; amber and grey carry the distinctions that change what you do. */
  --strong: oklch(0.44 0.13 162);
  --strong-soft: oklch(0.945 0.04 162);
  --worth: oklch(0.5 0.085 205);
  --worth-soft: oklch(0.95 0.03 205);
  --check: oklch(0.53 0.135 68);
  --check-soft: oklch(0.955 0.05 80);
  --unlikely: oklch(0.5 0.015 168);
  --unlikely-soft: oklch(0.94 0.005 168);
  --danger: oklch(0.5 0.16 28);
  --danger-soft: oklch(0.95 0.04 28);

  --radius-surface: 10px;
  --radius-control: 7px;
  --shadow-pop: 0 6px 20px oklch(0.24 0.03 168 / 0.16);

  --z-sticky: 20;
  --z-drawer: 40;
  --z-toast: 60;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0: 0.875rem;
  --step-1: 1rem;
  --step-2: 1.125rem;
  --step-3: 1.3125rem;
  --step-4: 1.625rem;
  --step-5: 2rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    /* Dark mode is the same brand, one step deeper than the landing page's spruce so the
       chrome still separates from the field. Amber stays the signal. */
    --page: oklch(0.185 0.028 168);
    --panel: oklch(0.225 0.033 168);
    --panel-2: oklch(0.262 0.037 168);
    --surface: oklch(0.212 0.031 168);
    --line: oklch(0.33 0.03 168);
    --line-strong: oklch(0.42 0.032 168);
    --ink: oklch(0.955 0.012 92);
    --ink-muted: oklch(0.775 0.016 92);
    --ink-faint: oklch(0.66 0.018 92);
    --accent: oklch(0.79 0.155 72);
    --accent-hover: oklch(0.85 0.14 76);
    --accent-soft: oklch(0.3 0.055 100);
    --accent-ink: oklch(0.84 0.13 76);
    --on-accent: oklch(0.19 0.038 168);

    --signal: oklch(0.79 0.155 72);
    --signal-bright: oklch(0.85 0.145 76);
    --signal-soft: oklch(0.3 0.055 90);

    --chrome: oklch(0.145 0.024 168);
    --chrome-lift: oklch(0.24 0.034 168);
    --chrome-line: oklch(0.4 0.03 168 / 0.5);
    --chrome-ink: oklch(0.955 0.012 92);
    --chrome-ink-dim: oklch(0.755 0.016 92);

    --strong: oklch(0.78 0.15 158);
    --strong-soft: oklch(0.29 0.055 158);
    --worth: oklch(0.78 0.1 205);
    --worth-soft: oklch(0.28 0.045 205);
    --check: oklch(0.82 0.14 76);
    --check-soft: oklch(0.3 0.055 80);
    --unlikely: oklch(0.7 0.014 168);
    --unlikely-soft: oklch(0.27 0.01 168);
    --danger: oklch(0.73 0.15 28);
    --danger-soft: oklch(0.3 0.06 28);

    --shadow-pop: 0 6px 22px oklch(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; text-wrap: balance; font-weight: 650; }
h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 0.75em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
svg { flex: none; }

.prose { max-width: 68ch; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- app shell ---------- */

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

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
  color: var(--chrome-ink);
}

.brand {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 680; font-size: var(--step-1); letter-spacing: -0.01em;
  color: inherit; text-decoration: none;
}
.brand svg { color: var(--signal-bright); flex: none; margin-top: 1px; }
.brand small { font-weight: 500; color: var(--chrome-ink-dim); font-size: var(--step--2); }

.topbar-spacer { flex: 1; }

main { flex: 1; padding: 14px 14px 88px; }
.wrap { max-width: 1180px; margin: 0 auto; }

/* Bottom tab bar on phones, left rail from 900px. */
.tabs {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--chrome); border-top: 1px solid var(--chrome-line);
  color: var(--chrome-ink);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 7px; font-size: var(--step--2); font-weight: 550;
  color: var(--chrome-ink-dim); background: none; border: 0; cursor: pointer;
  text-decoration: none; position: relative;
  transition: color var(--dur) var(--ease);
}
.tab[aria-current='page'] { color: var(--chrome-ink); }
.tab[aria-current='page']::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px;
  background: var(--signal-bright); border-radius: 0 0 2px 2px;
}
.tab .badge-dot {
  position: absolute; top: 6px; right: 26%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal-bright);
}

@media (min-width: 900px) {
  .shell { flex-direction: row; }
  .tabs {
    position: sticky; inset: 0 auto 0 0; height: 100vh; width: 216px;
    grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start;
    gap: 2px; padding: 12px 10px; border-top: 0; border-right: 1px solid var(--chrome-line);
  }
  .tab {
    flex-direction: row; justify-content: flex-start; gap: 10px;
    padding: 9px 11px; border-radius: var(--radius-control); font-size: var(--step-0);
  }
  .tab[aria-current='page'] { background: var(--chrome-lift); }
  .tab[aria-current='page']::before { display: none; }
  .tab .badge-dot { position: static; margin-left: auto; }
  .shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  main { padding: 20px 24px 40px; }
}

/* ---------- buttons and controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; min-height: 40px;
  font: inherit; font-weight: 600; font-size: var(--step-0);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform 90ms var(--ease);
}
.btn:hover:not(:disabled) { background: var(--panel-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); }
.btn-danger { color: var(--danger); border-color: var(--line-strong); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn-sm { min-height: 32px; padding: 5px 10px; font-size: var(--step--1); }
.btn-block { width: 100%; }
.btn[data-loading='1'] { color: transparent; position: relative; pointer-events: none; }
.btn[data-loading='1']::after {
  content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--ink-muted); animation: spin 700ms linear infinite;
}
.btn-primary[data-loading='1']::after { color: var(--on-accent); }
@keyframes spin { to { transform: rotate(360deg); } }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-control);
}

label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: 5px; }
.hint { color: var(--ink-muted); font-weight: 450; font-size: var(--step--1); }

/* input:not([type]) matters: an <input> with no type attribute is a text input but does not
   match input[type='text'], which left every typeless field in the admin at half width. */
input:not([type]), input[type='text'], input[type='email'], input[type='password'], input[type='date'],
input[type='number'], input[type='tel'], input[type='search'], select, textarea {
  width: 100%; padding: 9px 11px; min-height: 40px;
  font: inherit; font-size: var(--step-0);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  transition: border-color var(--dur) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:disabled, select:disabled { background: var(--panel-2); opacity: 0.7; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
textarea { min-height: 84px; resize: vertical; }
select { appearance: none; background-image: none; padding-right: 30px; }
.select-wrap { position: relative; }
.select-wrap svg { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }

.field { margin-bottom: 14px; }
.field-row { display: grid; gap: 12px; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); cursor: pointer; margin-bottom: 7px; font-weight: 500;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.check:hover { border-color: var(--ink-faint); }
.check input { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check span small { display: block; color: var(--ink-muted); font-weight: 450; }

/* ---------- surfaces ---------- */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-surface); padding: 16px;
}
.panel + .panel { margin-top: 12px; }
.panel-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.panel-head h2, .panel-head h3 { margin-right: auto; }

.grid { display: grid; gap: 12px; }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 10px; }
.spread { display: flex; gap: 10px; align-items: center; justify-content: space-between; }

/* Heading plus primary action. Stacks on a phone so the heading keeps its full width. */
.page-head { display: grid; gap: 12px; margin-bottom: 14px; }
.page-head .btn { width: 100%; }
@media (min-width: 700px) {
  .page-head { grid-template-columns: 1fr auto; align-items: end; }
  .page-head .btn { width: auto; }
}

/* ---------- chips and badges ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--step--2); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink-muted); background: var(--panel);
}
.chip svg { width: 13px; height: 13px; }
.chip-strong { color: var(--strong); background: var(--strong-soft); border-color: transparent; }
.chip-worth { color: var(--worth); background: var(--worth-soft); border-color: transparent; }
.chip-check { color: var(--check); background: var(--check-soft); border-color: transparent; }
.chip-unlikely { color: var(--unlikely); background: var(--unlikely-soft); border-color: transparent; }
.chip-demo { color: var(--check); background: transparent; border-color: var(--check); border-style: dashed; }
.chip-accent { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }

.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; min-height: 34px; border-radius: 999px;
  font: inherit; font-size: var(--step--1); font-weight: 600;
  background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--line-strong); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.filter-chip[aria-pressed='true'] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

/* Category filters that say what they filter to. The counts alone were meaningless to
   anyone who had not already read the documentation. */
.filter-cards {
  display: grid; gap: 8px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.filter-card {
  display: block; text-align: left; cursor: pointer;
  padding: 9px 11px; font: inherit;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-card:hover { border-color: var(--ink-faint); }
.filter-card b {
  display: block; font-size: var(--step-3); font-weight: 680; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink);
}
.filter-card span {
  display: flex; align-items: center; gap: 5px;
  font-weight: 620; font-size: var(--step--1); color: var(--ink); margin-top: 1px;
}
.filter-card small {
  display: block; margin-top: 3px; color: var(--ink-faint);
  font-size: var(--step--2); line-height: 1.3; text-wrap: pretty;
}
.filter-card[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); }
.filter-card[aria-pressed='true'] b, .filter-card[aria-pressed='true'] span { color: var(--accent-ink); }
.filter-cards .filter-card:nth-child(1) b { color: var(--strong); }
.filter-cards .filter-card:nth-child(2) b { color: var(--worth); }
.filter-cards .filter-card:nth-child(3) b { color: var(--check); }
.filter-cards .filter-card:nth-child(4) b { color: var(--ink-muted); }

/* ---------- score ---------- */

.score {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums;
  border: 2px solid currentColor;
}
.score small { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.02em; margin-top: -3px; }
.score-strong { color: var(--strong); background: var(--strong-soft); }
.score-worth { color: var(--worth); background: var(--worth-soft); }
.score-check { color: var(--check); background: var(--check-soft); }
.score-unlikely { color: var(--unlikely); background: var(--unlikely-soft); }

/* ---------- job list ---------- */

.job {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-surface); padding: 13px;
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.job:hover { border-color: var(--line-strong); background: var(--panel); }
.job + .job { margin-top: 9px; }
.job-top { display: flex; gap: 12px; align-items: flex-start; }
.job-title { font-weight: 650; font-size: var(--step-1); letter-spacing: -0.01em; }
.job-employer { color: var(--ink-muted); font-weight: 500; }
.job-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-muted); font-size: var(--step--1); margin-top: 5px; }
.job-meta b { color: var(--ink); font-weight: 620; }
.job-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.job-new { color: var(--accent-ink); font-weight: 650; font-size: var(--step--2); }

.group-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 20px 0 9px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: var(--step-0); font-weight: 650;
}
.group-head span { color: var(--ink-muted); font-weight: 500; font-size: var(--step--1); }
.group-head:first-child { margin-top: 4px; }

/* ---------- evidence list ---------- */

.evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.evidence li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--step-0); }
.evidence svg { margin-top: 2px; }
.ev-pass { color: var(--strong); }
.ev-warn { color: var(--check); }
.ev-fail { color: var(--danger); }
.ev-info { color: var(--ink-faint); }
.evidence li > div { color: var(--ink); }
.evidence blockquote {
  margin: 4px 0 0; padding: 7px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-control);
  color: var(--ink-muted); font-size: var(--step--1); font-style: normal;
}

.kv { display: grid; gap: 7px; margin: 0; }
.kv div { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; font-size: var(--step-0); }
.kv dt { color: var(--ink-muted); }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

.desc { white-space: pre-wrap; max-width: 68ch; color: var(--ink); }
.desc-clamp { max-height: 15em; overflow: hidden; mask-image: linear-gradient(to bottom, black 70%, transparent); }

/* ---------- tracker ---------- */

.track-col { margin-bottom: 18px; }
.track-col h3 { font-size: var(--step-0); text-transform: none; margin-bottom: 8px; color: var(--ink-muted); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-surface); overflow: hidden; }
.stat { background: var(--surface); padding: 12px 13px; }
.stat b { display: block; font-size: var(--step-4); font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.stat span { color: var(--ink-muted); font-size: var(--step--1); display: block; }
.stat small {
  display: block; margin-top: 4px; color: var(--ink-faint);
  font-size: var(--step--2); line-height: 1.35; text-wrap: pretty;
}
.stat-strong b { color: var(--strong); }
.stat-worth b { color: var(--worth); }
.stat-check b { color: var(--check); }

/* ---------- guided onboarding ---------- */

.onboarding { max-width: 540px; }
.onboarding h1 { font-size: var(--step-3); margin-bottom: 2px; }
.onboarding-progress { display: flex; gap: 5px; margin: 4px 0 10px; }
.onboarding-progress span {
  height: 4px; flex: 1; border-radius: 999px; background: var(--line);
  transition: background var(--dur) var(--ease);
}
.onboarding-progress span.done { background: var(--accent); }

/* ---------- notices ---------- */

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--radius-surface);
  border: 1px solid var(--line); background: var(--panel); font-size: var(--step-0);
}
.notice svg { margin-top: 2px; }
.notice-warn { border-color: var(--check); background: var(--check-soft); color: var(--check); }
.notice-warn strong, .notice-warn a { color: inherit; }
.notice-urgent { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.notice-accent { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.notice + * { margin-top: 12px; }

.empty { text-align: center; padding: 34px 18px; color: var(--ink-muted); }
.empty svg { color: var(--ink-faint); margin-bottom: 10px; }
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 46ch; margin-inline: auto; }

/* ---------- drawer (filters, forms) ---------- */

dialog {
  padding: 0; border: 0; background: transparent; max-width: 100%; max-height: 100%;
}
dialog::backdrop { background: oklch(0.2 0.035 168 / 0.5); }
.sheet {
  width: 100vw; max-width: 520px; background: var(--page); color: var(--ink);
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  border: 1px solid var(--line); border-bottom: 0;
  max-height: 88vh; overflow-y: auto; padding: 16px;
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
}
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-head h3 { margin-right: auto; }
@media (min-width: 620px) {
  .sheet { position: static; transform: none; border-radius: var(--radius-surface); border-bottom: 1px solid var(--line); margin: 8vh auto; }
}

.toast {
  position: fixed; z-index: var(--z-toast); left: 50%; bottom: 96px; transform: translateX(-50%);
  background: var(--ink); color: var(--page); padding: 10px 16px;
  border-radius: 999px; font-weight: 600; font-size: var(--step-0);
  box-shadow: var(--shadow-pop); animation: toast-in 200ms var(--ease);
  max-width: calc(100vw - 32px);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (min-width: 900px) { .toast { bottom: 24px; } }

.skeleton { background: var(--panel-2); border-radius: var(--radius-control); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
.skeleton-job { height: 96px; margin-bottom: 9px; }

.pill-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }

.split { display: grid; gap: 14px; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }

.sticky-side { position: sticky; top: 74px; }

footer.credit { padding: 20px 4px 8px; color: var(--ink-faint); font-size: var(--step--2); text-align: center; }
footer.credit a { color: var(--ink-muted); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the unlock screen ---------- */

.paywall-count {
  font-size: var(--step-5); line-height: 1.05; letter-spacing: -0.02em;
  text-wrap: balance;
}
.paywall-count span { display: block; font-size: var(--step-2); font-weight: 600; color: var(--ink-muted); margin-top: 6px; }
.panel-accent { border-color: var(--signal); background: var(--signal-soft); }
.panel-accent h3 { color: var(--ink); }

/* ---------- referrals ---------- */

.referral-code {
  font-size: var(--step-5); font-weight: 700; letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums; margin: 4px 0 8px;
}
.stat-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 14px 0 8px; }
.stat {
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-surface);
}
.stat strong { display: block; font-size: var(--step-4); letter-spacing: -0.01em; }
.stat span { color: var(--ink-muted); font-size: var(--step--1); }

/* =========================================================================
   Mobile first
   =========================================================================
   The tool is used standing up, one-handed, often between shifts. Two changes
   carry most of the benefit: rows of peer cards scroll sideways instead of
   stacking, and the first real result is reachable without scrolling past a
   screen of summary.
   ========================================================================= */

@media (max-width: 719px) {
  /* Sets of equal cards scroll sideways. This is the difference between the first
     vacancy being on screen and being a screen and a half down. min-width: 0 is
     load-bearing: without it a scroll container widens its parent instead of scrolling. */
  .stat-row,
  .filter-cards {
    min-width: 0; max-width: 100%;
    display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
    gap: 8px; background: none; border: 0; border-radius: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -14px; padding-bottom: 4px;
    scrollbar-width: none;
  }
  /* padding-inline on a grid scroll container does not reliably produce a start offset, so
     the edge cards carry the gutter themselves and line up with the heading above them. */
  .stat-row > :first-child, .filter-cards > :first-child { margin-left: 14px; }
  .stat-row > :last-child, .filter-cards > :last-child { margin-right: 14px; }
  .stat-row::-webkit-scrollbar, .filter-cards::-webkit-scrollbar { display: none; }
  .stat-row > *, .filter-cards > * { scroll-snap-align: start; }
  .stat, .filter-card {
    border: 1px solid var(--line); border-radius: var(--radius-surface);
  }

  /* Search and filter belong on one line: the sort control is a refinement and can wait
     until someone has results to sort. */
  .search-row { display: flex; gap: 8px; }
  .search-row input { flex: 1 1 auto; min-width: 0; }
  .search-row .btn { flex: none; }

  /* Thumb-sized targets throughout. 44px is the floor, not the aspiration. */
  .btn { min-height: 46px; }
  .btn-sm { min-height: 38px; }

  main { padding-bottom: 96px; }
}

/* The bottom bar is the app's own sticky call to action, so content must clear it. */
@supports (padding: max(0px)) {
  @media (max-width: 899px) {
    main { padding-bottom: max(96px, calc(80px + env(safe-area-inset-bottom))); }
  }
}

/* An admin looking through someone else's eyes must never be in any doubt about it. */
.preview-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: -14px -14px 14px; padding: 10px 14px;
  background: var(--signal-soft); border-bottom: 1px solid var(--signal);
  font-size: var(--step--1); color: var(--ink);
}
.preview-bar .btn { margin-left: auto; }
@media (min-width: 900px) { .preview-bar { margin: -20px -24px 20px; padding: 10px 24px; } }

/* The one destructive thing in the product should look like it. */
.panel-danger { border-color: var(--danger); }
.panel-danger .panel-head h3 { color: var(--danger); }

/* ---------- interview preparation ---------- */

.tips { display: grid; gap: 12px; }
@media (min-width: 700px) { .tips { grid-template-columns: 1fr 1fr; } }
.tip h4 { font-size: var(--step-0); font-weight: 700; }
.tip p { color: var(--ink-muted); font-size: var(--step--1); line-height: 1.5; margin-top: 3px; }

.qa-row { border-top: 1px solid var(--line); }
.qa-row:first-of-type { border-top: 0; }
.qa-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-weight: 600; color: var(--ink); min-height: 48px;
}
.qa-q[aria-expanded='true'] { color: var(--accent-ink); }
.qa-prompts { padding: 0 0 14px; }
.qa-prompts ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.qa-prompts li { color: var(--ink-muted); line-height: 1.5; }
.qa-shared { padding: 13px 0; }
.qa-shared strong { display: block; font-weight: 600; }

/* ---------- saving a job from the list ---------- */

.job-wrap { position: relative; }
.job-star {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px; display: grid; place-content: center;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--ink-faint);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.job-star:hover { color: var(--accent); background: var(--panel); }
.job-star[data-saved='1'] { color: var(--signal); }
.job-star[data-saved='1'] svg { fill: currentColor; }
.job-star:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The card's own text must not run under the star. */
.job-wrap .job .job-title { padding-right: 40px; }

.chip-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; min-height: 40px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong);
  font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink); cursor: pointer;
}
.chip-toggle[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* Progress to the payout threshold: a real gate, so worth drawing. */
.progress { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.progress-bar { height: 100%; background: var(--signal); border-radius: 999px; transition: width 400ms var(--ease); }