/* Home Air Quality: page styles. Theme tokens, then components and their responsive/state rules. */
:root { --card: #fff; --bad: #b42318; --sky: #2f7fb8; --accent: #1c7488; --accent-ink: #155a6b; --accent-soft: #e6f4f7; --accent-line: #a6d3dd;
  --ai-bg: #e7eef8; --ai-line: #cdd9ea; --pill: rgba(255, 255, 255, .72); --tile: #f4f7fb; --q-bg: #f6f8fb; --q-line: #d5dee6; --q-ink: #24384a;
  --q-hover: #e7eef5; --ico-sky: #e3f1fb; --ico-ink: #e7eef5; --ico-smoke: #f3eee8; --smoke: #8a5a32; --series-in: #0f2233; --series-out: #2f7fb8;
  --bar-lo: #d7f3e8; --bar-hi: #4fb08f; --bubble-ink: #fff; --mark-bg: #0f2233; color-scheme: light; --bg: #f8f9fb; --ink: #18181b; --soft: #52525b;
  --muted: #71717a; --faint: #a1a1aa; --line: #e8e8ec; --line-strong: #d4d4d8; --meter: #eeeff2; --track: #eeeff2; --grid: #ececf0; --warn: #b45309;
  --warn-fill: #f59e0b; --ico-warn: #fef3e2; --good: #15803d; --good-fill: #22a55a; --ico-good: #e8f6ee; --shadow: rgba(0, 0, 0, .05);
  --bubble-bg: #18181b; --sky-city: #9fb0c8; --win-lit: #f6efe2; --brand-ink: #0f2233; --brand-dot: #7fd3e6; --brand-dot-ink: #1f7d93;
  /* the logo: its day colours, its colours on a dark background, and its dot (green: fresh readings; grey: not) */
  --logo-day-house: #0f2233; --logo-day-roof: #7fd3e6; --logo-day-roof-a: .55; --logo-night-house: #eef5fa; --logo-night-roof: #3d8ea8;
  --logo-night-roof-a: 1; --logo-live: #4fd68f; --logo-idle: #a7adb6; --logo-glow-a: .32; }
:root[data-theme="dark"] { --good: #52c99d; --good-fill: #2fae82; --bad: #f07a6d; --sky: #6db3e8; --accent: #7fd3e6; --accent-ink: #a9e4f1;
  --accent-soft: #12323b; --accent-line: #2a5a68; --ai-bg: #121f35; --ai-line: #25385a; --pill: rgba(18, 28, 39, .78); --q-bg: #1a2633;
  --q-line: #2d3d50; --q-ink: #c8d3de; --q-hover: #243446; --ico-sky: #15304a; --ico-good: #153a2e; --ico-ink: #1f2c3a; --ico-smoke: #33271d;
  --smoke: #d8a77c; --bar-lo: #1e3d34; --bar-hi: #43c296; --bubble-bg: #e6edf4; --bubble-ink: #0f2233; --mark-bg: #1b3049;
  --shadow: rgba(0, 0, 0, .35); color-scheme: dark; --series-in: #7da2f5; --series-out: #4fc8e0; --bg: #0e0f12; --card: #17181c; --ink: #ececef;
  --soft: #a1a1aa; --muted: #8b8b94; --faint: #6b6b74; --line: #26272d; --line-strong: #3a3b42; --meter: #24252b; --track: #24252b; --grid: #26272d;
  --tile: #1f2025; --warn: #fbbf24; --warn-fill: #f59e0b; --ico-warn: #3a2c12; --brand-ink: #d6f1f7; --brand-dot: #7fd3e6;
  --brand-dot-ink: #9fe0ee; }
* { box-sizing: border-box; }

/* Page and shared controls */
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 Inter, system-ui, sans-serif; font-feature-settings: 'tnum' 1;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease; position: relative; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.custom { margin-top: 16px; padding: 8px 12px; transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px var(--shadow); }
.custom:hover { border-color: var(--line-strong); box-shadow: 0 10px 28px var(--shadow); }
.custom:hover .fold { color: var(--ink); }
.custom[open] { padding: 14px 16px 16px; }
.custom-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 28px; list-style: none;
  cursor: pointer; }
.custom-top::-webkit-details-marker { display: none; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--soft); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #3b82f6; color: #fff; display: grid; place-items: center; }
.avatar svg.i { width: 18px; height: 18px; }
.custom[open] .custom-top { align-items: center; grid-template-columns: auto 1fr auto; }
.brand { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--card);
  border: 1px solid var(--line); }
.brand svg { width: 16px; height: 16px; display: block; }
.brand.wx, .brand.bqe { border: 0; background: transparent; }
.brand.wx svg, .brand.bqe svg { width: 28px; height: 28px; }
.k .brand { display: grid; width: 22px; height: 22px; border-radius: 6px; }
.k .brand svg { width: 14px; height: 14px; }
.k .brand.wx svg, .k .brand.bqe svg { width: 22px; height: 22px; }
.brand.noaa { border: 0; background: transparent; }
.brand.noaa svg { width: 28px; height: 28px; }
.k .brand.noaa svg { width: 22px; height: 22px; }
.custom[open] .fold { margin-left: 0; transform: rotate(180deg); }
.fold { justify-self: end; align-self: center; margin-left: 0; color: var(--soft); transition: transform .15s ease; }
.blocks { display: grid; gap: 14px; margin-top: 14px; }
.sub { display: grid; grid-template-columns: 108px 1fr; gap: 8px; align-items: start; margin-top: 4px; color: var(--soft); font-size: 14px; }
.custom .view { margin-top: 8px; }
.custom .view.profiles .chip { background: var(--card); border-color: var(--line); color: var(--ink); font: 500 14px/1.2 Inter, sans-serif;
  padding: 6px 10px; }
.page { max-width: 1240px; margin: 0 auto; padding: 32px 44px 64px; position: relative; z-index: 1; padding-top: 20px !important;
  transition: opacity .5s ease, visibility .5s; }
.bar { display: flex; align-items: flex-start; justify-content: flex-start; gap: 16px; }
.chart-head, .card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-head { flex-wrap: wrap; row-gap: 2px; }   /* a long reading line drops under the title instead of squeezing it */
.chart-head b, .seg button { white-space: nowrap; }   /* labels stay on one line ("1 h", "PM2.5 fine particles") */
.seg button { flex: none; }
.chart-bar { flex-wrap: wrap; row-gap: 8px; }   /* on a narrow screen with large text the range buttons go under History, never cut off */
.site { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; font: 700 21px/1 Inter, sans-serif; letter-spacing: -.02em;
  font-weight: 650 !important; }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--good); flex: none; }
.icon-btn { border: 1px solid var(--line); background: var(--card); width: 34px; height: 34px; border-radius: 99px; display: grid;
  place-items: center; padding: 0; cursor: pointer; color: var(--soft);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px; padding: 6px 8px 6px 10px;
  display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1.2 Inter, sans-serif; }
.view { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.view.profiles { margin-top: 8px; gap: 2px; }
.view.profiles .chip { background: transparent; border-color: transparent; color: var(--faint); font: 500 13px/1.2 Inter, sans-serif;
  padding: 2px 6px; pointer-events: none; }
.view.profiles svg.i { width: 16px; height: 16px; }
.ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.ico.sky { background: var(--ico-sky); color: var(--sky); }
.ico.good { background: var(--ico-good); color: var(--good); }
.ico.warn { background: var(--ico-warn); color: var(--warn); }
.ico.ink { background: var(--ico-ink); color: var(--ink); }
.ico.smoke { background: var(--ico-smoke); color: var(--smoke); }
.q { position: relative; width: 28px; height: 28px; border-radius: 99px; border: 1px solid var(--q-line); background: var(--q-bg);
  color: var(--q-ink); display: grid; place-items: center; padding: 0; }
.q:hover, .q:focus-visible { background: var(--q-hover); color: var(--ink); }
.q svg.i { width: 18px; height: 18px; display: block; }
.q .bubble { display: none; position: absolute; z-index: 2; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  background: var(--bubble-bg); color: var(--bubble-ink); border-radius: 10px; padding: 10px 12px; font: 400 13px/1.4 Inter, sans-serif;
  text-align: left; width: 280px; }
.q .bubble strong { display: block; font-weight: 650; margin-bottom: 6px; }
.q .bubble span { display: block; margin-top: 4px; }
.q:hover .bubble, .q:focus .bubble, .q:focus-visible .bubble { display: block; }
.updated { color: var(--soft); font-size: 13px; white-space: nowrap; transition: color .2s ease; }

/* The summary allows its explanation panels to extend past the card. */
.sum-card { margin-top: 22px; border-radius: 22px; transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(115deg, #c7d2fe, #a5e8f5 45%, #ddd0fb) border-box;
  box-shadow: 0 1px 2px var(--shadow), 0 18px 40px -18px rgba(79, 70, 229, .22); position: relative; padding: 20px 28px 0 !important;
  border: 1.5px solid transparent; border-width: 1.5px;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(115deg, #7fd3e6, color-mix(in srgb, #7fd3e6 55%, var(--card)) 50%, #4fb3c8) border-box !important;
  box-shadow: 0 1px 2px var(--shadow), 0 18px 40px -22px color-mix(in srgb, #1f7d93 45%, transparent); overflow: visible !important; z-index: 5; }
.updated.stale { color: var(--warn); }
.icon-btn.pill { width: auto; height: 30px; padding: 0 12px 0 9px; gap: 6px; display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: 500 13px/1 Inter, sans-serif;
  box-shadow: 0 1px 2px var(--shadow); }
.icon-btn.pill svg.i { width: 15px; height: 15px; }
.sum-card .q { background: var(--card); border-color: transparent; }
svg.ts { display: block; width: 100%; height: auto; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
svg.ts text { fill: var(--soft); font: 11px Inter, sans-serif; }
.k { display: flex; align-items: center; gap: 8px; font: 600 12px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--soft); }
.k .ico { width: 22px; height: 22px; border-radius: 6px; }
.k i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--good)); }
h2 { display: flex; margin: 40px 0 14px; gap: 10px; align-items: baseline; font: 500 12.5px/1 Inter, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-top: 48px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 10px !important; }

/* Config-disabled sections and profiles stay hidden even when a component sets display. */
[data-app][hidden], [data-profile][hidden] { display: none !important; }
@media (min-width: 901px) {
  .grid4:has(> .card[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero { margin-top: 8px; font: 650 20px/1.2 Inter, sans-serif; letter-spacing: -.02em; color: var(--c, var(--ink)); }
.ok { color: var(--good); font-size: 13px; font-weight: 600; }
.pm { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--soft); }
.pm b { color: var(--ink); font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--soft); padding: 0 8px 8px; }
td { padding: 8px; border-top: 1px solid var(--line); }
tr.you td { font-weight: 650; }
.nb { display: grid; gap: 7px; }
.warn { color: var(--warn); }
@media (max-width: 900px) {
  .page { padding: 22px 16px 40px; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .grid2, .sub { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .page { padding: 16px 12px 36px; overflow-x: clip; }
  .site { font-size: 17px; }
  .grid4 { grid-template-columns: 1fr; }
  .custom-top { column-gap: 12px; }
}
.live.warn { background: var(--warn-fill); }
.live.bad { background: var(--bad); }
.ok.warn { color: var(--warn); }
.ok.bad { color: var(--bad); }
.pending { color: var(--soft); }
#nb { display: grid; gap: 0 !important; margin: 0 -12px; }
.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink);
  box-shadow: 0 1px 2px var(--shadow), 0 4px 14px rgba(28, 116, 136, .16); }
.icon-btn:active { transform: scale(.94); box-shadow: none; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn[aria-busy="true"] { cursor: progress; color: var(--accent); }
.icon-btn svg { will-change: transform; }
.sum-card::before { content: ""; position: absolute; left: 26px; right: 26px; border-radius: 2px; pointer-events: none; opacity: 0;
  transition: opacity .3s ease; height: 3px; top: -1.5px;
  background: linear-gradient(90deg, transparent, var(--brand-dot) 50%, transparent) no-repeat !important; background-size: 30% 100% !important;
  display: none; }
@media (prefers-reduced-motion: reduce) {
  .sum-card[aria-busy="true"]::before { background: var(--accent); }
  .icon-btn { transition: none; }
  .icon-btn:active { transform: none; }
}
svg.ts .ts-grid { stroke: var(--grid); }
svg.ts .ts-line { stroke-linejoin: round; fill: none; stroke-width: 2.4; stroke-linecap: round; }
svg.ts .ts-in { stroke: var(--series-in); }
svg.ts .ts-out { stroke: var(--series-out); }
.card { transition: background-color .25s ease, border-color .25s ease, color .25s ease; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 1px 2px var(--shadow); padding: 22px 24px; }
.stale-note { margin: 8px 4px 0; color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  body, .card, .custom, .sum-card { transition: none; }
}
h2 span { font: 400 13.5px/1.2 Inter, sans-serif !important; color: var(--muted) !important; letter-spacing: 0 !important;
  text-transform: none !important; }
.home { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; margin-left: 12px; }
.home b { font: 650 14px/1.2 Inter, sans-serif; color: var(--ink); }
.home em { font-style: normal; font-size: 12.5px; color: var(--muted); }
/* a long name (a public monitor's: "E Houston St between Clinton St & Attorney St") ends in "…"; the full one is its tooltip */
.home { min-width: 0; max-width: 240px; }
.home b, .home em { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .sum-card { background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(115deg, #3b4a8a, #1f5f6e 45%, #4b3d7a) border-box; }
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 40px 0 14px; margin-top: 32px !important;
  margin-bottom: 16px !important; }
.sechead h2 { margin: 0; font: 500 12.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-top: 0 !important; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--meter); border-radius: 10px; }
.seg button { border: 0; background: transparent; color: var(--soft); font: 550 12.5px/1 Inter, sans-serif; padding: 7px 11px; border-radius: 7px;
  cursor: pointer; transition: background-color .15s ease, color .15s ease; font-feature-settings: 'tnum' 1; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chart-head b em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 6px; }
@media (max-width: 700px) {
  .home { display: none; }
  .sechead { flex-wrap: wrap; align-items: center; }
}

/* Home menu. Desktop and phone layouts retain their own cascade contexts. */
.bar details.custom { margin: 0; background: transparent; border: 0; box-shadow: none; padding: 0; position: relative; order: 1;
  margin-left: 0 !important; }
.bar details.custom:hover { box-shadow: none; }
.bar .custom-top { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; border-radius: 12px; padding: 2px 4px; }
.bar .custom-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bar .home { margin: 0; text-align: left; align-items: flex-start; }
.bar .avatar { transition: box-shadow .15s ease; position: relative; }
.bar .custom-top:hover .avatar, .bar .custom[open] .avatar { box-shadow: 0 0 0 4px var(--accent-soft); }
.bar .custom-top .fold { display: none; }
.mc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--soft); font-weight: 500; }
.mc-status.warn { color: var(--warn); }
.mc-status.bad { color: var(--bad); }
.mc-status .live { width: 7px; height: 7px; }
.s-src { font-weight: 500; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; margin-left: 4px; position: relative;
  padding: 2px 4px; border-radius: 8px; outline: none; cursor: pointer; }
@media (min-width: 701px) {
  .bar { position: relative; align-items: center; padding-bottom: 0; gap: 12px; }
}
:root[data-theme="light"] { --series-in: #3b6fe0; --series-out: #22a6c4; --bg: #f8f9fb; --ink: #18181b; --soft: #52525b; --muted: #71717a;
  --faint: #a1a1aa; --line: #e8e8ec; --line-strong: #d4d4d8; --meter: #eeeff2; --track: #eeeff2; --grid: #ececf0; --warn: #b45309;
  --warn-fill: #f59e0b; --ico-warn: #fef3e2; --good: #15803d; --good-fill: #22a55a; --ico-good: #e8f6ee; --shadow: rgba(0, 0, 0, .05);
  --bubble-bg: #18181b; }
:root:not([data-theme]) { --series-in: #3b6fe0; --series-out: #22a6c4; }
.mc-head { display: flex; justify-content: space-between; gap: 12px; border: 0; margin: 0 -22px 18px; padding: 16px 22px;
  border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--line); align-items: center;
  background: linear-gradient(105deg, color-mix(in srgb, var(--tint) 12%, var(--card)) 0%, color-mix(in srgb, var(--tint) 4%, var(--card)) 50%, var(--card) 100%);
  position: relative; overflow: hidden; isolation: isolate; min-height: 104px; }
.mc-kind { font: 650 12.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; line-height: 1 !important; }
.mc-kind.in { color: var(--series-in); }
.mc-kind.out { color: var(--series-out); }
.mc-name { color: var(--ink); margin-top: 5px !important; font-size: 16px !important; line-height: 1.25 !important; }
.mc-status.good { color: var(--soft); }
.mc-hero { display: flex; align-items: center; gap: 20px; background: none !important; border-radius: 0; margin-top: 4px; padding: 6px 0 20px;
  border-bottom: 1px solid var(--line); }
.mc-ring { position: relative; width: 80px; height: 80px; flex: none; }
.mc-ring svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.mc-ring-bg { fill: none; stroke: color-mix(in srgb, var(--ink) 8%, transparent); stroke-width: 6; }
.mc-ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; }
.mc-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.mc-ring b { font: 700 24px/1 Inter, sans-serif; letter-spacing: -.02em; font-feature-settings: 'tnum' 1; }
.mc-ring span { font-size: 11px; color: var(--muted); margin-top: 3px; }
.mc-hero-k { font: 650 13px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.mc-hero-s { margin-top: 5px; font-size: 13.5px; color: var(--soft); }
.mc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; margin-top: 20px; }
.mc-m span { display: block; font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mc-m b { display: block; margin-top: 8px; font: 650 26px/1 Inter, sans-serif; letter-spacing: -.02em; color: var(--ink);
  font-feature-settings: 'tnum' 1; }
.mc-m b small { font: 400 13px/1 Inter, sans-serif; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.mc-m em { display: block; margin-top: 7px; font-style: normal; font-size: 13px; color: var(--soft); }
.mc-bar { margin-top: 9px; height: 4px; border-radius: 99px; background: var(--meter); overflow: hidden; }
.mc-bar i { display: block; height: 100%; border-radius: 99px; }
.mc-pm { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px !important; text-align: left !important; }
.mc-pm span { display: block; font: 600 10.5px/1.2 Inter, sans-serif !important; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.mc-pm b { display: block; margin-top: 6px; font: 650 15px/1 Inter, sans-serif !important; color: var(--ink); white-space: nowrap; }
svg.ts .ts-line.ts-in { stroke: var(--series-in); }
svg.ts .ts-line.ts-out { stroke: var(--series-out); }
svg.ts .ts-area { stroke: none; }
svg.ts .ts-area.ts-in { fill: var(--series-in); opacity: .1; }
svg.ts .ts-area.ts-out { fill: var(--series-out); opacity: .1; }
svg.ts .ts-sw.ts-in { fill: var(--series-in); }
svg.ts .ts-sw.ts-out { fill: var(--series-out); }
svg.ts .ts-legend text { fill: var(--soft); font: 500 11.5px Inter, sans-serif; }
@media (max-width: 700px) {
  .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-hero { gap: 14px; }
}

/* Neighborhood table. An expanded row does not shift the alternating bands. */
.nbt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.nbt th { text-align: left; font: 500 13.5px/1 Inter, sans-serif; color: var(--muted); padding: 4px 10px 12px; border-bottom: 1px solid var(--line);
  display: table-cell; border-top: 0; }
.nbt th.r { text-align: right; vertical-align: bottom; }
.nbt td.r { text-align: right; }
.nbt td { padding: 13px 10px; color: var(--soft); white-space: nowrap; font-feature-settings: 'tnum' 1; display: table-cell; border-top: 0; }
.nbt tbody tr:nth-child(even of [data-id]) td { background: var(--bg); }
.nbt tbody tr td:first-child { border-radius: 9px 0 0 9px; }
.nbt tbody tr td:last-child { border-radius: 0 9px 9px 0; }
.nbt td.dot { width: 18px; padding-right: 0; }
.nbt td.dot i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--good-fill); opacity: .85; }
.nbt td.dist { width: 72px; color: var(--muted); }
.nbt td.loc { color: var(--ink); white-space: normal; width: 100%; }
.nbt td.pm { width: 64px; font-size: 15px !important; font-weight: 650; }
.nbt td.pm.good { color: var(--good); }
.nbt td.pm.warn { color: var(--warn); }
.nbt th:nth-child(5), .nbt td:nth-child(5) { width: 64px; }
.nbt th:nth-child(6), .nbt td:nth-child(6) { width: 58px; }
.nbt th.nbbar { width: 300px; padding-left: 22px; vertical-align: bottom; padding-bottom: 12px; }
.nbt td.nbbar { width: 300px; padding-left: 22px; }
.nbt td.nbbar span { display: block; height: 6px; border-radius: 99px; background: var(--meter); width: 280px; position: relative; overflow: visible; }
.nbt td.nbbar i { display: block; height: 100%; border-radius: 99px; }
.nbt td.nbbar i.good { background: var(--good-fill); }
.nbt td.nbbar i.warn { background: var(--warn-fill); }
.nbt tr.you td { background: var(--accent-soft) !important; }
.nbt tr.you td.dist, .nbt tr.you td.loc { color: var(--accent); font-weight: 600; }
@media (max-width: 700px) {
  .nbt th:nth-child(5), .nbt td:nth-child(5), .nbt th:nth-child(6), .nbt td:nth-child(6), .nbt .nbbar, .nbt .dot { display: none; }
  .nbt td { padding: 11px 6px; }
  .nbt td.dist { width: 56px; }
}
.nbt #nb { display: table-row-group !important; margin: 0 !important; gap: 0 !important; }
.nbt tr { display: table-row; }
.nb:has(.nbt) { display: block; }
@media (max-width: 1100px) {
  .nbt td.nbbar span { width: 160px; }
}
@media (min-width: 701px) {
  .bar details.custom { position: relative; }
  .bar .who { order: 1; }
}
@media (max-width: 700px) {
  .bar { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .bar .site { font-size: 16px; gap: 8px; min-width: 0; }
  .bar .site svg.mark { width: 26px; height: 26px; }
  .bar details.custom { width: auto; }
  .bar .home { display: none !important; }
  .bar .avatar { width: 32px; height: 32px; }
  .bar .custom .blocks { left: auto; width: calc(100vw - 32px); }
}
.bar .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; margin-left: -4px; }
.bar .custom[open] .chev { transform: rotate(180deg); }
.bar .who { align-items: center; gap: 10px; flex-direction: row; }
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 6px; margin-bottom: 4px; }
.pop-head b { display: block; font: 650 15px/1.2 Inter, sans-serif; color: var(--ink); }
.pop-head span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.pop-close { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--soft); display: grid;
  place-items: center; cursor: pointer; flex: none; }
.pop-close:hover { background: var(--bg); color: var(--ink); }
.pop-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pop-close svg.i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .bar .custom[open] .blocks { animation: pop-in .14s cubic-bezier(.2, .7, .2, 1); }
  @keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
}
.bar .who .chev { margin-left: -4px; order: 2; }
.bar .site { order: -1; color: var(--title-ink, var(--ink)); transition: color 1.2s ease; align-items: center; }
@media (min-width: 701px) {
  .bar .custom-top { display: flex; flex-direction: row; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line);
    border-radius: 99px; padding: 5px 6px 5px 14px; box-shadow: 0 1px 2px var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; }
  .bar .custom-top:hover, .bar .custom[open] .custom-top { border-color: var(--line-strong); box-shadow: 0 4px 14px var(--shadow); }
  .bar .avatar { width: 34px; height: 34px; }
  .bar .home b { font-size: 13.5px; }
  .bar .home em { font-size: 12px; }
  .bar .custom-top:hover .avatar, .bar .custom[open] .avatar { box-shadow: none; }
  .bar .who .chev { margin: 0 4px 0 -2px; }
}
@media (max-width: 700px) {
  .bar .custom-top { border-radius: 99px; padding: 3px 6px 3px 3px; border: 1px solid var(--line); background: var(--card); flex-direction: row;
    align-items: center; gap: 10px; padding-left: 10px; }
}
.bar .custom .blocks { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; margin: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(16, 24, 40, .16); width: min(460px, calc(100vw - 32px));
  padding: 16px 16px 10px; display: block; }
