/* ════════════════════════════════════════════════════════════════════
   Qualified Capacity Mobile Shell — Track A Readability System
   29APR2026_1659H_CT_v3 (second-pass CSS normalization)

   Scope: fixed global nav, mobile overlay, fixed wayfinder strips,
   safe-area handling, mobile viewport safety, mobile compositing,
   page-class texture overlay variants, and safe-color guards.

   Track A typography (Adobe Fonts kit huk7cuk):
     --font-display  Cormorant Garamond
     --font-text     Literata Variable
     --font-ui       Inter Variable

   Decommissions Courier Prime from nav, mobile overlay, nav-mark,
   and page-strip text. Courier Prime remains available only as
   a deliberate accent via .type-mono-accent.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Local fallback values — primary tokens come from each page's inline
     <style> block (which now defines --font-display/--font-text/--font-ui
     and redirects legacy --mono and --serif). These exist so qc-shell.css
     remains correct even if loaded into a page that has not defined them. */
  --qc-bg-solid: #070A11;
  --qc-nav-height: 4.5rem;
  --qc-strip-height: 0px;
  --qc-shell-gold: #B8955A;
  --qc-shell-ink: #EDE9E1;
  --qc-shell-ink-low: rgba(237,233,225,0.65);
  --qc-shell-ink-mid: #CFC8BC;
  --qc-shell-border: rgba(184,149,90,0.45);
  --qc-shell-border-strong: #8A7249;
  --qc-shell-bronze-deep: #5A3B1F;
  --qc-shell-z-nav: 1000;
  --qc-shell-z-overlay: 1001;
  --qc-shell-z-toggle: 1002;
  --qc-shell-z-strip: 999;

  /* Font-role fallbacks (every page should override these via its inline tokens) */
  --qc-font-display: 'Cormorant Garamond', 'Adobe Garamond', Georgia, serif;
  --qc-font-text:    'Literata Variable', 'Literata', 'Source Serif', Georgia, serif;
  --qc-font-ui:      'Inter Variable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ──────────────────────────────────────────────────────────────────
   Fixed global navigation: solid paint layer, no text bleed-through.
   ────────────────────────────────────────────────────────────────── */
#site-nav,
[data-qc-nav] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--qc-shell-z-nav);
  min-height: var(--qc-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  border-bottom: 1px solid var(--border, var(--qc-shell-border));
  background: var(--bg, var(--qc-bg-solid));
  isolation: isolate;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Paint through iOS safe-area to prevent transparent gaps. */
#site-nav::before,
[data-qc-nav]::before {
  content: "";
  position: absolute;
  inset: calc(-1 * env(safe-area-inset-top)) 0 0 0;
  background: var(--bg, var(--qc-bg-solid));
  z-index: -1;
}

/* ──────────────────────────────────────────────────────────────────
   Nav mark (the QualifiedCapacity.com logotype on left of nav).
   Track A: Inter, smaller tracking, dropped from 0.2em → 0.06em.
   ────────────────────────────────────────────────────────────────── */
.nav-mark,
[data-qc-nav-mark] {
  font-family: var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink, var(--qc-shell-ink));
  line-height: 1.2;
}

.nav-mark span,
[data-qc-nav-mark] span {
  color: var(--gold, var(--qc-shell-gold));
}

/* ──────────────────────────────────────────────────────────────────
   Primary nav links — Track A readability:
     Inter, 15px desktop, weight 600, near-zero tracking, no uppercase.
   ────────────────────────────────────────────────────────────────── */
.nav-links {
  display: flex;
  gap: 2.2rem;
  align-items: center;
}

.nav-links a {
  font-family: var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: none;
  text-decoration: none;
  color: var(--ink-low, var(--qc-shell-ink-low));
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  line-height: 1.2;
}

.nav-links a:hover,
.nav-links a.current,
.nav-links a[aria-current="page"] {
  color: var(--gold, var(--qc-shell-gold));
  border-bottom-color: var(--gold, var(--qc-shell-gold));
}

/* ──────────────────────────────────────────────────────────────────
   Mobile hamburger button — 48px touch target.
   ────────────────────────────────────────────────────────────────── */
.nav-toggle,
[data-qc-nav-toggle] {
  display: none;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: -0.6rem -0.6rem -0.6rem 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink, var(--qc-shell-ink));
  cursor: pointer;
  position: relative;
  z-index: var(--qc-shell-z-toggle);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle svg,
[data-qc-nav-toggle] svg {
  display: block;
  pointer-events: none;
}

