/* ==========================================================================
   BEL-AIR public site — inner pages (Mockup 02)
   A dark photographic header (the homepage's cinema), then a light reading
   body for text, tables and forms. Readers are 13 to 80: body 18 px, nothing
   under 14 px, every text colour 7:1 on its ground (tokens.css, "Light
   reading body"). Shared by every page except the homepage's own sections.
   ========================================================================== */

/* hidden always wins over a component's display (gates, notices, steps, states) */
[hidden] { display: none !important; }

/* Text links that stand alone (a table cell, a definition, a card title, a link on its own line) get a 44 px tap
   area without moving the text: on an inline link, vertical padding widens the target but not the line, and the
   side padding is cancelled by an equal negative margin. The link still wraps like text. Classed links style
   themselves; this sits first in the file so any later component rule wins. */
main :where(td, dd, h2, h3, h4, b, .old-note, .empty) > a:not([class]),
main :where(li, p) > a:only-child:not([class]):not(.toc a, .crumbs a, nav a) { padding: .7rem .6rem; margin-inline: -.6rem; }

/* ---------------------------------------------------------------- shell (all pages, homepage included) */
/* Six menu items (decision D1, BRD M2-SHELL-02): Discover · Services · News and events · Government ·
   Transparency · Contact. The whole bar fits from 1280 px: Search is its icon (its name stays), the brand is its
   seal until the words fit, and below that the links move behind a labelled "Menu" button. Widths are for a 16 px
   root; js/public/prefs-head.js rescales them with the text size. */
.util--account { text-decoration: none; white-space: nowrap; }
.util--account svg { flex: none; }
.util--account[aria-current="page"] { border-color: var(--gold); color: var(--gold); }
.util kbd, .util--services .label, .nav .brand small { display: none; }
.nav__inner { gap: .9rem; } .nav__utils { gap: .4rem; } .util { padding: 0 .75rem; }
.util--services, .util--motion { width: 2.75rem; padding: 0; justify-content: center; flex: none; }
.nav__primary > li > a, .nav__primary > li > button { padding: 0 .5rem; white-space: nowrap; } .nav__primary > li > a::after, .nav__primary > li > button::after { left: .5rem; right: .5rem; }
.nav__primary > li > a[aria-current="page"]::after, .nav__primary > li > button.is-current::after { transform: scaleX(1); }
@media (max-width: 1440px) { .nav .brand > span { display: none; } }
@media (max-width: 1279px) { .nav__primary, .mega, .nav__inner > nav { display: none; } .burger { display: inline-flex; } .nav .brand > span { display: inline; } .util--services { width: auto; padding: 0 .75rem; } .util--services .label { display: inline; } }
/* up to 820 px (a 768 px tablet included) the bar has no room for the account link beside the text-size group (scan A-1,
   UX-92): the Menu dialog carries Sign in / My Account there, as on phones */
@media (max-width: 820px) { .util--account { display: none; } }
@media (max-width: 520px) { .util--motion { display: none; } } /* the menu has the full "Pause motion" button */
/* the menu button says "Menu" (a bare ☰ is not understood by everyone) */
.burger { width: auto; padding: 0 .8rem; gap: .55rem; align-items: center; font-weight: 700; color: var(--ink); }
.burger .burger__ico { display: block; width: 1.1rem; height: 2px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
.burger .burger__label { width: auto; height: auto; background: none; box-shadow: none; }
@media (max-width: 345px) { .burger { padding: 0 .6rem; } }
/* the bar's last steps (BRD § 8.1 table) again: this file comes after site.css, so its gap and brand rules above undid
   site.css's "gaps tighten" and "only the seal" — at A++ a 390 px phone lays out as 312 px and the Menu button went
   16 px off screen, at A+ (347 px) 10 px (UX-92). The whole "gaps tighten, Emergency dot hidden" step starts at 360 px
   instead of 345 px, so A+ on a 390 px phone (347 px) fits inside the page margin too (BRD § 8.1 table: flagged).
   Widths for a 16 px root; prefs-head.js rescales them with the text size. */
@media (max-width: 360px) { .nav__inner { gap: .4rem; } .nav .brand { gap: .4rem; font-size: 1rem; } .util--emergency { padding: 0 .6rem; } .util--emergency .dot { display: none; } }
@media (max-width: 318px) { .nav .brand > span { display: none; } }
/* pause / play motion: the icon becomes "play" while paused, the label says what pressing does */
[data-motion-toggle][data-paused="true"] .hero__pause-ico { width: 0; height: 0; border-style: solid; border-width: .42rem 0 .42rem .7rem; border-color: transparent transparent transparent currentColor; }
.motion-toggle[data-paused="true"], .hero__pause[data-paused="true"], .util--motion[data-paused="true"] { border-color: var(--gold); }
/* the phone menu: Discover opens into its pages; the current page is marked by a bar and weight, not colour alone */
.mobile-menu nav details { border-bottom: var(--hairline); }
.mobile-menu nav summary { display: flex; justify-content: space-between; align-items: center; min-height: 2.75rem; padding: 1rem 0; font-family: var(--font-display); font-size: 1.9rem; cursor: pointer; list-style: none; }
.mobile-menu nav summary::-webkit-details-marker { display: none; }
.mobile-menu nav summary::after { content: "+" / ""; font-family: var(--font-ui); font-size: 1.4rem; color: var(--ink-3); }
.mobile-menu nav details[open] > summary::after { content: "−" / ""; }
.mobile-menu nav details a { font-size: 1.35rem; padding: .7rem 0 .7rem 1rem; }
.mobile-menu nav details a:last-child { border-bottom: 0; }
.mobile-menu nav a[aria-current], .mega a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); padding-left: .85rem; }
.mobile-menu nav details a[aria-current] { padding-left: 1.6rem; }
.mobile-menu__quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the footer's "All emergency information" link is a sentence, not a number: it wraps and uses the text face */
.footer__grid > * { min-width: 0; }
.footer__em li a.footer__em-all { white-space: normal; font-family: var(--font-ui); }
.finder__all { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .9rem; }

