/* =========================================================
   PILOT ORG — visual system
   styles.css

   AIVR HOUSE PALETTE. Deep navy #192236, AIVR gold #f7c948, bone #f0eee9,
   set in Montserrat — the same identity as the rest of the estate, so a
   student who knows one product recognises this one.

   The rules that keep it simple, and that a future edit should not undo:

   ONE TYPEFACE. Montserrat throughout. Figures use `font-variant-numeric:
   tabular-nums` so ratings and counts still line up down a column, which is
   what a second monospace face was previously doing and is no longer needed.

   THREE COLOURS DO THE WORK. Navy is structure and text. Gold is the primary
   action and the top rank — nothing else. Bone is ground. Red appears for
   exactly one thing (scam reports) and green for one thing (confirmed good),
   so when either shows up it means something.

   NO EMOJI ANYWHERE. Icons are inline SVG from one 24×24 stroke set, defined
   in common.js. Emoji render differently on every platform and instantly read
   as unfinished.

   Dark mode is the same palette inverted onto navy, not a separate design.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ---------- tokens ---------- */

:root {
  /* Light only. See the note below the token block. */
  color-scheme: light;

  /* AIVR brand constants. */
  --gold: #f7c948;
  --gold-deep: #d9a91d;
  --navy: #192236;

  /* Light: bone ground, navy ink. */
  --ground: #f0eee9;
  --surface: #ffffff;
  --surface-2: #f7f5f1;
  --sunken: #e7e3db;

  /* The greys are set by CONTRAST, not by eye. Every one of these is used for
     real text — field hints, star-row labels, "(required)" — so each must
     clear 4.5:1 against the lightest surface it can land on (#ffffff) and the
     off-white one (#f7f5f1). Picking them by how they looked put four of them
     between 2.2:1 and 4.2:1, which is unreadable for anyone with low vision
     and merely "subtle" for everyone else.
       ink-2   7.4:1   ink-3   6.6:1   ink-faint  5.0:1  */
  --ink: #192236;
  --ink-2: #4a5568;
  --ink-3: #545d6b;
  --ink-faint: #616a78;
  --on-gold: #192236;

  --rule: #ddd8cf;
  --rule-strong: #c2bbae;

  --link: #1c3f6e;
  --link-hover: #142e50;

  --danger: #a32b20;
  --danger-wash: #fbeeec;
  --danger-line: #e3c0bb;

  --good: #157a3d;
  --good-wash: #e9f4ec;
  --good-line: #bcdcc6;

  --shadow-sm: 0 1px 2px rgb(25 34 54 / 0.06);
  --shadow: 0 2px 8px rgb(25 34 54 / 0.07), 0 1px 2px rgb(25 34 54 / 0.05);
  --shadow-lg: 0 12px 32px rgb(25 34 54 / 0.16);

  --font: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;

  --page: 1120px;
  --gutter: clamp(1rem, 4vw, 2.25rem);

  /* One z-scale, so nothing has to guess. */
  --z-sticky: 30;
  --z-header: 40;
  --z-toast: 60;
}

/* THIS PRODUCT IS LIGHT ONLY. There is no dark theme and no theme toggle.

   `color-scheme: light` above is what makes that hold on a device whose OS is
   set to dark: without it the browser still renders NATIVE controls dark —
   select dropdowns, scrollbars, autofill backgrounds, the audio player — and
   they come out as dark widgets sitting on a bone page. Declaring the scheme
   tells the browser to draw them light to match. Do not remove it, and do not
   add a `prefers-color-scheme` block. */

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem); }
h3 { font-size: 1.02rem; }

p { margin: 0 0 0.85em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; display: block; }

/* Icons are all 24×24 stroke SVG. One rule sizes every one of them. */
.i { width: 1.15em; height: 1.15em; flex: none; stroke-width: 2; }
.i-sm { width: 1em; height: 1em; }
.i-lg { width: 1.4em; height: 1.4em; }

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

