/* CEDARS platform stylesheet. One file, four parts: tokens, base, components, utilities.
   Colour tokens are checked for WCAG 2.2 AA in both schemes (ratios in the comments beside them: text 4.5:1 on --bg and --surface, borders
   and the focus ring 3:1). A new colour is checked with a contrast calculator before it is used (docs/ACCESSIBILITY.md).
   Existing class names are kept so every template takes the new look without a change; new pages use the same classes. */

/* ---------- Fonts (vendored, SIL Open Font License; see fonts/OFL.txt). Same-origin only: the CSP allows no font host. ---------- */
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/public-sans-latin-400-normal.60715978fab2.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/public-sans-latin-400-italic.3cbca8221b55.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/public-sans-latin-500-normal.38c037ffedf4.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/public-sans-latin-600-normal.6b1fe1f62892.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/public-sans-latin-700-normal.3c0eda7c2982.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.caf0dfde4e44.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.a21e038a03f7.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Surfaces and text. fg 15.3:1 on bg; fg-2 7.0:1; fg-3 5.0:1 (small labels). */
  --bg: #f4f6f8; --surface: #ffffff; --surface-2: #eaeef2; --fg: #1b1f24; --fg-2: #4b5560; --fg-3: #5f6b78; --line: #d6dce3; --line-2: #e6eaee;
  /* Interaction. primary 7.7:1 on bg, white on primary 8.3:1; link 8.9:1; focus 3.6:1 on bg and 3.9:1 on surface; control border 4.0:1. */
  --primary: #1c4f8a; --primary-fg: #ffffff; --primary-hover: #163f70; --link: #1a4480; --focus: #c26b00; --control: #6f7a86;
  /* State. Each text colour 6:1 or better on bg, surface and its own tint. */
  /* Charts (3:1 on surface and bg, 1.4.11). Claims solid; forecast hatched with an outline, so the series differ by pattern too: claims 8.3:1, forecast 5.5:1. */
  --chart-claims: #1c4f8a; --chart-forecast: #0f766e;
  --ok: #1f6a30; --ok-bg: #e6f3e8; --warn: #8a4600; --warn-bg: #fdf1e2; --bad: #a3171b; --bad-bg: #fbe9e9; --info: #0b5b79; --info-bg: #e4f3f8;
  /* Older names, kept for templates and scripts that use them. */
  --muted: var(--fg-2); --card: var(--surface); --accent: var(--primary); --accent-fg: var(--primary-fg);
  /* Type and shape. */
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 4px; --r-lg: 6px; --gutter: 1.25rem;
  color-scheme: light dark;
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* fg 15.5:1 on bg; fg-2 9.8:1; fg-3 7.1:1; link 8.8:1; white on primary 5:1, primary 3.2:1 on surface; focus 10.5:1; control 6.2:1. */
    --bg: #0f1418; --surface: #171d23; --surface-2: #1f2730; --fg: #e7ebef; --fg-2: #b4bec8; --fg-3: #95a1ae; --line: #2c353f; --line-2: #222a32;
    --primary: #2d6bb6; --primary-fg: #ffffff; --primary-hover: #3b7fd0; --link: #8ab4f8; --focus: #ffb547; --control: #8a96a3;
    --chart-claims: #5b9be0; --chart-forecast: #2dd4bf;   /* 5.8:1 and 9.1:1 on surface */
    --ok: #7fd18f; --ok-bg: #16301c; --warn: #f0b36b; --warn-bg: #3a2a12; --bad: #ff8a86; --bad-bg: #3d1a1b; --info: #7cc9e6; --info-bg: #12303b;
  }
}
@media (min-width: 1024px) { :root { --gutter: 1.5rem; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
::placeholder { color: var(--fg-3); opacity: 1; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; line-height: 1.25; font-weight: 600; margin: 2rem 0 .6rem; }
h3 { font-size: 1.05rem; line-height: 1.3; font-weight: 600; margin: 1.4rem 0 .4rem; }
h1, h2, h3 { overflow-wrap: anywhere; text-wrap: balance; }   /* long IDs with no spaces (SW_NC_NonRes_electric) wrap at 320 px (1.4.10) */
h1 + p, h2 + p { margin-top: 0; }
p { margin: .5rem 0 .9rem; }
main h1 + p, main .page-title + p { max-width: 64ch; color: var(--fg-2); margin-top: 0; }   /* a page's description reads at a measure, in the secondary colour */
code, pre, kbd, .mono, input.key { font-family: var(--mono); }
code { font-size: .88em; overflow-wrap: anywhere; background: var(--surface-2); padding: .05em .3em; border-radius: 3px; }
pre { white-space: pre-wrap; word-break: break-word; font-size: .82rem; margin: .3rem 0; }
pre code { background: none; padding: 0; }
table.changes { margin-top: .4rem; }
td.change-cell { min-width: 26rem; }   /* the audit log's before-and-after table: room for a hash on one or two lines */
table.changes pre { margin: 0; }
mark { background: #fde68a; color: #111; padding: 0 .1em; }   /* a matched word in a search extract: 15:1 in both schemes */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: .5rem; top: -4rem; background: var(--surface); color: var(--link); padding: .5rem .9rem; border: 2px solid var(--primary);
        border-radius: var(--r); z-index: 20; font-weight: 600; }
.skip:focus { top: .5rem; }

/* ---------- App shell: identity bar, header with grouped navigation, utility cluster, footer ---------- */
.gov { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .3rem var(--gutter); font-size: .8rem; color: var(--fg-2);
       background: var(--surface); border-bottom: 1px solid var(--line); }
.gov strong { color: var(--fg); font-weight: 600; }
.env-banner { margin: 0; margin-left: auto; padding: .1rem .6rem; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-weight: 600; font-size: .78rem; }
.top { display: flex; align-items: center; gap: 1.25rem; padding: 0 var(--gutter); min-height: 56px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--fg); letter-spacing: .01em; padding: .6rem 0; }
/* The cedar mark: white on primary, 8.3:1 light and 5:1 dark (the same pair as primary buttons); system colours in forced-colours mode. */
.brand .logo { width: 28px; height: 28px; flex: none; display: block; }
.brand .logo-bg { fill: var(--primary); }
.brand .logo-tree { fill: var(--primary-fg); }
@media (forced-colors: active) { .brand .logo-bg { fill: CanvasText; } .brand .logo-tree { fill: Canvas; } }
/* The header stays in view while the page scrolls (Jake, 2026-10-31), where there is room for it: at least 861 px wide (above the Menu-button
   layout) and 480 px tall. Below that (phones, 400% zoom, a short window) it scrolls away with the page, so it never takes most of the screen
   (reflow, 1.4.10). scroll-padding keeps whatever takes the focus or is linked to clear of it (focus not obscured, 2.4.11); app.js sets
   --header-h to the header's real height, which grows when the navigation wraps. */
@media (min-width: 861px) and (min-height: 480px) {
  html { scroll-padding-top: calc(var(--header-h, 6rem) + .75rem); }
  body > header { position: sticky; top: 0; z-index: 10; }
  /* A header whose navigation wraps to a second row (a narrow window, a long organization code, a large unread count) is too tall to
     keep in view: it scrolls away with the page instead (app.js marks it; UAT 2 U02). */
  html.header-wrapped { scroll-padding-top: 0; }
  html.header-wrapped body > header { position: static; }
}
.menu-btn { display: none; margin-left: auto; }
.top nav { display: flex; gap: .15rem; align-self: stretch; align-items: stretch; }
.top nav > a, .top nav summary { display: flex; align-items: center; gap: .3rem; padding: 0 .75rem; color: var(--fg); text-decoration: none; font-weight: 500;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent; cursor: pointer; min-height: 56px; white-space: nowrap; }
.top nav > a:hover, .top nav summary:hover { color: var(--link); }
.top nav > a[aria-current="page"], .top nav details.current > summary { color: var(--link); border-bottom-color: var(--primary); }   /* current shown by border and colour, and aria */
.top nav summary { list-style: none; }
.top nav summary::-webkit-details-marker { display: none; }
.top nav summary::after { content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.15em) rotate(45deg); flex: none; }
.top nav details[open] > summary::after { transform: translateY(.1em) rotate(225deg); }
.top nav details { position: relative; }
.top nav details > ul { position: absolute; left: 0; top: 100%; z-index: 15; margin: 0; padding: .4rem; list-style: none; min-width: 14rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.top nav details > ul a { display: block; padding: .5rem .7rem; border-radius: var(--r); color: var(--fg); text-decoration: none; min-height: 24px; }
.top nav details > ul a:hover { background: var(--surface-2); }
.top nav details > ul a[aria-current="page"] { font-weight: 600; color: var(--link); background: var(--surface-2); }
.who { margin-left: auto; display: flex; gap: .6rem; align-items: center; font-size: .9rem; padding: .5rem 0; flex-wrap: wrap; }
.who form { margin: 0; }
.who .link { color: var(--fg-2); }
.org-switch { display: flex; gap: .4rem; align-items: center; }
.org-switch label { flex-direction: row; font-size: .85rem; color: var(--fg-2); }
.org-switch select { padding: .25rem .4rem; min-height: 32px; }
.org-badge { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .3rem .15rem .65rem; background: var(--bg); color: var(--fg-2); font-size: .82rem; }
.org-badge b { background: var(--primary); color: var(--primary-fg); border-radius: 999px; font-size: .7rem; padding: .08rem .45rem; font-weight: 700; letter-spacing: .02em; }
.bell { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--fg-2); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; min-height: 32px; font-size: .85rem; }
.bell[aria-current="page"], .bell:hover { color: var(--link); border-color: var(--control); }
.bell .count { background: var(--bad); color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 700; padding: .05rem .4rem; }
main { flex: 1; width: 100%; }
main:focus { outline: none; }
.page { max-width: 1200px; margin: 0 auto; padding: 1.25rem var(--gutter) 2.5rem; }
main.narrow { flex: none; max-width: 26rem; margin: 3rem auto; padding: 1.5rem var(--gutter); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (max-width: 480px) { .narrow { margin: 1rem auto; border: 0; background: none; } }
.foot { margin-top: auto; border-top: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font-size: .82rem; padding: 1.1rem var(--gutter); display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; justify-content: space-between; }
.foot a { color: var(--fg-2); }
.foot ul.links { display: flex; gap: .3rem 1rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.foot ul.links li { margin: 0; }

/* Mid widths (861-1700 px): tighter navigation and account cluster, so the header with every menu stays on one row from 1280 px for a
   member of one organization, whatever its code's length and the unread count (shown as 99+ above 99). The "Acting for" words of the
   badge are kept for screen readers only. At the full spacing that header needs about 1,470 px and a member of several organizations'
   (with the Acting for switcher) about 1,650 px, so the tighter spacing runs to 1700 px (UAT 2 U02). A header that still wraps scrolls
   away with the page (header-wrapped). */
@media (min-width: 861px) and (max-width: 1700px) {
  .org-badge .label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .org-badge { padding-left: .3rem; }
  .top { gap: .5rem; }
  .top nav > a, .top nav summary { padding: 0 .35rem; font-size: .9rem; }
  .who { gap: .3rem; font-size: .85rem; }
  .org-badge, .bell { padding-left: .5rem; padding-right: .5rem; font-size: .8rem; }
}
/* Narrow screens: the header collapses to brand + Menu; the navigation stacks and the menus open inline. Without scripts the list is simply shown. */
@media (max-width: 860px) {
  .top { gap: .75rem; }
  .menu-btn { display: inline-block; order: 2; }
  .who { order: 3; margin-left: 0; width: 100%; padding: .4rem 0 .6rem; border-top: 1px solid var(--line-2); }
  .top nav { order: 4; flex-direction: column; width: 100%; gap: 0; padding-bottom: .5rem; border-top: 1px solid var(--line-2); }
  .top nav > a, .top nav summary { min-height: 44px; padding: 0 .5rem; border-bottom: 0; border-top: 0; border-left: 3px solid transparent; }
  .top nav > a[aria-current="page"], .top nav details.current > summary { border-left-color: var(--primary); }
  .top nav details > ul { position: static; box-shadow: none; border: 0; border-left: 3px solid var(--line); border-radius: 0; margin: 0 0 .4rem .5rem; padding: 0 0 0 .4rem; min-width: 0; }
  .js .top nav.collapsed { display: none; }
}

/* ---------- Page header, actions, buttons ---------- */
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.head-row > h1, .head-row > h2, .head-row > .page-title > h1 { margin-bottom: .25rem; }
.head-row > p { margin: .25rem 0; }
.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .4rem 0; }
.actions form { margin: 0; }
button, .button { font: inherit; font-weight: 500; font-size: .92rem; line-height: 1.2; padding: .5rem .9rem; border: 1px solid var(--control); border-radius: var(--r);
  background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; }
button:hover, .button:hover { border-color: var(--primary); color: var(--link); }
button[aria-disabled="true"] { opacity: .55; cursor: default; }   /* never disable the focused control: aria-disabled keeps the focus */
.primary, button.primary, .button.primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.primary:hover, button.primary:hover, .button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-fg); }
button.link { background: none; border: none; color: var(--link); padding: 0; min-height: 24px; font-weight: 400; font-size: inherit; text-decoration: underline; text-underline-offset: .15em; }
button.link:hover { text-decoration-thickness: 2px; }
.danger, button.danger { color: var(--bad); border-color: var(--bad); }