/* ---------------------------------------------------------------- homepage additions (dark ground) */
/* upcoming events on the homepage now link to their pages */
.events h4 a { color: var(--ink); text-decoration: none; }
.events h4 a:hover { color: var(--gold); text-decoration: underline; }
a.badge { min-height: 2.75rem; text-decoration: none; color: var(--ink); }
a.badge:hover { border-color: var(--gold); color: var(--gold); }
a.badge--open { color: var(--night); }
a.badge--open:hover { background: var(--ink); border-color: var(--ink); color: var(--night); }
/* the business inset photo hangs 6% past its column; once the column is full width (≤ 900 px) that is past the screen */
@media (max-width: 900px) { .business__visual .photo--inset { right: 0; } }
/* track · check · sign in, under Services */
.quick-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.quick { display: grid; align-content: start; gap: .4rem; padding: 1.25rem; color: var(--ink); text-decoration: none; min-width: 0; }
.quick label, .quick b { font-weight: 700; font-size: var(--t-lg); }
.quick p, .quick > span { color: var(--ink-2); font-size: var(--t-sm); }
.quick__row { display: flex; gap: .5rem; margin-top: .5rem; }
.quick input { flex: 1; min-width: 0; width: 100%; min-height: 3rem; padding: 0 .9rem; font: inherit; font-family: var(--font-mono); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--night-2); border: 1px solid var(--line-strong); border-radius: var(--r-ui); }
.quick input:focus { border-color: var(--gold); } /* plus the global 3 px gold :focus-visible ring */
.quick--link { transition: border-color var(--d-micro); }
.quick--link:hover { border-color: var(--gold); }
.quick--link .link-arrow { margin-top: .4rem; color: var(--gold); }
@media (max-width: 1000px) { .quick-strip { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- real maps (OpenStreetMap via Leaflet, js/osm-map.js) */
.osm { height: clamp(20rem, 14rem + 22vw, 34rem); border-radius: var(--r-photo); overflow: hidden; background: var(--night-2); border: 1px solid var(--glass-line); }
.osm--hall { height: clamp(18rem, 12rem + 16vw, 26rem); }
.osm .leaflet-container, .osm.leaflet-container { background: var(--night-2); font-family: var(--font-ui); }
.osm .leaflet-control-zoom { border: 1px solid var(--line-strong) !important; border-radius: var(--r-ui); overflow: hidden; }
.osm .leaflet-control-zoom a, .osm .leaflet-control-zoom button { display: block; border: 0; border-bottom: 1px solid var(--line); padding: 0; text-align: center; cursor: pointer; width: 2.75rem !important; height: 2.75rem !important; line-height: 2.75rem !important; background: rgba(12, 18, 32, .92); color: var(--ink); border-color: var(--line) !important; font-size: 1.25rem; }
.osm .leaflet-control-zoom button:last-child { border-bottom: 0; }
.osm .leaflet-control-zoom button:focus-visible { outline: 3px solid var(--focus-d); outline-offset: -3px; }
.osm .leaflet-control-zoom a:hover, .osm .leaflet-control-zoom button:hover:not(:disabled) { background: var(--ink); color: var(--night); }
.osm .leaflet-control-zoom a.leaflet-disabled, .osm .leaflet-control-zoom button:disabled { cursor: default; color: var(--ink-3); background: rgba(12, 18, 32, .92); }
.osm .leaflet-control-attribution { background: rgba(7, 11, 20, .82); color: var(--ink-2); font-size: .875rem; line-height: 1.5; padding: .2rem .6rem; }
.osm .leaflet-control-attribution a { color: var(--blue-light); }
.osm :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.osm-pin { display: grid; place-items: center; }
.osm-pin__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(255, 210, 63, .25), 0 0 0 1px var(--night); }
.osm-pin--main .osm-pin__dot { width: 18px; height: 18px; background: var(--yellow); box-shadow: 0 0 0 8px rgba(255, 255, 0, .22), 0 0 0 2px var(--night); }
.osm-pin--small .osm-pin__dot { width: 10px; height: 10px; background: var(--ink); box-shadow: 0 0 0 4px rgba(243, 239, 230, .18); }
html.motion .osm-pin--main .osm-pin__dot { animation: osm-breathe 4.5s ease-in-out infinite; }
@keyframes osm-breathe { 50% { box-shadow: 0 0 0 14px rgba(255, 255, 0, .08), 0 0 0 2px var(--night); } }
.leaflet-tooltip.osm-label { background: rgba(7, 11, 20, .9); border: 1px solid var(--glass-line); border-radius: var(--r-ui); color: var(--ink); box-shadow: none; padding: .35rem .6rem; font-family: var(--font-ui); font-size: .875rem; line-height: 1.3; white-space: nowrap; }
.leaflet-tooltip.osm-label::before { display: none; }
.leaflet-tooltip-right.osm-label { margin-left: 16px; }
.leaflet-tooltip-left.osm-label { margin-left: -16px; }
.leaflet-tooltip.osm-label b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.leaflet-tooltip.osm-label span { display: block; font-family: var(--font-mono); font-size: .875rem; color: var(--ink-2); letter-spacing: .04em; }
.map__legend i.b { background: rgba(255, 210, 63, .12); border: 2px dashed var(--gold); }
.map__legend i.h { border-radius: 50%; background: var(--yellow); border: 0; }
.map__legend i.o { border-radius: 50%; background: var(--gold); border: 0; }
@media (max-width: 600px) { .leaflet-tooltip.osm-label span { display: none; } }

/* ---------------------------------------------------------------- page hero */
.page-hero { position: relative; isolation: isolate; color: var(--ink); background: var(--night); padding: calc(clamp(8rem, 6rem + 6vw, 11rem) + var(--alert-h, 0px)) 0 clamp(2.5rem, 2rem + 2vw, 4rem); overflow: hidden; }
.page-hero__photo { position: absolute; inset: 0; z-index: -2; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 11, 20, .94) 0%, rgba(7, 11, 20, .86) 45%, rgba(7, 11, 20, .7) 100%), linear-gradient(0deg, rgba(7, 11, 20, .9), transparent 55%); }
.page-hero--plain { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.page-hero--plain::before { background: radial-gradient(60% 120% at 85% 0%, rgba(43, 179, 163, .22), transparent 60%), radial-gradient(50% 100% at 10% 100%, rgba(255, 210, 63, .16), transparent 65%); }
/* phones and tablets: the text runs to the right edge, where the shade is thinnest, so the label goes full ink and the shade
   holds .8 there (7:1; at 768 px the eyebrow measured 6.61–6.96:1 with the desktop shade — scan A-3) */
@media (max-width: 1100px) { .page-hero .eyebrow { color: var(--ink); } .page-hero:not(.page-hero--plain)::before { background: linear-gradient(90deg, rgba(7, 11, 20, .94) 0%, rgba(7, 11, 20, .9) 45%, rgba(7, 11, 20, .8) 100%), linear-gradient(0deg, rgba(7, 11, 20, .9), transparent 55%); } }
.page-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-3xl); line-height: .98; letter-spacing: -0.02em; max-width: 16ch; margin-top: .6rem; }
.page-hero h1 em { font-style: italic; color: var(--gold); }
.page-hero .lede { margin-top: 1.1rem; max-width: var(--measure); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-2); }
.page-hero__meta b { color: var(--ink); font-weight: 500; }