.shell { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

.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;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

/* Figures line up down a column without a second typeface. */
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--navy);
  color: #fff;
}
.masthead-in {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding-block: 0.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: #fff; }
.wordmark .i { color: var(--gold); width: 1.25rem; height: 1.25rem; }
.wordmark .org { color: var(--gold); }

.masthead nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.who {
  display: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.75);
  white-space: nowrap;
}
@media (min-width: 620px) { .who { display: inline; } }

/* Header buttons sit on navy and need their own treatment. */
.masthead .btn {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.2);
  color: #fff;
}
.masthead .btn:hover { background: rgb(255 255 255 / 0.18); border-color: rgb(255 255 255 / 0.3); color: #fff; }
.masthead .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.masthead .btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--navy); }

/* On a narrow phone the wordmark, theme toggle, founder link and sign-out do
   not fit on one line, and the header — not the page — was scrolling, which
   clipped the last button. The founder link drops to its icon (the button
   keeps a title and an accessible name) and the spacing tightens. */
@media (max-width: 479px) {
  .masthead-in { gap: 0.4rem; }
  .masthead nav { gap: 0.25rem; }
  .masthead .btn-sm { padding-inline: 0.5rem; }
  .masthead .btn-label { display: none; }
  .wordmark { font-size: 0.85rem; letter-spacing: 0.05em; }
}

/* ---------- buttons ----------
   44px minimum touch target on the default size. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }

/* Gold is the primary action, exactly as it is across AIVR. */
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--on-gold); }

.btn-solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-solid:hover { background: #0f1626; border-color: #0f1626; color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--sunken); color: var(--ink); }

.btn-danger { color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }

.btn-sm { font-size: 0.8rem; min-height: 36px; padding: 0.45rem 0.7rem; }
.btn-lg { font-size: 0.95rem; min-height: 50px; padding: 0.85rem 1.5rem; }
.btn-icon { padding: 0.7rem; min-width: 44px; }
.btn-icon.btn-sm { padding: 0.45rem; min-width: 36px; }

/* ---------- hero ----------
   Directory pattern: the SEARCH IS THE CALL TO ACTION. A student arrives with
   one academy in mind; the fastest possible route to that academy's page is
   the single most valuable thing this page can offer. */

.hero {
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.hero h1 { max-width: 17ch; text-wrap: balance; }
.hero .lede {
  margin-top: 0.9rem;
  max-width: 60ch;
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.09rem);
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero-search { margin-top: 1.75rem; max-width: 34rem; }

.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search > .i {
  position: absolute;
  left: 0.85rem;
  width: 1.15rem; height: 1.15rem;
  color: var(--ink-faint);
  pointer-events: none;
}
/* `input[type='text']` in the forms section below has the SAME specificity as
   `.search input` and comes later, so it would win and reset the left padding
   to 0.75rem — putting the placeholder underneath the magnifier. Qualifying
   with the attribute selector here settles it, and every rule in this block is
   written the same way so the next one added does not reopen the question. */
.search input[type='text'] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  min-height: 52px;
  padding: 0.8rem 0.9rem 0.8rem 2.7rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.search input[type='text']:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(247 201 72 / 0.28);
}
.search input[type='text']::placeholder { color: var(--ink-faint); font-weight: 500; }
.search.compact input[type='text'] { min-height: 44px; font-size: 0.92rem; padding-left: 2.4rem; }
.search.compact > .i { width: 1rem; height: 1rem; left: 0.7rem; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.stat .n {
  display: block;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat .k {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3);
}
.stat.danger .n { color: var(--danger); }

/* ---------- filter bar ---------- */

.filters {
  position: sticky;
  top: 56px;
  z-index: var(--z-sticky);
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  padding-block: 0.7rem;
}
.filters-in { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.filters .search { flex: 1 1 15rem; min-width: 0; }

select.control {
  width: auto;
  flex: 0 1 auto;
  max-width: 100%;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.chips { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.chip {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 36px;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip[aria-pressed='true'] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---------- category badge ----------
   One shape, and the hierarchy is carried by weight rather than by four
   competing colours. Gold marks the top band and nothing else. */

.cat {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2em 0.5em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.cat-A { background: var(--gold); color: var(--navy); border-color: var(--gold-deep); }
.cat-B { background: transparent; color: var(--ink-2); border-color: var(--rule-strong); }
.cat-C { background: transparent; color: var(--ink-3); border-color: var(--rule); }
.cat-X { background: transparent; color: var(--ink-faint); border-style: dashed; border-color: var(--rule-strong); }

/* ---------- the academy list ---------- */

.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.75rem 0.5rem;
}
.list-count { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); }

.group-label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.group-label h2 { font-size: 0.95rem; }
.group-label .blurb { font-size: 0.8rem; color: var(--ink-3); margin-left: auto; }

.academies { list-style: none; margin: 0; padding: 0; }

.academy-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 0.9rem;
  padding: 0.9rem 1.1rem 0.9rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-bottom: 0.4rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* Colour and shadow only — never a transform, which would shift the row
     under the pointer and make a long list feel unstable to scan. */
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.academy-row:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
  color: inherit;
}

.rank {
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  justify-self: center;
}

.academy-main { min-width: 0; }
.academy-name { font-weight: 600; font-size: 0.98rem; overflow-wrap: anywhere; }
.academy-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--ink-3);
}
.academy-meta .unknown { color: var(--ink-faint); }

.academy-figures {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.1rem);
  justify-self: end;
}
.score-block { text-align: right; min-width: 3.6rem; }
.score { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.score.none { color: var(--ink-faint); font-size: 0.84rem; font-weight: 500; }
.score-sub { font-size: 0.71rem; font-weight: 500; color: var(--ink-3); }

/* The one alarm on the platform. Flat, not hatched — a warning that shouts
   is a warning people learn to skip. */
.advisory {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--danger);
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--danger-line);
  border-radius: var(--r-sm);
  background: var(--danger-wash);
  white-space: nowrap;
}
.advisory .i { width: 0.85rem; height: 0.85rem; }

