/* ═══════════════════════════════════════════════════════════════
   APMD Brief Design System — 2. BASE
   Structural component rules shared by every surface.
   Imports tokens.css. Declares NO @media, NO floats, NO font-sizes,
   NO page widths — those belong to the surface layers (screen.css,
   print.css). This keeps base.css surface-safe: it cannot silently
   corrupt either surface.
   ═══════════════════════════════════════════════════════════════ */

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

/* ── Document base (surface-agnostic) ───────────────────────── */
body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p   { text-align: justify; color: var(--fg-secondary); }
ul  { padding-left: var(--space-5); }
li  { color: var(--fg-secondary); }
em  { font-style: italic; }
strong { font-weight: var(--fw-bold, 700); color: var(--fg-primary); }

/* Component font weights/colours live here; sizes live in surfaces. */

/* ── COVER ──────────────────────────────────────────────────── */
.cover { background: var(--au-green-dark); color: var(--fg-on-dark); position: relative; }
.cover-top-strip { background: var(--grad-accent-bar); }

.org-block .org-pillar {
  text-transform: uppercase;
  color: var(--au-gold);
  font-weight: var(--fw-semibold, 600);
}
.org-block .org-name {
  color: var(--fg-on-dark);
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
}

.logo-area { display: flex; align-items: center; gap: var(--space-3); }
.logo-area img { width: auto; display: block; }

.cover-series-label { text-transform: uppercase; color: var(--au-gold); font-weight: var(--fw-semibold, 600); }
.cover-country { font-family: var(--font-display); font-weight: var(--fw-bold, 700); text-transform: uppercase; color: var(--au-gold); }
.cover-title { font-family: var(--font-display); font-weight: var(--fw-bold, 700); color: var(--fg-on-dark); }
.cover-gold-rule { background: var(--au-gold-soft); }
.cover-meta { color: var(--fg-on-dark-soft); }

.cover-bottom-bar { border-top: 3px solid var(--au-gold); background: rgba(0,0,0,0.2); }
.cover-bottom-bar p { color: rgba(255,255,255,0.55); font-style: italic; text-align: left; margin: 0; }

/* ── KEY MESSAGES ───────────────────────────────────────────── */
.key-messages {
  border: 1.5px solid var(--au-gold);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.km-header { background: var(--au-gold); }
.km-header-text {
  text-transform: uppercase;
  color: var(--au-green-dark);
  font-weight: var(--fw-bold, 700);
}
.km-body { background: var(--au-gold-pale); }
.km-body ul { list-style: none; padding: 0; margin: 0; }
.km-body li { position: relative; border-bottom: 1px solid rgba(180,162,105,0.25); color: var(--fg-primary); }
.km-body li:last-child { border-bottom: none; }
.km-body li::before { content: '▸'; position: absolute; left: 0; color: var(--au-gold); }

/* ── SECTION / SUBSECTION HEADINGS ──────────────────────────── */
.section-number { text-transform: uppercase; color: var(--au-gold); font-weight: var(--fw-bold, 700); }
.section-title { font-family: var(--font-display); font-weight: var(--fw-bold, 700); color: var(--au-green-dark); }
.section-rule { background: var(--grad-accent-bar); border-radius: 1px; }

.subsection-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold, 600);
  color: var(--au-green);
  border-left: 3px solid var(--au-gold);
}

/* ── STAT BOX (colour/structure only; float + width in surfaces) ─ */
.stat-box {
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--au-gold);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
}
.stat-label { text-transform: uppercase; color: var(--fg-tertiary); font-weight: var(--fw-semibold, 600); }
.stat-value { font-family: var(--font-display); font-weight: var(--fw-bold, 700); color: var(--au-green); }
.stat-unit { color: var(--au-green-mid); font-weight: var(--fw-semibold, 600); }
.stat-desc { color: var(--fg-secondary); text-align: center; }
.stat-source { font-family: var(--font-mono); color: var(--fg-tertiary); border-top: 1px solid var(--border-subtle); }

/* ── CLEARFIX ───────────────────────────────────────────────── */
.cf::after { content: ''; display: block; clear: both; }

/* ── TABLES ─────────────────────────────────────────────────── */
.table-caption {
  font-weight: var(--fw-bold, 700);
  color: var(--au-green-dark);
  text-transform: uppercase;
}
table { border-collapse: collapse; font-family: var(--font-sans); }
thead tr { background: var(--au-green); color: var(--fg-on-dark); }
thead th { font-weight: var(--fw-bold, 700); text-align: left; border: none; text-transform: uppercase; }
tbody tr:nth-child(even)  { background: var(--bg-subtle); }
tbody tr:nth-child(odd)   { background: var(--bg-surface); }
tbody td { border-bottom: 1px solid var(--border-default); vertical-align: top; color: var(--fg-secondary); }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
tfoot td { color: var(--fg-tertiary); font-style: italic; border-top: 1px solid var(--border-strong); }

/* ── CALLOUT ────────────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--au-green);
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.callout-label { text-transform: uppercase; color: var(--au-green); font-weight: var(--fw-bold, 700); }
.callout p { margin: 0; text-align: left; color: var(--fg-primary); }

/* ── FIGURE (standardized chart block) ──────────────────────── */
/* Colour/structure only. Margins, padding, caption font-sizes, the
   full-column width and float-clearing, and any @media live in the
   surface layers (screen.css / print.css) — base.css stays surface-safe.
   The embedded SVG/PNG scales fluidly and never overflows its column. */