/* the photograph in a page header drifts slowly, as every photograph on the homepage does */
html.motion .page-hero__photo img { animation: drift-photo 40s ease-in-out infinite alternate; }

/* breadcrumbs (on the dark header) */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--t-sm); color: var(--ink-2); }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; color: var(--ink-3); }
.crumbs a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); min-height: 2.75rem; min-width: 2.75rem; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--ink-2); }
.page-hero .crumbs [aria-current] { color: var(--ink); } /* a long page name runs into the lighter side of the header photo */

/* current menu item */
.nav__primary > li > a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu nav a[aria-current="page"] { color: var(--gold); }

/* ---------------------------------------------------------------- page body (the homepage's dark ground; the class name predates 12 Oct 2026) */
.paper { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--ink-d); padding: clamp(3.5rem, 2rem + 5vw, 7rem) 0 clamp(4.5rem, 3rem + 5vw, 8rem); }
/* one quiet light, as in the homepage's sections; never more than two in view */
.paper::before { content: ""; position: absolute; z-index: -1; width: 46vw; height: 46vw; right: -16vw; top: 18rem; border-radius: 50%; background: radial-gradient(circle, rgba(43, 179, 163, .16), transparent 62%); pointer-events: none; }
.paper a { color: var(--link-d); }
/* whole-card links read like the homepage's cards: warm white, gold on hover */
.paper a.svc-row, .paper a.card, .paper a.doc, .paper a.svc, .paper a.story { color: var(--ink-d); text-decoration: none; }
.paper a.svc-row:hover b, .paper a.card:hover h3, .paper a.card:hover b { color: var(--gold); }
/* header and body share the dark ground now, so the body does not need its own top margin */
.page-hero + .paper, .page-hero + div > .paper { padding-top: clamp(.5rem, 1vw, 1.5rem); }
.paper :focus-visible, .paper [data-focus-moved]:focus { outline-color: var(--focus-d); }
.paper .eyebrow { color: var(--ink-d3); }
.paper .note { color: var(--ink-d3); }
.paper--alt { background: var(--paper-3); }
.paper h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-2xl); line-height: 1.02; letter-spacing: -0.01em; color: var(--ink-d); }
/* the homepage's section mark: a short ribbon above each section title */
.paper h2:not(.notice h2):not(.gate h2):not(.card h2):not(.step-title):not(.visually-hidden):not(.error-summary h2)::before { content: ""; display: block; width: 2rem; height: 2px; border-radius: 2px; background: var(--grad-ribbon); margin-bottom: 1.1rem; }
.paper h3 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 400; line-height: 1.1; color: var(--ink-d); }
.paper h4 { font-size: var(--t-base); font-weight: 700; color: var(--ink-d); }
.paper .lede { color: var(--ink-d2); }
.paper .btn { color: var(--ink-d); border-color: var(--line-d-strong); }
.paper .btn:hover { background: var(--ink-d); color: var(--paper); border-color: var(--ink-d); }
.paper .btn--primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.paper .btn--primary:hover { background: var(--blue-ink); border-color: var(--blue-ink); color: var(--on-blue); }
.paper .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--night); }
.paper .btn--gold:hover { background: var(--ink); border-color: var(--ink); color: var(--night); }
.paper .btn--quiet { border-color: transparent; text-decoration: underline; padding-inline: .5rem; }
.paper .btn--quiet:hover { background: transparent; color: var(--link-d); border-color: transparent; }
.paper .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.paper .link-arrow { color: var(--link-d); }
.paper .link-arrow:hover { color: var(--ink-d); }
.paper .badge { border-color: var(--line-d-strong); color: var(--ink-d); }

/* main column + side column */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.layout--wide-side { grid-template-columns: minmax(0, 1fr) 24rem; }
.layout > aside { position: sticky; top: 5.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
/* long words (an email address at A++) wrap instead of pushing a column past the screen */
.layout > * { min-width: 0; }
.card, .notice, .help-card dd { overflow-wrap: break-word; }
.help-card dd a, .card a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .layout, .layout--wide-side { grid-template-columns: minmax(0, 1fr); } .layout > aside { position: static; } }
.stack > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: clamp(3rem, 2rem + 3vw, 5.5rem); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 2rem; }

/* prose (lists and spacing were reset by site.css) */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4rem; }
.prose li::marker { color: var(--ink-d3); }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--gold); font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.3; }
/* an editor's table, code or long address never pushes a phone page sideways (M2-SHELL-53; /{slug}, /help/{slug}) */
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose pre { max-width: 100%; overflow-x: auto; }
.prose a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- cards */
.card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-photo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: clamp(1.1rem, 1rem + .6vw, 1.75rem); }
.card--flush { padding: 0; overflow: hidden; }
.card h3 + p, .card h4 + p { margin-top: .4rem; }
.card p { color: var(--ink-d2); }
.card .card__photo { aspect-ratio: 3 / 2; overflow: hidden; }
.card .card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-premium); }
.card .card__body { padding: 1.1rem 1.25rem 1.35rem; }
a.card { display: block; text-decoration: none; color: var(--ink-d); transition: border-color var(--d-micro), transform var(--d-micro) var(--ease-premium), box-shadow var(--d-micro); }
a.card:hover { border-color: var(--gold); transform: translateY(-2px); }
a.card:hover .card__photo img { transform: scale(1.03); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; }
.card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.card--dark { background: var(--night-2); color: var(--ink); border-color: var(--night-2); }
.card--dark p { color: var(--ink-2); }
.card--dark h3, .card--dark h4 { color: var(--ink); }
.card--dark a { color: var(--blue-light); }
.card--dark :focus-visible { outline-color: var(--gold); }

/* side help card */
.help-card h3 { font-size: var(--t-lg); }
.help-card dl { display: grid; gap: .6rem; margin-top: .75rem; }
.help-card dt { font-family: var(--font-ui); font-size: var(--t-sm); letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--ink-d3); }
.help-card dd { color: var(--ink-d); }

