/* ============================================================
   Indigo PoP - WIREFRAME stylesheet (Nestle India chocolate visicooler variant)
   Low-fidelity sign-off artifact. Greyscale only.
   System font stack, no web fonts, no external dependencies.
   Base adapted from the TOS traceability wireframe.
   ============================================================ */

:root {
  --ink:        #2b2b2b;   /* near-black text                  */
  --ink-soft:   #555;      /* secondary text                   */
  --ink-faint:  #888;      /* labels, captions, placeholders   */
  --line:       #b3b3b3;   /* standard box border              */
  --line-soft:  #cfcfcf;   /* faint divider                    */
  --fill:       #f4f4f4;   /* panel fill                       */
  --fill-2:     #ececec;   /* nested / darker panel fill       */
  --fill-3:     #e2e2e2;   /* placeholder block fill           */
  --paper:      #fafafa;   /* page background                  */
  --note:       #f3ead2;   /* annotation sticky-note fill      */
  --note-line:  #d9c78c;   /* annotation border                */
  --note-ink:   #6b5d2f;   /* annotation text                  */
  --stamp:      #9a9a9a;   /* WIREFRAME stamp grey             */
  --radius:     3px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  background-image:
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------- WIREFRAME corner stamp (on every page) ---------- */
.wf-stamp {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 50;
  border: 2px solid var(--stamp);
  color: var(--stamp);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: var(--radius);
  transform: rotate(4deg);
  background: rgba(250,250,250,0.85);
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------- header ribbon ---------- */
.ribbon {
  background: var(--fill-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 7px 18px;
  text-align: center;
}
.ribbon strong { color: var(--ink); letter-spacing: 0.14em; }
.ribbon .dot { color: var(--ink-faint); margin: 0 7px; }

/* ---------- top nav ---------- */
.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 9px 18px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topnav .brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.topnav .brand .sub {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 11px;
  display: block;
  letter-spacing: 0.06em;
}
.topnav a.nav {
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 5px 11px;
  font-size: 12.5px;
  background: var(--fill);
  white-space: nowrap;
}
.topnav a.nav:hover { background: var(--fill-2); color: var(--ink); }
.topnav a.nav.active {
  border-style: solid;
  border-color: var(--ink-faint);
  background: var(--fill-2);
  color: var(--ink);
  font-weight: 600;
}
.topnav .nav-num {
  color: var(--ink-faint);
  font-size: 10px;
  margin-right: 5px;
}

/* ---------- layout shell ---------- */
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 22px 80px;
}
.page-title {
  font-size: 20px;
  font-weight: 700;
  margin: 6px 0 2px;
}
.page-sub {
  color: var(--ink-faint);
  font-size: 13px;
  margin: 0 0 18px;
}

/* generic wireframe region */
.region {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
  margin-bottom: 18px;
}
.region.dashed { border-style: dashed; }
.region.fill   { background: var(--fill); }
.region h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 7px;
}
.region h3 {
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--ink);
}

.cols   { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.col    { flex: 1 1 0; min-width: 240px; }
.col-narrow { flex: 0 0 300px; }
.col-wide   { flex: 2 1 0; min-width: 320px; }

.muted   { color: var(--ink-faint); }
.small   { font-size: 12px; }
.tiny    { font-size: 11px; }
.mono    { font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace; }
.mb0 { margin-bottom: 0; }
.center { text-align: center; }

/* ---------- placeholder boxes ---------- */
.ph {
  background: var(--fill-3);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 1.3;
  padding: 6px;
}
.ph.scan {
  background-color: var(--fill-3);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.045) 0,
    rgba(0,0,0,0.045) 2px,
    transparent 2px,
    transparent 7px
  );
}
.photo-ph { height: 150px; }

/* ---------- form fields (static, wireframe) ---------- */
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.control {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.control.auto { background: var(--fill); color: var(--ink-soft); }
.control.select::after {
  content: "▾";
  color: var(--ink-faint);
  font-size: 11px;
}
.control .chosen { color: var(--ink); }

.btn {
  display: inline-block;
  border: 1px solid var(--ink-faint);
  background: var(--fill-2);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  text-decoration: none;
  cursor: default;
}
.btn.block { display: block; text-align: center; padding: 11px; font-weight: 600; }
.btn.ghost { background: #fff; border-style: dashed; color: var(--ink-soft); }

.radioset { display: flex; gap: 8px; flex-wrap: wrap; }
.radio {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--ink-soft);
  background: #fff;
}
.radio.on {
  border-color: var(--ink-faint);
  background: var(--fill-2);
  color: var(--ink);
  font-weight: 600;
}
.radio .mark { color: var(--ink); margin-right: 5px; }

/* ---------- pills / status tags ---------- */
.pill {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--fill);
  white-space: nowrap;
}
.pill.solid { background: var(--fill-2); color: var(--ink); border-color: var(--ink-faint); }
.pill.alarm { border-color: var(--ink); color: var(--ink); font-weight: 700; border-style: dashed; }
.pill.ok    { border-color: var(--ink-faint); }

