/* ============================================================
   AAPOR — Responsible AI Integration in Survey Research
   Interactive report styles.

   The visual system is ported from the reference build so the two
   look and behave the same. Additions are marked "NEW:" and cover
   things the reference lacks: a non-overlapping utility bar at
   narrow widths, scrollable tables, figure/footnote styling, and
   visible focus states.
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --ink: #1a1a2e;
  --body: #333;
  --muted: #555;
  --faint: #888;
  --line: #e0e0e0;
  --rule: #ccc;
  --page: #f5f6fa;
  --card: #fff;
  --accent: #1a73e8;
  --accent-dk: #1557b0;
  --mark: #fef08a;
  --bar-h: 0px; /* height of the mobile utility bar; set in media query */
}

html {
  -webkit-text-size-adjust: 100%;
}

/* The `hidden` attribute is only `display:none` in the UA sheet, so any author
   rule that sets `display` (e.g. .password-gate{display:flex}) silently beats
   it and the element stays on screen. Make `hidden` mean hidden, everywhere. */
[hidden] {
  display: none !important;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  color: var(--ink);
  background: var(--page);
}

/* NEW: never let a focus ring be invisible. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* NEW: skip link, for keyboard users landing on three fixed buttons. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 2000;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: transform 0.15s;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ── Layout ───────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

header {
  text-align: center;
  margin-bottom: 2.5rem;
}

header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

header p {
  color: var(--muted);
  font-size: 0.95rem;
}

.disclaimer {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  font-style: italic;
}

.abstract {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  color: var(--body);
  font-size: 0.95rem;
  line-height: 1.7;
}

.abstract p {
  color: var(--body);
  margin-bottom: 0.5rem;
}

.abstract p:last-child {
  margin-bottom: 0;
}

/* ── Utility buttons ──────────────────────────────────────── */
.controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* NOTE on button typography: the reference sets no font-family on its buttons,
   so they render in the UA default (Arial) rather than the page's Segoe UI.
   We match that deliberately -- adding `font-family: inherit` here was the one
   thing that made our controls, panel toggles and quiz buttons differ from the
   reference. The only exceptions are elements the reference builds from
   <span> (.toc-link, .glossary-tip, .cite-link); those inherit, as spans do. */
.controls button {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}

.controls button:hover {
  background: #eaeaea;
}

footer {
  text-align: center;
  margin-top: 3rem;
  color: var(--faint);
  font-size: 0.85rem;
}

/* ── Fixed panel toggles ──────────────────────────────────── */
.panel-toggle {
  position: fixed;
  z-index: 1100;
  background: var(--card);
  color: var(--body);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.15s;
  white-space: nowrap;
}

.panel-toggle:hover {
  background: #eaeaea;
}

.toc-toggle {
  top: 30px;
  left: 30px;
}

.glossary-toggle {
  top: 30px;
  right: 30px;
}

.references-toggle {
  top: 75px;
  right: 30px;
}

/* ── Drawer overlay + panels ──────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1200;
}

.drawer-overlay[hidden] {
  display: none;
}

.drawer {
  position: fixed;
  top: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--card);
  z-index: 1300;
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.drawer--left {
  left: 0;
  width: 320px;
  transform: translateX(-100%);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
}

.drawer--right {
  right: 0;
  transform: translateX(100%);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
}

#glossary-panel {
  width: 380px;
}

#references-panel {
  width: 420px;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  flex: none;
}

.drawer-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--muted);
  padding: 0.2rem 0.4rem;
  line-height: 1;
}

.drawer-close:hover {
  color: #000;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 1.25rem 2rem;
}

/* ── Table of contents ────────────────────────────────────── */
.toc-list,
.toc-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list {
  padding: 0.75rem 1rem 2rem;
}

.toc-list ul {
  padding-left: 0.85rem;
}

.toc-list li {
  margin: 0.15rem 0;
}

.toc-link {
  /* the reference renders these as <span>; we use <button> for keyboard
     access, so reset every button default back to span behaviour */
  display: inline-block;
  text-align: start;
  background: none;
  border: none;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  padding: 0.15rem 0;
  color: inherit;
  transition: color 0.15s;
}

.toc-link:hover {
  color: var(--accent);
}

.toc-depth-0 > .toc-link {
  font-weight: 600;
  font-size: 0.88rem;
  color: #222;
}

.toc-depth-1 > .toc-link {
  font-weight: 500;
  font-size: 0.83rem;
  color: var(--body);
}

.toc-depth-2 > .toc-link {
  font-weight: 400;
  font-size: 0.79rem;
  color: var(--muted);
}

.toc-depth-3 > .toc-link {
  font-weight: 400;
  font-size: 0.76rem;
  color: #666;
}

/* ── Glossary panel ───────────────────────────────────────── */
.glossary-group-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
}

.glossary-group-heading:first-child {
  margin-top: 0.25rem;
}

.glossary-entry {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 0.6rem;
  scroll-margin-top: 1rem;
}

.glossary-entry strong {
  color: #111;
}

.glossary-entry em {
  color: #666;
}