/* service row (directory) */
.svc-row { display: grid; grid-template-columns: 2.75rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-photo); text-decoration: none; color: var(--ink-d); min-height: 4.5rem; transition: border-color var(--d-micro), transform var(--d-micro) var(--ease-premium); }
.svc-row:hover { border-color: var(--gold); transform: translateY(-2px); }
.svc-row .ico { width: 2rem; height: 2rem; color: var(--gold); }
.svc-row b { display: block; font-weight: 700; }
.svc-row small { display: block; color: var(--ink-d2); font-size: var(--t-sm); }
.svc-row .tags { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: end; }
@media (max-width: 600px) { .svc-row { grid-template-columns: 2.25rem 1fr; } .svc-row .tags { grid-column: 2; justify-content: start; } }
.ico { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- tags, badges */
.tag { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.9rem; padding: .3rem .6rem; border-radius: var(--r-ui); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; max-width: 100%; border: 1px solid transparent; }
.tag--online { background: var(--gold); color: var(--night); border-color: var(--gold); }
.tag--hall { background: transparent; color: var(--ink-d); border-color: var(--line-d-strong); }
.tag--free { background: var(--ok-bg); color: var(--ok); border-color: currentColor; }
.status { display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .3rem .65rem; border-radius: var(--r-ui); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; max-width: 100%; border: 1px solid currentColor; }
@media (min-width: 761px) { .table .status, .table .tag { white-space: nowrap; } }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: none; }
.status--ok { color: var(--ok); background: var(--ok-bg); }
.status--wait { color: var(--wait); background: var(--wait-bg); }
.status--more { color: var(--more); background: var(--more-bg); }
.status--bad { color: var(--bad); background: var(--bad-bg); }
.status--info { color: var(--info); background: var(--info-bg); }
.status--muted { color: var(--ink-d2); background: var(--paper-3); }

/* ---------------------------------------------------------------- notices (one pattern for every status message, brief § 11) */
.notice { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.1rem 1.25rem; border-radius: var(--r-photo); border: 1px solid currentColor; border-left-width: 6px; background: var(--paper-2); color: var(--ink-d); }
.notice__icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; color: var(--paper-2); }
.notice__icon svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.notice h2, .notice h3 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 400; line-height: 1.1; color: inherit; }
.notice p, .notice ul { grid-column: 2; color: var(--ink-d); }
.notice p + p, .notice ul { margin-top: .4rem; }
.notice ul { list-style: disc; padding-left: 1.25rem; }
.notice .next { font-weight: 700; }
.notice__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.notice--ok { color: var(--ok); background: var(--ok-bg); } .notice--ok .notice__icon { background: var(--ok); }
.notice--wait { color: var(--wait); background: var(--wait-bg); } .notice--wait .notice__icon { background: var(--wait); }
.notice--more { color: var(--more); background: var(--more-bg); } .notice--more .notice__icon { background: var(--more); }
.notice--bad { color: var(--bad); background: var(--bad-bg); } .notice--bad .notice__icon { background: var(--bad); }
.notice--info { color: var(--info); background: var(--info-bg); } .notice--info .notice__icon { background: var(--info); }
.notice--alert { color: var(--on-blue); background: var(--alert); border-color: var(--alert); }
.notice--alert p, .notice--alert ul { color: var(--on-blue); }
.notice--alert .notice__icon { background: var(--yellow); color: var(--night); }
.notice--alert a { color: var(--on-blue); }
.notice--alert .btn { color: var(--on-blue); border-color: var(--on-blue); }
.notice--alert .btn:hover { background: var(--on-blue); color: var(--alert); }
.notice--alert :focus-visible { outline-color: var(--yellow); }
@media (max-width: 520px) { .notice { grid-template-columns: minmax(0, 1fr); } .notice p, .notice ul, .notice__actions { grid-column: 1; } }

/* ---------------------------------------------------------------- forms */
.form { max-width: 44rem; }
.field { display: grid; gap: .4rem; }
.field + .field, .field + fieldset, fieldset + .field, fieldset + fieldset { margin-top: 1.4rem; }
.field label, .legend, fieldset legend { font-weight: 700; color: var(--ink-d); font-size: var(--t-base); }
.req { font-weight: 600; color: var(--ink-d2); font-size: var(--t-sm); margin-left: .35rem; }
.opt { font-weight: 600; color: var(--ink-d3); font-size: var(--t-sm); margin-left: .35rem; }
.hint { color: var(--ink-d2); font-size: var(--t-sm); line-height: 1.5; }
.paper input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .paper select, .paper textarea { width: 100%; min-height: 3.25rem; padding: .7rem .9rem; font: inherit; font-size: var(--t-base); color: var(--ink-d); background: var(--paper-2); border: 1px solid var(--line-d-strong); border-radius: var(--r-ui); transition: border-color var(--d-micro), box-shadow var(--d-micro); }
.paper textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.paper select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EFE6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.2rem; }
.paper input:focus, .paper select:focus, .paper textarea:focus { border-color: var(--gold); } /* plus the 3 px gold :focus-visible ring (WCAG 2.4.7) */
.paper input[readonly] { background: var(--paper-3); color: var(--ink-d2); }
.paper input::placeholder, .paper textarea::placeholder { color: var(--ink-d3); opacity: 1; }
.paper input, .paper select, .paper textarea { color-scheme: dark; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); border-width: 2px; }
.field-error { display: none; color: var(--bad); font-weight: 700; font-size: var(--t-sm); }
.field-error::before { content: "Error: "; }
.field.has-error .field-error { display: block; }
.field--short { max-width: 18rem; }
/* Day · Month · Year (dates people know): three small boxes, the year a little wider */
.date-input__row { display: flex; flex-wrap: wrap; gap: 1rem; }
.date-input__item { display: grid; gap: .3rem; }
.date-input__item label { font-weight: 600; }
.date-input__item input { width: 4.25rem; }
.date-input__item--year input { width: 6rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.4rem 1rem; }
.field-row .field + .field { margin-top: 0; }
.field-row + .field, .field + .field-row, .field-row + .field-row, .field-row + fieldset, fieldset + .field-row { margin-top: 1.4rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: .4rem; }
fieldset > .hint { margin-bottom: .6rem; }
/* choices: large tap targets for seniors */
.choices { display: grid; gap: .6rem; }
.choices--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.choice { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; min-height: 3.25rem; background: var(--paper-2); border: 1px solid var(--line-d-strong); border-radius: var(--r-ui); cursor: pointer; transition: border-color var(--d-micro), background-color var(--d-micro); }
.choice:hover { border-color: var(--ink-d); }
.choice input { width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; flex: none; accent-color: var(--gold); }
.choice b { display: block; font-weight: 700; }
.choice small { display: block; color: var(--ink-d2); font-size: var(--t-sm); }
.choice:has(input:checked) { border-color: var(--gold); border-width: 2px; padding: calc(.9rem - 1px) calc(1rem - 1px); background: rgba(255, 210, 63, .08); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus-d); outline-offset: 2px; }
.check { display: flex; gap: .85rem; align-items: flex-start; cursor: pointer; }
.check input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; flex: none; accent-color: var(--gold); }
/* uploads */
.upload { display: grid; gap: .5rem; justify-items: start; padding: 1.25rem; border: 2px dashed var(--line-d-strong); border-radius: var(--r-photo); background: var(--paper-2); }
.upload input[type="file"] { font: inherit; font-size: var(--t-sm); max-width: 100%; }
.upload input[type="file"]::file-selector-button { font: inherit; font-weight: 700; min-height: 2.75rem; padding: 0 1rem; margin-right: .75rem; border: 1px solid var(--ink-d); border-radius: var(--r-ui); background: var(--paper-2); color: var(--ink-d); cursor: pointer; }
.upload__done { color: var(--ok); font-weight: 700; font-size: var(--t-sm); }
/* error summary at the top of a step */
.error-summary { padding: 1.1rem 1.25rem; border: 2px solid var(--bad); border-left-width: 6px; border-radius: var(--r-photo); background: var(--bad-bg); color: var(--bad); margin-bottom: 1.5rem; }
.error-summary h3 { color: var(--bad); font-family: var(--font-ui); font-size: var(--t-base); font-weight: 700; }
.error-summary ul { margin-top: .5rem; list-style: disc; padding-left: 1.25rem; }
.error-summary a { color: var(--bad); font-weight: 700; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-d); }
.form-actions .spacer { flex: 1; }
.before-you-start { padding: 1.25rem 1.4rem; border-radius: var(--r-photo); background: var(--paper-3); }
.before-you-start ul { list-style: disc; padding-left: 1.25rem; margin-top: .5rem; }
.before-you-start li + li { margin-top: .3rem; }