/* ---------- data table ---------- */
table.doclist {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
table.doclist th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  font-weight: 700;
}
table.doclist td {
  border-bottom: 1px solid var(--line-soft);
  padding: 8px;
  vertical-align: middle;
  color: var(--ink-soft);
}
table.doclist tr:last-child td { border-bottom: none; }
table.doclist tr.missing td { background: repeating-linear-gradient(
    -45deg, rgba(0,0,0,0.03) 0, rgba(0,0,0,0.03) 2px, transparent 2px, transparent 7px); }

/* ---------- annotation callout (sticky-note) ---------- */
.note {
  background: var(--note);
  border: 1px solid var(--note-line);
  border-left: 4px solid var(--note-line);
  color: var(--note-ink);
  border-radius: var(--radius);
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 14px 0;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.04);
}
.note .tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--note-ink);
  opacity: 0.8;
  margin-right: 7px;
  border: 1px solid var(--note-line);
  border-radius: 2px;
  padding: 0 5px;
}
.note p { margin: 5px 0 0; }

/* ---------- QR placeholder ---------- */
.qr {
  width: 92px; height: 92px;
  margin: 4px auto 8px;
  border: 1px solid var(--line);
  background:
    repeating-conic-gradient(#cfcfcf 0% 25%, #e9e9e9 0% 50%) 50% / 14px 14px;
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  font-size: 9px;
}
.qr.sm { width: 54px; height: 54px; }

/* ============================================================
   Dashboard components (Indigo PoP additions)
   ============================================================ */

/* KPI tiles */
.kpi-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.kpi {
  flex: 1 1 160px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px 16px;
}
.kpi.lead { border-width: 2px; border-color: var(--ink-faint); background: var(--fill); }
.kpi.alarm { border-style: dashed; border-color: var(--ink); }
.kpi .kpi-num { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.05; }
.kpi .kpi-num .of { font-size: 16px; font-weight: 600; color: var(--ink-faint); }
.kpi .kpi-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); margin-top: 4px;
}

/* horizontal install meter */
.meter {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: repeating-linear-gradient(
    -45deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 3px, transparent 3px, transparent 9px);
  display: flex;
  overflow: hidden;
  position: relative;
}
.meter .fill {
  background: var(--ink);
  height: 100%;
  display: flex; align-items: center;
  color: #fff; font-size: 11.5px; font-weight: 700;
  padding-left: 10px;
  white-space: nowrap;
}
.meter-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-faint); margin-top: 8px;
}
.meter-legend .sw { display: inline-block; width: 14px; height: 12px; border: 1px solid var(--line); margin-right: 6px; vertical-align: -1px; }
.meter-legend .sw.installed { background: var(--ink); border-color: var(--ink); }
.meter-legend .sw.missing { background: repeating-linear-gradient(
    -45deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 3px, transparent 3px, transparent 9px); }

/* zone rows */
.zone-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.zone-row .zone-name { flex: 0 0 92px; font-weight: 600; font-size: 13px; }
.zone-row .zone-track {
  flex: 1 1 auto; height: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: repeating-linear-gradient(
    -45deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 3px, transparent 3px, transparent 9px);
  overflow: hidden;
}
.zone-row .zone-fill { display: block; height: 100%; background: var(--ink); opacity: 0.78; }
.zone-row .zone-val { flex: 0 0 96px; text-align: right; font-size: 12.5px; color: var(--ink-soft); }
.zone-row .zone-val strong { color: var(--ink); }

/* exception list */
.exc { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.exc .exc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.exc .exc-row:last-child { border-bottom: none; }
.exc .exc-row .exc-icon {
  flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--ink-faint);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink);
}