/* ---------- Breadcrumbs: the page's parents, above its heading (DESIGN.md) ---------- */
.crumbs { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .86rem; }
.crumbs li { display: flex; align-items: center; min-height: 24px; }
.crumbs li + li::before { content: "\203A"; content: "\203A" / ""; padding: 0 .45rem; color: var(--fg-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- Sub-navigation (a module's sections) as a tab strip ---------- */
.subnav { display: flex; gap: 0; flex-wrap: wrap; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.subnav a { padding: .55rem .6rem; text-decoration: none; color: var(--fg-2); border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500; min-height: 24px; }
.subnav a:hover { color: var(--link); }
.subnav a[aria-current="page"] { color: var(--link); border-bottom-color: var(--primary); font-weight: 600; }   /* current section shown by more than colour */

/* ---------- Cards, tiles, facts ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.15rem; margin: 1rem 0; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0 1rem; }   /* side by side when they fit, else stacked (320 px) */
dl.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: .75rem; margin: .75rem 0 1.25rem; }
dl.tiles .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .65rem .9rem; }
dl.tiles dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); font-weight: 600; }
dl.tiles dd { margin: 0; font-size: clamp(1.05rem, .6rem + 1vw, 1.35rem); font-weight: 600; white-space: nowrap; overflow-x: auto; font-variant-numeric: tabular-nums; }   /* a number never breaks mid-way; a very long one scrolls inside its tile */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; }
dl.facts dt { font-weight: 600; color: var(--fg-2); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 480px) { dl.facts { grid-template-columns: 1fr; } dl.facts dd { margin-bottom: .5rem; } }
.stack { display: flex; flex-direction: column; gap: .8rem; }

