/* ════════════════════════════════════════════════════════════════════════
   PGS SHIELD — the report document
   ════════════════════════════════════════════════════════════════════════

   Lifted from the approved report design and scoped to .pgs-report.

   WHY IT IS SCOPED. The design is a whole PAGE: it sets :root variables, a
   body background, and bare `p` / `section` / `strong` / `*` rules, because a
   report is a document that gets printed, filed and handed to an insurer.
   SHIELD is a dark product for a control room. Unscoped, those bare element
   rules would restyle every paragraph in the application.

   Every selector is prefixed; :root, body and html collapse into .pgs-report
   itself. @keyframes bodies are left alone — those are percentages, not
   selectors — and @media/@supports are recursed into.

   The ground is deliberately NOT the app's: paper is a cool blue-grey, the
   same slate the app's text sits on, inverted. Type and accent ARE the app's
   — Bebas Neue, Barlow, Barlow Condensed, JetBrains Mono, amber on navy.

   js/pages/report-doc.js emits this markup for BOTH kinds of report, so one a
   client pulled for themselves and one PGS issued are the same document with
   different content in it.
   ════════════════════════════════════════════════════════════════════════ */

/* ── PGS SHIELD monthly report ──────────────────────────────────────────
     Type and accent come from the application's own stylesheet: Bebas Neue,
     Barlow, Barlow Condensed, JetBrains Mono; --amber #F5A800 over
     --panel #111E2E. The GROUND is deliberately not the app's: SHIELD is a
     dark product for a control room, and this is a document that gets
     printed, filed, and handed to an insurer. Paper is a cool blue-grey
     rather than a neutral — the same slate the app's text sits on, inverted. */
  .pgs-report {
    --paper:    #F5F8FA;
    --card:     #FFFFFF;
    --ink:      #0E1621;
    --ink-2:    #46586C;
    --ink-3:    #77879A;
    --rule:     #DCE4EC;
    --rule-2:   #EDF2F6;
    --navy:     #111E2E;
    --amber:    #F5A800;
    --amber-ink:#8A5F03;
    --amber-wash:#FDF3DC;

    /* Semantic, and kept away from the amber so severity never reads as brand. */
    --sev-high: #B4342A;
    --sev-med:  #9A6A15;
    --open:     #3F6294;
    --closed:   #1C7355;
    --wash-high:#FBEBE9;
    --wash-med: #FBF2DF;
    --wash-open:#EAF0F8;
    --wash-ok:  #E4F2ED;

    --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --cond:    'Barlow Condensed', 'Arial Narrow', sans-serif;
    --body:    'Barlow', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  }

  @media (prefers-color-scheme: dark) {
    .pgs-report:not([data-theme="light"]) {
      --paper:    #0B121B;
      --card:     #111C28;
      --ink:      #E4EDF5;
      --ink-2:    #A6B8CA;
      --ink-3:    #7A8DA1;
      --rule:     #24374C;
      --rule-2:   #1A2836;
      --navy:     #16273A;
      --amber-ink:#F2B830;
      --amber-wash:#33280E;
      --sev-high: #E8776B;
      --sev-med:  #D9A63F;
      --open:     #7FA3D6;
      --closed:   #5FC3A0;
      --wash-high:#331C1A;
      --wash-med: #322913;
      --wash-open:#1A2739;
      --wash-ok:  #14302A;
    }
  }

  .pgs-report[data-theme="dark"] {
    --paper:    #0B121B;
    --card:     #111C28;
    --ink:      #E4EDF5;
    --ink-2:    #A6B8CA;
    --ink-3:    #7A8DA1;
    --rule:     #24374C;
    --rule-2:   #1A2836;
    --navy:     #16273A;
    --amber-ink:#F2B830;
    --amber-wash:#33280E;
    --sev-high: #E8776B;
    --sev-med:  #D9A63F;
    --open:     #7FA3D6;
    --closed:   #5FC3A0;
    --wash-high:#331C1A;
    --wash-med: #322913;
    --wash-open:#1A2739;
    --wash-ok:  #14302A;
  }

  .pgs-report * { box-sizing: border-box; }

  .pgs-report {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15.5px;
    line-height: 1.62;
    margin: 0;
    -webkit-font-smoothing: antialiased;
  }

  .pgs-report .sheet {
    max-width: 900px;
    margin: 0 auto 80px;
    background: var(--card);
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }
  .pgs-report .pad { padding: 0 44px; }

  /* ── Masthead ─────────────────────────────────────────────────────────── */
  .pgs-report .masthead {
    background: var(--navy);
    color: #E7EFF7;
    padding: 34px 44px 28px;
    border-bottom: 3px solid var(--amber);
  }
  .pgs-report .masthead .row1 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
  }
  .pgs-report .wordmark {
    font-family: var(--display);
    font-size: 27px;
    letter-spacing: 3px;
    color: var(--amber);
    line-height: 1;
  }
  .pgs-report .wordmark-sub {
    font-family: var(--cond);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #8FA6BD;
  }
  .pgs-report .sample-chip {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--amber);
    border: 1px solid rgba(245,168,0,.45);
    border-radius: 2px;
    padding: 3px 9px;
  }
  .pgs-report .doc-title {
    font-family: var(--display);
    font-size: clamp(34px, 6vw, 54px);
    line-height: .96;
    letter-spacing: 1px;
    color: #FFFFFF;
    margin: 0 0 6px;
    text-wrap: balance;
  }
  .pgs-report .doc-for {
    font-family: var(--cond);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 24px;
  }
  .pgs-report .meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px 24px;
    border-top: 1px solid rgba(255,255,255,.13);
    padding-top: 18px;
  }
  .pgs-report .meta dt {
    font-family: var(--cond);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #7E97AF;
    margin-bottom: 3px;
  }
  .pgs-report .meta dd {
    margin: 0;
    font-size: 13.5px;
    color: #DCE7F1;
    font-variant-numeric: tabular-nums;
  }
  .pgs-report .meta dd.ref { font-family: var(--mono); font-size: 12.5px; }

  /* ── Sections ─────────────────────────────────────────────────────────── */
  .pgs-report section { padding-top: 40px; }
  .pgs-report section:last-of-type { padding-bottom: 8px; }

  .pgs-report .sec-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 8px;
    margin-bottom: 22px;
  }
  .pgs-report .sec-no {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--amber-ink);
    letter-spacing: .5px;
  }
  .pgs-report .sec-head h2 {
    font-family: var(--cond);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
  }

  .pgs-report p { margin: 0 0 14px; max-width: 68ch; }
  .pgs-report p:last-child { margin-bottom: 0; }
  .pgs-report strong { font-weight: 600; color: var(--ink); }
  .pgs-report .lede { font-size: 16.5px; line-height: 1.6; }

  /* ── Figure strip ─────────────────────────────────────────────────────── */
  .pgs-report .figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-bottom: 26px;
  }
  .pgs-report .fig { background: var(--card); padding: 15px 16px 16px; }
  .pgs-report .fig-label {
    font-family: var(--cond);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-bottom: 6px;
  }
  .pgs-report .fig-value {
    font-family: var(--display);
    font-size: 36px;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .pgs-report .fig-delta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 5px;
  }
  .pgs-report .fig-delta.up { color: var(--sev-high); }
  .pgs-report .fig-delta.down { color: var(--closed); }

  /* ── Tables ───────────────────────────────────────────────────────────── */
  .pgs-report .table-wrap { overflow-x: auto; margin-bottom: 20px; }
  .pgs-report table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
  .pgs-report th {
    font-family: var(--cond);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: left;
    padding: 0 12px 7px 0;
    border-bottom: 1px solid var(--ink);
    white-space: nowrap;
  }
  .pgs-report td {
    padding: 9px 12px 9px 0;
    border-bottom: 1px solid var(--rule-2);
    vertical-align: top;
    color: var(--ink-2);
  }
  .pgs-report td:last-child, .pgs-report th:last-child { padding-right: 0; }
  .pgs-report td.ref { font-family: var(--mono); font-size: 11.5px; color: var(--ink); white-space: nowrap; }
  .pgs-report td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .pgs-report th.num { text-align: right; }
  .pgs-report td.strong { color: var(--ink); font-weight: 500; }
  .pgs-report tr:last-child td { border-bottom: none; }

  /* Proportion bar inside a table cell — the count is the number, this is the shape. */
  .pgs-report .bar { display: block; height: 4px; background: var(--rule); margin-top: 6px; }
  .pgs-report .bar > i { display: block; height: 100%; background: var(--amber); }

  /* ── Chips ────────────────────────────────────────────────────────────── */
  .pgs-report .chip {
    display: inline-block;
    font-family: var(--cond);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    white-space: nowrap;
  }
  .pgs-report .chip.high { color: var(--sev-high); background: var(--wash-high); }
  .pgs-report .chip.med { color: var(--sev-med);  background: var(--wash-med); }
  .pgs-report .chip.open { color: var(--open);     background: var(--wash-open); }
  .pgs-report .chip.closed { color: var(--closed);   background: var(--wash-ok); }

  /* ── Case blocks — the spine of the report ────────────────────────────── */
  .pgs-report .case {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--sev-high);
    margin-bottom: 22px;
    background: var(--card);
  }
  .pgs-report .case-head {
    padding: 15px 20px 14px;
    border-bottom: 1px solid var(--rule);
    background: var(--rule-2);
  }
  .pgs-report .case-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 7px;
  }
  .pgs-report .case-ref {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
  }
  .pgs-report .case-when {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-3);
    margin-left: auto;
  }
  .pgs-report .case-head h3 {
    font-family: var(--body);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.35;
    text-wrap: balance;
  }
  .pgs-report .case-where {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-top: 4px;
  }
  .pgs-report .case-body { padding: 4px 20px 18px; }
  .pgs-report .field { padding-top: 15px; }
  .pgs-report .field-label {
    font-family: var(--cond);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--amber-ink);
    display: block;
    margin-bottom: 5px;
  }
  .pgs-report .field p { font-size: 14.5px; margin-bottom: 10px; }
  .pgs-report .field ul { margin: 0 0 10px; padding-left: 19px; font-size: 14.5px; color: var(--ink-2); }
  .pgs-report .field li { margin-bottom: 5px; }
  .pgs-report .field.prevention {
    background: var(--amber-wash);
    margin: 15px -20px -18px;
    padding: 15px 20px 17px;
    border-top: 1px solid var(--rule);
  }

  .pgs-report ul.plain { margin: 0 0 16px; padding-left: 20px; max-width: 68ch; color: var(--ink-2); }
  .pgs-report ul.plain li { margin-bottom: 7px; }


  /* -- Evidence plates ---------------------------------------------------- */
  .pgs-report .plates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin: 4px 0 6px;
  }
  .pgs-report .plate { margin: 0; }
  .pgs-report .plate img {
    display: block;
    width: 100%;
    height: 250px;
    /* contain, never cover: cropping a photograph that may be produced in a
       claim is not a layout decision anyone should be making silently. */
    object-fit: contain;
    background: var(--rule-2);
    border: 1px solid var(--rule);
  }
  .pgs-report .plate figcaption {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-2);
    padding-top: 6px;
  }
  .pgs-report .plate-no {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--amber-ink);
    display: block;
    margin-bottom: 2px;
  }
  .pgs-report .plate-stamp {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    display: block;
    margin-top: 2px;
  }

  /* ── Callout ──────────────────────────────────────────────────────────── */
  .pgs-report .note {
    border-left: 3px solid var(--amber);
    background: var(--rule-2);
    padding: 15px 18px;
    margin-bottom: 20px;
  }
  .pgs-report .note-title {
    font-family: var(--cond);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .pgs-report .note p { font-size: 14px; margin-bottom: 0; }

  /* ── Sign-off ─────────────────────────────────────────────────────────── */
  .pgs-report .signoff {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 30px;
    margin-top: 26px;
  }
  .pgs-report .sig-line {
    border-top: 1px solid var(--ink);
    padding-top: 8px;
    font-size: 13px;
    color: var(--ink-2);
  }
  .pgs-report .sig-role {
    font-family: var(--cond);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-bottom: 2px;
  }

  .pgs-report footer {
    background: var(--navy);
    color: #8FA6BD;
    padding: 22px 44px 26px;
    margin-top: 44px;
    font-size: 12.5px;
    line-height: 1.7;
  }
  .pgs-report footer strong { color: #DCE7F1; font-weight: 600; }
  .pgs-report footer .fine {
    font-family: var(--mono);
    font-size: 10.5px;
    color: #6D849B;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  @media (max-width: 620px) {
    .pgs-report .pad { padding: 0 20px; }
    .pgs-report .masthead { padding: 26px 20px 22px; }
    .pgs-report footer { padding: 20px 20px 24px; }
    .pgs-report .case-body { padding: 4px 15px 15px; }
    .pgs-report .field.prevention { margin: 15px -15px -15px; padding: 14px 15px 16px; }
  }

  @media print {
    .pgs-report { background: #FFF; font-size: 10.5pt; }
    .pgs-report .sheet { border: none; max-width: none; }
    .pgs-report .case, .pgs-report .note, .pgs-report table { break-inside: avoid; }
    .pgs-report section { break-inside: auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .pgs-report * { animation: none !important; transition: none !important; }
  }