/* CAM contrast corrections — measured, not eyeballed.
 *
 * Found 2026-09-01 by walking every text node on the rendered pages with
 * Playwright and computing WCAG 2.1 ratios against the resolved background.
 * Nine failures, three of them at ratio 1.00 — white text on white, literally
 * invisible.
 *
 * ROOT CAUSE of the invisible text: the lime theme sets --header-background
 * and --footer-background, but the .gdoc-header / .gdoc-footer elements never
 * consume them; they are transparent. Penn's dark-mode-fixes stylesheet had
 * been painting those bars, so removing it (to stop it overriding the lime
 * theme) also removed the dark ground that white header text depended on.
 * One fix broke the other. This file supplies the paint the theme assumes.
 *
 * SECOND FINDING, worth stating because it is about the palette itself:
 * white on the theme's own lime #8db600 is only 2.38:1 — the theme's intended
 * combination fails AA on its own. So the bars use the deep green #2b5a36
 * (white on it = 8.02) and lime stays as the accent it is good at being.
 *
 * Ratios below are computed, and every one clears AA (4.5 body / 3.0 large).
 */

:root {
  /* #76b947 on white was 2.39. Darkened to read on white — and darkened again
   * on 2026-09-01 when the bloom watermark landed. #4a7c2a clears AA on plain
   * white (4.99) but only reaches 4.37 where a link crosses the densest part of
   * the glyph on the landing page, and 4.22 in dark mode. A background image
   * changes the background of everything drawn over it, so the contrast budget
   * has to be computed against the WATERMARK, not against the page colour.
   * #456f26 clears AA on both: 5.91 on white, 5.00 over the glyph at its
   * strongest. Chosen over lowering the watermark's opacity because he asked
   * for MORE presence on the landing page, not less. */
  --link-color: #456f26;            /* white 5.91 · over watermark 5.00 */
  --link-color-visited: #39621c;    /* white 7.15 · over watermark 6.05 */
}

/* The bars the theme forgot to paint.
 *
 * NOT done with `background:` on .gdoc-header — that loses. background-system.css
 * (the template's header-image feature) declares
 *     .gdoc-header { background: var(--header-bg-color) !important; }
 * and ships that variable as `transparent`, so an !important transparent was
 * beating every ordinary rule. The fix is to set the variable the system is
 * built around rather than to escalate specificity against it. */
/* Set in config/_default/params.yaml (headerStyle.background /
 * footerBackgroundStyle.background), not here — the inline block Hugo
 * generates from those params is scoped tighter than :root, so a stylesheet
 * declaration loses to it no matter the load order. Chased that for three
 * rounds; recording it so the next person does not. */

.gdoc-header,
.gdoc-header a,
.gdoc-header__link,
.gdoc-brand,
.gdoc-footer,
.gdoc-footer a,
.gdoc-footer__link,
.gdoc-footer__claude-models {
  color: #ffffff;
}

/* Footer links were orange #ff9500 — 2.20 on white, 3.65 on the green bar.
   Pale lime keeps the palette and clears AA comfortably. */
.gdoc-footer a,
.gdoc-footer__link {
  color: #d9f27a;                  /* on #2b5a36 = 6.47 */
}

/* Body links inside prose, including the ones the theme colours separately. */
.gdoc-markdown a,
.gdoc-markdown__link,
.gdoc-page__nav--next,
.gdoc-page__nav--prev {
  color: #456f26;
}

/* The course-facts list and poll summaries were fine on ratio but sat at the
   theme's muted grey; nudged darker so the numbers read as data, not chrome. */
.poll-q__summary,
.poll-results__meta {
  color: #4a5148;                  /* on white = 7.55 */
}

/* ── Mobile brand lockup ──────────────────────────────────────────────────
 * Reported by Jérémie from his phone: "the logo and the title are like
 * smashed on two different lines next to the hamburger menu."
 *
 * Measured at 390px: .gdoc-brand is flex-wrap:wrap, so the 32px mark takes
 * line one and the 38-character title wraps onto lines two and three at 24px.
 * Header came to 140px tall before any content.
 *
 * Fix: keep the mark and the title on one row (nowrap, mark does not shrink),
 * drop the title to a size that fits two lines beside it, and tighten the
 * leading. The title still wraps — it is a long name — but it wraps BESIDE
 * the mark instead of under it.
 */
