/* The public pages' own lines on top of the design's public.css (card
   445, D-311). public.css is the design's file byte for byte, so what the
   prototype set with a style attribute, which the content security
   policy refuses, and the parts the product keeps until their designer
   checkpoint, are drawn here, with the design's tokens and nothing else.
   Each rule names why it is here. */

/* The prototype's inline styles: the dialog's title block takes the
   head's width, and the month headings and the empty month sit tight. */
.pub-body .d-dialog__head > div { flex: 1; }
.pub-body .d-dialog__body > .d-group,
.pub-body .d-dialog__body > p { margin: 0; }

/* The subscribe answer in place (public.js): the prototype's banner
   inside the form, full width. */
.pub-sub__done { margin: 0; width: 100%; }

/* A real logo: the design draws only the initials tile. */
.pub-logo--img { width: auto; max-width: 12rem; height: 2.25rem; padding: 0; background: none; border-radius: 0; object-fit: contain; }
/* The design's own file is never edited, and it paints the tile behind
   the logo on Grid (cream) and pads it for a logo shown in place of the
   name. The image sits on nothing on every layout (#987), so it answers
   those rules at their specificity. */
.pub-body .pub-logo.pub-logo--img,
.pub-body[data-layout="grid"] .pub-logo.pub-logo--img,
.pub-body.logo-instead .pub-logo.pub-logo--img { width: auto; height: 2.25rem; padding: 0; background: none; border-radius: 0; }

/* The day page link in a day card, under the incident's own link. */
.pub-tip__day { font-weight: 400; color: var(--ink-2); }

/* One day card at a time (Svet, 2026-10-16). With public.js a strip
   carries data-tips and the script marks its one open bar (.is-open),
   keeping the card while the pointer heads for it. The design's hover
   and focus delays go: a card opens at once with the design's fade and
   slide, the card before it closes at once, and hover or focus alone
   opens none. Without the script the design's CSS card is unchanged.
   --tip-x is the script's nudge that keeps a card inside the page
   column; the arrow moves back by as much to point at its bar. */
.pub-strip[data-tips] i:not(.is-open) .d-tip { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.pub-strip[data-tips] i.is-open { z-index: 7; }
.pub-strip[data-tips] i.is-open .d-tip { --tip-x: 0px; opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); translate: var(--tip-x) 0; transition: opacity 120ms var(--ease), transform 120ms var(--ease); }
.pub-strip[data-tips] i.is-open:is(:nth-child(-n+16), :nth-last-child(-n+16)) .d-tip { transform: none; }
.pub-strip[data-tips] i.is-open .d-tip::after { translate: calc(var(--tip-x) * -1) 0; }
@media (max-width: 56.25em) {
  .pub-strip[data-tips] i.is-open:nth-child(n+61):nth-child(-n+70) .d-tip { transform: none; }
  .pub-strip[data-tips] i.is-open:nth-child(n+75):nth-child(-n+80) .d-tip { transform: translate(-50%, 0); }
}

/* The page's states (#946, Svet 2026-10-17): one colour, one glyph and
   one word each, in the palette tokens.css scopes to .pub-body, close to
   what visitors know from other status pages. Operational is the filled
   dot, degraded performance the triangle and a major outage the diamond,
   the kit's own; a partial outage is the half-filled diamond,
   maintenance a ring round a dot in its own blue (no longer the waiting
   slate), no data a dotted ring and paused a hollow ring. The design
   draws three bands and five chips; these are the rest until the
   designer brief (docs/design/briefs/status-page-states-2026-10.md) brings
   them into public.css. A bare chip keeps no ground. */
