/* ==========================================================================
   Teacher2B — front page (S1 study hub), approved design "3a"
   --------------------------------------------------------------------------
   Everything here is scoped under .hub (or prefixed hub-) so it can sit next
   to css/base.css without collisions. Merge into base.css or link it from
   index.html after base.css — see README.md.

   One file serves both surfaces: the desktop web page and the iOS app's
   WKWebView. The phone layout is the max-width: 720px block at the bottom.
   ========================================================================== */

/* ---------- Fonts (bundled, no network) ---------------------------------- */
/* Latin subsets from Google Fonts, SIL Open Font License — see fonts/OFL-*.txt.
   The wordmark deliberately uses the system font stack to match the original
   teacher2b.org masthead, so it needs no file. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Variable.woff2') format('woff2');
  font-weight: 400 600; /* one variable file covers 400, 500 and 600 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens -------------------------------------------------------- */
/* Palette is taken from the S6 dashboard graphs: accent blue for links and
   the kicker, green for "Ready" (≥ 75%), amber for "Building" / in progress.
   If base.css already defines equivalents, point these at them. */
.hub {
  --hub-ink: #1c2430;          /* body text, the 75% readiness tick */
  --hub-ink-2: #4a5566;        /* secondary text */
  --hub-ink-3: #6b7686;        /* captions, codes */
  --hub-wordmark: #1c1c1c;     /* "Teacher" */
  --hub-wordmark-2: #5a5a5a;   /* "2B" */
  --hub-accent: #2f6fb0;       /* ".org", kicker, links, hover borders */
  --hub-accent-dark: #1f4f82;
  --hub-line: #e6e8ec;         /* card borders, bar track */
  --hub-ready: #2e8a57;        /* bar fill when best ≥ 75% */
  --hub-building: #c98a12;     /* bar fill when best < 75% */
  --hub-navy: #0b2545;         /* easter egg */
  --hub-gold: #c5a253;

  --hub-serif: 'Source Serif 4', Georgia, serif;
  --hub-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hub-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --hub-system: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;

  --hub-pad: 48px;             /* page gutter; 20px on phones */

  max-width: 1200px;
  margin: 0 auto;
  color: var(--hub-ink);
  font-family: var(--hub-sans);
  background: #fff;
}
.hub a { color: var(--hub-accent); }
.hub a:hover { color: var(--hub-accent-dark); }

/* ---------- Masthead: wordmark + Navy easter egg -------------------------- */
.hub-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* the iOS app draws under the status bar; keep clear of the notch */
  padding: max(14px, env(safe-area-inset-top)) var(--hub-pad) 0;
}
.hub-wordmark {
  margin: 0;
  font: 800 116px/1.1 var(--hub-system);
  letter-spacing: -.03em;
  color: var(--hub-wordmark);
  text-decoration: none;
  white-space: nowrap;
}
.hub a.hub-wordmark, .hub a.hub-wordmark:hover { color: var(--hub-wordmark); }
.hub-wordmark-2b { font-weight: 400; letter-spacing: -.01em; color: var(--hub-wordmark-2); }
.hub-wordmark-tld { font-size: .69em; font-weight: 500; letter-spacing: -.01em; color: var(--hub-accent); }

/* Easter egg: a 30px navy coin marked N*. Hover (or first tap on touch —
   see landing.js) slides it open to reveal the text. Text is unchanged from
   the original masthead and still links to the USNA Alumni Association. */
.hub-egg {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 15px;
  background: var(--hub-navy);
  text-decoration: none;
  font: 600 12px var(--hub-sans);
  transition: width .35s ease;
}
.hub a.hub-egg, .hub a.hub-egg:hover { color: var(--hub-gold); }
.hub-egg:hover, .hub-egg:focus-visible, .hub-egg.is-open { width: 196px; }
.hub-egg-mark { flex: none; width: 30px; text-align: center; font: 600 13px var(--hub-serif); }
@media (prefers-reduced-motion: reduce) { .hub-egg { transition: none; } }

