/* Final cross-skin accessibility layer. Loaded after family and design CSS so
   shared contrast guarantees cannot be undone by a decorative skin. */

/* --head is a header background token and can be nearly white. It must never
   be used as text on the white statistic cards. */
.stat-v { color: var(--ink, #1a1a1a) !important; }
.article-meta,
.crumbs span,
.tbl tr.past td { color: var(--mut, #5b6672) !important; }

/* The mobile panel is always white, including when opened from a dark skin. */
.mnav-head { color: #1c1f26 !important; padding: 13px 22px 9px; font-weight: 800; }

/* Header trigger contrast for every generated design and legacy utility skin. */
body.hdr-bar-dark .mnav-btn,
body.hdr-bar-accent .mnav-btn,
body.hdr-center-logo .mnav-btn,
body.skin-pulse .mnav-btn,
body.skin-sysmono .mnav-btn,
body.skin-stencil .mnav-btn,
body.skin-punch .mnav-btn,
body.skin-beacon .mnav-btn { color: #fff; }

body.hdr-light-rule .mnav-btn,
body.hdr-split-tint .mnav-btn,
body.skin-cst .mnav-btn,
body.skin-lifetime .mnav-btn,
body.skin-saffron .mnav-btn,
body.skin-atlas .mnav-btn { color: var(--ink, #1a1a1a); }

/* Generated light headers need the darker accent for small subtitle text. */
body.hdr-light-rule .g-header .g-brand-text small,
body.hdr-split-tint .g-header .g-brand-text small,
body.hdr-light-rule .g-footer .g-brand-text small,
body.hdr-split-tint .g-footer .g-brand-text small {
  color: var(--ink, #1a1a1a) !important;
  opacity: 1;
}

/* Legacy skins style navigation anchors but their dropdown triggers are
   buttons, so give those triggers the same accessible foreground explicitly. */
body.skin-beacon .g-header .g-drop-btn { color: #a9b7cd !important; }
body.skin-stencil .g-header .g-drop-btn { color: #c3c8a8 !important; }

/* Small white labels need the darker accent background to reach AA. */
body.hero-center .lc-pill { background: var(--c-d); }
body.hero-banner .hb-clock .lc-date { color: #fff; }

/* Footer attribution is real content, not decoration: do not dim it. */
.g-copy { opacity: 1 !important; }
.g-copy a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; }

body.has-design .g-copy { color: rgba(255, 255, 255, .88) !important; }
body.hdr-light-rule .g-copy,
body.hdr-split-tint .g-copy { color: var(--mut) !important; }

body.skin-cst .g-copy,
body.skin-saffron .g-copy,
body.skin-pulse .g-copy,
body.skin-sysmono .g-copy,
body.skin-stencil .g-copy,
body.skin-punch .g-copy,
body.skin-atlas .g-copy,
body.skin-beacon .g-copy { color: #d5dbe3 !important; }

body.skin-lifetime .g-copy { color: var(--mut) !important; }

/* Lifetime's terracotta is attractive at display size but misses AA for small
   labels and links; its existing dark variant preserves the palette. */
body.skin-lifetime a,
body.skin-lifetime .art-cluster,
body.skin-lifetime .tool-card-short,
body.skin-lifetime .faq-item[open] .faq-q,
body.skin-lifetime .skip-link { color: #a5482c !important; }
body.skin-lifetime a.g-cta {
  background: #a5482c !important;
  color: #fff !important;
}

/* Late-loaded mobile safeguard for generated centered-logo headers. The
   design variant is intentionally columnar on desktop, but mobile navigation
   must keep the brand and trigger in one horizontal row. */
@media (max-width: 900px) {
  body.hdr-center-logo .g-header .g-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  body.hdr-center-logo .g-header .g-brand {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.hdr-center-logo .g-header .mnav-btn {
    flex: none;
    margin-left: auto !important;
  }
}