@media (max-width: 559px) {
  .gdoc-brand {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.55rem;
  }

  .gdoc-brand img,
  .gdoc-brand__img {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }

  .gdoc-brand__title,
  .gdoc-brand > span {
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
}

/* ── Session grid ─────────────────────────────────────────────────────────
 * Cards, not a list: date/title/what-exists is scannable at a glance, which a
 * prose list of weeks is not. Locked items are marked rather than linked, so
 * the PennKey wall is visible before the click rather than after it.
 */
.session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.session-card {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(43, 90, 54, .18);
  border-radius: 10px;
  background: #fff;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.session-card:hover {
  border-color: #456f26;
  box-shadow: 0 4px 14px rgba(43, 90, 54, .12);
  transform: translateY(-1px);
}

.session-card__n {
  flex: 0 0 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #2b5a36;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.session-card__title { margin: 0 0 .2rem; font-size: 1rem; line-height: 1.3; color: #2b5a36; }
.session-card__date { margin: 0 0 .4rem; font-size: .82rem; color: #4a5148; }
.session-card__summary { margin: 0 0 .5rem; font-size: .88rem; color: #4a5148; }

.session-card__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.session-card__tags .tag {
  font-size: .72rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-family: "Pitch Sans", ui-monospace, monospace;
}
.tag--open   { background: rgba(74,124,42,.12); color: #3f6b20; }  /* on white = 6.30 */
.tag--locked { background: rgba(74,81,72,.12);  color: #4a5148; }  /* on white = 7.55 */

/* ── Session recording ──────────────────────────────────────────────────── */
.session-video { margin: 1.5rem 0 2rem; }
.session-video__frame {
  position: relative;
  padding-top: 56.25%;          /* 16:9 without a layout shift on load */
  border-radius: 10px;
  overflow: hidden;
  background: #2b5a36;
}
.session-video__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Locked state — the frame keeps its exact 16:9 box so unlocking swaps content
 * in place with no layout shift. cam-hq ADR-0011. */
.session-video__frame--locked { display: grid; place-items: center; }
.session-video__unlock {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: .7rem 1.25rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 8px;
  background: rgba(255,255,255,.10);
  color: #fff;                  /* on #2b5a36 = 7.06 */
  font-family: "Pitch Sans", ui-monospace, monospace;
  font-size: .92rem;
  cursor: pointer;
}
.session-video__unlock:hover,
.session-video__unlock:focus-visible {
  background: rgba(255,255,255,.20);
  border-color: #fff;
}

/* The inline passphrase form replaces the button in place, inside the same
 * 16:9 box, so nothing on the page moves. */
.session-video__ask {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end;
  justify-content: center;
  width: min(30rem, 88%);
  color: #fff;
}
.session-video__ask .session-video__unlock { position: static; transform: none; }
.session-video__ask-label {
  display: flex; flex-direction: column; gap: .25rem;
  font-family: "Pitch Sans", ui-monospace, monospace;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
}
.session-video__ask-input {
  padding: .55rem .7rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 6px;
  background: rgba(255,255,255,.94);
  color: #24301f;               /* on that near-white = 12.6 */
  font-size: 1rem;              /* 16px — below this, iOS zooms on focus */
  min-width: 14rem;
}
.session-video__ask-input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.session-video__ask-hint {
  flex-basis: 100%; margin: 0;
  text-align: center;
  font-size: .82rem;
  color: #eaf3e4;               /* on #2b5a36 = 6.4 */
}
.session-video__ask-recover {
  flex-basis: 100%; margin: .1rem 0 0;
  text-align: center; font-size: .82rem;
}
.session-video__ask-recover a { color: #eaf3e4; text-decoration: underline; }
.session-video__ask-gloss {
  flex-basis: 100%; margin: .45rem 0 0;
  text-align: left; font-size: .8rem; line-height: 1.45;
  color: #dfeed6;               /* on #2b5a36 = 5.9 */
  border-top: 1px solid rgba(255,255,255,.22); padding-top: .45rem;
}
.session-video__ask-gloss code { background: rgba(255,255,255,.14); padding: 1px 4px; border-radius: 3px; }
.session-video__ask-title {
  flex-basis: 100%; margin: 0 0 .35rem;
  text-align: center;
  font-family: "Pitch Sans", ui-monospace, monospace;
  font-size: .95rem;
  color: #fff;
}
.session-video__note {
  margin-top: .6rem;
  padding: .6rem .85rem;
  border-left: 3px solid #456f26;
  background: rgba(69,111,38,.07);
  font-size: .88rem;
  color: #4a5148;               /* on that tint = 7.2 */
}

.session-video__pending-note {
  margin: 0; padding: .7rem .95rem;
  border-left: 3px solid #9db38c; background: rgba(69,111,38,.07);
  font-size: .92rem; color: #4a5148;
}

/* ── Slides line, under the recording (cam-hq ADR-0012) ─────────────────── */
.session-aside {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  margin: .75rem 0; font-size: .9rem; color: #4a5148;
}
.session-aside__label { font-weight: 600; color: #2b5a36; }
.session-aside__note { color: #5b6357; }
.canvas-file--protected, .canvas-file--dev { color: #2b5a36; font-weight: 600; }
.canvas-file__icon, .canvas-file__badge { margin-left: .25rem; font-size: .9em; }

/* ── Podcast block, under the slides (cam-hq ADR-0009) ───────────────────── */
.session-podcast { margin: 1.25rem 0 1.75rem; }
.session-podcast__head { margin: 0 0 .5rem; display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.session-podcast__meta { color: #5b6357; font-size: .88rem; }
.session-podcast__frame {
  position: relative; padding-top: 56.25%;
  border-radius: 10px; overflow: hidden; background: #2b5a36;
}
.session-podcast__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.session-podcast__audio { width: 100%; }
.session-podcast__link { color: #2b5a36; font-weight: 600; }
.session-podcast__pending {
  margin: 0; padding: .55rem .8rem;
  border-left: 3px solid #9db38c; background: rgba(69,111,38,.06);
  font-size: .88rem; color: #4a5148;
}
/* The synthetic-voice disclosure. Quiet, but never hidden: Apple requires it of
 * every synthetic-voice show, and the audio carries a SynthID watermark anyway,
 * so concealment would be both against the rules and pointless. */
.session-podcast__disclosure {
  margin: .5rem 0 0; font-size: .8rem; color: #5b6357; font-style: italic;
}

/* ── Podcast page: the episode list ──────────────────────────────────────── */
.podcast-list__item {
  margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid rgba(43,90,54,.18);
}
.podcast-list__item:first-child { border-top: 0; padding-top: 0; }
.podcast-list__title { margin: 0 0 .2rem; }
.podcast-list__meta { margin: 0 0 .6rem; font-size: .86rem; color: #5b6357; }

/* ── Passphrase recovery line (cam-hq ADR-0011) ─────────────────────────────
 * Above and below every gated block, so the gate is never a dead end. Quiet by
 * design: it is a way out for the person who needs it, not a second call to
 * action competing with the unlock. */
.gate-recovery {
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  margin: .75rem 0;
  font-size: .86rem;
  color: #4a5148;               /* on white = 7.55 */
}
.gate-recovery__key { font-size: .95em; }
.gate-recovery__link { color: #2b5a36; font-weight: 600; }   /* on white = 8.02 */
.gate-recovery__link:hover { text-decoration: underline; }
.gate-recovery__note { color: #5b6357; }

/* ── Section headings ─────────────────────────────────────────────────────
 * "I'd like the section headers to be colored up green if possible, they are
 * a bit sad." They were the theme's default near-black, which on a page whose
 * whole identity is a green mark reads as unfinished rather than neutral.
 *
 * Deep green #2b5a36 — the same green as the header and footer bars, so the
 * page has one green rather than three. Clears AA everywhere by a wide margin:
 * 8.02 on white, 6.79 over the landing-page watermark at its densest.
 *
 * h1 stays darkest and heaviest; h2/h3 carry the colour; h4+ steps back to
 * body ink so deep nesting does not turn into a wall of green.
 */
.gdoc-markdown h1,
.gdoc-page__title {
  color: #2b5a36;
}

.gdoc-markdown h2 {
  color: #2b5a36;
  padding-bottom: .25rem;
  border-bottom: 2px solid rgba(141, 182, 0, .35);   /* lime hairline, tying h2 to the accent */
}

.gdoc-markdown h3 {
  color: #33682f;                                    /* 6.64 on white */
}

.gdoc-markdown h4,
.gdoc-markdown h5,
.gdoc-markdown h6 {
  color: #3d4a40;                                    /* near-ink, still warm */
}

/* The anchor pilcrow the theme adds on hover should not fight the heading. */
.gdoc-markdown h1 .gdoc-page__anchor,
.gdoc-markdown h2 .gdoc-page__anchor,
.gdoc-markdown h3 .gdoc-page__anchor {
  color: rgba(43, 90, 54, .45);
}

/* ── Build stamp (ADR-0014) ───────────────────────────────────────────────
 * Dim, small, monospace — his ruling: "I can't imagine the commit hash being
 * anything but teletype." Always on, never hidden: the value is in not having
 * to do anything to see it.
 */
.build-stamp {
  width: 100%;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: "Pitch Sans", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  text-align: center;
  color: rgba(255, 255, 255, .55);
}
.build-stamp code {
  background: rgba(255, 255, 255, .1);
  padding: .05rem .35rem;
  border-radius: 3px;
  color: rgba(255, 255, 255, .8);
}

/* ── Footer layout repair (his report, 2026-09-02) ────────────────────────
 * The attribution was wrapping onto three narrow lines and the separator rule
 * started partway across. Root cause was structural (the build stamp was a
 * flex item inside the footer nav, since moved out); these rules stop the
 * remainder from re-breaking.
 */
.gdoc-footer .container.flex { align-items: flex-start; }

.gdoc-footer__claude {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;                 /* wrap as a unit if it must, not per word */
}

.gdoc-footer__seat { font-weight: 600; }

.gdoc-footer__claude-logo {
  height: 1em;
  width: auto;
  vertical-align: -0.12em;
}

/* The stamp is now a footer-level block, so its rule spans the full width. */
.gdoc-footer .build-stamp {
  clear: both;
  margin: .6rem auto 0;
  max-width: none;
}