/* Testimonial Recorder: hub (choose-page) styles.
   GB light surface: condensed display, hairline-ruled menu rows, red spent
   only on the chevrons and the press state.
   Theme values (including fonts, via the FontFace API in hub.js) are
   overridden per school by hub.js from window.HUB.theme. */

:root {
  --bg: #fcfcfc;
  --ink: #1a1a1a;
  --muted: #575756;
  --faint: rgba(26, 26, 26, 0.6);
  --line: rgba(26, 26, 26, 0.14);
  --accent: #e2211c;
  --accent-down: #b5150f;
  --radius: 10px;
  --display: "Adihaus DIN Cond", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --sans: "Adihaus DIN", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: calc(2.25rem + env(safe-area-inset-top)) 1.375rem calc(2rem + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

.hub {
  width: 100%;
  max-width: 26.5rem;
  margin: auto;
}

/* crest */
.hub-head { text-align: center; }
.hub-logo { height: 3.5rem; width: auto; display: inline-block; }
.hub-school {
  margin-top: 0.875rem;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8125rem;
  color: var(--muted);
}

.hub-title {
  margin-top: 1.375rem;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.98;
  font-size: clamp(2.625rem, 13vw, 3.5rem);
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}
.hub-intro {
  margin: 0.875rem auto 0;
  text-align: center;
  color: var(--muted);
  /* 18px, matching the recorder landing screens. Deliberately NOT applied to
     .mode-card-desc: those are tuned to sit on exactly one line each so every
     row is the same height, and enlarging them rewraps the longest one
     ("Someone else holds the phone. 4 questions.") and breaks that rhythm. */
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 30ch;
  text-wrap: pretty;
}

/* mode menu: a ruled list, not cards. The labels carry the distinction
   themselves ("selfie" = you hold the phone, "interview" = someone else films
   and asks), so the list needs no section headings to explain itself. */
.hub-modes {
  margin-top: 2.25rem;
  display: block;
  border-top: 1px solid var(--line);
}
/* Grouped variant, used by the site index: the rows are the same ruled list,
   but they arrive in per-school runs. The rule moves off the nav and onto each
   run so a group heading is never orphaned above a stray line, and the section
   scopes --accent, so a row's chevron and press flood carry that school's brand
   rather than the page's. */
.hub-modes--grouped { border-top: none; }
.hub-group + .hub-group { margin-top: 2.5rem; }
.hub-group-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--muted);
}
/* A small brand swatch, the one place the group's colour is stated rather than
   implied. Kept to a square: a coloured rule down the side of a list is the
   habit this is deliberately not. */
.hub-group-mark {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--accent);
}
.hub-group-rows {
  margin-top: 0.6875rem;
  border-top: 1px solid var(--line);
}

.mode-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
  padding: 1.125rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  touch-action: manipulation;
}
/* No transition on the background, deliberately. It used to fade over 140ms while
   the title and description colours snapped instantly, so for the length of the
   fade the two disagreed: on release the row was still red while the text had
   already jumped back to near-black, which is the "red row with black writing"
   people were seeing on their phones. A press state has to change atomically or
   not at all. The 4% hover tint appearing instantly is imperceptible; the chevron
   keeps its transform transition, which cannot affect contrast. */
/* press = the row floods GB red (same mechanic as the recorder's prompt picker).
   Hover/press must never change the text column's width: an earlier version
   inset the padding on hover, which narrowed the description enough to rewrap
   it onto an extra line and jolt every row below. The affordance rides on the
   chevron's transform instead, which cannot reflow anything. */
.mode-card:active { background: var(--accent); }
.mode-card:active .mode-card-title { color: #fff; }
.mode-card:active .mode-card-desc { color: rgba(252, 252, 252, 0.9); }
.mode-card:active .mode-card-go { border-color: #fff; transform: rotate(45deg) translate(2px, -2px); }
@media (hover: hover) {
  .mode-card:hover { background: rgba(26, 26, 26, 0.04); }
  .mode-card:hover .mode-card-go { transform: rotate(45deg) translate(2px, -2px); }
}
.mode-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.mode-card-body { flex: 1; min-width: 0; }
.mode-card-title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: 1.4375rem;
  line-height: 1.05;
  color: var(--ink);
}
.mode-card-desc {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}

/* chevron */
.mode-card-go {
  flex: 0 0 auto;
  width: 0.6875rem;
  height: 0.6875rem;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.hub-foot {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--faint);
}

/* one orchestrated page-load: crest settles, then the rows and footer follow
   in document order. hub.js stamps --stagger on each in sequence, so the
   cascade survives however many modes a school lists. */
@media (prefers-reduced-motion: no-preference) {
  .hub-head, .hub-title, .hub-intro {
    animation: hub-rise 560ms var(--ease-out) both;
  }
  .hub-title { animation-delay: 60ms; }
  .hub-intro { animation-delay: 110ms; }
  .mode-card, .hub-foot {
    animation: hub-rise 480ms var(--ease-out) both;
    animation-delay: calc(170ms + var(--stagger, 0) * 50ms);
  }
  @keyframes hub-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}