/* Wasa Bothal — UX / navigation / evidence layer, 2026-09-16 */

/* ---------- global reading hierarchy ---------- */
body { --content-measure: 70ch; }
.sr-only {
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}
main.wrap-narrow > section > p:not(.eyebrow),
main.wrap-narrow > section > .sub { max-width: var(--content-measure); }
.hero.slim .wrap > div { max-width: 820px; }
.page-context {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px; color:var(--teal-700);
  font-size:11px; line-height:1; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
}
.page-context::before { content:""; width:22px; height:1px; background:currentColor; opacity:.55; }
.hero .page-context + h1 { margin-top:0; }

/* ---------- normalized navigation ---------- */
nav.main a[data-nav-key="sources"]::before { content:""; width:6px; height:6px; border-radius:50%; background:#38758b; margin-right:2px; }
nav.main a[data-nav-key="safety"]::before {
  content:""; width:7px; height:7px; margin-right:3px;
  border:1.5px solid #6f7e79; border-radius:2px; background:transparent;
}
nav.main a.nav-cta { margin-left:3px; }
@media (max-width:780px) {
  body.menu-open { overflow:hidden; }
  header.site .bar { position:relative; }
  .nav-ready nav.main.is-open {
    width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;
    padding:10px; margin-top:8px; background:#fff; border:1px solid var(--line);
    border-radius:18px; box-shadow:0 22px 50px rgba(23,39,45,.12);
    max-height:min(70vh,560px); overflow:auto;
  }
  .nav-ready nav.main.is-open a { min-height:46px; padding:12px 14px; border-radius:12px; background:#f6f8f9; }
  .nav-ready nav.main.is-open a[aria-current="page"] { background:#e8eef1; }
  .nav-ready nav.main.is-open .nav-cta { grid-column:1 / -1; margin-left:0; justify-content:center; background:var(--ink); color:#fff; }
  .menu-toggle { margin-left:auto; }
}
@media (max-width:460px) {
  .nav-ready nav.main.is-open { grid-template-columns:1fr; }
  .nav-ready nav.main.is-open .nav-cta { grid-column:auto; }
}

/* ---------- topic journey ---------- */
.topic-journey { background:#fff; border-bottom:1px solid var(--line-soft); }
.topic-journey .journey-inner {
  max-width:1200px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.topic-journey .journey-inner::-webkit-scrollbar { display:none; }
.topic-journey a {
  display:inline-flex; align-items:center; gap:8px; flex:none; min-height:34px;
  padding:6px 10px; border-radius:9px; text-decoration:none;
  color:var(--muted); font-size:11px; font-weight:550; letter-spacing:.02em;
}
.topic-journey a:hover { color:var(--ink); background:#f2f5f6; }
.topic-journey a.is-current { color:var(--ink); background:#edf1f3; }
.topic-journey .step-no { color:#8b969c; font-variant-numeric:tabular-nums; }
.topic-journey .journey-sep { color:#c5ccd0; font-size:12px; }
@media (max-width:560px) {
  .topic-journey .journey-inner { padding:8px 14px; gap:2px; }
  .topic-journey a { padding:6px 8px; font-size:10px; }
  .topic-journey .journey-sep { font-size:10px; }
}

/* ---------- official evidence ---------- */
.evidence-strip { border-block:1px solid #dce4e7; background:#f8fafb; }
.evidence-strip .evidence-inner {
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  color:var(--ink-soft); font-size:13px;
}
.evidence-strip strong { color:var(--ink); font-weight:650; }
.evidence-strip a { flex:none; font-weight:650; text-decoration:none; }
.evidence-strip a:hover { text-decoration:underline; }
@media (max-width:620px) {
  .evidence-strip .evidence-inner { align-items:flex-start; flex-direction:column; gap:8px; padding:14px 20px; }
}

.official-sources-panel {
  margin:34px 0 8px; padding:0; border:1px solid #d8e1e4; border-radius:22px;
  background:#fff; overflow:hidden;
}
.official-sources-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 24px 18px; border-bottom:1px solid #e5e9eb; background:#f8fafb;
}
.official-sources-head .label {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:6px;
  color:#26576b; font-size:10px; font-weight:750; letter-spacing:.15em; text-transform:uppercase;
}
.official-sources-head .label::before { content:""; width:7px; height:7px; border-radius:50%; background:#2d718b; }
.official-sources-head h2 { font-size:20px; letter-spacing:-.025em; }
.official-sources-head p { margin-top:6px; color:var(--muted); font-size:13px; max-width:62ch; }
.official-sources-head > a { flex:none; font-size:12px; font-weight:650; text-decoration:none; }
.official-source-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.official-source-link {
  min-width:0; padding:18px 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  color:var(--ink); text-decoration:none; border-bottom:1px solid #edf0f1;
}
.official-source-link:nth-child(odd) { border-right:1px solid #edf0f1; }
.official-source-link:hover { background:#fafcfc; }
.official-source-link .source-copy { min-width:0; margin:0; }
.official-source-link .source-kind {
  display:inline-flex; width:max-content; margin:0 0 7px; padding:3px 7px;
  border-radius:999px; background:#e8f0f3; color:#26576b;
  font-size:9px; font-weight:750; line-height:1.2; letter-spacing:.11em; text-transform:uppercase;
}
.official-source-link b { display:block; font-size:13px; font-weight:650; }
.official-source-link span { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.45; }
.official-source-link .out { flex:none; color:#74848b; margin-top:1px; }
.source-panel-note {
  padding:10px 24px 12px; border-top:1px solid #edf0f1;
  color:#7a858b; background:#fcfdfd; font-size:10.5px; line-height:1.5;
}
@media (max-width:650px) {
  .official-sources-panel { margin-top:24px; }
  .official-sources-head { flex-direction:column; gap:12px; padding:18px 20px 16px; }
  .official-source-list { display:block; }
  .official-source-link { display:none; padding:15px 20px; }
  .official-source-link:first-child { display:flex; border-right:0; }
  .source-panel-note { display:none; }
}

/* Sources hub */
.source-card { position:relative; }
.source-meta { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-bottom:16px; color:var(--muted); font-size:11px; }
.source-badge { display:inline-flex; padding:4px 8px; border-radius:99px; background:#e8f0f3; color:#26576b; font-weight:750; letter-spacing:.1em; }
.source-card > p { margin-top:10px; color:var(--ink-soft); }
.source-limit { margin-top:18px !important; padding:14px 16px; border-left:3px solid #9aabb2; background:#f4f6f7; border-radius:0 10px 10px 0; color:var(--ink-soft); font-size:13px; }
.source-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

/* ---------- on-page contents ---------- */
.page-toc {
  margin:26px 0 12px; border-block:1px solid var(--line-soft); padding:13px 0;
  position:sticky; top:82px; z-index:20; background:rgba(245,246,247,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.page-toc .toc-inner { display:flex; gap:7px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.page-toc .toc-inner::-webkit-scrollbar { display:none; }
.page-toc .toc-label { flex:none; margin-right:3px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.page-toc a { flex:none; padding:7px 10px; border-radius:9px; text-decoration:none; color:var(--ink-soft); background:#f2f4f5; font-size:11px; }
.page-toc a:hover { background:#e7ecee; color:var(--ink); }
.page-toc a.is-active,
.page-toc a[aria-current="location"] { background:#dde6ea; color:var(--ink); }
@media (max-width:780px) {
  .page-toc { top:70px; margin-inline:-20px; padding-inline:20px; }
}

/* ---------- stronger distinction: editorial vs commercial ---------- */
body[data-topic-group="business"] .hero { background:#edf1f2; }
body[data-topic-group="business"] .page-context { color:#725e3d; }
body[data-topic-group="rules"] .hero { background:#edf3f5; }
body[data-topic-group="evidence"] .hero { background:#f1f4f5; }
body[data-topic-group="understand"] .hero { background:#f4f5f5; }
body[data-topic-group="safety"] .hero { background:#eef5f2; }
body[data-topic-group="safety"] .page-context { color:#356b5c; }
.commercial-role-note {
  margin:28px 0 0; padding:14px 16px; border:1px solid #ded8cd; border-radius:14px;
  background:#f7f4ee; color:#5f574a; font-size:12px; line-height:1.6;
}
.commercial-role-note strong { color:#403a32; }

/* ---------- section rhythm ---------- */
main.wrap-narrow > section { position:relative; }
main.wrap-narrow > section + section::before {
  content:""; position:absolute; top:0; left:0; width:54px; height:1px; background:#cbd3d7;
}
main.wrap-narrow > section .eyebrow + h2 { max-width:20ch; }
.card h3 + p { margin-top:8px; }

/* ---------- tables on small screens ---------- */
@media (max-width:700px) {
  .tablewrap { margin-inline:-4px; border-radius:14px; }
  table { font-size:13px; }
  thead th, tbody td { padding:14px 13px; }
}

/* ---------- footer evidence link ---------- */
.footer-source-link { display:inline-flex; align-items:center; gap:6px; font-weight:650 !important; }
.footer-source-link::before { content:""; width:6px; height:6px; border-radius:50%; background:#38758b; }