/* ---------------------------------------------------------------- stepper (progress on long forms) */
.stepper { display: flex; gap: .4rem; margin-bottom: 2rem; counter-reset: step; }
.stepper li { flex: 1; min-width: 0; counter-increment: step; display: grid; gap: .45rem; font-size: var(--t-sm); font-weight: 700; color: var(--ink-d3); }
.stepper li::before { content: ""; height: 6px; border-radius: 3px; background: var(--paper-3); border: 1px solid var(--line-d); }
.stepper li span::before { content: counter(step) ". "; }
.stepper li.is-done { color: var(--ink-d2); }
.stepper li.is-done::before { background: var(--ink-d2); border-color: var(--ink-d2); }
.stepper li[aria-current="step"] { color: var(--ink-d); }
.stepper li[aria-current="step"]::before { background: var(--grad-ribbon); border-color: transparent; }
.stepper__count { display: none; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-d2); margin-bottom: 1rem; }
@media (max-width: 700px) { .stepper li span { display: none; } .stepper li[aria-current="step"] span { display: none; } .stepper__count { display: block; } }
[data-step][hidden], [data-show-if][hidden] { display: none !important; }
.step-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75 * var(--u), 1.4 * var(--u) + 1.2vw, 2.4 * var(--u)); line-height: 1.1; margin-bottom: .5rem; }
.step-title:focus { outline: 0; }
.step-intro { color: var(--ink-d2); margin-bottom: 1.5rem; max-width: 40rem; }

/* review step */
.review { display: grid; gap: 0; border: 1px solid var(--line-d); border-radius: var(--r-photo); background: var(--paper-2); overflow: hidden; }
.review__group { padding: 1rem 1.25rem; }
.review__group + .review__group { border-top: 1px solid var(--line-d); }
.review__group header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.review__group h3 { font-size: var(--t-lg); }
.review dl { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr; gap: .45rem 1.25rem; }
.review dt { color: var(--ink-d2); font-size: var(--t-sm); padding-top: .1rem; }
.review dd { font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 560px) { .review dl { grid-template-columns: 1fr; gap: .1rem; } .review dd + dt { margin-top: .6rem; } }

/* confirmation */
.confirm { text-align: left; }
.confirm__ref { display: inline-grid; gap: .25rem; margin: 1.25rem 0 .5rem; padding: 1rem 1.25rem; border: 2px solid var(--gold); border-radius: var(--r-photo); background: var(--paper-2); }
.confirm__ref small { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-d3); }
.confirm__ref b { font-family: var(--font-mono); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: .04em; font-weight: 500; }
.next-steps { counter-reset: n; display: grid; gap: .9rem; margin-top: 1rem; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; }
.next-steps li::before { content: counter(n, decimal-leading-zero); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-mono); font-size: var(--t-xs); }
.next-steps b { display: block; }
.next-steps span { color: var(--ink-d2); }

/* ---------------------------------------------------------------- timeline (request status) */
.timeline { position: relative; display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding-bottom: 1.4rem; }
.timeline li::before { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--line-d-strong); }
.timeline li:last-child::before { display: none; }
.timeline .dot { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--line-d-strong); background: var(--paper-2); display: grid; place-items: center; font-size: .9rem; font-weight: 700; }
.timeline li.is-done .dot { background: var(--ok); border-color: var(--ok); color: var(--paper-2); }
.timeline li.is-now .dot { background: var(--gold); border-color: var(--gold); color: var(--night); box-shadow: 0 0 0 5px rgba(255, 210, 63, .16); }
.timeline li.is-stop .dot { background: var(--bad); border-color: var(--bad); color: var(--paper-2); }
.timeline li.is-todo { color: var(--ink-d2); }
.timeline b { display: block; }
.timeline time, .timeline small { display: block; font-size: var(--t-sm); color: var(--ink-d2); }

/* ---------------------------------------------------------------- lookup box (track, verify, registration) */
.lookup { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.lookup .field { flex: 1 1 16rem; }
.lookup .btn { min-height: 3.25rem; }

/* ---------------------------------------------------------------- tables (stack on phones) */
.table-wrap { border: 1px solid var(--glass-line); border-radius: var(--r-photo); background: var(--glass); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table caption { text-align: left; padding: 1rem 1.25rem 0; font-weight: 700; font-size: var(--t-base); }
.table th, .table td { padding: .85rem 1.25rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line-d); }
.table thead th { background: var(--paper-3); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-d2); border-top: 0; }
.table td { color: var(--ink-d); font-size: var(--t-base); }
.table td small { display: block; color: var(--ink-d2); font-size: var(--t-sm); }
.table tbody tr:hover { background: rgba(243, 239, 230, .03); }
@media (max-width: 760px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr { display: grid; padding: .9rem 1.1rem; border-top: 1px solid var(--line-d); }
  .table--stack td, .table--stack th[scope="row"] { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .75rem; padding: .3rem 0; border: 0; overflow-wrap: anywhere; }
  .table--stack th[scope="row"]::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-d3); padding-top: .2rem; font-weight: 500; }
  .table--stack td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-d3); padding-top: .2rem; }
}

