/* An extension sheet, so this is belt and braces: panels.css already carries
   the rule and is always loaded first. It is repeated because
   tests/test_audit_screen.py asserts EVERY app stylesheet has it, and that
   guard has already caught the audit screen shipping a spinner that would not
   go away and a "this data is invented" banner that would not hide. A test
   that has to reason about load order is a test that stops catching things. */
[hidden] { display:none !important; }

/* =========================================================================
   critical-panels.css -- the critical resort report.

   LOADED AFTER panels.css AND ADDS ONLY WHAT IS NEW. Everything shared --
   the palette, cards, tables, toolbar, filter, exports, print rules -- comes
   from panels.css, because two definitions of one design system is how two
   screens drift apart. If a rule here duplicates one there, delete it here.
   ========================================================================= */

/* The headline figures. Auto-fit so five of them sit in a row on a laptop and
   two on a phone, without a breakpoint to maintain. */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px; margin:14px 0 4px; }
.stat { padding:12px 14px; border:1px solid var(--border); border-radius:10px;
  background:var(--page); }
.stat .n { display:block; font-size:23px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.stat .l { display:block; color:var(--muted); font-size:12.5px; margin-top:2px;
  line-height:1.35; }

/* Charts. Drawn as inline SVG with a real axis -- the first prototype drew
   dots on an unlabelled strip, which reads as decoration rather than as a
   measurement. */
.chartwrap { margin:14px 0 4px; }
.chart svg { display:block; width:100%; height:auto; }
.chart .gl   { stroke:var(--grid); stroke-width:1; }
.chart .axl  { stroke:var(--axis); stroke-width:1; }
.chart .ln   { fill:none; stroke:var(--series); stroke-width:2; }
/* Single-series charts get --series from the rule above; multi-series
   ones are overridden by .chart .sN below, which is equally specific and
   defined later. */
.chart .ln2  { fill:none; stroke:var(--raw); stroke-width:1.6; stroke-dasharray:4 3; }
.chart .cbar { fill:var(--series); }
.chart .cbar.alt { fill:var(--raw); }
.chart .dot  { fill:var(--series); }
.chart .lbl  { fill:var(--muted); font-size:10.5px; }
.chart .vlbl { fill:var(--ink-2); font-size:10.5px; font-variant-numeric:tabular-nums; }
.chart .band { fill:var(--critical-wash); }

/* Up to ten series need ten distinguishable colours, and they have to reach
   THREE different kinds of element: an SVG stroke, an SVG fill, and the
   background of an HTML swatch in the table and the legend.

   Written at two-class specificity on purpose. `.chart .ln` is 0,2,0 and a
   bare `.s3` is 0,1,0, so a plain colour class LOSES to it and every line on
   a ten-series chart comes out the same blue -- which is what happened, and
   it looks like a rendering bug rather than a CSS one. */
.chart .s0 { stroke:#2a78d6; }
.chart circle.s0 { fill:#2a78d6; }
.chart .s1 { stroke:#d03b3b; }
.chart circle.s1 { fill:#d03b3b; }
.chart .s2 { stroke:#1f9e6e; }
.chart circle.s2 { fill:#1f9e6e; }
.chart .s3 { stroke:#c07a12; }
.chart circle.s3 { fill:#c07a12; }
.chart .s4 { stroke:#7a4fd0; }
.chart circle.s4 { fill:#7a4fd0; }
.chart .s5 { stroke:#0f8fa8; }
.chart circle.s5 { fill:#0f8fa8; }
.chart .s6 { stroke:#b5417f; }
.chart circle.s6 { fill:#b5417f; }
.chart .s7 { stroke:#6b7b1f; }
.chart circle.s7 { fill:#6b7b1f; }
.chart .s8 { stroke:#8a5a2b; }
.chart circle.s8 { fill:#8a5a2b; }
.chart .s9 { stroke:#4a5568; }
.chart circle.s9 { fill:#4a5568; }

.legend i.s0, .swatch.s0 { background:#2a78d6; }
.legend i.s1, .swatch.s1 { background:#d03b3b; }
.legend i.s2, .swatch.s2 { background:#1f9e6e; }
.legend i.s3, .swatch.s3 { background:#c07a12; }
.legend i.s4, .swatch.s4 { background:#7a4fd0; }
.legend i.s5, .swatch.s5 { background:#0f8fa8; }
.legend i.s6, .swatch.s6 { background:#b5417f; }
.legend i.s7, .swatch.s7 { background:#6b7b1f; }
.legend i.s8, .swatch.s8 { background:#8a5a2b; }
.legend i.s9, .swatch.s9 { background:#4a5568; }

.legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px;
  font-size:12.5px; color:var(--ink-2); }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { width:11px; height:11px; border-radius:3px; flex:none;
  display:inline-block; }

/* A defect's swatch in the table, so the row and its line are the same thing. */
.swatch { width:10px; height:10px; border-radius:3px; display:inline-block;
  margin-right:7px; vertical-align:baseline; }

.err { color:var(--critical); }

footer ul { margin:6px 0 14px; padding-left:20px; }
footer li { margin-bottom:7px; color:var(--ink-2); font-size:14px; }
footer .sig { color:var(--muted); font-size:12.5px; }

@media print {
  /* Charts are the point of this report, so unlike the packaging tables they
     stay -- but they must not straddle a page break. */
  .card, .chartwrap { break-inside:avoid; }
  .chart .cbar, .chart .dot, .legend i, .swatch {
    print-color-adjust:exact; -webkit-print-color-adjust:exact;
  }
}