/*
 * VOICE: shared styles for the public site and the team area.
 * Colors chosen in Settings > Appearance arrive from /theme.css.php as
 * --brand and --p-emergency, --p-high, --p-normal, --p-low.
 *
 * Fonts: Public Sans for headings, the header, and labels. It is a plain,
 * sturdy grotesque like the bold VOICE lettering in the logo, and its light
 * capitals echo the ring of text around it. Atkinson Hyperlegible Next, made
 * by the Braille Institute for readers with low vision, sets running text.
 * Both use the SIL Open Font License. Extended Latin and Vietnamese subsets
 * load only when a page uses those letters.
 */

@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fatkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); 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: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fatkinson-hyperlegible-next-latin-ext-400-normal.woff2") format("woff2"); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fatkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); 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: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fatkinson-hyperlegible-next-latin-ext-700-normal.woff2") format("woff2"); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 400; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fatkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2"); 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: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 400; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fatkinson-hyperlegible-next-latin-ext-400-italic.woff2") format("woff2"); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-latin-400-normal.woff2") format("woff2"); 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: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-latin-ext-400-normal.woff2") format("woff2"); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-latin-600-normal.woff2") format("woff2"); 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: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-latin-ext-600-normal.woff2") format("woff2"); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-latin-700-normal.woff2") format("woff2"); 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: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-latin-ext-700-normal.woff2") format("woff2"); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/asset.php?f=assets%2Ffonts%2Fpublic-sans-vietnamese-700-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

