/* ============================================================================
 * assets/report-paper.css — the ScheduleInsight report house style.
 * ----------------------------------------------------------------------------
 * One A4 paper chrome shared by every example report, so a reader moving
 * between them recognises the same document: navy cover, contents page,
 * numbered sections carrying the narrative and the graphs, and every table
 * pushed to a lettered appendix.
 *
 * Page model: a `.page` div IS one A4 sheet. On screen it is a 210x297mm card
 * on a grey stage; in print `@page{size:A4;margin:0}` plus a fixed 297mm height
 * and `break-after:page` means one div always lands on exactly one sheet. That
 * fixed height is load-bearing — without it a page that overflows by a few
 * millimetres silently becomes two sheets, and neither the screen layout nor a
 * print-media measurement will tell you. Only the rendered PDF will.
 *
 * Component vocabulary available to every report:
 *   .page .page.cover .prunning .pfoot        page shell, running head, footer
 *   .page.flow .page.wide                     grow-past-one-sheet, landscape
 *   .cov-logo                                 optional customer logo (Studio)
 *   .toc .toc-grp .row                        contents
 *   h2.sec>.n  h3.sub  p.stand  ul.pts        headings and narrative
 *   .call .call.bad .call.warnc               callouts
 *   .dec .stamp .askrow .ask                  decision block
 *   .cards .card .card.alarm                  stat cards
 *   figure figcaption .figttl                 figures
 *   .statbar .statkey .ifrow .ifbar .cstrip   inline mini-viz
 *   table .chip.p/.w/.f/.a  .mono  .apxnote   appendix tables
 *
 * SOURCE OF TRUTH: this file. Reports must not restyle the chrome — a report
 * needing something new adds a component here so every report can use it.
 * ========================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/space-grotesk-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2")}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0f172a;--ink2:#334155;--ink3:#475569;--mute:#64748b;--faint:#94a3b8;
  --line:#e2e8f0;--line2:#f1f5f9;--paper:#fff;--wash:#f8fafc;--stage:#e7ecf2;
  --navy:#0b1f3f;--accent:#4E5BE6;
  --pass:#15803d;--passbg:#dcfce7;--watch:#b45309;--watchbg:#fef3c7;
  --fail:#b91c1c;--failbg:#fee2e2;--absent:#64748b;--absentbg:#eef2f7;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --disp:'Space Grotesk','Inter',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Report-level control bar (e.g. the assurance review's contract selector).
   NOT sticky: the site bar above it owns top:0, and two sticky bars at the same
   offset overlap. The control is set once at the start of a read, so scrolling
   back to it is no hardship. */
