/* Final interface layer: readable type, theme-specific contrast and intrinsic layouts.
   Brand marks and scientific map colour scales retain their established colours. */
:root {
  --control-border: #7a8f9c;
  --focus-ring: #006b41;
  --inverse-surface: #062a49;
  --inverse-text: #f4f8fb;
  --inverse-muted: #ccdae5;
  --inverse-accent: #78e0ad;
}
html[data-theme="dark"] {
  --control-border: #7290a5;
  --focus-ring: #8aebba;
}
body { overflow-wrap: break-word; }
button, input, select, textarea { font-family: var(--font-body); }
input, select, textarea { max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
:is(input,select,textarea):not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--control-border);
}
:is(a,button,input,select,textarea,summary,canvas,[tabindex="0"]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.access-form :is(input,textarea,select):focus { outline-color: var(--focus-ring); }
.button, .small-button, .text-button, .theme-toggle, .section-tabs a { min-height: 44px; }
.button, .small-button { line-height: 1.4; white-space: normal; text-align: center; }
.topbar nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: .875rem; }
.theme-toggle { font-size: .8rem; padding-inline: .8rem; }
.brand-descriptor small { font-size: .75rem; letter-spacing: .025em; }
.eyebrow, .kicker { font-size: .75rem; line-height: 1.5; letter-spacing: .075em; }
.page-head h1 { font-size: clamp(1.9rem,3.3vw,2.8rem); line-height: 1.15; text-wrap: balance; }
.page-head p { font-size: 1rem; line-height: 1.7; }
.section-head h2, .identity-intro h2 { font-size: clamp(1.65rem,2.7vw,2.3rem); line-height: 1.2; }
.section-pad { padding-block: clamp(2.5rem,5vw,4.5rem); }
.app-view, .prose-view { padding-block: clamp(1.5rem,4vw,3rem) 4rem; }
.section-tabs { max-width: 100%; }
.section-tabs a { font-size: .85rem; }
.footer-grid span, .footer-grid p, .footer-grid a { font-size: .8rem; line-height: 1.6; }
.footer-grid a { min-height: 32px; display: flex; align-items: center; }
.footer-grid a.footer-brand { display: block; }

