:root {
  --bg: #000;
  --panel: #050505;
  --fg: #ff9f1c;
  --hi: #ffd166;
  --dim: #8a5a12;
  --line: #3a2606;
  --inv-fg: #000;
  --up: #3ddc84;
  --down: #ff4d4d;
  --link: #6cc4ff;
  --font: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
[data-theme="green"] { --fg: #33ff66; --hi: #b6ffc8; --dim: #1c7a35; --line: #0c3317; }
[data-theme="white"] { --fg: #e8e8e8; --hi: #fff; --dim: #7a7a7a; --line: #2a2a2a; --link: #7fb7ff; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 13px/1.35 var(--font);
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
.dim { color: var(--dim); }
.hl { color: var(--hi); }
.small { font-size: 11px; }
.up { color: var(--up); } .down { color: var(--down); }

/* top bar */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; letter-spacing: 2px; color: var(--inv-fg); background: var(--fg); padding: 1px 6px; }
.cursor { animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
#cmd { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
#cmd label { color: var(--hi); }
#cmdIn {
  flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px dashed var(--line);
  padding: 3px 2px; outline: none; text-transform: uppercase; caret-color: var(--hi);
}
#cmdIn:focus { border-bottom-color: var(--fg); }
#cmdIn::placeholder { color: var(--dim); }
#clocks { display: flex; gap: 12px; white-space: nowrap; }
#clocks b { font-weight: 400; color: var(--dim); margin-right: 4px; }

.fkey {
  background: transparent; border: 1px solid var(--line); padding: 1px 7px; cursor: pointer;
  text-transform: uppercase; white-space: nowrap;
}
.fkey:hover, .fkey:focus-visible { border-color: var(--fg); outline: none; }
.fkey.on, .hlkey { background: var(--fg); color: var(--inv-fg); border-color: var(--fg); }
.fkey.danger:hover { border-color: var(--down); color: var(--down); }
#cmd button { background: var(--fg); color: var(--inv-fg); border: 0; padding: 1px 8px; cursor: pointer; }

/* desks */
#desks { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#desks button {
  background: none; border: 0; border-right: 1px solid var(--line); padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
#desks button i { font-style: normal; color: var(--dim); margin-right: 5px; }
#desks button.on { background: var(--fg); color: var(--inv-fg); }
#desks button.on i { color: var(--inv-fg); }
#desks button:hover:not(.on) { color: var(--hi); }

/* ticker */
#ticker { overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line); padding: 3px 0; color: var(--hi); }
#ticker .track { display: inline-block; padding-left: 100%; animation: tick 240s linear infinite; }
#ticker:hover .track { animation-play-state: paused; }
#ticker a { margin-right: 36px; }
#ticker a:hover { text-decoration: underline; }
#ticker b { color: var(--dim); font-weight: 400; margin-right: 6px; }
@keyframes tick { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { #ticker .track { animation: none; padding-left: 10px; } .cursor { animation: none; } }

/* layout */
main {
  flex: 1; min-height: 0;
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 0.85fr);
  /* Right column: weather spans rows 1-2 (row 2 is at least --wx-extra so it never scrolls),
     a fixed-height top-10 trends list, then scores fill the rest. */
  grid-template-rows: auto minmax(var(--wx-extra, 0px), 1.3fr) auto minmax(var(--scores-min, 150px), 1fr);
  grid-template-areas:
    "news tv   wx"
    "news map  wx"
    "news map  trends"
    "news map  scores";
}
#newsPanel { grid-area: news; } #tvPanel { grid-area: tv; } #mapPanel { grid-area: map; }
#wxPanel { grid-area: wx; height: 0; min-height: 100%; } /* row height follows the TV panel */
#trendsPanel { grid-area: trends; } #scoresPanel { grid-area: scores; }
/* Desktop: when the weather panel can't fit beside the TV, drop X trends and let weather take its row. */
@media (min-width: 1201px) {
  /* Desktop: radar is a fixed 240px; extra room goes to the 7-day forecast. */
  #wxPanel .radar-map { height: min(240px, 26vh); }
  #wxDays { flex: 1 1 auto; min-height: 175px; display: flex; flex-direction: column; }
  #wxDays .days-wrap { flex: 1; min-height: 0; }
  #wxDays table.days { height: 100%; }
  main.no-trends {
    grid-template-areas:
      "news tv   wx"
      "news map  wx"
      "news map  scores"
      "news map  scores";
  }
  main.no-trends #trendsPanel { display: none; }
}

.panel { background: var(--panel); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel h2 {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 1px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 3px 8px; border-bottom: 1px solid var(--line); background: #0b0b0b;
}
.panel h2 .dim { font-weight: 400; letter-spacing: 0; }

/* headline lists */
.list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.list li { border-bottom: 1px solid #111; }
.list .row-h {
  display: grid; grid-template-columns: 42px 44px 1fr auto; gap: 8px; align-items: baseline;
  padding: 3px 8px; cursor: pointer;
}
.list .t { color: var(--dim); }
.list .s { color: var(--hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .h { overflow: hidden; }
.list .n { color: var(--dim); font-size: 11px; }
.list li:hover .row-h, .list li.sel .row-h { background: #151515; }
.list li.sel .row-h { box-shadow: inset 2px 0 0 var(--fg); }
.list li.fresh .t { color: var(--up); }
.list { position: relative; }
.list li.arrived { box-shadow: inset 3px 0 0 var(--up); animation: arrive 4s ease-out; }
.list li.arrived .n::after { content: ' NEW'; color: var(--up); }
@keyframes arrive { from { background: rgba(61, 220, 132, .18); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .list li.arrived { animation: none; } }
.list li.watch .h { background: var(--fg); color: var(--inv-fg); padding: 0 3px; }
.list.compact .row-h { grid-template-columns: 42px 1fr; }
.list.compact .s { display: block; font-size: 11px; }
.list .empty { padding: 10px 8px; color: var(--dim); }

.detail { padding: 4px 8px 8px 102px; color: #cfcfcf; display: none; }
[data-theme="amber"] .detail { color: #e9d2ad; }
li.open .detail { display: block; }
.detail p { margin: 0 0 6px; }
.article { max-width: 72ch; font-size: 13.5px; line-height: 1.55; }
.article p { margin: 0 0 10px; }
.article .lede { color: var(--hi); }
.article .byline { color: var(--dim); font-size: 11px; letter-spacing: .5px; margin-bottom: 8px; }
.article .small { font-size: 11px; }
li.open > .row-h { position: sticky; top: 0; z-index: 1; background: #151515; }
.detail { border-left: 1px solid var(--line); margin-left: 8px; }
.detail .rel { margin: 0; padding: 0; list-style: none; }
.detail .rel li { border: 0; padding: 1px 0; }
.detail .rel b { color: var(--hi); font-weight: 400; display: inline-block; min-width: 46px; }
.detail a { color: var(--link); }
.detail a:hover { text-decoration: underline; }
.list.compact .detail { padding-left: 58px; }

#filterBar { padding: 3px 8px; background: var(--fg); color: var(--inv-fg); display: flex; justify-content: space-between; }
#filterBar button { background: none; border: 0; cursor: pointer; color: inherit; }

/* TV */
.tv-ctl { display: flex; gap: 6px; }
.tv-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-bottom: 1px solid var(--line); }
.tv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-frame.multi { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--line); }
.tv-frame.multi > div { position: relative; background: #000; }
.tv-frame.multi > div span { position: absolute; z-index: 1; top: 0; left: 0; background: var(--fg); color: var(--inv-fg); font-size: 10px; padding: 0 4px; pointer-events: none; }
.tv-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); cursor: pointer; text-align: center; }
.tv-placeholder:hover { color: var(--fg); }
.channels { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; overflow-y: auto; }
.channels .fkey { font-size: 11px; }
.channels .fkey.off:not(.on) { color: var(--dim); border-style: dashed; }

/* map */
.map { flex: none; aspect-ratio: 360 / 130; position: relative; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map path.land { fill: #121212; stroke: var(--dim); stroke-width: 0.6; stroke-opacity: 0.7; }
.map circle.q { fill: var(--fg); stroke: #000; stroke-width: 0.5; cursor: pointer; }
.map circle.q.old { fill-opacity: 0.35; }
.map circle.q.recent { fill-opacity: 0.7; }
.map circle.q.hour { fill: var(--hi); fill-opacity: 0.95; }
.map circle.q.major { stroke: var(--down); stroke-width: 1.5; }
.map circle.q:hover { stroke: #fff; stroke-width: 1.2; }
.map circle.ring { fill: none; stroke: var(--hi); stroke-width: 1; pointer-events: none;
  transform-box: fill-box; transform-origin: center; animation: quake 2s ease-out infinite; }
.map circle.ring.focus { stroke: #fff; stroke-width: 1.5; animation-iteration-count: 1; }
@keyframes quake { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map circle.ring { animation: none; } }
.map .tip { position: absolute; pointer-events: none; background: #000; border: 1px solid var(--fg); padding: 1px 6px; font-size: 11px; white-space: nowrap; display: none; z-index: 2; }
.map-meta { padding: 2px 8px; border-top: 1px solid var(--line); font-size: 11px; }
.quakes { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 48px; overflow-y: auto; font-size: 11px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.quakes a { display: grid; grid-template-columns: 38px 40px 1fr auto; gap: 6px; padding: 1px 8px; }
.quakes a:hover { background: #151515; }
.quakes b { font-weight: 600; color: var(--hi); }
.quakes .t, .quakes .d { color: var(--dim); }
.quakes .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quakes li.big b { color: var(--down); }
.quakes li.fresh .t { color: var(--up); }
#quakeFeeds .fkey { font-size: 10px; padding: 0 5px; }

/* weather */
.wx { padding: 6px 8px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.radar { flex: none; display: flex; flex-direction: column; }
.radar-map { height: 225px; background: #000; border: 1px solid var(--line); }
.radar-base { filter: brightness(0.55); }
.radar-bar { display: flex; align-items: center; gap: 6px; padding-top: 4px; font-size: 11px; }
.radar-bar input { flex: 1; accent-color: var(--fg); min-width: 0; }
.radar-time { min-width: 92px; text-align: right; color: var(--hi); }
.radar-msg { margin: 0; padding: 10px 0; }
.leaflet-container { background: #000; font: 11px var(--font); }
.leaflet-bar a, .leaflet-bar a:hover { background: #000; color: var(--fg); border-color: var(--line); }
.leaflet-control-attribution { background: rgba(0, 0, 0, .7) !important; color: var(--dim); font-size: 9px; }
.leaflet-control-attribution a { color: var(--dim); }
.wx .now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wx .temp { font-size: 30px; color: var(--hi); line-height: 1; }
.wx table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wx td { padding: 1px 4px 1px 0; white-space: nowrap; }
.wx table.days { font-size: 12px; border-collapse: collapse; }
.wx .days-note { text-align: right; font-size: 10px; padding-top: 2px; }
.wx table.days th { font-weight: 400; font-size: 10px; color: var(--dim); text-align: right; padding: 0 4px 2px 0; border-bottom: 1px solid var(--line); }
.wx table.days th:nth-child(-n+2) { text-align: left; }
.wx table.days td { text-align: right; padding: 1px 4px 1px 0; border-bottom: 1px solid #141414; white-space: nowrap; }
.wx table.days td.day { text-align: left; color: var(--dim); }
.wx table.days td.cond { text-align: left; overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 40%; }
.wx table.days tr.hd + tr td.day { color: var(--hi); }
.wx .alert { margin-top: 6px; padding: 2px 6px; background: var(--down); color: #000; }
.wx .kv { color: var(--dim); }
.wx .kv b { color: var(--fg); font-weight: 400; }

/* X trends */
.trends { list-style: none; margin: 0; padding: 2px 0; overflow: hidden; flex: none; counter-reset: tr; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.trends li { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 6px; align-items: baseline; padding: 1px 8px; counter-increment: tr; }
.trends li::before { content: counter(tr); color: var(--dim); text-align: right; }
.trends li:hover { background: #151515; }
.trends button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.trends button:hover { color: var(--hi); text-decoration: underline; }
.trends .mv { font-size: 10px; color: var(--dim); }
.trends .mv.new { color: var(--up); } .trends .mv.up { color: var(--up); } .trends .mv.down { color: var(--down); }
.trends a { color: var(--dim); font-size: 11px; }
.trends a:hover { color: var(--link); }

/* scores: one two-line block per game (away over home), status in its own column */
.scores { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scores .grp { position: sticky; top: 0; z-index: 1; padding: 2px 8px; font-size: 10px; letter-spacing: 1px; background: #0b0b0b; color: var(--dim); border-bottom: 1px solid var(--line); }
.scores .grp.in { color: var(--up); }
.scores a.g { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 4px 8px 4px 6px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.scores a.g:nth-of-type(even) { background: #090909; }
.scores a.g:hover { background: #161616; }
.scores a.g.in { border-left-color: var(--up); }
.scores .teams { display: grid; gap: 1px; min-width: 0; }
.scores .row { display: grid; grid-template-columns: 58px 1fr 30px; gap: 6px; align-items: baseline; }
.scores .tm { font-weight: 600; white-space: nowrap; }
.scores .tm i { font-style: normal; font-weight: 400; color: var(--dim); font-size: 10px; margin-right: 3px; }
.scores .nm { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores .sc { text-align: right; font-weight: 600; color: var(--fg); }
.scores .row.win .tm, .scores .row.win .sc { color: var(--hi); }
.scores .row.lose .tm, .scores .row.lose .sc { color: var(--dim); font-weight: 400; }
.scores .st { padding-left: 10px; margin-left: 8px; border-left: 1px solid var(--line); min-width: 84px; text-align: right; color: var(--dim); font-size: 11px; white-space: nowrap; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.scores a.g.in .st { color: var(--up); }
.scores .empty { padding: 10px 8px; color: var(--dim); }
#scoreTabs .fkey { font-size: 10px; padding: 0 5px; }
#scoreTabs .fkey b { color: var(--up); font-weight: 400; margin-left: 2px; }
#scoreTabs .fkey.on b { color: var(--inv-fg); }

/* flights view */
main[hidden] { display: none; }
.flights { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1px; background: var(--line); }
.flights[hidden] { display: none; }
.flt-map { background: #000; min-height: 0; }
.flt-side { display: flex; flex-direction: column; gap: 1px; min-height: 0; background: var(--line); }
.flt-side .panel { flex: none; }
.flt-side .flt-delays-panel { flex: 1 1 0; min-height: 120px; }
.flt-side .flt-sel-panel { flex: 1 1 0; min-height: 160px; }
.flt-box { padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; font-size: 11px; }
.flt-hdr { margin-top: 3px; letter-spacing: 1px; font-size: 10px; }
.flt-legend .lg { display: grid; grid-template-columns: 10px 38px 1fr auto; gap: 6px; align-items: center; }
.flt-legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.flt-legend .d { color: var(--dim); font-size: 10px; }
.flt-legend .n { color: var(--hi); }
.flt-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.flt-btns .fkey { font-size: 10px; padding: 1px 6px; }
.flt-delays { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.flt-delay { display: grid; grid-template-columns: 38px 1fr; gap: 0 6px; padding: 3px 8px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--c, var(--dim)); font-size: 11px; cursor: pointer; }
.flt-delay:hover { background: #151515; }
.flt-delay b { grid-row: span 2; color: var(--hi); font-size: 12px; }
.flt-delay .why { color: var(--dim); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flt-delay.sev3 { --c: #ff4d4d; } .flt-delay.sev2 { --c: #ff9f1c; } .flt-delay.sev1 { --c: #ffd166; }
.flt-delays .empty, .flt-sel .dim { padding: 8px; color: var(--dim); margin: 0; font-size: 11px; }
.flt-sel { padding: 6px 8px; overflow-y: auto; flex: 1; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.flt-name { color: var(--hi); }
.flt-cat { align-self: flex-start; color: #000; font-weight: 600; padding: 0 8px; }
.flt-kv { display: grid; grid-template-columns: 74px 1fr; gap: 1px 8px; }
.flt-kv .k { color: var(--dim); font-size: 11px; }
.flt-raw { margin: 0; white-space: pre-wrap; word-break: break-word; font: 11px/1.4 var(--font); color: #cfcfcf; background: #0b0b0b; border: 1px solid var(--line); padding: 5px 6px; }
.flt-raw:empty { display: none; }
.flt-sel .alert { padding: 2px 6px; background: var(--down); color: #000; }
.flt-links { display: flex; gap: 6px; flex-wrap: wrap; }
.flt-links .fkey { font-size: 11px; }
.flt-tip { background: #000; color: var(--fg); border: 1px solid var(--fg); border-radius: 0; font: 11px var(--font); box-shadow: none; padding: 1px 6px; }
.flt-tip::before { display: none; }
.flt-delay-icon span { position: absolute; transform: translate(-50%, -50%); padding: 0 3px; font: 600 10px var(--font); color: #000; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); white-space: nowrap; cursor: pointer; }
.flt-ac svg { width: 16px; height: 16px; display: block; overflow: visible; cursor: pointer; }
.flt-ac svg path { fill: var(--hi); stroke: #000; stroke-width: 0.8; }
.flt-ac svg.lo path { fill: #9fe7ff; }
.flt-ac svg.gnd path { fill: #777; }
.flt-ac svg.emg path { fill: var(--down); }
.flt-ac { position: relative; }
.flt-ac .emg-ring { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid var(--down); border-radius: 50%; box-shadow: 0 0 12px var(--down); pointer-events: none; animation: emg-flash 0.9s ease-in-out infinite; }
@keyframes emg-flash { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.15; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .flt-ac .emg-ring { animation: none; } }
.flt-ac svg.sel path { fill: #fff; stroke: var(--fg); stroke-width: 1.4; }
@media (max-width: 900px) {
  .flights { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  .flt-side .flt-delays-panel, .flt-side .flt-sel-panel { flex: none; max-height: 50vh; }
  body.flt-open { height: auto; }
}

/* Air: search, aircraft colour key, route */
.flt-search { display: flex; gap: 4px; padding: 6px 8px; background: var(--panel); flex: none; }
.flt-search input { flex: 1; min-width: 0; background: #000; border: 1px solid var(--line); color: var(--fg); padding: 4px 6px; font: 12px var(--font); text-transform: uppercase; outline: none; }
.flt-search input:focus { border-color: var(--fg); }
.flt-search input::placeholder { color: var(--dim); }
.flt-ackey { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 10px; color: var(--dim); }
.flt-ackey .k { display: inline-flex; align-items: center; gap: 4px; }
.flt-ackey svg { width: 12px; height: 12px; }
.flt-ackey svg path, .flt-ac svg path { fill: var(--hi); stroke: #000; stroke-width: 0.8; }
.flt-ackey svg.lo path { fill: #9fe7ff; } .flt-ackey svg.gnd path { fill: #777; } .flt-ackey svg.emg path { fill: var(--down); }
.flt-pin span { position: absolute; transform: translate(-50%, -50%); font: 600 10px var(--font); padding: 0 4px; border: 1px solid var(--hi); background: #000; color: var(--hi); white-space: nowrap; }
.flt-pin.dest span { border-style: dashed; }
.flt-route { border: 1px solid var(--line); padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.flt-route .od { display: flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--hi); }
.flt-route .od .arrow { flex: 1; text-align: center; color: var(--dim); font-size: 11px; letter-spacing: -1px; overflow: hidden; white-space: nowrap; }
.flt-route .bar { height: 4px; background: var(--line); }
.flt-route .bar i { display: block; height: 100%; background: var(--hi); }
.flt-route .warn { color: #ff9f1c; font-size: 10px; }

/* status bar */
#status { display: flex; gap: 16px; padding: 2px 10px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; }
#status .ok { color: var(--up); }

/* dialogs */
dialog {
  background: #070707; color: var(--fg); border: 1px solid var(--fg); padding: 0; width: min(560px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(0, 0, 0, .75); }
dialog form { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
dialog h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: 1px; }
dialog label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dim); }
dialog label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); }
dialog input:not([type="checkbox"]), dialog select {
  background: #000; border: 1px solid var(--line); padding: 5px 6px; color: var(--fg); font-size: 13px; outline: none;
}
dialog input:focus, dialog select:focus { border-color: var(--fg); }
dialog input[type="checkbox"] { accent-color: var(--fg); }
dialog .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
dialog .row .fkey { padding: 4px 10px; }
dialog .spacer { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
fieldset { border: 1px solid var(--line); margin: 0; padding: 6px 8px; }
legend { font-size: 11px; padding: 0 4px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 3px 8px; }
.checks label { flex-direction: row; align-items: center; gap: 5px; color: var(--fg); font-size: 12px; }
.err { color: var(--down); margin: 0; min-height: 1em; font-size: 12px; }
.help { margin: 0; color: var(--fg); font: inherit; font-size: 12px; white-space: pre-wrap; }

/* responsive */
@media (max-width: 1200px) {
  main {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(220px, 1fr);
    grid-template-areas: "news tv" "news wx" "news map" "trends scores";
  }
  body { height: auto; }
  html, body { height: auto; }
  main { min-height: calc(100vh - 100px); }
  #newsPanel { max-height: calc(100vh - 100px); position: sticky; top: 0; }
  .quakes { flex: none; max-height: 130px; }
  #wxPanel { height: auto; min-height: 0; }
}
@media (max-width: 760px) {
  body { font-size: 12.5px; }
  .topbar { flex-wrap: wrap; padding: 6px 16px; gap: 8px; }
  #cmd { order: 3; flex-basis: 100%; }
  #clocks { gap: 8px; font-size: 11px; }
  #clocks .opt { display: none; }
  #userBtn { margin-left: auto; }
  main {
    display: flex; flex-direction: column; min-height: 0;
  }
  #tvPanel { order: -1; }
  #newsPanel { max-height: 70vh; position: static; }
  #mapPanel { max-height: 420px; }
  #trendsPanel, #scoresPanel { max-height: 60vh; }
  .list .row-h { grid-template-columns: 40px 1fr; padding: 4px 16px; }
  .list .row-h .s { display: none; }
  .list .row-h .n { display: none; }
  .list .row-h .h::before { content: attr(data-src) ' · '; color: var(--hi); }
  .detail, .list.compact .detail { padding-left: 64px; padding-right: 16px; }
  .panel h2 { padding: 4px 16px; }
  .wx, .channels { padding-left: 16px; padding-right: 16px; }
  #status { padding: 2px 16px; }
  .grid2 { grid-template-columns: 1fr; }
}