/* The v2 public status page (REDESIGN 2026-10-29, phase 2 W5 APP-V2 2026-11-02; DESIGN-v2.md "Status page"; APP-WOW 2026-11-02): api/app_status.py
   renders it, api/app_subscribe.py's pages (subscribe, confirm, unsubscribe) use it too. It stands alone: a custom domain serves only a handful of
   files (custom_domains/guard.py ASSETS: this sheet and the Overpass files), so it carries its own fonts and tokens and needs nothing else.
   Everything is scoped to `.status-page` (the page's body, or the frame of the public sample on the marketing site, which has its own
   stylesheets), so nothing here reaches the page around it.
   White-label safe: no product colour on the page; the agency's accent (`--brand`, `--brand-on` from its brand.css) marks the top band,
   the subscribe button and the links when it has one, ink when it has none. Status colours keep their meaning and always come with a glyph
   and a word; a day without data is hatched slate, never green. Server-rendered, no script.
   APP-WOW (2026-11-02): the page is a calm plate on a cool canvas: the overall state is a large sign with its lamp lit (an unlit ring when
   there is no data), the sites stand on one plate with a divider between them, each with its 90 days and its uptime between the two ends
   of the axis, incidents are plates with their updates as stops. The only movement is a day bar rising a little under the pointer
   (transform only, none with reduced motion). */