/* Consistent inverse surfaces avoid pale text over bright green in either theme. */
.identity-grid .accent,
html[data-theme="dark"] .identity-grid .accent { background: #006b41; }
.identity-grid .accent>span, .identity-grid .accent p { color: #f4fff8; }
.identity-grid h3.brand-name-card span { color: var(--inverse-accent); }
.identity-grid article>span { font-size: .75rem; }
.identity-grid p { font-size: .9rem; line-height: 1.65; }
.metric-strip span { font-size: .8rem; line-height: 1.5; }
.map-caption { gap: .75rem; align-items: start; }
.map-caption span { font-size: .75rem; line-height: 1.4; }
.map-caption strong { font-size: .8rem; line-height: 1.4; }
.map-stamp span, .map-stamp small { font-size: .75rem; line-height: 1.45; }
.hero-map-instruction { font-size: .75rem; line-height: 1.45; }
.hero-map-tooltip span, .explorer-map-tooltip span { font-size: .75rem; line-height: 1.4; }
.hero-map-tooltip small, .explorer-map-tooltip small { font-size: .8rem; line-height: 1.5; }
.hero-map-tooltip strong, .explorer-map-tooltip strong { color: #00783f; }
html[data-theme="dark"] :is(.hero-map-tooltip,.explorer-map-tooltip) strong { color: #78e0ad; }

/* Maps remain proportional; text panels grow or scroll without compressing Ghana. */
.control-panel label, .control-panel legend, .district-tools label,
.safety-controls label, .assessment-section label { font-size: .875rem; line-height: 1.5; }
.control-panel select, .control-panel input[type="search"], .district-tools input,
.district-tools select { min-height: 44px; font-size: .9rem; }
.control-panel .check, .control-panel .weight-label output { font-size: .85rem; }
.control-panel input[type="range"] { min-height: 28px; }
.control-panel .text-button { font-size: .85rem; }
.layer-description, .control-note, .safety-map-card .map-help,
.map-help, .map-toolbar small, .map-toolbar>span,
.safety-map-card .map-toolbar small, .safety-map-card .map-toolbar>span { font-size: .8rem; line-height: 1.5; }
.map-toolbar strong, .safety-map-card .map-toolbar strong { font-size: .9rem; line-height: 1.4; }
.map-toolbar>span { flex-shrink: 1; }
.legend { font-size: .75rem; line-height: 1.45; }
.map-help { flex-wrap: wrap; }
.map-help>span { flex-basis: 200px; }
.map-help output { flex: 1 1 150px; width: auto; max-width: 100%; font-size: .8rem; }
.detail-panel p, .district-profile p, .detail-empty-steps span { font-size: .9rem; line-height: 1.6; }
.score-disc { flex: 0 0 94px; min-height: 94px; }
.detail-empty-steps b, .mini-bar, .kv, .passport-kv, .evidence-mini-bar { font-size: .8rem; line-height: 1.5; }
.active-layer-readout span, .active-layer-readout small, .score-label { font-size: .8rem!important; }
.search-results button { min-height: 44px; font-size: .85rem; }
.passport-head { flex-wrap: wrap; }
.passport-head p, .status-explanation, .field-note, .source-citation,
.assessment-chart-card>p, .assessment-status>p { font-size: .875rem; line-height: 1.6; }
.status-chip, .badge, .data-tag { font-size: .75rem; line-height: 1.4; }
.active-evidence span, .active-evidence small { font-size: .8rem; line-height: 1.5; }
.passport-actions .button, .scenario-actions .button { font-size: .85rem; }
.catalogue-summary p, .coverage-numbers span, .v3-evidence-strip p { font-size: .85rem; line-height: 1.6; }
.v3-evidence-strip strong { font-size: .95rem; }
.v3-capability-band article>span, .assessment-section>span,
.claim-grid span, .evidence-row.head { font-size: .75rem; }
.evidence-row { font-size: .875rem; line-height: 1.6; }
.workspace-jumps { flex-wrap: wrap; }
.workspace-jumps a { min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* Tabular evidence stays readable and scrolls within its own region. */
.table-wrap table, .chemistry-table, .method-article .chemistry-table,
.method-table, .panel-table, .admin-table :is(th,td) { font-size: .875rem; line-height: 1.55; }
.table-wrap table { min-width: 720px; }
.chemistry-table thead th, .method-table th, .panel-table thead th,
.admin-table th { font-size: .8rem; letter-spacing: .02em; }
.chemistry-table small, .panel-table th small { font-size: .8rem; line-height: 1.5; }
:is(.method-table-wrap,.panel-table-wrap,.results-table-wrap,.table-wrap,.admin-table-wrap) {
  max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.panel-table input { min-height: 44px!important; }
.assessment-section input, .assessment-section select { font-size: 1rem!important; }
.assessment-options, .assessment-options label, .co-location,
.assessment-chart-card>label, .assessment-chart details, .inventory-row { font-size: .875rem; line-height: 1.5; }
.result-grid span, .result-grid small { font-size: .75rem; line-height: 1.5; }
.result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.chart-head>span { font-size: .8rem; line-height: 1.5; }
.scenario-plot { min-width: 520px; }
.scenario-plot text { font-size: 14px; }
.plot-line { stroke: #007c50; }
html[data-theme="dark"] .plot-line { stroke: #65d69b; }
.assessment-chart { overflow-x: auto; }
.assessment-section label small { float: none; display: block; }
.form-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }

/* Documentation: comfortable supporting text, not miniature diagram annotations. */
.science-meta span, .doc-rail a b, .architecture-node b, .equation-card header span,
.scope-matrix span, .guide-route-grid span, .guide-workflow b,
.guide-screen small, .guide-assessment-flow small { font-size: .75rem; line-height: 1.5; }
.science-meta strong, .doc-rail a { font-size: .85rem; }
.doc-rail p, .method-architecture figcaption, .guide-figure figcaption,
.method-article figcaption, .architecture-node small, .srr-node small { font-size: .85rem; line-height: 1.6; }
.architecture-track { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.architecture-node:nth-child(3)::after { display: none; }
.architecture-node strong { font-size: .9rem; }
.method-note>span { width: 30px; height: 30px; font-size: .75rem; color: #021925; }
.method-note.caution>span { color: #fff; }
.method-note { grid-template-columns: 30px minmax(0,1fr); }
.method-note strong, .equation-card header strong, .parameter-grid strong,
.scope-matrix strong, .decision-gates strong, .guide-route-grid strong,
.guide-workflow strong { font-size: .95rem; line-height: 1.45; }
.method-note p, .parameter-grid p, .scope-matrix p, .decision-gates p,
.guide-screen p, .guide-checklist li, .guide-workflow small, .guide-route-grid small,
.term-grid dd, .equation-card p, .equation-card dd { font-size: .875rem; line-height: 1.6; }
.parameter-grid b, .decision-gates b { font-size: .8rem; }
.method-section ul, .method-section ol, .guide-copy p, .guide-copy li { font-size: 1rem; line-height: 1.7; }
.equation-card header { flex-wrap: wrap; gap: .3rem .75rem; }
.equation-card dl { grid-template-columns: minmax(50px,max-content) minmax(0,1fr); }
.equation-card dt { font-size: .875rem; }
.math-block { font-size: 1rem; }
.math-block .katex-display { margin-block: .4em; width: max-content; min-width: 100%; }
.guide-route-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.guide-workflow { grid-template-columns: 1fr; gap: .75rem; }
.guide-workflow article { display: grid; grid-template-columns: 30px minmax(150px,.7fr) minmax(0,1fr); gap: .75rem; align-items: start; }
.guide-workflow strong { margin: 0; }
.guide-workflow article:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -.8rem; transform: translateX(50%); }
.guide-assessment-flow>span { color: var(--inverse-accent); }
.ui-passport strong, .mini-result strong { font-size: .75rem; }
.access-path span { font-size: .75rem; }
.scope-matrix .measured span { color: #845300; }
.scope-matrix .excluded span { color: #a23f34; }
html[data-theme="dark"] .scope-matrix .measured span { color: #f4cf80; }
html[data-theme="dark"] .scope-matrix .excluded span { color: #ffb6a8; }

/* Institutional and access pages share the same readable supporting scale. */
.gate-list b, .gate-list small, .mrv-purpose article>span,
.workstreams b, .access-principles b, .access-process b { font-size: .75rem; }
.gate-list p, .mrv-purpose p, .mrv-planner>p, .mrv-planner label,
.planner-summary span, .claim-grid p, .principles p, .contact-card p,
.contact-card a, .contact-card strong, .contact-lines span,
.workstreams span, .access-form label, .access-switch, .form-status,
.access-confirmation p, .access-confirmation small, .access-session-note,
.access-assurance, .privacy-note, .access-process span, .access-principles span,
.admin-summary span, .admin-detail dt, .admin-detail dd { font-size: .875rem; line-height: 1.6; }
.contact-card a { min-height: 44px; }
.access-form .check { font-size: .875rem; }
.confirmation-mark { color: #021925; }
.session-banner strong, .session-banner span, .session-banner button { font-size: .8rem; line-height: 1.5; }
.form-status.error { color: #a12f24; }
.form-status.success, .access-confirmation strong { color: #00713d; }
html[data-theme="dark"] .form-status.error { color: #ffb6a8; }
html[data-theme="dark"] .form-status.success,
html[data-theme="dark"] .access-confirmation strong { color: #8ae5b5; }
html[data-theme="dark"] .access-confirmation { background: #103b31; }
html[data-theme="dark"] .session-banner button { color: #8ae5b5; }
html[data-theme="dark"] .danger-button { color: #ffb6a8!important; border-color: #d98c7d!important; }
.admin-login h1, .review-card h1 { font-size: clamp(1.65rem,4vw,2.1rem); line-height: 1.25; }
.admin-login p, .review-card p { font-size: 1rem; line-height: 1.7; }
.admin-brand small { font-size: .8rem; }

@media(min-width:1101px) {
  .explorer-grid { grid-template-columns: minmax(230px,.8fr) minmax(0,1.6fr) minmax(270px,1fr); }
  .explorer-grid>.card { height: 800px; min-height: 620px; max-height: max(680px,calc(100svh - 160px)); }
  .explorer-grid>.control-panel, .explorer-grid>.detail-panel { overflow-y: auto; overscroll-behavior-y: contain; }
  .explorer-grid>.map-card { display: flex; flex-direction: column; }
  .explorer-grid .map-frame { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
  .explorer-grid .map-frame canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .explorer-grid .map-toolbar, .explorer-grid .map-help { flex: 0 0 auto; }
}
@media(max-width:1100px) and (min-width:901px) {
  .explorer-grid { grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr); }
  .explorer-grid .detail-panel { grid-column: 1/-1; position: static; }
}
@media(max-width:1000px) {
  .brand-descriptor { display: none; }
  .brand { min-width: 0; }
  .science-meta { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .scope-matrix, .decision-gates { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .equation-card { grid-template-columns: 1fr; }
}
@media(max-width:820px) {
  .doc-rail a { font-size: .875rem; }
  .doc-rail nav { scroll-padding-inline: .5rem; }
  .guide-workflow article { grid-template-columns: 28px minmax(0,1fr); }
  .guide-workflow small { grid-column: 2; }
}
@media(max-width:760px) {
  :is(input,select,textarea):not([type="range"]):not([type="checkbox"]):not([type="radio"]) { font-size: 1rem!important; }
  .shell { width: calc(100% - 32px); }
  .topbar { gap: .55rem; }
  .menu { min-height: 44px; }
  .theme-toggle { padding-inline: .65rem; }
  .page-head h1, .view[data-view="safety"] .page-head h1,
  .view[data-view="assessment"] .page-head h1 { font-size: clamp(1.8rem,6.5vw,2.35rem); }
  .map-help { display: grid; grid-template-columns: minmax(0,1fr); }
  .map-help output { max-width: none; width: 100%; }
  .map-toolbar { flex-wrap: wrap; gap: .35rem; }
  .map-toolbar>span { max-width: none; text-align: left; }
  .workspace-jumps a { font-size: .85rem; }
  .guide-workflow article { display: block; }
  .guide-workflow strong { margin-block: .3rem; }
  .access-path { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
  .access-path span:nth-child(2)::after { display: none; }
  .footer-grid p { text-align: left; }
}
@media(max-width:600px) {
  .architecture-track, .scope-matrix, .decision-gates, .guide-route-grid { grid-template-columns: minmax(0,1fr); }
  .architecture-node:nth-child(3)::after { display: grid; }
  .science-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .science-meta div:last-child { grid-column: 1/-1; }
  .coverage-numbers { grid-template-columns: 1fr; }
  .coverage-numbers article { display: flex; align-items: baseline; gap: .75rem; border-left: 0; border-top: 1px solid var(--line); padding-block: .6rem; }
  .coverage-numbers strong { font-size: 1.6rem; min-width: 3ch; }
  .workstreams { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .form-pair { grid-template-columns: 1fr; }
  .assessment-section { padding: 1rem; }
  .assessment-section label { font-size: .875rem; }
  .inventory-row { grid-template-columns: 38px minmax(0,1fr) 65px; }
}
@media(max-width:390px) {
  .shell { width: calc(100% - 24px); }
  .topbar { padding-inline: max(10px,env(safe-area-inset-left)); gap: .4rem; }
  .brand>.brand-wordmark { font-size: 1.08rem; }
  .theme-toggle { font-size: .75rem; }
  .menu { font-size: .8rem; padding-inline: .6rem; }
  .result-grid { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none!important; animation: none!important; }
}
@media print {
  .explorer-grid>.card, .safety-grid>.card { height: auto; max-height: none; overflow: visible; }
  .scenario-plot { min-width: 0; }
}

/* One coverage strip; detailed reference findings belong in the Explorer. */
.platform-coverage { grid-template-columns: repeat(3,minmax(0,1fr)); }
.platform-coverage article { display: grid; gap: .25rem; padding: 1.25rem 1.5rem; }
.platform-coverage strong { font-size: clamp(1.6rem,2.5vw,2rem); line-height: 1.25; font-variant-numeric: tabular-nums; }
.platform-coverage span { font-size: .9rem; line-height: 1.5; }
.platform-coverage article:last-child { grid-column: auto; }
.reference-summary { margin-top: 1rem; padding: .25rem 1rem; box-shadow: none; }
.reference-summary>summary { min-height: 44px; cursor: pointer; color: var(--ink); font-size: .9rem; font-weight: 650; line-height: 1.5; padding-block: .6rem; }
.reference-summary>summary>span { color: var(--muted); font-size: .8rem; font-weight: 400; margin-left: .6rem; white-space: nowrap; }
.reference-summary-content { padding-block: .75rem; border-top: 1px solid var(--line); }
.reference-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.reference-summary-grid article { padding-right: 1rem; border-right: 1px solid var(--line); }
.reference-summary-grid article:last-child { border: 0; }
.reference-summary-grid strong, .reference-summary-grid span { display: block; }
.reference-summary-grid strong { color: var(--ink); font-size: 1.5rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.reference-summary-grid span, .reference-summary-content p { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.reference-summary-content p { margin: 1rem 0 .25rem; max-width: 1000px; }
.reference-summary-content a { color: var(--green-text); text-underline-offset: .2em; }
@media(max-width:600px) {
  .platform-coverage { grid-template-columns: minmax(0,1fr); }
  .platform-coverage article { grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: .75rem; padding: 1rem 1.1rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .platform-coverage article:last-child { border-bottom: 0; }
  .platform-coverage strong { font-size: 1.75rem; }
  .reference-summary-grid { grid-template-columns: minmax(0,1fr); }
  .reference-summary-grid article { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 .75rem; }
  .reference-summary>summary>span { display: block; margin-left: 0; }
}

/* Compact application footer; institutional detail remains on About. */
.site-footer { background: #f2f6f4; padding: 1.3rem 0 max(1.3rem,env(safe-area-inset-bottom)); }
html[data-theme="dark"] .site-footer { background: #041e38; }
.site-footer .footer-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr); gap: 1.5rem; align-items: center; }
.site-footer .footer-home { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
.site-footer .footer-wordmark { margin: 0; }
.site-footer .footer-identity p { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; text-align: left; }
.site-footer .footer-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1rem; }
.site-footer .footer-links a { display: flex; align-items: center; min-height: 44px; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.site-footer .footer-links a:hover { color: var(--green-text); text-decoration: underline; text-underline-offset: .2em; }
.site-footer .footer-release p { margin: 0; font-size: .75rem; line-height: 1.7; color: var(--muted); text-align: right; }
.site-footer .footer-release p:first-child { color: var(--ink); font-weight: 600; }
@media(max-width:900px) {
  .site-footer .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem 1.5rem; }
  .site-footer .footer-release { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
  .site-footer .footer-release p { text-align: left; }
}
@media(max-width:600px) {
  .site-footer .footer-grid { grid-template-columns: minmax(0,1fr); gap: .8rem; }
  .site-footer .footer-links { column-gap: 1.25rem; }
  .site-footer .footer-release { grid-column: auto; display: block; }
}
@media print {
  .site-footer .footer-links { display: none; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