/* On a phone the three-column row squeezes the name to about 60px, and an
   academy called "Academy of Carver Aviation" wraps to one word per line.
   Below 600px the figures drop to their own row underneath instead, which
   gives the name the full width it needs. */
@media (max-width: 599px) {
  .academy-row { grid-template-columns: 1.9rem minmax(0, 1fr); row-gap: 0.15rem; }
  .academy-figures {
    grid-column: 2 / -1;
    justify-self: stretch;
    justify-content: space-between;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--rule);
  }
  .score-block { text-align: left; }
}

.excluded-note {
  grid-column: 2 / -1;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-3);
  background: var(--surface-2);
  border-left: 2px solid var(--rule-strong);
  padding: 0.4rem 0.65rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ---------- stars ---------- */

.stars { display: inline-flex; gap: 1px; line-height: 1; vertical-align: -2px; }
.stars svg { width: 0.95em; height: 0.95em; }
.stars .on { color: var(--gold-deep); }
.stars .off { color: var(--rule-strong); }
.stars.lg svg { width: 1.3em; height: 1.3em; }

/* ---------- academy profile ---------- */

.profile-head {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem) 1.5rem;
}
.crumb { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); margin-bottom: 0.85rem; }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--link); text-decoration: underline; }

.profile-title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.profile-title h1 { flex: 1 1 18ch; min-width: 0; }

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 0.85rem;
  font-size: 0.87rem;
  color: var(--ink-2);
}
.profile-facts .fact { display: inline-flex; align-items: center; gap: 0.35rem; }
.profile-facts .label { font-size: 0.75rem; font-weight: 600; color: var(--ink-faint); }
.profile-facts .i { color: var(--ink-faint); width: 0.95rem; height: 0.95rem; }

.summary-grid { display: grid; gap: 1.75rem; padding-block: 1.75rem; }
@media (min-width: 820px) {
  .summary-grid { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 2.75rem; }
}

.big-score { display: flex; align-items: baseline; gap: 0.5rem; }
.big-score .n {
  font-size: 3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}
.big-score .of { color: var(--ink-faint); font-size: 1rem; font-weight: 600; }