@font-face {
  font-family: "Overpass";
  src: url("/static/shared/fonts/overpass-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;   /* preloaded by the page; if it is late, the metric twin stays and nothing moves (CLS 0) */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass";
  src: url("/static/shared/fonts/overpass-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
/* metric twin of Overpass on Arial, so the swap moves nothing (core.css has the same) */
@font-face {
  font-family: "Overpass Fallback";
  src: local("Arial");
  size-adjust: 101.16%;
  ascent-override: 87.29%;
  descent-override: 37.86%;
  line-gap-override: 0%;
}

.status-page {
  --paper: #ffffff; --paper-2: #f1f3f4; --paper-3: #e4e8eb; --canvas: #f2f5f8; --raise: #f6f8fa; --hair: #e3e8ec;
  --ink: #101b23; --ink-2: #45545f; --ink-3: #5d6b75; --rule: #d5dbdf; --edge: #6b7b86;
  --link: #0f5a8f; --focus: #0b5cad;
  --steady: #19704f; --steady-bg: #dcefe6; --regional: #8a5600; --regional-bg: #fbedd0; --regional-bar: #a88000;
  --down: #b1261c; --down-bg: #f8dedb; --unknown: #536170; --unknown-bg: #e2e7eb;
  --planned: #0f4c7a; --planned-bg: #dfeaf4; --planned-fill: #5b8db8; --test: #6b3fa0; --test-bg: #efe6fa;
  /* the lamps: a lit glyph (3:1 or more on white) and its halo; no data is an unlit ring */
  --lamp-steady: #1f9d63; --halo-steady: rgba(31, 157, 99, 0.45);
  --lamp-down: #d8342a; --halo-down: rgba(216, 52, 42, 0.45);
  --lamp-regional: #b87a00; --halo-regional: rgba(232, 165, 49, 0.55);
  --lamp-planned: #2d7dd2; --halo-planned: rgba(45, 125, 210, 0.4);
  --accent: var(--brand, var(--ink));
  --on-accent: var(--brand-on, #ffffff);
  --r-1: 4px; --r-2: 6px; --r-3: 12px; --r-4: 16px; --r-pill: 999px; --r-bar: 2px;
  --e-1: 0 0 0 1px rgba(13, 36, 51, 0.07), 0 1px 2px rgba(13, 36, 51, 0.05), 0 4px 14px -6px rgba(13, 36, 51, 0.1);
  --dur-press: 100ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --font: "Overpass", "Overpass Fallback", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
  background: var(--canvas); color: var(--ink); font: 400 1.0625rem/1.55 var(--font); -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { .status-page { --dur-press: 0ms; } }
body.status-page { margin: 0; min-height: 100vh; }
.status-page *, .status-page *::before, .status-page *::after { box-sizing: border-box; }
.status-page :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.status-page a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.status-page a:hover { text-decoration-thickness: 2px; }
.status-page :is(h1, h2, h3) { margin: 0; line-height: 1.1; text-wrap: balance; }
.status-page :is(p, ul, ol) { margin: 0; }
.status-page :is(ul, ol) { padding: 0; list-style: none; }
.status-page code { font-family: var(--mono); font-size: 0.875em; }
.status-page time, .status-page .when, .status-page .uptime { font-variant-numeric: tabular-nums; }
.status-page ::selection { background: #fbe3a2; color: var(--ink); }
.status-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the agency's band: its logo and name on white, its accent as a band along the top edge (ink without one), -webkit-print colour kept */
.sp-brandbar { background: var(--paper); box-shadow: inset 0 4px 0 var(--accent), 0 1px 0 var(--hair); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sp-brandbar-in { display: flex; align-items: center; gap: 14px; max-width: 58rem; margin: 0 auto; min-height: 76px; padding: 18px 20px 14px; }
.sp-logo { flex: none; display: grid; place-items: center; background: #fff; }
.sp-logo img { display: block; max-height: 40px; max-width: 12rem; width: auto; height: auto; }
.sp-brandname { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.preview-banner { margin: 0; padding: 10px 16px 8px; background: var(--test-bg); color: var(--test); text-align: center; font-weight: 700; }

.sp { max-width: 58rem; margin: 0 auto; padding: 48px 20px 64px; }
/* the head: the title with the subscribe button beside it, the intro, then the overall state across the plate */
.sp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
.sp-head > * { grid-column: 1 / -1; min-width: 0; }
.sp-head > :first-child { grid-column: 1; }
.sp-head h1, .sp-head .sp-title { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 850; letter-spacing: -0.03em; line-height: 1.04; overflow-wrap: anywhere; }
.sp .intro { margin-top: -4px; color: var(--ink-2); max-width: 36em; font-size: 1.125rem; line-height: 1.5; }
/* the overall state: a large sign with its lamp, the first thing read (the glyph's shape is the state, its words say it) */
.overall { display: flex; align-items: center; gap: 16px; margin-top: 12px; min-height: 84px; padding: 20px 26px 18px; border-radius: var(--r-4);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; background: var(--paper); color: var(--ink); box-shadow: var(--e-1); }
.overall::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 3px var(--unknown); }
.overall.steady { background: var(--paper); color: var(--ink); }
.overall.steady::before { background: var(--lamp-steady); box-shadow: none; filter: drop-shadow(0 0 7px var(--halo-steady)); }
.overall.down { background: var(--down); color: #fff; box-shadow: var(--e-1); }
.overall.down::before { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)); }
.overall.down::before { width: 22px; height: 20px; border-radius: 0; background: #fff; box-shadow: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); }   /* the down triangle */
.overall.regional_issue { background: var(--regional-bg); color: var(--regional); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.18), var(--e-1); }
.overall.regional_issue::before { background: linear-gradient(90deg, transparent 50%, var(--lamp-regional) 50%); box-shadow: inset 0 0 0 3px var(--lamp-regional); filter: drop-shadow(0 0 6px var(--halo-regional)); }
.overall.maintenance { background: var(--planned-bg); color: var(--planned); box-shadow: inset 0 0 0 1px rgba(15, 76, 122, 0.16), var(--e-1); }
.overall.maintenance::before { border-radius: 0; background: var(--lamp-planned); box-shadow: none; filter: drop-shadow(0 0 6px var(--halo-planned)); transform: rotate(45deg) scale(0.8); }
.overall.data_unavailable, .overall.paused, .overall.not_monitored, .overall.none { background: var(--paper); color: var(--unknown); }
.overall.data_unavailable::before, .overall.none::before { background: none; box-shadow: inset 0 0 0 3px var(--unknown); }
.overall.paused::before { border-radius: 0; width: 14px; background: linear-gradient(90deg, var(--unknown) 0 35%, transparent 35% 65%, var(--unknown) 65%); box-shadow: none; }
.subscribe { margin-top: 0; }
.sp-head > .subscribe { grid-column: 2; grid-row: 1; justify-self: end; }
.subscribe a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 20px 0; border-radius: var(--r-pill); background: var(--accent);
  color: var(--on-accent); font-weight: 750; text-decoration: none; box-shadow: 0 1px 2px rgba(13, 36, 51, 0.25), 0 6px 16px -8px rgba(13, 36, 51, 0.45);
  transition: transform var(--dur-press) var(--ease-standard); }
.subscribe a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.subscribe a:active { transform: scale(0.97); }

.sp h2 { margin: 52px 0 14px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.sp .sp-head h2.sp-title { margin: 0; padding: 0; box-shadow: none; }
/* the sites: one plate, a divider between two sites */
.sites { display: grid; gap: 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.site { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "head head head" "text text text" "days days days" "from up to";
  column-gap: 16px; padding: 22px 24px 18px; background: var(--paper); box-shadow: inset 0 -1px 0 var(--hair); }
.site:last-child { box-shadow: none; }
.site.empty, .sites .empty { display: block; padding: 22px 24px; color: var(--ink-2); }
.site-head { grid-area: head; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: flex-start; }
.site h3 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.site .host { margin-top: 2px; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
/* a site's state: a pill with its lit lamp (circle steady, triangle down, half ring regional, diamond planned, an unlit ring for no data) */
.state { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 12px 0 10px; border-radius: var(--r-pill); font-weight: 800; font-size: 0.9375rem;
  white-space: nowrap; }
.state .glyph { width: 11px; height: 11px; margin-top: -2px; border-radius: 50%; background: currentColor; }
.state.steady { color: var(--steady); background: var(--steady-bg); }
.state.steady .glyph { background: var(--lamp-steady); filter: drop-shadow(0 0 3px var(--halo-steady)); }
.state.down { color: #fff; background: var(--down); box-shadow: 0 1px 2px rgba(177, 38, 28, 0.3), 0 6px 14px -6px var(--halo-down); }
.state.down .glyph { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.state.regional_issue { color: var(--regional); background: var(--regional-bg); }
.state.regional_issue .glyph { background: linear-gradient(90deg, transparent 50%, var(--lamp-regional) 50%); box-shadow: inset 0 0 0 2px var(--lamp-regional); filter: drop-shadow(0 0 3px var(--halo-regional)); }
.state.planned, .state.maintenance { color: var(--planned); background: var(--planned-bg); }
.state.planned .glyph, .state.maintenance .glyph { border-radius: 0; background: var(--lamp-planned); transform: rotate(45deg) scale(0.85); }
.state.data_unavailable, .state.paused, .state.not_monitored { color: var(--unknown); background: var(--unknown-bg); }
.state.data_unavailable .glyph, .state.not_monitored .glyph { background: none; box-shadow: inset 0 0 0 2px currentColor; }
.state.paused .glyph { border-radius: 0; width: 10px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.site .state-text { grid-area: text; margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; }
/* 90 days as 90 bars: up, down, partly measured, planned maintenance only, and no data (hatched, never green); a bar under the pointer rises */
.days { grid-area: days; display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 36px; margin-top: 16px; }
.day { display: block; min-width: 0; border-radius: var(--r-bar); background: var(--rule); transform-origin: 50% 100%; transition: transform var(--dur-press) var(--ease-standard); }
@media (hover: hover) { .days .day:hover { transform: scaleY(1.14); } }
.day.up { background: var(--lamp-steady); }
.day.down { background: var(--lamp-down); }
.day.partial { background: var(--regional-bar); }
.day.maintenance { background: var(--planned-fill); }
.day.no_data { background: repeating-linear-gradient(135deg, var(--unknown-bg) 0 3px, #a3afb8 3px 4.5px); }
/* the axis: "90 days ago" and "Today" at its ends, the uptime between them */
.days-axis { display: contents; }
.days-axis > span { margin-top: 8px; font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; }
.days-axis > span:first-child { grid-area: from; }
.days-axis > span:last-child { grid-area: to; text-align: right; }
.site .uptime { grid-area: up; margin-top: 8px; color: var(--ink-2); font-size: 0.8125rem; font-weight: 650; text-align: center; text-wrap: pretty; }
.sp .legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; padding: 0 4px; font-size: 0.875rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.sp .legend .day { width: 12px; height: 12px; border-radius: var(--r-1); }

/* planned maintenance: the diamond, the words "In progress" or the window */
.maint-list { display: grid; gap: 12px; }
.maint { display: grid; gap: 4px; padding: 18px 24px 16px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.maint.active { background: var(--planned-bg); box-shadow: inset 0 0 0 1px rgba(15, 76, 122, 0.16), var(--e-1); }
.maint h3 { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 800; color: var(--planned); }
.maint h3::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--planned-fill); transform: rotate(45deg); }
.maint.active h3::before { background: var(--lamp-planned); filter: drop-shadow(0 0 4px var(--halo-planned)); }
.maint .when, .maint .affects, .maint .repeats { color: var(--ink-2); font-size: 0.9375rem; }
.maint .summary { margin-top: 6px; white-space: pre-line; }

/* incidents: each one a plate, its updates the stops of a short line (newest first; the resolved stop is the filled green dot) */
.incident-list { display: grid; gap: 12px; }
.incident { padding: 20px 24px 18px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.incident.open { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(177, 38, 28, 0.22), var(--e-1); }
.incident > h3 { display: flex; align-items: baseline; gap: 12px; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.incident > h3::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--lamp-steady); transform: translateY(-1px); }
.incident.open > h3::before { border-radius: 0; background: var(--lamp-down); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.incident .when { margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; }
.incident .summary { margin-top: 10px; max-width: 36em; white-space: pre-line; }
.updates { position: relative; display: grid; gap: 14px; margin-top: 18px; padding: 16px 0 0 34px; box-shadow: inset 0 1px 0 var(--hair); }
.updates li { position: relative; }
.updates li::before { content: ""; position: absolute; left: -32px; top: 3px; width: 18px; height: 18px; border: 4px solid var(--ink); border-radius: 50%; background: var(--paper); }
.updates li::after { content: ""; position: absolute; left: -25px; top: 21px; bottom: -17px; width: 4px; border-radius: 2px; background: var(--paper-3); }
.updates li:last-child::after { display: none; }
.updates li.resolved::before { border-color: var(--lamp-steady); background: var(--lamp-steady); filter: drop-shadow(0 0 4px var(--halo-steady)); }
.u-head { font-size: 0.9375rem; color: var(--ink-2); }
.u-head strong { color: var(--ink); margin-right: 8px; }
.u-body { margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; }
/* `none` is also the overall sign's state when there is no status (class="overall none"): only the message takes this */
.none:not(.overall) { color: var(--ink-2); padding: 20px 24px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }

.sp-foot { margin-top: 56px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--rule); display: grid; gap: 10px; color: var(--ink-2); font-size: 0.875rem; }
.notes { display: grid; gap: 4px; max-width: 46em; }
/* the credit line: the product's mark in one colour (it takes the text colour) and the words; they appear together and go together
   (an agency that hides "Powered by" on the Agency plan hides the mark with it) */
.sp-credit { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-2); }
.sp-credit svg { flex: none; display: block; }
/* "Report this page" (DSA Art. 16): a plain footer link, quiet but underlined, with room to tap; the same on a white-labelled page */
.sp-report a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.sp-report a:hover { color: var(--ink); }

/* e-mail subscriptions (api/app_subscribe.py): plain HTML forms, no script. The honeypot is moved off-screen (never display:none,
   which a script can tell apart) and is hidden from assistive technology. */
.sp-head .subscribe a { font-weight: 750; }
.sub-card { max-width: 34rem; margin: 28px 0 0; padding: 26px 28px 24px; border-radius: var(--r-4); background: var(--paper); box-shadow: var(--e-1); }
.sub-card h2 { margin: 0 0 12px; padding-bottom: 0; font-size: 1.25rem; }
.sub-card p { margin: 0 0 16px; }
.sub-card .note { margin: 16px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.sub-form { display: grid; gap: 16px; }
.sub-form .note { margin: 0; }
.status-page .field { display: grid; gap: 6px; }
.status-page .field label { font-weight: 650; }
.status-page input[type="email"], .status-page input[type="text"] { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--edge); border-radius: var(--r-2);
  background: var(--paper); color: var(--ink); font: inherit; box-shadow: inset 0 1px 2px rgba(13, 36, 51, 0.08); }
.status-page input[type="email"]:hover { border-color: var(--ink-2); }
.status-page input:focus-visible { border-color: var(--focus); box-shadow: inset 0 1px 2px rgba(13, 36, 51, 0.08), 0 0 0 4px rgba(11, 92, 173, 0.12); }
.status-page .btn { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 48px; padding: 2px 24px 0; border: 0;
  border-radius: var(--r-2); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 760; cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 36, 51, 0.25), 0 6px 16px -8px rgba(13, 36, 51, 0.45); transition: transform var(--dur-press) var(--ease-standard); }
.status-page .btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.status-page .btn:active { transform: scale(0.97); }
.status-page .field-error { margin: 0 0 12px; color: var(--down); font-weight: 650; }
.sub-back { margin-top: 16px; }
.sub-back a, .sub-card a { display: inline-flex; align-items: center; min-height: 44px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .sp-head { grid-template-columns: minmax(0, 1fr); }
  .sp-head > .subscribe { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 560px) {
  .days { gap: 1px; height: 32px; }
  .sp { padding: 28px 16px 48px; }
  .site { grid-template-areas: "head head head" "text text text" "days days days" "from . to" "up up up"; padding: 18px 16px 16px; }
  .site .uptime { text-align: left; }
  .incident, .maint { padding: 16px; }
  .overall { min-height: 72px; padding: 16px 18px 14px; gap: 14px; font-size: 1.125rem; }
  .sp-brandbar-in { padding: 14px 16px 12px; min-height: 68px; }
  .sub-card { padding: 20px 18px 18px; }
}
@media print {
  .status-page { background: #fff; }
  .subscribe, .sp-report { display: none; }
}