/* ==========================================================================
   THE PAGE STANDARD (Peter, 26 Sep 2026: "loads of different fonts… just standardise it, across the whole Signal").
   Every component on a standard page is the app's, copied in: page-header.css, section-title.css, report.css
   (the underline tabs and the report table), app-cards.css (the card grid), tooltip.css (the dark chip on every
   number). This file holds only what is Signal's own, which is density and layout (CLAUDE.md, 16 Sep):
     one type size for reading (--text-base, 14px), one smaller size for small print (--text-sm, 13px),
     the section title (--text-section) and the page title (--text-title). Nothing else. No 10px, 11px, 12px.
     Weight: regular for reading, the card name and the tab you are on at 600. No light grey on grey.
     The page uses the width: cards sit in a grid, never a narrow column with empty space beside it.
   A page opts in with <body class="pg"> and one <div class="pg-wrap">.
   ========================================================================== */
body.pg { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; margin: 0; }
.pg-wrap { max-width: 1680px; margin: 0 auto; padding: 0 32px 96px; }
.pg-wrap .page-header { padding-top: 28px; }
.pg-wrap .page-header__title { padding-bottom: 6px; }
.pg-lede { color: var(--muted); margin: 0; max-width: 90ch; }

/* the tab row: the app's underline tabs, with the "read at" small print at the right end */
.pg-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: var(--border-width) solid var(--color-border); margin: 20px 0 0; }
.pg-bar .rep-tabs { border-bottom: 0; margin: 0; flex-wrap: wrap; row-gap: 0; }
.pg-bar .rep-tab { font-size: var(--text-base); }
.pg-bar .rep-tab.is-on::after { bottom: 0; }
.pg-meta { color: var(--muted); font-size: var(--text-sm); padding-bottom: 12px; }
[data-panel][hidden] { display: none; }

/* a section: the app's section title, one muted line under it, then the content */
.pg-sec { margin-top: 40px; }
.pg-sec > .section-title { display: flex; margin: 0; }
.pg-sec__note { color: var(--muted); margin: 8px 0 0; max-width: 90ch; }
.pg-sec > .dgrid, .pg-sec > .rep-scroll, .pg-sec > .pg-cols { margin-top: 16px; }
.pg-foot { color: var(--muted); font-size: var(--text-sm); margin: 12px 0 0; max-width: 110ch; }
.pg-foot a { color: var(--muted); }
.pg-empty { color: var(--muted); }

/* the card grid at Signal's density: four, three or two across, never a narrow column */
.dgrid.pg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dgrid.pg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dgrid.pg-4, .dgrid.pg-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dgrid.pg-4, .dgrid.pg-3 { grid-template-columns: 1fr; } }
.dcard { padding: 20px 22px; }
.dcard__label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dcard__line + .dcard__line { margin-top: 6px; }
/* a card's list: rows with a hairline between, the same size as everything else */
.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-list > li { padding: 10px 0; border-top: var(--border-width) solid var(--color-border); color: var(--muted); }
.pg-list > li:first-child { border-top: 0; padding-top: 0; }
.pg-list > li strong, .pg-list > li b { font-weight: var(--weight-medium); color: var(--ink); }
.pg-list > li .pg-sub { display: block; margin-top: 2px; }
.pg-list a { color: var(--ink); }
/* the one link at the bottom of a card says where it goes ("See who left, month by month"). It is the app's own
   door, the outlined pill in answer.css, pinned to the bottom so cards side by side line their links up. */
button.answer__link { font-family: inherit; cursor: pointer; }
.dcard > .answer__link { margin-top: auto; align-self: flex-start; padding: 7px 14px; font-size: var(--text-sm); }
.dcard > :nth-last-child(2) { margin-bottom: 16px; }
/* a card with a chart in it spans two columns of a four-grid */
.dcard--chart { min-width: 0; }