/* ---------- Tables ---------- */
table.list { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: .94rem; }
table.list th, table.list td { border-bottom: 1px solid var(--line-2); padding: .55rem .8rem; text-align: left; vertical-align: top; }
table.list thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); font-weight: 600; background: var(--bg); white-space: nowrap; }
table.list thead th:first-child { border-top-left-radius: var(--r-lg); } table.list thead th:last-child { border-top-right-radius: var(--r-lg); }
table.list tbody th { font-weight: 500; }
table.list tbody tr:last-child > * { border-bottom: 0; }
table.list tbody tr:hover > * { background: color-mix(in srgb, var(--primary) 5%, transparent); }
table.list tfoot td, table.list tfoot th { background: var(--bg); font-weight: 600; border-bottom: 0; }
table.list tbody td[colspan] { color: var(--fg-2); padding: 1.4rem .8rem; text-align: center; }   /* "No programs match." reads as an empty state */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data thead th a { color: inherit; display: inline-block; min-height: 24px; }   /* sort links: 24 px targets (2.5.8) */
.hscroll { overflow-x: auto; position: relative; margin: .25rem 0 1rem; }   /* wide tables scroll inside their box at 320 px (1.4.10); relative so .sr-only text inside stays inside */
.hscroll:focus-visible { outline: 3px solid var(--focus); }
.pager { display: flex; gap: 1rem; align-items: center; margin: .9rem 0; font-size: .92rem; color: var(--fg-2); }
.pager a { padding: .3rem .2rem; min-height: 24px; display: inline-block; }
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .1rem .55rem .1rem .45rem; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line); }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--fg-3); flex: none; }
.status.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .status.ok::before { background: var(--ok); }
.status.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; } .status.warn::before { background: var(--warn); }
.status.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; } .status.bad::before { background: var(--bad); }
.status.info { background: var(--info-bg); color: var(--info); border-color: transparent; } .status.info::before { background: var(--info); }

