/* ═══════════════════════════════════════════════════════════════════
   MOOTLY — TYPESET LAYER
   Added 2026-09-16. Loaded LAST on every page, after styles.css and after
   any page's own <style>, so it wins on equal specificity without a single
   !important and without editing the stylesheet underneath it.

   To remove the whole redesign: delete this file and the two <link> lines
   it travels with. Nothing else was changed.

   WHAT IT DOES
   1. Type. Newsreader for headings, Public Sans for everything else. The
      serif sits at 400 because a book face is not drawn to be set bold.
   2. Corners. The stylesheet's 16px and 12px panels drop to 4px, its 8px
      and 6px chrome to 3px. Pills (999px) and avatars (50%) are left
      alone — those are meant to be round.
   3. Shadows. The two blue-glow shadows become navy at higher opacity, so
      panels sit on the page instead of floating over it.
   4. One token. --navy-band moves to the bar navy, which restyles every
      dark band on the site from here.

   The selector lists in 2 and 3 were generated by reading styles.css, not
   written by hand, so they cover every rule that actually carries those
   values rather than the ones someone remembered.
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. type ──────────────────────────────────────────────────────── */
html, body {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
  font-family: "Newsreader", Iowan Old Style, Palatino, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
h4 {
  font-family: "Newsreader", Iowan Old Style, Palatino, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* THE WORDMARK, ONE LOOK EVERYWHERE. The home page's bar (.frame .nav
   a.logo) and every other bar (.nav-logo) share this rule.
   Silas, 2026-09-23: "Make sure the Mootly on the home page (top left)
   looks the same on all other pages". Specific enough to beat the home
   page's own ".nav a { font-size: 14px }". */
.nav-logo, .logo, .frame .nav a.logo {
  font-family: "Newsreader", Iowan Old Style, Palatino, "Times New Roman", serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
/* The dot after the wordmark was removed 2026-09-23 (Silas). */
.footer-brand .nav-logo { display: inline-block; }
@media (max-width: 720px) {
  .nav-logo, .logo, .frame .nav a.logo { font-size: 22px; }
}

/* ── 2. one token: every dark band on the site follows this ───────── */
:root { --navy-band: #17324E; }
/* This file is linked LAST on every page, so the line above would otherwise
   win over the dark palette in styles.css and leave the navy bands at their
   daylight value on a dark ground. Restate it here, where it can win back. */
:root[data-theme="dark"] { --navy-band: #16283A; }

/* ── 3. corners ───────────────────────────────────────────────────── */
.audience-card,
.auth-card,
.debrief-hero,
.diff-col,
.form-card,
.judge-card,
.pricing-card,
.session-card, .debrief-card,
.step-card,
.upload-drop,
.wizard-card {
  border-radius: 4px;
}
.audio-player,
.auth-card .auth-enterprise,
.debrief-scores-card, .debrief-audio-card, .debrief-notes-card,
.form-row input, .form-row select, .form-row textarea,
.matter-card,
.matter-header,
.session-list,
.share-bar,
.sidebar-card,
.toast,
.transcript-block,
.uploaded-file {
  border-radius: 3px;
}

/* ── 4. shadows: the blue glow becomes a navy shadow ──────────────── */
.audience-card:hover,
.session-card, .debrief-card {
  box-shadow: 0 1px 2px rgba(23, 50, 78, 0.09), 0 14px 34px rgba(23, 50, 78, 0.20);
}

/* ── 5. the home page's own panels ────────────────────────────────── */
/* index.html carries its own stylesheet rather than styles.css, so its
   panels need naming here. Same values as everything above. */
.demo-shell, .audio-shell {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(23, 50, 78, 0.09), 0 14px 34px rgba(23, 50, 78, 0.20);
}
/* On a dark ground a navy shadow is invisible — the lift has to come from
   the surface being lighter than the page, and what shadow remains has to be
   black. Same selectors as above so the two stay in step. */
:root[data-theme="dark"] .audience-card:hover,
:root[data-theme="dark"] .session-card, :root[data-theme="dark"] .debrief-card,
:root[data-theme="dark"] .demo-shell, :root[data-theme="dark"] .audio-shell {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
}

.statbar, .oneband, .stepcard, .diffcol { border-radius: 4px; }
.dq, .jseal, .floorstrip, .demo-head .pill, .audio-top .pill,
.chip, .drillbtn { border-radius: 3px; }

/* ── 6. the thesis bar, and the step that matches it ──────────────── */
.thesis {
  background: var(--navy-band) !important;
  border-top-color: var(--navy-band) !important;
  border-bottom-color: var(--navy-band) !important;
}
.thesis > div { color: #FFFFFF; }
.thesis .thesis-hi { color: #9FC6E8 !important; }

.stepgrid .stepcard:nth-child(3) {
  background: var(--navy-band);
  border-color: var(--navy-band);
}
.stepgrid .stepcard:nth-child(3) .stepnum { color: #9FC6E8; }
.stepgrid .stepcard:nth-child(3) h3 { color: #FFFFFF; }
.stepgrid .stepcard:nth-child(3) p { color: #D6E4F0; }