/* The public status page on the redesign's one design system (AUX-REDESIGN 2026-11-06; saas/DESIGN.md; the 21st board, docs/evaluations/
   21st-inspiration-2026-11-05.md: section A, the Efferd "Dashboard 2" hairline lattice, and section C, kokonut's uptime bars, cnippet's
   incident timeline and navedux's incident banner). api/app_status.py renders the page and 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; the address keeps its v2/ folder because Caddy, the guard and the rehearsal proxy allow exactly this path), so it carries
   its own fonts and the tokens of shared/css/theme-a.css that it reads, under the same names (`--a-*`: tests/test_design_tokens.py pins every
   value to theme-a.css, the night in the first rule and the light chapter in the print and prefers-light block) 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), so nothing here
   reaches the page around it.
   - Flat: every part sits in one lattice of 1 px hairlines (the container's ground shows through a 1 px gap between opaque cells); no
     tile, mesh, gradient, glow or shadow at rest. Only the day tooltip floats, so only it has an elevation.
   - Dark first: the night is the page; a reader whose system prefers light gets the light chapter's values (the same names remapped),
     and so does paper. Every text and ground pair is AA in both (theme-a.css states the ratios).
   - States: up, partly (a regional issue), down, planned maintenance and no data each have a glyph shape, a word and the state's colour;
     the colour never stands alone. A day without data is hatched, never green; a day with downtime is as tall as its uptime (`data-u`,
     quarters: charts_svg.day_level), and on a phone the 90 days wrap into three rows of 30.
   - The 90 day bars: the page carries no script (STATUS_CSP forbids it, the threat model counts on it), so each site's bars are one radio
     group: Tab stops once per site, the arrow keys walk the days, and the day's words are its label, shown as a tooltip under the pointer,
     on keyboard focus, and for the chosen day where there is no hover (a phone). The tooltip is centred on its bar and kept inside the
     row at both ends; on a phone it is the width of the bars.
   - White label: the product's own page lights its one action with the lamp; an agency's page (`branded`) never shows the product's
     colour: its accent (`--brand`, `--brand-on` from its brand.css) marks the band along the top of its bar and the buttons, ink when it
     has none. The agency's logo sits on a white plate, so a logo drawn for light pages stays readable on the night.
   - Server-rendered, no script, no inline style. The only movement is a day bar rising a little and the tooltip fading in (transform and
     opacity, the tokens' durations; none with reduced motion). */

/* Plus Jakarta Sans, the theme's face (shared/fonts/README.txt; theme-a.css has the same faces with font-display swap) */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/shared/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: optional;   /* preloaded by the page; if it is late, the system face 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: "Plus Jakarta Sans";
  src: url("/static/shared/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- the tokens this page reads, in dark (theme-a.css's dark mode; tests/test_design_tokens.py pins each value) ---- */