/* ---------------------------------------------------------------- filters */
.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; padding: 1.1rem 1.25rem; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-photo); margin-bottom: 1.5rem; }
.filters .field { flex: 1 1 11rem; }
.filters .field + .field { margin-top: 0; }
.filters .field--search { flex: 2 1 16rem; }
.filters__count { width: 100%; font-size: var(--t-sm); color: var(--ink-d2); }
.paper .chips button { color: var(--ink-d); border-color: var(--line-d-strong); background: transparent; }
.paper .chips button:hover { border-color: var(--ink-d); }
.paper .chips button[aria-pressed="true"] { background: var(--gold); color: var(--night); border-color: var(--gold); }
.is-filtered-out { display: none !important; }
.empty { padding: 2rem 1.5rem; text-align: center; border: 1px dashed var(--line-d-strong); border-radius: var(--r-photo); color: var(--ink-d2); }
.empty b { display: block; color: var(--ink-d); font-size: var(--t-lg); margin-bottom: .35rem; }

/* pagination */
.pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; margin-top: 2rem; }
.pager a, .pager span { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; padding: 0 .75rem; border: 1px solid var(--line-d); border-radius: var(--r-ui); text-decoration: none; color: var(--ink-d); font-weight: 700; background: var(--paper-2); }
.pager [aria-current] { background: var(--gold); color: var(--night); border-color: var(--gold); }

/* ---------------------------------------------------------------- documents list */
.docs { display: grid; gap: .6rem; }
.doc { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-photo); }
.doc__type { width: 3rem; height: 3.5rem; color: var(--gold); border: 1.5px solid var(--gold); border-radius: 3px 10px 3px 3px; display: grid; place-items: end center; padding-bottom: .35rem; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; }
.doc b { display: block; font-weight: 700; }
.doc small { display: block; color: var(--ink-d2); font-size: var(--t-sm); }
.doc .btn { min-height: 2.75rem; padding: .5rem 1rem; }
@media (max-width: 600px) { .doc { grid-template-columns: 2.5rem 1fr; } .doc .btn { grid-column: 1 / -1; justify-self: start; } .doc__type { width: 2.5rem; height: 3rem; } }

/* key facts (service page top) */
.facts-d { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1px; background: var(--paper-2); border: 1px solid var(--line-d); border-radius: var(--r-photo); overflow: hidden; }
.facts-d > div { background: var(--paper-2); padding: 1rem 1.15rem; box-shadow: 0 0 0 1px var(--line-d); }
.facts-d dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-d3); }
.facts-d dd { margin-top: .3rem; font-weight: 700; font-size: var(--t-lg); line-height: 1.25; }
.facts-d dd small { display: block; font-weight: 600; font-size: var(--t-sm); color: var(--ink-d2); }
dd small { font-size: var(--t-sm); } /* sentence-case notes keep the 16 px floor */

/* on-this-page list */
.paper .toc h3 { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-d3); }
.toc ol { margin-top: .5rem; display: grid; }
.toc a { display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--ink-d); border-left: 2px solid var(--line-d); padding-left: .9rem; }
.toc a:hover { border-color: var(--gold); color: var(--gold); }

/* gate (sign-in needed) */
.gate { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 1.5rem; align-items: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--glass); border: 1px solid var(--glass-line); border-left: 6px solid var(--gold); border-radius: var(--r-photo); }
.gate .ico { width: 2.75rem; height: 2.75rem; color: var(--gold); }
.gate h2 { font-size: clamp(1.6 * var(--u), 1.3 * var(--u) + 1vw, 2.2 * var(--u)); }
.gate p { color: var(--ink-d2); margin-top: .5rem; }
.gate .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
@media (max-width: 520px) { .gate { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- page feedback (FR-HLP-004), above the footer */
.feedback { background: var(--night-2); color: var(--ink-d); border-top: 1px solid var(--line-d); }
.feedback .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem 0; }
.feedback p { font-weight: 700; }
.feedback__btns { display: flex; gap: .6rem; }
.feedback__btns button, .feedback form button { min-height: 2.75rem; min-width: 5.5rem; padding: 0 1.1rem; border: 1px solid var(--ink-d); border-radius: var(--r-ui); background: var(--paper-2); color: var(--ink-d); font-weight: 700; }
.feedback__btns button:hover, .feedback form button:hover { background: var(--ink); color: var(--night); }
.feedback form { width: 100%; display: grid; gap: .5rem; max-width: 40rem; }
.feedback label { font-weight: 700; }
.feedback textarea { width: 100%; min-height: 6rem; padding: .7rem .9rem; font: inherit; font-size: var(--t-base); color: var(--ink-d); background: var(--paper-2); border: 1px solid var(--line-d-strong); border-radius: var(--r-ui); }
.feedback form button { justify-self: start; }
.feedback :focus-visible { outline-color: var(--focus-d); }
.feedback .hint { color: var(--ink-d2); }

/* ---------------------------------------------------------------- A4 sheet (provisional copies, printable confirmation) */
.a4-tools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.a4 { width: min(100%, 210mm); min-height: 297mm; margin-inline: auto; padding: 16mm 16mm 14mm; background: #fff; color: #000; box-shadow: 0 30px 70px -40px rgba(12, 18, 32, .6); border: 1px solid var(--line-d); font-family: var(--font-ui); font-size: 11pt; line-height: 1.45; display: flex; flex-direction: column; position: relative; }
.a4__head { display: grid; grid-template-columns: 22mm 1fr 22mm; align-items: center; gap: 4mm; padding-bottom: 4mm; border-bottom: 2pt solid #000; text-align: center; }
.a4__head img { width: 22mm; height: 22mm; }
.a4__head p { font-size: 9.5pt; }
.a4__head b { display: block; font-size: 13pt; letter-spacing: .04em; }
.a4__title { margin: 7mm 0 2mm; text-align: center; font-family: var(--font-display); font-size: 24pt; font-weight: 400; line-height: 1.1; }
.a4__ref { display: flex; justify-content: space-between; gap: 6mm; font-family: var(--font-mono); font-size: 10pt; border: 1pt solid #000; padding: 2.5mm 4mm; margin-top: 4mm; }
.a4__banner { margin-top: 5mm; padding: 3mm 4mm; border: 2pt solid #000; font-weight: 700; text-align: center; letter-spacing: .02em; text-transform: uppercase; font-size: 10.5pt; }
.a4 h2 { font-family: var(--font-ui); font-size: 10pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 6mm; padding-bottom: 1.5mm; border-bottom: .75pt solid #000; color: #000; }
.a4 dl { display: grid; grid-template-columns: 44mm 1fr; gap: 1.6mm 5mm; margin-top: 3mm; }
.a4 dt { color: #000; font-size: 9.5pt; }
.a4 dd { font-weight: 700; }
.a4__qr { display: grid; grid-template-columns: 34mm 1fr; gap: 5mm; align-items: center; margin-top: 6mm; padding: 4mm; border: 1pt solid #000; }
.a4__qr svg { width: 34mm; height: 34mm; }
.a4__qr p { font-size: 9.5pt; }
.a4__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: auto; padding-top: 14mm; }
.a4__sign div { border-top: 1pt solid #000; padding-top: 1.5mm; font-size: 9.5pt; text-align: center; }
.a4__foot { display: flex; justify-content: space-between; margin-top: 6mm; padding-top: 2mm; border-top: .75pt solid #000; font-size: 8.5pt; }
@media screen and (max-width: 760px) { .a4 { padding: 8mm; min-height: 0; font-size: 16px; } .a4 dl { grid-template-columns: 1fr; gap: .5mm; } .a4 dd { margin-bottom: 1.6mm; } .a4__qr { grid-template-columns: 1fr; } }

@media screen and (max-width: 480px) { .a4__head { grid-template-columns: 16mm minmax(0, 1fr) auto; gap: 3mm; } .a4__head img { width: 16mm; height: 16mm; } .a4__head > span:empty { display: none; } }
/* On screen the sheet keeps the site's floor: 16 px for sentences, 14 px for capitals (print uses its point sizes). */
@media screen { .a4 { font-size: max(1rem, 16px); } .a4 dt, .a4__head p, .a4__qr p, .a4__sign div, .a4__foot, .a4__ref { font-size: max(1rem, 16px); } .a4 h2, .a4__banner { font-size: max(.875rem, 14px); } }

/* ---------------------------------------------------------------- section bar (the _SectionBar partial)
   Sibling pages of one topic, linked under the page title: replaces "On this page" jump lists. */
.subnav { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); padding-top: 1.25rem; border-top: var(--hairline); }
.subnav__label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); margin-bottom: .75rem; }
.subnav ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.subnav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); color: var(--ink); font-weight: 600; text-decoration: none; line-height: 1.25; background: rgba(7, 11, 20, .55); transition: background-color var(--d-micro), border-color var(--d-micro), color var(--d-micro); }
.subnav a:hover { border-color: var(--ink); }
.subnav a[aria-current] { background: var(--gold); border-color: var(--gold); color: var(--night); }
@media (max-width: 600px) { .subnav ul { gap: .4rem; } .subnav a { font-size: 1rem; padding: .3rem .8rem; } }

.subnav__out { min-height: 2.75rem; padding: .35rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-ui); color: var(--ink); font-weight: 600; background: rgba(7, 11, 20, .55); }
.subnav__out:hover { border-color: var(--ink); }
/* phones: one row that scrolls sideways (the current page is scrolled into view by js/public/shell.js), so the page header
   is not a screenful of links */
@media (max-width: 600px) {
  .subnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .subnav ul::-webkit-scrollbar { display: none; }
  .subnav li { flex: none; }
  .subnav { margin-top: 1.25rem; padding-top: .9rem; }
  .page-hero { padding-top: calc(6rem + var(--alert-h, 0px)); }
}

/* ---------------------------------------------------------------- fixed bars never cover what the reader is on
   (WCAG 2.4.11): scrolling to a field, a row or a heading stops below the bar; on phones also above the bottom bar */
html { scroll-padding-top: calc(var(--nav-h, 4.5rem) + 1rem); }
@media (max-width: 900px) {
  html { scroll-padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px) + 1rem); }
  .mobile-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }
  /* the alert shows on arrival and folds away once the page scrolls (the bar compacts), giving the screen back */
  .nav.is-compact .alert-strip { display: none; }
}
/* a phone held sideways: the bars scroll with the page and the bottom bar goes (the menu has the same actions) */
@media (max-height: 520px) and (orientation: landscape) {
  .nav { position: absolute; }
  .mobile-bar { display: none !important; }
  body { padding-bottom: 0; }
  html { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem; }
}

