/* ============================================================
   READING TOOLS — shared accessibility styling for STANDALONE
   ARTICLE PAGES (magazine/articles/*.html, journal/articles/*.html).

   Loaded by every static article page, current and future, via:
     <link rel="stylesheet" href="../../shared/css/reading-tools.css">
     <script src="../../shared/js/reading-tools.js"></script>

   This is a sibling to the toolbar rules already baked into
   shared/css/main.css for the interactive modal reader (which
   target .modal-* classes). Static article pages don't use the
   modal markup, so this file re-targets the same ten a11y modes
   at the plain <main>/<article> structure both the magazine and
   journal page generators emit: main, article, h1, .byline,
   .abstract, p/h2/h3/ul/li inside <article>.

   Uses var(--gold, ...) / var(--gold-b, ...) / var(--ink3, ...)
   with fallbacks so it works whether or not a given template
   defines those custom properties itself.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

/* ── TOOLBAR CHROME ── */
.a11y-strip {
  background: linear-gradient(90deg, #0f0f0f, #151208, #0f0f0f);
  border-bottom: 1px solid var(--gold-b, rgba(201, 168, 76, 0.25));
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 690;
}

.a11y-strip-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex-shrink: 0;
  padding-right: 1rem;
  margin-right: 0.8rem;
  border-right: 1px solid var(--gold-b, rgba(201, 168, 76, 0.25));
}

.a11y-strip-title {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold, #c9a84c);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Montserrat', sans-serif;
}

.a11y-strip-sub {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Montserrat', sans-serif;
}

.a11y-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold, #c9a84c);
  display: none;
  flex-shrink: 0;
}

.a11y-active-dot.show {
  display: inline-block;
}

.a11y-tools {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
}

.a11y-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.38rem 0.6rem;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  transition: all 0.16s;
  white-space: nowrap;
  min-width: 54px;
  border-radius: 2px;
  position: relative;
  font-family: 'Montserrat', sans-serif;
}

.a11y-btn:hover {
  border-color: var(--gold-b, rgba(201, 168, 76, 0.25));
  background: rgba(201, 168, 76, 0.07);
  color: #ffffff;
}

.a11y-btn.on {
  border-color: var(--gold, #c9a84c);
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold, #c9a84c);
}

.a11y-btn.on::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--gold, #c9a84c);
}

.a11y-icon {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.16s;
}

.a11y-btn:hover .a11y-icon,
.a11y-btn.on .a11y-icon {
  opacity: 1;
}

.a11y-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.a11y-lbl {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
  color: inherit;
}

.a11y-sep {
  width: 1px;
  height: 26px;
  background: var(--gold-b, rgba(201, 168, 76, 0.25));
  margin: 0 0.4rem;
  flex-shrink: 0;
}

.a11y-reset {
  margin-left: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.a11y-reset:hover {
  border-color: var(--gold-b, rgba(201, 168, 76, 0.25));
  color: #ffffff;
}

/* ── READING RULER ── */
.reading-ruler {
  position: fixed;
  left: 0;
  right: 0;
  height: 2.2rem;
  background: rgba(201, 168, 76, 0.07);
  border-top: 1px solid rgba(201, 168, 76, 0.3);
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  pointer-events: none;
  z-index: 9999;
  display: none;
  box-shadow: 0 -40px 40px rgba(0, 0, 0, 0.35), 0 40px 40px rgba(0, 0, 0, 0.35);
}
body.a11y-ruler .reading-ruler {
  display: block;
}
body.a11y-ruler main {
  cursor: crosshair;
}

/* ── SCREEN-READER-ONLY LIVE REGION ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── READING MODES (generic article markup) ── */

/* Dyslexia-friendly font */
body.a11y-dyslexia main,
body.a11y-dyslexia article p,
body.a11y-dyslexia article li,
body.a11y-dyslexia #article-body p,
body.a11y-dyslexia #a2ip-article-body p,
body.a11y-dyslexia .abstract,
body.a11y-dyslexia .byline {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}
body.a11y-dyslexia h1,
body.a11y-dyslexia article h2,
body.a11y-dyslexia article h3 {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  letter-spacing: 0.02em;
}

/* Large text */
body.a11y-large-text article p,
body.a11y-large-text article li,
body.a11y-large-text #article-body p,
body.a11y-large-text #a2ip-article-body p {
  font-size: 1.15rem !important;
  line-height: 2.1 !important;
}
body.a11y-large-text .abstract {
  font-size: 1.4rem !important;
  line-height: 2 !important;
}
body.a11y-large-text h1 {
  font-size: 2.9rem !important;
}