.pub-top--partial { --tone: var(--partial); --tone-ground: var(--partial-ground); }
.pub-top--maint { --tone: var(--maint); --tone-ground: var(--maint-ground); }
.pub-top--partial .pub-mark i { width: 1.125rem; height: 1.125rem; border-radius: 3px; transform: rotate(45deg); background: linear-gradient(45deg, var(--tone) 50%, transparent 50%); box-shadow: inset 0 0 0 3px var(--tone); }
.pub-top--maint .pub-mark i { background: radial-gradient(circle, var(--tone) 0 .25rem, transparent .3rem); box-sizing: border-box; }
.pub-maint { background: color-mix(in srgb, var(--maint-ground) 70%, var(--surface)); }
.pub-maint .d-i { color: var(--maint); }
.d-state--partial { color: var(--partial); }
.d-state--partial::before { width: .4375rem; height: .4375rem; border-radius: 1px; transform: rotate(45deg); background: linear-gradient(45deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.d-state--maint { color: var(--maint); }
.d-state--maint::before { background: radial-gradient(circle, currentColor 0 1.5px, transparent 2px); box-shadow: inset 0 0 0 1.5px currentColor; }
.d-state--nodata { color: var(--nodata); }
.d-state--nodata::before { background: none; border: 2px dotted currentColor; box-sizing: border-box; }
.d-state--partial:not(.d-state--bare) { background: var(--partial-ground); }
.d-state--maint:not(.d-state--bare) { background: var(--maint-ground); }
.d-state--nodata:not(.d-state--bare) { background: var(--nodata-ground); }
.pub-body .d-strip i.m { background: var(--maint-bar); }
.pub-body .d-tip__s--m::before { border: 0; width: .5rem; height: .5rem; background: radial-gradient(circle, var(--maint-bar) 0 1.5px, transparent 2px); box-shadow: inset 0 0 0 1.5px var(--maint-bar); }
.pub-body .d-tip__s--n::before { background: none; border: 2px dotted var(--nodata); width: .5rem; height: .5rem; box-sizing: border-box; }
.pub-body .d-tip__s--p::before { border-color: var(--paused-bar); }

/* The response chart by location (#947, D-105 b). Each location has its
   own colour by its code, never a state colour, the brand ink or the
   explanation violet: Frankfurt teal, Stockholm indigo grey, Ohio
   sand brown. Each also has its own dash, so the lines are told apart
   without colour (D-80). Each reads at 3:1 or more on the card in both
   themes (chart_colour_test.go). Above three locations one median line
   in the page's ink stands for them, over a pale band from the fastest
   to the slowest. The design draws a two-line legend; the flag, the
   swatch and the gridlines' values are added here until the designer
   brings them into public.css. The US colour keeps the design's token
   name, --chart-iad, until the design renames it; its class is cmh. */
.pub-body { --chart-fra: #0E7C7B; --chart-sto: #5A6385; --chart-iad: #8E6A3F; }
:root[data-theme="dark"] .pub-body { --chart-fra: #4FC1BC; --chart-sto: #A4ADD3; --chart-iad: #D0AA78; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pub-body { --chart-fra: #4FC1BC; --chart-sto: #A4ADD3; --chart-iad: #D0AA78; }
}
.pub-body .d-chart__loc, .pub-body .d-chart__median { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pub-body .d-chart__loc--fra { stroke: var(--chart-fra); }
.pub-body .d-chart__loc--sto { stroke: var(--chart-sto); stroke-dasharray: 7 4; }
.pub-body .d-chart__loc--cmh { stroke: var(--chart-iad); stroke-dasharray: 10 4 1 4; }
.pub-body .d-chart__loc--other { stroke: var(--ink-2); stroke-dasharray: 2 4; }
.pub-body .d-chart__median { stroke: var(--ink); stroke-width: 2.25; }
.pub-body .d-chart__spread { fill: var(--ink); opacity: .1; }
/* The chart's words are HTML beside the drawing (#947), so they keep the
   page's small text size at every width while the SVG scales. The SVG
   box is 184 high with gridlines at 30, 80 and 130, so each value's
   bottom edge sits on its gridline at a fixed share of the height; the
   five times sit a quarter of the plot apart, the first and the last on
   its edges, as the design's axis did inside the SVG. */
.pub-chart__plot { position: relative; }
.pub-chart__ys { position: absolute; inset: 0; pointer-events: none; }
.pub-chart__y, .pub-chart__xs { font: 400 var(--t-small)/1.2 var(--font-data); color: var(--ink-3); font-variant-ligatures: none; }
.pub-chart__y { position: absolute; left: 0; margin-bottom: 2px; padding-right: .25rem; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.pub-chart__y:nth-child(1) { bottom: 83.7%; }
.pub-chart__y:nth-child(2) { bottom: 56.52%; }
.pub-chart__y:nth-child(3) { bottom: 29.35%; }
.pub-chart__xs { position: relative; height: 1.2em; margin-top: .25rem; }
.pub-chart__xs span { position: absolute; top: 0; white-space: nowrap; }
.pub-chart__xs span:nth-child(1) { left: 0; }
.pub-chart__xs span:nth-child(2) { left: 25%; }
.pub-chart__xs span:nth-child(3) { left: 50%; }
.pub-chart__xs span:nth-child(4) { left: 75%; }
.pub-chart__xs span:nth-child(5) { right: 0; }
.pub-body .d-legend { flex-wrap: wrap; align-items: center; row-gap: .375rem; }
.pub-body .d-legend .pub-legend__loc { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.pub-body .d-legend .pub-legend__loc::before { content: none; }
.pub-body .d-legend .pub-legend__spread::before { width: .75rem; height: .625rem; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.pub-legend__swatch { flex: none; width: 1.25rem; height: .3125rem; overflow: visible; }
.pub-legend__swatch .d-chart__loc--sto { stroke-dasharray: 4 2.5; }
.pub-legend__swatch .d-chart__loc--cmh { stroke-dasharray: 6 2 1 2; }
.pub-legend__swatch .d-chart__loc--other { stroke-dasharray: 1.5 2.5; }
.pub-flag { flex: none; width: 1rem; height: .75rem; border-radius: 2px; box-shadow: 0 0 0 1px var(--line-2); }