/* where a Look link lands: the card or column it names is outlined for a few seconds, so you know what you are on */
@keyframes pgFlash { 0%, 60% { box-shadow: 0 0 0 2px var(--ink); } 100% { box-shadow: 0 0 0 2px transparent; } }
.pg-flash { animation: pgFlash 3.5s ease-out forwards; border-radius: var(--radius-md); }
td.pg-flash, th.pg-flash { animation: none; background: var(--chip-bg); border-radius: 0; }

/* the verdict: an arrow and a word, never colour alone */
.pg-verdict { white-space: nowrap; font-weight: var(--weight-medium); }
.pg-verdict--better { color: var(--good); }
.pg-verdict--worse { color: var(--bad); }
.pg-verdict--near, .pg-verdict--none { color: var(--muted); }

/* the report table (report.css) at Signal's density; a number that opens its customers is a quiet button */
.rep-table { font-size: var(--text-base); }
.rep-table thead th { font-size: var(--text-sm); white-space: normal; vertical-align: bottom; line-height: 1.3; }
.rep-table th[data-tip], .rep-table td[data-tip] { cursor: help; }
.rep-table td { border-bottom: var(--border-width) solid var(--color-border); }
.rep-table td button:not(.btn-mini), button.pg-num { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; cursor: pointer; font-variant-numeric: tabular-nums; }
.rep-table td button:not(.btn-mini):hover, button.pg-num:hover { text-decoration-color: var(--ink); }
.rep-table td button:not(.btn-mini):disabled { text-decoration: none; cursor: default; color: var(--muted); }
.rep-table .pg-dim { color: var(--muted); }
.rep-table tr.rep-subline td { font-size: var(--text-sm); padding-top: 0; }
.rep-table tr.has-sub td { border-bottom: 0; }
/* the tooltip on a number must not be clipped, so the table scrolls only on a narrow screen */
@media (min-width: 1101px) { .rep-scroll { overflow: visible; } }
.rep-scroll { margin-top: 16px; }

/* controls: a label over its field, the app's report controls row */
.pg-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; margin-top: 16px; }
.pg-field { display: flex; flex-direction: column; gap: 6px; }
.pg-field > span { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); }
.pg-field select, .pg-field input { font: inherit; font-size: var(--text-base); padding: 7px 10px; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); min-width: 160px; }
.pg-field select:focus, .pg-field input:focus { outline: none; border-color: var(--ink); }
.pg-field select:disabled, .pg-field input:disabled { color: var(--muted); background: var(--chip-bg); }
.pg-field small { font-size: var(--text-sm); color: var(--muted); max-width: 32ch; }
.pg-btn { font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 7px 14px; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; }
.pg-btn:hover { border-color: var(--ink); }
.pg-btn:disabled { color: var(--muted); cursor: default; }

@media (max-width: 720px) { .pg-wrap { padding: 0 16px 88px; } }
/* a link inside a sentence: ink, underlined, the same size as the words round it */
.pg-inline { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* a tooltip on a right-aligned number reads left-aligned, like any sentence */
[data-tip]::after { text-align: left; }

/* SHARED BY EVERY STANDARD PAGE (26 Sep 2026, gathered from the Accountant, Product and Admin pages) */
/* Signal's own small controls run at 11 and 12px in dashboard.css; on a standard page they take the small-print size */
body.pg .btn-mini { font-size: var(--text-sm); padding: 6px 12px; }
body.pg .btn-mini[hidden] { display: none; }
body.pg .chip { font-size: var(--text-sm); }
/* tabs that are links, and a tooltip on a tab: put data-tip on a <span> inside the tab, never on the tab itself,
   because both use ::after and the tab you are on would lose its underline */
a.rep-tab { text-decoration: none; }
/* the app's table indents the first header but not the first cell */
.rep-table thead th:first-child { padding-left: 0; }
.page-header__title[hidden] { display: none; }
/* cards of uneven height flow down two columns, so a short card never leaves a hole beside a tall one */
.pg-cols { columns: 2 420px; column-gap: var(--space-4); }
.pg-cols > * { break-inside: avoid; margin: 0 0 var(--space-4); }