/* Wide spacing */
body.a11y-wide-spacing article p,
body.a11y-wide-spacing article li,
body.a11y-wide-spacing #article-body p,
body.a11y-wide-spacing #a2ip-article-body p {
  letter-spacing: 0.06em !important;
  word-spacing: 0.22em !important;
  line-height: 2.3 !important;
}
body.a11y-wide-spacing .abstract {
  letter-spacing: 0.04em !important;
  word-spacing: 0.16em !important;
  line-height: 2.2 !important;
}

/* High contrast */
body.a11y-high-contrast {
  background: #ffffff !important;
}
body.a11y-high-contrast main,
body.a11y-high-contrast .topline,
body.a11y-high-contrast .topbar {
  background: #ffffff !important;
  color: #000000 !important;
}
body.a11y-high-contrast h1,
body.a11y-high-contrast article h2,
body.a11y-high-contrast article h3,
body.a11y-high-contrast .kicker,
body.a11y-high-contrast .abstract-head {
  color: #000000 !important;
}
body.a11y-high-contrast article p,
body.a11y-high-contrast article li,
body.a11y-high-contrast #article-body p,
body.a11y-high-contrast #a2ip-article-body p,
body.a11y-high-contrast .byline,
body.a11y-high-contrast .affiliations,
body.a11y-high-contrast .meta-row,
body.a11y-high-contrast .keywords {
  color: #000000 !important;
}
body.a11y-high-contrast .abstract {
  color: #111111 !important;
  border-left-color: #000000 !important;
}
body.a11y-high-contrast .topline a,
body.a11y-high-contrast a {
  color: #0055cc !important;
}
body.a11y-high-contrast article table td,
body.a11y-high-contrast article table th {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #000000 !important;
}
body.a11y-high-contrast .a11y-strip {
  background: #f0f0f0 !important;
  border-bottom: 2px solid #000000 !important;
}

/* Focus mode — dim everything except the article copy */
body.a11y-focus-mode .topline,
body.a11y-focus-mode .topbar,
body.a11y-focus-mode footer,
body.a11y-focus-mode .pagefoot,
body.a11y-focus-mode .cta,
body.a11y-focus-mode .tags,
body.a11y-focus-mode .references,
body.a11y-focus-mode .disclosures,
body.a11y-focus-mode .cite-box,
body.a11y-focus-mode .a11y-strip {
  opacity: 0.15 !important;
  transition: opacity 0.3s;
}
body.a11y-focus-mode .topline:hover,
body.a11y-focus-mode .topbar:hover,
body.a11y-focus-mode footer:hover,
body.a11y-focus-mode .pagefoot:hover,
body.a11y-focus-mode .a11y-strip:hover {
  opacity: 1 !important;
}

/* Line / sentence highlight */
body.a11y-sentence-hl article p:hover,
body.a11y-sentence-hl #article-body p:hover,
body.a11y-sentence-hl #a2ip-article-body p:hover {
  background: rgba(201, 168, 76, 0.07) !important;
  border-left: 2px solid var(--gold-b, rgba(201, 168, 76, 0.25)) !important;
  padding-left: 0.6rem !important;
  cursor: default;
}

/* ADHD focus — shorter measure, bolder first line */
body.a11y-adhd article p,
body.a11y-adhd #article-body p,
body.a11y-adhd #a2ip-article-body p {
  max-width: 62ch !important;
  margin-bottom: 1.8rem !important;
  line-height: 2.1 !important;
}
body.a11y-adhd article p::first-line,
body.a11y-adhd #article-body p::first-line,
body.a11y-adhd #a2ip-article-body p::first-line {
  font-weight: 700;
}

/* Still mode / reduce motion */
body.a11y-reduce-motion * {
  animation: none !important;
  transition: none !important;
}

/* Sepia tint */
body.a11y-sepia {
  background: #1a1500 !important;
}
body.a11y-sepia main,
body.a11y-sepia .topline,
body.a11y-sepia .topbar {
  background: #1a1500 !important;
}
body.a11y-sepia article p,
body.a11y-sepia article li,
body.a11y-sepia #article-body p,
body.a11y-sepia #a2ip-article-body p,
body.a11y-sepia h1,
body.a11y-sepia article h2,
body.a11y-sepia article h3,
body.a11y-sepia .byline {
  color: #e8d9a0 !important;
}
body.a11y-sepia .abstract {
  color: #c9ba80 !important;
}