.status-page {
  --a-ground: #000000;
  --a-ground-2: #0f0f10;
  --a-ground-3: #252527;
  --a-surface-solid: #0a0a0a;
  --a-surface-2: #161718;
  --a-surface-3: #252527;
  --a-line: #252527;
  --a-line-2: #666666;
  --a-field-edge: #666666;
  --a-well: #0a0a0a;
  --a-ink: #f0f0f0;
  --a-ink-2: #969696;
  --a-ink-3: #969696;
  --a-link: #51f0a8;
  --a-focus: #51f0a8;
  --a-lamp: #51f0a8;
  --a-lamp-2: #7af5bd;
  --a-on-lamp: #000000;
  --a-ok-bg: rgba(81, 240, 168, 0.12);
  --a-ok-ink: #51f0a8;
  --a-warn-bg: rgba(245, 196, 81, 0.12);
  --a-warn-ink: #f5c451;
  --a-partial-bg: rgba(255, 120, 165, 0.12);
  --a-partial-ink: #ff78a5;
  --a-fail-bg: rgba(239, 68, 68, 0.14);
  --a-fail-ink: #f87171;
  --a-fail-strong: #dc2626;
  --a-planned-bg: rgba(95, 208, 255, 0.12);
  --a-planned-ink: #5fd0ff;
  --a-unknown: #737373;
  --a-unknown-bg: rgba(163, 163, 163, 0.1);
  --a-test-bg: rgba(150, 110, 240, 0.2);
  --a-test-ink: #c7a6ff;
  --a-ok-mark: #51f0a8;
  --a-warn-mark: #f5c451;
  --a-partial-mark: #ff78a5;
  --a-fail-mark: #ef4444;
  --a-planned-mark: #5fd0ff;
  --a-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --a-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  --a-r-xs: 6px;
  --a-r-sm: calc(1.4rem - 4px);
  --a-r-btn: calc(1.4rem - 2px);
  --a-r-field: calc(1.4rem - 2px);
  --a-r-card: 1.4rem;
  --a-r-pill: 999px;
  --a-r-cell: 0px;
  --a-lattice-gap: 1px;
  --a-cell-pad: 16px;
  --a-cell-pad-lg: 20px;
  --a-elev-2: 0 1px 3px 0 hsl(0 0% 0% / 0.4), 0 4px 6px -1px hsl(0 0% 0% / 0.4), 0 0 0 1px #252527;
  --a-t-2xs: 0.75rem;
  --a-t-xs: 0.8125rem;
  --a-t-ui: 0.875rem;
  --a-t-sm: 0.9375rem;
  --a-t-md: 1.0625rem;
  --a-t-xl: 1.5rem;
  --a-t-lead: 1.1875rem;
  --a-t-card-title: 1rem;
  --a-t-card-desc: 0.8125rem;
  --a-w-text: 400;
  --a-w-medium: 500;
  --a-w-semibold: 600;
  --a-w-label: 700;
  --a-w-strong: 750;
  --a-w-head: 800;
  --a-track-title: -0.015em;
  --a-lh-body: 1.55;
  --a-lh-snug: 1.2;
  --a-sp-1: 4px;
  --a-sp-2: 8px;
  --a-sp-3: 12px;
  --a-sp-4: 16px;
  --a-sp-5: 24px;
  --a-sp-6: 32px;
  --a-sp-7: 48px;
  --a-sp-8: 64px;
  --a-control-sm: 40px;
  --a-target: 44px;
  --a-focus-width: 3px;
  --a-focus-offset: 3px;
  --a-focus-offset-field: 2px;
  /* the page's own names, made of the tokens (theme-a.css `:root, .chapter-light`): a lattice cell is opaque, so the 1 px gap between
     cells shows only the hairline; the one action's colour (see the white-label rule above) and the words on a filled Down block */
  --cell: var(--a-ground);
  --lattice: var(--a-line);
  --elev-1: inset 0 0 0 1px var(--a-line);
  --focus-ring: var(--a-focus-width) solid var(--a-focus);
  --accent: var(--brand, var(--a-lamp));
  --on-accent: var(--brand-on, var(--a-on-lamp));
  --on-strong: #ffffff;
  /* the motion tokens (theme-a.css --motion-*): only transform and opacity move; reduced motion zeroes them below */
  --motion-fast: 120ms;
  --motion-base: 160ms;
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
  background: var(--a-ground); color: var(--a-ink); font: var(--a-w-text) var(--a-t-sm)/var(--a-lh-body) var(--a-font);
  -webkit-font-smoothing: antialiased;
}
.status-page.branded { --accent: var(--brand, var(--a-ink)); --on-accent: var(--brand-on, var(--a-ground)); --a-focus: var(--a-ink); }
/* an agency's page carries no product colour: no lamp in its focus ring or its selection */
.status-page.branded ::selection { background: var(--a-ink); color: var(--a-ground); }

/* ---- the light chapter (theme-a.css .chapter-light): a reader who prefers light, and paper ---- */
@media (prefers-color-scheme: light), print {
  .status-page {
    --a-ground: #fdfdfd;
    --a-ground-2: #f7f7f7;
    --a-ground-3: #f5f5f5;
    --a-surface-solid: #ffffff;
    --a-surface-2: #f4f6f5;
    --a-surface-3: #f5f5f5;
    --a-line: #ebebeb;
    --a-line-2: #8c8c8c;
    --a-field-edge: #8c8c8c;
    --a-well: #ffffff;
    --a-ink: #000000;
    --a-ink-2: #525252;
    --a-ink-3: #525252;
    --a-link: #0a7a47;
    --a-focus: #0d9f5d;
    --a-ok-bg: rgba(81, 240, 168, 0.18);
    --a-ok-ink: #0a7a47;
    --a-warn-bg: rgba(245, 196, 81, 0.18);
    --a-warn-ink: #8a5a00;
    --a-partial-bg: rgba(245, 74, 136, 0.10);
    --a-partial-ink: #c2185b;
    --a-fail-bg: rgba(220, 38, 38, 0.10);
    --a-fail-ink: #b91c1c;
    --a-planned-bg: rgba(46, 189, 246, 0.12);
    --a-planned-ink: #0a6f99;
    --a-test-ink: #6b3fa0;
    --a-ok-mark: #0e9f5e;
    --a-warn-mark: #a87b0a;
    --a-partial-mark: #f54a88;
    --a-fail-mark: #dc2626;
    --a-planned-mark: #1689bd;
    --a-elev-2: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 0 0 1px #ebebeb;
    --cell: var(--a-surface-solid);   /* on fog a cell is white */
    color-scheme: light;
  }
}
@media (prefers-reduced-motion: reduce) { .status-page { --motion-fast: 0ms; --motion-base: 0ms; } }