.dist { margin-top: 1rem; display: grid; gap: 0.3rem; }
.dist-row {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) 1.9rem;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}
.dist-row > :last-child { text-align: right; }

.bar { height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--gold-deep); transition: width 0.45s ease; }

.aspects { display: grid; gap: 0.8rem; }
.aspect-row { display: grid; gap: 0.28rem; }
.aspect-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
}
.aspect-top .label { font-weight: 600; }
.aspect-top .hint { color: var(--ink-3); font-size: 0.78rem; font-weight: 500; }
.aspect-top .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.aspect-top .v.none { color: var(--ink-faint); font-weight: 500; font-size: 0.8rem; }
.aspect-row .bar > i { background: var(--navy); }

/* ---------- panels ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 3vw, 1.65rem);
}
.panel + .panel { margin-top: 1rem; }
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.panel-head h2 { font-size: 1.05rem; }
.panel-note { font-size: 0.82rem; color: var(--ink-3); }

/* Fee and safety panels are <details> — the heading is the click target that
   reveals the rest, same interaction as the FAQ accordion below. Scoped to
   `summary.panel-head` so the plain `<div class="panel-head">` titles used
   elsewhere (reviews, related academies, FAQ's own section head) are untouched. */
summary.panel-head {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
summary.panel-head::-webkit-details-marker { display: none; }
summary.panel-head::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  flex: none;
  transition: transform 0.2s;
}
details[open] > summary.panel-head::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* Closed, there is no content below the summary to space away from — without
   this a closed panel shows a band of empty padding where the margin used to
   separate the heading from the (now hidden) body. */
details.panel:not([open]) > summary.panel-head { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { summary.panel-head::after { transition: none; } }

.notice {
  display: flex;
  gap: 0.6rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r);
  font-size: 0.86rem;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.notice .i { margin-top: 0.1rem; color: var(--ink-3); }
.notice-danger { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger); }
.notice-danger .i { color: var(--danger); }
.notice-good { background: var(--good-wash); border-color: var(--good-line); color: var(--good); }
.notice-good .i { color: var(--good); }
.notice-gold { background: rgb(247 201 72 / 0.14); border-color: var(--gold-deep); color: var(--ink); }
.notice-gold .i { color: var(--gold-deep); }

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

.field { margin-bottom: 1.1rem; }
.field > label, .field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.field .help { margin-top: 0.3rem; font-size: 0.79rem; color: var(--ink-3); }
.req { color: var(--ink-faint); font-weight: 500; }

input[type='text'], textarea, select {
  width: 100%;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 500;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
input[type='text']:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(247 201 72 / 0.25);
}
textarea { resize: vertical; min-height: 8.5rem; line-height: 1.65; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); font-weight: 500; }

.counter { font-size: 0.74rem; font-weight: 500; color: var(--ink-3); text-align: right; margin-top: 0.25rem; }
.counter.over { color: var(--danger); font-weight: 700; }

/* Star picker.

   THE HIT AREA IS BIGGER THAN THE STAR. The glyph is what you see; what you
   press is a 40px box around it, going to 44px on a touch screen. Sized off
   the artwork alone these came out at 26px on the compact rows — small enough
   that a thumb hits the neighbouring star and silently sets the wrong rating,
   which is the worst kind of bug because nobody notices they did it. */
.rate-picker { display: flex; gap: 0.1rem; }
.rate-picker button {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--rule-strong);
  line-height: 0;
  border-radius: var(--r-sm);
  /* Colour only on hover — a scale transform here nudges the neighbouring
     stars and makes a five-star row feel wobbly to aim at. */
  transition: color 0.15s, background-color 0.15s;
}
@media (pointer: coarse) {
  .rate-picker button { min-width: 44px; min-height: 44px; }
}
.rate-picker button:hover { color: var(--gold-deep); background: var(--surface-2); }
.rate-picker button svg { width: 1.75rem; height: 1.75rem; }
.rate-picker button.on { color: var(--gold-deep); }

.rate-value { margin-left: 0.5rem; font-size: 0.84rem; font-weight: 600; color: var(--ink-3); align-self: center; }