/* level badge (Level 1 / Level 2 checkpoint marker) */
.lvl {
  display: inline-block;
  border: 1px solid var(--ink-faint);
  background: var(--fill-2);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.lvl.two { border-style: dashed; }

/* two-stage checkpoint funnel (dashboard) */
.flow3 { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; }
.flow3 .node {
  flex: 1 1 150px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px 12px;
  text-align: center;
}
.flow3 .node.lead { border-width: 2px; border-color: var(--ink-faint); background: var(--fill); }
.flow3 .node .n-num { font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1.05; }
.flow3 .node .n-num .of { font-size: 14px; font-weight: 600; color: var(--ink-faint); }
.flow3 .node .n-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-faint); margin-top: 5px;
}
.flow3 .node .n-lvl { margin-bottom: 7px; }
.flow3 .arrow {
  flex: 0 0 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 6px; text-align: center;
}
.flow3 .arrow .a-line { font-size: 20px; color: var(--ink-faint); line-height: 1; }
.flow3 .arrow .a-loss { font-size: 11px; color: var(--ink); font-weight: 700; margin-top: 4px; }
.flow3 .arrow .a-loss span { display: block; font-size: 9.5px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 640px) {
  .flow3 .arrow { flex: 1 1 100%; flex-direction: row; gap: 8px; padding: 8px 0; }
  .flow3 .arrow .a-line { transform: rotate(90deg); }
}

/* admin: code batch grid */
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.code-cell {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 8px; text-align: center;
}
.code-cell .qr { margin: 0 auto 6px; }
.code-cell .cc-id { font-size: 10.5px; }
.code-cell .cc-pair { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
.code-cell .cc-pair > div { text-align: center; }
.code-cell .cc-pair .qr { margin: 0 auto 2px; }
.qr.xs { width: 44px; height: 44px; }

/* phone frame (mobile scan screen) */
.phone-stage {
  display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; justify-content: center;
}
.phone {
  flex: 0 0 auto;
  width: 340px;
  border: 10px solid #444;
  border-radius: 34px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.phone .notch { height: 22px; background: #444; border-radius: 0 0 12px 12px; width: 130px; margin: 0 auto; }
.phone .screen { padding: 16px 16px 26px; }
.phone .scan-head { text-align: center; border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; margin-bottom: 14px; }
.phone-label { flex: 0 0 280px; max-width: 320px; }

/* ---------- cover (index) ---------- */
.cover { max-width: 980px; margin: 40px auto; text-align: center; padding: 0 20px; }
.cover .big-stamp {
  display: inline-block;
  border: 3px solid var(--stamp);
  color: var(--stamp);
  font-weight: 800;
  letter-spacing: 0.25em;
  font-size: 22px;
  padding: 10px 22px;
  border-radius: var(--radius);
  transform: rotate(-2deg);
  margin-bottom: 22px;
}
.cover h1 { font-size: 30px; margin: 6px 0; }
.cover .lede { color: var(--ink-soft); font-size: 15px; max-width: 620px; margin: 10px auto 26px; }
.screen-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; text-align: left; }
.screen-card {
  flex: 1 1 200px;
  max-width: 225px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
  text-decoration: none;
  color: var(--ink);
}
.screen-card:hover { background: var(--fill); }
.screen-card .sc-num { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-faint); }
.screen-card h3 { margin: 4px 0 6px; font-size: 15px; }
.screen-card p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.screen-card .hero-tag {
  display: inline-block;
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: 0.08em;
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  padding: 1px 6px;
  color: var(--ink);
  background: var(--fill-2);
}

.legend { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 28px; font-size: 12px; color: var(--ink-faint); }
.legend .item { display: flex; align-items: center; gap: 7px; }
.swatch { width: 26px; height: 14px; border-radius: 2px; display: inline-block; }
.swatch.note { background: var(--note); border: 1px solid var(--note-line); }
.swatch.ph   { background: var(--fill-3); border: 1px solid var(--line); }
.swatch.field { background: #fff; border: 1px dashed var(--line); }

/* ---------- footer ---------- */
.wf-foot {
  border-top: 1px solid var(--line-soft);
  margin-top: 30px;
  padding-top: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
}

@media (max-width: 720px) {
  .col-narrow { flex: 1 1 100%; }
  .topnav { gap: 6px; }
  .zone-row .zone-name { flex: 0 0 70px; }
}


/* ============================================================
   Nestle India variant (chocolate visicooler, QR + live tracker)
   Branded chrome only. The wireframe body stays greyscale on
   purpose: the client is signing off on WHAT it does, not how
   it looks. Chocolate brown is confined to the client band, the
   level badges and the lead figures. The Nestle wordmark is used
   as published: grey on light, one-colour white on the dark band.
   ============================================================ */

:root {
  --choc:      #4b2e22;   /* chocolate brown, band + accents  */
  --choc-deep: #321e16;   /* darker brown, band underline     */
  --choc-tint: #f4ece7;   /* faintest brown wash              */
}

/* ---------- client band (top of every page) ---------- */
.nbar {
  background: var(--choc);
  border-bottom: 3px solid var(--choc-deep);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
}
.nbar .nb-logo { height: 24px; width: auto; display: block; flex: 0 0 auto; }
.nbar .nb-rule { flex: 0 0 auto; width: 1px; height: 26px; background: rgba(255,255,255,0.45); }
.nbar .nb-txt { font-size: 12.5px; letter-spacing: 0.04em; line-height: 1.35; }
.nbar .nb-txt strong { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; }
.nbar .nb-txt span { opacity: 0.92; }
.nbar .nb-right {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2px;
  padding: 3px 9px;
  white-space: nowrap;
}
@media (max-width: 560px) { .nbar .nb-right { margin-left: 0; } }

/* The band carries its own CONCEPT WIREFRAME badge and the ribbon says it too. */
.wf-stamp { display: none; }

/* ---------- restrained brown accents ---------- */
.lvl.choc      { border-color: var(--choc); color: var(--choc); background: var(--choc-tint); }
.kpi.lead.choc { border-color: var(--choc); background: var(--choc-tint); }
.kpi.lead.choc .kpi-num { color: var(--choc-deep); }
.cover .nestle-mark { height: 46px; width: auto; margin: 0 auto 18px; display: block; }

/* ---------- cooler illustration ---------- */
.vc-stage { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; justify-content: center; }
.vc-art { flex: 0 0 auto; }
.vc-art svg { display: block; height: 320px; width: auto; max-width: 100%; }
.vc-side { flex: 1 1 280px; min-width: 260px; }
.vc-key { list-style: none; margin: 0; padding: 0; }
.vc-key li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-soft);
}
.vc-key li:last-child { border-bottom: none; }
.vc-key .k-dot {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--ink-faint); background: var(--fill-2); color: var(--ink);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.vc-key strong { color: var(--ink); display: block; }