.glossary-entry.is-target {
  background: var(--mark);
  border-radius: 3px;
  transition: background 1.5s;
}

/* ── References panel ─────────────────────────────────────── */
.ref-group-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
}

.ref-group-heading:first-of-type {
  margin-top: 0.25rem;
}

.ref-intro {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--body);
  margin-bottom: 0.5rem;
}

.ref-entry {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--body);
  margin-bottom: 0.5rem;
  padding-left: 2rem;
  text-indent: -2rem;
  word-break: break-word;
  scroll-margin-top: 1rem;
}

.ref-entry a {
  overflow-wrap: anywhere;
}

.ref-entry.is-target {
  background: var(--mark);
  border-radius: 3px;
  transition: background 1.5s;
}

/* ── Collapsible sections ─────────────────────────────────── */
.section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 1rem;
  transition: box-shadow 0.2s;
  scroll-margin-top: 1rem;
}

.section[open] {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section > summary {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 1rem 1.5rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
}

.section > summary::-webkit-details-marker,
.subsection > summary::-webkit-details-marker {
  display: none;
}

.section > summary::before {
  content: "\25B8";
  font-size: 1rem;
  transition: transform 0.2s;
  display: inline-block;
  flex: none;
}

.section[open] > summary::before {
  transform: rotate(90deg);
}

.section-content {
  padding: 0.5rem 1.5rem 1.5rem;
  color: var(--body);
}

.section-content h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
  scroll-margin-top: 1rem;
}

.section-content p {
  margin-bottom: 0.75rem;
}

.section-content ul,
.section-content ol {
  margin: 0.5rem 0 1rem 1.25rem;
}

.section-content li {
  margin-bottom: 0.3rem;
}

.subsection-content p {
  margin-bottom: 0.6rem;
}

.subsection-content ul,
.subsection-content ol {
  margin: 0.4rem 0 0.75rem 1.25rem;
}

.subsection-content li {
  margin-bottom: 0.25rem;
}

.section-content li > p,
.subsection-content li > p {
  margin: 0.35rem 0 0;
}

/* ── Subsections ──────────────────────────────────────────── */
.subsections {
  margin-top: 0.75rem;
}

.subsection {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  margin-bottom: 0.6rem;
  transition: box-shadow 0.2s;
  scroll-margin-top: 1rem;
}

.subsection[open] {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.subsection > summary {
  font-size: 1rem;
  font-weight: 500;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  user-select: none;
  color: #444;
}

.subsection > summary::before {
  content: "\25B8";
  font-size: 0.85rem;
  transition: transform 0.2s;
  display: inline-block;
  flex: none;
}

.subsection[open] > summary::before {
  transform: rotate(90deg);
}

.subsection-content {
  padding: 0.4rem 1.25rem 1rem;
  color: #444;
  font-size: 0.95rem;
}

/* ── Collapse button ──────────────────────────────────────── */
.collapse-btn {
  display: block;
  /* Space above clears the last line of body copy. Right/bottom insets are
     supplied per context below: inside .section-content the parent's padding
     already provides them, but the subsection button is a direct child of
     <details class="subsection">, which has no padding of its own -- there it
     was sitting 1px from the right border and 5px from the bottom. */
  margin: 1.25rem 0 0 auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.35rem 1.25rem;
  font-size: 0.8rem;
  color: #666;
  cursor: pointer;
  transition: all 0.15s;
}

/* Inside .section-content the parent's 1.5rem padding supplies the right and
   bottom gap. The subsection button is a direct child of the <details>, which
   has no padding, so it supplies its own -- matching the 1.25rem inset of
   .subsection-content above it. */
details.subsection > .collapse-btn {
  margin-right: 1.25rem;
  margin-bottom: 1.25rem;
}

.collapse-btn:hover {
  background: #f0f0f0;
  color: var(--body);
  border-color: #999;
}

/* ── Highlighted (recommended) sections ───────────────────── */
.section--highlighted {
  border-color: var(--accent);
  border-width: 2px;
  background: #f0f6ff;
}

.section--highlighted > summary {
  color: var(--accent-dk);
}

.highlight-badge {
  background: var(--accent);
  color: #fff;
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

/* ── Tables ───────────────────────────────────────────────── */
/* NEW: the reference lets wide tables push the page sideways. Each
   table scrolls inside its own container instead, and the container is
   focusable so it can be reached by keyboard. */
/* Table typography and chrome are the reference's rules verbatim. The only
   addition is overflow-x on the wrapper: it is inert while a table fits, and
   stops an over-wide one from pushing the whole page sideways. */
.table-wrap {
  overflow-x: auto;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.table-wrap caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  color: #666;
}

.table-wrap th {
  background: #f5f5f5;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  vertical-align: top;
}

.table-wrap td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  vertical-align: top;
}

.table-wrap tbody tr:nth-child(even) {
  background: #fafafa;
}

/* Section-band rows (e.g. "Access and Infrastructure" in Table 5) have no
   counterpart in the reference; styled to sit with its header cells. */
.table-wrap .row-band th {
  text-align: center;
}

.table-wrap ul {
  margin: 0.25rem 0 0 1.1rem;
}

.table-wrap li {
  margin-bottom: 0.2rem;
}

/* ── Figure ───────────────────────────────────────────────── */
.report-figure {
  margin: 1.25rem 0;
  text-align: center;
}

.report-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.report-figure figcaption {
  font-size: 0.85rem;
  color: #666;
  padding-top: 0.5rem;
  text-align: left;
}

/* ── Footnotes ────────────────────────────────────────────── */
.footnotes {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}

.footnotes h5 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 0.35rem;
}

