/* Styling for the deep pages: Calendar, COT, Economy, Policy, Guard, Method.
 *
 * Kept apart from shell.css because the shell is navigation and these are
 * content, and apart from app.css because none of these pages draws a candle. */

.asof { font-size: 12px; color: var(--ink-faint); font-family: var(--mono); }
/* The as-of stamp's line, kept from the first paint on the pages whose
 * script writes it once their data arrives (shell.css hides an empty one).
 * Written into a collapsed line, it moved the intro, #main and the footer
 * down by a line under the reader (measure_pages' cls check, plan E Task 10).
 * Guard's and the calendar's stamps are in their HTML: they need no data. */
:is(.pg-cot, .pg-econ, .pg-pol) .asof:empty { display: block; min-height: 1lh; }
/* COT's stamp ("CFTC report 22 Sep 2026 · next 16 Oct 2026", 302px at its
 * longest) wraps below 360px, where the head has 294px: two lines kept
 * there, empty or filled, so the line count cannot change as it lands. */
.pg-cot .asof, .pg-cot .asof:empty { min-height: 2lh; }
@media (min-width: 360px) { .pg-cot .asof, .pg-cot .asof:empty { min-height: 1lh; } }
.tagpill { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
           padding: 2px 8px; border-radius: 20px; background: var(--accent-soft);
           color: var(--accent); border: 1px solid var(--accent-line);
           font-weight: 600; white-space: nowrap; }
.tagpill[data-t="warn"] { background: var(--warn-soft); color: var(--warn);
                          border-color: rgba(245, 181, 68, .35); }
.tagpill[data-t="muted"] { background: var(--bg-inset); color: var(--ink-faint);
                           border-color: var(--line); }
.errs { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-dim); }
.errs li { margin-bottom: 4px; }

/* --------------------------------------------------------------- method */
/* Four ideas and four bugs, both laid out as a short grid of small cards
 * rather than a wall of paragraphs - the point of this page is that each
 * claim is small enough to check, and a wall of text is the opposite of
 * that argument. Two a row from 640, so four cards are always whole rows.
 *
 * The page is static HTML with a real outline - each card's title an h2,
 * each small card's an h3 - sized as the shell's h4 card titles are. */