.aspect-picker { display: grid; gap: 0.4rem; }
.aspect-pick-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.aspect-pick-row .name { flex: 1 1 10rem; min-width: 0; font-size: 0.86rem; font-weight: 600; }
.aspect-pick-row .name small { display: block; font-weight: 500; color: var(--ink-3); font-size: 0.75rem; }
/* The compact rows draw a smaller star but keep the full hit box. */
.aspect-pick-row .rate-picker button svg { width: 1.2rem; height: 1.2rem; }

.option-grid { display: grid; gap: 0.4rem; }
@media (min-width: 620px) { .option-grid.two { grid-template-columns: 1fr 1fr; } }

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s;
}
.option:hover { border-color: var(--ink-faint); }
.option:has(input:checked) { border-color: var(--gold-deep); background: rgb(247 201 72 / 0.13); }
.option input { margin: 0.2rem 0 0; accent-color: var(--gold-deep); flex: none; width: 1rem; height: 1rem; }

.scam-toggle { border: 1px solid var(--danger-line); background: var(--danger-wash); border-radius: var(--r); padding: 0.85rem 1rem; }
.scam-toggle:has(input:checked) { border-color: var(--danger); }
.scam-toggle > .option { background: none; border: none; padding: 0; font-weight: 600; color: var(--ink); }
.scam-toggle > .option:has(input:checked) { background: none; }
.scam-toggle input { accent-color: var(--danger); }
.scam-body { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--danger-line); }

/* ---------- media capture ---------- */

.media-grid { display: grid; gap: 0.7rem; }
@media (min-width: 700px) { .media-grid { grid-template-columns: 1fr 1fr; } }

.media-box {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r);
  padding: 1rem;
  background: var(--surface-2);
}
.media-box h4 { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin-bottom: 0.2rem; }
.media-box h4 .i { color: var(--ink-3); }
.media-box .why { font-size: 0.78rem; color: var(--ink-3); margin-bottom: 0.75rem; }

.photo-preview { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); background: var(--sunken); }
.photo-preview img { width: 100%; max-height: 14rem; object-fit: contain; }

.rec-controls { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.rec-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--danger); flex: none; }
.rec-dot.live { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.rec-time { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-time .max { color: var(--ink-faint); font-size: 0.78rem; font-weight: 500; }

.rec-meter { display: block; width: 100%; height: 38px; margin-top: 0.65rem; border-radius: var(--r-sm); background: var(--sunken); }

audio { width: 100%; margin-top: 0.55rem; }

@media (prefers-reduced-motion: reduce) {
  .rec-dot.live { animation: none; }
  .bar > i, .academy-row, .btn, .chip, .option { transition: none; }
}

/* ---------- reviews ---------- */

.sort-bar { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sort-bar .lbl { font-size: 0.76rem; font-weight: 600; color: var(--ink-faint); margin-right: 0.2rem; }

.reviews { display: grid; gap: 0.8rem; }

.review {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.5vw, 1.3rem);
}
.review.is-scam { border-left: 3px solid var(--danger); }
.review.is-yours { border-left: 3px solid var(--gold); }

.review-top { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.65rem; }
.avatar {
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--navy);
  color: var(--gold);
  flex: none;
}
.review-who { min-width: 0; flex: 1 1 11rem; }
.review-handle { font-size: 0.88rem; font-weight: 700; }
.review-sub {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.775rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 0.05rem;
}
.review-rating { margin-left: auto; text-align: right; flex: none; }

.review h3 { font-size: 1rem; margin-bottom: 0.3rem; text-wrap: pretty; }
.review-body {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.68;
  /* 65–75 characters is the readable range; reviews are long-form prose. */
  max-width: 72ch;
}

.scam-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.7rem; }
.scam-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--danger-wash);
  color: var(--danger);
  border: 1px solid var(--danger-line);
}

.review-media { margin-top: 0.85rem; display: grid; gap: 0.65rem; }

.evidence { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--sunken); max-width: 24rem; margin: 0; }
.evidence img { width: 100%; max-height: 20rem; object-fit: contain; cursor: zoom-in; }
.evidence figcaption {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; color: var(--ink-3);
  padding: 0.4rem 0.6rem;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}