/* ---------- Top bar ---------------------------------------------------- */
/* A slim <nav> above the masthead (the session owner's call), plain links styled
   as buttons, so they need no JavaScript. The other pages reuse the same bar with
   a link home on the left. It carries the safe-area inset now, since it is the
   first thing on the page; the masthead under it keeps only a small gap.
   The site is light-only (base.css sets color-scheme: light and every surface
   paints its own background), so these colours hold in a dark-mode browser too.
   ⚠ base.css styles every bare `nav` as a column (for test.html's links), so the
   direction is set back to a row here explicitly. */
.hub-topbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  padding: max(10px, env(safe-area-inset-top)) var(--hub-pad) 0;
  padding-left: max(var(--hub-pad), env(safe-area-inset-left));
  padding-right: max(var(--hub-pad), env(safe-area-inset-right));
}
.hub-topbar + .hub .hub-masthead { padding-top: 6px; }
.hub a.hub-topbar-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--hub-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--hub-accent);
  font: 600 14px/1.2 var(--hub-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.hub a.hub-topbar-btn:hover { background: var(--hub-accent); color: #fff; }
.hub a.hub-topbar-btn:focus-visible,
.hub a.hub-topbar-home:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; }
/* The page you're on: shown, but not as something to press. */
.hub a.hub-topbar-btn[aria-current="page"] { background: var(--hub-accent); color: #fff; }
/* The way home, at the left of the same bar on every page but the front page. */
.hub a.hub-topbar-home {
  margin-right: auto;
  font: 800 20px/1.2 var(--hub-system);
  letter-spacing: -.02em;
  color: var(--hub-wordmark);
  text-decoration: none;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .hub a.hub-topbar-btn { transition: none; } }
/* privacy.html carries the same bar above base.css's 40rem main column (N-101), so there
   it takes that column's width and 1.5rem gutter instead of the hub's. */
.hub-topbar.hub-topbar-narrow {
  max-width: 40rem;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
/* support.html repeats the front page's whole top at the hub's full width (N-104), ending
   on this rule -- the same line the front page's first section title draws with its
   border-top -- before the FAQ, which runs at the same width and gutter (N-107). */
.hub-rule { margin: 8px var(--hub-pad) 0; border: 0; border-top: 1px solid var(--hub-ink); }

/* ---------- Kicker -------------------------------------------------------- */
/* 26px, kept on one line on desktop. */
.hub-kicker {
  margin: 0;
  padding: 10px var(--hub-pad) 0;
  white-space: nowrap;
  font: 500 26px/1.15 var(--hub-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hub-accent);
}

/* ---------- Hero: headline column + classroom scene ----------------------- */
.hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 22px var(--hub-pad) 28px;
}
.hub-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hub-title {
  margin: 0;
  font: 600 60px/1.02 var(--hub-serif);
  letter-spacing: -.025em;
}
.hub-title-line { white-space: nowrap; }
/* Full-width line under the hero */
.hub-lede {
  margin: 0;
  padding: 0 var(--hub-pad) 36px;
  font: 400 17px/1.55 var(--hub-sans);
  color: var(--hub-ink-2);
  text-wrap: pretty;
}
.hub-scene { display: block; width: 100%; height: auto; }

/* Underlined "Pass" and "Teach" in the headline (the "!" after Teach is not underlined) */
.hub-u { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; }

/* ---------- Cards -------------------------------------------------------- */
/* The front page's test picker left with D-75 (the site is the apps' advertisement);
   these card styles stay for the parked category layout below and
   ios/Design/icons/icons.html, which draw the same cards. */
.hub-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--hub-line);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s;
}
.hub a.hub-card, .hub a.hub-card:hover { color: var(--hub-ink); }
.hub a.hub-card:hover, .hub a.hub-card:focus-visible { border-color: var(--hub-accent); }
.hub-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* base.css defines .hub-card-icon (the tinted subject tile) as the shared
   contract, used here and beside test.html's "Test attempts" heading, and sizes
   it only in context. A card's size is set here, scoped to .hub-card
   deliberately -- a bare .hub-card-icon relying on this file loading second
   would make the size a source-order accident (N-41). */
