/*
 * The packaging dashboard's visual system. SHARED, not copied.
 *
 * apps/reports loads this file; scripts/build_packaging_dashboard.py inlines
 * it into analytics/prototype/packaging-dashboard-demo.html, which has to be
 * a single self-contained file because it is emailed (ADR-0007).
 *
 * One copy, because a prototype and an application that drift apart are two
 * answers to the same question and the client eventually sees both.
 */
  :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.12);
    --series:#2a78d6; --raw:#c3c2b7;
    --good:#2f7d54; --repair:#c98a1e; --scrap:#d03b3b;
    --critical:#d03b3b; --critical-wash:rgba(208,59,59,0.07);
    --band:rgba(42,120,214,0.16);
    --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;
      --good:#4fa872; --repair:#d99f38; --scrap:#e05353;
      --critical:#e05353; --critical-wash:rgba(224,83,83,0.12);
      --band:rgba(57,135,229,0.22);
      --chip:#262623;
      --warn-bg:#2a2413;
    }
  }
  /* The `hidden` ATTRIBUTE must beat a class's display rule.
   * `.demo { display: flex }` outranks the browser's `[hidden] { display: none }`,
   * so without this the demonstration banner could never hide itself -- and
   * that banner is DRIVEN BY THE DATA: it is meant to disappear the day real
   * grading arrives (ADR-0016). A latent bug that only surfaces on the day the
   * client's data becomes real is the worst kind, so it is guarded by a test. */
  [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 { 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 380px; 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); }
  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; }
  .card > .note b { color:var(--ink); font-weight:600; }

  /* ---------- provenance ---------- */
  .prov { display:grid; gap:10px; grid-template-columns:1fr; }
  @media (min-width:700px) { .prov { grid-template-columns:repeat(3,1fr); } }
  .provcell { border:1px solid var(--grid); border-radius:12px; padding:14px; min-width:0; }
  .provcell .k { font-size:12px; color:var(--muted); font-weight:600;
                 letter-spacing:0.03em; text-transform:uppercase; }
  .provcell .v { font-size:26px; font-weight:650; letter-spacing:-0.02em;
                 font-variant-numeric:tabular-nums; margin-top:4px; }
  .provcell .d { font-size:13px; color:var(--ink-2); margin-top:2px; }
  .provcell.real   { border-color:var(--good);  }
  .provcell.made   { border-color:#fab219; background:var(--critical-wash); }
  .provcell.made .v { color:var(--repair); }

  /* ---------- grade split ---------- */
  .splitrow { margin-bottom:20px; }
  .splitrow:last-child { margin-bottom:0; }
  .splithead { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
  .splithead h3 { font-size:15px; margin:0; }
  .splithead .qty { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .bar { display:flex; height:34px; border-radius:8px; overflow:hidden; margin-top:10px;
         border:1px solid var(--border); }
  .bar > span { display:flex; align-items:center; justify-content:center;
                font-size:12.5px; font-weight:650; color:#fff; min-width:0;
                white-space:nowrap; overflow:hidden; }
  .bar .g { background:var(--good); }
  .bar .r { background:var(--repair); }
  .bar .s { background:var(--scrap); }
  .splitlegend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px;
                 font-size:12.5px; color:var(--ink-2); }
  .splitlegend span { display:flex; align-items:center; gap:6px; }
  .sw { width:11px; height:11px; border-radius:3px; flex:none; }

  /* ---------- the interval bar: this dashboard's whole argument ---------- */
  .ivwrap { position:relative; height:22px; min-width:120px; }
  .ivtrack { position:absolute; left:0; right:0; top:10px; height:2px; background:var(--grid); }
  .ivband { position:absolute; top:5px; height:12px; border-radius:3px; background:var(--band); }
  .ivdot { position:absolute; top:5px; width:3px; height:12px; border-radius:2px;
           background:var(--series); transform:translateX(-1px); }
  .ivband.over { background:var(--critical-wash); }
  .ivdot.over  { background:var(--critical); }
  .ivtol { position:absolute; top:2px; bottom:2px; width:0;
           border-left:1.5px dashed var(--critical); }

  /* ---------- 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; stroke-dasharray:5 4;
         vector-effect:non-scaling-stroke; }
  .ln  { fill:none; stroke:var(--series); stroke-width:2.5; stroke-linejoin:round;
         stroke-linecap:round; vector-effect:non-scaling-stroke; }
  .ln2 { fill:none; stroke:var(--raw); stroke-width:2; stroke-linejoin:round;
         stroke-linecap:round; vector-effect:non-scaling-stroke; }
  .bnd { fill:var(--band); stroke:none; }
  .bars rect { fill:var(--series); }
  .bars rect.b2 { fill:var(--raw); }
  .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; }
  .hit { position:absolute; top:0; bottom:0; transform:translateX(-50%); }

  /* ---------- tables ---------- */
  .tblscroll { overflow-x:auto; margin-top:6px; }
  table { border-collapse:collapse; width:100%; font-size:13px; }
  th, td { text-align:left; padding:7px 10px 7px 0; border-bottom:1px solid var(--grid);
           white-space:nowrap; }
  th { color:var(--muted); font-weight:600; font-size:12px; }
  td.n { text-align:right; font-variant-numeric:tabular-nums; padding-right:16px; }
  td.name { white-space:normal; min-width:150px; }
  td.iv { width:180px; min-width:150px; padding-right:16px; }
  tr.over td.pct { color:var(--critical); font-weight:650; }
  .tag {
    font-size:10.5px; font-weight:700; letter-spacing:0.02em; padding:2px 6px;
    border-radius:999px; white-space:nowrap; margin-left:6px;
  }
  .tag.low  { background:var(--chip); color:var(--ink-2); }
  .tag.bad  { background:var(--critical); color:#fff; }
  .pct { font-variant-numeric:tabular-nums; font-weight:600; }

  .callout {
    margin:16px 0 0; padding:13px 15px; background:var(--page);
    border:1px solid var(--grid); border-left:3px solid var(--series);
    border-radius:10px; font-size:13.5px; color:var(--ink-2);
  }
  .callout b { color:var(--ink); }
  .callout.warn { border-left-color:#fab219; }
  .callout p { margin:0 0 8px; }
  .callout p:last-child { margin-bottom:0; }

  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  "; }

  footer { margin-top:26px; font-size:12.5px; color:var(--muted); }
  footer p { margin:0 0 6px; }

  @media print {
    body { background:#fff; }
    .toolbar { display:none; }
    .card { break-inside:avoid; border-color:#ccc; }
    .demo { border-color:#999; }
  }