.brief-figure {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--au-green);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  break-inside: avoid;
  page-break-inside: avoid;
}
.brief-figure img,
.brief-figure svg { display: block; max-width: 100%; height: auto; }
.brief-figcaption { color: var(--fg-secondary); border-top: 1px solid var(--border-default); text-align: left; }
.brief-figcaption .fig-label {
  text-transform: uppercase;
  color: var(--au-green);
  font-weight: var(--fw-bold, 700);
}
.brief-figcaption .fig-source { color: var(--fg-tertiary); font-style: italic; }

/* ── APMD PROVENANCE TAGS ───────────────────────────────────── */
.apmd-calc {
  background: rgba(52,143,65,0.12);
  color: var(--au-green-mid);
  border: 1px solid var(--au-green-light);
  border-radius: var(--radius-pill);
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
}
.apmd-est {
  background: rgba(224,138,26,0.12);
  color: var(--au-gold);
  border: 1px solid var(--au-gold);
  border-radius: var(--radius-pill);
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
}

/* ── DATA GAP SEVERITY TAGS ─────────────────────────────────── */
.gap-tag {
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  display: inline-block;
  white-space: nowrap;
}
.gap-critical { background: rgba(159,34,65,0.12);  color: var(--au-maroon);    border: 1px solid var(--au-maroon); }
.gap-major    { background: rgba(224,138,26,0.12); color: var(--au-gold);      border: 1px solid var(--au-gold); }
.gap-moderate { background: rgba(180,162,105,0.18); color: #6B5523;            border: 1px solid var(--au-gold-soft); }

/* ── POLICY LIST ────────────────────────────────────────────── */
.policy-list { list-style: none; padding: 0; }
.policy-list li { display: flex; color: var(--fg-secondary); }
.policy-num {
  background: var(--au-green);
  color: var(--fg-on-dark);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold, 700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.policy-text strong { color: var(--au-green-dark); }

/* ── REFERENCES LIST ────────────────────────────────────────── */
.ref-list { list-style: none; padding: 0; counter-reset: refs; }
.ref-list li { counter-increment: refs; position: relative; color: var(--fg-secondary); }
.ref-list li::before {
  content: counter(refs) '.';
  position: absolute;
  left: 0;
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
}

/* ── PAGE FOOTER ────────────────────────────────────────────── */
.page-footer {
  border-top: 2px solid var(--au-green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer-brand { color: var(--fg-tertiary); text-transform: uppercase; }
.footer-date { color: var(--au-green); font-weight: var(--fw-bold, 700); }

/* ── DESIGN-NOTE BLOCKS (editor only; hidden in print + mobile) ─ */
.design-note {
  background: #FFF8E1;
  border: 1px dashed var(--au-gold);
  border-radius: var(--radius-md);
  color: #5D4A0F;
  font-style: italic;
}
.design-note strong { color: #3D2F00; font-style: normal; }

/* Running-header source (print only — string-set picked up by @page) */
.running-brand { string-set: brand attr(data-brand); }

/* ── RTL (Arabic, -AR slots) ────────────────────────────────────
   Minimal RTL support (AR programme phase 1, 2026-09-14). Active
   ONLY when the surface sets dir="rtl" on <html> (builder does this
   for ISO-AR slots); LTR surfaces (EN/FR) are untouched.

   Mirrors:
     - structural left accents → right (subsection-title, callout)
     - positional ::before markers → right (key-message bullets,
       reference numbering)
     - left-padded lists → right-padded
     - left-aligned text defaults → right
     - italic cover footer → upright (synthetic italics distort the
       naskh letterforms)
     - letter-spacing on display text → 0 (spacing breaks Arabic
       cursive joining)

   Font: Arabic faces are loaded in fonts.css (Google Fonts); the
   display faces (.cover-country/.cover-title/.section-title/…)
   switch to the Arabic stack too — Calibri/Carlito carry no Arabic
   glyphs. Latin structural labels (section-number, stat-label,
   org-pillar…) deliberately stay on the LTR Latin stack per the
   "structure in English" convention used by the FR bodies. */
[dir="rtl"] body,
[dir="rtl"] .cover-country,
[dir="rtl"] .cover-title,
[dir="rtl"] .section-title,
[dir="rtl"] .stat-value {
  font-family: 'Noto Naskh Arabic', 'Amiri', serif;
}
[dir="rtl"] .cover-country,
[dir="rtl"] .cover-title { letter-spacing: 0; }
[dir="rtl"] .cover-bottom-bar p { text-align: right; font-style: normal; }
[dir="rtl"] p { text-align: right; }
[dir="rtl"] .brief-figcaption { text-align: right; }
[dir="rtl"] thead th { text-align: right; }
[dir="rtl"] .num { text-align: left; }
[dir="rtl"] .callout p { text-align: right; }
[dir="rtl"] .stat-desc { text-align: center; }
[dir="rtl"] ul { padding-left: 0; padding-right: var(--space-5); }
[dir="rtl"] .policy-list { padding-right: 0; }
[dir="rtl"] .km-body { padding-right: var(--space-5); padding-left: var(--space-5); }
[dir="rtl"] .km-body li { padding-right: var(--space-8); padding-left: 0; }
[dir="rtl"] .km-body li::before { left: auto; right: 0; }
[dir="rtl"] .ref-list li { padding-right: var(--space-5); }
[dir="rtl"] .ref-list li::before { left: auto; right: 0; }
[dir="rtl"] .subsection-title {
  border-left: none;
  border-right: 3px solid var(--au-gold);
  padding-right: var(--space-3);
  padding-left: 0;
}
[dir="rtl"] .callout {
  border-left: none;
  border-right: 3px solid var(--au-green);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}