/* ==================================================================
   components.css — buttons, scoreboard, trainer cards, quotes, steps,
   badges, forms, tables.

   The trainer card (A's split bar) and the quote card (C's testimonial)
   are grafts from the other two directions, restyled into B's language:
   square corners, tabular figures, amber as the single accent.
   ================================================================== */

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); height: 50px; padding: 0 var(--s5);
  font-size: var(--t-sm); font-weight: 750; letter-spacing: 0.09em;
  text-transform: uppercase; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer;
  background: var(--amber); color: #1a1200;
  transition: background 140ms ease, transform 120ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--amber-hi); }
.btn:active { transform: translateY(1px); }
.btn--sm { height: 40px; padding: 0 var(--s4); font-size: 12px; }

/* On dark grounds */
.btn--line { background: transparent; color: var(--on-dark); border-color: #39424c; }
.btn--line:hover { background: transparent; border-color: var(--on-dark); }

/* On paper grounds */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper-2); border-color: var(--ink); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.textlink {
  color: var(--amber-ink); font-weight: 650;
  box-shadow: inset 0 -1px 0 currentColor;
}
.textlink:hover { color: var(--ink); }

/* ---------------- Scoreboard strip ---------------- */
.board { background: var(--dark-2); border-top: 1px solid var(--dark-line); }
.board__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.board__stat { padding: var(--s5) 0; }
.board__stat + .board__stat { border-left: 1px solid var(--dark-line); padding-left: var(--s5); }
.board__stat b {
  display: block; font-size: 34px; font-weight: 800; color: var(--on-dark);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1;
}
.board__stat b i { font-style: normal; color: var(--amber); }
.board__stat span {
  display: block; margin-top: var(--s2); font-size: 11px; font-weight: 650;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-dark-2);
}

/* ---------------- Hero ---------------- */
.hero { background: var(--dark); position: relative; overflow: hidden; padding: var(--s9) 0 var(--s8); }
/* Floodlight wash — the one atmospheric flourish. */
.hero::before {
  content: ""; position: absolute; inset: -40% 30% 40% -10%;
  background: radial-gradient(closest-side, rgba(255,176,32,0.13), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero h1 { color: var(--on-dark); max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero p { color: var(--on-dark-2); max-width: 52ch; font-size: var(--t-md); }
.hero--short { padding: var(--s8) 0 var(--s7); }
.hero--short h1 { max-width: 20ch; }

/* ---------------- Trainer card (graft from direction A) ---------------- */
.cards {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card {
  position: relative; display: block; padding: var(--s5);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 140ms ease, transform 140ms ease;
}
a.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  background: var(--amber); border-radius: var(--radius) 0 0 var(--radius);
  opacity: 0; transition: opacity 140ms ease;
}
.card.is-top::before { opacity: 1; }

.card__top { display: flex; align-items: center; gap: var(--s3); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 15px; font-weight: 750;
  letter-spacing: -0.01em;
}
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar--lg { width: 72px; height: 72px; font-size: 24px; }
.card__name { font-size: 15.5px; font-weight: 750; color: var(--ink); letter-spacing: -0.012em; }
.card__role {
  font-size: 12px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}
.card__meta { font-size: var(--t-sm); color: var(--faint); margin-top: var(--s3); }

/* The score plus the split bar — what the rating is actually made of. */
.score { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.score__num { display: flex; align-items: flex-end; gap: var(--s2); font-variant-numeric: tabular-nums; }
.score__num b {
  font-size: 30px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.035em; line-height: 0.9;
}
.score__num span { font-size: 12px; color: var(--faint); padding-bottom: 2px; }

.splitbar {
  display: flex; height: 4px; border-radius: 2px; overflow: hidden;
  margin-top: var(--s3); background: var(--line-soft);
}
.splitbar i { display: block; height: 100%; }
.splitbar .v { background: var(--good); }
.splitbar .u { background: var(--warn); opacity: 0.6; }
.splitlegend {
  display: flex; gap: var(--s4); margin-top: var(--s2);
  font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums;
}
.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 5px;
}
.dot--v { background: var(--good); }
.dot--u { background: var(--warn); opacity: 0.6; }

.rehire {
  margin-top: var(--s3); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--amber-ink);
  font-variant-numeric: tabular-nums;
}
.rehire--none { color: var(--faint); }

/* ---------------- Badges ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
  background: var(--good-wash); color: var(--good);
}
.badge--warn { background: var(--warn-wash); color: var(--warn); }
.badge--neutral { background: var(--line-soft); color: var(--faint); }
.badge--amber { background: var(--amber-wash); color: var(--amber-ink); }

/* ---------------- Quote card (graft from direction C) ---------------- */
.quotes { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
.quote--on-dark { background: var(--dark-2); border-color: var(--dark-line); }
.quote--on-dark p { color: #d7dde3; }
.quote--on-dark .quote__who { color: var(--on-dark-3); }
.quote__stars { color: var(--amber); font-size: 13px; letter-spacing: 0.12em; }
.quote p { color: var(--ink); font-size: 15.5px; line-height: 1.55; }
.quote__who {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-sm); color: var(--faint); margin-top: auto;
}
.quote__who b { color: inherit; font-weight: 650; display: block; }

/* ---------------- Numbered steps ---------------- */
.steps {
  display: grid; gap: 0; border-top: 2px solid var(--ink);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.steps--on-dark { border-top-color: var(--amber); }
.step { padding: var(--s5) var(--s5) var(--s5) 0; }
.step b {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--amber-ink); font-variant-numeric: tabular-nums;
}
.steps--on-dark .step b { color: var(--amber); }
.step h3 { margin: var(--s3) 0 var(--s2); }
.steps--on-dark .step h3 { color: var(--on-dark); }
.step p { font-size: 14.5px; }

/* ---------------- Filters / directory ---------------- */
.filters {
  display: grid; gap: var(--s3); padding: var(--s4);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--faint);
}
.field input, .field select, .field textarea {
  height: 42px; padding: 0 var(--s3); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font-size: 14.5px; width: 100%;
}
.field textarea { height: auto; padding: var(--s3); min-height: 110px; resize: vertical; line-height: 1.55; }
/* Wraps so a validation message can sit below the label rather than
   being squeezed onto the same row. */
.field--check {
  flex-direction: row; align-items: center; gap: var(--s2);
  min-height: 42px; flex-wrap: wrap;
}
.field--check .field__err { flex-basis: 100%; }
.field--check input { width: 18px; height: 18px; accent-color: var(--amber-ink); }
.field--check label { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 550; color: var(--body); }
.field__err { font-size: 12px; color: var(--bad); font-weight: 600; min-height: 0; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--bad); }

.resultbar {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s4) 0; flex-wrap: wrap;
}
.resultbar h2 { font-size: var(--t-lg); font-weight: 750; letter-spacing: -0.02em; }
.resultbar p { font-size: var(--t-sm); color: var(--faint); margin-right: auto; }

.empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: var(--s8) var(--s5); text-align: center;
}
.empty h3 { margin-bottom: var(--s2); }

/* ---------------- Profile ---------------- */
.profile__head {
  display: grid; gap: var(--s6); align-items: start;
  grid-template-columns: 1fr 300px;
}
@media (max-width: 860px) { .profile__head { grid-template-columns: 1fr; } }

.statline {
  display: grid; gap: var(--s4); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--line); padding-top: var(--s4);
}
.statline div b {
  display: block; font-size: 26px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.statline div span {
  display: block; margin-top: 5px; font-size: 11px; font-weight: 650;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}

.panel {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5);
  background: var(--paper-2);
}

.review {
  padding: var(--s5) 0; border-top: 1px solid var(--line);
  display: grid; gap: var(--s3);
}
.review__head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.review__club { font-weight: 750; color: var(--ink); font-size: 15px; }
.review__meta { font-size: 12.5px; color: var(--faint); }
.review p { font-size: 15px; }
.review--unverified { opacity: 0.82; }

.dims { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: 12.5px; }
.dims div { display: flex; flex-direction: column; gap: 2px; }
.dims span { color: var(--faint); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 650; }
.dims b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------------- Callout ---------------- */
.callout {
  border-left: 3px solid var(--amber); background: var(--amber-wash);
  padding: var(--s4) var(--s5); border-radius: 0 var(--radius) var(--radius) 0;
}
.callout h3 { margin-bottom: var(--s2); }
.callout p { color: var(--body); }

/* ---------------- Two-column prose ---------------- */
.cols2 { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: var(--s4) 0; font-weight: 700; color: var(--ink);
  font-size: var(--t-md); list-style: none; display: flex; gap: var(--s3);
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--amber-ink); font-weight: 800; }
.faq details[open] summary::before { content: "–"; }
.faq details > div { padding: 0 0 var(--s5) var(--s4); max-width: 68ch; }

/* Wide content must scroll inside itself, never the page body. */
.scroll-x { overflow-x: auto; }

.formnote { font-size: 12.5px; color: var(--faint); max-width: 56ch; }
.success {
  border: 1px solid var(--good); background: var(--good-wash);
  color: var(--good); padding: var(--s4) var(--s5); border-radius: var(--radius);
  font-weight: 650;
}

/* ---------------- Radio groups ----------------
   Django renders RadioSelect as a <ul>, which stacks by default. That
   is right for the verdict (long sentences) and wrong for a 1-5 scale,
   where five stacked rows read as five separate questions. */
.field ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.field ul li { margin: 0; }
.field ul label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
}
.field input[type="radio"],
.field input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 0;
  accent-color: var(--amber-ink);
}

/* A 1-5 scale runs across, with the ends labelled so the numbers mean
   something without a legend. */
.field--scale ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: center;
  padding: var(--s2) 0;
}
.field--scale ul label {
  flex-direction: column;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.field--scale .scale-ends {
  display: flex; justify-content: space-between;
  font-size: var(--t-xs); color: var(--faint);
  max-width: 300px; margin-top: 2px;
}

/* The verdict is the headline question: give it room and a hit area. */
.field--verdict ul { gap: var(--s3); }
.field--verdict ul label {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-weight: 600;
  transition: border-color 120ms ease, background 120ms ease;
}
.field--verdict ul label:hover { border-color: var(--ink); background: var(--paper-2); }
.field--verdict ul li:has(input:checked) label {
  border-color: var(--amber-ink);
  background: var(--amber-wash);
}

/* ---------------- Style tags ----------------
   Descriptive, never scored. Deliberately styled as neutral chips
   rather than anything that reads as a grade. */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
  font-size: 13px; color: var(--ink);
}
.tag b {
  font-weight: 750; color: var(--faint); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.tags--sm .tag { font-size: 12px; padding: 3px 10px; background: var(--paper-2); }

/* Checkbox group for picking them, laid out across rather than stacked. */
.field--tags ul {
  flex-direction: row; flex-wrap: wrap; gap: var(--s2) var(--s4);
}
.field--tags ul label { font-weight: 550; font-size: 14.5px; }