/* The phone sheet (review of 2026-10-27, R1, step 3b): the server's own regions, each marked with the
   view of the sheet it is, shown one at a time over the page's foot. Script sets which on main and
   places the sheet's header at the top of it; nothing else moves. */
body[data-st-page] .masthead { position:relative;top:auto; }
.st-mobile-sheet[hidden] { display:none!important; }
.st-more-phone { display:none; }
@media(max-width:767px) {
  body[data-st-mobile=yes] .masthead .shell-inner { padding-block:6px;gap:8px; }
  .st-site-menu { margin-left:auto; }
  /* The site's links in two columns inside the shell (critique of 2026-11-02): as one row they were 481px wide and
     widened a 390px page to 499px, pushing the sheet's buttons and the tab bar off the screen. */
  .st-site-menu-content { flex-basis:100%;min-width:0;max-width:100%;display:grid;gap:8px; }
  .masthead .st-site-menu-content nav { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;width:100%;min-width:0;margin:0;overflow:visible; }
  .masthead .st-site-menu-content nav a { min-width:0;overflow-wrap:anywhere; }
  .st-site-menu-content[hidden] { display:none; }
  .st-site-menu-content :is(nav,.masthead-tools) { margin:0; }
  .st-site-menu-content nav a { min-height:44px;display:inline-flex;align-items:center; }
  body[data-st-mobile=yes] .sm-pagehead .pagehead-kicker { margin-bottom:2px; }
  body[data-st-mobile=yes] .st { padding-top:8px; }
  /* Every emergency stays in the app bar behind the workspace's pill; its list opens under it. */
  main[data-st-mobile=yes] .st-urgent:has(>.st-urgent-toggle:not([hidden]))>:is(strong,h2,p) { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
  main[data-st-mobile=yes] .st-urgent[data-wb-open=no] ul { display:none; }
  /* The map's picture is one segmented control across the row, each part at least 44px, and Fit area and Layers are
     icons beside it, their words kept for screen readers: "Off" had been 33px and touched Fit area. North gives way to
     the zoom once the map is live (critique of 2026-11-02, fifth run). */
  main[data-st-mobile=yes] .st-map-zone-picture>.st-map-toolbar { display:flex;flex-wrap:nowrap;gap:0;min-width:0; }
  main[data-st-mobile=yes] .st-map-zone-picture>.st-map-toolbar>[data-st-imagery] { flex:1 1 auto;min-width:44px;margin:0;padding-inline:4px;border-radius:0; }
  main[data-st-mobile=yes] .st-map-zone-picture>.st-map-toolbar>[data-st-imagery]+[data-st-imagery] { border-left-width:0; }
  main[data-st-mobile=yes] .st-map-zone-picture>.st-map-toolbar>[data-st-imagery]:first-child { border-radius:7px 0 0 7px; }
  main[data-st-mobile=yes] .st-map-zone-picture>.st-map-toolbar>[data-st-imagery=none] { border-radius:0 7px 7px 0; }
  main[data-st-mobile=yes] .st-map-zone-tools { gap:6px; }
  main[data-st-mobile=yes] .st-map-zone-tools .st-tool { min-width:44px;padding:0 10px; }
  main[data-st-mobile=yes] .st-map-zone-tools .st-tool-icon { display:block; }
  main[data-st-mobile=yes] .st-map-zone-tools .st-tool-word { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
  main[data-st-mobile=yes] .st-severe-map.is-live .st-map-north { display:none; }
  /* A row's places and time left read at the phone's reading size, not the micro role. */
  main[data-st-mobile=yes] :is(.st-row-places,.st-row-left) { font-size:var(--fs-small); }
  /* The sheet's title names what Details shows; the inspector's own "Details" is kept for screen readers. */
  main[data-st-mobile=yes] #st-inspector-h { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
  /* The sheet's header names the view and carries Area brief; the inspector's own band is not repeated under it. */
  main[data-st-mobile=yes] #st-inspector.st-severe-inspector>.st-pane-heading { display:none; }
  main[data-st-mobile=yes] .st-urgent:has(>.st-urgent-toggle:not([hidden])) { padding:0;border:0;background:none;margin:4px 0 0; }
  main[data-st-mobile=yes] .st-urgent-toggle { min-height:44px;font-size:var(--fs-small); }
  /* The pill's list opens over the page, as on a desktop (critique of 2026-11-02): inline, it pushed the map down. */
  main[data-st-mobile=yes] .st-urgent { position:relative; }
  main[data-st-mobile=yes] .st-urgent[data-wb-open=yes] ul { position:absolute;top:calc(100% + 6px);left:0;z-index:30;box-sizing:border-box;width:min(366px,calc(100vw - 60px));margin:0;padding:6px 10px;border:1px solid var(--st-line);border-radius:8px;background:var(--st-panel);box-shadow:0 10px 30px #0003; }
  /* The app bar in two lines over the map: the count, its check and the emergencies; then this
     device's clock, Follow, Share and More, where Weather Operations Mode is on a phone. */
  main[data-st-mobile=yes] .st-severe-summary { display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:2px 0 0; }
  main[data-st-mobile=yes] .st-severe-summary>p { margin:0; }
  main[data-st-mobile=yes] .st-severe-summary .st-urgent { flex-basis:auto; }
  main[data-st-mobile=yes] .st-severe-summary .st-urgent[data-wb-open=yes] { flex-basis:auto; }
  /* The list opens under the summary's whole row, inside the screen: anchored at the pill, which now sits at the head's
     right, it had run to x=544 on a 390px phone and widened the page (critique of 2026-11-03, fourteenth run). */
  main[data-st-mobile=yes] .st-severe-summary { position:relative; }
  main[data-st-mobile=yes] .st-severe-summary .st-urgent { position:static; }
  main[data-st-mobile=yes] .st-severe-summary .st-urgent[data-wb-open=yes] ul { left:0;right:0;width:auto; }
  /* This device's clock, Share and Weather Operations Mode are in More on a phone (critique of
     2026-11-01), so the area's app bar is the title, then the count and its pill beside More. */
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead .shell-inner { display:flex;flex-wrap:wrap;align-items:center;column-gap:8px; }
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead :is(.pagehead-titles) { flex-basis:100%; }
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead .st-severe-summary { flex:1;min-width:0; }
  main[data-st-mobile=yes] .st-workbench-heading :is(.pagehead-aux,.st-actions) { display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 0; }
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead .pagehead-aux { flex:none;width:auto;margin:0; }
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead .shell-inner { position:relative; }
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead .pagehead-aux { position:static; }
  main[data-st-mobile=yes] .st-workbench-heading .st-actions { width:100%; }
  /* The head gives its height to the map (critique of 2026-11-03, tenth run: ~400px of head over ~85px of map on a
     town's page): More beside the title, and the alert count left to the Alerts tab, which says it too. */
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead .pagehead-aux { position:absolute;top:0;right:0; }
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead .pagehead-titles>:not(.st-head-verdict) { padding-right:72px; }
  main[data-st-mobile=yes] .st-workbench-heading .st-severe-summary>p:first-child { display:none; }
  /* A place inside or beside an emergency says so in its head, with NWS's words; Peek does not say it again over the map.
     The pill still counts every emergency in the area. */
  main[data-st-mobile=yes][data-st-sheet=peek]:has(.st-head-verdict[data-level=emergency]) .st-sheet-emergency { display:none; }
  /* In an outage the banner says it once above the map: the head's check line and Peek's note had said it twice more,
     leaving a town's page about 70px of map. At Half or Full the sheet covers the banner and keeps its note. */
  main[data-st-mobile=yes]:has([data-st-outage]) .st-workbench-heading [data-st-summary-check] { display:none; }
  /* A place page gives its map the rows its head repeated (critique of 2026-11-04, fifteenth run, by the owner's choice):
     the check rides the kicker line, a pill counting the one emergency the verdict names folds into the verdict, and the
     map's chip keeps its plain word. A pill counting more than the verdict names stays. In an outage the banner says
     the check, as before. */
  main[data-st-mobile=yes] .st-kicker-check { display:inline; }
  main[data-st-mobile=yes]:has([data-st-outage]) .st-kicker-check { display:none; }
  main[data-st-mobile=yes]:has(.st-kicker-check) .st-workbench-heading [data-st-summary-check] { display:none; }
  main[data-st-mobile=yes]:has(.st-kicker-check) .st-workbench-heading .st-severe-summary:not(:has(.st-urgent)),
  main[data-st-mobile=yes]:has(.st-kicker-check):has(.st-head-verdict[data-level=emergency]) .st-workbench-heading .st-severe-summary:has(.st-urgent[data-st-n="1"]) { display:none; }
  main[data-st-mobile=yes] .st-chip-detail { display:none; }
  main[data-st-mobile=yes][data-st-sheet=peek]:has([data-st-outage]) [data-st-sheet-status] { display:none; }
  main[data-st-mobile=yes] .st-workbench-heading :is(.pagehead-aux,.st-actions)>* { flex:none;margin:0; }
  main[data-st-mobile=yes] .st-workbench-heading :is(.pagehead-aux,.st-actions) .st-button { flex:none;min-height:44px;padding:7px 10px;font-size:var(--fs-small);white-space:nowrap; }
  main[data-st-mobile=yes] .st-workbench-heading :is(.pagehead-aux,.st-actions)>:is([data-sv-tz],[data-st-share],.sm-wall-link,.st-change-area) { display:none!important; }
  main[data-st-mobile=yes] .st-more-phone { display:grid;padding:4px 0 0;margin-top:4px;border-top:1px solid var(--st-line); }
  main[data-st-mobile=yes] .st-more-phone>:is(a,button):not([hidden]) { display:block;min-height:44px;text-align:left;font:inherit;font-size:var(--fs-small);padding:9px 14px;color:var(--st-text)!important;background:none;border:0;border-radius:0;text-decoration:none;cursor:pointer; }
  main[data-st-mobile=yes] .st-more-phone .svb-tz { display:flex;padding:0 14px; }
  main[data-st-mobile=yes] .st-more-phone .svb-tz .seg-opt>span { font-size:var(--fs-small);padding-inline:8px; }
  /* More opens across the row under it, wherever the row puts it. */
  main[data-st-mobile=yes] .st-workbench-heading :is(.pagehead-aux,.st-actions) { position:relative; }
  main[data-st-mobile=yes] .st-workbench-heading .st-more { position:static; }
  main[data-st-mobile=yes] .st-workbench-heading .st-more-menu { left:0;right:0;min-width:0; }
  /* Beside the title, More's row is only as wide as More, and the menu had taken that width: 54px, its UTC choice
     off the screen (critique of 2026-11-03, eleventh run). It takes the head's width, the screen's less its gutters. */
  main[data-st-mobile=yes] .st-workbench-heading .sm-pagehead .pagehead-aux .st-more-menu { left:auto;right:0;width:calc(100vw - 60px); }
  /* The page's tabs are the picker's products, under the map; its check status is in the sheet's header. */
  main[data-st-mobile=yes]>[data-st-workspace-tabs] { display:none; }
  main[data-st-mobile=yes] [data-st-refresh-status] { display:none; }
  [data-st-mobile-navigation] { padding-bottom:calc(5px + env(safe-area-inset-bottom)); }
  [data-st-mobile-navigation] a { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 3px;flex:1;min-width:0;font-size:var(--fs-micro);min-height:56px; }
  [data-st-mobile-navigation] svg { width:22px;height:22px;flex:none; }
  [data-st-mobile-navigation] [aria-current=true] { color:var(--st-action);box-shadow:inset 0 -3px var(--st-action); }
  [data-st-mobile=yes] [data-st-mobile-navigation] { position:fixed;bottom:0;left:0;right:0;z-index:20;margin:0; }
  body[data-st-mobile=yes] { padding-bottom:calc(210px + env(safe-area-inset-bottom)); }
  main[data-st-mobile=yes] { --st-sheet-h:160px; }
  /* Half leaves the map's upper part in view, about 150px of it, rather than a strip (critique of 2026-11-02). */
  main[data-st-mobile=yes][data-st-sheet=half] { --st-sheet-h:min(49dvh,max(200px,calc(100dvh - var(--st-map-top,280px) - 150px - var(--st-nav-height,67px)))); }
  main[data-st-mobile=yes][data-st-sheet=full] { --st-sheet-h:calc(100dvh - 150px - env(safe-area-inset-top)); }
  main[data-st-mobile=yes] [data-st-sheet-view] { display:none; }
  main[data-st-mobile=yes][data-st-sheet-shows=warnings] [data-st-sheet-view=warnings],
  main[data-st-mobile=yes][data-st-sheet-shows=places] [data-st-sheet-view=places],
  main[data-st-mobile=yes][data-st-sheet-shows=timeline] [data-st-sheet-view=timeline],
  main[data-st-mobile=yes][data-st-sheet-shows=details] [data-st-sheet-view=details] { display:block;position:fixed;z-index:19;left:0;right:0;bottom:var(--st-nav-height,67px);height:var(--st-sheet-h);min-height:min(var(--st-sheet-min-height,160px),calc(100dvh - var(--st-nav-height,67px) - 48px));max-height:calc(100dvh - var(--st-nav-height,67px) - 48px);margin:0;padding:0 10px 14px;overflow:auto;overscroll-behavior:contain;scroll-padding-top:calc(var(--st-sheet-chrome,146px) + 8px);border:1px solid var(--st-border);border-radius:14px 14px 0 0;background:var(--st-panel);color:var(--st-text);box-shadow:0 -4px 16px #0003; }
  main[data-st-mobile=yes][data-st-picker=open] [data-st-sheet-view] { display:none!important; }
  main[data-st-mobile=yes] .st-mobile-sheet { position:sticky;top:0;z-index:2;display:block;margin:0 -10px 4px;background:var(--st-panel);border-bottom:1px solid var(--st-line); }
  .st-sheet-header { display:flex;align-items:center;gap:6px;padding:5px 10px;flex-wrap:wrap; }
  .st-sheet-header h2 { margin:0;font-size:var(--fs-bulletin);line-height:1.4;flex:1;min-width:0; }
  .st-sheet-header>span { position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden; }
  .st-sheet-header .st-button { min-height:44px;font-size:var(--fs-small); }
  /* At Peek the map is in view: Back to map would close nothing a reader can see (critique of 2026-11-02). */
  main[data-st-sheet=peek] .st-sheet-header [data-st-sheet-close] { display:none; }
  /* The check status takes one line; when the check failed it is said in full (invariant 4). */
  .st-sheet-header [data-st-sheet-status] { flex-basis:100%;min-width:0;margin:0;font-size:var(--fs-micro);line-height:1.4;color:var(--st-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  main[data-st-connection=unconfirmed] .st-sheet-header [data-st-sheet-status] { white-space:normal;overflow-wrap:anywhere;color:var(--st-text); }
  main[data-st-sheet=peek]:not([data-st-connection=unconfirmed]) .st-sheet-header [data-st-sheet-status] { display:none; }
  .st-sheet-header [data-st-sheet-status]:empty { display:none; }
  /* A handle steps the height; a 24px band the width of the sheet, so a thumb finds it. */
  .st-sheet-handle { display:block;width:100%;height:24px;margin:0;padding:0;border:0;background:none;cursor:grab;touch-action:none; }
  .st-sheet-handle>span { display:block;width:40px;height:5px;margin:9px auto 0;border-radius:3px;background:var(--st-secondary);opacity:.6; }
  .st-sheet-handle:focus-visible { outline:3px solid var(--st-action);outline-offset:-3px; }
  .st-sheet-toggle { display:grid;place-items:center;width:44px;min-width:44px;padding:0!important; }
  .st-sheet-toggle svg { transition:transform .2s ease-out; }
  .st-sheet-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
  @media(prefers-reduced-motion:reduce) { .st-sheet-toggle svg { transition:none; } }
  /* At Peek, the emergency in force is what the sheet shows; at Half and Full the list holds it. */
  .st-sheet-emergency { display:none; }
  main[data-st-sheet=peek] .st-sheet-emergency { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;margin:0 10px 8px;padding:8px 12px;border-radius:8px;background:var(--ops-emergency,#720719);color:#fff!important;text-decoration:none;font-size:var(--fs-small);line-height:1.35; }
  .st-sheet-emergency strong { font-size:var(--fs-bulletin);letter-spacing:.01em; }
  /* The name and its end share the first line, so the emergency costs the map four lines at most. */
  .st-sheet-emergency .st-sheet-until { grid-column:2;grid-row:1;white-space:nowrap;font-variant-numeric:tabular-nums; }
  .st-sheet-emergency .st-sheet-known { grid-column:1 / -1;font-size:var(--fs-micro);font-weight:800;letter-spacing:.04em;text-transform:uppercase; }
  .st-sheet-emergency:has(>.st-sheet-known) .st-sheet-until { grid-row:2; }
  main[data-st-connection=unconfirmed][data-st-sheet=peek] .st-sheet-emergency { background:var(--st-panel);color:var(--st-text)!important;border:1px solid var(--st-line);border-left:6px solid #e0a92a; }
  .st-sheet-emergency :is(.st-sheet-place,.st-sheet-instruction,.st-sheet-more,.st-sheet-act) { grid-column:1 / -1; }
  .st-sheet-emergency .st-sheet-act { font-size:var(--fs-micro);font-weight:600;opacity:.92; }
  .st-sheet-emergency .st-sheet-place { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .st-sheet-emergency .st-sheet-instruction { font-weight:800; }
  .st-sheet-emergency .st-sheet-more { opacity:.9;text-decoration:underline; }
  .st-sheet-emergency:focus-visible { outline:3px solid var(--st-action);outline-offset:2px; }
  main[data-st-mobile=yes] [data-st-sheet-view] :is(.st-warning-rail,.st-warning-list,.st-severe-inspector) { max-height:none;overflow:visible; }
  main[data-st-mobile=yes] [data-st-sheet-view] .st-watched { border:0;padding:8px; }
  main[data-st-mobile=yes] [data-st-sheet-view] .st-surface { margin-top:8px; }
  main[data-st-mobile=yes] [data-st-sheet-view] .st-wb-pane+.st-wb-pane { margin-top:8px; }
  body[data-st-page][data-st-mobile=yes] :is(.st-map-stage,.st-severe-stage) { height:clamp(220px,calc(100dvh - var(--st-map-top,280px) - max(160px,var(--st-sheet-min-height,160px)) - var(--st-nav-height,67px) - 8px),520px);min-height:220px;aspect-ratio:auto; }
  [data-st-mobile=yes] .st-replay-controls { margin:0; }
  [data-st-mobile=yes] .st-rail:empty { display:none; }
  main[data-st-mobile=yes] [data-st-sheet-view] input[type=search] { font-size:var(--fs-remarks);min-height:44px;max-width:100%; }
  main[data-st-mobile=yes] [data-st-sheet-view] :focus-visible { outline:3px solid var(--st-action);outline-offset:2px; }
  main[data-st-mobile=yes] [data-st-sheet-view] :is(table,pre) { max-width:100%; }
}
/* A short keyboard/landscape viewport scrolls naturally instead of hiding its input: the region the
   sheet shows is read in its place in the page. */
@media(max-width:767px) and (max-height:500px) {
  main[data-st-mobile=yes][data-st-sheet-shows=warnings] [data-st-sheet-view=warnings],
  main[data-st-mobile=yes][data-st-sheet-shows=places] [data-st-sheet-view=places],
  main[data-st-mobile=yes][data-st-sheet-shows=timeline] [data-st-sheet-view=timeline],
  main[data-st-mobile=yes][data-st-sheet-shows=details] [data-st-sheet-view=details] { position:relative;inset:auto;z-index:auto;height:auto;min-height:220px;max-height:none;overflow:visible;margin-top:12px; }
  main[data-st-mobile=yes] .st-mobile-sheet { position:static; }
  body[data-st-mobile=yes] { padding-bottom:80px; }
}
@media(forced-colors:active) {
  main[data-st-mobile=yes][data-st-sheet-shows] [data-st-sheet-view],[data-st-mobile-navigation] { border:2px solid CanvasText; }
  [data-st-mobile-navigation] [aria-current=true],.st-sheet-toggle[aria-expanded=true] { outline:2px solid Highlight; }
  .st-sheet-handle>span { background:CanvasText; }
  main[data-st-sheet=peek] .st-sheet-emergency { border:2px solid CanvasText; }
}
/* On a phone the radar site's choice takes its own row under the four pictures, its panel in the page's width: it had
   squeezed the pictures to "Veloci" and opened 561px wide, its controls out of reach (critique of 2026-11-02, seventh run). */
@media (max-width:767px) {
  main[data-st-mobile=yes] .st-map-zone-picture>.st-map-toolbar:has(>.st-velocity-controls:not([hidden])) { flex-wrap:wrap;row-gap:6px; }
  main[data-st-mobile=yes] .st-map-zone-picture>.st-map-toolbar>.st-velocity-controls { flex:1 0 100%;min-width:0; }
  main[data-st-mobile=yes] .st-map-zone-picture .st-velocity-controls>summary { width:100%;justify-content:flex-start; }
  main[data-st-mobile=yes] .st-map-zone-picture .st-velocity-body { position:static;width:auto;max-width:100%;margin-top:6px;display:grid;gap:6px;padding:10px;background:var(--st-panel);border:1px solid var(--st-line);border-radius:8px; }
  main[data-st-mobile=yes] .st-map-zone-picture .st-velocity-body :is(input,select,.st-button) { width:100%;max-width:100%;min-height:44px; }
}
