/*
 * pages.css: the styles of the Pages tab of the panel page (web/panel/index.html), the page browser: the card with the filter box, the filter bar, the counter, the table of the sitemap pages with its sortable column headers (and the Common Crawl column, whose badge is styled in page.css) and the page numbers. The filter bar uses the controls of addresses.css (.ctl, .addr-select, the popup of the bots, .addr-summary).
 * Loaded by: web/panel/index.html (a link element after page.css); it reads the tokens of tokens.css and adds no colour value of its own, so both themes work. Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough.
 * The table scrolls sideways inside its own box on a narrow screen (the page itself never does); the width of the bar of a row is set by the script through the width of an SVG rect, no style attribute.
 * @comments-complete 2026-11-05
 */
.pg-card { display: flex; flex-direction: column; gap: 12px; }
.pg-filter { display: flex; flex-direction: column; gap: 4px; }
.pg-q { width: 100%; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.pg-q:focus-visible, .pg-date:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pg-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.pg-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pg-date { min-height: 38px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.pg-per { min-width: 0; }
#pg-group { max-width: min(320px, 100%); }
.pg-card .addr-summary { margin-top: 0; }

.pg-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); }
.pg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pg-table th { background: var(--surface-2); border-bottom: 1px solid var(--line-strong); text-align: left; white-space: nowrap; }
.pg-table th.r, .pg-table td.r { text-align: right; }
.pg-sort { width: 100%; min-height: 36px; padding: 0 10px; font-weight: var(--fw-semibold); font-size: 12px; color: var(--text-2); text-align: inherit; white-space: nowrap; }
.pg-sort:hover, .pg-sort.on { color: var(--text); }
th[aria-sort="ascending"] .pg-sort::after { content: " \2191"; }
th[aria-sort="descending"] .pg-sort::after { content: " \2193"; }
.pg-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table tbody tr:hover { background: var(--surface-2); }
.pg-row { cursor: pointer; }
.pg-row:hover .pg-addr { text-decoration: underline; }
.pg-table td .hbar { margin-top: 3px; min-width: 56px; }
.pg-table td:nth-child(4) { white-space: nowrap; }
.pg-c-url { min-width: 220px; max-width: 380px; }
.pg-addr { padding: 0; border: 0; background: transparent; color: var(--accent-text); text-align: left; overflow-wrap: anywhere; }
.pg-addr:hover { text-decoration: underline; }
/* The freshness bar of a page (round 3): one part per state that occurs, its width after its count but never under 28 px, so the sign and the count always fit; the colours and signs of the ring of the Page tab (.st-* of page.css sets --c and --cb). The bar has a fixed width, so it never widens its column. */
.pg-fresh { white-space: nowrap; }
.pg-fbar { display: flex; gap: 2px; width: 156px; height: 22px; }
.pg-fseg { display: inline-flex; flex: var(--n) 1 0; align-items: center; justify-content: center; gap: 2px; min-width: 28px; border-radius: 4px; background: var(--c); color: var(--surface); font-size: 11.5px; font-weight: var(--fw-semibold); font-variant-numeric: var(--num); line-height: 1; }
.pg-fseg.st-none { background: var(--cb); color: var(--c); }
.pg-fsign { font-size: 10px; }
.pg-kind { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.pg-table .muted { color: var(--text-3); }
.pg-th-cc { padding: 0 10px; color: var(--text-2); font-size: 12px; font-weight: var(--fw-semibold); }
.pg-cc { white-space: nowrap; }
.pg-table .cc-mini { padding: 1px 8px; font-size: 12px; }
.pg-table .cc-unchecked { background: transparent; font-weight: 400; }

.pg-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pg-num { min-width: 34px; justify-content: center; padding: 0 8px; }
.pg-num.on { border-color: var(--text); background: var(--text); color: var(--surface); }
.pg-nav:disabled { color: var(--text-3); cursor: default; }
.pg-gap { padding: 0 2px; color: var(--text-3); }
@media (max-width: 719px) {
  .pg-c-url { min-width: 160px; }
  .pg-controls .ctl { flex: 1 1 100%; }
}