:root {
  --brand: #2a7d7b;
  --brand-deep: color-mix(in srgb, var(--brand) 72%, #000);
  --brand-tint: color-mix(in srgb, var(--brand) 10%, #fff);
  --brand-line: color-mix(in srgb, var(--brand) 32%, #fff);
  --ink: #1b2626;
  --ink-soft: #4b5856;
  --ink-faint: #5f6a68;
  --paper: #f6f3ec;
  --card: #ffffff;
  --sunk: #efebe2;
  --line: #ddd7ca;
  --line-strong: #c4bcac;
  --field-border: #8a8272; /* at least 3:1 against the page, so form fields can be seen */
  --ok: #1d6b3a;
  --warn: #8a5300;
  --bad: #a3231b;
  --focus: #0b5cad;
  --p-emergency: #b3261e;
  --p-high: #a64b00;
  --p-normal: #1f5fa8;
  --p-low: #56616b;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(27, 38, 38, .06), 0 2px 8px rgba(27, 38, 38, .05);
  --font: "Atkinson Hyperlegible Next", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not(.force-light) {
    --brand-deep: color-mix(in srgb, var(--brand) 55%, #fff);
    --brand-tint: color-mix(in srgb, var(--brand) 22%, #121a19);
    --brand-line: color-mix(in srgb, var(--brand) 50%, #121a19);
    --ink: #e9efee;
    --ink-soft: #bccac8;
    --ink-faint: #93a3a0;
    --paper: #111817;
    --card: #19221f;
    --sunk: #141c1b;
    --line: #2d3a38;
    --line-strong: #435452;
    --field-border: #6b7f7c;
    --ok: #6fcf97;
    --warn: #f0b45a;
    --bad: #ff8a80;
    --focus: #8ab4ff;
    --shadow: none;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
img, svg { max-width: 100%; }
a { color: var(--brand-deep); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(1.7rem, 4.2vw, 2.3rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 .9em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li + li { margin-top: .2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; background: var(--sunk); padding: .05em .35em; border-radius: 4px; }

.wrap { max-width: var(--page-max, 1440px); margin: 0 auto; padding: 0 var(--gutter, 16px); }
.narrow { max-width: 760px; }
/* The Alerts site's reading pages (Questions, Get Alerts, an alert, Accessibility, Feeds, the day sheet) keep a
   reading width but start at the logo's left edge, inside the same 1440 pixel frame as the header,
   rather than in the middle of a wide screen. */
.brand-alerts ~ .wrap.narrow { max-width: var(--page-max, 1440px); }
.brand-alerts ~ .wrap.narrow > * { max-width: calc(760px - 2 * var(--gutter, 16px)); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Phone and computer wording: both are in the page, the right one shows. */
.dev-phone .dv-c, .dev-computer .dv-p { display: none !important; }
.sr-only.skip:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--card); padding: .6em 1em; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.small { font-size: .9rem; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.hidden, [hidden] { display: none !important; }
.ui-icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }

/* ---------- Header (brand_header.php, shared by every surface) ---------- */

/* One frame for every part: the same page width, gutters, logo, and
   title size on the main site, the Alerts site, and Operations, so moving
   between them changes only the words. From the top: the strip (the links to
   the other parts of VOICE, and Larger Text, High Contrast, and the
   language), the brand row (the logo, the title, the site's own links, the
   Menu button, or the account links, and the time), and the cord. Every size
   in the brand follows --logo (Chrome::LOGO_SIZES tells the browser which
   picture to load at each width): 48 and 56 on phones, 72 on tablets, and
   128 from 1024 pixels, where the words around the logo's edge can be read. */
:root { --page-max: 1440px; --gutter: 16px; }
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }
.brand-head { --logo: 48px; --title-size: calc(var(--logo) * .34); --bleed: max(0px, (100vw - var(--page-max)) / 2); position: relative; overflow-x: clip; }
@media (min-width: 400px) { .brand-head { --logo: 56px; } }
/* 96 from 640 pixels (at 72 the words around the logo's ring cannot be read). */
@media (min-width: 640px) { .brand-head { --logo: 96px; } }
@media (min-width: 1024px) { .brand-head { --logo: 128px; } }
/* Larger Text also enlarges the logo, by about a fifth, on every header but printed pages and Beacon screens
   (its files, 192 and 384 pixels wide, stay sharp at these sizes). */
:root.a11y-large .brand-head:not(.brand-print):not(.brand-beacon) { --logo: 56px; }
@media (min-width: 400px) { :root.a11y-large .brand-head:not(.brand-print):not(.brand-beacon) { --logo: 64px; } }
@media (min-width: 640px) { :root.a11y-large .brand-head:not(.brand-print):not(.brand-beacon) { --logo: 112px; } }
@media (min-width: 1024px) { :root.a11y-large .brand-head:not(.brand-print):not(.brand-beacon) { --logo: 152px; } }
.site-head { background: transparent; color: var(--ink); }
.head-row { display: flex; align-items: center; gap: 8px 20px; padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 640px) { .head-row { padding-top: 12px; padding-bottom: 10px; } }
@media (min-width: 1024px) { .head-row { padding-top: 14px; padding-bottom: 12px; } }
.brand { display: inline-flex; align-items: center; gap: calc(var(--logo) * .18); color: var(--ink); text-decoration: none; margin-right: auto; min-width: 0; flex: none; }
.brand-logo { width: var(--logo); height: var(--logo); display: block; flex: none; }
/* The title: text in capitals at one size everywhere, never stretched (Chrome::wordmark()). Two or three
   short words stack, one to a line, left-aligned, in a block about as tall as the logo; one word is one
   line at the same cap height; a typed name (a Beacon display's) is one line that may wrap. */
.brand-word { display: block; flex: none; min-width: 0; color: var(--brand-deep); font-family: var(--display); font-weight: 700; font-size: var(--title-size); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow-wrap: normal; }
.brand-word-stack .bw-line { display: block; line-height: .98; }
/* A stacked title whose longest line is long (a translation: SISTEMA DE / RETRANSMISIÓN / DE MENSAJES) is drawn
   smaller where the row has no room for it at the usual size beside what sits at the right (--title-room), so the
   header keeps its height and the time never drops to a line of its own. bw-len-N is the longest line's letters
   (Chrome::wordmark()); a capital in the display face is about .72 of the type size wide. */
.brand-word-stack { --bw-len: 7; font-size: max(11px, min(var(--title-size), calc((100vw - 2 * var(--gutter, 16px) - var(--bleed, 0px) * 2 - var(--logo, 64px) * 1.18 - var(--title-room, 0px)) / (var(--bw-len) * .72)))); }
.bw-len-8 { --bw-len: 8; } .bw-len-9 { --bw-len: 9; } .bw-len-10 { --bw-len: 10; }
.bw-len-11 { --bw-len: 11; } .bw-len-12 { --bw-len: 12; } .bw-len-13 { --bw-len: 13; }
/* What sits at the right of the title: the time and the Menu button on the main site, the time (and from 640
   pixels the links) on the Alerts site. Where Larger Text below 400 pixels leaves no room, the Menu button shows
   only its icon; its word stays for screen readers. */
.brand-site { --title-room: 11.5rem; }
@media (min-width: 640px) { .brand-site { --title-room: 16.5rem; } }
@media (min-width: 1024px) { .brand-site { --title-room: 10rem; } }
.brand-alerts { --title-room: 6rem; }
@media (min-width: 640px) { .brand-alerts { --title-room: 30rem; } }
@media (max-width: 399px) {
  .a11y-large .brand-site { --title-room: calc(6rem + 52px); }
  .a11y-large .vs-menu-btn { width: 44px; padding: 0; justify-content: center; }
  .a11y-large .vs-menu-btn > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.brand-word-plain { flex: 0 1 auto; white-space: normal; max-width: 18em; }
.brand-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px 20px; flex: none; min-width: 0; }
.clock { flex: none; text-align: right; line-height: 1.2; }
.clock-time { font-family: var(--display); font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-date { font-size: .9rem; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 1023px) { .clock-time { font-size: 1.2rem; } }
@media (max-width: 767px) { .clock-date { display: none; } }
/* The widest time and date, unseen, so the clock's width never changes with the hour (Chrome::clock()). */
.clock-max { height: 0; overflow: hidden; visibility: hidden; }

/* The Alerts site's own links, in pills. */
.site-nav { display: flex; gap: 4px; flex-wrap: nowrap; }
.site-nav a { display: inline-flex; align-items: center; gap: .4em; font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--ink); text-decoration: none; padding: .4em .85em; border-radius: 999px; min-height: 44px; white-space: nowrap; }
.site-nav a:hover { background: var(--brand-tint); }
.site-nav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-line); }
@media (max-width: 1023px) { .site-nav a { font-size: .97rem; padding-left: .5em; padding-right: .5em; } .brand-end { gap: 8px 10px; } }
@media (max-width: 767px) { .head-row { column-gap: 12px; } .brand-end { column-gap: 10px; } .site-nav a { padding-left: .5em; padding-right: .5em; } .cross-lead { display: none; } }
/* When the row has no room (a narrow tablet, Larger Text), everything at the right moves under the logo
   together, so no link is ever left alone on a line. */
.brand-row { flex-wrap: wrap; }
.brand-row > .brand-end { margin-left: auto; }

/* Phones: the logo, the title, and the time (with the Menu button on the main site) on one row; the
   Alerts site's links take one more row under it, left-aligned. */
@media (max-width: 639px) {
  .head-row { gap: 6px 8px; }
  .brand-end { gap: 6px 8px; }
  .clock-date { display: none; }
  .clock-time { font-size: 1rem; }
  .brand-alerts .brand-end, .brand-alerts .brand-end-row { display: contents; }
  .brand-alerts .brand-end-row > .site-nav { order: 5; flex: 1 1 100%; margin: 0 -.25em; }
  .site-nav a { font-size: .95rem; padding: .25em .6em; min-height: 36px; }
  /* Where the three links are wider than the screen (Larger Text, or longer words in another language), each one
     narrows and puts its own words on two lines, so none is cut off at the edge and none sits alone on a line. */
  .brand-alerts .site-nav { gap: 2px; }
  .brand-alerts .site-nav a { flex: 0 1 auto; white-space: normal; overflow-wrap: normal; hyphens: none; text-align: center; justify-content: center; line-height: 1.2; }
  .a11y-large .brand-alerts .site-nav a, .brand-alerts.ui-not-en .site-nav a { padding-left: .4em; padding-right: .4em; }
}
/* Narrow tablets (below 768 pixels, and below 900 in a language other than English, where the 96 pixel logo leaves
   no room for them), tablets with Larger Text, and narrow laptops with Larger Text in a longer language: the three
   links do not fit beside the title and the time, so they fold behind a Menu button after the time, as the VOICE
   site's do, and the header keeps the main site's height (a row of their own would make it 52 pixels
   taller). The button opens a list of the same links under it (brand_header.php), and needs no script. */
.alerts-menu { display: none; position: relative; flex: none; }
.alerts-menu-btn { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 1em; border: 1.5px solid var(--brand-line); border-radius: 999px; font-family: var(--display); font-weight: 600; color: var(--brand-deep); background: var(--card); cursor: pointer; list-style: none; white-space: nowrap; }
.alerts-menu-btn::-webkit-details-marker { display: none; }
.alerts-menu-btn svg { width: 1.2em; height: 1.2em; }
.alerts-menu[open] > .alerts-menu-btn { background: var(--brand-tint); }
.alerts-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 4px; min-width: 13rem; padding: 8px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(27, 38, 38, .14); }
.alerts-menu-panel a { display: flex; align-items: center; gap: .45em; min-height: 44px; padding: .4em .85em; border-radius: var(--radius-sm); font-family: var(--display); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.alerts-menu-panel a:hover { background: var(--brand-tint); }
.alerts-menu-panel a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 3px 0 0 var(--brand); }
:root.a11y-contrast .alerts-menu-btn { border-color: var(--line-strong); }
:root.a11y-contrast .alerts-menu-panel a[aria-current="page"] { background: var(--ink); color: var(--paper); box-shadow: none; }
@media (min-width: 640px) and (max-width: 767px) {
  .brand-alerts .brand-end-row > .site-nav { display: none; }
  .brand-alerts .alerts-menu { display: block; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .brand-alerts.ui-not-en .brand-end-row > .site-nav { display: none; }
  .brand-alerts.ui-not-en .alerts-menu { display: block; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .a11y-large .brand-alerts .brand-end-row > .site-nav { display: none; }
  .a11y-large .brand-alerts .alerts-menu { display: block; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .a11y-large .brand-alerts.ui-not-en .brand-end-row > .site-nav { display: none; }
  .a11y-large .brand-alerts.ui-not-en .alerts-menu { display: block; }
}

/* The strip above the brand row: the links to the other parts of VOICE on the left, the accessibility
   controls on the right, at the body's text size. Phones have a slimmer one with only the language and
   the "Aa" button (Larger Text and High Contrast). */
.util-strip { background: var(--sunk); border-bottom: 1px solid var(--line); }
.util-strip-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.util-strip-phone { display: none; }
.util-strip-phone .util-strip-in { justify-content: flex-end; min-height: 38px; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
@media (max-width: 639px) {
  .has-strip .util-strip:not(.util-strip-phone) { display: none; }
  .util-strip-phone { display: block; }
}
/* Operations keeps Larger Text and High Contrast at the foot of its phone Menu, so it has no phone strip. */
.brand-team > .util-strip-phone { display: none !important; }
/* The strip stays one row at every width (design row 1): where the full controls would not fit beside the link to
   the other site, which is with Larger Text or in a language other than English below 1024 pixels, and with both
   below 1280, Larger Text and High Contrast fold into the same "Aa" button the phone strip has, and the language
   stays in sight. Operations, with no language choice, drops the words "Public Sites" before its two links. */
.util-compact { display: none; align-items: center; gap: 6px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .has-compact.ui-not-en .util-strip .a11y-bar, .a11y-large .has-compact .util-strip .a11y-bar { display: none; }
  .has-compact.ui-not-en .util-compact, .a11y-large .has-compact .util-compact { display: flex; }
  .a11y-large .brand-team .cross-lead, .brand-team.ui-not-en .cross-lead { display: none; }
  .a11y-large .brand-team .util-strip-in { column-gap: 8px; }
  .a11y-large .brand-team .cross-links ul { column-gap: .7em; }
  .a11y-large .brand-team .util-strip .a11y-btn { padding-left: .45em; padding-right: .45em; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .a11y-large .has-compact.ui-not-en .util-strip .a11y-bar { display: none; }
  .a11y-large .has-compact.ui-not-en .util-compact { display: flex; }
}
/* On the public sites the controls share the brand row with the title, so from 640 to 1023 pixels, and to 1279
   with Larger Text or in another language, they always take the "Aa" form, which keeps the header one row high. */
@media (min-width: 640px) and (max-width: 1023px) {
  .brand-site.has-compact .util-strip .a11y-bar, .brand-alerts.has-compact .util-strip .a11y-bar { display: none; }
  .brand-site.has-compact .util-compact, .brand-alerts.has-compact .util-compact { display: flex; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .brand-site .brand-row, .brand-alerts .brand-row { flex-wrap: nowrap; }
  .brand-site .brand-end, .brand-alerts .brand-end { min-width: 0; flex: 1 1 auto; }
  .brand-end > .util-strip, .brand-end > .util-strip .util-strip-in { min-width: 0; max-width: 100%; }
  .brand-end > .util-strip .cross-links { min-width: 0; flex: 0 1 auto; justify-content: flex-end; text-align: right; }
  .brand-end > .util-strip .cross-links a { display: inline; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .brand-alerts.has-compact .util-strip .a11y-bar { display: none; }
  .brand-alerts.has-compact .util-compact { display: flex; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .brand-site.has-compact.ui-not-en .util-strip .a11y-bar, .brand-alerts.has-compact.ui-not-en .util-strip .a11y-bar,
  .a11y-large .brand-site.has-compact .util-strip .a11y-bar, .a11y-large .brand-alerts.has-compact .util-strip .a11y-bar { display: none; }
  .brand-site.has-compact.ui-not-en .util-compact, .brand-alerts.has-compact.ui-not-en .util-compact,
  .a11y-large .brand-site.has-compact .util-compact, .a11y-large .brand-alerts.has-compact .util-compact { display: flex; }
}
.cross-links { display: flex; align-items: center; flex-wrap: wrap; gap: .2em .6em; font-family: var(--display); font-size: 1rem; }
.cross-links ul { display: flex; flex-wrap: wrap; align-items: center; gap: .2em 1.2em; margin: 0; padding: 0; list-style: none; }
.cross-links li + li { margin-top: 0; }
.cross-links a { display: inline-flex; align-items: center; gap: .2em; min-height: 32px; color: var(--brand-deep); font-weight: 600; }
.cross-links a .ui-icon { width: .95em; height: .95em; vertical-align: 0; }
.cross-lead { color: var(--ink); font-weight: 600; }
/* The same link inside a page's words (the [alerts site] placeholder, Site::placeholders()). */
a.cross-link .ui-icon { width: .85em; height: .85em; margin-left: .1em; vertical-align: -.05em; }

/* The public sites' controls inside the header (no band above the header). From 640 pixels they sit at
   the top right of the brand row, in the space beside the title, with the time (and the Alerts site's links) under
   them; on phones the language and the "Aa" button sit in the row itself, beside the Menu button, and the time is
   left to the phone's own clock. */
.brand-site .brand-end, .brand-alerts .brand-end { flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; }
.brand-end-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px 20px; min-width: 0; }
.brand-end > .util-strip { background: none; border: 0; }
.brand-end > .util-strip .util-strip-in { min-height: 0; padding: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 6px 18px; }
@media (max-width: 1023px) { .brand-end-row { gap: 8px 10px; } }
@media (max-width: 639px) {
  .brand-site .brand-end { flex-direction: row; align-items: center; gap: 6px; }
  .brand-alerts .util-strip-phone { order: 4; margin-left: auto; }
  .brand-site .clock, .brand-alerts .clock { display: none; }
  /* On a phone the three lines stand alone, as menus on phones commonly do; the word Menu stays for screen readers. */
  .brand-site .vs-menu-btn { width: 44px; padding: 0; justify-content: center; gap: 0; }
  .brand-site .vs-menu-btn svg { width: 20px; height: 20px; }
  .brand-site .vs-menu-btn > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .brand-site { --title-room: calc(9rem + 76px); }
  .brand-alerts { --title-room: 9rem; }
  .brand-site .brand-row { flex-wrap: nowrap; }
  .brand-site .brand-end > .util-strip-phone .util-strip-in { gap: 4px; }
  .brand-end > .util-strip-phone .a11y-btn { padding-left: .55em; padding-right: .55em; font-size: .92rem; }
  .brand-site .vs-menu-btn, .brand-end > .util-strip-phone .a11y-fold-btn { width: 40px; min-width: 40px; }
}
/* The narrowest phones: the language keeps its word and drops its icon, so the Menu button always fits. */
@media (max-width: 399px) { .brand-end > .util-strip-phone .a11y-lang .ui-icon { display: none; } .brand-end > .util-strip-phone .a11y-btn { padding-left: .45em; padding-right: .45em; } }

/* Beacon screens: the clock is read from across the room. */
.brand-beacon { --logo: 120px; }
@media (min-width: 1600px) { .brand-beacon { --logo: 160px; } }
.brand-beacon .clock-time { font-size: 2.6rem; }
.brand-beacon .clock-date { font-size: 1.15rem; }
.brand-beacon .clock { min-width: 10em; }

/* One cord on the public sites: the line runs across the screen under the header and nothing branches
   from it, so the Relay a Message box and the Alerts site's most important alert are plain boxes under it. Beacon
   screens keep their own drawing (beacon-display.css). */
body:not(.bk-page-body) .brand-site .cord-drop, body:not(.bk-page-body) .brand-alerts .cord-drop { display: none !important; }
body:not(.bk-page-body) .cord-wrap::before, body:not(.bk-page-body) .cord-wrap::after, body:not(.bk-page-body) .cord-frame::before, body:not(.bk-page-body) .cord-frame::after,
body:not(.bk-page-body) .cord-wrap > .cord-end, body:not(.bk-page-body) .cord-frame > .cord-end { display: none !important; }
/* With the loop gone, its glow goes too: a square of color behind a rounded box showed at the box's lower corners.
   The box's own halo stays. */
body:not(.bk-page-body) .cord-wrap, body:not(.bk-page-body) .cord-frame { padding: 0; border-radius: 0; background: none; }

/* ---------- The sign and the box beside it ---------- */

/* The header chosen from the mockups. The title on the main site, the Alerts site, and Operations is a sign
   (Chrome::sign()): one line of capitals on a white card with an edge in the logo ring's teal, a muted border, and
   the same soft shadow as the box beside it. Up to 12 letters it is drawn at its full size; from 13 to 16 a little
   smaller, so it never crowds the box; on phones it shrinks to the room beside the buttons and wraps only if it must.
   On the public sites, from 1024 pixels, the controls (Larger Text, High Contrast, Print, the language) sit in a row
   at the top right, and the sign and the box share the line under them, their tops level, with the logo centered on
   the sign. Below 1024 pixels the same box hangs under the header (brand_header.php prints it in both places). */
:root { --lift: 0 2px 6px rgba(0, 0, 0, .14), 0 1px 1px rgba(0, 0, 0, .08); }
@media (prefers-color-scheme: dark) { :root:not(.force-light) { --lift: 0 2px 6px rgba(0, 0, 0, .5); } }
.brand-sign { --sign-len: 9; --sign-size: calc(var(--logo) * .38); display: inline-flex; align-items: center; height: calc(var(--logo) * .5); padding: 0 .45em 0 .35em;
  font-size: calc(var(--sign-size) * 12 / max(12, var(--sign-len))); line-height: 1; letter-spacing: .02em; white-space: nowrap; color: var(--brand-deep);
  background: var(--card); border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent); border-left: .22em solid var(--brand); border-radius: .1em .18em .18em .1em; box-shadow: var(--lift); }
/* The sign's other styles (Settings > Appearance): Outline keeps the border and the teal edge; Plain is the
   name alone, as before the sign; Soft Tint is a light teal fill with the teal edge. */
.sign-outline .brand-sign { background: none; box-shadow: none; }
.sign-plain .brand-sign { background: none; box-shadow: none; border-color: transparent; padding-left: 0; }
.sign-tint .brand-sign { background: color-mix(in srgb, var(--brand) 13%, var(--card)); border-color: transparent; border-left-color: var(--brand); box-shadow: none; }
/* The small pictures of each style in Settings > Appearance. */
.sign-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.sign-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; }
.sign-choice:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.sign-choice:has(input:focus-visible) { outline: 3px solid var(--focus, var(--brand)); outline-offset: 2px; }
.sign-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sign-sample { --logo: 64px; display: block; padding: 6px 4px; }
@media (max-width: 639px) { .sign-choice { flex: 1 1 100%; } }
.sign-choice-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.sign-choice-name::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--ink-soft); border-radius: 50%; flex: none; }
.sign-choice:has(input:checked) .sign-choice-name::before { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 45%, transparent 50%); }
.sl-1 { --sign-len: 1; } .sl-2 { --sign-len: 2; } .sl-3 { --sign-len: 3; } .sl-4 { --sign-len: 4; } .sl-5 { --sign-len: 5; } .sl-6 { --sign-len: 6; }
.sl-7 { --sign-len: 7; } .sl-8 { --sign-len: 8; } .sl-9 { --sign-len: 9; } .sl-10 { --sign-len: 10; } .sl-11 { --sign-len: 11; } .sl-12 { --sign-len: 12; }
.sl-13 { --sign-len: 13; } .sl-14 { --sign-len: 14; } .sl-15 { --sign-len: 15; } .sl-16 { --sign-len: 16; } .sl-17 { --sign-len: 17; } .sl-18 { --sign-len: 18; }
.sl-19 { --sign-len: 19; } .sl-20 { --sign-len: 20; } .sl-21 { --sign-len: 21; } .sl-22 { --sign-len: 22; } .sl-23 { --sign-len: 23; } .sl-24 { --sign-len: 24; }
@media (max-width: 639px) {
  /* --sign-end is the room the buttons at the right take: the language, the "Aa" button, and on the main site Menu. */
  .brand-site { --sign-end: 172px; } .brand-alerts { --sign-end: 132px; }
  .a11y-large .brand-site { --sign-end: 196px; } .a11y-large .brand-alerts { --sign-end: 152px; }
  .brand-site .brand-sign, .brand-alerts .brand-sign { --sign-size: calc(var(--logo) * .37); --sign-room: calc(100vw - 2 * var(--gutter, 16px) - var(--logo) * 1.18 - var(--sign-end));
    height: auto; min-height: calc(var(--logo) * .5); padding: .14em .45em .1em .35em; white-space: normal; text-wrap: balance; max-width: var(--sign-room);
    font-size: max(11px, min(calc(var(--sign-size) * 12 / max(12, var(--sign-len))), calc(var(--sign-room) / (var(--sign-len) * .66 + 1.05)))); line-height: 1.05; overflow-wrap: normal;
    /* The sign always has its longest word, even when Larger Text leaves less room than the 11px floor needs. */
    min-width: min-content; }
}
/* Operations: the same sign, at Operations' title size, in its place beside the logo. */
.brand-team .brand-sign { height: auto; padding: .1em .45em .05em .35em; font-size: calc(var(--title-size) * 12 / max(12, var(--sign-len))); justify-self: start; }

@media (min-width: 1024px) {
  .has-panel .brand-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 28px; row-gap: 10px; align-items: start; }
  .has-panel .brand { grid-column: 1; grid-row: 2; margin: calc(var(--logo) * -.25) 0 0; }
  .has-panel .brand-end { grid-column: 1 / -1; grid-row: 1; justify-self: end; gap: 0; }
  .has-panel .head-panel-wide { grid-column: 2; grid-row: 2; min-width: 0; }
  .has-panel .hp-row { min-height: calc(var(--logo) * .5); }
}
.head-band { display: none; }
@media (max-width: 1023px) {
  .has-panel .head-panel-wide { display: none; }
  .has-panel .head-band { display: block; padding-top: 12px; padding-bottom: 14px; } /* room between the box and the page under it */
  .has-panel .brand-end { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
}
/* The cord takes the color of a current Emergency alert's type, a little heavier, beside the alert's own words. */
.brand-head.has-emergency > .cord { color: var(--tc-band, var(--p-emergency)); }
.brand-head.has-emergency > .cord .cord-path { stroke-width: 3; }

/* The box (HeadPanel): the alert row in its type's band color with white words, or the Alerts site's tabs, then the
   Today strip in a pale shade of the same color. */
.hp { --hp-c: var(--brand); overflow: hidden; border: 1px solid color-mix(in srgb, var(--hp-c) 60%, #000); border-radius: 10px; background: var(--card); box-shadow: var(--lift); font-family: var(--display); }
.hp-alerts { --hp-c: var(--tc-band, var(--brand)); }
.hp-quiet, .hp-tabs-box, .hp-plain { --hp-c: var(--brand); border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.hp-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 7px 12px; background: var(--hp-c); color: #fff; }
.hp-row[hidden] { display: none; }
.hp-quiet .hp-row { background: var(--card); color: var(--ink); border-left: 6px solid var(--brand); }
.hp-items { flex: 1 1 16rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hp-item { display: flex; align-items: center; gap: 12px; margin: 0; }
.hp-item[hidden] { display: none; }
.hp-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, .75); border-radius: 50%; }
.hp-mark svg, .hp-mark img { width: 22px; height: 22px; }
.hp-quiet .hp-mark { border: 0; background: var(--brand); color: #fff; }
.hp-words { display: flex; flex-direction: column; min-width: 0; }
.hp-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: .84rem; line-height: 1.25; }
.hp-tag { padding: 1px 9px; border: 1.5px solid #fff; border-radius: 999px; background: var(--p-emergency); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* The title wraps rather than ending in "...", so readers who widen letter and word spacing still read all of it (WCAG 1.4.12). */
.hp-title { display: block; color: #fff; font-size: 1.1rem; font-weight: 800; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.hp-title:hover, .hp-title:focus-visible { text-decoration: underline; }
.hp-none { flex: 1 1 auto; margin: 0; font-size: 1.05rem; font-weight: 700; }
.hp-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-left: auto; }
.hp-turns { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; }
.hp-turns[hidden], .hp-turn[hidden] { display: none; }
.hp-turn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 32px; height: 32px; padding: 0 8px; border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.hp-turn:hover { background: rgba(255, 255, 255, .16); }
.hp-turn .ui-icon { width: 16px; height: 16px; vertical-align: 0; }
.hp-turn [hidden] { display: none; }
.hp-pos { min-width: 3.4em; font-weight: 600; text-align: center; }
.hp-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.hp-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border: 1.5px solid #fff; border-radius: 999px; background: #fff; color: var(--hp-c); font-size: .92rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hp-pill:hover { text-decoration: underline; }
.hp-pill .ui-icon { width: 1em; height: 1em; vertical-align: 0; }
.hp-quiet .hp-pill { border-color: var(--brand); color: var(--brand-deep); }
/* The Alerts site's tabs: the page being read filled in (an alert's own page marks Current Alerts more lightly), and
   the Wiki link set apart by a line and drawn as an outlined button with an arrow, because it leads to the other site. */
.hp-tabs { display: flex; align-items: center; gap: 4px; padding: 6px; }
.hp-tab { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 7px; color: var(--brand-deep); font-weight: 700; text-align: center; text-decoration: none; white-space: nowrap; }
.a11y-large .hp-tab { white-space: normal; overflow-wrap: normal; } /* wraps between words, never inside one (Ques-tions at 320 pixels) */
.hp-tab:hover { background: var(--brand-tint); }
.hp-tab[aria-current="page"] { background: var(--brand); color: #fff; }
.hp-tab[aria-current="true"] { background: var(--brand-tint); box-shadow: inset 0 0 0 1.5px var(--brand); }
.hp-tab-sep { flex: none; align-self: stretch; width: 1.5px; margin: 4px; background: var(--line-strong); }
.hp-out { flex: 0 0 auto; min-height: 36px; padding: 4px 14px; border: 1.5px solid var(--brand-line); border-radius: 999px; }
.hp-out .ui-icon { width: 1em; height: 1em; vertical-align: 0; }
/* The Today strip: the time and date, Now, Today (or Tonight), and from 1280 pixels Tomorrow, with a line between. */
.hp-today { container-type: inline-size; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; padding: 5px 14px; background: color-mix(in srgb, var(--hp-c) 16%, var(--card)); color: var(--ink); font-size: .9rem; line-height: 1.3;
  border-top: 1px solid color-mix(in srgb, var(--hp-c) 30%, var(--card)); }
.hp-plain .hp-today { border-top: 0; }
.hp-g { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; white-space: nowrap; }
.hp-g:first-child { padding-left: 0; }
.hp-g + .hp-g { border-left: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.hp-l { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hp-time, .hp-big { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hp-date { color: var(--ink-soft); }
.hp-i { display: inline-flex; }
.hp-i .ui-icon { width: 18px; height: 18px; vertical-align: 0; }
.hp-i-sun { color: #8a520a; }
.hp-i-sky { color: #2f5f80; }
@media (prefers-color-scheme: dark) { :root:not(.force-light) .hp-i-sun { color: #f0b45a; } :root:not(.force-light) .hp-i-sky { color: #8ab4ff; } }
.hp-sun { display: inline-flex; align-items: center; gap: 4px; }
.hp-short { display: inline-block; max-width: 8em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.hp-next .hp-short { display: inline; max-width: none; }
/* Tomorrow shows only where the strip has room for it on the same row (a wide screen's), and gives way first: its
   words for the sky are cut short before anything else is. */
.hp-next { display: none; }
@container (min-width: 840px) { .hp-today > .hp-g { flex: none; } .hp-today > .hp-next { display: inline-flex; flex: 0 1 auto; min-width: 0; overflow: hidden; } }
@media (min-width: 1024px) { .hp-today { flex-wrap: nowrap; } .a11y-large .hp-today { flex-wrap: wrap; } }
.hp-next > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Where it would be cut short, the page's script leaves its sky to its icon, or leaves it out (common.js). */
.hp-next-short .hp-short { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-today > .hp-next.hp-next-cut { display: none; }
/* Tablets and phones: one centered row, Tomorrow left out, and on phones Today too, and the words for the
   weather now, which stay for screen readers. With Larger Text the row may wrap rather than run off the screen. */
@media (max-width: 1023px) { .hp-today { justify-content: center; flex-wrap: nowrap; } .a11y-large .hp-today { flex-wrap: wrap; } }
@media (max-width: 639px) { .hp-now .hp-short { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* Tablets: the alert on one line, its buttons a little smaller. */
@media (min-width: 640px) and (max-width: 1023px) {
  .hp-row { flex-wrap: nowrap; gap: 8px 10px; }
  .hp-items { flex: 1 1 0; }
  .hp-title { font-size: .98rem; }
  .hp-tools { flex-wrap: nowrap; gap: 6px 10px; }
  .hp-pills { flex-wrap: nowrap; gap: 6px; }
  .hp-pill { gap: 4px; min-height: 30px; padding: 3px 10px; font-size: .8rem; }
  .a11y-large .hp-row, .a11y-large .hp-tools { flex-wrap: wrap; }
}
/* Phones: the title over the buttons, which are centered: Previous, Next, and Pause on one row, the two links under them. */
@media (max-width: 639px) {
  .hp-row { padding: 10px 12px; }
  .hp-title { font-size: 1.02rem; }
  .hp-tools { width: 100%; justify-content: center; margin-left: 0; }
  .hp-turns { justify-content: center; width: 100%; }
  .hp-pills { justify-content: center; }
  .hp-day { display: none; }
  .hp-tabs { flex-wrap: wrap; gap: 7px 4px; padding: 8px 6px; } /* the Wiki button on its own row, with room above and below it */
  /* Room on each side of a tab's words, which wrap between words rather than touch the pill's edge. */
  .hp-tab { flex: 1 1 auto; padding: 6px 10px; font-size: .9rem; white-space: normal; line-height: 1.2; }
  .a11y-large .hp-tab { flex: 1 1 0; padding: 6px 6px; } /* with Larger Text the three share the row equally and wrap inside */
  .hp-tab-sep { display: none; }
  .hp-out { flex: 1 1 100%; border-radius: 7px; }
}
/* Where the box is narrower than the strip (beside the sign from 1024 to about 1280 pixels, and on the narrowest
   tablets), nothing is cut off: the words for the weather now give way first, as on phones, and then the strip takes
   two rows, without the lines between, as with Larger Text. The box itself is the measure (named hp). Phones keep
   their own one-row strip (above). */
.head-panel { container: hp / inline-size; }
@container hp (max-width: 769px) { .hp-now .hp-short { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-width: 640px) {
  @container hp (max-width: 659px) {
    .hp-today { flex-wrap: wrap; column-gap: 18px; }
    .hp-g { padding: 0; }
    .hp-g + .hp-g { border-left: 0; }
    .hp-tab { padding: 6px 8px; }
  }
}
/* High Contrast: strong black edges, no shadows or tints, the alert colors kept. */
:root.a11y-contrast .brand-sign { border: 2px solid var(--line-strong); border-left: .22em solid var(--brand); box-shadow: none; }
/* High Contrast darkens the logo's middle tones, such as its teal ring, while white stays white and black stays black,
   much as the page's own colors darken. Until 0.26.0 this was an SVG filter referenced with url(#logo-contrast), which
   left the logo unchanged on an iPhone (Safari) while the rest of the page changed; plain filter functions work in
   every browser. brightness(.75) contrast(2) is close to squaring each color value, as that filter did. */
:root.a11y-contrast .brand-logo { filter: brightness(.75) contrast(2); }
/* In dark mode, only VOICE's own logo darkens, because its ring sits on its own white disc; a site's own logo may sit on
   nothing, where darker middle tones would fade into the black page. */
@media (prefers-color-scheme: dark) { :root.a11y-contrast:not(.force-light) .brand-logo:not(.logo-voice) { filter: none; } }
:root.a11y-contrast .sign-plain .brand-sign { border-color: transparent; }
:root.a11y-contrast .sign-tint .brand-sign { background: var(--card); }
:root.a11y-contrast .hp { border: 2px solid var(--line-strong); box-shadow: none; }
:root.a11y-contrast .hp-today { background: var(--card); border-top: 2px solid var(--line-strong); }
:root.a11y-contrast .hp-g + .hp-g { border-left-color: var(--line-strong); }
:root.a11y-contrast .hp-i-sun, :root.a11y-contrast .hp-i-sky { color: var(--ink); }
:root.a11y-contrast .hp-quiet .hp-row { border-left-color: var(--ink); }
:root.a11y-contrast .hp-tab[aria-current="page"] { background: var(--ink); color: var(--paper); }
:root.a11y-contrast .hp-tab[aria-current="true"], :root.a11y-contrast .hp-out { box-shadow: inset 0 0 0 2px var(--ink); border-color: var(--ink); }
:root.a11y-contrast .brand-end > .util-strip { border-bottom: 0; }
/* With Larger Text the strip may take two rows, so its parts are spaced apart rather than divided by lines, which could
   start a row. */
.a11y-large .hp-today { column-gap: 18px; }
.a11y-large .hp-g { padding: 0; }
.a11y-large .hp-g + .hp-g { border-left: 0; }

/* ---------- The accessibility controls ---------- */

/* A11y::bar(): Larger Text and High Contrast are toggle buttons (aria-pressed), and a pressed one shows a
   check as well as its color; the language is a link to the other language, or a fold with each language
   when there are more than two. They are drawn at the body's text size in the page's own ink, with an
   outline, so a reader who needs them can find them. */
.a11y-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.a11y-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.a11y-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 34px; padding: .1em .8em; border: 1px solid var(--field-border); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; }
.a11y-btn .ui-icon { width: 1.1em; height: 1.1em; }
@media (max-width: 767px) { .util-strip .a11y-btn { padding-left: .6em; padding-right: .6em; font-size: .95rem; } .util-strip .a11y-bar, .util-strip .a11y-form { gap: 4px; } }
.a11y-btn:hover { color: var(--brand-deep); border-color: var(--brand); background: var(--brand-tint); }
.a11y-btn[aria-pressed="true"] { color: var(--brand-deep); border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.a11y-check { display: none; }
.a11y-btn[aria-pressed="true"] .a11y-check { display: inline-flex; }
.a11y-langs { position: relative; }
.a11y-langs > summary { list-style: none; }
.a11y-langs > summary::-webkit-details-marker { display: none; }
.a11y-langs-now { font-weight: 400; }
.a11y-langs-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 12em; margin: 0; padding: .35rem; list-style: none; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(27, 38, 38, .14); }
.a11y-langs-list li + li { margin-top: 0; }
.a11y-langs-list a { display: flex; min-height: 40px; align-items: center; padding: .2em .7em; border-radius: 4px; color: var(--ink); text-decoration: none; }
.a11y-langs-list a:hover { background: var(--brand-tint); }
.a11y-langs-list a[aria-current="true"] { font-weight: 700; color: var(--brand-deep); }
/* The phone's "Aa" button and the panel it opens. */
.a11y-fold { position: relative; display: flex; }
.a11y-fold-btn { width: 44px; padding: 0; list-style: none; }
.a11y-fold-btn::-webkit-details-marker { display: none; }
.a11y-fold[open] > .a11y-fold-btn { background: var(--brand-tint); border-color: var(--brand); }
.a11y-fold-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; padding: 8px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(27, 38, 38, .14); }
.a11y-fold-panel .a11y-form { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.a11y-fold-panel .a11y-btn { justify-content: flex-start; min-height: 44px; }
/* The menu is as wide as its longest button, whose words never touch its edge, whatever a phone's text size or the
   strip's own narrower buttons above (High Contrast ran past its border). */
.a11y-fold-panel { width: max-content; max-width: calc(100vw - 24px); }
.brand-end > .util-strip-phone .a11y-fold-panel .a11y-btn, .a11y-fold-panel .a11y-btn { width: 100%; padding: .1em 1.1em .1em .9em; white-space: nowrap; }
@media (max-width: 639px) { .util-strip-phone .a11y-btn { min-height: 32px; font-size: .95rem; } }

/* Larger Text: every size set in rem grows by a quarter (the header's logo keeps its size). */
:root.a11y-large { font-size: 125%; }

/* High Contrast (a true high-contrast mode): black on white, with no tints, glows, or cream, dark
   links with thick underlines, strong borders, and every brand-colored surface in a near-black teal
   with white words. The alert colors stay, because they carry meaning, each with white words at 4.5:1 or
   more. In dark mode it is white on black. */
:root.a11y-contrast {
  --ink: #000; --ink-soft: #000; --ink-faint: #1a1a1a; --paper: #fff; --card: #fff; --sunk: #fff;
  --line: #000; --line-strong: #000; --field-border: #000; --focus: #0038b8; --shadow: none;
  --brand: #003d3a; --brand-deep: #003d3a; --brand-tint: #fff; --brand-line: #000; --vs-solid: #003d3a;
}
@media (prefers-color-scheme: dark) {
  :root.a11y-contrast:not(.force-light) {
    --ink: #fff; --ink-soft: #fff; --ink-faint: #e6e6e6; --paper: #000; --card: #000; --sunk: #000;
    --line: #fff; --line-strong: #fff; --field-border: #fff; --focus: #ffd43b;
    --brand: #003d3a; --brand-deep: #a8f0ea; --brand-tint: #000; --brand-line: #fff; --vs-solid: #003d3a;
  }
}
:root.a11y-contrast a { text-decoration-thickness: .14em; }
:root.a11y-contrast :focus-visible { outline-width: 4px; }
:root.a11y-contrast .cord-frame, :root.a11y-contrast .cord-wrap, :root.a11y-contrast .cord-glow { background: none; }
:root.a11y-contrast .cord-frame .status-card { box-shadow: none; }
:root.a11y-contrast .panel, :root.a11y-contrast .card, :root.a11y-contrast input, :root.a11y-contrast select, :root.a11y-contrast textarea { border-color: var(--line-strong); }
:root.a11y-contrast .btn-secondary, :root.a11y-contrast .btn-quiet { border-color: var(--line-strong); color: var(--brand-deep); }
:root.a11y-contrast .pill:not(.pill-solid) { color: var(--ink); border-color: var(--line-strong); background: var(--card); }
:root.a11y-contrast .site-nav a[aria-current="page"], :root.a11y-contrast .a11y-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
:root.a11y-contrast .util-strip { border-bottom: 2px solid var(--line-strong); }

/* ---------- The phone cord ---------- */

/* Under every header: one drawing, so the straight runs and the loops share a single line
   (Chrome::cord). It sits outside the page's width and runs from the left edge of the screen to the
   right on every page; the loops stay centred under the logo (--bleed is the empty margin beside the
   page on a wide screen). Each surface adds its own flourish:
   - the Alerts front page: a branch bends down from the line at the page's right edge (.cord-drop) and
     wraps the most important alert (.cord-frame), while the line runs on to the screen's edge;
   - the main site: a branch bends down the same way into the Relay a Message box (.cord-wrap);
   - Operations: the cord with its coils under the logo, its only bottom edge;
   - printed sheets: a thin black cord under the sheet's header (print.css). */
.cord { display: flex; color: var(--ink); height: 18px; margin-top: 2px; }
.cord-main { flex: 1; min-width: 0; height: 18px; display: block; overflow: hidden; }
.cord-path { transform: translateX(48px); }
.brand-head > .cord { position: relative; }
.brand-head > .cord .cord-path { transform: translateX(calc(var(--bleed) + var(--gutter) + (var(--logo) - 72px) / 2 - 14px)); }
.cord-drop { display: none; flex: none; overflow: visible; position: relative; z-index: 1; }
.brand-head > .cord .cord-drop { position: absolute; top: 0; right: calc(var(--bleed) + var(--gutter)); }
.page-home .cord-drop { display: block; }

/* ---------- Footer ---------- */

/* One layout on both public sites (site_foot.php, public_foot.php): on the left, that this is not an
   emergency service and how to reach the people who run the site; on the right, the site's own links,
   the link to the other part of VOICE, and the project line a site may set; at the bottom, the license
   line with the Creative Commons marks (legal_foot.php). */
.site-foot { margin-top: 3rem; background: var(--card); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; }
.site-foot .wrap { padding-top: 1.6rem; padding-bottom: 2rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
.foot-main > :last-child, .foot-side > :last-child { margin-bottom: 0; }
.foot-trust { color: var(--ink); }
.foot-phone { display: flex; gap: 6px; align-items: flex-start; font-weight: 600; color: var(--ink); }
.foot-phone .ui-icon { flex: none; margin-top: 3px; }
/* The same line under Set Up Alerts and Get Alerts' opening, once Alerts by Phone is on. */
.join-phone { display: flex; gap: 6px; align-items: flex-start; margin: .8rem 0 0; font-weight: 600; color: var(--ink); }
.join-phone .ui-icon { flex: none; margin-top: 3px; }
.foot-links { list-style: none; padding: 0; margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .4em 1.2em; }
.foot-links li + li { margin-top: 0; }
.foot-cross { margin: 0 0 .8rem; font-family: var(--font); font-size: inherit; }
.foot-cross a { font-weight: 600; }
.foot-project { margin: 0; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.4em; padding-top: 1rem; margin-top: 1.2rem; border-top: 1px solid var(--line); font-size: .88rem; }
.cc-mark { display: inline-flex; align-items: center; gap: .5em; color: inherit; text-decoration: none; }
.cc-mark:hover span { text-decoration: underline; }
.cc-icons { display: inline-flex; gap: 2px; }
.cc-icons svg { width: 22px; height: 22px; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  min-height: 44px; padding: .62em 1.15em;
  background: var(--brand); color: #fff; border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-secondary { background: var(--card); color: var(--brand-deep); border-color: var(--brand-line); }
.btn-secondary:hover { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); }
.btn-quiet { background: transparent; color: var(--brand-deep); border-color: transparent; padding-left: .6em; padding-right: .6em; }
.btn-quiet:hover { background: var(--brand-tint); color: var(--brand-deep); border-color: transparent; }
.btn-danger { background: var(--bad); border-color: var(--bad); }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 80%, #000); border-color: color-mix(in srgb, var(--bad) 80%, #000); }
.btn-danger-outline { background: var(--card); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--card)); }
.btn-danger-outline:hover { background: color-mix(in srgb, var(--bad) 8%, var(--card)); color: var(--bad); border-color: var(--bad); }
.btn-big { font-size: 1.15rem; min-height: 54px; padding: .8em 1.4em; }
.btn-small { font-size: .92rem; min-height: 36px; padding: .4em .8em; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem .6rem; align-items: center; }
.btn-row.end { justify-content: flex-end; }
@media (prefers-color-scheme: dark) { :root:not(.force-light) .btn { color: #fff; } }
/* Dark mode's light red (--bad) is for words on the dark page; under white words a button keeps a deep red. */
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) .btn-danger { background: #b3261e; border-color: #b3261e; }
  :root:not(.force-light) .btn-danger:hover { background: #8f1e18; border-color: #8f1e18; }
}

/* ---------- Panels and cards ---------- */

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow); }
.panel > :last-child { margin-bottom: 0; }
.panel + .panel { margin-top: 1rem; }
.panel h2 { font-size: 1.2rem; }
.panel-tint { background: var(--brand-tint); border-color: var(--brand-line); box-shadow: none; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.8rem 0 .7rem; }
.section-head h2 { margin: 0; }
.section-head .count { color: var(--ink-soft); font-size: .92rem; }
.empty { color: var(--ink-soft); background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 1rem 1.2rem; }

/* ---------- Priority colors ---------- */

.p-emergency { --pc: var(--p-emergency); }
.p-high { --pc: var(--p-high); }
.p-normal { --pc: var(--p-normal); }
.p-low { --pc: var(--p-low); }
.pill {
  display: inline-flex; align-items: center; gap: .35em; max-width: 100%;
  font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pc, var(--ink-soft)); background: color-mix(in srgb, var(--pc, var(--ink-soft)) 11%, var(--card));
  border: 1px solid color-mix(in srgb, var(--pc, var(--ink-soft)) 35%, var(--card));
  padding: .14em .6em; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
.pill-solid { color: #fff; background: var(--pc); border-color: var(--pc); }
/* One priority pill everywhere: Emergency is always solid, with its octagon, as on the Alerts site and
   Beacon, and Important, Update, and Community are outlined everywhere: the words and a border in the
   priority's color on a light tint of it, all in capitals at this size, on the Alerts site, in Operations, on Beacon
   screens (beacon-display.css, .bk-pill), and on printed sheets. A page that asks for a solid pill for a priority
   (an alert's own page, the day sheet, a Beacon sheet) gets the same outlined one. */
.pill.p-high, .pill.p-normal, .pill.p-low, .p-high .pill.pill-solid, .p-normal .pill.pill-solid, .p-low .pill.pill-solid,
.alert-card.p-high .alert-card-top > .pill, .alert-card.p-normal .alert-card-top > .pill, .alert-card.p-low .alert-card-top > .pill {
  color: var(--pc); background: color-mix(in srgb, var(--pc) 11%, var(--card)); border: .12em solid var(--pc); }
.pill.p-emergency { color: #fff; background: var(--p-emergency); border-color: var(--p-emergency); }
.pill .ui-icon { width: 1.1em; height: 1.1em; flex: none; }
@media (prefers-color-scheme: dark) { :root:not(.force-light) .pill.p-emergency.p-emergency { color: #fff; } }
:root.a11y-contrast .pill.p-emergency.p-emergency { color: #fff; background: var(--p-emergency); border-color: var(--p-emergency); }
.pill-plain { --pc: var(--ink-soft); }
.pill-ok { --pc: var(--ok); }
.pill-warn { --pc: var(--warn); }
.pill-bad { --pc: var(--bad); }
.pill-brand { --pc: var(--brand-deep); }
/* A long pill wraps on a narrow phone instead of running off the screen (WCAG 1.4.10). */
@media (max-width: 480px) { .pill { white-space: normal; } }
a.pill { min-height: 24px; }
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) .pill:not(.pill-solid) { color: color-mix(in srgb, var(--pc) 45%, #fff); }
  /* An outlined priority pill that a page asked for as solid is lightened too (it read 2.6 to 1). */
  :root:not(.force-light) .pill.pill-solid.p-high, :root:not(.force-light) .pill.pill-solid.p-normal, :root:not(.force-light) .pill.pill-solid.p-low,
  :root:not(.force-light) .p-high .pill.pill-solid, :root:not(.force-light) .p-normal .pill.pill-solid, :root:not(.force-light) .p-low .pill.pill-solid {
    color: color-mix(in srgb, var(--pc) 45%, #fff); }
}
/* With High Contrast, the outlined priority pill a page asked for as solid reads as every other outlined pill does. */
:root.a11y-contrast .pill.pill-solid.p-high, :root.a11y-contrast .pill.pill-solid.p-normal, :root.a11y-contrast .pill.pill-solid.p-low,
:root.a11y-contrast .p-high .pill.pill-solid, :root.a11y-contrast .p-normal .pill.pill-solid, :root.a11y-contrast .p-low .pill.pill-solid {
  color: var(--ink); border-color: var(--line-strong); background: var(--card); }

/* ---------- Alert type icons ---------- */

.type-icon { --tc: var(--brand); display: inline-grid; place-items: center; flex: none; background: var(--tc); color: #fff; border-radius: 50%; }
.type-icon svg { width: 58%; height: 58%; }
.type-icon img { width: 70%; height: 70%; object-fit: contain; }
.type-icon-sm { width: 30px; height: 30px; }
.type-icon-md { width: 44px; height: 44px; }
.type-icon-lg { width: 64px; height: 64px; }
.type-icon-xl { width: 88px; height: 88px; }

/* ---------- Status band (top of the front page) ---------- */

/* The same room under the header as above any page's heading, so the most important alert never meets the cord. */
.status { padding: 22px 0 4px; }
/* On a phone the menu's panel already sits between the header and the alert, so less room is needed. */
@media (max-width: 640px) { .status { padding-top: 14px; } }
/* The cord's loop around a box: around the top of the Alerts front page
   (.cord-frame), and around anything else that wants it (.cord-wrap). The
   right side comes down from the header (.cord-drop); the left side rises and
   stops short of the header, like the free end of a cord. A wrap with no cord
   coming down into it (.cord-loose) ends in a free end on both sides.
   Inside the front page's frame, the page warms into the alert's own color,
   so the card seems to glow up toward the cord. Plain gradients only. */
.cord-frame, .cord-wrap { --frame-r: 30px; position: relative; padding: 20px 12px 12px; border-radius: 0 0 var(--frame-r) var(--frame-r); }
.cord-frame, .cord-glow { --tc: var(--brand); --glow-1: 8%; --glow-2: 16%; --halo: 42%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 0%, transparent) 0, color-mix(in srgb, var(--tc) var(--glow-1), transparent) 26px, color-mix(in srgb, var(--tc) var(--glow-2), transparent) 100%); }
/* A wrap around something other than an alert glows more softly, in the brand color. */
.cord-glow { --glow-1: 4%; --glow-2: 10%; }
/* On a dark page the same color needs more strength to show. */
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) .cord-frame { --glow-1: 16%; --glow-2: 30%; --halo: 60%; }
  :root:not(.force-light) .cord-glow { --glow-1: 8%; --glow-2: 18%; }
}
/* The card's own color spreads outward and fades into the frame, so there is
   no hard line between the card and the glow around it. */
.cord-frame .status-card { --halo-c: var(--tc); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--halo-c) var(--halo), transparent), 0 0 4px 1px color-mix(in srgb, var(--halo-c) var(--halo), transparent); }
.cord-frame .emergency-card { --halo-c: var(--tc-band); }
.cord-frame .lead-card, .cord-frame .calm-card { --halo: 20%; }
.cord-frame::before, .cord-frame::after, .cord-wrap::before, .cord-wrap::after { content: ""; position: absolute; bottom: 0; border-bottom: 2px solid var(--ink); pointer-events: none; }
.cord-frame::before, .cord-wrap::before { top: 18px; right: 0; left: 40px; border-right: 2px solid var(--ink); border-bottom-right-radius: var(--frame-r); }
.cord-frame::after, .cord-wrap::after { top: 15px; left: 0; width: 56px; border-left: 2px solid var(--ink); border-bottom-left-radius: var(--frame-r); }
/* The free end: a small rounded tip, the way a cord ends. */
.cord-end { position: absolute; left: -2.5px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.cord-end-r { display: none; left: auto; right: -2.5px; top: 15px; }
.cord-loose .cord-end-r { display: block; }
@media (max-width: 640px) {
  .cord-frame, .cord-wrap { padding: 22px 11px 13px; }
  .cord-frame { --glow-1: 12%; --glow-2: 22%; }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) { :root:not(.force-light) .cord-frame { --glow-1: 20%; --glow-2: 36%; } }
.status h1 { margin-bottom: .25em; }
.status p { margin: 0; }
.status-stack { display: flex; flex-direction: column; gap: 22px; }
/* Cards hang from the phone cord: soft corners to match its curves. */
.status-card { border-radius: 22px; padding: 1.3rem 1.5rem; }
.calm-card { display: flex; align-items: center; gap: 14px; background: var(--brand-tint); border: 1px solid var(--brand-line); }
.calm-card h1 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.calm-mark { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--brand-deep); border: 1px solid var(--brand-line); }
.calm-mark svg { width: 24px; height: 24px; }
.emergency-card { --tc-band: var(--p-emergency); background: var(--tc-band); color: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; padding: 1.4rem 1.6rem 1.5rem; box-shadow: 0 8px 22px color-mix(in srgb, var(--tc-band) 24%, transparent); }
.emergency-card a { color: #fff; }
.emergency-card .type-icon { --tc: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .6); grid-row: 1 / span 5; grid-column: 1; }
.emergency-card > :not(.type-icon) { grid-column: 2; }
.emergency-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .7em; }
.tag-emergency { display: inline-flex; align-items: center; gap: .35em; background: var(--p-emergency); color: #fff; font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; padding: .22em .75em .22em .6em; border-radius: 999px; box-shadow: 0 0 0 2px #fff; }
.tag-emergency .ui-icon { width: 1.05em; height: 1.05em; vertical-align: 0; }
.emergency-type { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: .02em; }
.emergency-card h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); margin: .35em 0 .25em; }
.emergency-card p { font-size: 1.15rem; }
.emergency-card .meta { font-size: 1rem; opacity: .95; margin-top: .4em; }
.btn-oncolor { display: inline-flex; align-items: center; gap: .4em; margin-top: .9rem; background: #fff; color: var(--tc-band) !important; font-weight: 700; text-decoration: none; padding: .6em 1.1em; border-radius: 999px; min-height: 44px; }
.btn-oncolor:hover { text-decoration: underline; }
.lead-card { --tc-band: var(--brand); --tc: var(--brand); background: color-mix(in srgb, var(--tc) 9%, var(--card)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; padding: 1.3rem 1.5rem 1.4rem; }
.lead-card .type-icon { grid-row: 1 / span 5; grid-column: 1; }
.lead-card > :not(.type-icon) { grid-column: 2; }
.lead-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .7em; }
.lead-type { font-family: var(--display); font-weight: 600; color: var(--ink-soft); }
.lead-note { flex-basis: 100%; font-size: .9rem; color: var(--ink-soft); }
.lead-card h1 { font-size: clamp(1.45rem, 4.4vw, 2.1rem); margin: .35em 0 .25em; }
.lead-card p { font-size: 1.1rem; }
.lead-card .meta { font-size: 1rem; color: var(--ink-soft); margin-top: .4em; }
.btn-lead { display: inline-flex; align-items: center; gap: .4em; margin-top: .9rem; background: var(--tc-band); color: #fff; font-weight: 700; text-decoration: none; padding: .6em 1.1em; border-radius: 999px; min-height: 44px; }
.btn-lead:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .emergency-card { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1.15rem 1.25rem; }
  .emergency-card .type-icon { grid-row: auto; margin-bottom: .6rem; width: 52px; height: 52px; }
  .emergency-card > :not(.type-icon) { grid-column: 1; }
  .status-card { border-radius: 18px; }
  .lead-card { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1.15rem 1.25rem; }
  .lead-card .type-icon { grid-row: auto; margin-bottom: .6rem; width: 52px; height: 52px; }
  .lead-card > :not(.type-icon) { grid-column: 1; }
}

/* ---------- Front page layout ---------- */

.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "alerts side"; gap: 0 2rem; align-items: start; }
.dash-alerts { grid-area: alerts; min-width: 0; }
.dash-side { grid-area: side; margin-top: 1.8rem; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 640px) { .dash-side { margin-top: 1.1rem; } }
.dash-side .panel + .panel { margin-top: 0; }
.dash-side [data-live] { display: contents; }
@media (max-width: 900px) {
  .dash { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "alerts"; }
  .dash-side .weather-panel { display: none; }
  .dash-after { display: block !important; }
}
.dash-after { display: none; margin-top: 1.5rem; }
.join-panel h2 { font-size: 1.3rem; }
.join-panel .btn { width: 100%; }
.join-panel.is-on { background: var(--card); }

/* ---------- Alert cards ---------- */

.alert-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px;
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--tc, var(--pc, var(--brand)));
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow);
  color: inherit; position: relative;
}
.alert-card .card-link { color: inherit; text-decoration: none; }
.alert-card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.alert-card .card-link:focus-visible { outline: none; }
.alert-card .card-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.alert-card:hover { border-color: var(--line-strong); border-left-color: var(--tc, var(--pc)); }
.alert-card:hover h3 { text-decoration: underline; text-underline-offset: .15em; }
.alert-card + .alert-card { margin-top: .75rem; }
.alert-card .type-icon { grid-row: span 4; margin-top: 2px; }
.alert-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; margin-bottom: .3rem; }
.alert-card-type { color: var(--ink-soft); font-size: .9rem; }
.alert-card h3 { font-size: 1.2rem; margin: 0 0 .25rem; }
.alert-card p { margin: 0; }
.alert-card .meta { color: var(--ink-soft); font-size: .93rem; margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .2em 1em; }
.alert-card .meta span { display: inline-flex; align-items: center; gap: .3em; }
.lang-chips { display: inline-flex; gap: .3em; flex-wrap: wrap; }
.lang-chip { font-size: .78rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 .5em; color: var(--ink-soft); }
@media (max-width: 480px) {
  .alert-card { grid-template-columns: minmax(0, 1fr); }
  .alert-card .type-icon { grid-row: auto; display: none; }
}
.ended { margin-top: 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.ended summary { cursor: pointer; padding: .8rem 1.1rem; font-family: var(--display); font-weight: 600; }

/* ---------- Folds: one mark everywhere ---------- */

/* Every fold in VOICE, on the public sites and in Operations, shows the same mark: a
   plus while it is shut and a minus while it is open, in the brand color, after its words. A fold drawn as a box
   (Questions, Add Details in the Relay a Message box, the parts of the public relay form, Settings' sections,
   Recently Ended) has it at the box's right edge; a fold that is a line of words (What the Marks Mean, Attach Files,
   Charts) has it right after the words. The second content value gives the mark empty alternative text, so screen
   readers do not say "plus" or "minus" (they announce the fold as expanded or collapsed). Menus (Operations' phone
   Menu, the Settings menu on phones, the list of languages, the "Aa" button) are not folds of the page and keep
   their own look. Each fold is at least 24 pixels tall. */
details.mini > summary, .feed-types > summary, details.charts > summary, .bk-topic-more > summary, .bk-tr-edit > summary, .wiki-sec-edit > summary,
.ended > summary, .roles-explained > summary, .wiki-add-section > summary, .tr-lang > summary, .wiki-howto > summary, .types-left > summary, .restore-box > summary { list-style: none; cursor: pointer; }
details.mini > summary::-webkit-details-marker, .feed-types > summary::-webkit-details-marker, details.charts > summary::-webkit-details-marker,
.bk-topic-more > summary::-webkit-details-marker, .bk-tr-edit > summary::-webkit-details-marker, .wiki-sec-edit > summary::-webkit-details-marker, .ended > summary::-webkit-details-marker,
.roles-explained > summary::-webkit-details-marker, .wiki-add-section > summary::-webkit-details-marker, .tr-lang > summary::-webkit-details-marker, .wiki-howto > summary::-webkit-details-marker,
.types-left > summary::-webkit-details-marker, .restore-box > summary::-webkit-details-marker { display: none; }
details.mini > summary::after, .feed-types > summary::after, details.charts > summary::after, .bk-topic-more > summary::after, .bk-tr-edit > summary::after, .wiki-sec-edit > summary::after,
.ended > summary::after, .roles-explained > summary::after, .wiki-add-section > summary::after, .tr-lang > summary::after, .wiki-howto > summary::after, .types-left > summary::after, .restore-box > summary::after {
  content: "+"; content: "+" / ""; display: inline-block; flex: none; margin-left: .35em; font-family: var(--display); font-weight: 700; font-size: 1.25em; line-height: 1; color: var(--brand-deep); vertical-align: -.05em; }
details.mini[open] > summary::after, .feed-types[open] > summary::after, details.charts[open] > summary::after, .bk-topic-more[open] > summary::after, .bk-tr-edit[open] > summary::after, .wiki-sec-edit[open] > summary::after,
.ended[open] > summary::after, .roles-explained[open] > summary::after, .wiki-add-section[open] > summary::after, .tr-lang[open] > summary::after, .wiki-howto[open] > summary::after, .types-left[open] > summary::after, .restore-box[open] > summary::after {
  content: "\2212"; content: "\2212" / ""; }
details.mini > summary { min-height: 24px; padding-top: 2px; padding-bottom: 2px; }
/* The boxed ones: the words at the left, the mark at the right edge. */
.ended > summary, .roles-explained > summary, .wiki-add-section > summary, .wiki-howto > summary, .types-left > summary, .restore-box > summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.ended > summary::after, .roles-explained > summary::after, .wiki-add-section > summary::after, .tr-lang > summary::after, .wiki-howto > summary::after, .types-left > summary::after, .restore-box > summary::after { margin-left: auto; font-size: 1.45rem; font-weight: 400; }
.ended-row { padding: .65rem 1.1rem; border-top: 1px solid var(--line); }

/* ---------- Weather ---------- */

.weather-now { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.weather-temp { font-family: var(--display); font-size: 2.3rem; font-weight: 600; line-height: 1; }
.weather-periods { list-style: none; padding: 0; margin: 0 0 .8rem; }
.weather-periods li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.weather-periods li + li { margin-top: 0; }
.weather-periods .t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nws-warning { border-left: 4px solid var(--p-high); background: color-mix(in srgb, var(--p-high) 9%, var(--card)); padding: .5rem .75rem; border-radius: 4px; margin-bottom: .6rem; }
.nws-warning strong { display: block; }
/* Tonight and the Week Ahead (WeatherOutlook): the next hours in words, then a line for each day, its
   high and low together, and a Cold Night mark on a night at or below the site's Cold Night temperature. */
.weather-sum { margin: 0 0 .8rem; line-height: 1.5; }
.weather-sub { font-family: var(--font); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: .2rem 0 .3rem; }
.weather-week { list-style: none; padding: 0; margin: 0 0 .8rem; }
.weather-week li { display: grid; grid-template-columns: 3.1rem 1fr auto; gap: .2rem .6rem; align-items: baseline; padding: .45rem 0; border-top: 1px solid var(--line); }
.weather-week li + li { margin-top: 0; }
.weather-week .d { font-weight: 700; }
.weather-week .s { font-size: .86rem; color: var(--ink-soft); }
.weather-week .t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.weather-week .t b { font-weight: 700; }
.weather-cold { grid-column: 2 / 4; justify-self: start; display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; color: var(--p-normal); background: color-mix(in srgb, var(--p-normal) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--p-normal) 35%, var(--card)); border-radius: 999px; padding: .05rem .5rem; }
.weather-cold .ui-icon { width: 13px; height: 13px; }
.a11y-contrast .weather-cold { color: var(--ink); background: var(--card); border: 2px solid var(--ink); }
/* In dark mode the alert blue is too dark to read on the card, so the mark takes a light blue. */
@media (prefers-color-scheme: dark) { :root:not(.force-light):not(.a11y-contrast) .weather-cold { color: #9cc3ff; background: color-mix(in srgb, #9cc3ff 12%, var(--card)); border-color: color-mix(in srgb, #9cc3ff 40%, var(--card)); } }
/* Example words in a field are lighter than what a person types, yet readable in light and dark (the
   browser's own gray was too faint on the dark fields). */
::placeholder { color: var(--ink-faint); opacity: 1; }

/* ---------- Code check ---------- */

.lookup { display: flex; gap: .5rem; }
.lookup input { flex: 1; min-width: 0; text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
/* On Code Not Found, the box has its label above it. */
.lookup-labeled { flex-wrap: wrap; margin-bottom: 1rem; }
.lookup-labeled label { flex-basis: 100%; font-weight: 600; }

/* ---------- Forms ---------- */

label, .label { display: block; font-weight: 700; margin: 0 0 .3rem; }
.label-note { font-weight: 400; color: var(--ink-soft); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=number], input[type=search],
input[type=datetime-local], input[type=date], input[type=time], select, textarea {
  display: block; width: 100%; font: inherit; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--field-border); border-radius: var(--radius-sm);
  padding: .55em .7em; min-height: 44px;
}
textarea { min-height: 6em; resize: vertical; }
/* On an iPhone or iPad, Safari draws a date or time field taller than the others and centers its text, so beside a
   menu (the Day and Language on Print Today's Alerts) the two sat at different heights. There it is drawn as the other
   fields are, with its text at the left. */
@supports (-webkit-touch-callout: none) {
  input[type=datetime-local], input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; line-height: 1.5; }
  input[type=datetime-local]::-webkit-date-and-time-value, input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brand); outline: 3px solid var(--focus); outline-offset: 1px; }
/* A date or time field keeps its ring while focus is on its calendar button, which matches only :focus-within (WCAG 2.4.7).
   A separate rule, so a browser that does not know :focus-within still reads the first. */
input[type=datetime-local]:focus, input[type=date]:focus, input[type=time]:focus { border-color: var(--brand); outline: 3px solid var(--focus); outline-offset: 1px; }
input[type=datetime-local]:focus-within, input[type=date]:focus-within, input[type=time]:focus-within { border-color: var(--brand); outline: 3px solid var(--focus); outline-offset: 1px; }
/* A file field is a target as tall as the other fields, and never wider than its column (WCAG 2.5.8, 1.4.10). */
input[type=file] { max-width: 100%; min-height: 44px; }
input[type=color] { width: 52px; height: 44px; padding: 3px; border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }
.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }
.help { color: var(--ink-soft); font-size: .92rem; margin: .3rem 0 0; }
.err { color: var(--bad); font-weight: 700; font-size: .95rem; margin: .3rem 0 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin-bottom: .5rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: .17rem 0 0; flex: none; accent-color: var(--brand); }
.check strong { display: block; }
fieldset { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; margin: 0 0 1.2rem; background: var(--card); }
legend { font-family: var(--display); font-weight: 600; font-size: 1.1rem; padding: 0 .4rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.counter { float: right; font-weight: 400; font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.counter.over-soft { color: var(--warn); }
.counter.over { color: var(--bad); font-weight: 700; }
.input-row { display: flex; gap: .5rem; align-items: center; }
.input-row > input, .input-row > select { flex: 1; min-width: 0; }

/* ---------- Messages ---------- */

.flash { border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.flash ul { margin: 0; }
.flash-ok { background: color-mix(in srgb, var(--ok) 10%, var(--card)); border-color: color-mix(in srgb, var(--ok) 40%, var(--card)); }
.flash-info { background: var(--brand-tint); border-color: var(--brand-line); }
.flash-error { background: color-mix(in srgb, var(--bad) 9%, var(--card)); border-color: color-mix(in srgb, var(--bad) 40%, var(--card)); }
.flash-warn { background: color-mix(in srgb, var(--warn) 10%, var(--card)); border-color: color-mix(in srgb, var(--warn) 40%, var(--card)); }
.callout { border-left: 4px solid var(--brand); background: var(--brand-tint); padding: .75rem 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 0 1rem; }
.callout > :last-child { margin-bottom: 0; }
.callout-warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--card)); }
.callout-bad { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--card)); }

/* ---------- Tabs ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1.5px solid var(--line); margin: 0 0 1rem; }
.tab {
  font: inherit; font-family: var(--display); font-weight: 600; font-size: 1rem;
  color: var(--ink-soft); background: none; border: 0; border-bottom: 3px solid transparent;
  padding: .55em .9em .5em; margin-bottom: -1.5px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--brand-deep); border-bottom-color: var(--brand); }
.tab .count { font-size: .8rem; background: var(--sunk); border-radius: 999px; padding: 0 .5em; color: var(--ink-soft); }
.tab[aria-selected="true"] .count, .tab[aria-current="page"] .count { background: var(--brand-tint); color: var(--brand-deep); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 2px; background: var(--card); }
.seg button, .seg a { font: inherit; font-weight: 700; font-size: .92rem; border: 0; background: none; color: var(--ink-soft); padding: .35em .95em; border-radius: 999px; cursor: pointer; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; gap: .35em; }
.seg [aria-selected="true"], .seg [aria-current="page"], .seg [aria-pressed="true"] { background: var(--brand); color: #fff; }

/* ---------- Tables ---------- */

.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } /* relative: hidden labels inside stay within its scrolling */
.table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.table th, .table td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
/* The page breaks long words anywhere (body); in a table that lets a column narrow to a few letters
   ("Octob er"), so cells break only a word too long for the whole table, which scrolls in .table-wrap. */
.table td { overflow-wrap: break-word; }
.table th { font-family: var(--display); font-weight: 600; color: var(--ink-soft); background: var(--sunk); font-size: .92rem; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.2rem; margin: 0 0 1rem; }
dl.facts dt { font-weight: 700; color: var(--ink-soft); }
dl.facts dd { margin: 0; }
@media (max-width: 520px) { dl.facts { grid-template-columns: minmax(0, 1fr); gap: .1rem; } dl.facts dd { margin-bottom: .5rem; } }

/* ---------- Single alert page ---------- */

.alert-page { padding-top: 1.4rem; padding-bottom: 1rem; }
.alert-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; align-items: start; margin-bottom: 1rem; }
.alert-hero .type-icon { margin-top: .2rem; }
.alert-hero-top { display: flex; flex-wrap: wrap; gap: .4em .7em; align-items: center; margin-bottom: .45rem; }
.alert-hero h1 { margin: 0 0 .35rem; }
.alert-message { font-size: 1.2rem; line-height: 1.5; }
@media (max-width: 520px) { .alert-hero { grid-template-columns: minmax(0, 1fr); } .alert-hero .type-icon { margin-bottom: .6rem; } }
.lang-switch { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.lang-switch .label { margin: 0; font-weight: 400; color: var(--ink-soft); display: inline-flex; gap: .35em; align-items: center; }
.translation-note { display: flex; gap: .5em; align-items: flex-start; font-size: .93rem; color: var(--ink-soft); background: var(--sunk); border-radius: var(--radius-sm); padding: .55rem .8rem; margin: 0 0 1rem; }
.translation-note.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--card)); }
/* Ended, canceled, and replaced alerts: a plain notice above, and a tag beside the title. */
.state-banner { display: flex; gap: .75rem; align-items: flex-start; border-radius: var(--radius-sm); padding: .85rem 1rem; margin: 0 0 1.1rem; background: var(--sunk); border: 1px solid var(--line-strong); border-left: 6px solid var(--ink-soft); }
.state-banner p { margin: 0 0 .5rem; }
.state-banner p:last-child { margin-bottom: 0; }
.state-banner .state-icon { width: 1.6em; height: 1.6em; flex: none; margin-top: .05em; color: var(--ink-soft); }
.state-banner.past-canceled { background: color-mix(in srgb, var(--bad) 8%, var(--card)); border-color: color-mix(in srgb, var(--bad) 35%, var(--card)); border-left-color: var(--bad); }
.state-banner.past-canceled .state-icon { color: var(--bad); }
.state-banner.past-corrected { border-left-color: var(--brand-deep); }
.state-banner.past-corrected .state-icon { color: var(--brand-deep); }
.state-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.past-tag { display: inline-flex; align-items: center; gap: .35em; font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; padding: .2em .7em; border-radius: 999px; border: 2px solid currentColor; color: var(--ink-soft); background: var(--card); white-space: nowrap; }
.past-tag .ui-icon { width: 1.1em; height: 1.1em; }
.past-tag.past-canceled { color: var(--bad); }
.past-tag.past-corrected { color: var(--brand-deep); }
.is-past .alert-hero .type-icon { filter: grayscale(1); opacity: .7; }
.ended-row .past-tag { font-size: .75rem; margin-right: .4em; vertical-align: .1em; }
.alert-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.2rem; }
.speak-status { font-size: .92rem; color: var(--ink-soft); margin: -.6rem 0 1rem; }
.facts-panel { margin-bottom: 1.4rem; }
.facts-panel dl.facts { margin: 0; }
.map-btn { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; margin-top: .25rem; white-space: nowrap; }
.details { font-size: 1.07rem; }
.details h3, .details h4 { margin-top: 1.1em; }
.details h3:first-child, .details h4:first-child { margin-top: 0; }
.credits { color: var(--ink-soft); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .2em 1.4em; margin: 1.2rem 0 .4rem; }
.credits span { display: inline-flex; align-items: center; gap: .35em; }
.verify { font-size: .92rem; border-radius: var(--radius-sm); padding: .6rem .8rem; margin: 1rem 0 0; background: var(--sunk); color: var(--ink-soft); display: flex; gap: .5em; align-items: flex-start; }
.verify.ok { background: color-mix(in srgb, var(--ok) 9%, var(--card)); color: var(--ok); }
.verify.bad { background: color-mix(in srgb, var(--bad) 9%, var(--card)); color: var(--bad); }
.verify.warn { background: color-mix(in srgb, var(--warn) 11%, var(--card)); color: var(--warn); }

/* ---------- Questions page ---------- */

.faq-list { margin-top: 1.2rem; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .7rem; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-family: var(--display); font-weight: 600; font-size: 1.15rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
/* The second content line gives the mark empty alternative text, so screen readers do not say "plus" or "minus"; older browsers ignore it and keep the first. */
.faq-item summary::after { content: "+"; content: "+" / ""; font-size: 1.5rem; line-height: 1; color: var(--brand-deep); flex: none; }
.faq-item[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq-answer { padding: 0 1.2rem 1rem; }
.faq-answer > :last-child { margin-bottom: 0; }
.org-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .6rem; }
.org-list li { border-left: 3px solid var(--brand); padding: .2rem 0 .2rem .8rem; }
.org-list li + li { margin-top: 0; }
.org-list span { display: block; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Sign-up page ---------- */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1rem; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1rem 3rem; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-line); }
.steps > li + li { margin-top: 0; }
.join-state { font-size: 1.05rem; }
.join-state.ok { color: var(--ok); }
.topic-list .check { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .45rem; }
.topic-list .check:has(input:checked) { border-color: var(--brand-line); background: var(--brand-tint); }
.topic-list .check.locked { background: var(--sunk); cursor: default; }

/* ---------- Printing ---------- */

/* Shown by the service worker on a page saved for times without signal. */
.offline-note { background: var(--p-high); color: #fff; font-weight: 700; text-align: center; padding: .55rem 1rem; }
.print-only { display: none !important; }
.print-qr { width: 112px; height: 112px; flex: none; }
.print-qr svg { width: 100%; height: 100%; display: block; }
.print-foot { display: none; }
.print-qr:empty { display: none; }

/* A day's alerts on one sheet (print.php). */
.day-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .9rem 1rem; }
.day-controls .field { margin: 0; }
/* The Day and the Language side by side, at the same height, so their labels line up too. */
.day-controls .field :is(input, select) { height: 3rem; }
.day-controls .help { flex-basis: 100%; margin: 0; }
.day-group { font-size: 1.15rem; margin: 1.4rem 0 .6rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.day-alert { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--tc, var(--brand)); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .9rem; break-inside: avoid; }
.day-alert.is-past { opacity: 1; }
.day-alert-head { display: flex; gap: .9rem; align-items: flex-start; }
.day-alert-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; margin: 0; }
.day-alert h3 { font-size: 1.3rem; margin: .3em 0 .15em; }
.day-alert-message { margin: 0 0 .6rem; font-size: 1.05rem; }
.day-status { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; border: 1.5px solid currentColor; border-radius: 999px; padding: .05em .6em; }
.day-cancel { font-weight: 700; color: var(--bad); margin: 0 0 .5rem; }
.day-alert .facts { margin: .4rem 0 .6rem; }
.day-alert .details { font-size: .98rem; }
.day-alert-foot { font-size: .88rem; color: var(--ink-soft); margin: .4rem 0 0; }

@media print {
  @page { margin: 14mm 12mm; }
  /* On paper the header is the same as the shared printed header (print_head.php): the logo at 64 pixels with
     the site's title beside it and a thin black cord, without the strip, the links, the buttons, or the time. */
  .site-head nav, .clock, .site-foot, .alert-tools, .lang-switch, .no-print, .join-panel, .map-btn, .cord-drop,
  .util-strip, .a11y-bar, .a11y-fold, .brand-end, .vs-menu-btn, .skip, .lookup { display: none !important; }
  .head-panel, .head-band { display: none !important; }
  .brand-head .brand-sign { box-shadow: none; border-color: #000; background: none; }
  .brand-head.sign-plain .brand-sign { border-color: transparent; }
  /* The Alerts front page's Check an Alert Code part is a form to use on screen: on paper it is left out whole. */
  section[aria-labelledby="h-check"] { display: none !important; }
  /* A page with a printed sheet (print_head.php) prints the sheet's own header instead of the site's. */
  .has-print-sheet .site-head, .has-print-sheet .skip { display: none !important; }
  .brand-head { --logo: 64px !important; --bleed: 0px; overflow: visible; }
  .brand-head .head-row { padding: 0 0 .3rem; }
  .brand-head > .cord { color: #000; height: 14px; }
  /* The coils centred under the 64 pixel logo at the paper's left edge (the coils' middle is 50 pixels into the
     drawing), as on every printed sheet (print.css). The title is black on paper, as on the sheets. */
  .brand-head > .cord .cord-path { stroke-width: 1.4; transform: translateX(-18px) translateY(-3px); }
  .brand-head .brand-word { color: #000; }
  .brand-head .wrap { padding-left: 0; padding-right: 0; }
  body { background: #fff; color: #000; }
  .panel, .alert-card, .day-alert { box-shadow: none; }
  .print-only { display: revert !important; }
  .print-foot { display: flex !important; gap: 1rem; align-items: center; margin-top: 1.2rem; padding-top: .9rem; border-top: 1.5px solid #000; break-inside: avoid; }
  .print-foot p { margin: 0 0 .25rem; }
  /* Keep the alert's colors: icons, priority tags, the Emergency tag. */
  .type-icon, .pill, .tag-emergency, .day-alert { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .alert-page .verify { display: none; }
  a { color: #000; }
  .details a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .day-alert.is-past { opacity: 1; }
  /* Fit more alerts on each sheet. */
  .day-sheet { font-size: .86rem; }
  .day-alert { padding: .7rem .9rem; margin-bottom: .6rem; }
  .day-alert h3 { font-size: 1.15rem; }
  .day-alert .facts { gap: .2rem 1rem; }
  .day-group { break-after: avoid; }
  .print-qr:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Page headings ---------- */

.page-head { padding: 1.6rem 0 .6rem; }
.page-head p { font-size: 1.1rem; color: var(--ink-soft); max-width: 46em; }
.faq-controls { margin: -.2rem 0 -.4rem; }

/* ---------- Sign-up states ---------- */

.state-card { margin: 0 0 1rem; }
.phone-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; }
.phone-pick-label { font-family: var(--display); font-weight: 600; }
.phone-pick .seg .ui-icon { width: 1em; height: 1em; }
.phone-pick-note { flex-basis: 100%; }
.state-card .pill { margin-bottom: .5rem; }
.state-title { font-size: 1.35rem; }
.state-on { border-color: color-mix(in srgb, var(--ok) 40%, var(--card)); }
.state-blocked { border-color: color-mix(in srgb, var(--bad) 40%, var(--card)); }
/* A picture of the browser's question (join.php), drawn flat and gray with its answers as plain words, so that
   nobody takes it for the actual question and taps it; the actual Turn On Alerts button comes before it. */
.prompt-label { margin: 1rem 0 0; }
.prompt-picture { max-width: 280px; margin: .3rem 0 1rem; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--sunk); color: var(--ink-soft); font-family: system-ui, sans-serif; font-size: .85rem; cursor: default; user-select: none; }
.prompt-picture .q { padding: .6rem .8rem .3rem; }
.prompt-picture .opts { display: flex; justify-content: flex-end; gap: 1.4rem; padding: .2rem .8rem .6rem; }
.prompt-picture .opts span { padding: 0; }
.prompt-picture .allow { font-weight: 700; }

/* ---------- Feeds page ---------- */
.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.feed-row { display: flex; flex-direction: column; gap: .35rem; }
.feed-row .input-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.feed-row input { flex: 1 1 240px; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.feed-types { margin-top: .9rem; }
.feed-types summary { cursor: pointer; font-family: var(--display); font-weight: 600; }
.feed-types .feed-list { margin-top: .8rem; }
.page-feeds .seg { margin-top: .4rem; }

/* Keyboard focus on the colored alert cards, and in the header's alert box, where the usual blue ring
   would not show against the type's color. */
.emergency-card :focus-visible, .lead-card :focus-visible, .hp-alerts .hp-row :focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #000; }

/* Windows high contrast and other forced-color modes: keep selected and current items visible. */
@media (forced-colors: active) {
  .seg [aria-selected="true"], .seg [aria-current="page"], .seg [aria-pressed="true"],
  nav a[aria-current="page"], .tabs [aria-current="page"], [aria-current="location"] { outline: 2px solid Highlight; outline-offset: 1px; }
  .btn-oncolor, .btn-lead, .btn, .past-tag, .pill { border: 1px solid ButtonText; }
  mark { forced-color-adjust: none; background: Mark; color: MarkText; }
}
.speak-status:empty { display: block; margin: 0; }

/* Get Alerts on a computer (FreeSource's design): the title and introduction across the top; Troubleshooting,
   the center box with the steps for this computer, and, on the right, Verifying an Alert with Turning
   Alerts Off under it, the three columns of one height while Troubleshooting is closed (the right column's spare
   room, if any, falls below Turning Alerts Off, so the two never drift apart when a fold opens); Preferences, once alerts are on, and Privacy across the bottom, Privacy in two columns of whole
   paragraphs. A phone or a narrow window keeps the single column, as does Larger Text below 1600 pixels, where three
   columns would be too narrow for the larger words. Preferences sit outside the live steps here, so choosing
   another phone's steps hides them too (join.js). */
.pick-other { display: none !important; }
@media (min-width: 1200px) {
  html:not(.a11y-large) .page-join main[data-join] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); grid-template-areas: "head head head" "help act side" "help act off" "prefs prefs prefs" "foot foot foot"; grid-template-rows: auto auto 1fr auto auto; gap: 1.5rem; align-items: stretch; padding-bottom: 2rem; }
  html:not(.a11y-large) .page-join main[data-join] > * { max-width: none; margin: 0; }
  html:not(.a11y-large) .page-join main[data-join] > .page-head { grid-area: head; padding-bottom: 0; }
  html:not(.a11y-large) .page-join main[data-join] > .page-head p { max-width: none; font-size: 1.24rem; line-height: 1.5; color: var(--ink); margin-bottom: 0; }
  html:not(.a11y-large) .page-join main[data-join] > .join-act { grid-area: act; display: flex; flex-direction: column; justify-content: flex-start; background: var(--card); border: 2px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
  html:not(.a11y-large) .page-join main[data-join] > .faq-list { grid-area: help; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
  html:not(.a11y-large) .page-join main[data-join] > #check { grid-area: side; padding: 1.3rem 1.4rem; }
  html:not(.a11y-large) .page-join main[data-join] > #turn-off { grid-area: off; align-self: start; padding: 1.3rem 1.4rem; }
  html:not(.a11y-large) .page-join main[data-join] > [data-prefs] { grid-area: prefs; padding: 1.3rem 1.4rem; }
  html:not(.a11y-large) .page-join main[data-join]:has(> [data-prefs]:is(.hidden, .pick-other)) { grid-template-areas: "head head head" "help act side" "help act off" "foot foot foot"; grid-template-rows: auto auto 1fr auto; }
  html:not(.a11y-large) .page-join main[data-join] > #privacy { grid-area: foot; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; grid-template-rows: auto auto auto 1fr; align-content: start; padding: 1.3rem 1.4rem; }
  html:not(.a11y-large) .page-join main[data-join] h2, html:not(.a11y-large) .page-join main[data-join] .state-title { font-size: 1.3rem; margin: 0 0 .9rem; }
  html:not(.a11y-large) .page-join main[data-join] p, html:not(.a11y-large) .page-join main[data-join] li { text-wrap: pretty; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .phone-pick { display: block; margin: 0 0 1.2rem; }
  html:not(.a11y-large) .page-join main[data-join] .join-act > [data-live-area] { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .phone-pick-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .seg { display: flex; flex-wrap: nowrap; width: 100%; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .seg button { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding: .35em .7em; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .phone-pick-note { display: block; text-align: center; margin-top: .5rem; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .phone-pick-note:empty { display: none; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .state-card { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
  html:not(.a11y-large) .page-join main[data-join] .join-act :is([data-state="ready"], [data-state="on"], [data-state="checking"], [data-state="working"]) { text-align: center; }
  html:not(.a11y-large) .page-join main[data-join] .join-act :is([data-state="ready"], [data-state="on"], [data-state="checking"], [data-state="working"]) p { text-wrap: balance; }
  html:not(.a11y-large) .page-join main[data-join] .join-act :is([data-state="ready"], [data-state="on"]) .btn-row { justify-content: center; }
  html:not(.a11y-large) .page-join main[data-join] .join-act [data-state="ready"] .btn-row .btn { width: 100%; justify-content: center; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .prompt-label { margin-top: 1.1rem; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .prompt-picture { max-width: none; width: 100%; box-sizing: border-box; padding: 0; margin: .4rem 0 1rem; pointer-events: none; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .prompt-picture .q { padding: .8rem 1rem; text-align: center; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .prompt-picture .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border-top: 1px solid var(--line-strong); }
  html:not(.a11y-large) .page-join main[data-join] .join-act .prompt-picture .opts span { display: block; text-align: center; padding: .6rem .5rem; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .prompt-picture .opts span + span { border-left: 1px solid var(--line-strong); }
  html:not(.a11y-large) .page-join main[data-join] .join-act .join-state { text-align: center; margin: 0; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .join-state:empty { display: none; }
  html:not(.a11y-large) .page-join main[data-join] .join-act .state-card > :last-child, html:not(.a11y-large) .page-join main[data-join] .faq-list > :last-child, html:not(.a11y-large) .page-join main[data-join] #check > :last-child, html:not(.a11y-large) .page-join main[data-join] #check li:last-child, html:not(.a11y-large) .page-join main[data-join] [data-prefs] > :last-child { margin-bottom: 0; }
  html:not(.a11y-large) .page-join main[data-join] .faq-list .faq-item { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; box-shadow: none; }
  html:not(.a11y-large) .page-join main[data-join] .faq-list .faq-item:last-of-type { border-bottom: 1px solid var(--line); }
  html:not(.a11y-large) .page-join main[data-join] .faq-list .faq-item summary { padding: .85rem 0; font-size: 1.05rem; }
  html:not(.a11y-large) .page-join main[data-join] .faq-list > p { margin: 1rem 0 0; }
  html:not(.a11y-large) .page-join main[data-join]:not(:has(.faq-list details[open])) .faq-list .faq-item { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  html:not(.a11y-large) .page-join main[data-join]:has(.faq-list details[open]) { align-items: start; }
  html:not(.a11y-large) .page-join main[data-join] [data-prefs] .topic-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
  html:not(.a11y-large) .page-join main[data-join] [data-prefs] .topic-choices .check { margin: 0; }
  html:not(.a11y-large) .page-join main[data-join] [data-prefs] .field { max-width: 42rem; }
  html:not(.a11y-large) .page-join main[data-join] #privacy > h2 { grid-column: 1 / -1; }
  html:not(.a11y-large) .page-join main[data-join] #privacy > p { margin: 0 0 1rem; }
  html:not(.a11y-large) .page-join main[data-join] #privacy > p:nth-of-type(1) { grid-column: 1; grid-row: 2 / span 3; }
  html:not(.a11y-large) .page-join main[data-join] #privacy > p:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  html:not(.a11y-large) .page-join main[data-join] #privacy > p:nth-of-type(3) { grid-column: 2; grid-row: 3; font-size: inherit; }
  html:not(.a11y-large) .page-join main[data-join] #privacy > details { grid-column: 2; grid-row: 4; align-self: start; background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: .4rem 0 0; }
  html:not(.a11y-large) .page-join main[data-join] #privacy > details summary { padding: .85rem 0; font-size: 1.05rem; }
}
@media (min-width: 1600px) {
  html.a11y-large .page-join main[data-join] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); grid-template-areas: "head head head" "help act side" "help act off" "prefs prefs prefs" "foot foot foot"; grid-template-rows: auto auto 1fr auto auto; gap: 1.5rem; align-items: stretch; padding-bottom: 2rem; }
  html.a11y-large .page-join main[data-join] > * { max-width: none; margin: 0; }
  html.a11y-large .page-join main[data-join] > .page-head { grid-area: head; padding-bottom: 0; }
  html.a11y-large .page-join main[data-join] > .page-head p { max-width: none; font-size: 1.24rem; line-height: 1.5; color: var(--ink); margin-bottom: 0; }
  html.a11y-large .page-join main[data-join] > .join-act { grid-area: act; display: flex; flex-direction: column; justify-content: flex-start; background: var(--card); border: 2px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
  html.a11y-large .page-join main[data-join] > .faq-list { grid-area: help; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
  html.a11y-large .page-join main[data-join] > #check { grid-area: side; padding: 1.3rem 1.4rem; }
  html.a11y-large .page-join main[data-join] > #turn-off { grid-area: off; align-self: start; padding: 1.3rem 1.4rem; }
  html.a11y-large .page-join main[data-join] > [data-prefs] { grid-area: prefs; padding: 1.3rem 1.4rem; }
  html.a11y-large .page-join main[data-join]:has(> [data-prefs]:is(.hidden, .pick-other)) { grid-template-areas: "head head head" "help act side" "help act off" "foot foot foot"; grid-template-rows: auto auto 1fr auto; }
  html.a11y-large .page-join main[data-join] > #privacy { grid-area: foot; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; grid-template-rows: auto auto auto 1fr; align-content: start; padding: 1.3rem 1.4rem; }
  html.a11y-large .page-join main[data-join] h2, html.a11y-large .page-join main[data-join] .state-title { font-size: 1.3rem; margin: 0 0 .9rem; }
  html.a11y-large .page-join main[data-join] p, html.a11y-large .page-join main[data-join] li { text-wrap: pretty; }
  html.a11y-large .page-join main[data-join] .join-act .phone-pick { display: block; margin: 0 0 1.2rem; }
  html.a11y-large .page-join main[data-join] .join-act > [data-live-area] { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  html.a11y-large .page-join main[data-join] .join-act .phone-pick-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.a11y-large .page-join main[data-join] .join-act .seg { display: flex; flex-wrap: nowrap; width: 100%; }
  html.a11y-large .page-join main[data-join] .join-act .seg button { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding: .35em .7em; }
  html.a11y-large .page-join main[data-join] .join-act .phone-pick-note { display: block; text-align: center; margin-top: .5rem; }
  html.a11y-large .page-join main[data-join] .join-act .phone-pick-note:empty { display: none; }
  html.a11y-large .page-join main[data-join] .join-act .state-card { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
  html.a11y-large .page-join main[data-join] .join-act :is([data-state="ready"], [data-state="on"], [data-state="checking"], [data-state="working"]) { text-align: center; }
  html.a11y-large .page-join main[data-join] .join-act :is([data-state="ready"], [data-state="on"], [data-state="checking"], [data-state="working"]) p { text-wrap: balance; }
  html.a11y-large .page-join main[data-join] .join-act :is([data-state="ready"], [data-state="on"]) .btn-row { justify-content: center; }
  html.a11y-large .page-join main[data-join] .join-act [data-state="ready"] .btn-row .btn { width: 100%; justify-content: center; }
  html.a11y-large .page-join main[data-join] .join-act .prompt-label { margin-top: 1.1rem; }
  html.a11y-large .page-join main[data-join] .join-act .prompt-picture { max-width: none; width: 100%; box-sizing: border-box; padding: 0; margin: .4rem 0 1rem; pointer-events: none; }
  html.a11y-large .page-join main[data-join] .join-act .prompt-picture .q { padding: .8rem 1rem; text-align: center; }
  html.a11y-large .page-join main[data-join] .join-act .prompt-picture .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border-top: 1px solid var(--line-strong); }
  html.a11y-large .page-join main[data-join] .join-act .prompt-picture .opts span { display: block; text-align: center; padding: .6rem .5rem; }
  html.a11y-large .page-join main[data-join] .join-act .prompt-picture .opts span + span { border-left: 1px solid var(--line-strong); }
  html.a11y-large .page-join main[data-join] .join-act .join-state { text-align: center; margin: 0; }
  html.a11y-large .page-join main[data-join] .join-act .join-state:empty { display: none; }
  html.a11y-large .page-join main[data-join] .join-act .state-card > :last-child, html.a11y-large .page-join main[data-join] .faq-list > :last-child, html.a11y-large .page-join main[data-join] #check > :last-child, html.a11y-large .page-join main[data-join] #check li:last-child, html.a11y-large .page-join main[data-join] [data-prefs] > :last-child { margin-bottom: 0; }
  html.a11y-large .page-join main[data-join] .faq-list .faq-item { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; box-shadow: none; }
  html.a11y-large .page-join main[data-join] .faq-list .faq-item:last-of-type { border-bottom: 1px solid var(--line); }
  html.a11y-large .page-join main[data-join] .faq-list .faq-item summary { padding: .85rem 0; font-size: 1.05rem; }
  html.a11y-large .page-join main[data-join] .faq-list > p { margin: 1rem 0 0; }
  html.a11y-large .page-join main[data-join]:not(:has(.faq-list details[open])) .faq-list .faq-item { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  html.a11y-large .page-join main[data-join]:has(.faq-list details[open]) { align-items: start; }
  html.a11y-large .page-join main[data-join] [data-prefs] .topic-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
  html.a11y-large .page-join main[data-join] [data-prefs] .topic-choices .check { margin: 0; }
  html.a11y-large .page-join main[data-join] [data-prefs] .field { max-width: 42rem; }
  html.a11y-large .page-join main[data-join] #privacy > h2 { grid-column: 1 / -1; }
  html.a11y-large .page-join main[data-join] #privacy > p { margin: 0 0 1rem; }
  html.a11y-large .page-join main[data-join] #privacy > p:nth-of-type(1) { grid-column: 1; grid-row: 2 / span 3; }
  html.a11y-large .page-join main[data-join] #privacy > p:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  html.a11y-large .page-join main[data-join] #privacy > p:nth-of-type(3) { grid-column: 2; grid-row: 3; font-size: inherit; }
  html.a11y-large .page-join main[data-join] #privacy > details { grid-column: 2; grid-row: 4; align-self: start; background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: .4rem 0 0; }
  html.a11y-large .page-join main[data-join] #privacy > details summary { padding: .85rem 0; font-size: 1.05rem; }
}