/* ---------- Messages and alerts ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { background: var(--ok-bg); color: var(--fg); border: 1px solid transparent; border-left: 4px solid var(--ok); border-radius: var(--r); padding: .6rem .9rem; margin-bottom: .5rem; }
.messages li.msg-error { background: var(--bad-bg); border-left-color: var(--bad); }
.messages li.msg-warning { background: var(--warn-bg); border-left-color: var(--warn); }
.messages li.msg-info { background: var(--info-bg); border-left-color: var(--info); }
.alert { background: var(--bad-bg); border-left: 4px solid var(--bad); border-radius: var(--r); padding: .6rem .9rem; margin: .5rem 0 1rem; }
ul.notices { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.notices li { border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem .9rem; margin-bottom: .5rem; background: var(--surface); }
ul.notices li.unread { border-left: 4px solid var(--primary); }   /* also marked "New" in text */
ul.notices li p { margin: .2rem 0; overflow-wrap: anywhere; }

/* ---------- Forms, filters ---------- */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--fg-2); }
label > input, label > select, label > textarea { font-weight: 400; color: var(--fg); }
.key-name { margin: 0; font-size: .88rem; font-weight: 600; color: var(--fg-2); }   /* a field's name shown without a control (a value chosen for you) */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], input[type=url], select, textarea {
  font: inherit; font-size: .95rem; padding: .45rem .6rem; border: 1px solid var(--control); border-radius: var(--r); background: var(--surface); color: var(--fg); min-height: 36px; max-width: 100%; }
input[type=file] { min-height: 24px; max-width: 100%; font: inherit; font-size: .95rem; color: var(--fg); }   /* 2.5.8: targets at least 24 x 24 px */
input[type=file]::file-selector-button { font: inherit; font-size: .9rem; min-height: 28px; padding: .25rem .7rem; margin-right: .6rem; border: 1px solid var(--control);
  border-radius: var(--r); background: var(--surface); color: var(--fg); cursor: pointer; }   /* the browser's own button is about 20 px tall */
