/* ==========================================================================
   RTNS additive CSS — T1b (Director dispatch, plan §Workstream A / T1b row)
   NEVER edits donor/site styles.css. Loaded AFTER styles.css (and after
   donor script.js, before site.js — site.js wraps window.openRtEvent, see
   qa/refs/T1b-notes.md "Include order"). Domi's design system (Georgia
   display / Arial body, gold #b98132 / #d8ad63, paper #fffdf8 / #f6f2ea) is
   canonical for this file; every rule below is scoped to a named selector
   or a body/page class, never a blanket rewrite.
   ========================================================================== */

/* nav
   ------------------------------------------------------------------------
   Her .navlinks already hide at max-width:1100px (styles.css L761) and
   .actions .light hides at max-width:700px (styles.css L799) — two
   DIFFERENT breakpoints. The hamburger appears at the same 1100px break
   as .navlinks, matching the point where the inline links actually
   disappear (not only at phone width). .logo min-width:210px is released
   at the same break so the mast doesn't force horizontal crowding once
   the nav links are gone. See notes "Nav breakpoints — verified" for the
   full trace.
   -------------------------------------------------------------------- */

.mast {
  --nav-h: 76px; /* mirrors her .nav{height:76px} (styles.css L52) */
}
@media (max-width: 700px) {
  .mast {
    --nav-h: 64px; /* mirrors her .nav{height:64px} override, styles.css L791 */
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid #666; /* her .btn.light border-color, styles.css L110 */
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:hover {
  border-color: var(--gold2);
}
.nav-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (max-width: 1100px) {
  .logo {
    min-width: 0;
  }
  .nav-toggle {
    display: inline-flex;
  }
}

.nav-panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h, 76px);
  height: calc(100vh - var(--nav-h, 76px));
  height: calc(100dvh - var(--nav-h, 76px)); /* dvh with vh fallback, per brief */
  background: #0b0d0c; /* her .mast bg, styles.css L48 */
  color: #fff;
  z-index: 150; /* above .mast (z-index:100, styles.css L50) */
  overflow-y: auto;
  padding: 28px 34px 40px;
  border-top: 1px solid #262926;
}
.nav-panel.is-open {
  display: block;
}
.nav-panel .panel-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.nav-panel .panel-links a {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.3;
  padding: 12px 0;
  color: #eee9e1;
  border-bottom: 1px solid #262926;
}
.nav-panel .panel-links a:hover,
.nav-panel .panel-links a.active {
  color: var(--gold2);
}
/* Override her `.actions .light{display:none}` (max-width:700px, styles.css
   L799) INSIDE the open panel only — both her buttons stay visible here
   regardless of viewport width, per brief item 1. */
.nav-panel .actions {
  flex-wrap: wrap;
  gap: 10px;
}
.nav-panel .actions .light {
  display: inline-flex !important;
}

html.nav-panel-open,
body.nav-panel-open {
  overflow: hidden; /* scroll-lock only while the panel is open, set/unset in site.js */
}

/* type
   ------------------------------------------------------------------------
   Base .kicker rule (mirrors .eyebrow, styles.css L119-126 — six-plus Edge
   .kicker instances render unstyled today, none of the scoped overrides
   that DO exist, e.g. `.pulse-v4 .kicker`/`.ask-v4 .kicker`, define a base;
   see notes). .demo-note lifted 8px→11px, dark hosts keep her original
   #718c83, paper hosts remapped darker for AA. Gold-on-paper text-color
   remap (#b98132→#8c6a32); dark-surface gold (#d8ad63 / #d9aa5d etc.)
   is untouched — full trace + surface-by-surface reasoning in notes.
   -------------------------------------------------------------------- */

[id] {
  scroll-margin-top: 80px;
}

.kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
}

.demo-note {
  font-size: 11px;
  line-height: 1.4;
}
/* paper/light-surface .demo-note hosts (see notes "demo-note hosts"):
   darker so 11px still clears AA against #fffdf8/#f6f2ea/#ece5d9/#f1ebdf. */
.card .demo-note,
.cre-calendar-section .demo-note,
.event-v2-section.soft .demo-note,
.edge-cal-card .demo-note {
  color: #5f7a71;
}

/* Gold text-color remap — #b98132 used as text on paper/light surfaces
   (verified: none of these selectors sit inside a dark component; her
   dark overrides — .event-v2-copy .eyebrow, .pulse-v4 .kicker,
   .ask-v4 .kicker — have higher specificity and are untouched). */