.ctlbar{position:relative;z-index:30;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 6px rgba(15,23,42,.05)}
.ctl-in{max-width:210mm;margin:0 auto;padding:9px 16mm;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ctl-in label{font-family:var(--mono);font-size:8pt;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ctl-in select{font-family:var(--sans);font-size:10pt;font-weight:600;color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:6px 10px;background:var(--wash);cursor:pointer}
.ctl-in select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ctl-note{font-size:8.5pt;color:var(--faint);flex:1;min-width:220px;line-height:1.45}
@media print{.ctlbar{display:none}}
body{background:var(--stage);font-family:var(--sans);font-size:10pt;color:var(--ink);line-height:1.5}
.deck{padding:24px 12px 60px}

/* ── A4 page shell: 210×297mm, 16mm margins, footer band ── */
.page{width:210mm;min-height:297mm;margin:0 auto 20px;background:var(--paper);position:relative;
  padding:18mm 16mm 22mm;box-shadow:0 18px 44px -30px rgba(15,23,42,.34),0 2px 10px rgba(15,23,42,.05)}
/* Landscape sheet, on screen. The print rule rotates the sheet itself. */
.page.wide{width:297mm;min-height:210mm}
.pfoot{position:absolute;left:16mm;right:16mm;bottom:11mm;display:flex;justify-content:space-between;
  align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:6px;
  font-family:var(--mono);font-size:7.5pt;color:var(--faint)}
.pfoot .no{font-weight:600;color:var(--mute)}
.prunning{font-family:var(--mono);font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:16px;
  display:flex;justify-content:space-between}

/* ── cover ─────────────────────────────────────────────── */
.page.cover{padding:0;background:var(--navy);color:#fff;overflow:hidden;display:flex;flex-direction:column}
.cov-art{position:absolute;inset:0;overflow:hidden}
.cov-art::after{content:"";position:absolute;right:-120px;top:-140px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(78,91,230,.34),transparent 66%)}
.cov-in{position:relative;z-index:2;padding:26mm 18mm 0;flex:1}
.cov-kick{font-family:var(--mono);font-size:8.5pt;letter-spacing:.2em;text-transform:uppercase;
  color:#93c5fd;margin-bottom:20mm}
.cov-rule{width:52px;height:3px;background:var(--accent);margin-bottom:9mm}
.cov-in h1{font-family:var(--disp);font-size:30pt;font-weight:700;line-height:1.12;letter-spacing:-.02em;
  margin-bottom:5mm;max-width:15ch}
.cov-in h2{font-family:var(--disp);font-size:13pt;font-weight:500;color:#bfdbfe;margin-bottom:14mm}
.cov-verdict{display:inline-flex;align-items:center;gap:14px;background:rgba(185,28,28,.16);
  border:1px solid rgba(248,113,113,.45);border-radius:10px;padding:14px 20px;margin-bottom:12mm}
.cov-verdict .vb{font-family:var(--disp);font-size:15pt;font-weight:700;color:#fca5a5;line-height:1.1}
.cov-verdict .vs{font-family:var(--mono);font-size:8pt;color:#fecaca;letter-spacing:.08em;margin-top:3px}
.cov-verdict .vsc{border-left:1px solid rgba(248,113,113,.4);padding-left:16px;text-align:center}
.cov-verdict .vsc b{font-family:var(--disp);font-size:24pt;font-weight:700;color:#fff;display:block;line-height:1}
.cov-verdict .vsc span{font-family:var(--mono);font-size:7.5pt;color:#fecaca}
/* Tone variants. The cover states the verdict, so its colour has to be able to
   say "sound" and "watch" as well as "reject" — a report whose only cover state
   is alarm reads as alarm even when the finding is that the programme is fine. */
.cov-verdict.watch{background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.45)}
.cov-verdict.watch .vb{color:#fcd34d}
.cov-verdict.watch .vs,.cov-verdict.watch .vsc span{color:#fde68a}
.cov-verdict.watch .vsc{border-left-color:rgba(251,191,36,.4)}
.cov-verdict.good{background:rgba(74,222,128,.13);border-color:rgba(74,222,128,.45)}
.cov-verdict.good .vb{color:#86efac}
.cov-verdict.good .vs,.cov-verdict.good .vsc span{color:#bbf7d0}
.cov-verdict.good .vsc{border-left-color:rgba(74,222,128,.4)}
.cov-meta{position:relative;z-index:2;padding:0 18mm 16mm;
  display:grid;grid-template-columns:repeat(3,1fr);gap:7mm 10mm;
  border-top:1px solid rgba(255,255,255,.16);margin:0 18mm;padding-top:8mm}
.cov-meta .k{font-family:var(--mono);font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(191,219,254,.7);margin-bottom:2px}
.cov-meta .v{font-size:10pt;font-weight:500}
.cov-bar{position:relative;z-index:2;background:rgba(0,0,0,.22);padding:6mm 18mm;
  display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:8pt;
  color:rgba(191,219,254,.85)}
.cov-brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:11pt;
  font-weight:600;color:#fff;margin-right:auto}
/* Customer logo (Report Studio). Bounded on both axes so an oversized upload
   cannot push the bar out of shape, and letterboxed within that box whatever
   its aspect ratio. It sits to the left of the ScheduleInsight mark rather
   than replacing it: the document is the customer's, the tool is ours. The
   auto margin on .cov-brand groups the two at the left edge and is inert on a
   cover with no logo, where space-between already produced that layout. */
.cov-logo{order:-1;height:9mm;max-width:44mm;width:auto;object-fit:contain;padding-right:7mm}

/* ── contents ──────────────────────────────────────────── */
.toc{margin-top:6mm}
.toc-grp{font-family:var(--mono);font-size:8pt;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:9mm 0 3mm;padding-bottom:4px;border-bottom:1px solid var(--line)}
.toc-grp:first-child{margin-top:0}
.toc a,.toc div.row{display:flex;align-items:baseline;gap:8px;padding:5px 0;text-decoration:none;color:var(--ink2)}
.toc .num{font-family:var(--mono);font-size:9pt;color:var(--faint);width:26px;flex:none}
.toc .ttl{font-size:10.5pt}
.toc .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-3px)}
.toc .pg{font-family:var(--mono);font-size:9pt;color:var(--mute)}

/* ── headings & narrative ──────────────────────────────── */
h2.sec{font-family:var(--disp);font-size:14pt;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  margin-bottom:2.6mm;display:flex;align-items:baseline;gap:10px}
h2.sec .n{font-family:var(--mono);font-size:10pt;color:var(--accent);font-weight:400}
h3.sub{font-family:var(--disp);font-size:11pt;font-weight:600;color:var(--ink);margin:5.5mm 0 2mm}
p{font-size:10pt;color:var(--ink2);line-height:1.56;margin-bottom:3mm;max-width:none}
p b{color:var(--ink);font-weight:600}
p.stand{font-size:11.5pt;line-height:1.5;color:var(--ink);border-left:3px solid var(--accent);
  padding-left:5mm;margin:0 0 5mm}
ul.pts{margin:0 0 4mm 5mm}
ul.pts li{font-size:10pt;color:var(--ink2);line-height:1.54;margin-bottom:1.8mm}
ul.pts li b{color:var(--ink)}

/* ── callouts ──────────────────────────────────────────── */
.call{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;
  padding:3.4mm 4.4mm;margin:4mm 0;background:var(--wash)}
.call.bad{border-color:#fecaca;border-left-color:var(--fail);background:#fff6f6}
.call.warnc{border-color:#fde68a;border-left-color:var(--watch);background:#fffbeb}
.call p{font-size:9.5pt;margin-bottom:2.2mm}.call p:last-child{margin-bottom:0}
.call .ck{font-family:var(--mono);font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-bottom:2mm}
.call.bad .ck{color:var(--fail)}

/* ── verdict block on page 3 ───────────────────────────── */
.dec{display:grid;grid-template-columns:32mm 1fr;gap:6mm;align-items:start;margin-bottom:4.5mm}
.stamp{border:2.5px solid var(--fail);border-radius:9px;padding:5mm 3mm;text-align:center;
  transform:rotate(-3deg);background:#fff}
.stamp .b{font-family:var(--disp);font-size:12.5pt;font-weight:700;color:var(--fail);line-height:1.08}
.stamp .s{font-family:var(--mono);font-size:6.5pt;color:#7f1d1d;letter-spacing:.08em;margin-top:3mm;line-height:1.4}
.askrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6mm;margin-top:4mm}
.ask{border:1px solid var(--line);border-radius:7px;padding:2.5mm 3.2mm;background:var(--wash)}
.ask .k{font-family:var(--mono);font-size:7pt;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:1.5mm}
.ask .v{font-size:10pt;font-weight:600;color:var(--ink)}

/* ── stat cards ────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:3.4mm;margin:4mm 0}
.card{border:1px solid var(--line);border-radius:9px;padding:3.4mm 4mm}
.card.alarm{border-color:#fecaca;background:#fff8f8}
.card .k{font-family:var(--mono);font-size:7.5pt;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:2mm}
.card .big{font-family:var(--disp);font-size:19pt;font-weight:700;line-height:1;margin-bottom:2mm}
.card.alarm .big{color:var(--fail)}
.card p{font-size:9pt;margin:0;line-height:1.46}

/* ── figures ───────────────────────────────────────────── */
figure{margin:4mm 0;break-inside:avoid}
figure svg{display:block;width:100%;height:auto}
figcaption{font-size:8.5pt;color:var(--mute);line-height:1.5;margin-top:2.4mm;
  padding-top:2mm;border-top:1px solid var(--line2)}
figcaption b{color:var(--ink2)}
.figttl{font-family:var(--mono);font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3mm}

/* ── inline mini-viz used in the body ──────────────────── */
.statbar{display:flex;height:26px;border-radius:5px;overflow:hidden;gap:2px;margin:3mm 0}
.statbar div{display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:8pt;font-weight:700;color:#fff}
.statkey{display:flex;gap:5mm;font-family:var(--mono);font-size:8pt;color:var(--mute);margin-top:2mm}
.statkey i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}

.ifrow{display:grid;grid-template-columns:52mm 1fr 12mm;gap:4mm;align-items:center;padding:1.9mm 0;
  font-size:9pt}
.ifrow + .ifrow{border-top:1px solid var(--line2)}
.ifbar{position:relative;height:9px;background:var(--line2);border-radius:0 3px 3px 0}
.ifbar i{position:absolute;left:0;top:0;height:100%;border-radius:0 3px 3px 0}
.ifv{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

.cstrip{display:grid;grid-template-columns:repeat(11,1fr);gap:2px;margin:3mm 0 2mm}
.cstrip span{height:30px;border-radius:3px;display:block}
.cstrip .ok{background:var(--pass)}.cstrip .part{background:var(--watch)}.cstrip .no{background:var(--fail)}
.cslab{display:grid;grid-template-columns:repeat(11,1fr);gap:2px;font-family:var(--mono);
  font-size:6.5pt;color:var(--faint);text-align:center}

/* ── tables (appendix) ─────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:8.5pt;margin:2.6mm 0}
thead th{font-family:var(--mono);font-size:7.5pt;text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);font-weight:500;padding:2mm 2mm;text-align:left;border-bottom:1.5px solid var(--line)}
tbody td{padding:1.9mm 2mm;border-bottom:1px solid var(--line2);color:var(--ink2);vertical-align:top}
tfoot td{padding:2.4mm 2mm;border-top:1.5px solid var(--line);font-weight:700;color:var(--ink)}
td.c,th.c{text-align:center}td.r,th.r{text-align:right}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
tbody tr:nth-child(even) td{background:var(--wash)}
.chip{display:inline-block;font-family:var(--mono);font-size:7pt;font-weight:700;padding:1px 6px;
  border-radius:9px;white-space:nowrap}
.p{background:var(--passbg);color:var(--pass)}.w{background:var(--watchbg);color:var(--watch)}
.f{background:var(--failbg);color:var(--fail)}.a{background:var(--absentbg);color:var(--absent)}
.na{background:#f1f5f9;color:#94a3b8}
.carry{display:inline-block;font-family:var(--mono);font-size:6.5pt;background:#fee2e2;color:#b91c1c;
  padding:0 5px;border-radius:8px;margin-left:4px}
.apxnote{font-size:9pt;color:var(--mute);line-height:1.55;margin-bottom:4mm}
.prov{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.2mm 6mm;margin-top:2.6mm}
.prov div{border-bottom:1px solid var(--line2);padding-bottom:2mm}
.prov .k{font-family:var(--mono);font-size:7pt;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:1mm}
.prov .v{font-family:var(--mono);font-size:8.5pt;color:var(--ink2);word-break:break-all}

/* ── site bar ──────────────────────────────────────────────────────────────
   Screen-only navigation. A report is often the FIRST page a visitor sees —
   they arrive on it from search or a shared link — so it has to offer a way
   back into the site. Removed in print, where it would be furniture on an
   otherwise clean document. */
.sitebar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 6px rgba(15,23,42,.05)}
/* Wider than the 210mm sheet on purpose — this is site chrome, not part of the
   document, and constraining it to the page width wraps the buttons onto a
   second row on an ordinary desktop. */
.sitebar-in{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sitebar .nm{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:12pt;
  font-weight:600;color:var(--ink);text-decoration:none}
.sitebar .tag{font-family:var(--mono);font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);background:var(--wash);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.sitebar .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sitebar .btn{font-size:9.5pt;font-weight:600;text-decoration:none;border-radius:8px;
  padding:7px 13px;border:1px solid var(--line);color:var(--ink2);background:var(--wash);white-space:nowrap;
  font-family:var(--sans);cursor:pointer}
.sitebar .btn.acc{background:var(--accent);border-color:var(--accent);color:#fff}
.sitebar a:focus-visible,.sitebar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media print{.sitebar{display:none}}

/* ── marketing lead-in ─────────────────────────────────────────────────────
   Only the sample report carries this: it is the £10 entry product and the page
   the landing-page hero points at, so it is a sales page that happens to
   contain a report. Screen-only, above the deck, never in the PDF. */
.leadin{max-width:210mm;margin:24px auto 20px;padding:0 4mm}
.leadin .eyebrow{font-family:var(--mono);font-size:8pt;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.leadin h1{font-family:var(--disp);font-size:22pt;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.leadin p{font-size:11pt;color:var(--ink3);line-height:1.55;max-width:62ch;margin-bottom:10px}
.leadin .facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.leadin .facts span{font-family:var(--mono);font-size:8pt;color:var(--ink2);background:var(--paper);
  border:1px solid var(--line);border-radius:20px;padding:5px 12px}
@media print{.leadin{display:none}}

/* ── next-step panel ───────────────────────────────────────────────────────
   Screen-only furniture that sits OUTSIDE the page deck. A sample report is
   also a sales page, but the A4 sheets have to stay a clean document — so the
   call to action lives here and is removed entirely in print. */
.nextstep{max-width:210mm;margin:0 auto 20px;background:var(--paper);border-radius:10px;
  padding:9mm 10mm;box-shadow:0 18px 44px -30px rgba(15,23,42,.34),0 2px 10px rgba(15,23,42,.05);
  border-top:3px solid var(--accent)}
.nextstep h4{font-family:var(--disp);font-size:13pt;font-weight:700;color:var(--ink);margin-bottom:2.5mm}
.nextstep p{font-size:10pt;margin-bottom:4mm}
.nextstep .row{display:flex;gap:10px;flex-wrap:wrap}
.nextstep a{display:inline-block;font-family:var(--sans);font-size:10pt;font-weight:600;
  text-decoration:none;border-radius:8px;padding:9px 16px;border:1px solid var(--line)}
.nextstep a.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.nextstep a.sec{color:var(--ink2);background:var(--wash)}
.nextstep a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media print{.nextstep{display:none}}

@media(max-width:860px){
  .page{width:auto;min-height:0;padding:22px 20px 62px}
  .cov-in{padding:34px 22px 0}.cov-meta{padding:22px 0 30px;margin:0 22px;grid-template-columns:1fr 1fr}
  .cov-bar{padding:16px 22px}
  .dec{grid-template-columns:1fr}.stamp{transform:none;max-width:44mm}
  .cards,.askrow{grid-template-columns:1fr}
  .ifrow{grid-template-columns:34mm 1fr 11mm}
  .prov{grid-template-columns:1fr}
  .cslab{font-size:5.5pt}
}
@media print{
  body{background:#fff}.deck{padding:0}
  @page{size:A4;margin:0}
  /* one div = exactly one sheet: fixed box, break after, nothing to fragment */
  .page{margin:0;box-shadow:none;break-after:page;break-inside:avoid;
    min-height:0;height:297mm;overflow:hidden}
  .page:last-child{break-after:auto}
  /* A page whose content is COMPOSED BY THE USER rather than authored cannot be
     held to that rule. Report Studio packs blocks onto pages from an estimated
     height, and a single block — a 500-row activity table — can be taller than
     any sheet. Under the fixed box above, an underestimate would be clipped by
     overflow:hidden and the rows would be silently missing from the PDF, which
     is the one failure a report must never have. A .flow page therefore keeps
     the house margins, running head and footer but is allowed to grow onto as
     many sheets as its content needs. Authored reports keep the strict rule;
     generated ones opt into this. */
  .page.flow{height:auto;min-height:297mm;overflow:visible;break-inside:auto}
  /* Landscape sheet for a table too wide for portrait. The named page is what
     actually rotates the sheet; the width swap keeps the on-screen card and the
     printed sheet the same shape. */
  .page.wide{page:pdland;width:297mm;height:210mm}
  .page.wide.flow{height:auto;min-height:210mm}
  @page pdland{size:A4 landscape;margin:0}
  table{break-inside:auto}tr{break-inside:avoid}
  h2.sec,h3.sub{break-after:avoid}
}