.footnotes ol {
  margin: 0 0 0 1.25rem;
}

.footnotes li {
  margin-bottom: 0.3rem;
}

/* ── Glossary tooltip in body text ────────────────────────── */
.glossary-tip {
  background-color: #dbeafe;
  border-bottom: 1.5px dotted #3b82f6;
  border-radius: 2px;
  padding: 0 2px;
  color: inherit;
  cursor: pointer;
  position: relative;
}

.glossary-tip::after {
  content: attr(data-tip);
  position: fixed;
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 320px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  left: var(--tip-x, 0);
  top: var(--tip-y, 0);
  transform: translateY(-100%);
}

.glossary-tip:hover::after,
.glossary-tip:focus-visible::after {
  opacity: 1;
}

/* ── Citations ────────────────────────────────────────────── */
.cite-link {
  color: #2563eb;
  cursor: pointer;
  border-bottom: 1px dashed #93c5fd;
  transition: background 0.15s;
}

.cite-link:hover {
  background: #dbeafe;
}

/* ── Quiz ─────────────────────────────────────────────────── */
.quiz-banner {
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
  border: 1px solid #b6d4fe;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.quiz-banner--done {
  background: linear-gradient(135deg, #e6f4ea, #ceead6);
  border-color: #a8dab5;
}

.quiz-banner-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.quiz-icon {
  font-size: 1.5rem;
  flex: none;
}

.quiz-start-btn,
.quiz-reset-btn {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex: none;
}

.quiz-start-btn:hover {
  background: var(--accent-dk);
}

.quiz-reset-btn {
  background: #34a853;
}

.quiz-reset-btn:hover {
  background: #2d8e47;
}

.quiz-modal {
  background: rgba(0, 0, 0, 0.35);
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.quiz-modal[hidden] {
  display: none;
}

.quiz-card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
}

.quiz-progress {
  font-size: 0.8rem;
  color: var(--faint);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quiz-question {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.75rem;
  line-height: 1.5;
  color: var(--ink);
}

.quiz-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.quiz-btn {
  padding: 0.6rem 1.5rem;
  border: 2px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 180px;
  flex: 1 1 180px;
  max-width: 100%;
}

.quiz-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.quiz-btn--yes:hover {
  background: #e8f0fe;
}

.quiz-btn--no:hover {
  background: #fef7e0;
  border-color: #f9ab00;
  color: #b06d00;
}

.quiz-skip {
  background: none;
  border: none;
  color: var(--faint);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.quiz-skip:hover {
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════
   Responsive
   NEW: the reference floats three buttons over the page at every
   width, so below ~1500px they collide with the centred <h1> and at
   phone widths they sit on top of the title. Instead the three
   toggles become one fixed bar and the page is padded to clear it,
   so nothing ever overlaps the text.
   ══════════════════════════════════════════════════════════ */
/* The floating corner buttons are kept only at the widths where they genuinely
   clear the centred <h1> (measured: the reference build overlaps its own title
   by up to 4,933px² at every width <= 1366px). Below that they become a bar. */
@media (max-width: 1399px) {
  :root {
    --bar-h: 56px;
  }

  .utility-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1100;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 0.6rem 0.75rem;
    background: rgba(245, 246, 250, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }

  .panel-toggle {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    box-shadow: none;
  }

  .container {
    padding-top: calc(var(--bar-h) + 1.5rem);
  }

  .section,
  .subsection,
  .section-content h3,
  .section-content h4,
  .subsection-content h4 {
    scroll-margin-top: calc(var(--bar-h) + 0.5rem);
  }
}

/* The reference's only narrow-width rules are the drawer widths. Matched
   exactly -- our earlier type-size and padding overrides here were a visible
   departure from it, so they are gone. */
@media (max-width: 480px) {
  .drawer--left {
    width: 85vw;
  }

  #glossary-panel,
  #references-panel {
    width: 90vw;
  }

  /* keeps the tooltip inside the viewport; no effect on layout */
  .glossary-tip::after {
    max-width: min(320px, calc(100vw - 24px));
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .utility-bar,
  .drawer,
  .drawer-overlay,
  .controls,
  .quiz-banner,
  .quiz-modal,
  .collapse-btn,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .container {
    max-width: none;
    padding: 0;
  }

  .section,
  .subsection {
    border: none;
    box-shadow: none;
    break-inside: avoid;
  }

  .section-content,
  .subsection-content {
    display: block !important;
  }

  .table-wrap {
    overflow: visible;
  }
}