/* ---------------------------------------------------------------- an error on a group of choices shows by the
   question too (radio buttons and checkboxes sit in a fieldset, not a .field) */
fieldset.has-error > .field-error, .has-error > .field-error { display: block; }
fieldset.has-error { box-shadow: inset 3px 0 0 var(--bad); padding-left: 1rem; }

/* previous / next at the end of an ordered set (Discover, the privacy notice) */
.seq { background: var(--night); padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0; border-top: var(--hairline); }
.seq .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.seq a { display: grid; gap: .35rem; padding: 1.25rem 1.4rem; border: 1px solid var(--glass-line); border-radius: var(--r-photo); background: var(--glass); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.1; transition: border-color var(--d-micro); }
.seq a:hover { border-color: var(--gold); }
.seq small { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.seq__prev small::before { content: "← "; }
.seq__next { text-align: right; }
.seq__next small::after { content: " →"; }
@media (max-width: 600px) { .seq .wrap { grid-template-columns: 1fr; } .seq__next { text-align: left; } .seq span:empty { display: none; } }

/* the menu marks the section the current page belongs to */
.nav__primary > li > button.is-current::after { transform: scaleX(1); }
.mobile-menu nav a[aria-current="true"] { color: var(--gold); }
.mega a[aria-current="page"] { color: var(--gold); }

/* list pagination (the _Pager partial) */
.is-paged-out { display: none !important; }
.pager button { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; padding: 0 .75rem; border: 1px solid var(--line-d-strong); border-radius: var(--r-ui); color: var(--ink-d); font-weight: 700; }
.pager button:hover { border-color: var(--gold); color: var(--gold); }
.pager button[aria-current] { background: var(--gold); color: var(--night); border-color: var(--gold); }

/* ---------------------------------------------------------------- design-system adjustments (UI/UX audit, 20 Oct 2026)
   V12–V20. One status style everywhere; statuses and data labels in readable sentence case;
   three button styles; gold means only "selected or current". */

/* statuses, badges and tags: 16 px, sentence case, the text face (mono capitals stay for eyebrows only) */
.status, .badge, .tag { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* tags are outlines: a gold fill looked the same as a pressed filter or the current page */
.tag--online { background: transparent; color: var(--gold); border-color: var(--gold); }
.paper .tag--online { color: var(--ink-d); border-color: var(--gold); }
/* a badge that is a link is an action: it looks like a small button */
.badge--open { background: transparent; color: var(--ink); border-color: var(--line-strong); }
a.badge { padding: .35rem .85rem; border: 1px solid var(--line-strong); }
a.badge--open { background: var(--blue); border-color: var(--blue-light); color: var(--on-blue); }
a.badge--open:hover { background: var(--blue-ink); border-color: var(--blue-light); color: var(--on-blue); }
/* data labels (key facts, event facts, stacked-table labels): sentence case, not 14 px capitals */
.ev-card__facts dt, .facts-d dt, .table--stack td::before, .table th { font-family: var(--font-ui); font-size: var(--t-sm); letter-spacing: 0; text-transform: none; font-weight: 700; }

/* buttons: primary (blue, with a light edge so its shape shows on the dark ground: 9.2:1), secondary (outline),
   quiet (a link). "Gold" buttons render as primary; gold is kept for what is selected or current. */
.btn--primary, .paper .btn--primary, .btn--gold, .paper .btn--gold { background: var(--blue); border-color: var(--blue-light); color: var(--on-blue); }
.btn--primary:hover, .paper .btn--primary:hover, .btn--gold:hover, .paper .btn--gold:hover { background: var(--blue-ink); border-color: var(--blue-light); color: var(--on-blue); }
/* destructive actions (close or erase an account, withdraw an ID, cancel a place) look different from safe ones */
.confirm-box { margin-top: 1rem; padding: 1rem 1.15rem; border: 2px solid var(--bad); border-radius: var(--r-photo); background: var(--bad-bg); }
.photo-check { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: start; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line-d-strong); border-radius: var(--r-photo); }
.photo-check img { width: 7rem; height: 7rem; object-fit: cover; border-radius: var(--r-photo); }
@media (max-width: 420px) { .photo-check { grid-template-columns: 1fr; } }
.btn--danger, .paper .btn--danger { background: transparent; color: var(--bad); border: 2px solid var(--bad); }
.btn--danger:hover, .paper .btn--danger:hover { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
/* one hover for every chip-like control: the edge brightens; filling with gold means "selected" */
.chat__chips button:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* focus: the photo reveal's clip-path no longer cuts off the focus ring (the Explore cards) */
.reveal--photo.in-view:focus-visible, .reveal--photo.in-view:focus-within { clip-path: none; }
/* the A4 sheets are white: a blue focus ring (8.6:1) instead of gold (1.44:1) */
.a4 :focus-visible { outline-color: var(--blue); }

/* arrows drawn in CSS are not read aloud as "right arrow" */
.link-arrow::after { content: "→" / ""; }
.mobile-menu nav a::after { content: "→" / ""; }
.seq__prev small::before { content: "← " / ""; } .seq__next small::after { content: " →" / ""; }

/* hero frame indicators: 3 px and brighter (3:1) */
.hero__dotset button::before { height: 3px; background: rgba(243, 239, 230, .6); }

/* the side column stays in view while the page scrolls (overflow: hidden stopped it), below the bar */
.paper { overflow: clip; }
.layout > aside { top: calc(var(--nav-h, 5.5rem) + 1rem); }

/* toolbars on phones resize the window: the lightbox and the scroll stages use the stable heights */
.lightbox { height: 100dvh; max-height: 100dvh; }
.wipe__sticky, .day__scene { height: 100svh; }
.day__moments { margin-top: -100svh; }

/* phones and touch screens: no backdrop blur (at this opacity it barely shows, and it is costly over moving
   photographs); the panels are a little denser instead */
@media (max-width: 900px), (hover: none) {
  :root { --glass: rgba(12, 18, 32, .92); }
  .glass, .card, .nav.is-compact, .mobile-bar, .hero__pause, .moment, .wipe__cap, .day__head, .afterdark .wrap > div:first-child, .chat { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* the lighter motion set (phones, slow devices) also stops the slow photo drifts */
html.motion-lite .hero__frames img.is-on, html.motion-lite .photo--drift img, html.motion-lite .photo--drift-r img, html.motion-lite .page-hero__photo img, html.motion-lite .day__frames img, html.motion-lite .afterdark__bg img, html.motion-lite .cta > img { animation: none !important; }

/* ---------------------------------------------------------------- print */
@media print {
  /* ordinary pages print with margins and black text; the A4 forms keep their own sheet (a named page with no margin) */
  @page { size: A4; margin: 14mm 16mm; }
  @page sheet { margin: 0; }
  .a4 { page: sheet; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .nav, .mobile-menu, .mobile-bar, .help, .chat, .feedback, .footer, .seq, .no-print, .skip, dialog, .a4-tools { display: none !important; }
  /* the page's title prints (it lives in the photographic header); the photo, breadcrumb and section bar do not */
  .page-hero { display: block !important; padding: 0 0 6mm !important; background: none !important; color: #000 !important; }
  .page-hero::before, .page-hero__photo, .page-hero .crumbs, .page-hero .subnav, .page-hero__actions { display: none !important; }
  .page-hero * { color: #000 !important; }
  body:has(.a4) .page-hero { display: none !important; }
  .paper { background: #fff !important; padding: 0 !important; }
  .paper *:not(.a4, .a4 *) { color: #000 !important; background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  .card, .notice, .doc, .status, .tag { border: 1px solid #999 !important; }
  /* nothing waits to be scrolled into view on paper */
  .reveal, .reveal--mask, .reveal--photo, .words .w { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .paper .wrap { width: 100% !important; }
  .a4 { box-shadow: none !important; border: 0 !important; width: 210mm; min-height: 280mm; margin: 0; padding: 16mm 16mm 14mm; font-size: 11pt; }
  .a4 dl { grid-template-columns: 44mm 1fr; }
  .a4__qr { grid-template-columns: 34mm 1fr; }
  .print-page { padding: 0; }
  .print-page .layout { display: block; }
  .print-page aside { display: none; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* ---------------------------------------------------------------- production port (the Razor shell, Phase 3.5b)
   What the mock wrote as style="" attributes, or built in script, is a class here: the pages carry no inline
   styles or handlers (CSP, BRD M2-NFR-56). */
.crumbs + .eyebrow { margin-top: 1rem; }
.emergency__more { margin-top: 1rem; }
.emergency__more + .note { margin-top: .5rem; }
.chat__privacy { flex-basis: 100%; font-size: var(--t-sm); letter-spacing: 0; text-transform: none; }
a.chat__card { color: var(--ink); text-decoration: none; }
.feedback__fail { color: var(--bad); font-weight: 700; }
.feedback__fail button { margin-left: .75rem; }
/* spacing the page bodies used to write inline (one value each) */
.u-mt-09 { margin-top: .9rem; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-125 { margin-top: 1.25rem; }

/* without scripts (UX-51): the controls that need a script are left out, the Discover panel opens on hover and
   focus, and every link still works (the footer holds the emergency numbers and every section) */
html:not(.js) .burger, html:not(.js) [data-open], html:not(.js) [data-open-chat], html:not(.js) .help,
html:not(.js) [data-motion-toggle], html:not(.js) .textsize, html:not(.js) .feedback { display: none !important; }
html:not(.js) .has-mega:hover .mega, html:not(.js) .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }

/* BRD M2-SHELL-04 (v3.1): the "Ctrl K" hint returns beside the Search icon from 1561 px (the mock hid it at every width) */
@media (min-width: 1561px) { .util--services { width: auto; padding: 0 .75rem; } .util--services kbd { display: inline; } }