.midea, .mbug { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) {
  .midea, .mbug { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.midea > div, .mbug > div { background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px; }
.midea h3, .mbug h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; }
.mbug h3 { color: var(--warn); }
.midea p, .mbug p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.pg-method .card__h h2 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
/* The funnel's headline is the server's sentence (app/seo.py), the page's
 * claim in one line: larger than a card title, its second sentence dimmer. */
.pg-method .card__h .mfun__h { font-size: 17px; line-height: 1.35; }
.mfun__em { color: var(--ink-dim); }
.pg-method .mfun__sub { margin: 0 0 18px; }
/* The two long sections, folded into the card they explain ("How zones are
 * drawn" under the ideas, "How a relationship is tested" under the funnel):
 * in the HTML for every crawler, closed so the page keeps its budget. The
 * section's h2 is the summary's text, so the outline keeps it. A thumb's 40px
 * on a phone (12 + 17 + 12), a line from 720. */
.pg-method .mmore { margin-top: 10px; border-top: 1px solid var(--line); }
.pg-method .mmore summary { padding: 12px 0; cursor: pointer; color: var(--ink-2); }
.pg-method .mmore summary:hover { color: var(--ink); }
.pg-method .mmore summary h2 { display: inline; margin: 0; font-size: 14.5px; font-weight: 600;
  letter-spacing: -.01em; line-height: 17px; }
@media (min-width: 720px) { .pg-method .mmore summary { padding: 6px 0 0; } }
.pg-method .mmore :is(p, li) { max-width: 92ch; font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
.pg-method .mmore p { margin: 4px 0 10px; }
.pg-method .mmore ol { margin: 0 0 10px; padding-left: 20px; }
.pg-method .mmore li { margin-bottom: 6px; }
.pg-method .mmore b { color: var(--ink); font-weight: 600; }
/* Who makes it, and when the prose last changed: title, credit and date on
 * one line where they fit, wrapping on a phone; the section still ends on
 * the date. */
.pg-method .mwho { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.pg-method .mwho h2 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.pg-method .mwho .note { margin: 0; }
.pg-method .mrev { margin-left: auto; font-family: var(--mono); }
/* No rail beside it, so the column (shell.css caps .page at 1200px) sits in
 * the middle of what the side rail leaves, as Calendar's does - not against
 * it with 676px of a 1920 screen blank on the right. */
.pg-method .page { margin-inline: auto; }
/* The engine's record as stat cards: a figure and what it counts. Six of
 * them, so the rows are always whole: one or two a row on a phone, three
 * from 600, all six from 1180 - auto-fit put four over two at 768, with
 * half a row blank. */
.gout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 9px; }
@media (min-width: 600px) { .gout { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .gout { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gcard { background: var(--bg-inset); border: 1px solid var(--line);
         border-radius: var(--r-md); padding: 11px 13px; }
.gcard b { display: block; font-family: var(--mono); font-size: 21px;
           letter-spacing: -.02em; margin-bottom: 2px; }
.gcard span { font-size: 12px; color: var(--ink-faint); line-height: 1.45; display: block; }

/* Rail rows: left text, right number, one line each. */
.prr { display: flex; justify-content: space-between; align-items: baseline;
       gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft);
       font-size: 12px; }
.prr:first-of-type { border-top: 0; }
.prr__l { color: var(--ink-dim); min-width: 0; }
.prr__l small { display: block; color: var(--ink-faint); font-size: 12px; }
.prr__r { font-family: var(--mono); font-size: 12px; white-space: nowrap; }

/* The pills in the page head's contextual slot - COT's categories, the
 * calendar's impact levels - and their counts. The gap between label and
 * count is the button's own (shell.css), so no margin here. */
.ph__slot :is(a, button) .cnt { font-style: normal; font-size: 12px; font-family: var(--mono);
                        color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ph__slot :is(a, button)[aria-pressed="true"] .cnt { color: var(--accent); }

/* ============================================================ Calendar */
/* Scoped to the page's root class (calendar.html: body.pg-cal): the next day
 * first, the caveat once, only the columns that have values (spec 8).
 * Colours are tokens only and none is a direction. High impact is a
 * caution - a sharp move is possible around it - so it takes the warn
 * badge; Medium and Low step down in ink, and every level is a word, never
 * a colour alone. A surprise is neutral ink with a sign and a word: a
 * release above its forecast is not a price going up. No teal: nothing on
 * this page is a measurement. */

/* No rail beside it, so the column (shell.css caps .page at 1200px) sits in
 * the middle of what the side rail leaves, not against it with the rest of
 * a wide screen blank on the right (676px at 1920). A line of releases is
 * read across, and a 1700px one would part the release from its figures. */
.pg-cal .page { margin-inline: auto; }

/* The head's slot holds two controls - the impact pills and the window -
 * and on a phone they wrap onto two lines rather than scroll one away. */
.pg-cal .ph__slot { flex-wrap: wrap; overflow: visible; gap: 8px 14px; }
/* The controls arrive with the releases (page-calendar.js renderSlot), so
 * their room is kept from the first paint - drawn into a collapsed slot,
 * they grew the head under the reader (the cls check, plan E Task 10).
 * The width is measured (456px, the two controls side by side); the height
 * is worked out from the controls' own (shell.css --pill-h and --seg-h):
 * a row is the taller of the pills and the window's seg (its buttons plus
 * the seg's 3px padding, above and below), and the slot adds its 2px
 * padding, above and below. Below 484px the two do not fit beside the
 * gutters, so they take two rows and the gap between them. */
.pg-cal .ph__slot:empty { display: flex; flex-basis: 456px;
  height: calc(var(--pill-h) + 8px + var(--seg-h) + 2 * 3px + 2 * 2px); }
@media (min-width: 484px) {
  .pg-cal .ph__slot:empty { height: calc(max(var(--pill-h), var(--seg-h) + 2 * 3px) + 2 * 2px); }
}
.pg-cal .cal__imp { display: flex; flex-wrap: wrap; gap: 6px; }

/* The page's one caveat, under the head. */
.pg-cal .cal__lede { margin: 0 0 14px; max-width: 86ch; font-size: 13px; line-height: 1.55;
  color: var(--ink-2); }

/* One flat card: a sticky day label has to be the colour of what scrolls
 * under it, and the card's gradient would show the seam. */
.pg-cal .cal__list { padding-top: 2px; background: var(--bg-card); }
.pg-cal .cal__none { margin: 0; padding: 16px 2px 6px; font-size: 13px; line-height: 1.55;
  color: var(--ink-2); }
.pg-cal .cal__off { margin: 0; padding: 10px 2px 2px; font-size: 12px; line-height: 1.5;
  color: var(--ink-3); }
.pg-cal .cal__sr, .pg-cal .calr--hd { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ a day */
/* Its label sticks under the top bar while its rows scroll past, and on a
 * wide screen names the value columns - so the names are on screen however
 * far down the week the reader is. */
.pg-cal .cald__h { position: sticky; top: var(--topbar-h); z-index: 2; display: flex;
  align-items: baseline; gap: 10px; margin: 0; padding: 12px 2px 8px; background: var(--bg-card);
  box-shadow: 0 1px 0 var(--line-soft); font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); }
.pg-cal .cald__date { font: 500 12px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.pg-cal .cald__cols { display: none; }

/* ------------------------------------------------------------ a row */
/* Flex rather than grid, so a column hidden because no row has a value is
 * simply not there. On a phone a row wraps: time, currency, impact and the
 * release first, then the figures, each with its name beside it. */
.pg-cal .calr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 10px 2px; }
.pg-cal .calr:not(.calr--hd) + .calr { border-top: 1px solid var(--line-soft); }
.pg-cal .calr__t { flex: none; width: 42px; font-size: 12.5px; color: var(--ink-2); }
.pg-cal .calr__c, .pg-cal .calr__i { flex: none; display: flex; }
.pg-cal .calr__cur { height: 20px; padding: 0 6px; font-size: 11px; }
.pg-cal .calr__imp { height: 20px; padding: 0 8px; font-size: 11px; color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-soft); }
/* The release and the markets it reaches share a cell: side by side where
 * the cell has room for both (the markets then line up as a column of
 * their own), the markets under the release where it has not. */
.pg-cal .calr__x { flex: 1 1 150px; min-width: 0; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 2px 16px; }
.pg-cal .calr__e { flex: 1 1 250px; min-width: 0; font-size: 13.5px; line-height: 1.35;
  color: var(--ink); overflow-wrap: anywhere; }
.pg-cal .calr__mk { flex: 0 1 300px; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px;
  font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.pg-cal .calr__n, .pg-cal .calr__s { flex: none; font-size: 12.5px; color: var(--ink); }
.pg-cal .calr__k { margin-right: 5px; font-size: 12px; color: var(--ink-3); }
.pg-cal .calr__none { color: var(--ink-3); }
/* A figure the feed did not publish: a dash in its column on a wide
 * screen; on a phone, where each figure carries its own name, nothing on
 * screen - "forecast - previous -" on every speech would be a line of
 * dashes - and still read out to a screen reader. */
.pg-cal .calr__blank { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.pg-cal .calr__s b { font-weight: 500; }
.pg-cal .calr__w { font-size: 12px; color: var(--ink-2); }
/* Printed already: dimmed, not hidden - it is the only row a surprise can
 * be on. */
.pg-cal .calr[data-past] .calr__t { color: var(--ink-3); }
.pg-cal .calr[data-past] .calr__e { color: var(--ink-2); }

/* ---------------------------------------------------- wider screens */
/* One line a release: fixed columns for the time, the two badges and the
 * figures, the release taking the rest; the figures' names ride in the
 * day's label. Were the figures ever too wide for the line they wrap under
 * it, right-aligned. */
@media (min-width: 720px) {
  .pg-cal .cald__cols { display: flex; gap: 10px; margin-left: auto; }
  .pg-cal .cald__cols > span { font: inherit; letter-spacing: inherit; color: inherit; }
  .pg-cal .calr { gap: 4px 10px; padding: 9px 2px; }
  .pg-cal .calr__t { width: 46px; }
  .pg-cal .calr__c { width: 44px; }
  .pg-cal .calr__i { width: 70px; }
  .pg-cal .calr__x { flex-basis: 220px; }
  .pg-cal .calr__n { width: 84px; text-align: right; }
  .pg-cal .calr__s { width: 184px; text-align: right; }
  .pg-cal .calr__k { display: none; }
  .pg-cal .calr__v1 { margin-left: auto; }
  .pg-cal .calr__blank { position: static; height: auto; overflow: visible; clip-path: none; }
  .pg-cal .calr__n.calr__blank { width: 84px; }
  .pg-cal .calr__s.calr__blank { width: 184px; }
}

/* ===================================================== Positioning (COT) */
/* Scoped to the page's root class (cot.html: body.pg-cot), because every
 * deep page shares this file. One table, one caveat, the current market in
 * full (spec 8). Colours are tokens only. An extreme is outlined in the
 * caution tint, the bdg-w look, and never in the colours kept for up and
 * down: a book at the 95th is crowded, not bullish. Neutral ink everywhere
 * else - a percentile rank is a count against stored weeks, not a measured
 * link, so it does not get teal. */

/* The category pills arrive with the report (page-cot.js renderPills). Their
 * row is kept from the first paint, as tall as the pills and as wide, so it
 * wraps under the title where they do; drawn into a collapsed slot, they
 * grew the head by a row under the reader (the cls check, plan E Task 10).
 * 507px is the ten pills' width, measured; a slot narrower than that shrinks
 * the reservation with it, as it would the pills. The height is a pill's
 * (shell.css --pill-h, 40px on a phone and 34 from 720) and the slot's 2px
 * padding, above and below. */
.pg-cot .ph__slot:empty { display: flex; flex-basis: 507px; height: calc(var(--pill-h) + 2 * 2px); }

/* The page's one caveat: the server's sentence, under the head. */
.pg-cot .cot__lede { margin: 0 0 14px; max-width: 86ch; font-size: 13px; line-height: 1.55;
  color: var(--ink-2); }

.pg-cot .cot__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-bottom: 12px; min-width: 0; }
.pg-cot .cot__h h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pg-cot .cot__sub { margin: 0; flex: 1 1 100%; font-size: 12px; line-height: 1.5; }
.pg-cot .cot__none { margin: 6px 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* ------------------------------------------------------ the summary table */
/* A row is a real button (the popover opens from it, and Enter or Space
 * does what a click does). Flex rather than grid, so a column hidden
 * because it is empty everywhere simply is not there, with no empty track
 * or gap left behind; the header row uses the same widths. On a phone a row
 * is two lines: the name with the net and its week (under the name when the
 * two do not fit), then the four windows, right-aligned under the header's
 * one line - a name cut to "British p…" beside four cells was the 320px
 * finding, and the net run under the cells. From 600 the windows keep the
 * name's line, and the net rides under the name; from 720 it has columns. */
.pg-cot .cot__tbl { display: flex; flex-direction: column; gap: 2px; }
.pg-cot .cotr { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 4px 6px; width: 100%; min-height: 46px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease), opacity var(--t-ui) var(--ease); }
.pg-cot .cotr:hover, .pg-cot .cotr.on { background: var(--bg-hover); }
/* The market shown in full below: marked, in ink, as the one being read. */
.pg-cot .cotr[aria-current="true"] { background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 3px 0 0 var(--ink-3); }
.pg-cot .cotr--hd { min-height: 0; padding-top: 0; padding-bottom: 4px; cursor: default;
  font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.pg-cot .cotr--hd:hover { background: none; }
.pg-cot .cotr__n { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 2px 6px; }
.pg-cot .cotr--hd .cotr__n { flex-basis: auto; }
.pg-cot .cotr__nm { min-width: 0; max-width: 100%; font-size: 13.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pg-cot .cotr__lag { height: 18px; padding: 0 6px; font-size: 11px; }
.pg-cot .cotr__sub { flex: none; margin-left: auto; font-size: 12px; color: var(--ink-3);
  white-space: nowrap; }
.pg-cot .cotr__v { display: none; flex: none; width: 92px; text-align: right; font-size: 13px; }
.pg-cot .cotr__w { width: 80px; color: var(--ink-2); }
.pg-cot .cotr__p { flex: none; width: 40px; height: 26px; display: grid; place-items: center;
  border-radius: 7px; font-size: 12.5px; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pg-cot .cotr__p[data-heat="lo"], .pg-cot .cotr__p[data-heat="hi"] { color: var(--ink);
  background: var(--warn-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 32%, transparent); }
.pg-cot .cotr__p[data-heat="none"] { background: none; color: var(--ink-3); }
.pg-cot .cotr--hd .cotr__p { height: auto; background: none; box-shadow: none; }

/* How the percentiles are counted: the server's own note, folded. */
.pg-cot .cot__about { margin-top: 10px; }
/* A thumb's 40px on a phone (12 + 16 + 12), as tall as a line from 720. */
.pg-cot .cot__about summary { font-size: 12px; line-height: 16px; color: var(--ink-3); cursor: pointer;
  padding: 12px 0; }
.pg-cot .cot__about summary:hover { color: var(--ink-2); }
.pg-cot .cot__about .note { margin-top: 6px; max-width: 86ch; }

/* ------------------------------------------------- the market, in full */
.pg-cot .cot__mkt .cot__h h2 { font-size: 17px; }
.pg-cot .cot__tag { height: 22px; padding: 0 9px; font-size: 11.5px; }
.pg-cot .cot__asof { margin-left: auto; font-size: 12px; }
.pg-cot .cot__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pg-cot .cot__col > .lbl { display: block; margin-bottom: 12px; }

/* The three groups on one axis: shorts left of centre, longs right, one
 * scale for all three. Long and short are the positions' directions, so
 * they are the one place on this page the up and down colours appear.
 * On a phone a group is its name and figures over a bar the card's full
 * width - beside them at 320 the bar was 75px; from 600 the three share a
 * line. */
.pg-cot .legs { display: grid; gap: 9px; }
.pg-cot .leg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
  grid-template-areas: "n v" "b b"; align-items: baseline; }
.pg-cot .leg__n { grid-area: n; font-size: 12.5px; color: var(--ink-2); }
.pg-cot .leg__bar { grid-area: b; position: relative; height: 12px; border-radius: 4px; overflow: hidden;
  background: var(--bg-pop); }
.pg-cot .leg__bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--ink-3); }
.pg-cot .leg__l, .pg-cot .leg__s { position: absolute; top: 0; bottom: 0; }
.pg-cot .leg__l { left: 50%; background: color-mix(in srgb, var(--up) 55%, transparent); }
.pg-cot .leg__s { right: 50%; background: color-mix(in srgb, var(--down) 55%, transparent); }
.pg-cot .leg__v { grid-area: v; text-align: right; font-size: 12.5px; line-height: 1.25; }
.pg-cot .leg__v small { display: inline; margin-left: 8px; font-size: 12px; color: var(--ink-3); }
.pg-cot .legs__key { display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12px; color: var(--ink-3); }
.pg-cot .legs__key span { display: inline-flex; align-items: center; gap: 5px; }
.pg-cot .k { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.pg-cot .k--l { background: color-mix(in srgb, var(--up) 55%, transparent); }
.pg-cot .k--s { background: color-mix(in srgb, var(--down) 55%, transparent); }
.pg-cot .cot__oi { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.pg-cot .cot__oi b { font-weight: 500; color: var(--ink); }

/* The four yardsticks are the shared percentile bar (components.css, .pc),
 * the same component Deep dive's Positioning card draws. */

/* The yardsticks disagreeing is a caution, and amber is the caution colour. */
.pg-cot .cot__call { margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; font-size: 13px;
  line-height: 1.55; color: var(--ink-2);
  background: color-mix(in srgb, var(--warn) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 20%, transparent); }
.pg-cot .cot__call b { color: var(--ink); font-weight: 500; }
.pg-cot .cot__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* ------------------------------------------- a row's popover (who holds what) */
/* The popover is appended to <body>, which carries the root class, so these
 * stay scoped. Two small tables - the groups and the finer split - with the
 * figures right-aligned in fixed columns; the split has no week, and keeps
 * its net under the groups' net. Long and short are columns where there is
 * room, and a line under the group's name on a phone. */
.pg-cot .cotpop__oi { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pg-cot .cotpop__oi b { font-weight: 500; color: var(--ink); }
.pg-cot .cotpop__t { width: 100%; margin-top: 10px; border-collapse: collapse; }
.pg-cot .cotpop__t th, .pg-cot .cotpop__t td { padding: 6px 0 6px 10px; text-align: right;
  white-space: nowrap; font-weight: 400; }
.pg-cot .cotpop__t th:first-child { padding-left: 0; text-align: left; white-space: normal; }
.pg-cot .cotpop__t thead th { padding-top: 0; padding-bottom: 4px; }
.pg-cot .cotpop__t tbody th, .pg-cot .cotpop__t tbody td { font-size: 13px; color: var(--ink);
  border-top: 1px solid var(--line-soft); }
.pg-cot .cotpop__t tbody tr:first-child > * { border-top: 0; }
.pg-cot .cotpop__t td { width: 76px; }
.pg-cot .cotpop__t .cotpop__w { width: 58px; color: var(--ink-2); }
.pg-cot .cotpop__t--nowk tr > :last-child { padding-right: 68px; }
.pg-cot .cotpop__ls { display: none; }
.pg-cot .cotpop__s { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------- the rail */
/* The shared rail cards (pagerail.js), in this page's vocabulary: the lbl
 * heads, numbers in mono, an extreme in the same caution tint as its cell.
 * The same cards sit under the market card where there is no rail
 * (.cot__aside, page-cot.js): one column on a phone, side by side from 720.
 * From 1240, once the rail holds them (shell.css shows it there), that copy
 * steps aside - :has() reads it off the rail itself, so a rail that never
 * drew leaves the copy standing. */
.pg-cot .cot__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  align-items: start; margin-bottom: 12px; }
.pg-cot .cot__aside .card { margin: 0; }
.pg-cot :is(.pagerail, .cot__aside) .card__h { margin-bottom: 6px; }
.pg-cot :is(.pagerail, .cot__aside) .card__h h4 { font: 500 11px/1.2 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.pg-cot .prr { align-items: center; font-size: 13px; }
.pg-cot .prr__l { color: var(--ink); }
.pg-cot .prr__l small { margin-top: 2px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pg-cot .prr__r { font-size: 12.5px; }
.pg-cot .prr__r b { font-weight: 500; }
.pg-cot :is(.pagerail, .cot__aside) .note { font-size: 12px; line-height: 1.5; }

/* ---------------------------------------------------------- wider screens */
/* Room for a 500px panel: long and short get their own columns, a line a
 * group, and the panel is about half as tall - short enough to hang beside
 * a row in the middle of a laptop screen rather than cover it. */
@media (min-width: 540px) {
  .pg-cot .pop--wide { width: 500px; }
  .pg-cot .cotpop__ls { display: table-cell; }
  .pg-cot .cotpop__t td.cotpop__ls { width: 72px; color: var(--ink-2); }
  .pg-cot .cotpop__s { display: none; }
}
@media (min-width: 600px) {
  .pg-cot .cotr { flex-wrap: nowrap; justify-content: normal; }
  .pg-cot .cotr__n { flex: 1 1 auto; }
  .pg-cot .cotr__sub { flex: 1 0 100%; margin-left: 0; }
  .pg-cot .leg { grid-template-columns: 86px minmax(0, 1fr) 84px; grid-template-areas: "n b v";
    align-items: center; }
  .pg-cot .leg__v small { display: block; margin-left: 0; }
  .pg-cot .legs__key { padding-left: 96px; }
}
@media (min-width: 720px) {
  .pg-cot .cot__about summary { padding: 4px 0; }
  .pg-cot .cot__aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .pg-cot .cot__sub { flex-basis: 320px; }
  .pg-cot .cotr { min-height: 40px; padding: 4px 10px; gap: 8px; }
  .pg-cot .cotr__v { display: block; }
  .pg-cot .cotr__sub { display: none; }
  .pg-cot .cotr__p { width: 52px; }
  .pg-cot .leg { grid-template-columns: 100px minmax(0, 1fr) 92px; }
  .pg-cot .legs__key { padding-left: 110px; }
}
@media (min-width: 1000px) {
  .pg-cot .cot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 1240px) {
  .pg-cot:has(.pagerail:not([hidden]) .card) .cot__aside { display: none; }
}

/* ============================================================= Economy */
/* Scoped to the page's root class (economy.html: body.pg-econ): a card a
 * series, grouped as the API groups them, the caveat once (spec 8). Colours
 * are tokens only, and none is good or bad news - rising inflation is not a
 * price going up: the line is neutral ink and a change is a glyph and a
 * sign in ink. Amber is kept for the page's two cautions, a figure past its
 * age (its .st warn badge) and two publishers who disagree. No teal: nothing
 * here is a measured link. */

/* The page's one caveat - the API's own note - under the head. */
.pg-econ .ec__lede { margin: 0 0 16px; max-width: 86ch; font-size: 13px; line-height: 1.55;
  color: var(--ink-2); }
.pg-econ .ec__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A group: its name as a label, then its cards - one column on a phone,
 * as many 300px columns as the width holds after that. */
.pg-econ .ec__grp { margin-bottom: 18px; }
.pg-econ .ec__gh { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 10px; color: var(--ink-2); }
.pg-econ .ec__gn { color: var(--ink-3); }
.pg-econ .ec__grid { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ------------------------------------------------------------ a card */
.pg-econ .ec__card { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0;
  padding: 12px 14px; }
.pg-econ .ec__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* `pretty`: a wrapped name never leaves its last word ("y/y") alone. */
.pg-econ .ec__n { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  letter-spacing: -.01em; text-wrap: pretty; }
.pg-econ .ec__age { flex: none; display: flex; }
.pg-econ .ec__m { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }

/* The last two years as a line that ends in its figure: the line and the
 * value on one row, the span under the line and the change under the
 * value. The line stretches with its card; its stroke does not. */
.pg-econ .ec__row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "spark v" "since ch"; align-items: center; gap: 2px 16px; margin-top: 6px; }
.pg-econ .ec__spark { grid-area: spark; position: relative; height: 34px; }
.pg-econ .ec__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pg-econ .ec__spark polyline { fill: none; stroke: var(--ink-2); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round; }
.pg-econ .ec__dot { position: absolute; right: -3px; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--ink); }
.pg-econ .ec__v { grid-area: v; font-size: 20px; font-weight: 500; letter-spacing: -.02em;
  text-align: right; white-space: nowrap; }
/* The span and its gap: two clauses that wrap at the dot where the card is
 * narrow, each whole - cut to "no Oct …" it lost the gap it names. */
.pg-econ .ec__since { grid-area: since; min-width: 0; font-size: 12px; color: var(--ink-3); }
.pg-econ .ec__since > span { white-space: nowrap; }
.pg-econ .ec__ch { grid-area: ch; font-size: 12px; color: var(--ink-2); text-align: right;
  white-space: nowrap; }

/* ------------------------------------------------------- the check */
/* Where there is no rail. Where the rail holds the check (>= 1240px, once
 * it has drawn it), this copy steps aside - :has() reads that off the rail
 * itself, so a rail that never drew leaves this copy standing. */
.pg-econ .ec__checks { margin: 2px 0 14px; }
.pg-econ .ec__ckh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.pg-econ .ec__ckh h2 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.pg-econ .ec__ckh p { margin: 0; font-size: 12px; }
.pg-econ .ec__ck { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 4px 12px; padding: 9px 0 2px; border-top: 1px solid var(--line-soft); }
.pg-econ .ec__ckq { min-width: 0; font-size: 13px; }
.pg-econ .ec__ckq small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45;
  color: var(--ink-3); }
.pg-econ .ec__ckr { display: flex; }
.pg-econ .ec__cknote, .pg-econ .pr-warn { grid-column: 1 / -1; margin: 6px 0 0; padding: 9px 11px;
  border-radius: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-2);
  background: color-mix(in srgb, var(--warn) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 20%, transparent); }
@media (min-width: 1240px) {
  .pg-econ:has(.pagerail:not([hidden]) .pr-checks) .ec__checks { display: none; }
}

/* With room, the cards breathe a little more and the line is taller. */
@media (min-width: 720px) {
  .pg-econ .ec__grid { gap: 12px; }
  .pg-econ .ec__card { gap: 4px; padding: 14px 16px; }
  .pg-econ .ec__row { margin-top: 8px; }
  .pg-econ .ec__spark { height: 40px; }
}

/* Two folded notes: why two publishers, and what the page leaves out. */
.pg-econ .ec__about { margin: 0 2px 6px; }
/* A thumb's 40px on a phone (12 + 16 + 12), as tall as a line from 720. */
.pg-econ .ec__about summary { padding: 12px 0; font-size: 12px; line-height: 16px; color: var(--ink-3);
  cursor: pointer; }
@media (min-width: 720px) { .pg-econ .ec__about summary { padding: 4px 0; } }
.pg-econ .ec__about summary:hover { color: var(--ink-2); }
.pg-econ .ec__about .note { margin: 4px 0 10px; max-width: 86ch; }

/* The rail, in the deep pages' vocabulary: lbl heads, numbers in mono.
 * What's coming (it fetches the calendar) sits under the check where there
 * is no rail (.ec__aside, page-economy.js); from 1240, once the rail holds
 * it, that copy steps aside - :has() reads it off the rail itself. */
.pg-econ .ec__aside .card { margin: 0 0 14px; }
.pg-econ :is(.pagerail, .ec__aside) .card__h { margin-bottom: 6px; }
.pg-econ :is(.pagerail, .ec__aside) .card__h h4 { font: 500 11px/1.2 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.pg-econ .prr__l { color: var(--ink); }
.pg-econ .prr__l small { margin-top: 2px; font-family: var(--mono); font-size: 12px; line-height: 1.45;
  color: var(--ink-3); }
.pg-econ :is(.pagerail, .ec__aside) .note { font-size: 12px; line-height: 1.5; }
@media (min-width: 1240px) {
  .pg-econ:has(.pagerail:not([hidden]) .pr-coming) .ec__aside { display: none; }
}
/* The check's two sides, a line each, the rail's full width. */
.pg-econ .pr-sides { margin: -2px 0 4px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.pg-econ .pr-sides span { display: block; }

/* ============================================================== Policy */
/* Scoped to the page's root class (policy.html: body.pg-pol): one table, a
 * row a bank, each row a button that opens the bank's own words under it
 * (spec 8). Colours are tokens only. A stance is a labelled neutral badge -
 * easing and tightening in ink with an outline, on hold in ink-2, no stated
 * direction in ink-3 - and the word carries the meaning, never the colour:
 * easing is not a price going up. "Not verified" is ink-3, because the
 * honest blank is the point of this page, not an alarm. No teal: nothing
 * here is a measured link. */

/* The page's one caveat, under the head. */
.pg-pol .pol__lede { margin: 0 0 16px; max-width: 86ch; font-size: 13px; line-height: 1.55;
  color: var(--ink-2); }

.pg-pol .pol__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.pg-pol .pol__h h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pg-pol .pol__sub { margin: 0; flex: 1 1 100%; font-size: 12px; line-height: 1.5; }
.pg-pol .pol__tbl { display: flex; flex-direction: column; }

/* ------------------------------------------------------------ a row */
/* A real button, so Enter and Space do what a click does. Flex rather than
 * grid, so a column hidden because no bank has a value is simply not
 * there. On a phone the bank and the chevron share the first line and the
 * rest wraps under them; with room, a line a bank in fixed columns. */
.pg-pol .polb + .polb { border-top: 1px solid var(--line-soft); }
.pg-pol .polr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%;
  min-height: 48px; padding: 9px 8px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease); }
.pg-pol .polr:hover { background: var(--bg-hover); }
/* An open row and what it opened read as one block. */
.pg-pol .polb:has(> .polr[aria-expanded="true"]) { border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3%, transparent); }
.pg-pol .polr--hd { display: none; }
.pg-pol .polr__n { order: 0; flex: 1 1 calc(100% - 40px); min-width: 0; display: flex; align-items: center;
  gap: 8px; }
.pg-pol .polr__nm { min-width: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.pg-pol .polr__cur { flex: none; height: 20px; padding: 0 6px; font-size: 11px; }
.pg-pol .polr__x { order: 1; flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  color: var(--ink-3); }
.pg-pol .polr[aria-expanded="true"] .polr__x svg { transform: rotate(180deg); }
/* The second line on a phone: the stance and when the bank last said
 * something (the two short ones, so they share it at 320), then the
 * figures, each with its name - "said 25 Sep" was left alone on a third
 * line. A figure the API did not send is not drawn there (the row's
 * sentence still says so). */
.pg-pol .polr__r, .pg-pol .polr__d, .pg-pol .polr__s, .pg-pol .polr__l { order: 4; flex: none;
  display: flex; align-items: baseline; gap: 6px; color: var(--ink-2); }
.pg-pol .polr__s { order: 2; }
.pg-pol .polr__l { order: 3; }
.pg-pol .polr__blank { display: none; }
.pg-pol .polr__r .mono, .pg-pol .polr__d .mono { color: var(--ink); }
.pg-pol .polr__k { font-size: 12px; color: var(--ink-3); }
/* On a phone the header row is not drawn, so each figure carries its name. */
.pg-pol .polr__kk { font-size: 12px; color: var(--ink-3); }
.pg-pol .polr__nv, .pg-pol .polr__none { color: var(--ink-3); }
.pg-pol .polr__l { font-size: 12px; }

/* A stance: a word on a badge, in ink - never a direction colour. */
.pg-pol .pol__st { height: 22px; padding: 0 9px; font-size: 11.5px; color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-soft); }
.pg-pol .pol__st[data-st="easing"], .pg-pol .pol__st[data-st="tightening"],
.pg-pol .pol__st[data-st="other"] { color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 34%, transparent); }
.pg-pol .pol__st[data-st="hold"] { color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }

/* ----------------------------------------------- what a row opens */
.pg-pol .polp { padding: 2px 8px 14px; }
.pg-pol .polp__x { margin: 6px 0 0; max-width: 86ch; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.pg-pol .polp__x b { font-weight: 500; color: var(--ink); }
/* The futures-implied rate's age, as every figure wears one (policymodel):
 * neutral, amber only once its next reading is overdue. */
.pg-pol .pol__age { height: 20px; padding: 0 8px; font-size: 12px; vertical-align: 1px; }
.pg-pol .polp__list { margin: 8px 0 0; padding: 0; list-style: none; }
.pg-pol .polp__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.pg-pol .polp__list li + li { border-top: 1px solid var(--line-soft); }
.pg-pol .polp__list a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
/* On a phone a headline is a thumb's 40px tall however many lines it takes,
 * the row's padding moved onto the link (from 720, the row's own 7px). */
.pg-pol .polp__list li:has(> a) { padding: 0; align-items: center; }
.pg-pol .polp__list li > a { display: flex; align-items: center; min-height: 40px; padding: 4px 0; }
@media (min-width: 720px) {
  .pg-pol .polp__list li:has(> a) { padding: 7px 0; align-items: baseline; }
  .pg-pol .polp__list li > a { display: inline; min-height: 0; padding: 0; }
}
.pg-pol .polp__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-pol .polp__list span:first-child { overflow-wrap: anywhere; }
.pg-pol .polp__d { flex: none; font-size: 12px; color: var(--ink-3); }
.pg-pol .polp__none { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* How stance is decided: the page's rule, folded. */
.pg-pol .pol__about { margin-top: 10px; }
/* A thumb's 40px on a phone (12 + 16 + 12), as tall as a line from 720. */
.pg-pol .pol__about summary { padding: 12px 0; font-size: 12px; line-height: 16px; color: var(--ink-3);
  cursor: pointer; }
@media (min-width: 720px) { .pg-pol .pol__about summary { padding: 4px 0; } }
.pg-pol .pol__about summary:hover { color: var(--ink-2); }
.pg-pol .pol__about .note { margin-top: 6px; max-width: 86ch; }

/* The rail, in the deep pages' vocabulary: lbl heads, numbers in mono.
 * The same cards sit under the table where there is no rail (.pol__aside,
 * page-policy.js): one column on a phone, side by side from 720. From 1240,
 * once the rail holds them, that copy steps aside - :has() reads it off the
 * rail itself, so a rail that never drew leaves the copy standing. */
.pg-pol .pol__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  align-items: start; margin: 12px 0; }
.pg-pol .pol__aside .card { margin: 0; }
.pg-pol :is(.pagerail, .pol__aside) .card__h { margin-bottom: 6px; }
.pg-pol :is(.pagerail, .pol__aside) .card__h h4 { font: 500 11px/1.2 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.pg-pol .prr__l { color: var(--ink); }
.pg-pol .prr__l small { margin-top: 2px; font-family: var(--mono); font-size: 12px; line-height: 1.45;
  color: var(--ink-3); }
.pg-pol :is(.pagerail, .pol__aside) .note { font-size: 12px; line-height: 1.5; }
@media (min-width: 720px) {
  .pg-pol .pol__aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 1240px) {
  .pg-pol:has(.pagerail:not([hidden]) .card) .pol__aside { display: none; }
}

/* ---------------------------------------------------------- wider screens */
/* One line a bank: the name takes the rest, the other columns fixed and
 * named in the header row above them. */
@media (min-width: 720px) {
  .pg-pol .polr { flex-wrap: nowrap; gap: 12px; min-height: 46px; padding: 8px 10px; }
  .pg-pol .polr--hd { display: flex; min-height: 0; padding-top: 0; padding-bottom: 6px; cursor: default;
    font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .pg-pol .polr--hd:hover { background: none; }
  .pg-pol .polr__n, .pg-pol .polr__x, .pg-pol .polr__r, .pg-pol .polr__d, .pg-pol .polr__s,
  .pg-pol .polr__l { order: 0; }
  .pg-pol .polr__n { flex: 1 1 auto; }
  .pg-pol .polr__r { width: 132px; flex-direction: column; align-items: flex-start; gap: 1px; }
  .pg-pol .polr__d { width: 116px; flex-direction: column; align-items: flex-start; gap: 1px; }
  .pg-pol .polr__s { width: 150px; }
  .pg-pol .polr__l { width: 78px; }
  .pg-pol .polr--hd > span { white-space: nowrap; }
  .pg-pol .polr--hd .polr__r, .pg-pol .polr--hd .polr__d { flex-direction: row; }
  .pg-pol .polr__kk { display: none; }
  .pg-pol .polr__blank { display: flex; }
  .pg-pol .polp { padding: 2px 10px 14px; }
}

/* ============================================================== Guard */
/* Scoped to the page's root class (guard.html: body.pg-guard): the
 * reader's rules on the left; where they stand on the right, in glass - the
 * largest position inside every rule as the one large number, the two
 * allowance bars, and the working under them; the releases inside the
 * session in the rail (spec 8, the board's img7 layout). Colours are tokens
 * only. No green and no red: an allowance bar fills in ink-2 and turns
 * amber past 80% used - a caution, not a direction - and a blown account or
 * a finished day stays amber while its sentence says it plainly. Teal only
 * as the app's focus ring - a focused control is the active control (spec
 * 11); the size is the reader's own arithmetic, not a measurement, so it is
 * ink. High impact is the Calendar's caution badge; Medium steps down in
 * ink. */

/* The page's one caveat, under the head. */
.pg-guard .gd__lede { margin: 0 0 14px; max-width: 86ch; font-size: 13px; line-height: 1.55;
  color: var(--ink-2); }
.pg-guard .gd__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One column on a phone: the inputs, the summary, the releases. */
.pg-guard .gd__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.pg-guard .gd__grid > * { min-width: 0; margin: 0; }

/* ---------------------------------------------------------- the inputs */
/* A real label over each control; its hint under it, and its reason when
 * it has one - in the caution colour, because the figures built from it
 * are dashes until it is put right. Focus is the app's one ring
 * (components.css), here and on the page's only other control, the folded
 * note. */
.pg-guard .gd__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; }
.pg-guard .gd__hd h2, .pg-guard .gd__h { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pg-guard .gd__hd p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
/* A field is its label, its control, then its hint and reason, on three
 * rows of the form's own grid (subgrid), so the controls of a line share one
 * top even when one label wraps ("Value per unit per lot" sat 15px below its
 * neighbour at 320 and 768); a label sits on its control, the spare room
 * above it. The rows are 5px apart, and a field's last row keeps 9px under
 * it, so fields stand 14px apart. */
.pg-guard .gd__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
.pg-guard .gd__f { display: grid; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; }
.pg-guard .gd__msg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.pg-guard .gd__f label { align-self: end; font: 500 11px/1.3 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); }
/* A thumb's 40px on a phone; 38 from 720. */
.pg-guard .gd__f input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-inset); color: var(--ink);
  font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pg-guard .gd__f input:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.pg-guard .gd__f[data-bad] input { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.pg-guard .gd__hint, .pg-guard .gd__err { font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.pg-guard .gd__err { color: var(--warn); }
.pg-guard .gd__err:empty { display: none; }

/* -------------------------------------------------------- the summary */
.pg-guard .gd__sum { padding: 18px 16px 16px; }
.pg-guard .gd__one { margin: 14px 0 6px; }
.pg-guard .gd__big { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; }
.pg-guard .gd__big b { font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -.03em;
  color: var(--ink); }
.pg-guard .gd__unit { font-size: 15px; color: var(--ink-2); }
/* A dash is never alone: the reason sits under it. */
.pg-guard .gd__nosize { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pg-guard .gd__v { margin: 12px 0 0; max-width: 64ch; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.pg-guard .gd__v b { font-weight: 500; color: var(--ink); }
/* A blown account or a finished day: said plainly, beside the red
 * "Breached" badge, in a box edged in the status red - the badge carries
 * the word, the words stay ink. */
.pg-guard .gd__v[data-t="bad"] { padding: 10px 12px; border-radius: 12px;
  background: var(--st-bad-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-bad) 28%, transparent); }

/* The two allowance bars: a traffic light (spec 2026-09-27 §3) - the badge
 * beside the label says the state in words, and the fill takes its colour.
 * The fill animates in on the first draw only; page-guard.js marks the
 * fills of every later draw still. */
.pg-guard .gd__bar { margin-top: 16px; }
.pg-guard .gd__barh, .pg-guard .gd__barf { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 2px 12px; }
.pg-guard .gd__barh { justify-content: flex-start; gap: 6px 10px; margin-bottom: 8px; }
.pg-guard .gd__barh .st { align-self: center; }
.pg-guard .gd__used { margin-left: auto; font-size: 12.5px; color: var(--ink); }
/* The empty track shows on the glass: the design system's --bg-pop all
 * but vanishes into it, and an unused allowance must still read as a bar. */
.pg-guard .gd__bar .track { display: block; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.pg-guard .gd__bar .fill { background: var(--st-off); box-shadow: none; }
.pg-guard .gd__bar[data-t="ok"] .fill { background: var(--st-ok); }
.pg-guard .gd__bar[data-t="warn"] .fill { background: var(--st-warn); }
.pg-guard .gd__bar[data-t="bad"] .fill { background: var(--st-bad); }
.pg-guard .gd__bar .gd__still { animation: none; }
.pg-guard .gd__barf { margin: 7px 0 0; font-size: 12px; color: var(--ink-3); }
.pg-guard .gd__why { color: var(--ink-3); }

/* The working: a line of arithmetic for every figure above it. On a phone
 * a row is two lines - the figure's name and its value, then the arithmetic
 * under them the card's full width (page-guard.js spells out the table's
 * roles for this); from 600, three columns. A clause of the arithmetic never
 * breaks inside itself (.gd__xs, page-guard.js). */
.pg-guard .gd__work { display: block; width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 12.5px; }
.pg-guard .gd__work caption { display: block; padding-bottom: 6px; text-align: left; }
.pg-guard .gd__work tbody { display: block; }
.pg-guard .gd__work tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
  border-top: 1px solid var(--line-soft); }
.pg-guard .gd__work th, .pg-guard .gd__work td { padding: 5px 0; text-align: left; vertical-align: baseline;
  font-weight: 400; line-height: 1.4; }
.pg-guard .gd__work th { padding-right: 10px; color: var(--ink-2); white-space: nowrap; }
.pg-guard .gd__work td.gd__x { grid-column: 1 / -1; grid-row: 2; padding-top: 0; color: var(--ink-3); }
.pg-guard .gd__xs { white-space: nowrap; }
.pg-guard .gd__work td.gd__r { text-align: right; color: var(--ink); white-space: nowrap; }
.pg-guard .gd__work tr:last-child th, .pg-guard .gd__work tr:last-child td.gd__r { font-weight: 600; color: var(--ink); }
@media (min-width: 600px) {
  .pg-guard .gd__work { display: table; }
  .pg-guard .gd__work caption { display: table-caption; }
  .pg-guard .gd__work tbody { display: table-row-group; }
  .pg-guard .gd__work tr { display: table-row; border-top: 0; }
  .pg-guard .gd__work th, .pg-guard .gd__work td { border-top: 1px solid var(--line-soft); }
  .pg-guard .gd__work td.gd__x { padding: 5px 10px 5px 0; }
}

/* ------------------------------------------ events inside your session */
/* A card in the rail at 1240px and wider, and under the inputs where there
 * is no rail - drawn in both, and the copy the width has no room for steps
 * aside (below). */
.pg-guard .gd__ev { margin: 0; }
.pg-guard .gd__evh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 12px; margin-bottom: 4px; }
.pg-guard .gd__evh h2 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.pg-guard .gd__evday { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 2px;
  font-size: 12.5px; font-weight: 600; }
.pg-guard .gd__evday span { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pg-guard .gd__evl { margin: 0; padding: 0; list-style: none; }
.pg-guard .gd__evr { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 5px 8px;
  padding: 8px 0; border-top: 1px solid var(--line-soft); }
.pg-guard .gd__evt { grid-row: span 2; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.pg-guard .gd__evx { font-size: 13px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.pg-guard .gd__evb { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-guard .gd__imp, .pg-guard .gd__cur { height: 20px; padding: 0 7px; font-size: 11px; }
.pg-guard .gd__imp { color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.pg-guard .gd__evn { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.pg-guard .gd__evf { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }

/* Why the page gives an answer: under the rules, folded - open from 1240
 * (page-guard.js), where it fills the room beside the summary. */
.pg-guard .gd__grid > .gd__about { margin: 2px 2px 0; }
/* A thumb's 40px on a phone (12 + 16 + 12), as tall as a line from 720. */
.pg-guard .gd__about summary { padding: 12px 0; font-size: 12px; line-height: 16px; color: var(--ink-3);
  cursor: pointer; }
@media (min-width: 720px) { .pg-guard .gd__about summary { padding: 4px 0; } }
.pg-guard .gd__about summary:hover { color: var(--ink-2); }
.pg-guard .gd__about .note { margin: 6px 0 10px; max-width: 86ch; }

/* ---------------------------------------------------------- wider screens */
@media (min-width: 720px) {
  .pg-guard .gd__form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-guard .gd__f input { height: 38px; }
  .pg-guard .gd__sum { padding: 20px 22px 18px; }
  .pg-guard .gd__big b { font-size: 56px; }
}
/* Inputs left, the summary right (the board's layout); the releases under
 * the inputs until there is a rail to hold them, then why the page gives an
 * answer. The last row takes what the taller summary leaves, so the rows
 * above it keep their own heights. */
@media (min-width: 1000px) {
  .pg-guard .gd__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr; grid-template-areas: "in sum" "ev sum" "ab sum"; }
  .pg-guard .gd__in { grid-area: in; }
  .pg-guard .gd__sum { grid-area: sum; }
  .pg-guard .gd__evm { grid-area: ev; }
  .pg-guard .gd__about { grid-area: ab; }
  .pg-guard .gd__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The rail holds the list (shell.css shows it from here, once page-guard.js
 * has drawn it) and the copy under the inputs steps aside - :has() reads
 * that off the rail itself, so a rail that never drew leaves the copy
 * standing. */
@media (min-width: 1240px) {
  .pg-guard:has(.pagerail:not([hidden]) .gd__ev) .gd__evm { display: none; }
}