/* ---------- two-level explainer (cover) ---------- */
.levels2 { display: flex; gap: 16px; flex-wrap: wrap; text-align: left; margin: 0 auto 26px; max-width: 860px; }
.levels2 .lv {
  flex: 1 1 300px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 14px 16px;
}
.levels2 .lv h3 { margin: 8px 0 6px; font-size: 15px; }
.levels2 .lv p { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-soft); }
.levels2 .lv ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-soft); }
.levels2 .lv .when { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- live tracker strip (inside the phone, scan head) ---------- */
.live {
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius);
  background: var(--fill);
  padding: 8px 10px;
  margin: 10px 0 0;
  text-align: left;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.live .live-h {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 5px;
}
.live .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-right: 6px; vertical-align: 0; }
.live .live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.live .live-grid b { color: var(--ink); font-weight: 600; }

/* ---------- event timeline (dashboard, one cooler) ---------- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 106px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.tl li { display: flex; gap: 0; align-items: flex-start; padding: 6px 0; font-size: 12.5px; color: var(--ink-soft); }
.tl .t-time { flex: 0 0 98px; white-space: nowrap; font-size: 11.5px; color: var(--ink-faint); text-align: right; padding-right: 16px; font-variant-numeric: tabular-nums; }
.tl .t-dot {
  flex: 0 0 18px; width: 18px; height: 18px; margin-left: -1px; margin-right: 10px;
  border-radius: 50%; border: 1px solid var(--ink-faint); background: #fff;
  font-size: 9px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.tl .t-dot.trk { border-style: dashed; }
.tl .t-dot.qr  { background: var(--fill-2); }
.tl .t-body { flex: 1 1 auto; }
.tl .t-body strong { color: var(--ink); }

/* ---------- comparison table (tracker options) ---------- */
table.cmp { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.cmp th, table.cmp td { border-bottom: 1px solid var(--line-soft); padding: 9px 10px; text-align: left; vertical-align: top; color: var(--ink-soft); }
table.cmp thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); border-bottom: 1px solid var(--line); }
table.cmp thead th.opt { font-size: 12px; letter-spacing: 0.04em; color: var(--ink); text-transform: none; }
table.cmp tbody th { font-weight: 600; color: var(--ink); width: 34%; }
table.cmp td.yes { color: var(--ink); }
table.cmp td.no  { color: var(--ink-faint); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: none; }

/* small table helpers */
table.doclist td.num { font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x table { min-width: 720px; }

/* five screen cards on the internal cover sit on one row */
.cover { max-width: 1220px; }