:root {
    color-scheme: light;
    --page:#f9f9f7; --surface:#fcfcfb;
    --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
    --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,0.10);
    --series:#2a78d6; --raw:#c3c2b7;
    --critical:#d03b3b; --critical-wash:rgba(208,59,59,0.07);
    --chip:#f0efec;
    --warn-bg:#fdf6e3;
    --radius:14px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --page:#0d0d0d; --surface:#1a1a19;
      --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
      --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,0.10);
      --series:#3987e5; --raw:#4a4a46;
      --critical:#d03b3b; --critical-wash:rgba(208,59,59,0.10);
      --chip:#262623;
      --warn-bg:#2a2413;
    }
  }
  /* `.loading { display:flex }` and `.demo { display:flex }` both OUTRANK the
     browser's own `[hidden] { display:none }`, which is a plain attribute
     selector on a lower-specificity rule. So `el.hidden = true` sets the
     attribute, changes nothing on screen, and the element stays visible.

     Both were live on the deployed audit screen: the spinner never went away,
     so a finished page read as a stuck one -- and the "this is invented data"
     banner would have stayed up over REAL audits, which is the worse of the
     two by a distance. panels.css has carried this rule since the same bug bit
     the packaging screen; this stylesheet was ported from the emailed
     prototype, which hides nothing and therefore never needed it. */
  [hidden] { display:none !important; }

  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body {
    margin:0; background:var(--page); color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16px; line-height:1.5;
  }
  .wrap { max-width:1100px; margin:0 auto; padding:20px 16px 56px; }

  .demo {
    display:flex; gap:12px; align-items:flex-start;
    background:var(--warn-bg); border:1px solid var(--border);
    border-left:4px solid #fab219;
    border-radius:10px; padding:12px 14px; margin-bottom:24px;
  }
  .demo svg { flex:none; margin-top:2px; }
  .demo b { display:block; }
  .demo p { margin:2px 0 0; font-size:14px; color:var(--ink-2); }

  header h1 { font-size:clamp(21px,4.6vw,30px); margin:0 0 6px; letter-spacing:-0.02em; }
  header .sub { color:var(--ink-2); font-size:15px; margin:0; }

  /* ---------- toolbar: period filter + exports ---------- */
  .toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:20px 0 6px; }
  .filter {
    display:flex; flex-wrap:wrap; gap:6px; flex:1 1 460px; padding:5px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
  }
  .filter button {
    flex:1 1 auto; min-width:86px;
    font:inherit; font-size:13.5px; font-weight:600;
    padding:8px 10px; border-radius:8px; cursor:pointer;
    background:transparent; color:var(--ink-2); border:1px solid transparent;
  }
  .filter button:hover { background:var(--chip); }
  .filter button[aria-pressed="true"] { background:var(--series); color:#fff; border-color:var(--series); }
  .exports { display:flex; gap:8px; flex:0 0 auto; }
  .exports button {
    font:inherit; font-size:13.5px; font-weight:600; padding:10px 14px;
    border-radius:10px; cursor:pointer; white-space:nowrap;
    background:var(--surface); color:var(--ink); border:1px solid var(--border);
    display:flex; align-items:center; gap:7px;
  }
  .exports button:hover { background:var(--chip); }
  button:focus-visible { outline:2px solid var(--series); outline-offset:2px; }
  .scope { font-size:13px; color:var(--muted); margin:0 0 18px; padding-left:2px; }

  .card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px; margin-bottom:14px;
  }
  .card > h2 { font-size:17px; margin:0 0 4px; letter-spacing:-0.01em; }
  .card > .note { color:var(--ink-2); font-size:14px; margin:0 0 18px; }

  /* ---------- hero ---------- */
  .heroline { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; margin-bottom:4px; }
  .fig { font-size:clamp(52px,13vw,76px); font-weight:650; line-height:1; letter-spacing:-0.04em; }
  .figside { font-size:14.5px; color:var(--ink-2); }
  .figside b { color:var(--ink); font-weight:600; }
  .figside .warnnum { color:var(--critical); font-weight:650; }

  /* ---------- charts ---------- */
  .plotwrap { position:relative; padding-left:42px; margin-top:18px; }
  .plot { position:relative; height:250px; }
  @media (max-width:520px) { .plot { height:200px; } }
  .plot svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .ylab {
    position:absolute; left:-42px; width:36px; text-align:right;
    font-size:12px; color:var(--muted); transform:translateY(-50%);
    font-variant-numeric:tabular-nums;
  }
  .gl   { stroke:var(--grid); stroke-width:1; vector-effect:non-scaling-stroke; }
  .axl  { stroke:var(--axis); stroke-width:1; vector-effect:non-scaling-stroke; }
  .thr  { stroke:var(--critical); stroke-width:1.5; vector-effect:non-scaling-stroke; }
  .lraw { fill:none; stroke:var(--raw); stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .lavg { fill:none; stroke:var(--series); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
  .dot { position:absolute; width:11px; height:11px; border-radius:50%;
         transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--surface); background:var(--series); }
  .hit { position:absolute; top:0; bottom:0; transform:translateX(-50%); }
  .callout {
    position:absolute; font-size:12px; color:var(--ink-2); white-space:nowrap;
    pointer-events:none; font-variant-numeric:tabular-nums;
    background:var(--surface); padding:0 4px;
  }
  .thrlab {
    position:absolute; right:0; font-size:12px; font-weight:600; color:var(--critical);
    background:var(--surface); padding:0 4px; transform:translateY(-100%);
    pointer-events:none; white-space:nowrap;
  }
  .xaxis { position:relative; height:20px; margin-top:8px; }
  .xaxis span { position:absolute; transform:translateX(-50%); font-size:12px; color:var(--muted); white-space:nowrap; }
  .legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:12.5px; color:var(--ink-2); }
  .legend span { display:flex; align-items:center; gap:7px; }
  .key { width:16px; height:0; border-top-style:solid; flex:none; }

  /* ---------- 18-question grid ---------- */
  .qgrid { display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:760px) { .qgrid { grid-template-columns:1fr 1fr; } }
  .qcell {
    border:1px solid var(--grid); border-radius:12px; padding:14px 14px 10px;
    background:var(--surface); break-inside:avoid;
    /* Without this a grid item refuses to shrink below its content's min-content
       width, and the nowrap footer lines below push the column wider than a
       phone screen. */
    min-width:0;
  }
  /* Every block below is a FIXED height so that all cells are identical and the
     charts line up across the grid. Two lines for the name, three for the
     checklist wording, one each for the two footer lines. Anything longer is
     clamped -- the full wording is in the tooltip and in the Excel export. */
  .qhead { display:flex; align-items:flex-start; gap:8px; }
  .qnum {
    font-size:11.5px; font-weight:700; color:var(--muted);
    border:1px solid var(--grid); border-radius:6px; padding:1px 6px; flex:none;
    font-variant-numeric:tabular-nums; margin-top:2px;
  }
  .qname {
    font-size:14px; font-weight:650; flex:1; line-height:1.3; height:2.6em;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .qpct { font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; flex:none; }
  .qfull {
    font-size:11px; color:var(--muted); margin:4px 0 0; line-height:1.4; height:4.2em;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .qchart { position:relative; height:88px; margin-top:8px; }
  .qchart svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .qfoot1, .qfoot2 {
    margin-top:7px; font-size:12px; color:var(--muted);
    height:1.5em; line-height:1.5em; min-width:0;
    overflow:hidden; white-space:nowrap;
  }
  .qfoot1 { display:flex; align-items:center; gap:8px; }
  /* Block, not flex, so text-overflow applies: one line always, clipped with an
     ellipsis on a narrow screen rather than widening the cell. */
  .qfoot2 { display:block; text-overflow:ellipsis; margin-top:4px; }
  .perfect { margin:14px 0 0; padding:12px 14px; background:var(--page);
             border:1px solid var(--grid); border-radius:10px; font-size:13.5px; color:var(--ink-2); }
  .perfect ul { margin:8px 0 0; padding-left:18px; }
  .perfect li { margin-bottom:2px; }
  .below {
    font-size:10.5px; font-weight:700; letter-spacing:0.02em;
    background:var(--critical); color:#fff; padding:2px 6px; border-radius:999px; white-space:nowrap;
  }
  .dir { font-weight:600; }
  .dir.worse { color:var(--critical); }

  .clean {
    margin:18px 0 0; padding:12px 14px; background:var(--page);
    border:1px solid var(--grid); border-radius:10px; font-size:13.5px; color:var(--ink-2);
  }

  details { margin-top:16px; }
  summary { cursor:pointer; font-size:13px; color:var(--ink-2); padding:6px 0; list-style:none; }
  summary::-webkit-details-marker { display:none; }
  summary::before { content:"\25B8  "; color:var(--muted); }
  details[open] summary::before { content:"\25BE  "; }
  .tblscroll { overflow-x:auto; margin-top:8px; max-height:340px; overflow-y:auto; }
  table { border-collapse:collapse; width:100%; font-size:13px; }
  th, td { text-align:left; padding:6px 10px 6px 0; border-bottom:1px solid var(--grid); white-space:nowrap; }
  th { color:var(--muted); font-weight:600; font-size:12px; position:sticky; top:0; background:var(--surface); }
  td.n { text-align:right; font-variant-numeric:tabular-nums; padding-right:16px; }
  tr.fail td { color:var(--critical); font-weight:600; }

  #tip {
    position:fixed; z-index:60; pointer-events:none; opacity:0; transition:opacity .1s;
    max-width:280px; background:var(--ink); color:var(--surface);
    padding:8px 10px; border-radius:8px; font-size:12.5px; line-height:1.4;
    box-shadow:0 4px 18px rgba(0,0,0,.22);
  }

  footer { margin-top:32px; }
  footer .card { background:transparent; }
  footer h2 { font-size:15px; margin:0 0 10px; }
  footer ul { margin:0 0 18px; padding-left:20px; color:var(--ink-2); font-size:14px; }
  footer li { margin-bottom:6px; }
  .sig { margin-top:24px; font-size:12.5px; color:var(--muted); }

  .printonly { display:none; }

  /* ---------- print / save-as-PDF ---------- */
  @page { size:A4 portrait; margin:12mm 10mm; }
  @media print {
    /* Print always renders light, whatever the screen theme is. */
    :root, :root:not([data-theme="light"]) {
      color-scheme: light;
      --page:#fff; --surface:#fff;
      --ink:#000; --ink-2:#333; --muted:#666;
      --grid:#d5d5d0; --axis:#999; --border:#d5d5d0;
      --series:#1b5fae; --raw:#b6b6b0;
      --critical:#b8302f; --critical-wash:rgba(184,48,47,0.06);
      --chip:#f2f2ef; --warn-bg:#fdf6e3;
    }
    body { background:#fff; font-size:11pt; }
    .wrap { max-width:none; padding:0; }
    .toolbar, #tip, details { display:none !important; }
    .printonly { display:block; }
    .card { border:1px solid var(--grid); box-shadow:none; break-inside:avoid; margin-bottom:10px; }
    .qgrid { grid-template-columns:1fr 1fr; gap:6px; }
    .qcell { break-inside:avoid; page-break-inside:avoid; padding:9px 10px 7px; }
    .qchart { height:52px; margin-top:6px; }
    .qfull { font-size:8pt; margin-top:3px; }
    .qfoot1, .qfoot2 { font-size:8pt; margin-top:4px; }
    /* The grid card cannot avoid breaking -- it is taller than a page. Saying so
       stops the browser shunting the whole card to a fresh page and leaving one
       blank behind it. */
    .card { break-inside:auto; }
    .plot { height:190px; }
    h1 { font-size:18pt; }
    .fig { font-size:40pt; }
    .pagebreak { break-before:page; page-break-before:always; }
    a[href]::after { content:""; }
    * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  }

/* =========================================================================
   ADDED FOR THE APPLICATION. Everything above is the emailed prototype's
   stylesheet, verbatim, because the prototype IS the reference for what the
   client sees (ADR-0009) and the in-application screen had drifted from it.
   Nothing above is edited: a change there would put the two out of step
   again, which is the whole failure this port undoes.
   ========================================================================= */

/* Sign in. The prototype has none -- it opens from an email attachment. */
.signin { max-width:400px; margin:11vh auto; padding:0 16px; }
.signin h1 { font-size:24px; margin:0 0 4px; letter-spacing:-0.02em; }
.signin .sub { color:var(--ink-2); font-size:15px; margin:0 0 20px; }
.signin .field { margin-bottom:14px; }
.signin label { display:block; font-size:13px; color:var(--ink-2); margin-bottom:5px; }
.signin input {
  width:100%; font:inherit; padding:11px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
}
.signin .btn {
  width:100%; font:inherit; font-weight:650; padding:12px; margin-top:6px;
  border-radius:10px; border:1px solid var(--series);
  background:var(--series); color:#fff; cursor:pointer;
}
.signin .err { color:var(--critical); font-size:13.5px; margin:0 0 12px; }

.topbar {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:0 0 18px; font-size:13px; color:var(--muted);
}
.topbar__spacer { flex:1 1 auto; }
.topbar button {
  font:inherit; font-size:13px; padding:6px 12px; border-radius:8px;
  cursor:pointer; background:var(--surface); color:var(--ink-2);
  border:1px solid var(--border);
}
.topbar button:hover { background:var(--chip); }

/* The other page of this app. Two screens, one sign-in, one deployment. */
.pagenav { display:flex; gap:6px; }
.pagenav a {
  font-size:13px; padding:6px 12px; border-radius:8px; text-decoration:none;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
}
.pagenav a[aria-current="page"] { background:var(--ink); color:var(--page); border-color:var(--ink); }
.pagenav a:hover:not([aria-current="page"]) { background:var(--chip); }

/* Loading. The prototype needs none -- its data is in the file. Against a
   project the first fetch is four round trips, and a blank page for two
   seconds reads as broken rather than busy. */
.loading { display:flex; align-items:center; gap:10px; color:var(--ink-2); padding:40px 0; }
.spinner {
  width:18px; height:18px; flex:none; border-radius:50%;
  border:2.5px solid var(--border); border-top-color:var(--series);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .spinner { animation-duration:2.4s; }
}

@media print { .topbar, .signin { display:none !important; } }