/*
 * page.css: the styles of the Page tab of the panel page (web/panel/index.html): the state colours of a bot, the row of the verdict ring and the two cards beside it, the facts of the card "Furthest behind", the strip of the versions, the chart "Who has which version", the map "When each bot read this page" and their legends, and the card and badge of the Common Crawl check (the badge is also used by the Pages table).
 * Loaded by: web/panel/index.html (a link element, last of the style files); it reads the tokens of tokens.css (--st-* for the states, --brand-b for the newest version, --add and --del for the words, --heat and --on-heat for the heat scale) and the heat steps .h1 to .h8 of visits.css. The cards themselves (.card, .vcard, .kicker, .kpi) come from panel.css and visits.css; the banner of the shown page is in frame.css.
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough.
 * @comments-complete 2026-11-05
 */

/* The state of a bot: the colour of its sign and word (--c) and its tint (--cb). The sign and the word always stand beside the colour. */
.st-current { --c: var(--st-current); --cb: var(--st-current-bg); }
.st-older { --c: var(--st-older); --cb: var(--st-older-bg); }
.st-before { --c: var(--st-before); --cb: var(--st-before-bg); }
.st-none { --c: var(--st-none); --cb: var(--st-none-bg); }
.st-unknown, .st-nolist { --c: var(--st-unknown); --cb: var(--st-unknown-bg); }

/* The row under the banner: the verdict card and the two cards beside it; the verdict takes the room of two of them. */
.pg-top { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pg-top.two { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.pg-who-card, .pg-lane-card, .pg-empty { margin-top: 14px; }
.pg-wait .vempty { margin: 0; }

/* The card "Common Crawl" and the small badge of the Pages table: the state is a word on a tinted badge, the colour never stands alone. */
.cc-card { margin-top: 14px; }
.cc-card .note { margin: 6px 0 0; }
.cc-line { margin: 0; }
.cc-badge, .cc-mini { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: var(--cb); color: var(--c); font-size: 0.95rem; font-weight: var(--fw-medium); }
.cc-in { --c: var(--st-current); --cb: var(--st-current-bg); }
.cc-out { --c: var(--st-older); --cb: var(--st-older-bg); }
.cc-failed { --c: var(--st-unknown); --cb: var(--st-unknown-bg); }
.cc-unchecked { --c: var(--st-none); --cb: var(--st-none-bg); }

/* The ring and the sentence of the verdict. */
.pg-ring-grid { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 22px; align-items: center; }
.pg-ring-fig { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pg-ring-legend { justify-content: center; gap: 4px 12px; }
/* An item that wraps keeps its dot beside the first line of the text (the dot is not centred on both lines). */
.pg-ring-legend li { align-items: flex-start; max-width: 100%; }
.pg-lg-arc { display: inline-block; flex: none; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--c); }
.pg-ring-svg { display: block; width: 100%; max-width: 190px; }
.pg-arc { fill: none; stroke: var(--c); stroke-width: 22; }
.pg-arc-sign { fill: var(--surface); font-size: 13px; font-weight: var(--fw-semibold); }
.pg-ring-big { fill: var(--text); font-size: var(--fs-num-ring); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); font-variant-numeric: var(--num); }
.pg-ring-small { fill: var(--text-2); font-size: 13px; }
.pg-ring-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pg-ring-hl { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); overflow-wrap: anywhere; }
.pg-ring-sub { font-size: 15px; color: var(--text-2); }
.pg-readers-sum { cursor: pointer; font-weight: 600; color: var(--accent-text); }
.pg-readers[open] .pg-readers-sum { margin-bottom: 8px; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 999px; background: var(--cb); font-size: 12.5px; font-weight: 600; }
.pg-sign { display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: var(--surface); font-size: 10px; font-weight: var(--fw-semibold); line-height: 1; }
.pg-chip-s { font-weight: 500; color: var(--text-2); }

/* The two cards beside the verdict. */
.pg-hero .kpi { margin: 2px 0; }
.kpi-warn .kpi-n { color: var(--st-older); }
.kpi-unknown .kpi-n { color: var(--st-unknown); }
.pg-who-bot { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.pg-facts { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.pg-facts li { display: flex; align-items: center; gap: 8px; }
.pg-sg { display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--surface-2); font-size: 14px; line-height: 1; }
.pg-behind .pg-sg { color: var(--st-older); }
.pg-add .pg-sg { color: var(--add); }
.pg-del .pg-sg { color: var(--del); }
.pg-add, .pg-del { font-weight: 600; }
.stackbar .seg-add { fill: var(--add); }
.stackbar .seg-del { fill: var(--del); }
.pg-vstrip-wrap { display: flex; flex-direction: column; gap: 2px; }
.pg-vstrip { display: block; }
.pg-vs-axis { stroke: var(--line-strong); stroke-width: 1; }
.pg-vs-tick { fill: var(--text); }
.pg-vs-now { fill: var(--brand-b); }
.pg-vstrip-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }

/* The legends under the chart and the map. */
.pg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-2); }
.pg-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pg-lg-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--text-2); }
.pg-lg-bar { display: inline-block; width: 22px; height: 10px; border: 1.5px solid var(--st-older); border-radius: 5px; background: color-mix(in srgb, var(--st-older) 22%, var(--surface)); }
.pg-lg-line { display: inline-block; width: 2px; height: 14px; background: var(--line-strong); }
.pg-lg-line.pg-lg-new { width: 3px; background: var(--brand-b); }
.pg-ramp { display: inline-flex; gap: 2px; }
.pg-ramp i { width: 14px; height: 14px; border-radius: 3px; background: var(--hf); }
.pg-key-ring { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--text); border-radius: 3px; }
.pg-key-strip { display: inline-block; width: 10px; height: 14px; border-radius: 2px; background: var(--text); }

/* The chart "Who has which version": the days are lines, the changes of the page are lines, a row is a bot. */
.pg-who-holder { min-width: 0; overflow-x: auto; }
.pg-who { display: block; }
.pg-wh-ax { stroke: var(--line); stroke-width: 1; }
.pg-wh-tick { fill: var(--text-3); font-size: 12px; }
.pg-wh-vl { stroke: var(--line-strong); stroke-width: 1; }
.pg-wh-vl.pg-wh-new { stroke: var(--brand-b); stroke-width: 2; }
.pg-wh-now { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.pg-wh-newlab { fill: var(--text); font-size: 12px; font-weight: var(--fw-medium); }
.pg-wh-row { outline: none; }
.pg-wh-hit { fill: transparent; }
.pg-wh-row:hover .pg-wh-hit { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.pg-wh-row:focus-visible .pg-wh-hit { stroke: var(--focus); stroke-width: 2; }
.pg-wh-sign { fill: var(--c); font-size: 13px; font-weight: var(--fw-semibold); }
.pg-wh-name { fill: var(--text); font-size: 13px; font-weight: 600; }
.pg-wh-bar { fill: color-mix(in srgb, var(--st-older) 22%, var(--surface)); stroke: var(--st-older); stroke-width: 1.5; }
.pg-wh-dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.pg-wh-val { fill: var(--c); font-size: 13px; font-weight: var(--fw-medium); }

/* The map "When each bot read this page": the names stay on the left, the days scroll beside them. */
.pg-lane-wrap { display: flex; align-items: flex-start; }
.pg-lane-names { flex: none; }
.pg-lane-scroll { flex: 1; min-width: 0; padding-bottom: 4px; overflow-x: auto; }
.pg-lane { display: block; }
.pg-ln-lab { fill: var(--text-3); font-size: 12px; }
.pg-ln-n { fill: var(--text-2); font-size: 12px; font-weight: var(--fw-medium); }
.pg-ln-m { fill: var(--text-3); font-size: 12px; font-weight: var(--fw-medium); }
.pg-ln-d { fill: var(--text-2); font-size: 12px; }
.pg-ln-sign { fill: var(--c); font-size: 13px; font-weight: var(--fw-semibold); }
.pg-ln-bot { fill: var(--text); font-size: 12.5px; font-weight: 600; }
.pg-hc { fill: var(--hf, var(--surface-2)); }
.pg-hn { fill: var(--text); font-size: 12px; font-weight: var(--fw-medium); pointer-events: none; }
.pg-hn.hi { fill: var(--on-heat); }
.pg-hn.hi5 { fill: var(--scrim); } /* the middle step takes a dark ink in both themes */
.pg-ln-ring { stroke: var(--text); stroke-width: 2; pointer-events: none; }

@media (max-width: 1100px) {
  .pg-top, .pg-top.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-top > .pg-ring-card { grid-column: 1 / -1; }
  .pg-top.two > .pg-hero { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .pg-ring-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-ring-svg { max-width: 170px; }
  .pg-top, .pg-top.two { grid-template-columns: minmax(0, 1fr); }
}