/* Shared by both dashboards. Deliberately plain: the audience is management,
   and a chart of twenty-two orders tells them nothing the number twenty-two
   does not. Numbers, tables, and one diagram that carries the conclusion. */
:root {
  --bg: #f7f7f9;
  --surface: #fff;
  --surface-2: #f2f2f5;
  --line: #e4e4ea;
  --line-2: #d3d3dc;
  --ink: #15161a;
  --ink-2: #5c5f6b;
  --ink-3: #8b8e9a;
  --accent: #2f5cff;
  --accent-soft: #eef2ff;
  --ok: #0f8a4a;
  --ok-soft: #e8f6ee;
  --warn: #9a6200;
  --warn-soft: #fdf3e2;
  --err: #c02a2a;
  --err-soft: #fdeeee;
  --r: 14px;
  --shadow: 0 1px 2px rgba(16, 18, 25, .05), 0 8px 24px -12px rgba(16, 18, 25, .14);
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

header {
  display: flex; align-items: center; gap: 14px; padding: 0 26px; height: 60px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650 }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok);
       box-shadow: 0 0 0 3px var(--ok-soft) }
.grow { flex: 1 }
a.btn, .btn {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 7px 12px; cursor: pointer; text-decoration: none;
}
a.btn:hover, .btn:hover { border-color: #b6b7c2; background: var(--surface-2) }

main { max-width: 1080px; margin: 0 auto; padding: 26px }
h2 { font-size: 15px; margin: 30px 0 12px; letter-spacing: -.01em }
h2:first-of-type { margin-top: 6px }
.sub { font-size: 12.5px; color: var(--ink-3); margin: -8px 0 12px }

/* headline figures */
.figs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }
.fig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
       padding: 14px 16px; box-shadow: var(--shadow) }
.fig .n { font-size: 25px; font-weight: 700; letter-spacing: -.02em;
          font-variant-numeric: tabular-nums }
.fig .k { font-size: 11.5px; color: var(--ink-3); font-weight: 600;
          text-transform: uppercase; letter-spacing: .05em; margin-top: 2px }

/* tables */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
        box-shadow: var(--shadow); overflow: hidden }
table { width: 100%; border-collapse: collapse; font-size: 13.5px }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--ink-3); padding: 10px 16px; border-bottom: 1px solid var(--line) }
td { padding: 10px 16px; border-bottom: 1px solid var(--surface-2) }
tr:last-child td { border-bottom: 0 }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }

.tag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
       letter-spacing: .03em }
.tag.ucp { background: var(--surface-2); color: var(--ink-2) }
.tag.acp { background: #ff8a3d; color: #1a1a1a }
.pill { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px }
.pill.ok { background: var(--ok-soft); color: var(--ok) }
.pill.wait { background: var(--warn-soft); color: var(--warn) }
.pill.bad { background: var(--err-soft); color: var(--err) }

.empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: 13px }
.note { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.6 }

/* the boundary — the one diagram worth having */
.bands { display: grid; gap: 10px }
.band { border-radius: var(--r); padding: 14px 16px; border: 1px solid var(--line) }
.band h3 { margin: 0 0 4px; font-size: 13px }
.band .items { font-size: 13.5px; color: var(--ink-2) }
.band .ev { font-size: 11.5px; color: var(--ink-3); margin-top: 6px }
.band.alone { background: var(--ok-soft); border-color: #bfe4cf }
.band.buyer { background: var(--warn-soft); border-color: #f0dcb4 }
.band.platform { background: var(--err-soft); border-color: #f2c9c9 }

/* recorded test run */
.suite { border-bottom: 1px solid var(--surface-2) }
.suite:last-child { border-bottom: 0 }
.suite summary { padding: 11px 16px; cursor: pointer; display: flex; align-items: center;
                 gap: 10px; font-size: 13.5px; list-style: none }
.suite summary::-webkit-details-marker { display: none }
.suite summary .nm { font-weight: 600; min-width: 150px }
.suite summary .pr { color: var(--ink-3); font-size: 12.5px; flex: 1 }
.checks { padding: 4px 16px 14px 16px; background: var(--surface-2) }
.chk { font-size: 12.5px; padding: 3px 0; display: flex; gap: 9px; align-items: baseline }
.chk .m { font-weight: 700; font-size: 10.5px; min-width: 34px }
.chk.ok .m { color: var(--ok) }
.chk.no .m { color: var(--err) }
.chk .d { color: var(--ink-3); font-size: 11.5px }

/* --------------------------------------------------------------------------
   Charts and diagrams.

   Every chart here is hand-drawn SVG. No charting library, no CDN: the pages
   have to render in a client's boardroom on a guest network, and a blocked
   script tag that turns the story into a blank rectangle is not a risk worth
   taking for a bar chart.
   -------------------------------------------------------------------------- */
.row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr }
@media (max-width: 900px) { .row { grid-template-columns: 1fr } }

.panel { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 18px }
.panel h3 { margin: 0 0 2px; font-size: 13px }
.panel .cap { font-size: 11.5px; color: var(--ink-3); margin: 0 0 14px }
.panel svg { display: block; width: 100%; height: auto; overflow: visible }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px;
          font-size: 11.5px; color: var(--ink-2) }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
            margin-right: 6px; vertical-align: -1px }

/* the purchase flow — the one picture management should leave with */
.flow { padding: 20px 18px 16px }
.flow .lane { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
              color: var(--ink-3); font-weight: 700 }

text { font-family: Inter, -apple-system, "Segoe UI", sans-serif }
/* Chart type was set for a 620-wide viewBox and then scaled down to fit the
   panel, so 10px on paper arrived on screen at about 8. Sized up so the labels
   are legible on a projector, which is where these are actually read. */
.t-title { font-size: 13.5px; font-weight: 650; fill: var(--ink) }
.t-sub { font-size: 12.5px; fill: var(--ink-2) }
.t-axis { font-size: 12px; fill: var(--ink-3) }
.t-val { font-size: 12.5px; font-weight: 700; fill: var(--ink); }

.hint { display: flex; gap: 10px; align-items: flex-start; font-size: 12px;
        color: var(--ink-2); background: var(--accent-soft); border-radius: 10px;
        padding: 10px 13px; margin-top: 14px; line-height: 1.55 }
.hint b { color: var(--ink) }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
      font-size: 12.5px; margin: 0 }
.kv dt { color: var(--ink-3) }
.kv dd { margin: 0; font-weight: 550 }

.bar-t { height: 8px; border-radius: 4px; background: var(--surface-2);
         overflow: hidden; min-width: 90px }
.bar-t i { display: block; height: 100%; background: var(--ok) }
.bar-t i.part { background: var(--accent) }