body.status-page { margin: 0; min-height: 100vh; min-height: 100dvh; background-color: var(--a-ground); }
.status-page *, .status-page *::before, .status-page *::after { box-sizing: border-box; }
.status-page :focus-visible { outline: var(--focus-ring); outline-offset: var(--a-focus-offset); }
.status-page a { color: var(--a-link); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@media (hover: hover) { .status-page a:hover { text-decoration-thickness: 2px; } }
.status-page :is(h1, h2, h3) { margin: 0; line-height: var(--a-lh-snug); 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(--a-mono); font-size: 0.875em; }
.status-page time, .status-page .when, .status-page .uptime { font-variant-numeric: tabular-nums; }
.status-page ::selection { background: var(--a-lamp); color: var(--a-on-lamp); }
.status-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the agency's bar: its logo on a white plate and its name, its accent as a band along the top edge (ink without one) */
.sp-brandbar { background: var(--a-ground-2); box-shadow: inset 0 3px 0 var(--accent), inset 0 -1px 0 var(--a-line); -webkit-print-color-adjust: exact;
  print-color-adjust: exact; }
.sp-brandbar-in { display: flex; align-items: center; gap: var(--a-sp-3); max-width: 60rem; margin: 0 auto; min-height: 60px; padding: var(--a-sp-3) var(--a-sp-5) var(--a-sp-2); }
.sp-logo { flex: none; display: grid; place-items: center; padding: var(--a-sp-1) var(--a-sp-2); border-radius: var(--a-r-xs); background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--a-line); }
.sp-logo img { display: block; max-height: 32px; max-width: 12rem; width: auto; height: auto; }
.sp-brandname { font-size: var(--a-t-md); font-weight: var(--a-w-label); letter-spacing: var(--a-track-title); overflow-wrap: anywhere; }
.preview-banner { margin: 0; padding: var(--a-sp-2) var(--a-sp-4); background: var(--a-test-bg); color: var(--a-test-ink); text-align: center; font-size: var(--a-t-ui); font-weight: var(--a-w-label); }

.sp { max-width: 60rem; margin: 0 auto; padding: var(--a-sp-7) var(--a-sp-5) var(--a-sp-8); }
/* the head: the title with the subscribe button beside it, the intro, then the overall state across the page */
.sp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--a-sp-2) var(--a-sp-5); }
.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: 1.75rem; font-weight: var(--a-w-head); letter-spacing: var(--a-track-title); line-height: 1.1; overflow-wrap: anywhere; }
.sp .intro { color: var(--a-ink-2); max-width: 40em; font-size: var(--a-t-sm); line-height: 1.5; }
/* the overall state: one cell of the lattice, its glyph's shape the state and its words saying it; no data is an unlit ring */
.overall { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-sp-1) var(--a-sp-4); margin-top: var(--a-sp-2);
  padding: var(--a-sp-4) var(--a-cell-pad-lg); border-radius: var(--a-r-card); background: var(--cell); color: var(--a-ink); box-shadow: var(--elev-1);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.overall-state { display: flex; align-items: center; gap: var(--a-sp-3); min-width: 0; font-size: var(--a-t-lead); font-weight: var(--a-w-label);
  letter-spacing: var(--a-track-title); line-height: var(--a-lh-snug); }