.eyebrow,
.more,
.card .tag,
.stack-item .k,
.latest-item small,
.compact-news .cat,
.section-rule a,
.feed-item .cat {
  color: #8c6a32;
}

/* Named-selector readability lifts ONLY (no blanket rule). Her literal
   ".hero-meta small" and ".edge-cal-grid small" don't exist as written —
   the real DOM/CSS selectors are `.hero-stat span` (nested inside
   .hero-meta) and `.edge-cal-card small` (nested inside .edge-cal-grid);
   mapped 1:1 to what she actually built, see notes "Selector name fixes". */
.latest-time,
.cre-fit,
.hero-stat span {
  /* all ≥9px today (9,9,10) — lift 650px-and-below only */
}
@media (max-width: 650px) {
  .latest-time {
    font-size: 11px;
  }
  .cre-fit {
    font-size: 11px;
  }
  .hero-stat span {
    font-size: 11px;
  }
}
/* .edge-cal-card small and .home-cal-item small are 8px today (under the
   9px floor) — lifted on desktop too, per the brief's own exception. */
.edge-cal-card small {
  font-size: 10px;
}
.home-cal-item small {
  font-size: 10px; /* color #8fa198 unchanged: already on a dark card, AA-safe */
}

/* modal
   ------------------------------------------------------------------------
   All markup/behaviour here is HERS (.cre-modal / #creEventModal /
   openRtEvent in donor/script.js) — site.js wraps her open/close functions
   at runtime; this block only raises the layer and enlarges the close
   target. z-index:110 clears her sticky .mast (z-index:100).
   -------------------------------------------------------------------- */

.cre-modal {
  z-index: 110;
}
.cre-modal-close {
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
}

/* buttons
   ------------------------------------------------------------------------
   `.round-btn.ghost{color:#fff}` (styles.css L1297) is unscoped — fine on
   her dark .event-v2-hero, invisible on the three light/paper hosts where
   she also uses it (verified: .event-v2-section.soft #f1ebdf,
   .cre-calendar-section #ece5d9, .cre-modal-panel #f9f5ee — see notes).
   -------------------------------------------------------------------- */

.event-v2-section.soft .round-btn.ghost,
.cre-calendar-section .round-btn.ghost,
.cre-modal-panel .round-btn.ghost {
  color: #111;
}

/* Video facade primitive for B7 (session/article templates). Contract:
   <div class="yt-lite" data-id="VIDEO_ID" data-title="..."
        style="--poster:url(...)">
     <button class="yt-lite-play" aria-label="Play: TITLE"></button>
   </div>
   plus a sibling <a> "Watch on YouTube" that B7 adds outside this block. */
.yt-lite {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #111;
  background-image: var(--poster, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.yt-lite iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-lite-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 999px; /* rounded gen2 idiom, matches .round-btn radius family */
  border: 0;
  background: var(--gold);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.yt-lite-play:hover {
  background: var(--gold2);
}
.yt-lite-play svg {
  width: 20px;
  height: 20px;
  margin-left: 3px; /* optical centring of the play triangle */
  fill: currentColor;
}

/* calendar
   ------------------------------------------------------------------------
   Fit-score truth on public pages: T1a sets `body.public` on every page
   except edge.html (see notes "body.public contract"). On Edge these
   three blocks stay, visibly illustrative. */

body.public .cre-fit,
body.public .cre-modal-score,
body.public .cre-modal-section.fitbox {
  display: none;
}

/* a11y
   ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.round-btn:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
.cre-cal-card:focus-visible,
.yt-lite-play:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hero collage at ≤650: her .event-collage has no overflow rule of its own
   (styles.css L1300-1302) but the absolutely-positioned .event-poster
   tiles can clip against an ancestor at narrow widths — defensive
   overflow:visible plus the chip-legibility bump the brief asks for. */
@media (max-width: 650px) {
  .event-collage {
    overflow: visible;
  }
  .event-floating {
    font-size: 11px;
  }
}

/* session — reserved for B7 (event.html / article.html session blocks) */

/* article — reserved for B7 (article.html body/quote-panel scale) */

/* P4.1 defect 4 (2026-09-15): footer links are 11px/1.4 = 15px tall, under the
   24px pointer-target floor. Padding grows the hit area without overlapping the next link
   (a negative margin made the targets overlap and fail again); the stack is about 10px looser per link. */
footer a {
  padding: 5px 0;
}