.voice { border: 1px solid var(--rule); border-radius: var(--r); padding: 0.7rem 0.8rem; background: var(--surface-2); }
.voice-top { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; font-weight: 600; color: var(--ink-3); }
.voice-top .dur { margin-left: auto; font-variant-numeric: tabular-nums; }
.transcript { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--ink-2); white-space: pre-wrap; }
.transcript-off { margin-top: 0.45rem; font-size: 0.77rem; color: var(--ink-faint); }

.redaction-note {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.65rem;
  font-size: 0.775rem;
  color: var(--ink-3);
}
.redaction-note .i { color: var(--ink-faint); }

.review-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}
.review-actions .spacer { margin-left: auto; }

/* ---------- empty states ---------- */

.empty {
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) 1rem;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.empty .i { width: 2rem; height: 2rem; color: var(--ink-faint); margin: 0 auto 0.75rem; stroke-width: 1.5; }
.empty h3 { margin-bottom: 0.4rem; }
.empty p { color: var(--ink-3); max-width: 44ch; margin-inline: auto; font-size: 0.9rem; }
.empty .btn { margin-top: 1rem; }

/* ---------- footer ---------- */

.foot {
  margin-top: 3rem;
  background: var(--navy);
  color: rgb(255 255 255 / 0.66);
  padding-block: 2.25rem 2.75rem;
  font-size: 0.84rem;
}
.foot a { color: rgb(255 255 255 / 0.85); }
.foot a:hover { color: var(--gold); }
.foot-grid { display: grid; gap: 1.75rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h4 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; color: var(--gold); margin-bottom: 0.55rem; }
/* The footer is navy in BOTH themes, so the page-level muted grey (tuned for a
   bone background) lands at about 3:1 here — under the 4.5:1 minimum. Anything
   inside the footer inherits the footer's own colour instead. */
.foot .muted, .foot .small { color: inherit; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.source-note { font-size: 0.78rem; line-height: 1.65; color: rgb(255 255 255 / 0.55); }

/* ---------- toast ---------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: grid;
  gap: 0.5rem;
  width: min(30rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  padding: 0.8rem 1rem;
  font-size: 0.87rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: rise 0.22s ease-out;
}
.toast .i { color: var(--gold); }
.toast.err { background: var(--danger); }
.toast.err .i { color: #fff; }
.toast.ok { background: var(--good); }
.toast.ok .i { color: #fff; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- modal ---------- */

dialog {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  width: min(32rem, calc(100vw - 2rem));
}
dialog::backdrop { background: rgb(25 34 54 / 0.55); }
.dialog-in { padding: 1.35rem; }
.dialog-in h2 { margin-bottom: 0.5rem; }
.dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }

/* ---------- skeleton ----------
   Reserves the row height so the list does not jump when data arrives. */

.skel {
  background: linear-gradient(90deg, var(--sunken) 25%, var(--surface-2) 37%, var(--sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: var(--r);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.skel-row { height: 68px; margin-bottom: 0.4rem; }

/* ---------- founder dashboard ---------- */

.founder-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .founder-grid.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.tile-row { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-bottom: 1.25rem; }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 0.85rem 0.95rem; }
.tile .n { display: block; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.1; }
.tile .k { display: block; margin-top: 0.1rem; font-size: 0.72rem; font-weight: 600; color: var(--ink-3); }
.tile.alert { border-color: var(--danger); background: var(--danger-wash); }
.tile.alert .n, .tile.alert .k { color: var(--danger); }

.tabs { display: flex; gap: 0.15rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.25rem; overflow-x: auto; }
.tab {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--gold); }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--surface-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.num { font-variant-numeric: tabular-nums; }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.spark i { flex: 1; min-width: 2px; background: var(--gold-deep); border-radius: 1px 1px 0 0; }
.spark i.zero { background: var(--rule); }

.queue-item { border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem; background: var(--surface); }
.queue-item + .queue-item { margin-top: 0.7rem; }
.queue-item.urgent { border-color: var(--danger); }
.flag-list { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.5rem 0; }
.flag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.22rem 0.45rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
}
.flag.sev { background: var(--danger-wash); color: var(--danger); border-color: var(--danger-line); }