.pg + .pg { margin-top: 14px; }
.pg h4 { margin: 0 0 6px; font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pg .view { margin-top: 4px !important; gap: 6px; }
.pg .view .chip { padding: 5px 9px !important; font-size: 13.5px !important; }
.pg .view.profiles .chip svg.i { width: 20px; height: 20px; }
.dsp-pop .temp-seg { display: grid !important; grid-template-columns: repeat(2, 1fr); width: 100%; margin-top: 2px; }
.dsp-pop .temp-seg button { display: inline-flex; align-items: center; justify-content: center; }
.temp-seg button.on, .temp-seg button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.plist { list-style: none; margin: 0; padding: 0; }
.pr { display: grid; align-items: center; gap: 12px; border-radius: 10px; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 2px; padding: 7px 8px; position: relative; }
.pr + .pr { border-top: 1px solid var(--line); border-radius: 0; }
.pr-ic { display: grid; place-items: center; width: 40px !important; height: 40px !important; }
.pr-ic .ico, .pr-ic .brand { width: 28px !important; height: 28px !important; }
.pr-t { min-width: 0; }
.pr-t b { display: block; font: 550 14px/1.25 Inter, sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 18px; }
.pr-t em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; line-height: 17px; margin-top: 2px; }
.nbt tr.you td.dot i { background: var(--accent); opacity: 1; }
.nbt td.r:not(.pm) { color: var(--muted); }
.nbt tbody tr { cursor: default; }
.nbt tbody tr td { transition: background-color .12s ease; }
.nbt tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, var(--card)) !important; }
.nbt tbody tr:hover td.loc { color: var(--ink); }
.nbt tbody tr.you:hover td { background: color-mix(in srgb, var(--accent) 14%, var(--card)) !important; }
.nbt td.loc .nb-ext { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -4px 0 -4px 2px;
  vertical-align: middle; border-radius: 6px; color: var(--muted); text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.nbt td.loc .nb-ext svg.i { width: 13px; height: 13px; transition: transform .15s ease; }
.nbt td.loc .nb-ext:hover { color: var(--accent-ink); background: var(--accent-soft); }
.nbt td.loc .nb-ext:hover svg.i { transform: translate(1px, -1px); }
.nbt td.loc .nb-ext:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .nbt td.loc .nb-ext:hover svg.i { transform: none; }
}
.nbt th.nb-tg, .nbt td.nb-tg { width: 30px; padding-left: 0; padding-right: 6px; text-align: center; }
.nbt .nb-tgb { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px 0; padding: 0; border: 0; border-radius: 7px;
  background: none; color: var(--muted); cursor: pointer; }
.nbt .nb-tgb svg.i { width: 15px; height: 15px; transition: transform .18s ease; }
.nbt .nb-tgb:hover { color: var(--ink); }
.nbt .nb-tgb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nbt tbody tr.nb-can { cursor: pointer; }
.nbt tbody tr.nb-open .nb-tgb { color: var(--ink); }
.nbt tbody tr.nb-open .nb-tgb svg.i { transform: rotate(180deg); }

/* Keep the open row joined to its detail band, including map highlight and hover states. */
.nbt tbody tr.nb-open td { background: var(--q-bg) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.nbt tbody tr.nb-open:hover td { background: var(--q-bg) !important; }
.nbt tbody tr.nb-detail td { background: var(--q-bg) !important; padding: 2px 12px 14px; white-space: normal; border-radius: 0 0 9px 9px;
  cursor: default; }
.nb-card .nbt tbody tr.nb-open.hl td { background: var(--q-bg) !important; }
.nb-card:not(.nb-all) tr.nb-extra + tr.nb-detail { display: none; }
.nbd-kv { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 20px; margin: 0 0 10px; }
.nbd-kv dt { font: 500 11.5px/1.2 Inter, sans-serif; color: var(--muted); }
.nbd-kv dd { margin: 3px 0 0; font: 600 14px/1.3 Inter, sans-serif; color: var(--ink); }
.nbd-kv dd small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.nbd-kv dd.good, .nbd-band.good { color: var(--good); }
.nbd-kv dd.warn, .nbd-band.warn { color: var(--warn); }
.nbd-kv dd.bad, .nbd-band.bad { color: var(--bad); }
.nbd-meta { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nbd-band { font-weight: 600; display: none; }
.nbd-sep { display: none; }
.nbd-q { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 12px;
  box-sizing: border-box; border: 1px solid var(--q-line); border-radius: 10px; background: transparent; color: var(--accent-ink);
  font: 550 13.5px/1 Inter, sans-serif; text-decoration: none; }
.nbd-q:hover { border-color: var(--line-strong); }
.nbd-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nbd-q svg.i { width: 15px; height: 15px; flex: none; }
@media (max-width: 700px) {
  .nbt td.loc .nb-ext { display: none; }
  .nbt tbody tr.nb-detail td { padding: 2px 10px 12px; }
}
@media (min-width: 701px) {
  .nbt tbody tr.nb-detail td { padding: 0 12px 10px 38px; }
  .nbd { display: flex; align-items: center; gap: 10px 24px; }
  .nbd-kv { display: none; }
  .nbd-band, .nbd-sep { display: inline; }
  .nbd-meta { margin: 0; font-size: 13px; color: var(--soft); }
  .nbd-q { width: auto; min-height: 0; height: 32px; padding: 0 10px; margin-left: auto; flex: none; border-radius: 8px; font-size: 13px; }
}
.scale-h { display: block; width: 280px; padding-bottom: 0; }
.scale-h > span:first-child { display: block; margin: 0; }
.scale-k { position: relative; display: block; height: 14px; font: 500 13.5px/1 Inter, sans-serif !important; color: var(--muted);
  transform: translateY(1px); }
.scale-k i { position: absolute; top: 0; font-style: normal; white-space: nowrap; }
.scale-k i:first-child { left: 0; }
.scale-k i:last-child { right: 0; }
.scale-k i.lim { transform: translateX(-50%); color: var(--warn); font-weight: 500; }
.nbt td.nbbar span::after { content: ""; position: absolute; left: var(--lim); top: -3px; bottom: -3px; width: 1.5px; background: var(--warn-fill);
  opacity: .6; border-radius: 1px; }
@media (max-width: 1100px) {
  .scale-h { width: 160px; }
}
.card .kv { margin: 14px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.card .kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px; }
.card .kv > div:last-child { border-bottom: 0; }
.card .kv dt { color: var(--muted); }
.card .kv dd { margin: 0; color: var(--ink); font-weight: 550; text-align: right; font-feature-settings: 'tnum' 1; }
.card .kv dd.good { color: var(--good); }
.card .kv dd.warn { color: var(--warn); }
.card .sub { margin-top: 4px; }
.grid4 .card .sub { max-width: none; width: 100%; display: block; font-size: 13.5px; margin-top: 3px; }
.grid4 > .card { position: relative; padding: 18px 20px 14px; display: flex; flex-direction: column; overflow: visible !important;
  border-top: 1px solid var(--line); container-type: inline-size; }
.grid4 > .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--edge, var(--line-strong)); opacity: .9;
  display: none; }
.grid4 .card-top { align-items: center; }
.grid4 .card-top .k .srcl { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 450; color: var(--muted); margin-left: -3px; }
.grid4 .card-top .q { width: 22px; height: 22px; border-color: transparent; background: transparent; color: var(--muted); margin-left: auto;
  flex: none; }
.grid4 .card-top .q svg.i { width: 15px; height: 15px; }
.grid4 .hero { margin-top: 12px; font-size: 22px; }
.grid4 .card .kv { margin-top: 12px; padding-top: 2px; }
.grid4 .card .kv > div { padding: 6px 0; font-size: 13px; }
.grid4 .card .kv dt { color: var(--faint); }
.grid4 .card .kv dd { font-weight: 500; }