.hub-card .hub-card-icon {
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 14px;
}
/* The area tints behind the subject drawing live in css/base.css, not here:
   test.html draws the same icon beside its "Test attempts" heading and loads
   base.css only, so keeping them there gives both surfaces one set of colours
   instead of two that drift. */

/* ---------- Icon set page (icons.html) and future category layout ---------- */
/* Each category sets --cat-tint; tiles inside pick it up. Accent colors are
   baked into the SVGs (see icons.json). Used by ios/Design/icons/icons.html
   only; the front page's app bands (.hub-app, .hub-app-head, .hub-app-name,
   .hub-app-count, .hub-app-grid, above) deliberately don't use
   these classes. */
.hub [data-cat="basic-skills"] { --cat-tint: #e8f0f9; }
.hub [data-cat="early-childhood"] { --cat-tint: #fbf1de; }
.hub [data-cat="stem"] { --cat-tint: #e6f3ec; }
.hub [data-cat="english-social-studies"] { --cat-tint: #f0ecf8; }
.hub [data-cat="special-ed-esl"] { --cat-tint: #e3f2f2; }
.hub [data-cat="arts-pe-health-languages"] { --cat-tint: #f8e9ec; }
.hub [data-cat="admin-specialists"] { --cat-tint: #eef0f3; }
.hub-cat .hub-card-icon, .hub-cat-icon { background: var(--cat-tint, #eef0f3); }
.hub-catalog-head { display: flex; flex-direction: column; gap: 10px; padding: 40px var(--hub-pad) 8px; }
.hub-catalog-kicker { margin: 0; font: 500 12px var(--hub-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hub-accent); }
.hub-catalog-title { margin: 0; font: 600 40px/1.1 var(--hub-serif); letter-spacing: -.02em; }
.hub-cat { display: flex; flex-direction: column; gap: 18px; margin: 44px var(--hub-pad) 0; }
.hub-cat:last-child { margin-bottom: 64px; }
.hub-cat-head { display: flex; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--hub-ink); }
.hub-cat-icon { flex: none; width: 72px; height: 72px; padding: 10px; box-sizing: border-box; border-radius: 16px; }
.hub-cat-icon img { display: block; width: 100%; height: 100%; }
.hub-cat-name { margin: 0 0 4px; font: 600 26px/1.15 var(--hub-serif); }
.hub-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hub-cat .hub-card-name { font-size: 19px; text-wrap: pretty; }

.hub-card-id { display: flex; flex-direction: column; gap: 4px; }
.hub-card-code { font: 500 12px var(--hub-mono); color: var(--hub-ink-3); }
.hub-card-name { font: 600 20px/1.2 var(--hub-serif); }
.hub-card-count { font: 400 13px var(--hub-sans); color: var(--hub-ink-3); }

/* Status pill — same four states as before the redesign */
.hub-pill { flex: none; font: 600 11px var(--hub-sans); padding: 3px 8px; border-radius: 10px; background: #eef0f3; color: var(--hub-ink-2); }
.hub-pill[data-status="building"], .hub-pill[data-status="in-progress"] { background: #fbf1de; color: #7a4f00; }
.hub-pill[data-status="ready"] { background: #e3f2ea; color: #1f6b43; }

/* Best-score bullet bar — matches S6's bar, including the 75% readiness tick */
/* Big best-score number (from design 2c) sits above the bar */
.hub-score { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 4px; }
.hub-score-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hub-score-big { font: 600 40px/1 var(--hub-sans); letter-spacing: -.02em; color: var(--hub-ink); }
.hub-score-big[data-empty] { color: #b3bac4; }
.hub-bar { position: relative; height: 10px; background: var(--hub-line); border-radius: 5px; }
.hub-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--hub-building); }
.hub-bar-fill[data-ready] { background: var(--hub-ready); }
.hub-bar-tick { position: absolute; left: 75%; top: -3px; bottom: -3px; width: 2px; background: var(--hub-ink); }
.hub-score-label { font: 400 12px var(--hub-sans); color: var(--hub-ink-3); }

/* ---------- Narrower desktop / iPad --------------------------------------- */
/* 1100px, not 1024: an iPad in landscape therefore gets TWO columns, not four.
   Raised at live testing on 2026-09-28 and left as drawn — session owner's call.
   Two cards across a landscape iPad is generous and the page runs long, but the
   design was signed off this way, and four across 1024px puts each card at about
   220px, where its own content starts to crowd. Change it deliberately or not at
   all; the parked category layout and icons.html still draw these cards. */
@media (max-width: 1100px) {
  .hub-wordmark { font-size: clamp(56px, 9.6vw, 116px); }
  .hub-kicker { font-size: clamp(18px, 2.4vw, 26px); }
  .hub-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-title { font-size: clamp(40px, 5vw, 60px); }
}

/* ---------- iPhone (and any phone browser) -------------------------------- */
/* Order on a phone: wordmark → kicker → scene → headline → lede →
   test picker as one column of compact cards. */
@media (max-width: 720px) {
  .hub { --hub-pad: 20px; }
  .hub-masthead { padding-top: max(12px, env(safe-area-inset-top)); }
  .hub-wordmark { font-size: clamp(32px, 10vw, 56px); }
  /* No room to grow rightward on a phone: the open coin slides left over the
     wordmark instead of pushing the row wider. Net footprint stays 30px. */
  .hub-egg { position: relative; z-index: 1; transition: width .35s ease, margin-left .35s ease; }
  .hub-egg:hover, .hub-egg:focus-visible, .hub-egg.is-open { margin-left: -166px; }
  .hub-kicker { white-space: normal; font-size: 13px; letter-spacing: .06em; padding-top: 4px; }
  /* A larger touch target, still slim enough to sit above the wordmark. */
  .hub a.hub-topbar-btn { min-height: 40px; padding-inline: 12px; }

  .hub-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 16px; padding-bottom: 28px; }
  .hub-scene { order: -1; }
  .hub-hero-copy { gap: 14px; }
  .hub-title { font-size: 36px; line-height: 1.05; }
  .hub-lede { font-size: 16px; }

  .hub-cat-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-cat { margin-top: 32px; }
}

/* The test menu's masthead (test.html): the motto alone, large and centred (live-test
   request, 2026-10-09 -- the wordmark and "Praxis study tools" line came out, since the
   page already sits under the site's back link and the subject's own name). */
.hub.test-masthead { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.hub.test-masthead .hub-title {
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.15;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* ---------- The advertisement's sections (D-75, WEBSITE-ROADMAP W8) --------- */
/* How the app teaches, Try five questions, Get the app: one shared
   heading style, each section a column with the hub's gutter. */
.hub-section-title { margin: 0; padding-top: 14px; border-top: 1px solid var(--hub-ink); font: 600 26px/1.15 var(--hub-serif); letter-spacing: -.01em; }
.hub-section-lede { margin: 0; font: 400 17px/1.55 var(--hub-sans); color: var(--hub-ink-2); max-width: 70ch; text-wrap: pretty; }
.hub-how, .hub-differ, .hub-demo, .hub-get { display: flex; flex-direction: column; gap: 18px; padding: 8px var(--hub-pad) 40px; }
.hub-how-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 0; padding: 0; list-style: none; }
.hub-how-list h3 { margin: 0 0 6px; font: 600 20px/1.2 var(--hub-serif); }
.hub-how-list p { margin: 0; font: 400 16px/1.5 var(--hub-sans); color: var(--hub-ink-2); text-wrap: pretty; }

/* What makes Teacher2B different: four commitments in one column, each on an accent rule. */
.hub-differ-list { display: flex; flex-direction: column; gap: 18px; max-width: 76ch; margin: 0; padding: 0; list-style: none; }
.hub-differ-list li { padding-left: 18px; border-left: 3px solid var(--hub-accent); }
.hub-differ-list h3 { margin: 0 0 6px; font: 600 20px/1.2 var(--hub-serif); }
.hub-differ-list p { margin: 0; font: 400 16px/1.5 var(--hub-sans); color: var(--hub-ink-2); text-wrap: pretty; }

/* Try five questions: each question is a card; once answered, the chosen and the correct
   option are marked by js/demo.js with the same suffix classes the app's review uses
   (.option-suffix-correct/-incorrect live in base.css; only the suffix is bold, N-111), and the card's
   border takes the Ready green or the Building amber. */
.demo-tally { margin: 0; font: 500 14px var(--hub-mono); letter-spacing: .02em; color: var(--hub-accent); }
.demo-questions { display: flex; flex-direction: column; gap: 20px; }
.demo-q { display: flex; flex-direction: column; gap: 10px; max-width: 76ch; padding: 18px 20px; border: 1px solid var(--hub-line); border-radius: 10px; background: #fff; }
.demo-q[data-answered="right"] { border-color: var(--hub-ready); }
.demo-q[data-answered="wrong"] { border-color: var(--hub-building); }
.demo-source { margin: 0; font: 500 12px var(--hub-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--hub-ink-3); }
.demo-category { margin: 0; font: 600 13px var(--hub-sans); color: var(--hub-ink-2); }
.demo-stem { margin: 0; font: 400 17px/1.5 var(--hub-sans); }
.demo-options { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.demo-option { display: block; width: 100%; padding: 10px 14px; text-align: left; font: 400 16px/1.45 var(--hub-sans); color: var(--hub-ink); background: #fff; border: 1px solid var(--hub-line); border-radius: 8px; cursor: pointer; }
.demo-option:hover:not(:disabled), .demo-option:focus-visible { border-color: var(--hub-accent); }
.demo-option:disabled { cursor: default; color: var(--hub-ink); opacity: 1; }
.demo-explanation { margin: 0; padding-top: 8px; border-top: 1px solid var(--hub-line); font: 400 16px/1.5 var(--hub-sans); }
.demo-explanation p { margin: 0 0 6px; }
.demo-explanation-label { font-weight: 600; }
.demo-done { margin: 0; max-width: 70ch; font: 600 17px/1.5 var(--hub-serif); }

/* Get the app: a notice until the listing is live (W4.1 turns it into the link). */
.hub-get { padding-bottom: 56px; }
.hub-get-note { margin: 0; max-width: 70ch; font: 400 17px/1.6 var(--hub-sans); color: var(--hub-ink-2); }
/* The store buttons (N-119), under the headline and in "Get the app": the page's own design, in
   its navy and its type, with our own drawing, not either store's badge artwork. They wrap
   with a gap, so on a phone they stack without touching. Since N-241 each is a link to that app's
   preview video on YouTube, with a play mark; they become the store links when the listings are live. */
.hub-stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hub-store { display: flex; align-items: center; gap: 12px; min-width: 196px; max-width: 100%; box-sizing: border-box; padding: 10px 22px 10px 16px; border-radius: 12px; background: var(--hub-navy); color: #fff; }
.hub-stores > li { max-width: 100%; min-width: 0; }
.hub a.hub-store { color: #fff; text-decoration: none; }
.hub a.hub-store:hover, .hub a.hub-store:focus-visible { background: var(--hub-accent-dark); }
.hub-store-icon { flex: none; width: 18px; height: 29px; }
.hub-store-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-store-when { font: 500 11px/1.3 var(--hub-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.hub-store-name { font: 600 21px/1.05 var(--hub-serif); }
.hub-get .hub-stores { margin-bottom: 4px; }

@media (max-width: 720px) {
  .hub-how-list { grid-template-columns: minmax(0, 1fr); }
  .hub-how, .hub-differ, .hub-demo, .hub-get { padding-bottom: 32px; }
  .hub-section-title { font-size: 22px; }
  .demo-q { padding: 14px; }
}