/* Weather Operations Mode's tracking wall (review of 2026-10-27, R7): the map at about 70% of the
 * width; beside it a pinned emergency, the board, the hour's latest changes and the spotlight; the
 * complete alert list over the wall on demand. Single-product bookmarks keep the full-screen product. */
.sm-wall .smw { background:var(--st-bg);color:var(--st-text); }
.sm-wall .smw-title h1 { color:var(--st-text); }
.sm-wall .smw-bar,.sm-wall .smw-foot { border-color:var(--st-border); }
.sm-wall .smw-kicker,.sm-wall .smw-area,.sm-wall .smw-clocks,.sm-wall .smw-foot { color:var(--st-secondary); }
.st-wall-grid { grid-template-columns:minmax(0,7fr) minmax(0,3fr);grid-template-rows:minmax(0,1fr); }
.st-wall-grid>.st-wall-map { grid-column:1;grid-row:1;min-height:0;padding:.5rem;display:flex;flex-direction:column;background:var(--st-panel); }
.st-wall-grid>.st-wall-side { grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:.5rem;min-height:0;min-width:0;overflow:hidden; }
.st-wall-side>.sm-card { background:var(--st-panel); }

/* The map's head: its name, its clocks as chips, its two controls. */
.st-wall-grid .st-wall-map-head { display:flex;align-items:center;gap:.4rem .6rem;flex-wrap:wrap;flex:none;padding-bottom:.4rem; }
.st-wall-map-head h2 { font-size:1rem;margin:0; }
.st-wall-chips { display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0;flex:1;min-width:0; }
.st-wall-chip { display:inline-flex;align-items:center;gap:.3rem;padding:.1rem .45rem;border:1px solid var(--st-border);border-radius:1rem;font-family:var(--font-mono,monospace);font-size:.68rem;font-weight:700;white-space:nowrap;color:var(--st-text); }
.st-wall-chip::before { content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--st-secondary); }
.st-wall-chip[data-state=current]::before { background:#43d17c;box-shadow:0 0 0 1px #0006; }
/* Not current is said in words; the ring is only its echo. */
.st-wall-chip[data-state=attention] { border-color:var(--st-attention);border-width:2px; }
.st-wall-chip[data-state=attention]::before { background:transparent;border:2px solid var(--st-attention); }
.st-wall-map-note:not([data-problem]) { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.st-wall-map-note[data-problem] { flex-basis:100%;font-size:.62rem;line-height:1.35;padding:.2rem .5rem;border-left:.25rem solid var(--st-attention);background:var(--st-bg); }
.st-wall-map-head .st-button { font-size:.68rem;min-height:44px;padding:.3rem .5rem; }
.st-wall-map-stage { flex:1;min-height:0;position:relative;overflow:hidden;border:1px solid var(--st-border);border-radius:8px; }
[data-st-wall-live],[data-st-wall-fallback] { position:absolute;inset:0; }
[data-st-wall-fallback] { overflow:auto; }
.st-wall-map.is-live [data-st-wall-fallback] { display:none; }
.st-wall-map [data-st-wall-fallback]>.sm-mapcard { height:100%;padding:.3rem; }
.st-wall-map [data-st-wall-fallback] .sm-mapframe { height:calc(100% - 3rem); }
.st-wall-map [data-st-wall-fallback] img { width:100%;height:100%;object-fit:contain; }
.st-wall-map [data-st-wall-fallback] .sm-graphic { width:100%;height:100%; }
.st-wall-map a { color:var(--st-info); }
.st-wall-map .maplibregl-ctrl-attrib { color:#102a43; }
.st-wall-map .maplibregl-ctrl-attrib a { color:#0759c7;text-decoration:underline; }
/* The source's own legend, over the map's top right corner. */
.st-wall-legend { position:absolute;top:.4rem;right:.4rem;z-index:2;font-size:.62rem;max-width:45%;padding:.2rem .3rem;background:var(--st-panel);border:1px solid var(--st-border);border-radius:.3rem; }
.st-wall-legend:empty { display:none; }
.st-wall-legend img { width:14rem;max-width:100%;height:auto;display:block;background:#fff;padding:3px; }

/* The board: one row per event, its count in large figures, its alerts' earliest to latest end. */
.st-wall-side>.sm-board { flex:0 1 auto;min-height:0;max-height:40%; }
.st-wall-side .sm-board-head { display:flex;align-items:baseline;gap:.5rem; }
.st-wall-side .sm-board-head>.sm-h { flex:1;margin:0 0 .3rem; }
.st-wall-list-open { font-size:.62rem;min-height:44px;padding:.2rem .5rem;display:inline-flex;align-items:center;gap:.35rem; }
.st-wall-list-open kbd { font:700 .55rem/1 var(--font-mono,monospace);padding:.15rem .3rem;border:1px solid currentColor;border-radius:.2rem; }
.st-wall-side .sm-board-rows { display:grid;gap:.15rem;padding:0;margin:0;list-style:none; }
.st-wall-side .sm-board-rows li { display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:center;column-gap:.5rem;padding:.2rem 0;border-top:1px solid var(--st-line); }
.st-wall-side .sm-board-rows .sm-count { font:800 1.9rem/1 var(--font-mono,monospace);text-align:right;font-variant-numeric:tabular-nums; }
.st-wall-side .sm-row { display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:0; }
.st-wall-side .sm-row .sm-chip { font-size:.9rem; }
.st-wall-side .sm-row .sm-sub { font-size:.75rem;font-family:var(--font-mono,monospace); }
/* An emergency on the board is one line, the event and where; the pinned card carries its words,
   the full list and the ticker its time. */
.st-wall-side .sm-pin { margin-bottom:.25rem;flex-wrap:nowrap;align-items:center;min-width:0; }
.st-wall-side .sm-pin .sm-pin-word { font-size:.85rem;line-height:1.3;letter-spacing:0;padding:.1rem .3rem;white-space:nowrap; }
.st-wall-side .sm-pin .sm-pin-where { font-size:.8rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.st-wall-side .sm-pin .sm-sub { display:none; }
.st-wall-side .sm-notice { font-size:.7rem;line-height:1.4; }
.st-wall-side .sm-actions { flex-wrap:wrap; }
.st-wall-side .sm-actions .btn { font-size:.65rem;padding:.35rem; }

/* The hour's three latest changes, under the board. */
.st-wall-side>.sm-changed { display:block;flex:0 1 auto;min-height:0;max-height:26%; }
.st-wall-side .sm-changed>.sm-h { display:inline-block;margin:0 .5rem .3rem 0; }
.st-wall-side .sm-changed>.sm-h+.sm-sub { display:inline; }
.st-wall-side .sm-changes { display:grid;gap:.2rem;padding:0;margin:0;list-style:none; }
.st-wall-side .sm-changes li { display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;font-size:.75rem;line-height:1.3; }
.st-wall-side .sm-changes li>span { overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.st-wall-side .sm-changed .sm-empty { font-size:.68rem;margin:0; }
.st-wall-side [data-sm-earlier-line][hidden] { display:none; }

/* The spotlight takes what is left; an emergency's card, first in the column, takes the most. */
.st-wall-side>.sm-spot { flex:1 1 0;min-height:10rem; }
/* The map beside it already draws the emergency: the card keeps its room for NWS's words. */
.st-wall-side .sm-pinned-cols>.sm-figure,.st-wall-side>.sm-spot--pinned .sm-spot-tools { display:none; }
.st-wall-side .sm-spot-head { display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem; }
.st-wall-side .sm-spot-head>.sm-h { flex:1 1 auto;margin:0;font-size:.85rem; }
.st-wall-side .sm-spot-status { font-size:.62rem; }
.st-wall-side .sm-spot-tools { display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;flex-basis:100%; }
.st-wall-side .sm-spot-tools:empty { display:none; }
.st-wall-side .sm-spot-tools .btn,.st-wall-side .sm-spot-tools summary { font-size:.6rem; }
.st-wall-side .st-ops-queue { position:relative; }
.st-wall-side .st-ops-queue-menu { right:auto;left:0; }
.st-wall-grid .sm-panel:not(.sm-panel--pinned).is-current { display:flex;flex-direction:column;overflow:hidden; }
.st-wall-grid .sm-panel:not(.sm-panel--pinned).is-current>.sm-figure { flex:1;min-height:0; }
.st-wall-grid .sm-panel:not(.sm-panel--pinned).is-current .sm-rows { display:flex;flex-wrap:wrap;gap:.3rem; }
.st-wall-grid .sm-pinned-cols { grid-template-columns:minmax(0,1fr); }
.st-wall-grid .maplibregl-ctrl-group button { width:max(44px,2.2rem);height:max(44px,2.2rem); }
.st-wall-grid :focus-visible { outline:3px solid var(--st-action);outline-offset:2px; }
.st-wall-coverage { font-size:.75rem;margin:0;padding:.5rem .7rem;border:1px solid var(--st-border);border-radius:8px;background:var(--st-panel); }

/* The complete list, over the wall: the board's button or L opens it, Escape or L closes it. */
.st-wall-alert-list { position:fixed;inset:auto 1rem 5rem auto;width:min(32rem,calc(100vw - 2rem));max-height:calc(100dvh - 9rem);margin:0;padding:.6rem .7rem;display:none;flex-direction:column;min-height:0;border:1px solid var(--st-border);border-radius:8px;background:var(--st-panel);color:var(--st-text);box-shadow:0 .6rem 2rem #0008; }
.st-wall-alert-list:popover-open { display:flex; }
.st-wall-alert-list::backdrop { background:#0006; }
.st-wall-alert-head { display:flex;align-items:center;gap:.5rem;padding-bottom:.3rem; }
.st-wall-alert-list h2 { font-size:.9rem;margin:0;flex:1; }
.st-wall-alert-head .st-button { font-size:.65rem;min-height:44px; }
.st-wall-alert-list ol { overflow:auto;min-height:0;list-style:none;padding:0;margin:0; }
.st-wall-alert-list li { padding:.4rem 0;border-top:1px solid var(--st-line); }
.st-wall-alert-list a { display:flex;gap:.25rem;flex-direction:column;color:var(--st-text);text-decoration:none;min-height:44px; }
.st-wall-alert-list strong { font-size:.7rem; }
.st-wall-alert-list span:not(.sm-chip) { font-size:.62rem;color:var(--st-secondary); }
.st-wall-alert-list [data-emergency] { border-left:3px solid var(--st-attention);padding-left:.3rem; }

@media(max-width:1400px) { .st-wall-grid { grid-template-columns:minmax(0,2.2fr) minmax(300px,1fr); } }
@media(max-width:1023px),(max-height:600px) { body.sm-wall:has(.st-wall-grid) { height:auto;overflow:auto; }.smw:has(.st-wall-grid){height:auto;min-height:100dvh}.st-wall-grid{display:flex;flex-direction:column}.st-wall-grid>.st-wall-map{min-height:400px}.st-wall-grid>.st-wall-side{overflow:visible}.st-wall-side>.sm-spot{min-height:400px} }
@media(forced-colors:active) { .st-wall-alert-list,[data-st-wall-live],.st-wall-map-stage,.st-wall-chip { border:2px solid CanvasText; } }