/* Live sky and weather controls */
.sky { overflow: hidden; pointer-events: none; position: fixed; inset: 0; height: auto; -webkit-mask-image: none; mask-image: none; z-index: 0; }
.sky.off { display: none; }
.sky-grad { position: absolute; inset: 0; transition: background 1.4s cubic-bezier(.2, .7, .2, 1), opacity .4s ease; }
.sky-haze { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background: linear-gradient(180deg, rgba(186, 166, 132, .55), rgba(176, 158, 128, .85)); }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-s input { accent-color: var(--accent); grid-column: 1 / -1; width: 100%; }
.fx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fx-presets button { height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 500 12.5px/1 Inter, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fx-presets button:hover { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }
.fx-s b { font-feature-settings: 'tnum' 1; font-weight: 550; color: var(--ink); }
.wx-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.wx-row .hero { margin-top: 0 !important; }
.compass { width: 44px; height: 44px; flex: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.c-ring { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.c-ticks { stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.compass text { font: 600 9px Inter, sans-serif; fill: var(--muted); }
#needle { transform-origin: 32px 32px; transition: transform 1.1s cubic-bezier(.34, 1.4, .5, 1); }
.c-dial { transform-origin: 32px 32px; }
@media (hover: hover) {
  .compass { cursor: pointer; }
}
.c-head { fill: var(--accent); }
.c-tail { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.c-hub { fill: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  #needle, .sky-grad { transition: none; }
}
html.sky-on body { background: transparent; }
html.sky-on { background: #0e1626; }
html.sky-dark .bar .site, html.sky-dark h2, html.sky-dark .sechead h2 { color: #f2f6fb; }
html.sky-dark h2 span, html.sky-dark .lead { color: rgba(236, 242, 250, .78) !important; }
html.sky-dark .lead b { color: #fff; }
html.sky-dark .seg:not(.theme-seg):not(.temp-seg) { background: rgba(255, 255, 255, .14); }
html.sky-dark .seg:not(.theme-seg):not(.temp-seg) button { color: rgba(240, 245, 252, .85); }
html.sky-dark .seg:not(.theme-seg):not(.temp-seg) button.on { color: var(--ink); }
html.sky-on .card, html.sky-on .custom-top { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .10); }
.theme-seg { margin-top: 2px; }
.theme-seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.fx-preview summary { cursor: pointer; list-style: none; display: flex !important; align-items: center; gap: 8px; padding: 10px 0;
  font: 550 13.5px/1.2 Inter, sans-serif !important; color: var(--ink) !important; }
.fx-preview summary::-webkit-details-marker { display: none; }
.fx-preview summary::after { content: "▾"; font-size: 11px; color: var(--muted); transition: transform .15s ease; margin-left: 2px; order: 9; }
.fx-preview[open] summary::after { transform: rotate(180deg); }
.bar .vsum { display: flex; line-height: 1.2; padding-right: 14px; border-right: 1px solid var(--line); flex-direction: row; align-items: center;
  gap: 12px; }
.fx-list { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; cursor: pointer; }
.sw-row + .sw-row { border-top: 1px solid var(--line); }
.sw-row b { display: block; font: 550 13.5px/1.2 Inter, sans-serif; color: var(--ink); }
.sw-row em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 1px; }
.sw-row:hover { background: var(--bg); }
input[role="switch"] { appearance: none; -webkit-appearance: none; flex: none; width: 34px; height: 20px; border-radius: 99px;
  background: var(--line-strong); position: relative; cursor: pointer; transition: background-color .15s ease; margin: 0; }
input[role="switch"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s ease; }
input[role="switch"]:checked { background: var(--accent); }
input[role="switch"]:checked::after { transform: translateX(14px); }
input[role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-preview { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.fx-badge { font: 600 11px/1 Inter, sans-serif; padding: 4px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--good-fill) 14%, var(--card)); color: var(--good); }
.fx-badge.is-preview { background: var(--accent-soft); color: var(--accent-ink); display: none; }
.fx-back { margin-left: auto; height: 24px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: 500 12px/1 Inter, sans-serif; cursor: pointer; flex: none; white-space: nowrap; }
.fx-back:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.fx-back[hidden] { display: none; }
.fx-preview[open] { padding-bottom: 12px; }
.fx-preview .fx-presets { margin: 2px 0 10px; gap: 5px; }
.fx-preview .fx-presets button { height: 26px; font-size: 12px; padding: 0 9px; }
.fx-sliders { display: grid; gap: 9px; }
.fx-s { display: grid !important; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 0 !important; font-size: 12.5px; color: var(--soft); }
.fx-s input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 99px;
  background: var(--meter); margin: 4px 0 2px; }
.fx-s input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--card);
  border: 2px solid var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); cursor: grab; }
.fx-s input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--card);
  border: 2px solid var(--accent); cursor: grab; }
.fx-s input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.2s ease; }
.sky-sun { position: absolute; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 246, 220, .55), rgba(255, 236, 200, .18) 40%, transparent 72%);
  transition: left 1.2s ease, top 1.2s ease, opacity 1.2s ease; mix-blend-mode: screen; }
.sky-sun.warm { background: radial-gradient(closest-side, rgba(255, 196, 140, .6), rgba(255, 170, 120, .2) 42%, transparent 72%); }
.site-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sky-cap { margin: 0 0 0 40px; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; transition: color 1.2s ease;
  display: flex; align-items: center; gap: 4px 14px; line-height: 22px; height: 22px; flex-wrap: nowrap; overflow: hidden; column-gap: 12px;
  row-gap: 0; }
