/* Forecast Flakes — the Snow Situation Room.
 *
 * Layers on flakes.css and explorer.css (the map, the panel, the timeline, the legend are
 * the explorer's). What is added is the room around the map: the status board at the top,
 * the ranked boards below it, a place card with its six-hour series, and the ledger.
 */

/* ── the status board ──────────────────────────────────────────────────── */
.sit-head { display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr);
  gap:14px; margin:0 0 14px; align-items:stretch; }
@media (max-width:900px){ .sit-head{ grid-template-columns:1fr; } }

.sit-status { background:var(--ink); color:#dbe3ec; border-radius:12px; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px; }
.sit-level .pill { display:inline-block; font:900 11px 'Overpass Mono',monospace;
  letter-spacing:.16em; text-transform:uppercase; border-radius:999px; padding:5px 12px;
  background:#3c4652; color:#fff; }
.sit-level.quiet .pill { background:#3c4652; }
.sit-level.light .pill { background:var(--snow); }
.sit-level.active .pill { background:#d17a00; }
.sit-level.major .pill { background:var(--red); animation:sit-pulse 2.2s ease-in-out infinite; }
@keyframes sit-pulse { 50% { box-shadow:0 0 0 6px rgba(176,36,46,.28); } }
.sit-level .lvl-text { display:block; margin-top:7px; font-size:12.5px; line-height:1.5;
  color:#c7d0da; }
.sit-run .k { font:800 9.5px 'Overpass Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:#8b97a5; }
.sit-run .v { font-size:22px; font-weight:900; color:#fff; line-height:1.1; margin-top:2px; }
.sit-run .d { font-size:11.5px; color:#a8b3bf; margin-top:3px; }
.sit-cycles { display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; }
.sit-cycles a { font:700 10.5px 'Overpass Mono',monospace; color:#c7d0da; text-decoration:none;
  border:1px solid #3c4652; border-radius:5px; padding:3px 7px; }
.sit-cycles a:hover { border-color:#8b97a5; color:#fff; }
.sit-cycles a.on { background:var(--snow); border-color:var(--snow); color:#fff; }
.sit-cycles a.replay { border-style:dashed; color:#a8b3bf; }
.sit-cycles a.replay::before { content:"replay · "; font-weight:600; opacity:.8; }
.sit-cycles a.replay.on { background:#5a3d7a; border-color:#5a3d7a; color:#fff; border-style:solid; }

.sit-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
@media (max-width:1100px){ .sit-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.sit-kpis .kpi { padding:12px 14px; }
.sit-kpis .kpi .v { font-size:24px; white-space:nowrap; }
.sit-kpis .kpi .d { font-weight:600; font-size:12px; }

/* ── the boards ────────────────────────────────────────────────────────── */
.boards { margin:0 0 18px; }
.board-tabs { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 10px; }
.board-tabs button { font:700 12px 'Overpass',system-ui,sans-serif; color:var(--ink2);
  background:var(--paper2); border:1px solid var(--line); border-radius:6px;
  padding:6px 11px; cursor:pointer; }
.board-tabs button:hover { border-color:var(--snow); color:var(--ink); }
.board-tabs button.on { background:var(--snow); border-color:var(--snow); color:#fff; }
.board-tabs button small { font-weight:600; opacity:.75; margin-left:5px; }

.board-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:14px; align-items:start; }
@media (max-width:980px){ .board-grid{ grid-template-columns:1fr; } }

.board-table-wrap { background:var(--card); border:1px solid var(--line); border-radius:12px;
  overflow:auto; max-height:640px; }
table.board { border-collapse:collapse; width:100%; font-size:13px; }
table.board th, table.board td { padding:7px 10px; text-align:right;
  border-bottom:1px solid var(--line2); white-space:nowrap; }
table.board th:first-child, table.board td:first-child { text-align:left; }
table.board th:nth-child(2), table.board td:nth-child(2) { text-align:left; }
table.board thead th { position:sticky; top:0; background:var(--paper2); z-index:2;
  font:700 10px 'Overpass Mono',monospace; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mut); }
table.board tbody tr { cursor:pointer; }
table.board tbody tr:hover td { background:var(--paper2); }
table.board tbody tr.on td { background:#e6ecfa; }
table.board td.rank { color:var(--mut); font-family:'Overpass Mono',monospace; font-size:11px; }
table.board td.name { font-weight:800; color:var(--ink); }
table.board td.name small { font-weight:600; color:var(--mut); margin-left:5px; }
table.board td.big { font-weight:900; font-size:14.5px; }
table.board td.up { color:var(--red); font-weight:800; }
table.board td.dn { color:var(--snow); font-weight:800; }
table.board td.ice { color:var(--ice); font-weight:800; }
table.board td .bar { display:inline-block; height:9px; vertical-align:middle;
  background:var(--snow); border-radius:2px; margin-right:6px; opacity:.85; }
table.board td .bar.p { background:#b9c6e8; }
table.board td .bar.ice { background:var(--ice); }
table.board td .bar.load { background:#ef6c00; }
#board-note { padding:8px 12px 10px; margin:0; font-size:12px; color:var(--ink2); line-height:1.5; }

/* ── one place ─────────────────────────────────────────────────────────── */
.place { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; position:sticky; top:12px; }
@media (max-width:980px){ .place{ position:static; } }
.place-empty { font-size:13.5px; color:var(--ink2); }
.place-empty input { display:block; width:100%; margin:8px 0 6px; padding:8px 10px;
  font:600 13px 'Overpass',system-ui,sans-serif; border:1px solid var(--line);
  border-radius:6px; background:var(--paper2); }
.place-hits a { display:block; padding:5px 8px; text-decoration:none; color:var(--ink);
  font-weight:700; border-radius:5px; font-size:13px; cursor:pointer; }
.place-hits a:hover { background:var(--paper2); }
.place-hits a small { color:var(--mut); font-weight:600; margin-left:6px; }
.place h3 { margin:0; font-size:19px; font-weight:900; letter-spacing:-.01em; }
.place h3 small { font-weight:700; color:var(--mut); font-size:13px; margin-left:6px; }
.place .pl-meta { font:700 11px 'Overpass Mono',monospace; color:var(--mut);
  letter-spacing:.04em; margin:3px 0 10px; }
.place .pl-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0 0 10px; }
.place .pk { background:var(--paper2); border:1px solid var(--line2); border-radius:8px;
  padding:8px 10px; }
.place .pk .k { font:700 9px 'Overpass Mono',monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut); }
.place .pk .v { font-size:19px; font-weight:900; color:var(--ink); line-height:1.1; margin-top:3px; }
.place .pk .v small { font-size:11px; color:var(--mut); font-weight:700; }
.place .pk .d { font-size:11px; color:var(--ink2); margin-top:2px; font-weight:600; }
.place .pk.warn .v { color:var(--red); }
.place .pk.ice .v { color:var(--ice); }
.place svg { width:100%; height:auto; display:block; }
.place .pl-cap { font-size:11px; color:var(--mut); margin:4px 0 0; line-height:1.5; }
.place .pl-links { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.place .pl-links a { font:700 11px 'Overpass',system-ui,sans-serif; color:var(--snow);
  border:1px solid var(--line); border-radius:5px; padding:4px 8px; text-decoration:none; }
.place .pl-links a:hover { border-color:var(--snow); }
.place .pl-verify { margin-top:10px; font-size:12px; color:var(--ink2); line-height:1.5;
  border-top:1px dashed var(--line); padding-top:8px; }

/* ── the ledger ────────────────────────────────────────────────────────── */
.ledger { margin:0 0 18px; }
.ledger-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:9px; margin:0 0 12px; }
.ledger-cards .kpi .v { font-size:24px; }
table.ledger-table tbody tr { cursor:default; }
table.ledger-table td.good { color:var(--sign); font-weight:800; }
table.ledger-table td.bad { color:var(--red); font-weight:800; }