.overall-time { color: var(--a-ink-2); font-size: var(--a-t-xs); }
.overall.down { background: var(--a-fail-strong); color: var(--on-strong); box-shadow: none; }
.overall.down .overall-time { color: inherit; }
.overall.regional_issue { background: var(--a-partial-bg); color: var(--a-partial-ink); box-shadow: inset 0 0 0 1px var(--a-partial-mark); }
.overall.regional_issue .overall-time { color: inherit; }
.overall.maintenance { background: var(--a-planned-bg); color: var(--a-planned-ink); box-shadow: inset 0 0 0 1px var(--a-planned-mark); }
.overall.maintenance .overall-time { color: inherit; }
.overall.data_unavailable .overall-state, .overall.paused .overall-state, .overall.not_monitored .overall-state, .overall.none .overall-state { color: var(--a-ink-2); }
.subscribe { margin-top: 0; }
.sp-head > .subscribe { grid-column: 2; grid-row: 1; justify-self: end; }
.subscribe a, .status-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--a-sp-2); min-height: var(--a-control-sm);
  padding: 0 var(--a-sp-4); border: 0; border-radius: var(--a-r-btn); background: var(--accent); color: var(--on-accent); font: inherit;
  font-size: var(--a-t-ui); font-weight: var(--a-w-label); text-decoration: none; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease-out); }