.identity {
  font-size: 0.79rem;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.6rem;
  margin: 0.5rem 0;
  overflow-wrap: anywhere;
}

/* ---------- SEO / content pages ---------- */

/* Long-form editorial copy. 65–75 characters is the readable measure, and
   these pages are the only ones on the site carrying real paragraphs. */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.75rem; margin-bottom: 0.6rem; }
.prose h3 { margin-top: 1.1rem; margin-bottom: 0.35rem; }
.prose p { color: var(--ink-2); }

.lede-sm {
  max-width: 70ch;
  margin-top: 0.85rem;
  font-size: 0.98rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

.plain-list { padding-left: 1.15rem; margin: 0.6rem 0; display: grid; gap: 0.5rem; }
.plain-list li { color: var(--ink-2); }

/* The anonymity block. Gold-edged because it is the one panel on the platform
   that has to be read before someone will act. */
.anon-panel { border-color: var(--gold-deep); background: rgb(247 201 72 / 0.07); margin-top: 1.5rem; }
.anon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 760px) { .anon-list { grid-template-columns: 1fr 1fr; gap: 1rem 1.75rem; } }
.anon-list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.anon-list .i { color: var(--good); margin-top: 0.2rem; }
.anon-list strong { display: block; font-size: 0.9rem; margin-bottom: 0.15rem; }
.anon-list span { font-size: 0.86rem; color: var(--ink-2); line-height: 1.55; }

/* FAQ. <details> so the answers are in the document for a crawler and open
   without any JavaScript. */
.faq { display: grid; gap: 0.5rem; }
.faq-item { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface-2); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 0.95rem;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 0.93rem; font-weight: 600; margin: 0; flex: 1; }
.faq-item summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  flex: none;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item summary:hover { background: var(--sunken); }
.faq-a { padding: 0 0.95rem 0.9rem; }
.faq-a p { font-size: 0.89rem; color: var(--ink-2); line-height: 1.65; margin: 0; max-width: 74ch; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* Warning-sign cards on the scams page. */
.sign-grid { display: grid; gap: 0.7rem; margin-top: 1rem; }
@media (min-width: 700px) { .sign-grid { grid-template-columns: 1fr 1fr; } }
.sign {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--danger);
  border-radius: var(--r);
  background: var(--surface);
  padding: 0.9rem 1rem;
}
.sign h3 { font-size: 0.92rem; margin-bottom: 0.3rem; }
.sign p { font-size: 0.85rem; color: var(--ink-2); margin: 0; line-height: 1.6; }

/* Related academies. */
.peer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
@media (min-width: 640px) { .peer-list { grid-template-columns: 1fr 1fr; } }
.peer-list a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 550;
  transition: border-color 0.18s, background-color 0.18s;
}
.peer-list a:hover { border-color: var(--gold); background: var(--surface); color: var(--ink); }
.peer-list .num { color: var(--ink-faint); font-size: 0.78rem; font-weight: 700; flex: none; }
.peer-list .muted { margin-left: auto; }

/* Closing call to action. */
.cta-band {
  text-align: center;
  padding: clamp(1.75rem, 5vw, 2.75rem) 1.25rem;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: #fff;
}
.cta-band h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-band p { color: rgb(255 255 255 / 0.75); max-width: 48ch; margin-inline: auto; font-size: 0.93rem; }
.cta-band .btn { margin-top: 1.15rem; }

.live-slot { min-height: 6rem; }

/* ---------- published CPL fees ---------- */

.fee-panel { border-left: 3px solid var(--gold-deep); }
.fee-panel.is-unknown { border-left-color: var(--rule-strong); }
.fee-panel p { max-width: 70ch; color: var(--ink-2); }