input[type=file]::file-selector-button:hover { background: var(--surface-2); }
input[type=checkbox], input[type=radio] { inline-size: 24px; block-size: 24px; flex: none; margin: 0; accent-color: var(--primary); }   /* 2.5.8; flex: none keeps the box 24 px beside a long label in a flex row */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); border-width: 2px; }
select { max-width: 100%; }
summary { min-height: 24px; box-sizing: border-box; }   /* 2.5.8: a disclosure's summary is a target (the inline ones measured 22 px) */
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; max-width: 100%; }   /* a flex or grid item shrinks below its select's width at 320 px (1.4.10) */
.field .check { display: flex; gap: .5rem; align-items: center; font-weight: 400; color: var(--fg); }
.field-errors ul, ul.errorlist { margin: 0; padding-left: 1.1rem; color: var(--bad); font-size: .9rem; }
.helptext { font-size: .85rem; color: var(--fg-2); font-weight: 400; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); padding: .75rem 1rem; min-width: 0; margin: 0 0 .5rem; background: var(--surface); }   /* min-content wide by default, which overflows at 320 px */
legend { font-weight: 600; padding: 0 .3rem; font-size: .92rem; }
.form-narrow { max-width: 40rem; }
.inline-form { display: inline; margin: 0; }
.filters { display: flex; gap: .75rem 1rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 1rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.filters > label, .filters > fieldset, .filters > div { min-width: 0; max-width: 100%; }
.filters select { max-width: 100%; }
.filters > fieldset { margin: 0; background: none; }
/* Filing calendar: filing-type and due-date chips are links (one select, no script, the view in the URL); the chosen ones are filled,
   with a check mark and aria-current, never color alone. */
.calendar-filters { flex-direction: column; align-items: stretch; gap: .8rem; }
.calendar-filters > form { min-width: 0; max-width: 100%; }
.chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.chip-group .helptext { flex-basis: 100%; margin: 0; }
.chip-label { font-weight: 600; font-size: .92rem; min-width: 7.5rem; }
ul.toggle-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
ul.toggle-chips a { display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .85rem; border: 1px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--link); text-decoration: none; font-size: .92rem; }
ul.toggle-chips a:hover { text-decoration: underline; }
ul.toggle-chips a > span[aria-hidden], .chip-label > span[aria-hidden] { margin-right: .3rem; }
ul.toggle-chips a[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); font-weight: 600; }
.custom-range { align-items: center; }
.custom-range label { flex-direction: row; align-items: center; gap: .4rem; }
.custom-range input[type=date] { max-width: 100%; }
p.showing { margin: 0 0 .6rem; }
/* Programs catalog: the Other filters panel (a native <details>, programs/catalog.js swaps the chosen field's inputs in place) */
.other-filters { flex-basis: 100%; min-width: 0; max-width: 100%; border-top: 1px solid var(--line); padding-top: .6rem; }
.other-filters > summary { cursor: pointer; font-weight: 600; min-height: 24px; line-height: 24px; color: var(--link); width: max-content; max-width: 100%; }
.other-filters > summary .count { color: var(--fg-2); font-weight: 400; }
.other-body { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; padding: .6rem 0 .2rem; }
.other-body > .helptext { max-width: 60ch; margin: 0; }
.other-pick { display: flex; gap: .6rem 1rem; align-items: flex-end; flex-wrap: wrap; }
.other-pick > label { flex: 0 1 22rem; min-width: 0; }
.other-pick select { width: 100%; }   /* a select is as wide as its longest option unless told otherwise (1.4.10 at 320 px) */
.other-body > button { align-self: flex-start; }
.other-field { display: flex; flex-direction: column; gap: .3rem; max-width: 100%; }
.other-field fieldset { margin: 0; background: none; }
.other-field .checks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.other-field .row-form label { width: 9rem; max-width: 100%; }
.other-field .helptext { margin: 0; max-width: 60ch; }
.row-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.row-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .6rem 1rem; }
.row-fields label { overflow-wrap: anywhere; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .3rem 1rem; }
fieldset > .checks + .field { margin-top: .6rem; }   /* a field after a list of boxes in the same group (Notification settings) */
.checks label, label.inline, label:has(> input[type=checkbox]), label:has(> input[type=radio]) { flex-direction: row; align-items: center; gap: .45rem; font-weight: 400; color: var(--fg); }   /* a box and its words on one line */
label.inline { display: inline-flex; margin-right: .8rem; }
.column-group .checks label { overflow-wrap: anywhere; }   /* long field names wrap at 320 px */
.column-group { margin: .3rem 0; }
details.inline { display: inline-block; }
details.inline > summary { font-weight: normal; color: var(--link); min-height: 24px; line-height: 24px; cursor: pointer; }   /* 2.5.8: two side by side in a cell */
details.inline form { display: flex; gap: .4rem; align-items: end; flex-wrap: wrap; margin-top: .3rem; }
/* A <p> per field (Django's own rendering, the sign-in page, a few hand-written forms): label, field and help text stacked, so a link in the
   help text never sits beside the field it describes (2.5.8 found it crowding the password box). Only a paragraph that holds a label or a
   control is a field; a prose paragraph inside the form stays prose (UI review 2 found "Programs catalog" links on a line of their own). */
form.stack > p:has(> label, > input, > select, > textarea) { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
form.stack > p > label { color: var(--fg-2); }
form.stack > p:has(> input[type=checkbox]) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .5rem; }
input.key { width: 100%; }

/* ---------- Edit inputs: problem cells carry a mark and words (never colour alone); columns that change no result are in italics ---------- */
th.no-effect { font-style: italic; font-weight: normal; }
td.cell-error, td.cell-warning { outline: 2px solid var(--bad); outline-offset: -2px; }
td.cell-info { outline: 1px dashed var(--control); outline-offset: -2px; }
.mark { font-weight: 700; }
ul.issues { margin: .3rem 0; padding-left: 1.1rem; }
.issue-error, .issue-warning { color: var(--bad); }