@media (hover: hover) { .subscribe a:hover, .status-page .btn:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.subscribe a:active, .status-page .btn:active { transform: scale(0.97); }
@media (pointer: coarse) { .subscribe a, .status-page .btn { min-height: var(--a-target); } }

.sp h2 { margin: var(--a-sp-6) 0 var(--a-sp-3); font-size: var(--a-t-card-title); font-weight: var(--a-w-semibold); }
.sp .sp-head h2.sp-title { margin: 0; padding: 0; box-shadow: none; }

/* the state glyphs: a circle for up, a half disc for partly, a triangle for down, a diamond for planned work, two bars for paused and a
   ring for no data (the shapes of the app's g-* glyphs, drawn with CSS because a custom domain serves no sprite); the colour is the state's mark */
.status-page .glyph { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--mark, currentColor); }
:is(.state, .overall, .inc-state).steady, .inc-state.resolved { --mark: var(--a-ok-mark); }
:is(.state, .overall).regional_issue { --mark: var(--a-partial-mark); }
:is(.state, .overall).planned, :is(.state, .overall).maintenance { --mark: var(--a-planned-mark); }
:is(.state, .overall, .inc-state).down, .inc-state.open { --mark: var(--a-fail-mark); }
:is(.state, .overall).data_unavailable, :is(.state, .overall).paused, :is(.state, .overall).not_monitored, .overall.none { --mark: var(--a-ink-3); }
:is(.state, .overall).down .glyph, .inc-state.open .glyph { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:is(.state, .overall).regional_issue .glyph { background: linear-gradient(90deg, transparent 50%, var(--mark) 50%); box-shadow: inset 0 0 0 2px var(--mark); }
:is(.state, .overall).planned .glyph, :is(.state, .overall).maintenance .glyph { border-radius: 0; transform: rotate(45deg) scale(0.8); }
:is(.state, .overall).data_unavailable .glyph, :is(.state, .overall).not_monitored .glyph, .overall.none .glyph { background: none; box-shadow: inset 0 0 0 2px var(--mark); }
:is(.state, .overall).paused .glyph { width: 10px; border-radius: 0; background: linear-gradient(90deg, var(--mark) 0 35%, transparent 35% 65%, var(--mark) 65%); }
.overall.down .glyph, .state.down .glyph { background: var(--on-strong); }

/* the sites: one lattice, a hairline between two sites; each site is a cell with its name, its state, its 90 days and its uptime */
.sp :is(.sites, .maint-list, .incident-list) { display: grid; gap: var(--a-lattice-gap); padding: var(--a-lattice-gap); border-radius: var(--a-r-card); background: var(--lattice); }
.sites > li, .maint-list > li, .incident-list > li { background: var(--cell); border-radius: var(--a-r-cell); }
:is(.sites, .maint-list, .incident-list) > li:first-child { border-top-left-radius: calc(var(--a-r-card) - var(--a-lattice-gap)); border-top-right-radius: calc(var(--a-r-card) - var(--a-lattice-gap)); }
:is(.sites, .maint-list, .incident-list) > li:last-child { border-bottom-left-radius: calc(var(--a-r-card) - var(--a-lattice-gap)); border-bottom-right-radius: calc(var(--a-r-card) - var(--a-lattice-gap)); }
.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: var(--a-sp-4); padding: var(--a-cell-pad-lg); }
.site.empty, .sites .empty { display: block; padding: var(--a-cell-pad-lg); color: var(--a-ink-2); }
.site-head { grid-area: head; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--a-sp-1) var(--a-sp-4); }
.site-id { min-width: 0; }
.site h3 { font-size: var(--a-t-card-title); font-weight: var(--a-w-semibold); overflow-wrap: anywhere; }
.site .host { margin-top: 2px; font-family: var(--a-mono); font-size: var(--a-t-xs); color: var(--a-ink-3); overflow-wrap: anywhere; }
/* a site's state: a pill with its glyph (circle up, triangle down, half disc partly, diamond planned, an unlit ring for no data) */
.state, .inc-state { display: inline-flex; align-items: center; gap: var(--a-sp-2); min-height: 24px; padding: 0 10px 0 8px; border-radius: var(--a-r-pill);
  font-size: var(--a-t-xs); font-weight: var(--a-w-label); white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.state.steady, .inc-state.resolved { color: var(--a-ok-ink); background: var(--a-ok-bg); }
.state.down { color: var(--on-strong); background: var(--a-fail-strong); }
.inc-state.open { color: var(--a-fail-ink); background: var(--a-fail-bg); }
.state.regional_issue { color: var(--a-partial-ink); background: var(--a-partial-bg); }
.state.planned, .state.maintenance { color: var(--a-planned-ink); background: var(--a-planned-bg); }
.state.data_unavailable, .state.paused, .state.not_monitored { color: var(--a-ink-2); background: var(--a-unknown-bg); }
.site .state-text { grid-area: text; margin-top: var(--a-sp-1); color: var(--a-ink-2); font-size: var(--a-t-card-desc); }

/* 90 days as 90 bars: up, down, partly measured, planned maintenance only, and no data (hatched, never green). Each bar is a radio of the
   site's group (api/app_status.py `_day_cell`): the bar is the input, its label the tooltip. A bar under the pointer or in focus rises a
   little; its tooltip is centred on it, kept inside the row at both ends (the first and last eleven days hang from their own edge) */
.days { grid-area: days; position: relative; display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); grid-auto-rows: 28px; gap: 2px;
  height: auto; margin-top: var(--a-sp-4); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.d { position: relative; display: flex; align-items: flex-end; min-width: 0; height: 28px; }
.day { display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 2px; background: var(--a-surface-3);
  -webkit-appearance: none; appearance: none; cursor: default; transform-origin: 50% 100%; transition: transform var(--motion-base) var(--motion-ease-out); }
.day.up { background: var(--a-ok-mark); }
.day.down { background: var(--a-fail-mark); }
/* dataviz (2026-11-09): pink beside red is 12.7-13.7 dE for full colour vision, under the floor of 15; a one-region day is striped
   (texture), so it never rests on colour alone; its tooltip names it too */
.day.partial { background: repeating-linear-gradient(45deg, var(--a-partial-mark) 0 3px, color-mix(in srgb, var(--a-partial-mark) 40%, var(--a-surface-solid)) 3px 5px); }
.day.maintenance { background: var(--a-planned-mark); }
.day.no_data { background: repeating-linear-gradient(135deg, var(--a-surface-2) 0 3px, var(--a-field-edge) 3px 4.5px); }   /* quiet: no data is a gap, not a state */
/* a day with downtime: as tall as its uptime, from the baseline (the shorter, the more of the day was down) */
.days .day[data-u] { min-height: 4px; }
.days .day[data-u="3"] { height: 75%; }
.days .day[data-u="2"] { height: 50%; }
.days .day[data-u="1"] { height: 25%; }
@media (hover: hover) { .d:hover .day { transform: scaleY(1.14); } }
.day:focus-visible { position: relative; z-index: 1; outline: var(--focus-ring); outline-offset: 2px; transform: scaleY(1.14); }
.tip { --tx: -50%; --ty: 4px; position: absolute; z-index: 3; top: calc(100% + var(--a-sp-2)); left: 50%; width: max-content; max-width: 22rem; padding: var(--a-sp-2) var(--a-sp-3);
  border-radius: var(--a-r-sm); background: var(--a-surface-solid); box-shadow: var(--a-elev-2); color: var(--a-ink-2); font-size: var(--a-t-xs); font-weight: var(--a-w-text);
  line-height: 1.45; text-align: left; opacity: 0; pointer-events: none; user-select: none; transform: translate(var(--tx), var(--ty));
  transition: opacity var(--motion-base) var(--motion-ease-out), transform var(--motion-base) var(--motion-ease-out); }
.tip strong { display: block; color: var(--a-ink); font-weight: var(--a-w-semibold); }
.d:nth-child(-n+11) .tip, .d:nth-last-child(-n+11) .tip { --tx: 0; }
.d:nth-child(-n+11) .tip { left: 0; }
.d:nth-last-child(-n+11) .tip { left: auto; right: 0; }
@media (hover: hover) { .d:hover .tip { opacity: 1; --ty: 0px; } }
.day:focus-visible + .tip { opacity: 1; --ty: 0px; }
@media (hover: none) {   /* a screen without hover: the day that was tapped stays marked and told */
  .day:checked { outline: 2px solid var(--a-ink); outline-offset: 1px; }
  .day:checked + .tip { opacity: 1; --ty: 0px; }
}
/* the axis: "90 days ago" and "Today" at its ends, the uptime between them */
.days-axis { display: contents; }
.days-axis > span { margin-top: var(--a-sp-2); font-size: var(--a-t-xs); color: var(--a-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: var(--a-sp-2); color: var(--a-ink-2); font-size: var(--a-t-xs); text-align: center; text-wrap: pretty; }
.site .uptime strong { color: var(--a-ink); font-size: var(--a-t-sm); font-weight: var(--a-w-semibold); font-variant-numeric: tabular-nums; }
.sp .legend { display: flex; flex-wrap: wrap; gap: var(--a-sp-2) var(--a-sp-5); margin-top: var(--a-sp-3); padding: 0 var(--a-sp-1); font-size: var(--a-t-xs); color: var(--a-ink-2); }
.legend li { display: inline-flex; align-items: center; gap: var(--a-sp-2); }
.sp .legend .day { flex: none; width: 12px; height: 12px; border-radius: 3px; }

/* planned maintenance: the diamond, the words "In progress" or the window; the running one is tinted */
.maint { display: grid; gap: var(--a-sp-1); padding: var(--a-sp-4) var(--a-cell-pad-lg); }
.maint.active { background: var(--a-planned-bg); box-shadow: inset 0 0 0 1px var(--a-planned-mark); }
.maint h3 { display: flex; align-items: center; gap: var(--a-sp-2); font-size: var(--a-t-card-title); font-weight: var(--a-w-semibold); color: var(--a-planned-ink); }
.maint h3::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--a-planned-mark); transform: rotate(45deg); }
.maint .when, .maint .affects, .maint .repeats { color: var(--a-ink-2); font-size: var(--a-t-card-desc); }
.maint.active .when, .maint.active .affects, .maint.active .repeats { color: var(--a-planned-ink); }
.maint .summary { margin-top: var(--a-sp-2); white-space: pre-line; }