.sky-cap > .cap-i { flex: none; }   /* an item never shrinks: the line overflows and fitCap drops whole items (never "Hazy ai") */
.sky-cap:empty { display: none; }
html.sky-dark .sky-cap { color: rgba(236, 242, 250, .82); }
html.sky-on:not(.sky-dark) .sky-cap { color: #23384d; }
@media (max-width: 700px) {
  .sky-cap { margin-left: 34px; font-size: 12px; }
}
.sky-quick { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--accent-soft); color: var(--accent-ink); margin-left: -8px; transition: background-color .15s ease, color .15s ease; }
.sky-quick svg.i { width: 17px; height: 17px; }
.sky-quick:hover { background: color-mix(in srgb, var(--accent) 20%, var(--card)); }
.sky-quick.off { background: var(--bg); color: var(--muted); }
.sky-quick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) {
  .sky-quick { margin-left: 0; }
}
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .bar .who { order: 1; }
  .bar .vsum { padding-right: 10px; }
}
.av-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 2px var(--card); }
.av-dot.warn { background: var(--warn-fill); }
.av-dot.bad { background: var(--bad); }
#sky-clouds { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(2px); }
.cap-i { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; line-height: 22px; }
.cap-i svg.i { width: 14px; height: 14px; opacity: .85; transition: transform .8s cubic-bezier(.34, 1.3, .5, 1); }
.cap-i.sun svg.i { color: #f2b544; opacity: 1; }
.cap-i.dusk svg.i { color: #f0956a; opacity: 1; }
html.sky-dark .cap-i.night svg.i { color: #cfdcff; }
.cap-i.air svg.i { opacity: 1; stroke-width: 2.4; color: var(--good-fill); }
.cap-i.air.warn svg.i { color: var(--warn-fill); }
.cap-i.air.bad svg.i { color: var(--bad); }
html.sky-dark .cap-i.air svg.i { color: #5fd6a4; }
html.sky-dark .cap-i.air.warn svg.i { color: #f3b55a; }
html.sky-dark .cap-i.air.bad svg.i { color: #ff8a80; }
.cap-tag { font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 3px 6px; border-radius: 99px;
  background: rgba(255, 255, 255, .18); }
html.sky-on:not(.sky-dark) .cap-tag { background: rgba(15, 34, 51, .08); }
.bar .who .home { order: 1; }
.bar .who .avatar { order: 0; }
#sky-rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-flash { position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(225, 235, 255, .95), rgba(200, 215, 255, .4) 60%, transparent); opacity: 0;
  pointer-events: none; }
.cap-i.storm svg.i { color: #ffd56a; opacity: 1; }
.cap-i.rainy svg.i { color: #9cc4ff; opacity: 1; }
.sky-front { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.sky-front canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.front-flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(90% 70% at var(--bx, 50%) 0%, rgba(214, 226, 255, .85), rgba(170, 190, 255, .25) 55%, transparent 80%); }
@media (prefers-reduced-motion: reduce) {
  .sky-flash, .sky-front { display: none; }
}
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; z-index: 60; top: calc(100% + 10px);
  left: 50%; transform: translateX(-50%); width: 240px; padding: 9px 11px; border-radius: 10px; background: var(--bubble-bg, #0f2233);
  color: var(--bubble-ink, #fff); font: 400 12.5px/1.45 Inter, sans-serif; letter-spacing: 0; text-transform: none; white-space: normal;
  text-align: left; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); pointer-events: none; }
.chip[data-tip]:hover::after { top: calc(100% + 8px); }
.bar details.dsp { position: relative; margin-left: auto; }
.dsp-top { list-style: none; display: flex; align-items: center; padding: 5px 4px 5px 5px; border-radius: 99px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease; gap: 2px; }
.dsp-top::-webkit-details-marker { display: none; }
.dsp-top:hover, .dsp[open] .dsp-top { border-color: var(--line-strong); box-shadow: 0 4px 14px var(--shadow); }
.dsp-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dsp-b { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: transparent;
  color: var(--soft); margin: 0 !important; }
.dsp-b svg.i { width: 17px; height: 17px; }
.dsp-b:hover { background: var(--bg); color: var(--ink); }
.dsp-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dsp-b.sky-quick { background: var(--accent-soft); color: var(--accent-ink); }
.dsp-b.sky-quick.off { background: transparent; color: var(--muted); }
#theme-toggle .t-sun { display: none; }
:root[data-theme="dark"] #theme-toggle .t-sun { display: block; }
:root[data-theme="dark"] #theme-toggle .t-moon { display: none; }
.dsp-top .chev { width: 15px; height: 15px; color: var(--muted); transition: transform .15s ease; }
.dsp[open] .chev { transform: rotate(180deg); }
.dsp-pop { position: absolute; top: calc(100% + 10px); z-index: 30; max-height: calc(100vh - 120px); overflow: auto; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(16, 24, 40, .16); right: auto; left: 0; width: 344px !important;
  padding: 16px 18px 14px !important; border-radius: 18px; }
.dsp:not([open]) .dsp-pop { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .dsp[open] .dsp-pop { animation: pop-in .14s cubic-bezier(.2, .7, .2, 1); }
}
@media (max-width: 700px) {
  .dsp-top { padding: 3px 4px 3px 3px; }
  .dsp-pop { left: auto; right: -60px; }
}
a.addr { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px; }
a.addr:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
a.addr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.dsp-open { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 10px; margin-left: 4px; border-radius: 99px;
  border-left: 1px solid var(--line); border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--soft);
  font: 500 13px/1 Inter, sans-serif; transition: background-color .15s ease, color .15s ease; }
.dsp-top:hover .dsp-open, .dsp[open] .dsp-open { background: var(--bg); color: var(--ink); border-radius: 99px; border-left-color: transparent; }
.dsp-top:hover .dsp-b:hover ~ .dsp-open { background: transparent; color: var(--soft); border-left-color: var(--line); border-radius: 0 99px 99px 0; }
.dsp-open .chev { color: inherit; }
@media (max-width: 700px) {
  .dsp-lbl { display: none; }
  .dsp-top .chev { display: block; }
  .dsp-open { padding: 0 6px; }
}
.bar .site-wrap { flex: 1 1 auto; min-width: 0; }
.sky-cap .cap-i.drop { display: none; }

/* Theme changes use a page cross-fade; suppress component transitions during the swap. */
html.theme-swap * { transition: none !important; }
html.theme-swap *::before { transition: none; }
html.theme-swap *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.pst { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap;
  font-feature-settings: 'tnum' 1; }
.pst i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: none; }
.pst.good i { background: var(--good); }
.pst.warn i { background: var(--warn-fill); }
.pst.bad i { background: var(--bad); }
.pst.warn { color: var(--warn); }
.pst.bad { color: var(--bad); }
.custom .view .chip[data-tip] { pointer-events: auto; cursor: help; }
.now-bar + .sum-card { margin-top: 0; }

/* Today and summary header */
.now-bar { margin: 44px 0 12px; align-items: flex-end; justify-content: space-between; gap: 16px; position: relative; z-index: 6; display: block;
  margin-top: 18px !important; margin-bottom: 10px !important; }
/* Today or Tonight: for screen readers only, on every width (Sacha, 2026-11-13: the logo makes it redundant) */
.now-h { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.now-bar .sky-cap { margin: 4px 0 0; padding: 0; border: 0; background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 14.5px !important; height: 26px !important; line-height: 26px !important; padding-left: 14px; margin-left: -14px !important; }
.s-tools { position: absolute; top: 16px; right: 18px; display: flex; align-items: center; gap: 8px; z-index: 2; font-size: 12.5px;
  color: var(--muted); }
.s-tools .updated:empty { display: none; }
.s-tools .q .bubble { left: auto; right: 0; transform: none; }
.chart-bar { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 8px !important; }
.chart-bar > span { font: 500 12.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html.sky-dark .chart-bar > span { color: rgba(236, 242, 250, .78); }

/* History charts */
svg.ts .ts-limword { font: 500 11px Inter, sans-serif; fill: var(--warn); }
svg.ts .ts-limnum { font: 600 11px Inter, sans-serif; fill: var(--soft); }
svg.ts .ts-under { font: 500 11.5px Inter, sans-serif; fill: var(--good); }
svg.ts .ts-guide { stroke: var(--muted); stroke-dasharray: 3 3; }
.s-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 0; margin-bottom: 0;
  padding-bottom: 2px !important; }
.s-by { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--muted); }
.s-by b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.s-by #s-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.s-bar .s-tools { position: static; }
@keyframes skel { 50% { opacity: .45; } }
.icon-btn.pill[aria-busy="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.s-src:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.s-src-card { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 6; width: 300px; padding: 10px 12px; border-radius: 12px;
  background: var(--bubble-bg); color: var(--bubble-ink); font: 400 12.5px/1.3 Inter, sans-serif; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.s-src:hover .s-src-card, .s-src:focus-visible .s-src-card { display: grid; gap: 7px; }
.s-src-card strong { font-weight: 600; margin-bottom: 1px; }
.s-src-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; }
.s-src-ic { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; overflow: hidden; background: #fff; }
.s-src-ic > svg, .s-src-ic .brand, .s-src-ic .brand svg, .s-src-ic .ico { width: 14px !important; height: 14px !important; }
.s-src-row em { font-style: normal; opacity: .75; white-space: nowrap; }
.s-src-row em.warn { color: #f5b041; opacity: 1; }
.s-src-row em.bad { color: #ff8a80; opacity: 1; }
svg.ts .ts-xh { stroke: var(--soft); stroke-width: 1; opacity: .55; }
svg.ts .ts-hd { stroke: var(--card); stroke-width: 2; }
svg.ts .ts-hd.in { fill: var(--series-in); }
svg.ts .ts-hd.out { fill: var(--series-out); }
.chart-head .who { font-feature-settings: 'tnum' 1; }
.s-src-ic .brand.g svg { width: 13px !important; height: 13px !important; }
.s-src-ic .brand.g { overflow: visible; }
.now-text { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; min-width: 0; }
.now-bar .dsp { flex: none; }
.now-bar .dsp-pop { top: calc(100% + 10px); right: 0; left: auto; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
.blocks section.pg { border-radius: 10px; }
.chart-bar.loading #ranges button.on { animation: skel 1s ease-in-out infinite; }
.grid2 .card.loading svg.ts { opacity: .45; transition: opacity .2s ease; }
.grid2 .card svg.ts { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .chart-bar.loading #ranges button.on { animation: none; opacity: .6; }
}

/* Summary refresh. The gradient angle animates; reduced motion keeps a still edge. */
.sum-card[aria-busy="true"] { background: linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from var(--ai-a), #a5b4fc, #67e8f9, #c4b5fd, #f0abfc, #a5b4fc) border-box !important;
  animation: ai-orbit 2.8s linear infinite;
  background: linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from var(--ai-a), color-mix(in srgb, #7fd3e6 45%, var(--card)) 0deg, color-mix(in srgb, #7fd3e6 45%, var(--card)) 250deg,
      #7fd3e6 305deg, #1f7d93 345deg, color-mix(in srgb, #7fd3e6 45%, var(--card)) 360deg) border-box !important;
  border-width: 1px; box-shadow: 0 1px 2px var(--shadow); }
.sum-card[aria-busy="true"]::before { opacity: 0 !important; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sum-card[aria-busy="true"] { animation: none; }
}
.now-line { display: flex; align-items: center; min-width: 0; margin-top: 4px; gap: 12px; }
.now-line .sky-cap { margin: 0; flex: 0 1 auto; min-width: 0; }
.now-line .dsp { flex: none; position: relative; }
.now-line .dsp-top { border-radius: 99px; box-shadow: none; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 70%, transparent); display: inline-flex; align-items: center; gap: 2px !important;
  height: 34px !important; padding: 2px; cursor: pointer; }
html.sky-on .now-line .dsp-top { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .4); }
html.sky-dark .now-line .dsp-top { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #eef3fa; }
.now-line .dsp-lbl { display: none; }
html.sky-dark .now-line .dsp-top .chev { color: rgba(236, 242, 250, .8); }
.sum-card[data-phase] #s-by { color: var(--muted); }
.s-step { margin-left: 8px; font-size: 13px; color: var(--accent-ink); white-space: nowrap; }
.s-step:empty { display: none; }
.nbbar i { transform-origin: left center; }
.now-line .dsp-open { background: none !important; margin: 0 !important; padding: 0; border: 0 !important; border-radius: 50% !important;
  display: inline-grid !important; place-items: center; color: var(--soft) !important; width: 30px !important; height: 30px !important;
  cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.now-line .dsp[open] .dsp-open { background: color-mix(in srgb, currentColor 14%, transparent) !important; }
.now-line .dsp-top:hover { box-shadow: none; }
.now-line .dsp-pop { left: -6px !important; right: auto !important; top: calc(100% + 8px) !important; }
.now-line .dsp-top .sky-quick { margin: 0 !important; padding: 0 !important; border: 0; border-radius: 50%; display: inline-grid !important;
  place-items: center; background: transparent; color: inherit; width: 30px !important; height: 30px !important; cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.now-line .dsp-top .sky-quick:not(.off) { color: var(--accent-ink); background: var(--accent-soft); }
html.sky-dark .now-line .dsp-top .sky-quick:not(.off) { color: #fff; background: rgba(255, 255, 255, .2); }
.now-line .dsp-top:hover .dsp-b:hover ~ .dsp-open { border: 0; background: transparent !important; }
.now-text .now-line { margin-top: 0; flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .now-text { flex-wrap: wrap; gap: 6px 12px; }
  .now-text .now-line { flex-basis: 100%; }
}
.now-line .dsp-open .chev { color: var(--soft) !important; width: 15px !important; height: 15px !important; }
html.sky-on:not(.sky-dark) .now-line .dsp-open, html.sky-on:not(.sky-dark) .now-line .dsp-open .chev { color: #23384d !important; }
html.sky-dark .now-line .dsp-open, html.sky-dark .now-line .dsp-open .chev { color: rgba(236, 242, 250, .9) !important; }
.ps-grid { position: relative; display: grid; gap: 2px; }
.ps-row { display: grid; align-items: center; grid-template-columns: 44px 1fr 62px; gap: 0 8px; font-size: 13px; color: var(--muted);
  min-height: 24px; }
.ps-track { position: relative; height: 8px; border-radius: 4px; background: var(--meter); }
.ps-season { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: color-mix(in srgb, var(--good-fill) 35%, var(--card)); }
.ps-peak { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: color-mix(in srgb, var(--warn-fill) 70%, var(--card)); }
.ps-months .ps-track { background: none; height: 12px; }
.ps-months em { position: absolute; font-style: normal; color: var(--muted); transform: none; font-size: 10.5px; }
.ps-today { position: absolute; width: 0; border-left: 1.5px solid var(--ink); left: calc(52px + (100% - 52px - 70px) * var(--x) / 100); top: 2px;
  bottom: 14px; }
.ps-today::before { content: ""; position: absolute; top: -3px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ps-line { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--soft); margin-top: 8px; }
.ps-line b { font-weight: 600; color: var(--ink); }
svg.ts .ts-overfill { fill: var(--warn-fill); opacity: .22; stroke: none; }
svg.ts .ts-sw-over { fill: var(--warn-fill); opacity: .35; }

/* Pollen season calendar */
.pseason { margin-top: 12px; padding-top: 0; border-top: 0; }
.ps-row > b { text-align: right; font: 500 13px/1 Inter, sans-serif; color: var(--ink); }
.ps-row > b.good { color: var(--good); }
.ps-row > b.warn { color: var(--warn); }
.ps-months { min-height: 14px; }
#pollen-kv:empty { display: none; }

/* The demo's top area (static/picker.js topHTML; mock 93, concept E): the name and pitch, then the three ways in as columns
   split by hairlines, each with its title, one line and its control as the last line, on one baseline. */
/* always the light style, in either theme (Sacha, 2026-11-12): the light theme's values (:root above), redefined here; the
   picker opens inside it, so its panel is light too */
.demo-top { --card: #fff; --tile: #f4f7fb; --ink: #18181b; --soft: #52525b; --muted: #71717a; --line: #e8e8ec; --line-strong: #d4d4d8;
  --meter: #eeeff2; --q-bg: #f6f8fb; --q-hover: #e7eef5; --accent: #1c7488; --accent-ink: #155a6b; --accent-soft: #e6f4f7; --accent-line: #a6d3dd;
  --brand-ink: #0f2233; --brand-dot: #7fd3e6; --brand-dot-ink: #1f7d93; --ico-ink: #e7eef5; --ico-sky: #e3f1fb; --ico-good: #e8f6ee;
  --sky: #2f7fb8; --good: #15803d; --good-fill: #22a55a; --warn: #b45309; --bad: #b42318; --shadow: rgba(0, 0, 0, .05);
  --tag-bg: #13283b; --tag-ink: #eef3f8; --live-on-accent: #7fe0b4; --seg-hover: rgba(24, 24, 27, .06); --seg-raise: 0 1px 2px rgba(0, 0, 0, .12);
  --dt-pad: 16px; --dt-ctl-h: 34px; --dt-btn-h: 32px; --dt-pop-air: 9px; color-scheme: light;
  position: relative; z-index: 45; background: linear-gradient(180deg, var(--tile), var(--card)); border-bottom: 1px solid var(--line);
  color: var(--ink); font: 400 13px/1.4 Inter, sans-serif; }
.demo-top[hidden] { display: none; }
/* in dark mode it stays light, with a clear edge so it reads as its own band over the dark page (Sacha, 2026-11-13: B) */
:root[data-theme="dark"] .demo-top { border-bottom-color: rgba(0, 0, 0, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px -10px rgba(0, 0, 0, .75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-top { border-bottom-color: rgba(0, 0, 0, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px -10px rgba(0, 0, 0, .75); }
}
.dt-in { position: relative; max-width: 1240px; margin: 0 auto; padding: var(--dt-pad) 44px; box-sizing: border-box; display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }   /* the brand a little wider for its pitch; the last title still fits beside Hide (Sacha, 2026-11-13) */
.dt-brand { padding-right: 24px; }
.dt-name { margin: 0; display: flex; align-items: center; gap: 10px; font: 650 19px/1 Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.dt-mark { width: 28px; height: 28px; flex: none; display: block; }
.dt-tag { font: 700 10.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tag-ink); background: var(--tag-bg);
  padding: 5px 7px; border-radius: 5px; }
.dt-pitch { margin: 10px 0 0; font: 500 13.5px/1.45 Inter, sans-serif; color: var(--ink); text-wrap: pretty; }   /* no lone last word */
.dt-pitch span { color: var(--soft); font-weight: 400; }
.dt-pitch a { color: var(--accent-ink); text-underline-offset: 2px; }
.dt-way { display: flex; flex-direction: column; gap: 3px; padding: 0 20px; border-left: 1px solid var(--line); min-width: 0; }
.dt-t { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 Inter, sans-serif; }
.dt-ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.dt-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dt-ink { background: var(--ico-ink); color: var(--brand-ink); }
.dt-sky { background: var(--ico-sky); color: var(--sky); }
.dt-good { background: var(--ico-good); color: var(--good); }
.dt-s { margin: 0 0 10px 32px; font-size: 12.5px; color: var(--soft); text-wrap: pretty; }
.dt-ctl { margin-top: auto; display: flex; align-items: center; gap: 8px; min-height: var(--dt-ctl-h); white-space: nowrap; min-width: 0; }
.dt-lab { font: 600 11px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* the samples 1 2 3 */
.dt-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--meter); border-radius: 9px; }
.dt-seg a { min-width: 30px; box-sizing: border-box; text-align: center; padding: 7px 8px; border-radius: 7px; color: var(--soft);
  font: 600 12.5px/1 Inter, sans-serif; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.dt-seg a:hover:not([aria-current]) { color: var(--ink); background: var(--seg-hover); }   /* a tint on the track, never the current one's raised surface */
.dt-seg a[aria-current] { background: var(--card); color: var(--ink); box-shadow: var(--seg-raise); }
/* the monitor picker's button; its panel (.pm-pop below) opens under the top area */
.dt-pickwrap { position: relative; min-width: 0; max-width: 100%; }
.dt-pick { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: var(--dt-btn-h); box-sizing: border-box; padding: 7px 9px 7px 11px;
  border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: var(--card); font: 600 12.5px/1 Inter, sans-serif;
  cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.dt-pick:hover, .dt-pick[aria-expanded="true"] { background: var(--accent-ink); border-color: var(--accent-ink); }
.dt-pick.is-chosen { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.dt-pick.is-chosen:hover, .dt-pick.is-chosen[aria-expanded="true"] { background: var(--q-hover); border-color: var(--accent); }
.dt-pick-t { min-width: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }   /* a monitor's long name, ellipsized */
.dt-pick .live { width: 7px; height: 7px; background: var(--live-on-accent); }
.dt-pick.is-chosen .live { background: var(--good-fill); }
.dt-pick svg.i { width: 15px; height: 15px; flex: none; transition: transform .15s ease; }
.dt-pick[aria-expanded="true"] svg.i { transform: rotate(180deg); }
.demo-top .pm-pop { top: calc(100% + (var(--dt-ctl-h) - var(--dt-btn-h)) / 2 + var(--dt-pad) + 1px); left: 0; }   /* from the button down to the top area's edge: the row's slack, the padding, the 1 px border */
/* Setup guide */
.dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: var(--dt-btn-h); padding: 7px 11px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--card); color: var(--ink); font: 600 12.5px/1.1 Inter, sans-serif;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.dt-btn:hover { background: var(--q-hover); }
.dt-gh { width: 15px; height: 15px; flex: none; fill: currentColor; }   /* GitHub's mark on the Setup button */
.dt-bi { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.demo-top a:focus-visible, .demo-top button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Hide / Show (Sacha, 2026-11-13: "fold it to a slim bar"): a quiet button at the top-right corner, on the name's row; folded, the
   area is one slim line with the logo, the name, DEMO and Show at its end, where Hide was, so the page still says it's a demo and
   the way back stays under the pointer. On a computer the last column's title leaves it room (it wraps rather than touch it) */
.dt-fold { position: absolute; top: var(--dt-pad); right: 36px; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 500 12px/1 Inter, sans-serif;
  cursor: pointer; transition: background-color .15s ease, color .15s ease; }
@media (hover: hover) { .dt-fold:hover { background: var(--seg-hover); color: var(--ink); } }   /* a tap on a phone leaves no tint */
@media (min-width: 1241px) {
  .demo-top:not(.is-folded) .dt-way:last-child { padding-right: 0; }   /* the button's corner: no gutter needed at the content edge */
  .demo-top:not(.is-folded) .dt-way:last-child .dt-t { padding-right: 56px; }   /* px: the button's width less its 8 px overhang, plus air */
}
.dt-fi { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-top.is-folded .dt-pitch, .demo-top.is-folded .dt-way { display: none; }
.demo-top.is-folded .dt-in { display: flex; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.demo-top.is-folded .dt-brand { padding: 0; }
.demo-top.is-folded .dt-name { font-size: 17px; gap: 8px; }   /* a small step down from 19 px, so folding reads as the same header */
.demo-top.is-folded .dt-mark { width: 24px; height: 24px; }
.demo-top.is-folded .dt-fold { position: static; order: 1; margin: -2px -8px -2px auto; }   /* the row's own height; the text lines up with the page's right edge */
@media (prefers-reduced-motion: reduce) {
  .demo-top, .dt-seg a, .dt-pick, .dt-pick svg.i, .dt-btn, .dt-fold { transition: none; }
}
@media (max-width: 1240px) and (min-width: 701px) {   /* a tablet or a small laptop: the name and pitch above, the three ways in a row under them (below 1241 px the last title wouldn't fit beside Hide) */
  .dt-in { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .dt-brand { grid-column: 1 / -1; padding: 0; }
  .dt-pitch { max-width: calc(100% * 2 / 3 - 20px); }   /* two of the three columns, short of the second's divider: two lines (Sacha, 2026-11-13) */
  .dt-w1 { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .dt-in { padding: var(--dt-pad); }
  .dt-fold { right: 8px; }
}
@media (max-width: 700px) {   /* a phone: one row per way, its title left and its control right; only the sample's name stays under its title */
  .dt-in { grid-template-columns: 1fr; padding: 12px 16px 4px; }
  .dt-brand { padding: 0 0 10px; }
  .dt-name { font-size: 16px; gap: 8px; }
  .dt-mark { width: 24px; height: 24px; }
  .dt-pitch { margin-top: 8px; font-size: 13px; }
  .dt-way { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 6px 0; border-left: 0;
    border-top: 1px solid var(--line); }
  .dt-s { display: none; }
  .dt-w1 .dt-s { display: block; grid-column: 1; margin: 1px 0 0 32px; font-size: 12px; }
  .dt-w1 .dt-gen { display: none; }
  .dt-w1 .dt-ctl { grid-column: 2; grid-row: 1 / span 2; }
  .dt-ctl { margin: 0; min-height: 0; }
  .dt-pick, .dt-btn { min-height: 44px; }   /* touch targets of 44 px, as the app's buttons */
  .dt-seg a { position: relative; min-width: 44px; padding: 14px 8px; }
  .dt-seg a::before { content: ""; position: absolute; inset: -2px 0; }   /* the hit area reaches over the track's padding: 44 px tall */
  .dt-pick-t { max-width: 104px; }   /* a picked name stays as wide as "Select a monitor", so the title keeps its two lines */
  .dt-pickwrap { position: static; }
  .demo-top .pm-pop { left: 16px; right: 16px; width: auto; top: calc(100% + 1px + var(--dt-pop-air)); }   /* under the top area's border, with a little air */
  .dt-fold { top: 2px; bottom: auto; height: 44px; }   /* 44 px to tap, centred on the name's row */
  .demo-top.is-folded .dt-in { padding: 0 16px; }
  .demo-top.is-folded .dt-fold { height: 44px; margin: 0 -8px 0 auto; }
}

/* The header, one line on every page (Sacha, 2026-11-13: the real home takes the demo's header, so there's one layout): the logo
   and the weather (Today is read out only), then the home menu's row (.bar, after the weather in index.html, so the tab order follows what
   you see) at the right end (a computer), or at the right end of the logo's row with the weather under it (a phone). The name is read out from
   the logo's hidden text; on the demo the top area shows the logo and name, so the line leaves its logo out. Not in the weather view. */
.now-bar > .bar { margin: 0; padding: 0; }
.now-mark svg.mark { display: block; }   /* 40 px, 32 px on a phone: the logo's own sizes (.site svg.mark, below) */
html.has-demo-top .now-mark, html.wx-full .now-mark { display: none; }
html:not(.has-demo-top) .now-bar { margin-top: 0 !important; }   /* no top area above: the line starts where the logo row did */
@media (min-width: 701px) {
  html:not(.wx-full) .now-bar { display: flex; align-items: center; margin-bottom: 16px !important; }
  html.has-demo-top:not(.wx-full) .now-bar { margin-top: 12px !important; }
  /* the menu's 46 px row is 12 px taller than the weather line, so the demo's top margin gives back 6 px; the menu is the row's
     tallest, so the bottom margin is its clearance from the summary */
  .now-bar > .bar { flex: none; }
}
@media (max-width: 1060px) and (min-width: 701px) {   /* a tablet: the menu without the home's name (as on a phone), so the weather keeps its room */
  .now-bar .bar .home { display: none; }
}
@media (max-width: 700px) {
  :root { --dt-row: 40px; --dt-mark: 32px; }   /* px: the top row (the logo and the menu), as tall as the menu; the logo on it */
  html:not(.wx-full) .now-bar > .bar { position: absolute; top: 0; right: 0; }
  html:not(.wx-full) .now-line { padding-top: calc(var(--dt-row) + 22px); }   /* 22 px from the menu down to the Weather pill, as drawn */
  .now-text .now-mark { position: absolute; left: 0; top: calc((var(--dt-row) - var(--dt-mark)) / 2); }
  .now-mark svg.mark { width: var(--dt-mark) !important; height: var(--dt-mark) !important; }   /* also from 641 to 700 px, where .site's is 40 */
  html:not(.wx-full) .now-line .dsp { margin-left: auto; }   /* the Weather pill at the right end of the weather row, under the menu */
  html:not(.wx-full) .now-bar { margin-bottom: 12px !important; }
}
/* The weather view: the top area fades with the page, and the menu leaves the pill */
.demo-top { transition: opacity .5s ease, visibility .5s; }
@media (prefers-reduced-motion: reduce) { .demo-top { transition: none; } }   /* after the fade, so it wins */
html.wx-full .demo-top { opacity: 0; visibility: hidden; pointer-events: none; }
html.wx-full .now-bar > .bar { display: none; }
/* the demo: a bigger weather & theme control on the weather line, so visitors find it (Sacha, 2026-11-12); a real home keeps the small one */
html.has-demo-top .now-line .dsp-top { height: 44px !important; padding: 3px 4px 3px 3px; gap: 4px !important; }   /* the line's own rule sets 34 px with !important */
html.has-demo-top .now-line .dsp-top .sky-quick, html.has-demo-top .now-line .dsp-open { width: 38px !important; height: 38px !important; }
html.has-demo-top .now-line .dsp-top svg.i { width: 20px; height: 20px; }
html.has-demo-top .now-line .dsp-top .chev { width: 17px; height: 17px; }
.pm-pop { position: absolute; left: 0; top: calc(100% + 12px); z-index: 50; width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
  text-align: left; white-space: normal; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 12px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .16); color: var(--ink); font: 400 14px/1.4 Inter, sans-serif; }
.pm-pop[hidden] { display: none; }
:root[data-theme="dark"] .pm-pop { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.pm-pop .pop-head span { font-size: 13px; line-height: 1.4; }
.pm-note { margin: 0 2px 10px; font-size: 13px; line-height: 1.45; color: var(--warn); }
.pm-note[hidden], .pm-msg[hidden], .pm-more[hidden], .pm-list[hidden], .pm-head[hidden] { display: none; }
.pm-error { font-weight: 600; }
.pm-find { display: flex; gap: 8px; margin: 10px 0 12px; }
.pm-near { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink); font: 550 13px/1 Inter, sans-serif; padding: 0 12px; height: 36px; border-radius: 10px; cursor: pointer; }
.pm-near svg.i { width: 15px; height: 15px; }
.pm-near[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.pm-near[aria-pressed="true"] svg.i { fill: currentColor; }
.pm-place { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--muted); }
.pm-place:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.pm-place svg.i { width: 15px; height: 15px; flex: none; }
.pm-place input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/1 Inter, sans-serif; color: var(--ink); }
.pm-place input::placeholder { color: var(--muted); }
.pm-near:focus-visible, .pm-more:focus-visible, .pm-row:focus-visible, .pm-credit a:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 1px; }
.pm-head { display: flex; justify-content: space-between; padding: 0 6px 6px; font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.pm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pm-list li + li { border-top: 1px solid var(--line); }
.pm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 6px; color: inherit;
  text-decoration: none; border-radius: 8px; }
.pm-row:hover { background: var(--q-bg); }
.pm-row[aria-current] { background: var(--accent-soft); }
.pm-t { min-width: 0; }
.pm-t b { display: block; font: 600 14px/1.3 Inter, sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-t em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.pm-v { text-align: right; max-width: 120px; }
.pm-v b { display: block; font: 650 17px/1.1 Inter, sans-serif; }
.pm-v em { display: block; font: 500 11.5px/1.3 Inter, sans-serif; }
.pm-v.good b, .pm-v.good em { color: var(--good); }
.pm-v.warn b, .pm-v.warn em { color: var(--warn); }
.pm-v.bad b, .pm-v.bad em { color: var(--bad); }
.pm-v.muted b, .pm-v.muted em { color: var(--muted); }
.pm-msg { margin: 6px 2px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.pm-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 6px; padding: 8px; border: 0;
  border-radius: 8px; background: var(--q-bg); font: 550 13px/1 Inter, sans-serif; color: var(--soft); cursor: pointer; }
.pm-more svg.i { width: 15px; height: 15px; }
.pm-credit { margin: 10px 2px 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pm-credit a { color: var(--accent-ink); }
@media (max-width: 700px) {
  .pm-pop { left: 12px; right: 12px; width: auto; top: calc(100% + 6px); }
}
.devbar { text-align: center; font: 400 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);
  margin: 32px 0 28px !important; }
.devbar[hidden] { display: none; }
.devbar button { font: inherit; color: var(--accent-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; }
html.sky-dark .devbar { color: rgba(236, 242, 250, .7); }
html.sky-dark .devbar button { color: #b9ccff; }
h2:not(.now-h):not(.s-do) { margin-top: 32px !important; }
.sechead h2:not(.now-h):not(.s-do) { margin-top: 0 !important; }

/* Neighborhood map, legend and expanded list */
.nb-card { padding: 0 !important; overflow: hidden; }
.nb-map { position: relative; width: 100%; background: var(--meter); aspect-ratio: auto; max-height: none; border-bottom: 0 !important;
  height: 300px !important; }
.nb-map-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; font-size: 13px;
  color: var(--muted); }
.nb-card .nb { padding: 6px 24px 0; }
.nb-card tr.nb-extra { display: none; }
.nb-card.nb-all tr.nb-extra { display: table-row; }
.nb-card .nbt tr.hl td { background: var(--accent-soft) !important; }
.nb-more { cursor: pointer; display: flex; width: calc(100% - 48px); margin: 4px 24px 0; justify-content: center; align-items: center; gap: 6px;
  padding: 11px 12px; border-radius: 10px; border: 1px dashed var(--line-strong); background: var(--bg); font: 500 13px/1 Inter, sans-serif;
  color: var(--soft); }
@media (max-width: 700px) {
  .nb-card .nb { padding: 4px 12px 0; }
}
.nb-more[hidden] { display: none; }
.nb-more svg.i { width: 15px; height: 15px; }
.nb-more:hover { border-style: solid; border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }
@media (max-width: 700px) {
  .nb-more { width: calc(100% - 24px); margin: 4px 12px 0; }
}
.nb-card .nb .nb-more { width: 100%; margin: 4px 0 0; }
.nb-mapwrap { position: relative; }
.nb-legend { right: 10px; bottom: 26px; display: flex; flex-wrap: wrap; font: 500 11.5px/1.3 Inter, sans-serif; pointer-events: none;
  position: static !important; max-width: none; justify-content: flex-start !important; border-radius: 0; box-shadow: none;
  background: none !important; padding: 9px 24px !important; gap: 4px 18px !important; border-bottom: 1px solid var(--line);
  color: var(--muted) !important; font-size: 12px !important; }
.nb-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nb-legend i { display: inline-block; flex: none; }
.lg-you { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card); }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; background: #22a55a; }
.lg-bqe { width: 16px; height: 4px; border-radius: 2px; background: #71717a; }
.lg-plume { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, #f59e0b 45%, transparent) !important; }
.nb-find { padding: 16px 24px 4px; font: 400 15px/1.5 Inter, sans-serif; color: var(--ink); }
.nb-find p { margin: 0; }
.nb-find p + p:not([hidden]) { margin-top: 8px; }
.nb-find b { font-weight: 600; }
.nb-find b.warn { color: var(--warn); }
.nb-find[hidden], .nb-find p[hidden] { display: none; }
@media (max-width: 700px) {
  .nb-find { padding: 14px 12px 2px; }
}
.nb-unit { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; }
.nb-legend .lg-info { pointer-events: auto; cursor: help; outline: none; font-size: 13px; line-height: 1; opacity: .8; }
.nb-legend .lg-info:hover, .nb-legend .lg-info:focus { opacity: 1; }
.nb-legend .lg-info:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 50%; }
.lg-info[data-tip]:hover::after, .lg-info[data-tip]:focus::after { content: attr(data-tip); position: absolute; z-index: 60; top: calc(100% + 8px);
  left: 50%; transform: translateX(-50%); width: 240px; padding: 9px 11px; border-radius: 10px; background: var(--bubble-bg, #0f2233);
  color: var(--bubble-ink, #fff); font: 400 12.5px/1.45 Inter, sans-serif; white-space: normal; text-align: left;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22); pointer-events: none; }
@media (max-width: 700px) {
  .lg-info[data-tip]:hover::after, .lg-info[data-tip]:focus::after { left: auto; right: -12px; transform: none; width: min(240px, 70vw); }
}
.scale-k i.lim::after { content: ""; }
.now-bar .sky-cap .cap-i { line-height: 26px !important; }
.now-bar .sky-cap .cap-i svg.i { width: 15px; height: 15px; }
@media (max-width: 700px) {
  .now-bar .sky-cap { font-size: 13.5px !important; }
  .now-bar { position: relative; }
  .now-line .dsp { position: static !important; }
  .now-line .dsp-pop { position: absolute !important; left: 0 !important; right: 0 !important; width: auto !important;
    top: calc(100% + 8px) !important; }
}
.mc-id { display: flex; align-items: center; min-width: 0; gap: 16px; }
.mc-hw { flex: none; display: grid; place-items: center; background: none; width: 80px !important; height: 80px !important;
  margin: -6px 0 -6px -6px !important; border-radius: 0 !important; }
.vsum-hw { display: inline-flex; align-items: center; gap: 6px; }
.vhw { position: relative; display: grid; place-items: center; width: 32px !important; height: 32px !important; }
.vhw i { position: absolute; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--card); width: 8px !important;
  height: 8px !important; right: -1px; bottom: 2px; }
.vhw i.warn { background: var(--warn-fill); }
.vhw i.bad { background: var(--bad); }
.grid4 > .card.has-status .card-top .k::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--edge); margin-left: 8px;
  flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--edge) 18%, transparent); }
.grid4 > .card .card-top .q .bubble { left: auto; right: -6px; transform: none; z-index: 20; }
.grid4 > .card:hover, .grid4 > .card:focus-within { z-index: 3; position: relative; }
html.sky-on .now-bar .sky-cap { text-shadow: 0 0 6px rgba(255, 255, 255, .7), 0 0 2px rgba(255, 255, 255, .6); }
html.sky-on.sky-dark .now-bar .sky-cap { text-shadow: 0 0 6px rgba(10, 16, 30, .55), 0 0 2px rgba(10, 16, 30, .5); }
.pr-ic > svg { width: 38px !important; height: 38px !important; filter: none !important; }

/* Monitor cards. All are emitted as .card.mc; the shared .card padding supplies the sides. */
.mc { padding-top: 0; }
@media (max-width: 700px) {
  .nb-map { height: 260px !important; }
}
.vhw svg { filter: none !important; width: 32px !important; height: 32px !important; }
.mc-head > *:not(.mc-window):not(.mc-stars) { position: relative; z-index: 1; }
.mc-out .mc-head::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--card) 55%, transparent) 0%, color-mix(in srgb, var(--card) 20%, transparent) 55%, transparent 80%);
  display: none; }
html.outside-dark .mc-out .mc-head::before { background: linear-gradient(90deg, rgba(8, 14, 30, .35), transparent 70%); }
.mc-in .mc-head { background: radial-gradient(120% 140% at 12% 20%, #fff7ea 0%, #f8ecd9 45%, #f1e3cd 100%);
  background: linear-gradient(100deg, color-mix(in srgb, #f6e3c4 55%, var(--card)) 0%, color-mix(in srgb, #f6e3c4 30%, var(--card)) 60%, var(--card) 100%) !important; }
:root[data-theme="dark"] .mc-in .mc-head { background: radial-gradient(120% 140% at 12% 20%, #3a2f22 0%, #2b241b 50%, #221d17 100%);
  background: linear-gradient(100deg, color-mix(in srgb, #8a6a3a 30%, var(--card)) 0%, var(--card) 100%) !important; }
.mc-in .mc-hw { position: relative; }
.mc-in .mc-hw::after { content: ""; position: absolute; bottom: 6px; height: 3px; border-radius: 2px; background: rgba(120, 90, 50, .12); left: 4%;
  right: 4%; }
:root[data-theme="dark"] .mc-in .mc-hw::after { background: rgba(0, 0, 0, .35); }
@media (max-width: 560px) {
  .s-bar { flex-wrap: wrap; row-gap: 8px; }
  .s-by { flex: 1 1 auto; min-width: 0; }
  .s-src { overflow: hidden; }
}
html.outside-dark .mc-out .mc-kind { color: var(--series-out); }
html.outside-dark .mc-out .mc-name { color: var(--ink); }
html.outside-dark .mc-out .mc-status { color: var(--good); }
.mc-out .mc-head { background: linear-gradient(100deg, var(--card) 10%, var(--sky-tint, #dbe9f7) 65%, var(--sky-tint2, #e8f1fa) 100%) !important; }
:root[data-theme="dark"] .mc-out .mc-head { background: linear-gradient(100deg, var(--card) 10%, color-mix(in srgb, var(--sky-top, #1a2a44) 70%, var(--card)) 100%) !important; }
.mc-in .mc-status { margin-right: 0 !important; }
.mc-wifi { font-weight: 500; color: var(--muted); margin-left: 0 !important; }
.mc-pm > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-pm b.warn { color: var(--warn); }
.mc-pm b small { font: 400 11px Inter, sans-serif; color: var(--muted); margin-left: 2px; }
.mc-pm em { font-style: normal; font-size: 11.5px; color: var(--muted); }
@media (max-width: 900px) {
  .mc-pm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mc-wifi { display: none; }
}

/* Monitor scenes follow the live sky, weather and theme. */
.mc-scene { position: absolute; right: 18px; width: 120px; z-index: 0; pointer-events: none; height: 88px; bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 88%, transparent 100%); }
.mc-out .mc-scene { right: 14px; }
html.outside-night { --sky-city: #5d6a8a; --win-lit: #ffd98a; }
html.outside-dark:not(.outside-night) { --win-lit: #fde7b0; }
:root[data-theme="dark"] .mc-scene { opacity: .85; }
@media (max-width: 560px) {
  .mc-scene { right: 8px; width: 84px; height: 62px; }
  .mc-head { min-height: 0; }
}
.mc-head > .mc-scene { position: absolute !important; z-index: 0 !important; top: 0 !important; bottom: auto !important; right: 0 !important;
  width: 124px !important; height: 100% !important; }
.mc-head .mc-status { margin: 6px 0 0 !important; display: inline-flex !important; font-size: 12.5px; margin-top: 5px !important; gap: 6px;
  line-height: 1.3; }
@media (max-width: 560px) {
  .mc-head .mc-status { display: inline-flex !important; margin-top: 5px !important; }
}
.mc-scene .sig path { opacity: 0; animation: scene-sig 9s ease-out infinite; display: none; }
.mc-scene .sig path + path { animation-delay: .3s; }
.mc-out .mc-scene .sig path { animation-delay: 4.5s; }
.mc-out .mc-scene .sig path + path { animation-delay: 4.8s; }
@keyframes scene-sig { 0%, 84%, 100% { opacity: 0; } 88% { opacity: .85; } 96% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mc-scene .sig path { animation: none; }
}
.mc-hero.good, .mc-hero.muted, .mc-hero.warn, .mc-hero.bad { background: none !important; border-radius: 0; margin-top: 4px; padding: 6px 0 20px;
  border-bottom: 1px solid var(--line); }
.mc-hero.warn .mc-hero-k, .mc-hero.bad .mc-hero-k { font-weight: 700; }
@media (max-width: 560px) {
  .mc-hero { padding: 4px 0 16px; }
}
.sum-card > .sx { padding: 8px 0 16px; }
@media (max-width: 760px) {
  .sum-card { padding: 16px 18px 0 !important; }
}
.mc-scene .sig circle { fill: none; stroke: #4f86d6; stroke-width: .6; transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: none !important; transform: none !important; }
.mc-scene .sig circle + circle { animation-delay: .7s; }
.mc-out .mc-scene .sig circle { animation-delay: 3.5s; }
.mc-out .mc-scene .sig circle + circle { animation-delay: 4.2s; }
.mc-scene .wx-r, .mc-scene .wx-c, .mc-scene .wx-n { display: none; }
html.wx-rain .mc-scene .wx-r, html.wx-cloud .mc-scene .wx-c, html.wx-rain .mc-scene .wx-c { display: inline; }
html.outside-night .mc-scene .wx-n { display: inline; opacity: .8; fill: #f8e6bf; }
.mc-scene .wx-r path:nth-child(2n) { animation-delay: -.4s; }
.mc-scene .wx-r path:nth-child(3n) { animation-delay: -.75s; }
.mc-scene .wx-dark, .mc-scene .wx-lit { display: none; }
html.outside-night .mc-scene .wx-dark { display: inline; opacity: .16; fill: #4a5488; }
html.outside-night .mc-scene .wx-lit { display: inline; }
.mc-scene .wx-r path { animation: none; stroke-dasharray: none; }
.mc-scene .wx-fall { animation: scene-fall 1.3s linear infinite; }
.mc-in .mc-scene .wx-fall { animation-duration: 1.8s; animation-name: scene-fall-in; }
@keyframes scene-fall { from { transform: translate(0, 0); } to { transform: translate(-8px, 76px); } }
@keyframes scene-fall-in { from { transform: translate(0, 0); } to { transform: translate(-6px, 48px); } }
@media (prefers-reduced-motion: reduce) {
  .mc-scene .wx-fall { animation: none; }
}
html.outside-night .mc-scene .wx-c { opacity: .35; }
.grid4 .card-top .k-link .k-arr { width: 12px; height: 12px; color: var(--muted); opacity: .7;
  transition: transform .15s ease, opacity .15s ease, color .15s ease; margin-left: -4px; }
.grid4 .card-top .k-link:hover { color: var(--accent-ink); outline: none; }
.grid4 .card-top .k-link:focus-visible { color: var(--accent-ink); outline: none; box-shadow: 0 0 0 2px var(--accent); }
.grid4 .card-top .k-link:hover .srcl, .grid4 .card-top .k-link:focus-visible .srcl { color: var(--accent-ink); }
.grid4 .card-top .k-link:hover .k-arr, .grid4 .card-top .k-link:focus-visible .k-arr { opacity: 1; color: var(--accent-ink);
  transform: translate(1px, -1px); }
.grid4 .card-top .k-link > * { flex: none; }
.grid4 .card-top .k-link .srcl { white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.grid4 .card-top .k { font-size: 12px; letter-spacing: .07em; min-width: 0; flex: 1 1 auto; }

/* Local condition source links truncate inside narrow cards. */
.grid4 .card-top .k-link { display: inline-flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; border-radius: 6px;
  white-space: nowrap; min-width: 0; flex: 0 1 auto; }
@container (max-width: 270px) {
  .grid4 .card-top .k-link .srcl { display: none; }
}
.mc-pm.mc-groups { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 !important; }
.mc-groups .mc-g { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc-groups .mc-g + .mc-g { padding-left: 20px; border-left: 1px solid var(--line); }
.mc-groups .mc-gl { font: 500 12px/1.2 Inter, sans-serif !important; letter-spacing: 0; text-transform: none !important;
  color: var(--soft) !important; }
.mc-groups .mc-gr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mc-groups .mc-gr > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (max-width: 900px) {
  .mc-pm.mc-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .mc-pm.mc-groups { grid-template-columns: 1fr; gap: 14px !important; }
  .mc-groups .mc-g + .mc-g { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.vsum-hw .vhw:first-child svg { transform: scale(.86); transform-origin: 50% 89%; }
@media (prefers-reduced-motion: reduce) {
  .mc-scene .sig { display: none; }
}
.s-by .s-tag { display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; color: var(--brand-ink) !important;
  background: none !important; border: 0; box-shadow: none; padding: 0; gap: 6px; font: 600 12px/1.2 Inter, sans-serif !important;
  letter-spacing: .07em; text-transform: uppercase; }
.s-by .s-tag svg.i { width: 14px; height: 14px; }
.s-src-n { font: 500 13px/1.2 Inter, sans-serif; color: var(--muted);
  text-decoration: underline dotted color-mix(in srgb, var(--muted) 60%, transparent); text-underline-offset: 3px; cursor: help; white-space: nowrap; }
.s-src-n em { font-style: normal; color: var(--warn); }
.s-src:hover .s-src-n, .s-src:focus-visible .s-src-n { color: var(--ink); }
@media (max-width: 560px) {
  .s-by #s-by { display: inline; }
}
.s-by #s-by:empty { display: none; }
.s-by .q .bubble b { color: inherit !important; font-weight: 600; }
.s-by .q .bubble strong { color: inherit !important; }
@media (max-width: 560px) {
  .s-by .s-src { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --brand-ink: #d6f1f7; --brand-dot-ink: #9fe0ee; }
}
.s-info { position: relative; display: inline-flex; align-items: center; border-radius: 10px; outline: none; cursor: default; gap: 6px; }
.s-info:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.s-info .s-src { padding: 0; cursor: default; }
.s-info .s-info-card { left: 0; top: calc(100% + 10px); width: 320px; }
.s-info:hover .s-info-card, .s-info:focus-visible .s-info-card, .s-info:focus-within .s-info-card { display: grid; gap: 7px; }
.s-info-card > span:not(.s-src-row):not(.s-info-list) { display: block; line-height: 1.4; }
.s-info-card b { color: inherit !important; font-weight: 600; }
.s-info-what { opacity: .85; }
.s-info-meta { opacity: .7; }
.s-info-sh { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14); font-weight: 600; }
.s-info-list { display: grid; gap: 7px; }
@media (max-width: 560px) {
  .s-info .s-info-card { width: min(300px, calc(100vw - 48px)); }
}
.s-info .s-src-n { cursor: default; text-decoration: none; }
:root[data-theme="dark"] .mc-scene [fill="#f5f3ef"] { fill: #353d4a; }
:root[data-theme="dark"] .mc-scene [fill="#e3d2bb"] { fill: #4a4033; }
:root[data-theme="dark"] .mc-scene [fill="#e4e1db"] { fill: #363d49; }
:root[data-theme="dark"] .mc-scene [fill="#4a4d52"] { fill: #0d1117; }
:root[data-theme="dark"] .mc-scene [fill="#efebe5"] { fill: #4a5260; }
:root[data-theme="dark"] .mc-scene [fill="#e7e2da"] { fill: #434b58; }
:root[data-theme="dark"] .mc-scene [fill="#dfd9cf"] { fill: #3c4350; }
:root[data-theme="dark"] .mc-scene [fill="#a7c19c"] { fill: #3e5a46; }
:root[data-theme="dark"] .mc-scene [fill="#93ae8a"] { fill: #38503f; }
:root[data-theme="dark"] .mc-scene [fill="#9db897"] { fill: #405c49; }
:root[data-theme="dark"] .mc-scene [fill="#ffffff"] { fill: #e8edf3; }
:root[data-theme="dark"] .mc-scene [fill="#e6d8c0"] { fill: #4c4337; }
:root[data-theme="dark"] .mc-scene [fill="#d6d0c6"] { fill: #3a3d44; }
:root[data-theme="dark"] .mc-scene [fill="#eadfcd"] { fill: #3b342b; }
:root[data-theme="dark"] .mc-scene [fill="#d9c8ac"] { fill: #302a22; }
:root[data-theme="dark"] .mc-scene [fill="#d2bf9f"] { fill: #2b251e; }
:root[data-theme="dark"] .mc-scene [fill="#f4ede1"] { fill: #4a443a; }
:root[data-theme="dark"] .mc-scene [fill="#ddd2c0"] { fill: #3a352c; }
:root[data-theme="dark"] .mc-scene [fill="#fbfbfc"] { fill: #dfe4ea; }
:root[data-theme="dark"] .mc-scene [stroke="#d6c2a6"] { stroke: #3e3529; }
:root[data-theme="dark"] .mc-scene [stroke="#b9b1a5"] { stroke: #2a303a; }
:root[data-theme="dark"] .mc-scene [stroke="#45484d"] { stroke: #9aa3b1; }
:root[data-theme="dark"] .mc-scene [stroke="#3a3530"] { stroke: #a59d90; }
:root[data-theme="dark"] .mc-scene [stroke="#cdd2d8"] { stroke: #8a929e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mc-scene [fill="#f5f3ef"] { fill: #353d4a; }
  :root:not([data-theme="light"]) .mc-scene [fill="#e3d2bb"] { fill: #4a4033; }
  :root:not([data-theme="light"]) .mc-scene [fill="#e4e1db"] { fill: #363d49; }
  :root:not([data-theme="light"]) .mc-scene [fill="#4a4d52"] { fill: #0d1117; }
  :root:not([data-theme="light"]) .mc-scene [fill="#efebe5"] { fill: #4a5260; }
  :root:not([data-theme="light"]) .mc-scene [fill="#e7e2da"] { fill: #434b58; }
  :root:not([data-theme="light"]) .mc-scene [fill="#dfd9cf"] { fill: #3c4350; }
  :root:not([data-theme="light"]) .mc-scene [fill="#a7c19c"] { fill: #3e5a46; }
  :root:not([data-theme="light"]) .mc-scene [fill="#93ae8a"] { fill: #38503f; }
  :root:not([data-theme="light"]) .mc-scene [fill="#9db897"] { fill: #405c49; }
  :root:not([data-theme="light"]) .mc-scene [fill="#ffffff"] { fill: #e8edf3; }
  :root:not([data-theme="light"]) .mc-scene [fill="#e6d8c0"] { fill: #4c4337; }
  :root:not([data-theme="light"]) .mc-scene [fill="#d6d0c6"] { fill: #3a3d44; }
  :root:not([data-theme="light"]) .mc-scene [fill="#eadfcd"] { fill: #3b342b; }
  :root:not([data-theme="light"]) .mc-scene [fill="#d9c8ac"] { fill: #302a22; }
  :root:not([data-theme="light"]) .mc-scene [fill="#d2bf9f"] { fill: #2b251e; }
  :root:not([data-theme="light"]) .mc-scene [fill="#f4ede1"] { fill: #4a443a; }
  :root:not([data-theme="light"]) .mc-scene [fill="#ddd2c0"] { fill: #3a352c; }
  :root:not([data-theme="light"]) .mc-scene [fill="#fbfbfc"] { fill: #dfe4ea; }
  :root:not([data-theme="light"]) .mc-scene [stroke="#d6c2a6"] { stroke: #3e3529; }
  :root:not([data-theme="light"]) .mc-scene [stroke="#b9b1a5"] { stroke: #2a303a; }
  :root:not([data-theme="light"]) .mc-scene [stroke="#45484d"] { stroke: #9aa3b1; }
  :root:not([data-theme="light"]) .mc-scene [stroke="#3a3530"] { stroke: #a59d90; }
  :root:not([data-theme="light"]) .mc-scene [stroke="#cdd2d8"] { stroke: #8a929e; }
}
:root[data-theme="dark"] .mc-scene .wx-c { opacity: .35; }
:root[data-theme="dark"] .mc-scene .wx-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mc-scene .wx-dark { display: none !important; }
}
@media (min-width: 701px) {
  .now-line { position: relative; align-items: center !important; }
  .now-line .dsp { position: static !important; }
  .now-line .dsp-pop { left: var(--pop-left, 0px) !important; }
}
.fx-presets button svg.i { width: 14px; height: 14px; flex: none; opacity: .8; }
.fx-full-b { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: 500 12.5px/1 Inter, sans-serif; cursor: pointer; flex: none; }
.fx-full-b:hover, .fx-full-b:focus-visible { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink);
  outline: none; }
.fx-full-b svg.i { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .page { transition: none; }
  .wx-mode { animation: none; }
}
html.wx-full .page { opacity: 1 !important; visibility: visible !important; }
.page > * { transition: opacity .5s ease, visibility .5s; }
html.wx-full .page > *:not(.now-bar) { opacity: 0; visibility: hidden; pointer-events: none; }
.wx-mode { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px; border-radius: 99px;
  background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); }
.wx-mode[hidden] { display: none; }
html.sky-dark .wx-mode { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.wx-b { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 32px; justify-content: center; padding: 0 10px; border: 0;
  border-radius: 99px; background: transparent; color: inherit; font: 500 13px/1 Inter, sans-serif; cursor: pointer; }
.wx-b#wx-fs { padding: 0; width: 32px; }
.wx-b:hover, .wx-b:focus-visible { background: color-mix(in srgb, currentColor 14%, transparent); outline: none; }
.wx-b svg.i { width: 16px; height: 16px; }
.wx-b[hidden] { display: none; }
html.sky-dark .wx-b { color: #f2f6fb; }

/* Weather view: the menu docks independently of the weather toolbar. */
html.wx-full .now-line .dsp-pop { position: fixed !important; width: 340px !important; overflow: auto; overscroll-behavior: contain;
  top: 16px !important; right: 16px !important; left: auto !important; max-height: calc(100dvh - 32px); }
@media (max-width: 700px) {
  html.wx-full .now-line .dsp-pop { bottom: 8px !important; width: auto !important; top: auto !important; right: 8px !important;
    left: 8px !important; }
  html.wx-full .dsp-pop .pg > .theme-seg, html.wx-full .dsp-pop .pg > .temp-seg, html.wx-full .dsp-pop .pg > h4, html.wx-full .dsp-pop .fx-list, html.wx-full .dsp-pop .pop-head p { display: none !important; }
  .wx-exit span { display: none; }
  .wx-b.wx-exit { padding: 0; width: 32px; }
}
.fx-preview summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The logo (mock 94, round 8 a): a navy house, the day's sky in its roof, a dot rising from the window bar. On a dark background
   (the dark theme, or a dark sky behind the header: sky.js's sky-dark) the house turns pale and the roof deepens; the demo's top
   area is always light. The dot and its glow say whether the readings are fresh: green while they are, grey when they are old, the
   page is offline or they haven't loaded (app.js showUpdated sets .is-stale). Never the air's amber or red: the summary says that. */
svg.mark, svg.dt-mark { --logo-house: var(--logo-day-house); --logo-roof: var(--logo-day-roof); --logo-roof-a: var(--logo-day-roof-a); --logo-dot: var(--logo-live); }
:root[data-theme="dark"] .site svg.mark, html.sky-dark .site svg.mark { --logo-house: var(--logo-night-house); --logo-roof: var(--logo-night-roof);
  --logo-roof-a: var(--logo-night-roof-a); }
html.sky-ink:not(.sky-dark) .site svg.mark { --logo-house: var(--logo-day-house); --logo-roof: var(--logo-day-roof); --logo-roof-a: var(--logo-day-roof-a); }   /* a bright sky in the dark theme */
.now-mark.is-stale svg.mark { --logo-dot: var(--logo-idle); --logo-glow-a: 0; }   /* old readings: a flat grey dot, no glow, so it differs by light and not only by hue */
svg.mark .lg-house, svg.dt-mark .lg-house { fill: var(--logo-house); }
svg.mark .lg-roof, svg.dt-mark .lg-roof { fill: var(--logo-roof); opacity: var(--logo-roof-a); }
svg.mark .lg-dot, svg.mark .lg-glow, svg.dt-mark .lg-dot, svg.dt-mark .lg-glow { fill: var(--logo-dot); }
svg.mark .lg-glow, svg.dt-mark .lg-glow { opacity: var(--logo-glow-a); }
.site svg.mark * { transition: fill .8s ease, opacity .8s ease; }
@media (prefers-reduced-motion: reduce) { .site svg.mark * { transition: none; } }
.site svg.mark { flex: none; width: 40px !important; height: 40px !important; }   /* as tall as the 46 px menu's content beside it (mock 94, round 21) */
@media (max-width: 640px) {
  .bar .site svg.mark, .site svg.mark { width: 32px !important; height: 32px !important; }
}
.s-by .s-tag #s-tag-t { -webkit-background-clip: text; background: none !important; color: var(--soft) !important;
  -webkit-text-fill-color: currentColor; }
.s-by .s-tag .s-busy-mark { overflow: visible; color: #1f7d93 !important; width: 14px !important; height: 14px !important; }
@property --ai-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ai-orbit { to { --ai-a: 360deg; } }
.sum-card[aria-busy="true"] .updated { color: var(--brand-dot-ink) !important; }
:root[data-theme="dark"] .s-by .s-tag #s-tag-t { background-image: linear-gradient(90deg, #e3f4f8, #7fd3e6) !important; }
:root[data-theme="dark"] .s-by .s-tag .s-busy-mark { color: #7fd3e6 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s-by .s-tag #s-tag-t { background-image: linear-gradient(90deg, #e3f4f8, #7fd3e6) !important; }
  :root:not([data-theme="light"]) .s-by .s-tag .s-busy-mark { color: #7fd3e6 !important; }
}
.sum-card:not([aria-busy="true"]) { background: var(--card) !important; border: 1px solid var(--line); box-shadow: 0 1px 2px var(--shadow); }
.s-info .s-src-n::before { content: "· "; }
@media (min-width: 701px) {
  .now-text { align-items: center !important; }
}
.mc > .mc-head { margin-left: -24px !important; margin-right: -24px !important; border-radius: 15px 15px 0 0; padding-top: 10px !important;
  padding-bottom: 10px !important; min-height: 0; }
@media (max-width: 560px) {
  .mc > .mc-head { margin-left: calc(-1 * var(--mc-pad, 24px)) !important; margin-right: calc(-1 * var(--mc-pad, 24px)) !important;
    padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* Summary banner spacing; the later background reset intentionally follows its phone background-position rules. */
.sum-card > .s-bar { margin: -20px -28px 16px !important; border-bottom: 1px solid var(--line); align-items: center; padding: 12px 28px !important;
  border-radius: 21px 21px 0 0; }
@media (max-width: 760px) {
  .sum-card > .s-bar { margin: -16px -18px 14px !important; background-position: -6px 0, 0 0 !important; }
}
:root[data-theme="dark"] .sum-card > .s-bar .s-tag #s-tag-t { background-image: none !important; color: #7fd3e6 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sum-card > .s-bar .s-tag #s-tag-t { background-image: none !important; color: #7fd3e6 !important; }
}
@media (min-width: 701px) {
  .now-bar { margin-bottom: 5px !important; }
}
.sum-card > .s-bar .s-info { display: grid !important; grid-template-rows: auto auto; row-gap: 3px; align-items: center;
  grid-template-columns: 22px auto; column-gap: 14px; }
.sum-card > .s-bar .s-tag { display: contents !important; }
.sum-card > .s-bar .s-tag .s-busy-mark { grid-row: 1 / 3; grid-column: 1; box-sizing: border-box; border-radius: 50%; color: #1f7d93 !important;
  overflow: visible; width: 22px !important; height: 22px !important; padding: 0; background: none !important; box-shadow: none; }
.sum-card > .s-bar .s-tag #s-tag-t { grid-row: 1; grid-column: 2; font: 650 12px/1.2 Inter, sans-serif !important; letter-spacing: .08em !important;
  text-transform: uppercase; color: #1f7d93 !important; align-self: end; }
.sum-card > .s-bar .s-info .s-src { grid-row: 2; grid-column: 2; align-self: start; padding: 0; margin: 0 !important; }
.sum-card > .s-bar .s-info .s-src-n::before { content: none !important; }
:root[data-theme="dark"] .sum-card > .s-bar .s-tag .s-busy-mark { background: color-mix(in srgb, #1f7d93 25%, var(--card));
  color: #7fd3e6 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sum-card > .s-bar .s-tag .s-busy-mark { background: color-mix(in srgb, #1f7d93 25%, var(--card));
    color: #7fd3e6 !important; }
}
.now-line .dsp-top .sky-quick svg.i { width: 17px !important; height: 17px !important; }
.now-line .wx-b { height: 30px; min-width: 30px; }
.now-line .wx-b#wx-fs { width: 30px; }
.sum-card > .s-bar .s-src::before { content: attr(data-when); font: 400 13px/1.2 Inter, sans-serif; color: var(--muted); }
.sum-card > .s-bar #read-refresh { background: transparent !important; border: 1px solid color-mix(in srgb, #1f7d93 28%, var(--line)) !important;
  box-shadow: none !important; color: var(--ink); }
.sum-card > .s-bar #read-refresh:hover { background: color-mix(in srgb, #7fd3e6 16%, transparent) !important; }
.sum-card > .s-bar .s-info .s-src-n { font: 400 13px/1.2 Inter, sans-serif !important; color: var(--muted) !important; }
.sum-card > .s-bar .s-info:hover .s-src-n, .sum-card > .s-bar .s-info:focus-visible .s-src-n { color: var(--ink) !important; }
.dsp-pop .pop-head { align-items: center; margin-bottom: 2px; }
.dsp-pop .pop-head b { font: 650 15px/1.2 Inter, sans-serif; }
.dsp-pop .pg { margin: 0; padding: 14px 0 0; border: 0; background: none !important; }
.dsp-pop .pg h4 { margin: 0 0 8px; font: 600 11px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dsp-pop .theme-seg { display: grid !important; grid-template-columns: repeat(3, 1fr); width: 100%; }
.dsp-pop .theme-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dsp-pop .theme-seg button svg.i { width: 15px; height: 15px; }

/* Weather menu controls */
.dsp-pop .fx-list.fx-chips { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 !important; border: 0 !important;
  border-radius: 0; overflow: visible !important; }
.dsp-pop .fx-chip { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  height: 58px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card) !important; color: var(--soft);
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.dsp-pop .fx-chip + .fx-chip { border-top: 1px solid var(--line); }
.dsp-pop .fx-chip svg.i { width: 19px; height: 19px; }
.dsp-pop .fx-chip span { display: contents; }
.dsp-pop .fx-chip b { font: 500 12.5px/1 Inter, sans-serif; }
.dsp-pop .fx-chip em { display: none; }
.dsp-pop .fx-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dsp-pop .fx-chip:has(input:checked) { background: var(--accent-soft) !important; border-color: var(--accent-line); color: var(--accent-ink); }
.dsp-pop .fx-chip:hover { border-color: var(--accent-line); }
.dsp-pop .fx-chip:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent); }
.dsp-pop .fx-badge { display: inline-flex !important; align-items: center; gap: 6px; padding: 0; background: none !important;
  font: 500 12px/1 Inter, sans-serif !important; color: var(--good) !important; }
.dsp-pop .fx-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good-fill); }
.dsp-pop .fx-badge.is-preview { display: none !important; }
.dsp-pop .fx-back { margin: 0 !important; height: 24px; }
.dsp-pop .fx-presets { display: grid !important; grid-template-columns: repeat(3, 1fr); margin: 0 !important; gap: 6px !important; }
.dsp-pop .fx-presets button { position: relative; display: flex !important; border: 0 !important; text-align: left; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease; flex-direction: row; align-items: center !important; justify-content: flex-start !important;
  gap: 7px !important; height: 34px !important; padding: 0 9px !important; background: var(--card) !important; color: var(--ink) !important;
  font: 500 12.5px/1 Inter, sans-serif !important; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line) !important; white-space: nowrap; }
.dsp-pop .fx-presets button svg.i { width: 15px !important; height: 15px !important; opacity: .85; display: none; }
.dsp-pop .fx-presets [data-fx="dawn"] { background: linear-gradient(170deg, #f6b89a, #fde6cf) !important;
  --sw: linear-gradient(160deg, #f6b89a, #fde6cf); }
.dsp-pop .fx-presets [data-fx="noon"] { background: linear-gradient(170deg, #7fb8ec, #d6ebfb) !important;
  --sw: linear-gradient(160deg, #7fb8ec, #d6ebfb); }
.dsp-pop .fx-presets [data-fx="dusk"] { background: linear-gradient(170deg, #c9637a, #f2a76b) !important; color: #fff !important;
  --sw: linear-gradient(160deg, #c9637a, #f2a76b); }
.dsp-pop .fx-presets [data-fx="night"] { background: linear-gradient(170deg, #141d3d, #354576) !important; color: #eef2fb !important;
  --sw: linear-gradient(160deg, #141d3d, #354576); }
.dsp-pop .fx-presets [data-fx="smoke"] { background: linear-gradient(170deg, #b9a07c, #e6d8bf) !important;
  --sw: linear-gradient(160deg, #b9a07c, #e6d8bf); }
.dsp-pop .fx-presets [data-fx="storm"] { background: linear-gradient(170deg, #3d4757, #75818f) !important; color: #f2f5f8 !important;
  --sw: linear-gradient(160deg, #3d4757, #75818f); }
.dsp-pop .fx-sliders { display: grid; gap: 12px; padding: 6px 0 4px; }
.dsp-pop .fx-s { display: grid !important; grid-template-columns: 1fr auto; row-gap: 7px; align-items: center; margin: 0 !important; }
.dsp-pop .fx-s span { font: 500 12.5px/1 Inter, sans-serif; color: var(--soft); }
.dsp-pop .fx-s b { font: 600 12.5px/1 Inter, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.dsp-pop .fx-s input[type=range] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0;
  background: transparent; cursor: pointer; }
.dsp-pop .fx-s input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--meter) var(--p, 50%)); }
.dsp-pop .fx-s input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--meter); }
.dsp-pop .fx-s input[type=range]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--accent); }
.dsp-pop .fx-s input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(15, 34, 51, .15), 0 1px 3px rgba(15, 34, 51, .25); }
.dsp-pop .fx-s input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 1px rgba(15, 34, 51, .15), 0 1px 3px rgba(15, 34, 51, .25); }
.dsp-pop .fx-s input[type=range]:focus-visible { outline: none; }
.dsp-pop .fx-s input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
.dsp-pop .pop-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dsp-pop .pop-foot .fx-full-b { width: 100%; justify-content: center; height: 36px; border-radius: 10px; }
@media (max-width: 700px) {
  html.wx-full .dsp-pop .pg:not(.fx-pv), html.wx-full .dsp-pop .pop-foot { display: none !important; }
}
:root .sum-card > .s-bar { padding: 9px 28px !important; justify-content: flex-start !important; gap: 0;
  background: linear-gradient(100deg, color-mix(in srgb, #7fd3e6 20%, var(--card)) 0%, color-mix(in srgb, #7fd3e6 10%, var(--card)) 55%, color-mix(in srgb, #7fd3e6 15%, var(--card)) 100%) !important;
  position: relative; z-index: 3; flex-wrap: nowrap; }
:root .sum-card > .s-bar .s-by { flex: none; display: inline-flex !important; align-items: center; }
:root .sum-card > .s-bar .s-tag { gap: 10px; display: inline-flex !important; align-items: center; }
:root .sum-card > .s-bar .s-tag .s-busy-mark { width: 18px !important; height: 18px !important; }
:root .sum-card > .s-bar .s-src::before { content: none !important; }
:root .sum-card > .s-bar .s-info .s-src-n::before { content: "· " !important; }
:root .sum-card > .s-bar .s-tools { gap: 4px; margin-left: 6px !important; display: inline-flex !important; align-items: center; }
:root .sum-card > .s-bar #s-ago { display: inline !important; font: 400 13px/1.2 Inter, sans-serif; color: var(--muted);
  line-height: 20px !important; display: inline-block; margin: 0 !important; padding: 0 !important; }
:root .sum-card > .s-bar #s-ago:not(:empty)::before { content: "· "; }
/* One status at a time: when the readings are old or the page is offline, their age replaces "Updated just now" (which would
   contradict it); on a computer it follows "from 6 sources" with a dot, on a phone it starts its own row, so no dot there */
:root .sum-card > .s-bar #updated:not(:empty) ~ #s-ago { display: none !important; }
:root .sum-card > .s-bar #updated, :root .sum-card > .s-bar #s-ago { white-space: nowrap; }
:root .sum-card > .s-bar #updated { font: 400 13px/1.2 Inter, sans-serif; line-height: 20px !important; display: inline-block; margin: 0 !important; padding: 0 !important; }
:root .sum-card > .s-bar #updated:empty { display: none; }   /* fresh: no slot, so "Updated just now" starts at the title's edge */
@media (min-width: 481px) {
  :root .sum-card > .s-bar #updated:not(:empty)::before { content: "· "; color: var(--muted); }
}
:root .sum-card > .s-bar #read-refresh { padding: 0 !important; justify-content: center; border-color: transparent !important;
  border-radius: 50% !important; color: var(--soft); width: 32px !important; height: 32px !important; }
:root .sum-card > .s-bar #read-refresh span { display: none; }
:root .sum-card > .s-bar #read-refresh:hover { color: var(--ink); }
@media (max-width: 760px) {
  :root .sum-card > .s-bar { padding: 9px 18px !important; }
}
.s-ago { display: none; }
:root .sum-card > .s-bar .s-info { gap: 6px; display: inline-flex !important; align-items: center; }
.dsp-pop .fx-presets button::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(15, 34, 51, .1); background: var(--sw); }
.dsp-pop .fx-presets button:hover { transform: none; box-shadow: inset 0 0 0 1px var(--accent-line) !important; }
.dsp-pop .fx-presets button[aria-pressed="true"] { background: var(--accent-soft) !important; color: var(--accent-ink) !important;
  box-shadow: inset 0 0 0 1px var(--accent-line) !important; }
.dsp-pop .fx-presets button[data-fx] { background: var(--card) !important; color: var(--ink) !important; padding: 0 8px !important;
  gap: 6px !important; font-size: 12px !important; }
.dsp-pop .fx-presets button[data-fx]::before { width: 12px; height: 12px; }
.dsp-pop .fx-presets button[data-fx][aria-pressed="true"] { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.dsp-pop .fx-play { margin-top: 12px; padding: 0; border: 0; background: none !important; }
.dsp-pop .fx-play > summary { display: flex !important; align-items: center; gap: 8px; min-height: 30px; padding: 4px 0; list-style: none;
  cursor: pointer; font: 500 13px/1 Inter, sans-serif !important; color: var(--soft) !important; }
.dsp-pop .fx-play > summary::-webkit-details-marker { display: none; }
.dsp-pop .fx-play > summary > svg.i { width: 15px; height: 15px; flex: none; }
.dsp-pop .fx-play > summary .fx-play-t { flex: 1; }
.dsp-pop .fx-play > summary .fx-badge { display: none !important; }
.dsp-pop .fx-play > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 4px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; opacity: .7; }
.dsp-pop .fx-play[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dsp-pop .fx-play > summary:hover { color: var(--ink) !important; }
.dsp-pop .fx-play > summary .fx-back { order: 0; margin: 0 !important; }
.dsp-pop .fx-play-body { padding: 8px 0 2px; }
.dsp-pop .fx-play .fx-presets { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 0 14px !important; }
.dsp-pop .fx-play .fx-presets button[data-fx] { height: 30px !important; flex: none; }
.dsp-pop .fx-play .fx-sliders { padding: 0; }
:root .sum-card > .s-bar .s-src { display: inline-flex !important; align-items: center; position: static !important; padding: 0;
  margin: 0 !important; height: auto; transform: none !important; vertical-align: middle; }
:root .sum-card > .s-bar #s-tag-t { line-height: 20px !important; display: inline-block; margin: 0 !important; padding: 0 !important; }
:root .sum-card > .s-bar .s-src-n { line-height: 20px !important; display: inline-block; margin: 0 !important; padding: 0; }
:root .sum-card > .s-bar #read-refresh svg.i { width: 16px !important; height: 16px !important; }
@media (max-width: 760px) {
  :root .sum-card > .s-bar #read-refresh { width: 40px !important; height: 40px !important; margin: -4px 0; }
}

/* Reset all background layers after the phone overrides, as in the original cascade. */
.sum-card > .s-bar { background: linear-gradient(100deg, color-mix(in srgb, #7fd3e6 20%, var(--card)) 0%, color-mix(in srgb, #7fd3e6 10%, var(--card)) 55%, color-mix(in srgb, #7fd3e6 15%, var(--card)) 100%) !important; }
:root[data-theme="dark"] .sum-card > .s-bar { background: linear-gradient(100deg, color-mix(in srgb, #1f7d93 32%, var(--card)) 0%, color-mix(in srgb, #1f7d93 16%, var(--card)) 55%, color-mix(in srgb, #1f7d93 22%, var(--card)) 100%) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sum-card > .s-bar { background: linear-gradient(100deg, color-mix(in srgb, #1f7d93 32%, var(--card)) 0%, color-mix(in srgb, #1f7d93 16%, var(--card)) 55%, color-mix(in srgb, #1f7d93 22%, var(--card)) 100%) !important; }
}
.s-tools .s-step { margin-left: 4px; font: 500 13px/1.2 Inter, sans-serif; color: var(--brand-dot-ink, var(--accent-ink)); white-space: nowrap; }
.sum-card[aria-busy="true"] .s-ago, :root .sum-card[aria-busy="true"] > .s-bar #s-ago { display: none !important; }
.now-line .dsp-top .theme-quick { width: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; border: 0;
  border-radius: 50%; display: inline-grid !important; place-items: center; background: transparent !important; color: inherit; cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.now-line .dsp-top .theme-quick svg.i { width: 16px !important; height: 16px !important; }
html.sky-dark .now-line .dsp-top .theme-quick { color: #f2f6fb; }
.now-line .dsp-top .sky-quick.off:hover, .now-line .dsp-top .theme-quick:hover, .now-line .dsp-open:hover { background: color-mix(in srgb, currentColor 14%, transparent) !important; }
.now-line .dsp-top .sky-quick:not(.off):hover { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }
html.sky-dark .now-line .dsp-top .sky-quick:not(.off):hover { background: rgba(255, 255, 255, .28) !important; }
.now-line .dsp-top button:focus:not(:focus-visible) { outline: none; box-shadow: none !important; }
.now-line .dsp-top:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.now-line .dsp-top button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html.wx-full .now-bar { position: fixed !important; top: 16px; z-index: 40; padding: 6px 6px 6px 16px; border-radius: 99px;
  max-width: calc(100vw - 32px); left: 0 !important; right: 0 !important; margin: 0 auto !important; width: max-content; }
html.wx-full .now-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 24px -10px rgba(15, 23, 38, .35), inset 0 0 0 1px rgba(255, 255, 255, .5); }
html.wx-full.sky-dark .now-bar::before { background: rgba(15, 23, 38, .42);
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); }
html.wx-full .now-bar .sky-cap { text-shadow: none !important; }
html.wx-full .now-text { gap: 0; }
html.wx-full .now-line { gap: 10px; }
@media (max-width: 700px) {
  html.wx-full .now-bar { top: 8px; padding: 6px 6px 6px 12px; left: 8px !important; right: 8px !important; width: auto; }
}
html.wx-full .now-bar .wx-mode { background: none !important; border: 0; padding: 0; margin-left: 0 !important; gap: 2px; }
html.wx-full .now-bar .wx-mode::before { content: ""; width: 1px; height: 18px; margin: 0 4px 0 2px; background: currentColor; opacity: .2; }
@media (max-width: 760px) {
  :root .sum-card > .s-bar .s-src { display: none !important; }
}
:root[data-theme="dark"].wx-full .now-bar::before { background: rgba(15, 23, 38, .5);
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).wx-full .now-bar::before { background: rgba(15, 23, 38, .5);
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); }
}
.s-busy-mark { overflow: visible; }
.dsp-pop .fx-presets .fx-rand { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 0; border-radius: 10px;
  background: var(--card); color: var(--soft); font: 500 12px/1 Inter, sans-serif; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.dsp-pop .fx-presets .fx-rand svg.i { display: block !important; width: 13px; height: 13px; }
.dsp-pop .fx-presets .fx-rand:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-line); }
.dsp-pop .fx-presets .fx-rand[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-line); }
.dsp-pop .fx-presets .fx-rand::before { content: none !important; }
.mc-hw svg { filter: none !important; width: 80px !important; height: 80px !important; }

/* Match the Open Air drawing to the ONE; estimates keep their smaller source mark. */
.mc-out .mc-hw svg { transform: scale(1.176); transform-origin: 50% 82.5%; }
.mc-hw .mc-est { display: grid; place-items: center; width: 100%; height: 100%; }
.mc-hw .mc-est svg { width: 52px !important; height: 52px !important; transform: none; filter: none; }
.pr-ic .mc-est svg, .vhw .mc-est svg { width: 100%; height: 100%; }
.mc-head .mc-id { gap: 14px !important; padding-right: 136px !important; }
.mc-loc { color: var(--soft); }
html.outside-dark .mc-out .mc-status.good { color: var(--soft); }
html.outside-dark .mc-out .mc-status .live { box-shadow: none; }
@media (max-width: 560px) {
  .mc-head > .mc-scene { width: 104px !important; }
}
.t-scale { position: relative; margin-top: 9px; height: 4px; border-radius: 99px; background: var(--meter); }
.t-scale .t-band { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: color-mix(in srgb, var(--good-fill) 45%, var(--meter)); }
.t-scale i { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.t-scale .ts-me { width: 10px; height: 10px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); }
.t-scale .ts-o { width: 8px; height: 8px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--soft); }
:root[data-theme="dark"] .s-busy-mark .halo { opacity: .8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s-busy-mark .halo { opacity: .8; }
}
.mc-loc2 { display: none; }
@media (max-width: 560px) {
  .mc-head .mc-id { gap: 12px !important; padding-right: 90px !important; }
  .mc-hw { width: 72px !important; height: 72px !important; margin: -6px 0 -6px -6px !important; }
  .mc-hw svg { width: 72px !important; height: 72px !important; }
  .mc-kind { font-size: 12px; }
  .mc-name { margin-top: 5px !important; font-size: 16px !important; line-height: 1.25 !important; white-space: nowrap; }
  .mc-loc { display: none; }
  .mc-loc2 { display: inline; font-weight: 500; color: var(--muted); }
}
.mc-head .mc-id > div { min-width: 0; }
.grid2 > * { min-width: 0; }
@media (max-width: 560px) {
/* Long public-monitor names wrap to two lines on phones. */
  .mc-name.mc-pub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
@media (max-width: 380px) {
  .mc-name { font-size: 15px !important; overflow: hidden; text-overflow: ellipsis; }
  .mc-head > .mc-scene { width: 92px !important; }
  .mc-head .mc-id { padding-right: 80px !important; }
}
html { touch-action: manipulation; }
.nb-card[hidden] { display: none !important; }
.pst.neutral { color: var(--muted); }
.pst.neutral i { background: var(--line-strong); }
.s-src-row em.neutral { color: var(--muted); opacity: .85; }
.no-token-card[hidden] { display: none; }
.no-token-card { margin-top: 18px; }
.no-token-card p { margin: 0; font: 500 15px/1.5 Inter, sans-serif; color: var(--ink); }
body.no-token .page > :not(.bar):not(.no-token-card) { display: none; }
body.no-token .bar .custom { display: none; }   /* the token page: no home menu until the app reads the monitors */
.nb-credit { margin: 0; padding: 0 24px 14px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.nb-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .nb-credit { padding: 0 12px 12px; }
}

/* Summary profile icons and phone byline layout */
.s-meta { display: contents; }
.s-profiles { flex: none; margin-left: auto; padding-left: 16px; display: flex; align-items: center; }
.s-profiles:empty { display: none; }
.s-profiles .sx-nh .sx-why p { top: calc(100% + 6px); right: 18px; left: auto; width: min(380px, calc(100% - 36px)); }
:root .sum-card > .s-bar + .sx { padding-top: 0; }
@media (max-width: 480px) {   /* a phone: the title and the profile icons on row 1, the status and Refresh under them across the full width */
  :root .sum-card > .s-bar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 0; }
  .s-meta { display: contents; }
  :root .sum-card > .s-bar .s-by { grid-row: 1; grid-column: 1; min-width: 0; }
  :root .sum-card > .s-bar .s-tools { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-left: 28px !important; }   /* 28 px: under the title's text, past its mark */
  :root .sum-card > .s-bar #s-ago:not(:empty)::before { content: none; }
  :root .sum-card > .s-bar #read-refresh { margin: -10px 0 -10px -6px; }
  .s-profiles { grid-row: 1; grid-column: 2; padding-left: 10px; }
}
.blocks .pop-head > div { min-width: 0; line-height: 1.35; }
.blocks .pop-head > div > b { display: inline; }
.blocks .pop-head > div > span { display: inline; margin: 0; font-size: 14px; color: var(--muted); }
.blocks .pop-head > div > span::before { content: "·"; margin: 0 7px 0 6px; }
.pr .pr-ic { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.pr .pr-t { grid-column: 2; grid-row: 1; }
.pr .pst { grid-column: 2; grid-row: 2; margin: 0; line-height: 17px; }
.pr.has-tip { cursor: help; outline: none; transition: background-color .15s ease; }
.pr.has-tip:hover, .pr.has-tip:focus, .pr.has-tip:active { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pr.has-tip:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 10px; }

/* Home source-row explanations */
.pr-tip { display: none; position: absolute; z-index: 60; left: 60px; top: calc(100% + 6px); width: min(300px, calc(100% - 68px)); padding: 9px 11px;
  border-radius: 10px; background: var(--bubble-bg, #0f2233); color: var(--bubble-ink, #fff); font: 400 12.5px/1.45 Inter, sans-serif;
  text-align: left; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); pointer-events: none; }
.plist .pr:last-child .pr-tip { top: auto; bottom: calc(100% + 6px); }
.pr.has-tip:hover .pr-tip, .pr.has-tip:focus .pr-tip { display: block; }
.pr-tip strong { display: block; font-weight: 650; margin-bottom: 4px; }
.pr-tip > span { display: block; margin-top: 4px; }
.mc-credit { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--muted); }
.mc-credit b { font-weight: 600; color: var(--soft); }
.mc-credit a { color: var(--accent-ink); }
.mc-credit a b { color: inherit; }
.card.off .pseason { filter: grayscale(1); opacity: .55; }
.card.off .k, .card.off .k-link { color: var(--muted); }
.card.off .brand { filter: grayscale(1); opacity: .6; }
.card.off dl.kv:empty { display: none; }
.hist-off { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.hist-off[hidden], #hist-charts[hidden], .chart-bar.none #ranges { display: none; }
.hist-off .mc-ph-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tile);
  color: var(--muted); flex: none; }
.hist-off b { display: block; font: 600 14.5px/1.35 Inter, sans-serif; color: var(--ink); }
.hist-off span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); }
.vhw.off svg, .pr.off .pr-ic { filter: grayscale(1); opacity: .45; }
.vhw i.off { background: var(--line-strong); }
.pr.off .pr-t b, .pst.off { color: var(--muted); }

/* Disabled content fades over the usual solid card background. */
.card.off, .card.hist-off { filter: grayscale(1); }
.card.off > *, .card.hist-off > * { opacity: .5; }
@media (min-width: 701px) {
  .now-bar ~ .sum-card { margin-top: 16px; }
}
.card.mc.mc-ghost { filter: grayscale(1); }
.card.mc.mc-ghost > * { opacity: .5; }
.card.mc.mc-ghost .mc-status .live { background: var(--faint); box-shadow: none; animation: none; }
.card.mc .mc-dim { filter: grayscale(1); opacity: .5; }
.live.neutral { background: var(--line-strong); }
.mc-status.neutral, html.outside-dark .mc-out .mc-status.neutral { color: var(--muted); }
html.outside-dark .mc-out .mc-status.warn { color: var(--warn); }
.custom .view.profiles .chip.off { color: var(--muted); }
.custom .view.profiles .chip.off svg.i { filter: grayscale(1); opacity: .45; }
.nbt td.loc .nb-used { color: var(--muted); font-weight: 400; }
.hist-est { margin: -4px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.hist-est[hidden] { display: none; }

/* sky.js measures the background and supplies readable ink and halo colors for either theme. */
html.sky-ink .bar .site { color: var(--sky-ink) !important;
  text-shadow: 0 0 2px var(--sky-halo), 0 0 6px var(--sky-halo), 0 0 12px var(--sky-halo); }
html.sky-ink .now-bar .sky-cap { color: var(--sky-ink) !important;
  text-shadow: 0 0 2px var(--sky-halo), 0 0 6px var(--sky-halo), 0 0 12px var(--sky-halo) !important; }
html.sky-ink .now-bar .cap-i.air { color: var(--sky-ink) !important; }
html.sky-ink .now-line .dsp-top { color: var(--sky-ink) !important; background: rgba(var(--sky-halo-rgb), .32) !important;
  border-color: color-mix(in srgb, var(--sky-ink) 22%, transparent); }
html.sky-ink .now-line .dsp-top .theme-quick, html.sky-ink .now-line .dsp-open, html.sky-ink .now-line .dsp-open .chev { color: var(--sky-ink) !important; }
:root.sky-ink.wx-full .now-bar::before { background: rgba(var(--sky-halo-rgb), .6) !important; }
html.sky-ink:not(.sky-dark) .now-bar .cap-i.air.warn svg.i { color: #b45309; }
html.sky-ink:not(.sky-dark) .now-bar .cap-i.air.bad svg.i { color: #b42318; }

/* ── Local first-run token form (begin) ── */
/* One narrow card on the plain page background (sky.js keeps the sky off here): two numbered steps, each with one action. */
.no-token-card { max-width: 640px; margin: 56px auto 0; padding: 32px 36px; }
#no-token h2 { display: block; margin: 0 0 8px !important; font: 600 24px/1.25 Inter, sans-serif; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.no-token-card > p { margin: 0; color: var(--soft); }
.no-token-card > ol { counter-reset: step; list-style: none; margin: 28px 0 24px; padding: 0; }
.no-token-card > ol > li { counter-increment: step; position: relative; margin: 0; padding: 0 0 28px 44px; line-height: 1.5; color: var(--ink); }
.no-token-card > ol > li:last-child { padding-bottom: 0; }
.no-token-card > ol > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tile); border: 1px solid var(--line-strong); font: 600 14px/1 Inter, sans-serif; color: var(--soft); }
.no-token-card > ol > li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 6px; border-left: 1px solid var(--line); }
.no-token-card li p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.no-token-card a { color: var(--accent-ink); text-underline-offset: 3px; }
/* The AirGradient link: a button-sized link with the "opens elsewhere" arrow, so it reads as the step's action and a new page. */
.no-token-card li a[target="_blank"] { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--accent-line);
  border-radius: 8px; background: var(--accent-soft); font: 600 15px/1.3 Inter, sans-serif; text-decoration: none; }
.no-token-card li a[target="_blank"]::after { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; }
.no-token-card li a[target="_blank"]:hover { border-color: var(--accent); }
.no-token-card li a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.no-token-card li p b { font-weight: 600; color: var(--soft); }
.no-token-card li p.token-hint { margin-top: 4px; font-size: 13px; color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* "Show me where": a closed-by-default picture of AirGradient's API Access settings, under step 1. */
.token-help { margin-top: 10px; }
.token-help summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--accent-ink); }
.token-help summary::-webkit-details-marker { display: none; }
.token-help summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.token-help[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.token-help summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.token-help figure { margin: 12px 0 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--tile); }
.token-help .token-help-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.token-help img { display: block; width: 100%; height: auto; border-radius: 6px; }
.token-help-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.token-help-zoom span { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(15, 34, 51, .78); color: #fff; font-size: 12px; font-weight: 500; }
.token-help-zoom:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.token-help-big { width: min(1240px, 94vw); max-height: 92vh; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.token-help-big::backdrop { background: rgba(0, 0, 0, .55); }
.token-help-big img { display: block; width: 100%; height: auto; border-radius: 6px; }
.token-help-big-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.token-help-close { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--tile); color: var(--ink); font: 600 14px/1.3 Inter, sans-serif; cursor: pointer; }
.token-help-steps { counter-reset: mark; list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--soft); }
.token-help-steps li { counter-increment: mark; display: flex; gap: 8px; margin: 4px 0; }
/* the marks' red, as drawn on the picture */
.token-help-steps li::before { content: counter(mark); flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #e63c3c; color: #fff; font-size: 11px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .token-help summary::after { transition: none; } }
.no-token-card label { display: block; margin-bottom: 10px; font-weight: 500; }
.token-entry { display: flex; flex-wrap: wrap; gap: 10px; }
.token-entry input { flex: 1 1 220px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--tile); color: var(--ink); font: inherit; }
.token-entry input:hover { border-color: var(--faint); }
.token-entry button { padding: 11px 22px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--card); font: 600 15px/1.3 Inter, sans-serif; cursor: pointer; }
.token-entry button:hover { filter: brightness(1.08); }
.token-entry :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.no-token-card .token-storage { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.no-token-card .token-error { margin: 14px 0 0; color: var(--bad); }
/* After saving: a check in the "good" color, the monitors the check found (the Home panel's product rows), then the one next step. */
.token-ok { display: flex; gap: 14px; align-items: flex-start; }
.token-ok > svg.i { flex: none; width: 32px; height: 32px; margin-top: -1px; color: var(--good); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.token-ok p { margin: 4px 0 0; color: var(--soft); }
.no-token-card .token-found-title { margin: 24px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.token-found { border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px; background: var(--tile); }
.token-found .pr { grid-template-rows: auto; cursor: default; }
.token-found .pr-ic svg { width: 36px; height: 36px; }
.token-more { grid-template-columns: minmax(0, 1fr) !important; }
.no-token-card .token-next { margin: 22px 0 0; color: var(--soft); }   /* plain text, the point first (Sacha, 2026-11-13: "simplify this") */
.token-next b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .no-token-card { margin-top: 24px; padding: 24px 18px; }
  #no-token h2 { font-size: 21px; }
  .token-entry button { flex: 1 0 100%; }
}
/* ── Local first-run token form (end) ── */

/* Touch screens: small icon controls keep their look but get an invisible tap area of about 44 px
   (the phone pass found the legend's (i) at 13 px, the (?) buttons at 22–28 px, the chart's range buttons at 27 px tall). */
@media (pointer: coarse) {
  .dt-btn, .dt-pick { min-height: 44px; }
  .dt-seg a { position: relative; min-width: 44px; padding: 14px 8px; }
  .dt-seg a::before { content: ""; position: absolute; inset: -2px 0; }
  .q, .sx-nh-i, .sx-nchip, .dsp-b, .lg-info, .seg button { position: relative; }
  .q::before, .sx-nh-i::before { content: ""; position: absolute; inset: -8px; }
  .dsp-b::before { content: ""; position: absolute; inset: -8px 0; }   /* side by side: grow only up and down */
  .lg-info::before { content: ""; position: absolute; inset: -15px; }
  .seg button::before { content: ""; position: absolute; inset: -9px 0; }
  .sx-nchip::before { content: ""; position: absolute; inset: -12px -4px; }
}
/* Touch screens: no tip on the Home pill's monitor pictures or the avatar. A tap there opens the panel, which names each
   monitor and its state, and the tip from that tap stayed on screen. The other tips stay. */
@media (hover: none) { .vhw[data-tip]::after, #avatar[data-tip]::after { content: none; } }
/* A hover tip left over from the tap that opened the Home panel would sit on top of the panel. */
.bar .custom[open] > summary [data-tip]::after, .bar .custom[open] > summary[data-tip]::after { content: none; }