/* ---------- Comments, bars, grants and other content blocks ---------- */
article.comment { border-top: 1px solid var(--line); padding: .7rem 0; }
article.comment h3 { margin: 0 0 .2rem; font-size: 1rem; }
.response { border-left: 3px solid var(--control); padding-left: .8rem; margin: .4rem 0 .4rem 1rem; }
.grants { margin: 0; padding-left: 1.1rem; }
.grants li { margin: .15rem 0; }
ul.links li { margin: .3rem 0; }   /* a list of links, one per line: 24 px apart (2.5.8) */
ul.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
ul.bars li { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr max-content; gap: .6rem; align-items: center; }
.bar-name { overflow-wrap: anywhere; }
.bar-track { display: block; width: 100%; background: var(--surface-2); border-radius: 3px; height: .9rem; }   /* an SVG: its bar's width is an attribute, never an inline style (the CSP forbids those) */
.bar { fill: var(--primary); }
.bar.negative { fill: var(--bad); fill-opacity: .55; }   /* and "(negative)" in text */
@media (max-width: 480px) { ul.bars li { grid-template-columns: 1fr max-content; } .bar-track { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Due-date cell, identifiers, collapsed sections, empty states ---------- */
td.due { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.due small { display: block; font-size: .78rem; color: var(--fg-2); }
.id { font-family: var(--mono); font-size: .9em; }
details.section { margin: 1.25rem 0 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
details.section > summary { display: flex; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; padding: .7rem 1rem; cursor: pointer; list-style: none; min-height: 44px; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: ""; width: .5em; height: .5em; border: solid var(--fg-2); border-width: 0 2px 2px 0; transform: rotate(-45deg); align-self: center; flex: none; }
details.section[open] > summary::before { transform: rotate(45deg); }
details.section > summary h2 { margin: 0; font-size: 1.1rem; }
details.section > summary .count { color: var(--fg-2); font-size: .9rem; }
details.section > .section-body { padding: 0 1rem 1rem; }
details.section > .section-body > .hscroll { margin-top: .25rem; }
section.cycle { margin-bottom: .5rem; }
.empty { text-align: center; padding: 2.25rem 1rem; color: var(--fg-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin: 1rem 0; }
.empty p { margin: .25rem auto; max-width: 48ch; }
.empty .empty-title { color: var(--fg); font-weight: 600; font-size: 1.05rem; }
.empty .button { margin-top: .75rem; }

/* ---------- Utilities ---------- */
.muted { color: var(--fg-2); }
.small { font-size: .86rem; }
.nowrap { white-space: nowrap; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }   /* a comment keeps its line breaks and never widens the page */
ol.comments { list-style: none; padding: 0; margin: 0; }

/* ---------- Dashboards (cedars/modules/data): controls, applied-filter chips, server-rendered bar charts ---------- */
.dash-controls fieldset { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.dash-controls legend { font-weight: 600; font-size: .9rem; padding: 0 .25rem; }
.dash-controls label.check, .dash-filters label.check { display: inline-flex; flex-direction: row; gap: .4rem; align-items: center; font-weight: 400; min-height: 24px; }
.dash-filters { flex-basis: 100%; }
.filters-more { flex-basis: 100%; }
.dash-filters summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.dash-filters fieldset { margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
/* The PA picker (core/_pa_picker.html): a closed <details> that names what it keeps; open, a tree of All PAs > PA types > PAs, then
   statewide programs. In the page's flow (it pushes what follows down), so nothing is covered and it reflows at 320 px. */
fieldset.pa-picker { flex-basis: 100%; border: 0; padding: 0; margin: .25rem 0; min-width: 0; display: block; }
fieldset.pa-picker > legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: .2rem; }
.pa-menu { max-width: 34rem; }
.pa-menu > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: 36px; padding: .3rem .7rem;
  border: 1px solid var(--control); border-radius: var(--r, 6px); background: var(--surface); color: var(--fg); list-style: none; }
.pa-menu > summary::-webkit-details-marker { display: none; }
.pa-menu > summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); flex: none; }
.pa-menu[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.pa-panel { border: 1px solid var(--control); border-top: 0; border-radius: 0 0 var(--r, 6px) var(--r, 6px); background: var(--surface);
  padding: .5rem .7rem .6rem; max-height: 26rem; overflow-y: auto; }
.pa-panel .helptext { margin: 0 0 .4rem; }
ul.pa-tree, ul.pa-children { list-style: none; margin: 0; padding: 0; }
ul.pa-children { padding-left: 1.9rem; }
ul.pa-children ul.pa-children { padding-left: 2.6rem; }
.pa-row { display: flex; align-items: center; gap: .25rem; }
.pa-picker label.check { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: .1rem .4rem; align-items: center; font-weight: 400;
  min-height: 24px; color: var(--fg); }
.pa-picker label.pa-head { font-weight: 600; }
.pa-picker label.pa-head .muted { font-weight: 400; }
li.pa-statewide { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--line); }
.pa-twisty { width: 24px; height: 24px; min-height: 24px; padding: 0; margin: 0; flex: none; display: inline-flex; align-items: center;
  justify-content: center; background: transparent; color: var(--fg); border: 1px solid var(--control); border-radius: 4px; }
.pa-twisty[hidden] { display: none; }
.pa-twisty::before { content: ""; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); }
.pa-twisty[aria-expanded="true"]::before { transform: rotate(45deg) translate(-1px, -1px); }
/* Without the script the show/hide buttons stay hidden; a row without one lines up with those that have one once it runs. */
.js-pa .pa-row > label:first-child { margin-left: calc(24px + .25rem); }
ul.chips { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
ul.chips li { border: 1px solid var(--control); border-radius: 999px; padding: .15rem .7rem; background: var(--surface); font-size: .9rem; }
ul.downloads { padding-left: 1.2rem; }
ul.record-downloads li { margin-bottom: .5rem; }
form.inline-download { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem .5rem .25rem 0; }
form.inline-download label { flex-direction: row; align-items: center; }
table.list.records thead th { text-transform: none; letter-spacing: 0; }   /* canonical field names keep their case */
table.records td { white-space: nowrap; }
.column-picker details { margin: .2rem 0; min-width: 0; }   /* a flex item: without this its min-content width (the longest field name) pushes past 320 px */
.column-picker summary { cursor: pointer; min-height: 24px; }
ul.column-list { list-style: none; padding: 0 0 0 1.2rem; margin: .3rem 0 .6rem; columns: 22rem 2; }
@media (max-width: 480px) { ul.column-list { columns: auto 1; } }   /* one column at phone width: Chromium lays two 22rem columns out past the viewport (1.4.10) */
ul.column-list li { break-inside: avoid; padding: .15rem 0; overflow-wrap: anywhere; }
ul.column-list label.check { display: inline-flex; gap: .4rem; align-items: center; min-height: 24px; }
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .75rem 1rem; margin: 0 0 1rem; }
.chart-legend { list-style: none; display: flex; gap: 1.25rem; flex-wrap: wrap; padding: 0; margin: 0 0 .5rem; font-size: .9rem; }
.chart-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.chart-defs { position: absolute; }
.chart-rows { list-style: none; padding: 0; margin: 0; }
.chart-rows li { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr; gap: .25rem .75rem; align-items: center; padding: .3rem 0; border-top: 1px solid var(--line-2); }
.chart-rows li:first-child { border-top: 0; }
.chart-label { font-size: .9rem; overflow-wrap: anywhere; }
.chart-bars { display: block; overflow: visible; }
.bar-claims { fill: var(--chart-claims); }
.bar-forecast { fill: url(#hatch); stroke: var(--chart-forecast); stroke-width: 1.5; }
.hatch-bg { fill: var(--surface); }
.hatch-line { stroke: var(--chart-forecast); stroke-width: 3; }
.zero { stroke: var(--fg); stroke-width: 1; }
@media (max-width: 480px) { .chart-rows li { grid-template-columns: 1fr; } }
.goal { stroke: var(--fg); stroke-width: 3; stroke-dasharray: 3 2; }   /* the goal marker: dashed, in the text colour (above 3:1 in both schemes) */
/* Chart values (data/dashboard.js): the row under the pointer or with the focus shows its values beside its bars. They stay while the
   pointer rests on them (they sit inside the row) and Escape hides them (1.4.13). Without the script they are only the table below. */
.chart-rows li { position: relative; }
.chart-rows li[tabindex] { cursor: default; border-radius: var(--r); }
.chart-rows li[tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.chart-rows li.chart-active { background: var(--surface-2); }
.chart-tip.shown { position: absolute; top: calc(100% - .2rem); z-index: 5; display: flex; flex-direction: column; gap: .15rem; min-width: 12rem;
  max-width: min(22rem, 100%); padding: .5rem .7rem; background: var(--surface); color: var(--fg); border: 1px solid var(--control);
  border-radius: var(--r); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); font-size: .88rem; line-height: 1.35; }
.chart-tip .tip-label { font-weight: 600; overflow-wrap: anywhere; }
.chart-tip .tip-row { display: flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.chart-tip .tip-row svg { flex: none; }
.chart-tip .tip-row.hot { font-weight: 700; }
/* Sections that fold away (Filters and view, each chart, each table): the shared details.section, its heading a step smaller under a block's h2 */
details.dash-part { margin: .75rem 0 0; }
details.dash-part > summary h3 { margin: 0; font-size: 1rem; }
details.dash-part > .section-body > .chart { margin-bottom: 0; border: 0; padding: .25rem 0 0; }
details.dash-part > .section-body .dash-controls { margin: 0; }

/* ---------- Front page (data/front.html): the introduction, the program cycle's cards, Help ---------- */
.front-intro { max-width: 72ch; margin-bottom: 1.5rem; }
.front-intro .lede { font-size: 1.12rem; color: var(--fg); }
.tour-offer { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; background: var(--info-bg); border-left: 4px solid var(--info);
  border-radius: var(--r); padding: .55rem .9rem; margin: 1rem 0 0; }
.tour-offer button.link { margin-left: auto; }

/* ---------- Release notes, limits and the FAQ (cedars/services/releases, core/help/faq.html) ---------- */
.coming-changes { background: var(--info-bg); border-left: 4px solid var(--info); border-radius: var(--r); padding: .5rem .9rem; margin: 0 0 1rem; }   /* text and links on --info-bg as .tour-offer: fg and link over 7:1 in both schemes */
.release-list { list-style: none; padding: 0; margin: 0; }
.release-list li { border-bottom: 1px solid var(--line-2); padding: .25rem 0 .75rem; }
.release-list h3 { margin-top: .75rem; }
.faq { border-top: 1px solid var(--line-2); margin-top: 1rem; max-width: 72ch; }
.faq .example { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem 1rem; margin: .5rem 0 .75rem; }
.faq .example table caption { text-align: left; font-weight: 600; padding-bottom: .25rem; }
.front-cycle > .head-row { align-items: flex-end; }
.cycle-pick { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.front-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin: .75rem 0 1rem; }
.front-card { margin: 0; display: flex; flex-direction: column; }
.front-card h3 { margin: 0 0 .5rem; color: var(--fg-2); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.front-card .card-link { margin-top: auto; padding-top: .4rem; }
dl.figures { margin: 0 0 .5rem; display: grid; gap: .45rem; }
dl.figures .figure { min-width: 0; }
dl.figures dt { font-size: .85rem; color: var(--fg-2); }
dl.figures dd { margin: 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
dl.figures .lead dd { font-size: clamp(1.5rem, 1rem + 1.4vw, 1.9rem); line-height: 1.15; }
dl.figures .detail { display: block; font-size: .85rem; font-weight: 400; color: var(--fg-2); }
/* The progress bar repeats the words beside it (aria-hidden); fill 3:1 on its track in both schemes: primary on surface-2. */
.meter-row { margin: .1rem 0 .4rem; }
.meter { display: block; width: 100%; height: .6rem; }
.meter-track { fill: var(--surface-2); stroke: var(--control); stroke-width: .5; vector-effect: non-scaling-stroke; }
.meter-fill { fill: var(--primary); }
@media (forced-colors: active) { .meter-track { fill: Canvas; stroke: CanvasText; } .meter-fill { fill: Highlight; } }
.meter-label { margin: .25rem 0 0; font-size: .9rem; font-weight: 600; }
.front-help .card h3 { margin-top: 0; }
.front-help .cards { gap: 0 1rem; }
.guide { max-width: 75ch; }
.guide li { margin: .3rem 0; }
dl.glossary { margin: .5rem 0 1.25rem; }
dl.glossary dt { font-weight: 600; margin-top: .9rem; }
dl.glossary dd { margin: .2rem 0 0 1.25rem; }
@media (max-width: 480px) { dl.glossary dd { margin-left: 0; } }
ol.tour-list { padding-left: 1.4rem; max-width: 75ch; }
ol.tour-list h2, ol.tour-list h3 { font-size: 1.1rem; margin: 1.2rem 0 .3rem; }

/* ---------- The guided tour (core/tour.js): a modal dialog beside the part of the page a step describes ---------- */
/* The step's part keeps the page's own colors with a focus-colored outline, and the rest of the page is dimmed behind it by a wide shadow.
   The backdrop itself is clear, so the part shows through; in forced-colors mode the shadow drops and the outline stays. */
dialog.tour { position: fixed; inset: auto 1rem 1rem auto; margin: 0; width: min(26rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--surface); color: var(--fg); border: 2px solid var(--primary); border-radius: var(--r-lg); padding: 1rem 1.15rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
dialog.tour.tour-top { inset: 1rem 1rem auto auto; }
dialog.tour::backdrop { background: transparent; }
dialog.tour h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
dialog.tour h2:focus { outline: none; }
dialog.tour h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
dialog.tour .tour-count { display: block; font-size: .78rem; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .05em; }
dialog.tour p { margin: .3rem 0 .7rem; }
.tour-actions { margin: .5rem 0 0; }
.tour-actions [data-tour-close] { margin-left: auto; }
.tour-target { position: relative; z-index: 5; outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r);
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 200vmax rgba(15, 20, 24, .55); }
@media (max-width: 480px) { dialog.tour, dialog.tour.tour-top { inset: auto .5rem .5rem .5rem; width: auto; } dialog.tour.tour-top { inset: .5rem .5rem auto .5rem; } }

/* ---------- Page help (cedars/core/page_help.py): the (?) beside each page's heading and the guide it opens ---------- */
.page-title { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.page-title > h1 { min-width: 0; }
/* A 28 px circle (2.5.8), its border 3:1 on the page (--control) in both schemes; the "?" is the link color, named "Help with this page". */
.page-help { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid var(--control); background: var(--surface); color: var(--link); font-weight: 700; font-size: 1rem; line-height: 1;
  text-decoration: none; position: relative; top: -.2rem; }
.page-help:hover { background: var(--surface-2); text-decoration: none; }
dialog.page-help-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; margin: auto;
  background: var(--surface); color: var(--fg); border: 2px solid var(--primary); border-radius: var(--r-lg); padding: 1.1rem 1.3rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
dialog.page-help-dialog::backdrop { background: rgba(15, 20, 24, .55); }
dialog.page-help-dialog h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
dialog.page-help-dialog h2:focus { outline: none; }
dialog.page-help-dialog h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
dialog.page-help-dialog h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
dialog.page-help-dialog .tour-count { display: block; font-size: .78rem; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .05em; }
dialog.page-help-dialog p, dialog.page-help-dialog li { max-width: 70ch; }
dialog.page-help-dialog ul.links { margin-bottom: 0; }
.measure { max-width: 75ch; }
ul.links.columns { columns: 18rem; column-gap: 2rem; }
ul.links.columns li { break-inside: avoid; }