/* incidents: each one a cell, its updates the stops of a short line (newest first; the resolved stop is the filled green dot) */
.incident { padding: var(--a-sp-4) var(--a-cell-pad-lg); }
.incident.open { box-shadow: inset 0 0 0 1px var(--a-fail-mark); }
.inc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--a-sp-2) var(--a-sp-4); }
.incident h3 { min-width: 0; font-size: var(--a-t-card-title); font-weight: var(--a-w-semibold); overflow-wrap: anywhere; }
.incident .when { margin-top: var(--a-sp-1); color: var(--a-ink-2); font-size: var(--a-t-card-desc); }
.incident .summary { margin-top: var(--a-sp-2); max-width: 42em; white-space: pre-line; }
.sp .updates { position: relative; display: grid; gap: var(--a-sp-4); margin-top: var(--a-sp-4); padding: var(--a-sp-4) 0 0 var(--a-sp-5); box-shadow: inset 0 1px 0 var(--a-line); }
.updates li { position: relative; }
.updates li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 11px; height: 11px; border: 2px solid var(--a-ink-3); border-radius: 50%; background: var(--cell); }
.updates li::after { content: ""; position: absolute; left: -17px; top: 17px; bottom: -17px; width: 1px; background: var(--a-line-2); }
.updates li:last-child::after { display: none; }
.updates li:first-child::before { border-color: var(--a-ink); background: var(--a-ink); }
.updates li.resolved::before { border-color: var(--a-ok-mark); background: var(--a-ok-mark); }
.u-head { font-size: var(--a-t-card-desc); color: var(--a-ink-3); font-variant-numeric: tabular-nums; }
.u-head strong { margin-right: var(--a-sp-2); color: var(--a-ink); font-size: var(--a-t-sm); font-weight: var(--a-w-semibold); }
.updates li.resolved .u-head strong { color: var(--a-ok-ink); }
.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) { padding: var(--a-cell-pad-lg); border-radius: var(--a-r-card); background: var(--cell); box-shadow: var(--elev-1); color: var(--a-ink-2); }