.nav-toggle:focus-visible,
[data-qc-nav-toggle]:focus-visible {
  outline: 2px solid var(--gold, var(--qc-shell-gold));
  outline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────────────
   Full-screen menu overlay — above content, below button.
   Track A: Inter, 16px (more ceremonial than primary nav), weight 600.
   ────────────────────────────────────────────────────────────────── */
.nav-overlay,
[data-qc-nav-overlay] {
  position: fixed;
  inset: 0;
  z-index: var(--qc-shell-z-overlay);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  min-height: 100svh;
  padding: calc(var(--qc-nav-height) + env(safe-area-inset-top) + 2rem) 2rem 4rem;
  background: var(--bg, var(--qc-bg-solid));
  transform: translateZ(0);
}

.nav-overlay.open,
[data-qc-nav-overlay].open,
body.qc-nav-open .nav-overlay,
body.qc-nav-open [data-qc-nav-overlay] {
  display: flex;
}

.nav-overlay a,
[data-qc-nav-overlay] a {
  font-family: var(--font-ui, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  color: var(--ink, var(--qc-shell-ink));
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
  line-height: 1.25;
}

.nav-overlay a:hover,
.nav-overlay a.current,
.nav-overlay a[aria-current="page"],
[data-qc-nav-overlay] a:hover,
[data-qc-nav-overlay] a.current,
[data-qc-nav-overlay] a[aria-current="page"] {
  color: var(--gold, var(--qc-shell-gold));
  border-bottom-color: var(--gold, var(--qc-shell-gold));
}

body.qc-nav-open,
body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* ──────────────────────────────────────────────────────────────────
   Fixed chapter/Desk strip — controlled by nav height.
   Track A: ensure any text inside inherits Inter via cascade redirect.
   ────────────────────────────────────────────────────────────────── */
.chapter-strip,
.desk-strip,
[data-qc-fixed-strip] {
  position: fixed;
  top: var(--qc-nav-height);
  left: 0;
  right: 0;
  z-index: var(--qc-shell-z-strip);
  min-height: var(--qc-strip-height);
  border-bottom: 1px solid var(--border, var(--qc-shell-border));
  background: var(--bg, var(--qc-bg-solid));
  font-family: var(--font-ui, var(--qc-font-ui));
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Default offsets for pages with fixed strips. JS refines these based on measured heights. */
body.qc-has-fixed-strip main {
  padding-top: calc(var(--qc-nav-height) + var(--qc-strip-height));
}

body.qc-no-fixed-strip main {
  padding-top: var(--qc-nav-height);
}

/* ──────────────────────────────────────────────────────────────────
   Mobile-safe hero viewport.
   ────────────────────────────────────────────────────────────────── */
#hero,
[data-qc-hero] {
  min-height: 100svh;
}

@supports not (height: 100svh) {
  #hero,
  [data-qc-hero] {
    min-height: 100vh;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Page-class texture overlay variants — readability-aware.
   Long-form pages get a quieter scrim so prose stays clear.
   ────────────────────────────────────────────────────────────────── */
body::before {
  opacity: 0.18;
}

body.prose-page::before,
body.article-page::before,
body.manual-page::before,
body.policy-page::before,
body.desk-page::before {
  opacity: 0.10;
}

@media (prefers-contrast: more) {
  body::before {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   White-on-gold safety guard.
   Per Track A spec: never use white or ivory text on the gold surface.
   Defensive rule — primary buttons should already use the navy ink
   color via their per-page styles or Tailwind utility classes.
   ────────────────────────────────────────────────────────────────── */
.gold-surface,
[data-qc-gold-surface] {
  color: var(--bg, var(--qc-bg-solid));
}

.inverse-safe,
[data-qc-bronze-deep] {
  background: var(--qc-shell-bronze-deep);
  color: #FFFFFF;
}

/* ──────────────────────────────────────────────────────────────────
   Rare-accent monospace class — opt-in only.
   Do NOT apply to nav, buttons, forms, body, labels, or metadata.
   ────────────────────────────────────────────────────────────────── */
.type-mono-accent {
  font-family: 'Courier Prime', 'Courier New', monospace;
}

/* ──────────────────────────────────────────────────────────────────
   Mobile compositing — narrow viewport adjustments.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  :root {
    --qc-nav-height: 4.25rem;
  }

  #site-nav,
  [data-qc-nav] {
    padding: calc(1.05rem + env(safe-area-inset-top)) 1.5rem 1.05rem;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle,
  [data-qc-nav-toggle] {
    display: inline-flex;
  }

  .chapter-strip,
  .desk-strip,
  [data-qc-fixed-strip] {
    top: var(--qc-nav-height);
  }

  body::before {
    display: none;
  }

  #hero,
  [data-qc-hero] {
    min-height: calc(100svh - var(--qc-nav-height));
  }

  /* Mobile readability minimums for nav-mark (still visible at top). */
  .nav-mark,
  [data-qc-nav-mark] {
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  [data-qc-nav-overlay],
  .chapter-strip,
  .desk-strip,
  [data-qc-fixed-strip] {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Track A Readability Overrides
   ────────────────────────────────────────────────────────────────────
   Caps letter-spacing and corrects font sizes on elements that are
   defined per-page in each HTML's inline <style> block. Source order
   places this stylesheet AFTER inline <style>, so equal-specificity
   rules below win the cascade — no !important required.

   Categories:
     A. Eyebrow / label / section-label  — small caps, max 0.04em tracking
     B. Meta / caption / update-line     — routine UI, max 0.01em tracking
     C. Issue-line / page-index-label    — small caps, max 0.04em tracking
     D. Buttons / CTAs                   — Inter, max 0.01em tracking
     E. Chapter-strip / desk-strip text  — Inter, max 0.04em tracking
   ════════════════════════════════════════════════════════════════════ */

/* A. Eyebrows and small ceremonial labels */
.eyebrow,
.section-label,
.meta-label {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold, var(--qc-shell-gold));
}

/* B. Routine metadata, captions, footers, supporting copy */
.meta,
.caption,
.update-line,
.print-hint,
.footer-note,
.footer .meta {
  font-family: var(--font-ui, var(--qc-font-ui));
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
}

/* B-min: don't let routine metadata go below 13px */
.meta,
.caption,
.update-line,
.print-hint,
.footer-note {
  font-size: max(0.8125rem, 13px);
}

/* C. Issue lines and page-index labels — slightly more ceremonial than meta */
.issue-line,
.page-index-label {
  font-family: var(--font-ui, var(--qc-font-ui));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.page-index-list {
  font-family: var(--font-ui, var(--qc-font-ui));
  letter-spacing: 0.005em;
  text-transform: none;
}

/* D. Buttons and CTAs — minimum 44px tap, Inter, low tracking, no all-caps default */
.btn,
.button,
.print-btn,
.newsletter-submit,
button[type="submit"] {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.9375rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-weight: 700;
  text-transform: none;
  min-height: 44px;
}

/* D-safe: gold-background buttons must use navy text — never white/ivory */
.btn-primary,
.newsletter-submit,
button[type="submit"] {
  color: var(--bg, var(--qc-bg-solid));
}

/* E. Chapter strip / desk strip text — readable Inter, contained tracking */
.chapter-strip,
.desk-strip,
[data-qc-fixed-strip] {
  font-family: var(--font-ui, var(--qc-font-ui));
}

.chapter-strip *,
.desk-strip *,
[data-qc-fixed-strip] * {
  letter-spacing: 0.04em;
}

/* F. Form controls — Inter, 16px minimum (prevents iOS zoom on focus) */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 1rem;
  line-height: 1.4;
}

label {
  font-family: var(--font-ui, var(--qc-font-ui));
}

/* ════════════════════════════════════════════════════════════════════
   SECOND-PASS NORMALIZATION (29APR2026_1659H_CT)
   Targets per-page selectors that the first-pass --mono cascade
   redirect upgraded to Inter but did not normalize for size, tracking,
   case, or weight. Loaded after every page's inline <style> block, so
   matching-specificity rules below win the cascade tiebreak.
   ════════════════════════════════════════════════════════════════════ */

/* ── Chapter strip internals ─────────────────────────────────────── */
.chapter-strip,
.desk-strip {
  /* Force fixed-strip top in case any page omits it */
  top: 4.65rem;
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  font-weight: 600;
  text-transform: none;
  padding: 0.75rem 3rem;
}

.chapter-strip a,
.chapter-strip-items a,
.chapter-strip-items .current,
.desk-strip a,
.desk-strip-label,
.desk-strip-archive-link,
.desk-strip-numbers a,
.desk-strip-numbers .current {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
  color: var(--ink-low, var(--qc-shell-ink-low));
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s, opacity 0.2s;
}

.chapter-strip a:hover,
.chapter-strip-items a:hover,
.desk-strip a:hover,
.desk-strip-label:hover,
.desk-strip-archive-link:hover,
.desk-strip-numbers a:hover,
.chapter-strip a:focus-visible,
.chapter-strip-items a:focus-visible,
.desk-strip a:focus-visible,
.desk-strip-label:focus-visible,
.desk-strip-archive-link:focus-visible,
.desk-strip-numbers a:focus-visible {
  color: var(--gold, var(--qc-shell-gold));
  border-bottom-color: var(--gold, var(--qc-shell-gold));
}

.chapter-strip-items .current,
.desk-strip-numbers .current {
  color: var(--gold, var(--qc-shell-gold));
  border-bottom-color: var(--gold, var(--qc-shell-gold));
}

@media (max-width: 700px) {
  .chapter-strip,
  .desk-strip {
    padding: 0.65rem 1.25rem;
    font-size: 0.8125rem;
  }
}

/* ── Page index ──────────────────────────────────────────────────── */
.page-index-label {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mid, var(--qc-shell-ink-mid));
}

.page-index-list,
.page-index-list li,
.page-index-list a {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
}

.page-index-list a {
  color: var(--ink-low, var(--qc-shell-ink-low));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.page-index-list a:hover,
.page-index-list a:focus-visible {
  color: var(--gold, var(--qc-shell-gold));
  border-bottom-color: var(--gold, var(--qc-shell-gold));
}

/* ── Eyebrows / labels (gold accent labels) ──────────────────────── */
.eyebrow,
.section-label,
.meta-label,
.issue-line,
.counter-label,
.archive-results-count,
.policy-toc-label,
.counsel-notice strong,
.howto h2,
.colors h2,
.families-heading {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold, var(--qc-shell-gold));
}

/* ── Secondary metadata (muted, not gold) ────────────────────────── */
.meta,
.meta-line,
.update-line,
.caption,
.print-hint,
.footer-note,
.counter-meta,
.howto-footnote {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: max(0.8125rem, 13px);
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
  color: var(--ink-mid, var(--qc-shell-ink-mid));
}

/* ── Counter / howto identifiers (numeric badges, names) ─────────── */
.counter-name,
.howto-num,
.family-num {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.875rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-transform: none;
}

/* ── Diagnostic rubric & subq labels ─────────────────────────────── */
.rubric thead th,
.subq-note .note-label,
.family-title .abbr,
.color-label {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.subq-index {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.875rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-transform: none;
}

/* Allow dense rubric headers a slightly smaller floor (per Section 15). */
.rubric thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

/* ── Buttons / utility links ─────────────────────────────────────── */
.btn,
.button,
.print-btn,
.load-more-btn,
.secondary-link,
.newsletter-submit,
button[type="submit"],
input[type="submit"] {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.9375rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-weight: 700;
  text-transform: none;
  min-height: 44px;
}

/* Print buttons are functional controls, not ceremonial labels. */
.print-btn {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Gold-surface buttons must use navy text — no white/ivory */
.btn-primary,
.gold-surface,
.newsletter-submit,
button[type="submit"],
input[type="submit"] {
  color: var(--bg, var(--qc-bg-solid));
}

.btn-primary:hover,
.newsletter-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--gold-hover, #C8A56B);
  color: var(--bg, var(--qc-bg-solid));
}

/* ── Policy TOC list items ───────────────────────────────────────── */
.policy-toc li,
.policy-toc li a {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.875rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
}

.policy-toc li a {
  color: var(--ink-low, var(--qc-shell-ink-low));
  text-decoration: none;
  transition: color 0.2s;
}

.policy-toc li a:hover,
.policy-toc li a:focus-visible {
  color: var(--gold, var(--qc-shell-gold));
}

/* ── Footer utility text ─────────────────────────────────────────── */
.footer,
footer {
  font-family: var(--font-ui, var(--qc-font-ui));
}

.footer .meta,
.footer-note,
footer .meta,
footer .footer-note,
footer .update-line {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: max(0.8125rem, 13px);
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
}

footer a,
.footer a {
  font-family: var(--font-ui, var(--qc-font-ui));
  letter-spacing: 0.005em;
  text-transform: none;
}

/* ── Form controls (inputs, textareas, selects, labels) ──────────── */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink, var(--qc-shell-ink));
  background: var(--bg-lift, var(--qc-shell-surface, #0C1220));
  border: 1px solid var(--border-strong, var(--qc-shell-border-strong));
}

label {
  font-family: var(--font-ui, var(--qc-font-ui));
  font-size: 0.875rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: none;
}

/* ──────────────────────────────────────────────────────────────────
   Print baseline — preserve any per-page print rules in inline <style>.
   ────────────────────────────────────────────────────────────────── */
@media print {
  body::before {
    display: none !important;
  }
  #site-nav,
  [data-qc-nav],
  .nav-overlay,
  [data-qc-nav-overlay],
  .nav-toggle,
  [data-qc-nav-toggle] {
    display: none !important;
  }
}