/* ═══════════════════════════════════════════════════════════════
   APMD Brief Design System — 3. SCREEN
   On-screen surface: desktop browser + mobile. Never affects print.
   Imports tokens.css + base.css. Scoped with @media screen so its
   rules cannot leak into the print stylesheet. All px font-sizes,
   the A4 page container, floats, and the mobile breakpoint live here.
   ═══════════════════════════════════════════════════════════════ */

@media screen {
  /* ── Type scale (px) ──────────────────────────────────────── */
  :root {
    --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-lg: 16px;
    --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-display: 36px;
    --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5;
    --tracking-tight: -0.01em; --tracking-wide: 0.04em; --tracking-wider: 0.08em;
  }

  html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; }
  body { background: var(--bg-canvas); line-height: var(--lh-normal); }
  p   { font-size: var(--fs-base); margin-bottom: var(--space-3); line-height: var(--lh-normal); }
  li  { font-size: var(--fs-base); line-height: var(--lh-normal); margin-bottom: var(--space-1); }

  /* ── Page container (centred A4 sheet on ivory canvas) ────── */
  .page {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 2rem auto;
    background: var(--bg-surface);
    box-shadow: var(--shadow-page);
  }

  /* ── Cover ────────────────────────────────────────────────── */
  .cover-top-strip { height: 3px; }
  .cover-top-bar { display: flex; justify-content: space-between; align-items: flex-start; padding: 14mm 18mm 8mm; gap: var(--space-4); }
  .org-block .org-pillar { font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); margin-bottom: 2px; }
  .org-block .org-name { font-size: 13px; letter-spacing: var(--tracking-wide); }
  .logo-area img { height: 40px; }
  .cover-body { padding: 8mm 18mm 0; }
  .cover-series-label { font-size: var(--fs-xs); letter-spacing: 0.12em; margin-bottom: var(--space-5); }
  .cover-country { font-size: var(--fs-display); margin-bottom: var(--space-3); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
  .cover-title { font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-5); }
  .cover-gold-rule { width: 56px; height: 3px; margin-bottom: var(--space-6); }
  .cover-meta { font-size: var(--fs-base); margin-bottom: 12mm; }
  .cover-bottom-bar { padding: var(--space-6) 18mm; }
  .cover-bottom-bar p { font-size: var(--fs-xs); line-height: var(--lh-normal); }

  /* ── Content area ─────────────────────────────────────────── */
  .content { padding: 0 18mm var(--space-8); }

  /* ── Key messages ─────────────────────────────────────────── */
  .key-messages { margin: var(--space-8) 0 var(--space-6); page-break-inside: avoid; }
  .km-header { padding: var(--space-2) var(--space-5); }
  .km-header-text { font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); }
  .km-body { padding: var(--space-4) var(--space-5) var(--space-2); }
  .km-body li { padding: var(--space-2) 0 var(--space-2) var(--space-8); font-size: var(--fs-base); line-height: var(--lh-normal); }
  .km-body li::before { top: 10px; font-size: var(--fs-sm); }

  /* ── Section / subsection ─────────────────────────────────── */
  .section { margin: var(--space-8) 0; }
  .section-head { margin-bottom: var(--space-4); }
  .section-number { font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); margin-bottom: var(--space-1); }
  .section-title { font-size: var(--fs-xl); line-height: var(--lh-snug); margin-bottom: var(--space-2); }
  .section-rule { height: 2px; }
  .subsection { margin: var(--space-5) 0; }
  .subsection-title { font-size: var(--fs-lg); padding-left: var(--space-3); margin-bottom: var(--space-2); line-height: var(--lh-snug); }

  /* ── Stat box (float right on desktop) ────────────────────── */
  .stat-box {
    float: right;
    clear: right;
    width: 44mm;
    margin: 0 0 var(--space-5) var(--space-6);
    padding: var(--space-3);
    text-align: center;
    page-break-inside: avoid;
  }
  .stat-label { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); }
  .stat-value { font-size: var(--fs-3xl); line-height: var(--lh-tight); margin-bottom: var(--space-1); }
  .stat-unit { font-size: var(--fs-sm); margin-bottom: var(--space-2); }
  .stat-desc { font-size: var(--fs-xs); line-height: var(--lh-normal); margin-bottom: var(--space-2); }
  .stat-source { font-size: var(--fs-xs); padding-top: var(--space-2); }

  /* ── Tables ───────────────────────────────────────────────── */
  .table-wrap { margin: var(--space-4) 0 var(--space-5); page-break-inside: avoid; overflow-x: auto; }
  .table-wrap.allow-break { page-break-inside: auto; }
  .table-wrap.allow-break tbody tr { page-break-inside: avoid; }
  .table-caption { font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); }
  table { width: 100%; font-size: var(--fs-sm); }
  thead th { font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); padding: var(--space-2) var(--space-3); }
  tbody td { padding: var(--space-2) var(--space-3); line-height: var(--lh-normal); }
  .num { font-size: var(--fs-xs); }
  tfoot td { font-size: var(--fs-xs); padding: var(--space-2) var(--space-3); }

  /* ── Callout ──────────────────────────────────────────────── */
  .callout { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8); page-break-inside: avoid; }
  .callout-label { font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); margin-bottom: var(--space-2); }
  .callout p { font-size: var(--fs-base); }

  /* ── Figure (standardized chart block) ────────────────────── */
  .brief-figure { clear: both; margin: var(--space-5) 0; padding: var(--space-3) var(--space-3) var(--space-2); page-break-inside: avoid; }
  .brief-figure img { width: 100%; }
  .brief-figcaption { margin-top: var(--space-3); padding-top: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-normal); }
  .brief-figcaption .fig-label { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); margin-right: var(--space-1); }
  .brief-figcaption .fig-source { font-size: var(--fs-xs); display: block; margin-top: 2px; }

  /* ── APMD tags ────────────────────────────────────────────── */
  .apmd-calc, .apmd-est { font-size: var(--fs-xs); padding: 1px var(--space-2); margin-left: var(--space-1); letter-spacing: var(--tracking-wide); }

  /* ── Gap tags ─────────────────────────────────────────────── */
  .gap-tag { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); padding: 1px var(--space-2); }

  /* ── Policy list ──────────────────────────────────────────── */
  .policy-list { margin: var(--space-3) 0; }
  .policy-list li { gap: var(--space-4); margin-bottom: var(--space-4); page-break-inside: avoid; font-size: var(--fs-base); }
  .policy-num { width: 8mm; height: 8mm; font-size: var(--fs-sm); margin-top: 1px; }
  .policy-text { line-height: var(--lh-normal); }

  /* ── References ───────────────────────────────────────────── */
  .ref-list li { padding-left: var(--space-6); margin-bottom: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-normal); }
  .ref-list li::before { font-size: var(--fs-xs); }

  /* ── Page footer ──────────────────────────────────────────── */
  .page-footer { margin: var(--space-8) 0 0; padding: var(--space-3) 0; }
  .footer-brand { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); }
  .footer-date { font-size: var(--fs-xs); }

  /* ── Design note ──────────────────────────────────────────── */
  .design-note { padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; font-size: var(--fs-sm); line-height: var(--lh-normal); }

  /* ── Mobile (≤ 640px) — inside @media screen so it never touches print ── */
  @media (max-width: 640px) {
    body { font-size: 13px; }
    .page { width: 100%; min-height: auto; margin: 0; box-shadow: none; border-radius: 0; }
    .cover-top-bar { padding: 6mm 6mm 4mm; flex-direction: column; gap: var(--space-3); }
    .logo-area img { height: 32px; }
    .cover-body { padding: 4mm 6mm 0; }
    .cover-country { font-size: 26px; }
    .cover-title { font-size: var(--fs-lg); }
    .cover-meta { margin-bottom: 6mm; }
    .cover-bottom-bar { padding: var(--space-4) 6mm; }
    .content { padding: 0 6mm var(--space-6); }
    .key-messages { margin: var(--space-6) 0 var(--space-4); }
    .section { margin: var(--space-6) 0; }
    .section-title { font-size: 18px; }
    .subsection-title { font-size: 15px; }
    /* Stat boxes stack full-width with a left gold border */
    .stat-box {
      float: none; width: 100%; margin: 0 0 var(--space-4) 0;
      border-top: none; border-left: 3px solid var(--au-gold);
      text-align: left; padding: var(--space-3) var(--space-4);
    }
    .stat-label, .stat-desc, .stat-source { text-align: left; }
    .stat-value { font-size: var(--fs-2xl); text-align: left; }
    .stat-unit { text-align: left; }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { font-size: var(--fs-xs); min-width: 480px; }
    .callout { padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
    .brief-figure { padding: var(--space-2); margin: var(--space-4) 0; }
    .policy-list li { gap: var(--space-3); }
    .policy-num { width: 6mm; height: 6mm; font-size: var(--fs-xs); }
    .page-footer { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .design-note { display: none; }
  }
}