/* BAS World brand book 2026: primary green / black / white, secondary dark
   green and greys; orange, red and blue only for warnings, errors and info.
   Titillium Web throughout; Black weight once per page, uppercase. */
:root {
  --bg: #f6f6f5;
  --surface: #ffffff;
  --line: #e8e8e6;
  --line-strong: #b6b6b6;  /* light grey */
  --ink: #1d1d1a;          /* black */
  --ink-muted: #5e5e5e;    /* dark grey */
  --ink-faint: #6b6b6b;   /* 4.9:1 on the page background, 5.3:1 on white */
  --green: #009e48;        /* primary green */
  --green-dark: #115f37;   /* dark green */
  --green-soft: #e6f5ec;

  /* status: green / orange (warning) / red (error), each with a text tone */
  --good: #009e48;  --good-ink: #115f37;  --good-bg: #e6f5ec;
  --warn: #d87200;  --warn-ink: #a35600;  --warn-bg: #fbeedd;
  --poor: #cc2942;  --poor-ink: #b3213a;  --poor-bg: #f9e3e6;
  --info: #0068d3;

  --font: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(18px, 3vmin, 48px);
  --radius: 16px;
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { overflow-y: auto; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.7vmin, 22px);
  padding: 0 var(--gutter) calc(clamp(12px, 1.6vmin, 24px) + env(safe-area-inset-bottom, 0px));
  min-height: 100%;
}

.num { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* ---------- top strip (as on basworld.com) ---------- */
.topbar {
  margin-inline: calc(-1 * var(--gutter));
  padding: 3px var(--gutter);
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: clamp(14px, 1.5vmin, 19px);
  font-weight: 600;
}
.topbar .refresh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .clock { font-size: clamp(16px, 1.7vmin, 22px); font-weight: 600; color: #d4d4d4; letter-spacing: .02em; }

/* Steady: the scores change once a day, so nothing here should look busy. */
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.dot.stale { background: var(--warn); }
.dot.down { background: var(--poor); }

/* Which screen is up, and how long until the other one. */
.screen-tabs { display: flex; gap: 2px; }
.screen-tabs .tab {
  position: relative;
  font: inherit;
  font-weight: 600;
  color: #9a9a9a;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 5px 14px 9px;
  cursor: pointer;
}
.screen-tabs .tab:hover:not(:disabled), .screen-tabs .tab[aria-pressed="true"] { color: #fff; }
.screen-tabs .tab:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.screen-tabs .tab:disabled { opacity: .45; cursor: default; }
.screen-tabs .tab::before, .screen-tabs .tab::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 3px;
  border-radius: 2px;
  opacity: 0;
}
.screen-tabs .tab::before { background: rgba(255,255,255,.18); }
.screen-tabs .tab::after { background: var(--green); transform-origin: left center; transform: scaleX(0); }
.screen-tabs .tab.active::before, .screen-tabs .tab.active::after { opacity: 1; }
.screen-tabs .tab.active::after { animation: tab-fill 30s linear forwards; }
.screen-tabs .tab.pinned::after { animation: none; transform: none; }
@keyframes tab-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .screen-tabs .tab.active::after { animation: none; transform: none; } }

/* ---------- header ---------- */
header {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vmin, 28px);
  flex-wrap: wrap;
  padding-block: clamp(4px, .8vmin, 10px) clamp(12px, 1.4vmin, 18px);
  border-bottom: 1px solid var(--line);
}

/* Sub-label lockup, as BAS World Auction / Logistics: the name in bold
   italic, right-aligned under the wordmark. */
.brand { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.brand .logo { height: clamp(30px, 3.2vmin, 42px); width: auto; display: block; }
.sublabel {
  margin-top: -2px;
  font-size: clamp(15px, 1.6vmin, 21px);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--ink);
}

.page-title {
  margin: 0;
  padding-left: clamp(16px, 2vmin, 28px);
  border-left: 2px solid var(--line);
  font-size: clamp(22px, 2.4vmin, 32px);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
}
.page-title .accent { color: var(--green); }