.fee-headline { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.fee-amount {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
/* The qualifier is not decoration — an hourly figure is arithmetic at the DGCA
   minimum, not a price anyone quoted, and it must never read as one. */
.fee-qualifier { font-size: 0.82rem; color: var(--ink-3); max-width: 34ch; }

.fee-rates { display: flex; gap: 1.75rem; flex-wrap: wrap; margin: 0.75rem 0 0.5rem; }
.fee-rates .k { display: block; font-size: 0.72rem; font-weight: 600; color: var(--ink-3); }
.fee-rates .v { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.fee-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .fee-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.fee-grid h3 { font-size: 0.82rem; margin-bottom: 0.4rem; }
.fee-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.fee-grid li { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.85rem; color: var(--ink-2); }
.fee-grid .i { margin-top: 0.15rem; color: var(--good); }
.fee-grid .excl .i { color: var(--caution, var(--danger)); }

.fee-source {
  margin-top: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* The fee shown on a list row. */
.fee-tag {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  white-space: nowrap;
}
.fee-tag.is-indicative { border-style: dashed; }

/* ---------- accident and incident record ---------- */

.safety-panel { border-left: 3px solid var(--ink-faint); }
.safety-panel.is-fatal { border-left-color: var(--danger); }
.safety-panel.is-empty { border-left-color: var(--rule-strong); }
.safety-panel p { max-width: 70ch; color: var(--ink-2); }

.occurrences { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.occurrence {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.8rem 0.9rem;
  background: var(--surface-2);
}
.occurrence.sev-fatal { border-color: var(--danger-line); background: var(--danger-wash); }

.occ-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.occ-date { font-size: 0.85rem; font-weight: 700; }
.occ-sev {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  background: var(--surface);
}
.occ-sev.sev-fatal { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.occ-sev.sev-serious { color: var(--caution, var(--danger)); border-color: currentColor; }
.occ-status { font-size: 0.72rem; color: var(--ink-3); margin-left: auto; }

.occ-body { font-size: 0.87rem; color: var(--ink-2); line-height: 1.55; }
.occ-source {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: var(--ink-3);
  text-decoration: underline;
}
.occ-source:hover { color: var(--link); }

/* The tag on a list row. */
.occ-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-2);
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  white-space: nowrap;
}
.occ-tag .i { width: 0.85rem; height: 0.85rem; }
.occ-tag.is-fatal { color: var(--danger); border-color: var(--danger-line); background: var(--danger-wash); }

/* ---------- academy takedown route ---------- */

/* The line under each review offering the academy a way to complain.
   Deliberately quiet: it must be findable by a school looking for it, and not
   compete with the review itself for a student's attention. */
.academy-route {
  margin: 0.6rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.76rem;
  color: var(--ink-3);
}
.academy-route a { color: var(--ink-3); text-decoration: underline; }
.academy-route a:hover { color: var(--link); }

.owner-strip { border-left: 3px solid var(--gold-deep); }
.owner-strip p { max-width: 68ch; color: var(--ink-2); }

/* Two-column form layout on the request page. */
.two-col { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: 2rem; } }
.side-notes .plain-list { font-size: 0.85rem; }
.side-notes .plain-list li { margin-bottom: 0.2rem; }

.field-pair { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .field-pair { grid-template-columns: 1fr 1fr; } }

/* Inline code, for review references on the request form. */
code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.88em;
  background: var(--sunken);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

/* The anonymity promise on the home page hero. */
.hero-promise {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 58ch;
  margin-top: 1.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--gold-deep);
  border-radius: var(--r);
  background: rgb(247 201 72 / 0.13);
  font-size: 0.88rem;
  color: var(--ink-2);
}
.hero-promise .i { color: var(--gold-deep); margin-top: 0.15rem; }
.hero-promise strong { color: var(--ink); }

.state-links {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.state-links a {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  transition: border-color 0.18s, color 0.18s;
}
.state-links a:hover { border-color: var(--gold); color: var(--ink); }

/* ---------- utility ---------- */

.stack { display: grid; gap: 1rem; }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.muted { color: var(--ink-3); }
.dot { color: var(--ink-faint); }
.small { font-size: 0.83rem; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.5rem; }