.sp-foot { margin-top: var(--a-sp-7); padding-top: var(--a-sp-4); box-shadow: inset 0 1px 0 var(--a-line); display: grid; gap: var(--a-sp-2); color: var(--a-ink-2); font-size: var(--a-t-xs); }
.notes { display: grid; gap: var(--a-sp-1); 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: var(--a-sp-2); margin-top: var(--a-sp-2); color: var(--a-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; }
@media (hover: hover) { .sp-report a:hover { color: var(--a-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. */
.sub-card { max-width: 30rem; margin: var(--a-sp-5) 0 0; padding: var(--a-cell-pad-lg); border-radius: var(--a-r-card); background: var(--cell); box-shadow: var(--elev-1); }
.sub-card h2 { margin: 0 0 var(--a-sp-3); padding-bottom: 0; }
.sub-card p { margin: 0 0 var(--a-sp-4); }
.sub-card .note { margin: var(--a-sp-4) 0 0; color: var(--a-ink-2); font-size: var(--a-t-card-desc); }
.sub-form { display: grid; gap: var(--a-sp-4); }
.sub-form .note { margin: 0; }
.status-page .field { display: grid; gap: var(--a-sp-2); }
.status-page .field label { font-size: var(--a-t-ui); font-weight: var(--a-w-label); }
.status-page input[type="email"], .status-page input[type="text"] { width: 100%; min-height: var(--a-target); padding: 0 var(--a-sp-3); border: 1px solid var(--a-field-edge);
  border-radius: var(--a-r-field); background: var(--a-well); color: var(--a-ink); font: inherit; }
@media (hover: hover) { .status-page input[type="email"]:hover { border-color: var(--a-ink-3); } }
.status-page input:focus-visible { border-color: var(--a-focus); outline-offset: var(--a-focus-offset-field); }
.status-page .btn { justify-self: start; min-height: var(--a-target); padding: 0 var(--a-sp-5); }
.status-page .field-error { margin: 0 0 var(--a-sp-3); color: var(--a-fail-ink); font-weight: var(--a-w-label); }
.sub-back { margin-top: var(--a-sp-4); }
.sub-back a, .sub-card a { display: inline-flex; align-items: center; min-height: var(--a-target); }
.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) {
  /* 90 bars in a phone's width are 2 px each and a red day disappears: three rows of 30, oldest first, today last. The tooltip is the width
     of the bars and hangs under all three rows (the bar is no longer its anchor), so it never leaves the screen */
  .days { grid-template-columns: repeat(30, minmax(0, 1fr)); grid-auto-rows: 20px; gap: 4px 2px; }
  .d { position: static; height: 20px; }
  .tip, .d:nth-child(-n+11) .tip, .d:nth-last-child(-n+11) .tip { --tx: 0; left: 0; right: 0; width: auto; max-width: none; }
  .sp { padding: var(--a-sp-5) var(--a-sp-4) var(--a-sp-7); }
  .sp-brandbar-in { padding: var(--a-sp-3) var(--a-sp-4) var(--a-sp-2); }
  .site { grid-template-areas: "head head head" "text text text" "days days days" "from . to" "up up up"; padding: var(--a-sp-4); }
  .site .uptime { text-align: left; }
  .incident, .maint { padding: var(--a-sp-4); }
  .overall { padding: var(--a-sp-3) var(--a-sp-4); }
  .overall-state { font-size: var(--a-t-md); }
  .sub-card { padding: var(--a-sp-4); }
}
@media (forced-colors: active) {
  .days, .legend .day, .glyph, .day { forced-color-adjust: none; }
  .sites, .maint-list, .incident-list, .overall, .state, .inc-state, .sub-card, .tip { border: 1px solid CanvasText; }
  .tip { background: Canvas; color: CanvasText; }
  .day:focus-visible { outline-color: Highlight; }
}
@media print {
  .status-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .subscribe, .sp-report, .tip { display: none; }
  .site, .incident, .maint { break-inside: avoid; }
}