/* Subtitle marker from the brand book: green arrow, black text. */
.arrowed { display: flex; align-items: center; gap: 10px; }
.arrowed::before {
  content: "";
  flex: none;
  width: 0; height: 0;
  border-style: solid;
  border-width: .32em 0 .32em .5em;
  border-color: transparent transparent transparent var(--green);
}

/* The header's right side answers the screen's question in one line. */
.answer { margin-left: auto; display: flex; min-width: 0; }
.summary, .verdict {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vmin, 16px);
  padding: clamp(6px, .8vmin, 10px) clamp(14px, 2vmin, 24px) clamp(6px, .8vmin, 10px) clamp(6px, .8vmin, 10px);
  border-radius: 14px;
  background: var(--c-bg);
  color: var(--c);
  min-width: 0;
}
.sum-mark, .verdict .mark {
  flex: none;
  width: clamp(32px, 3.8vmin, 46px);
  height: clamp(32px, 3.8vmin, 46px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-mark);
  color: var(--c-on-mark, #fff);
}
.sum-mark svg, .verdict .mark svg { width: 46%; height: 46%; }
.sum-text, .v-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
.sum-text strong, .v-text strong { font-size: clamp(19px, 2.4vmin, 30px); font-weight: 700; }
.sum-text span, .v-text .why { font-size: clamp(14px, 1.55vmin, 19px); font-weight: 600; color: var(--c-sub, var(--ink-muted)); }
.summary.tone-down { --c-bg: var(--poor); --c: #fff; --c-sub: rgba(255,255,255,.9); --c-mark: #fff; --c-on-mark: var(--poor); }
.summary.tone-up { --c-bg: var(--good-bg); --c: var(--good-ink); --c-sub: var(--good-ink); --c-mark: var(--good); }
.summary.tone-steady { --c-bg: var(--surface); --c: var(--ink); --c-mark: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.summary.tone-stale { --c-bg: var(--warn-bg); --c: var(--warn-ink); --c-sub: var(--ink); --c-mark: var(--warn); }

/* ---------- page cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 1.6vmin, 24px);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 1.6vmin, 22px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }

.icon-badge {
  flex: none;
  width: clamp(34px, 3vmin, 40px);
  height: clamp(34px, 3vmin, 40px);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.icon-badge svg { width: 58%; height: 58%; stroke: var(--accent); fill: none; }

.card-head .titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.card-head h2 { margin: 0; font-size: clamp(18px, 2.3vmin, 28px); font-weight: 700; line-height: 1.15; }
.card-head .path {
  color: var(--ink-faint);
  font-size: clamp(13px, 1.3vmin, 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile stays the headline score; desktop sits beside it at half the size.
   The captions take the room the gauge used to keep above it, so the card,
   and the chart under it, keep their height on the TV. */
.gauges {
  --gauge-size: clamp(110px, 19vmin, 210px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(14px, 2.4vmin, 32px);
}
.gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; width: var(--gauge-size); min-width: 0; }
.gauge.desktop { width: calc(var(--gauge-size) / 2); }

.gauge-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 220 / 114;
}
.gauge-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }

.gauge-readout {
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  display: flex;
  justify-content: center;
}
.gauge-readout .val { font-size: clamp(44px, 5.4vmin, 70px); font-weight: 700; line-height: 1; color: var(--c); }
.gauge.desktop .gauge-readout { bottom: -2px; }
.gauge.desktop .gauge-readout .val { font-size: clamp(22px, 2.8vmin, 36px); }

.gauge-caption {
  font-size: clamp(11px, 1.3vmin, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-muted);
}

.gauge-track { fill: none; stroke: var(--line); stroke-width: 13; stroke-linecap: round; }
.gauge-fill { fill: none; stroke-width: 13; stroke-linecap: round; }
.gauge-tick { stroke: var(--surface); stroke-width: 3; }
.gauge-goal { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(13px, 1.5vmin, 18px);
  font-weight: 700;
  padding: 4px 12px 4px 10px;
  border-radius: 360px;
  width: fit-content;
}
.pill .dot2 { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* Change against the page's own median: the signal the wall leads with.
   Worse is solid red, better is tinted green, inside the noise stays grey. */
.change {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 5px 11px 6px;
  border-radius: 12px;
  line-height: 1;
}
.change-num { display: inline-flex; align-items: center; gap: .14em; font-size: clamp(26px, 3.4vmin, 44px); font-weight: 700; }
.change-num svg { width: .46em; height: .46em; }
.change-sub { font-size: clamp(12px, 1.35vmin, 16px); font-weight: 600; white-space: nowrap; }
.change.up { background: var(--good-bg); color: var(--good-ink); }
.change.down { background: var(--poor); color: #fff; }
.change.steady { color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.change.new { color: var(--ink-faint); padding-top: 10px; }

.card.regressed { border-color: var(--poor); box-shadow: inset 0 0 0 1px var(--poor); }
/* Scores from a failed or overdue audit keep their numbers but lose their colour. */
.cards.stale .card { filter: grayscale(1); opacity: .78; }

.goal-note { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(14px, 1.65vmin, 20px); font-weight: 600; color: var(--ink-muted); }
.goal-note strong { color: var(--ink); font-size: 1.2em; }
.goal-note.met { color: var(--good-ink); }
.goal-note svg { width: 1em; height: 1em; }

.metrics {
  display: grid;
  /* minmax(0, ...) so a long label ellipsizes instead of pushing values out of the card. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3px, .45vmin, 8px);
  border-top: 1px solid var(--line);
  margin-top: clamp(6px, 1.1vmin, 14px);
  padding-top: clamp(6px, 1vmin, 12px);
}

.metric { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric .name { display: flex; align-items: baseline; gap: 8px; line-height: 1.2; min-width: 0; }
.metric .name strong { flex: none; font-size: clamp(15px, 1.85vmin, 23px); font-weight: 700; }
.metric .name .full { font-size: clamp(13px, 1.4vmin, 17px); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric .v { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: clamp(18px, 2.25vmin, 28px); white-space: nowrap; }
.mdot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.mdot.good { background: var(--good); }
.mdot.warn { background: var(--warn); }
.mdot.poor { background: var(--poor); }
.metric .flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(13px, 1.45vmin, 17px);
  font-weight: 700;
  color: #fff;
  background: var(--poor);
  border-radius: 360px;
  padding: 2px 10px;
}
.metric .flag svg { width: .7em; height: .7em; }
.metric.flagged .v { color: var(--poor-ink); }
/* Dashed like the peak line on the trend. */
.metric.peak { border-top: 1px dashed var(--line-strong); padding-top: clamp(4px, .8vmin, 10px); margin-top: 2px; }
.metric.peak .v { font-size: clamp(16px, 1.95vmin, 25px); gap: 7px; }
.metric .sep { color: var(--ink-faint); font-weight: 400; }
.metric .gap { color: var(--ink-faint); font-size: .72em; font-weight: 600; margin-left: 5px; }
.metric.peak.failed .v { color: var(--poor-ink); }

/* ---------- trend chart ---------- */
.trend {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 1.6vmin, 22px);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trend-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.trend-head h2 { margin: 0; font-size: clamp(18px, 2vmin, 25px); font-weight: 600; }
.feed-note { display: inline-flex; align-items: center; gap: 8px; color: var(--info); font-size: clamp(13px, 1.5vmin, 18px); font-weight: 600; }
.feed-note svg { overflow: visible; }

.legend { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.legend .item {
  display: flex; align-items: center; gap: 9px;
  font: inherit; font-size: clamp(14px, 1.25vmin, 16px); font-weight: 600; color: var(--ink-muted);
  background: none; border: 1px solid transparent; border-radius: 360px;
  padding: 4px 12px; cursor: default; transition: opacity .15s ease;
}
.legend .item strong { color: var(--ink); font-size: 1.1em; }
.legend .item:hover, .legend .item:focus-visible { border-color: var(--green); color: var(--ink); outline: none; }
.legend .swatch { flex: none; overflow: visible; }

.plot { position: relative; flex: 1; min-height: 240px; }
.plot > svg { position: absolute; inset: 0; display: block; overflow: visible; }

.gridline { stroke: var(--line); stroke-width: 1; }
.xtick { stroke: var(--line-strong); stroke-width: 1; }
.axislabel { fill: var(--ink-faint); font-size: 15px; font-weight: 600; font-family: var(--font); }

/* Lighthouse's bands, kept quiet: the goal line is the one to read. */
.threshold { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.threshold-label { fill: var(--ink-faint); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.goal { stroke: var(--green); stroke-width: 2; stroke-dasharray: 7 5; stroke-linecap: round; }
.goal-label { fill: var(--green-dark); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Drawn over the lines, so a halo keeps them readable where a line crosses. */
.threshold-label, .goal-label { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

.series { transition: opacity .15s ease; }
.series-halo { fill: none; stroke: var(--surface); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.series-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.build-dot { stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.end-dot { stroke: var(--surface); stroke-width: 3; stroke-linejoin: round; }
.peak-line { fill: none; stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round; }
.peak-dot { fill: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.leader { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.end-label { fill: var(--ink-muted); font-size: 17px; font-weight: 600; }
.end-value { fill: var(--ink); font-size: 27px; font-weight: 700; }
.series.dim, .legend .item.dim { opacity: .18; }

.hover-line { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }

/* Production deploys, in the brand's info blue; the Slack chart uses the same. */
.deploy-line { stroke: var(--info); stroke-width: 1.5; stroke-dasharray: 4 3; }
.deploy-label { fill: var(--info); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font); }
.tooltip .deploy-note { color: #6fb0ff; font-weight: 600; font-size: 13px; margin-bottom: 6px; }

.tooltip {
  position: absolute;
  pointer-events: none;
  min-width: 200px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .1s ease;
  z-index: 5;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.4);
}
.tooltip.flip { transform: translateX(-100%); }
.tooltip.show { opacity: 1; }
.tooltip .date { color: #b6b6b6; margin-bottom: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tooltip .row { display: flex; align-items: center; gap: 8px; line-height: 1.7; white-space: nowrap; }
.tooltip .row.dim { opacity: .4; }
.tooltip .sw { flex: none; overflow: visible; }
.tooltip .nm { flex: 1; }
.tooltip .num { font-size: 16px; font-weight: 700; }
.tooltip .peak-v { color: #b6b6b6; font-size: 13px; font-weight: 600; margin-left: 6px; }

/* ---------- empty state ---------- */
.empty-state { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: clamp(16px, 1.6vmin, 20px); text-align: center; }
.empty-state[hidden] { display: none; }


@media (max-width: 720px) {
  .topbar .clock { display: none; }
  .page-title { border-left: 0; padding-left: 0; }
  .answer { margin-left: 0; width: 100%; }
  .summary, .verdict { width: 100%; }
}

/* ---------- screens: lab (cards + trend) and field (what Google sees) ---------- */
.screen { display: flex; flex-direction: column; gap: clamp(12px, 1.7vmin, 22px); flex: 1; min-height: 0; }
/* Screens shorter than the TV scroll instead of squeezing the chart off the page. */
#screen-lab { min-height: auto; }

.field-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.field-head h2 { margin: 0; font-size: clamp(18px, 2.1vmin, 26px); font-weight: 700; }
.field-sub { color: var(--ink-muted); font-size: clamp(13px, 1.45vmin, 18px); }
.age { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 360px; background: var(--line); color: var(--ink-muted); font-weight: 700; white-space: nowrap; }
.age.stale { background: var(--warn-bg); color: var(--warn-ink); }

.field-head .field-sub { margin-left: auto; }

.vitals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 1.6vmin, 24px);
}
.vitals.with-trend { flex: 1; }
.vital {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 1.8vmin, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .9vmin, 12px);
}
.vital-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vital-head strong { font-size: clamp(18px, 2.3vmin, 28px); font-weight: 700; }
.vital-head .full { color: var(--ink-faint); font-size: clamp(13px, 1.5vmin, 18px); }
.vital-value { font-size: clamp(48px, 6.2vmin, 88px); font-weight: 700; line-height: 1; color: var(--c); }
.vital-target { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-muted); font-size: clamp(13px, 1.5vmin, 18px); }
.share { display: flex; height: 12px; border-radius: 360px; overflow: hidden; background: var(--line); }
.share span { display: block; height: 100%; }
.share .good { background: var(--good); }
.share .ni { background: var(--warn); }
.share .poor { background: var(--poor); }
.share-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: clamp(12px, 1.4vmin, 17px); color: var(--ink-faint); }
.spark-wrap { position: relative; flex: 1; min-height: 90px; margin-top: clamp(6px, 1vmin, 14px); }
.spark-wrap svg { position: absolute; inset: 0; display: block; overflow: visible; }
.spark .line { fill: none; stroke: var(--c-mark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spark .zone { fill: var(--green); fill-opacity: .1; }
.spark .limit { stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 6 4; }
.spark .label { fill: var(--ink-faint); font-size: 14px; font-weight: 600; font-family: var(--font); }
.spark .end { fill: var(--c-mark); }
.spark .end-label { fill: var(--c); font-size: clamp(16px, 1.6vmin, 22px); font-weight: 700; font-family: var(--font); }

/* ---------- field screen: per page type (Cloudflare) ---------- */
.pagetypes { display: flex; flex-direction: column; gap: clamp(8px, 1.2vmin, 14px); }
.headlines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(10px, 1.2vmin, 16px); }
.headline {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(8px, 1vmin, 12px) clamp(12px, 1.6vmin, 20px);
  font-size: clamp(14px, 1.75vmin, 21px);
  line-height: 1.3;
  color: var(--ink-muted);
}
.headline strong { color: var(--ink); }
.headline.worse strong { color: var(--warn-ink); }
.headline code, .pt-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; color: var(--ink); }

.pt-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pt-table { width: 100%; border-collapse: collapse; font-size: clamp(15px, 2vmin, 25px); }
.pt-table th, .pt-table td {
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: clamp(5px, .65vmin, 10px) clamp(10px, 1.2vmin, 16px);
  border-bottom: 1px solid var(--line);
}
.pt-table tbody tr:last-child > * { border-bottom: 0; }
.pt-table thead th { font-size: clamp(12px, 1.4vmin, 17px); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.pt-table tbody th { font-weight: 700; }
.pt-table .num { text-align: right; }
.pt-table td.v, .pt-table td.num { font-weight: 700; }
.pt-table .mdot { display: inline-block; margin-right: 8px; vertical-align: middle; }
.pt-table tr.few { color: var(--ink-faint); }
.chg { margin-left: 8px; font-size: .82em; font-weight: 600; color: var(--ink-faint); }
.chg.worse { color: var(--poor-ink); }
.chg.better { color: var(--good-ink); }
.split { display: flex; gap: 2px; width: clamp(220px, 44vmin, 640px); height: 16px; border-radius: 4px; overflow: hidden; }
.split span { display: block; height: 100%; min-width: 2px; }
.split-legend { display: inline-flex; gap: 10px; margin-left: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.split-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; }
.cell-meta { display: block; margin-top: 3px; font-size: clamp(12px, 1.35vmin, 16px); font-weight: 600; color: var(--ink-faint); }
.el { display: block; font-weight: 700; }
.pt-table tr.offender > * { background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); }
.tag {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: 360px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: clamp(12px, 1.3vmin, 15px);
  font-weight: 700;
  vertical-align: middle;
}
.pt-notes { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: clamp(12px, 1.4vmin, 17px); color: var(--ink-faint); }
.pt-notes .mdot { display: inline-block; margin: 0 5px 0 0; vertical-align: middle; }
.pt-notes .mdot:not(:first-child) { margin-left: 10px; }

/* With the page-type panel below, the CrUX tiles give up height so both fit on a 1080p TV;
   smaller screens scroll instead of letting the table run off the page. */
#screen-field.with-pagetypes { min-height: auto; }
#screen-field.with-pagetypes .vital { padding: clamp(10px, 1.2vmin, 16px) clamp(14px, 1.6vmin, 22px); gap: clamp(4px, .6vmin, 8px); }
#screen-field.with-pagetypes .vital-value { font-size: clamp(38px, 4.8vmin, 66px); }
#screen-field.with-pagetypes .spark-wrap { display: none; }
#screen-field.with-pagetypes .vitals { flex: none; }

/* Four cards side by side on a laptop leave the peak row no room for its
   sub-label; the row's tooltip still says what it's measured against. */
@media (min-width: 721px) and (max-width: 1700px) {
  .metric.peak .full { display: none; }
}