/* Coconut Barometer: one stylesheet, built on the design tokens below.
   1 tokens · 2 base · 3 components · 4 utilities · 5 pages · 6 small screens and touch
   Use the tokens (var(--…)) rather than raw values, and the shared components rather
   than one-off rules, so every page looks the same. No inline styles in markup (the
   Content-Security-Policy forbids them); dynamic values are set from script. */

/* ---- 1 tokens ------------------------------------------------------------------ */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/dm-sans-latin.woff2") format("woff2");
}
:root {
  /* color roles */
  --bg: #f6f5f3; --surface: #ffffff; --surface-2: #efede9; --fg: #1c1917; --muted: #6f6a65; --line: #e4e1dc;
  --accent: #0063dc; --accent-fg: #ffffff; --accent-soft: #e6effc;
  --ok: #15803d; --no: #c62828; --warn: #b45309;
  --chart-1: #0063dc; --chart-2: #e05a8a; --chart-3: #2e9e6b;
  --on-photo: #ffffff; --scrim: rgba(0, 0, 0, .6);
  /* the lightbox is always dark */
  --overlay: rgba(12, 10, 9, .94); --lb-panel: #1b1816; --lb-line: #2f2a26; --lb-raised: #26221f;
  --lb-fg: #f3f1ee; --lb-text: #d4cfca; --lb-muted: #a49d96; --lb-link: #8cbcff;
  /* type: 7 sizes */
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* shape and depth */
  --r-sm: 6px; --r-md: 10px; --r-pill: 999px;
  --shadow-1: 0 1px 4px rgba(0, 0, 0, .12); --shadow-2: 0 6px 20px rgba(0, 0, 0, .18);
  /* sizes */
  --control-h: 36px; --gutter: var(--s4); --header-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: light dark;
}
/* Dark: the device's setting (Auto), or chosen in Settings (data-theme on <html>).
   The same values twice, because a media query and an attribute can't share one rule. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141210; --surface: #1f1c1a; --surface-2: #2a2623; --fg: #f3f1ee; --muted: #a49d96; --line: #36312d;
    --accent: #36E8FF; --accent-fg: #07191b; --accent-soft: #163237;
    --ok: #4ade80; --no: #f87171; --warn: #fbbf24;
    --chart-1: #36E8FF; --chart-2: #f17aa6; --chart-3: #4fc28e;
    --shadow-1: 0 1px 4px rgba(0, 0, 0, .5); --shadow-2: 0 6px 20px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
    --bg: #141210; --surface: #1f1c1a; --surface-2: #2a2623; --fg: #f3f1ee; --muted: #a49d96; --line: #36312d;
    --accent: #36E8FF; --accent-fg: #07191b; --accent-soft: #163237;
    --ok: #4ade80; --no: #f87171; --warn: #fbbf24;
    --chart-1: #36E8FF; --chart-2: #f17aa6; --chart-3: #4fc28e;
    --shadow-1: 0 1px 4px rgba(0, 0, 0, .5); --shadow-2: 0 6px 20px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---- 2 base ----------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: var(--text-base)/1.45 var(--font); -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h3 { font-size: var(--text-base); margin: var(--s4) 0 var(--s2); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
kbd { font: var(--text-2xs) var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm);
  padding: 0 var(--s1); color: var(--muted); }
code { font-family: var(--mono); font-size: .92em; }
table { border-collapse: collapse; }

/* ---- 3 components -------------------------------------------------------------------- */
/* buttons: default · .primary · .danger · .link · .on (selected) · pill (.preset) */
button { min-height: var(--control-h); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
button.danger, button.link.danger { color: var(--no); }
button.link { min-height: 0; border: 0; background: none; color: var(--accent); padding: var(--s1); }
.toolbar button.on { border-color: var(--accent); color: var(--accent); }
.seg, .range { display: inline-flex; gap: var(--s1); flex-wrap: wrap; }
button.preset { min-height: 30px; font-size: var(--text-sm); padding: 0 var(--s3); border-radius: var(--r-pill); }
button.preset .n { color: var(--muted); font-variant-numeric: tabular-nums; }
button.preset.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.preset.on .n { color: inherit; opacity: .8; }
button.preset:disabled { opacity: .45; }

/* form controls */
input, select, textarea { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
input, select { min-height: var(--control-h); padding: 0 var(--s3); }
textarea { padding: var(--s2) var(--s3); width: 100%; resize: vertical; }
input[type=checkbox] { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); }
input[type=color] { width: 44px; height: 30px; padding: 0 2px; }
label.check { display: inline-flex; gap: var(--s1); align-items: center; font-size: var(--text-sm); }
.field label, .login label, .setup label, .restore label { display: block; font-size: var(--text-sm); color: var(--muted); margin: var(--s3) 0 var(--s1); }
.error { color: var(--no); margin: var(--s3) 0 0; font-size: var(--text-sm); }
.problem { color: var(--warn); margin: 0; }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); min-width: 0;
  margin-bottom: var(--s4); }
/* cards in grids and stacked lists are spaced by the container's gap instead */
:is(.cols, .cols3, .setup-choices, .panel, .settings, .kpis) > .card { margin-bottom: 0; }
.card h2, .settings h3.group { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: 0 0 var(--s3); }
.card h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: var(--s4) 0 var(--s3); }
h1.title { font-size: var(--text-xl); margin: var(--s1) 0 var(--s2); letter-spacing: -.01em; }
h1.title .share { font-size: var(--text-sm); font-weight: normal; vertical-align: middle; }
h2.section { font-size: var(--text-base); margin: var(--s5) 0 var(--s3); }

/* chips, badges, statuses */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: var(--s1); padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--text-xs); border: 1px solid var(--line); background: none; color: inherit; user-select: none; }
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); }
.chip.on .link { padding: 0 0 0 var(--s1); }
.chip.prop { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); cursor: pointer; min-height: 0; }
.chip.prop.off { background: none; border-color: var(--line); color: var(--muted); text-decoration: line-through; }
.chip.prop.fresh { font-weight: 700; }
.chip.prop.also { opacity: .6; }
.chip.applied { border-color: var(--ok); color: var(--ok); }
.chip.rejected { color: var(--muted); text-decoration: line-through; }
.chip.failed { border-color: var(--no); color: var(--no); }
.chip.gone { text-decoration: line-through; opacity: .7; border-style: dashed; }
.badge { font-size: var(--text-2xs); padding: 1px 7px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); margin-left: var(--s1); }
.badge.busy { background: var(--warn); color: #1c1917; }
.status { font-size: var(--text-2xs); padding: 1px var(--s2); border-radius: var(--r-pill); border: 1px solid currentColor; white-space: nowrap; }
a.status { cursor: pointer; }
.s-applied { color: var(--ok); } .s-rejected, .s-none { color: var(--muted); } .s-failed { color: var(--no); } .s-deferred { color: var(--muted); } .s-refused { color: var(--no); }
.s-pending, .s-new, .s-applying, .s-processing, .s-unprocessed { color: var(--accent); }
.wxstatus-dot { display: inline-block; width: .55em; height: .55em; margin-right: .35em; border-radius: 50%; background: currentColor; vertical-align: .08em; }
.src { font-size: var(--text-2xs); padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); }
.src-admin { border-color: var(--accent); color: var(--accent); }
.src-env { border-color: var(--warn); color: var(--warn); }

/* layout pieces */
.toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s3); }
.toolbar input[type=search] { flex: 1 1 220px; max-width: 360px; }
.spacer { flex: 1; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--s4); }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.boot, .empty { padding: 15vh var(--s4); text-align: center; color: var(--muted); }
.more { padding: var(--s5); text-align: center; color: var(--muted); }
.sentinel { height: 1px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--s4) + var(--safe-b)); transform: translateX(-50%); z-index: 60;
  background: var(--fg); color: var(--bg); padding: var(--s2) var(--s4); border-radius: var(--r-sm); font-size: var(--text-sm);
  max-width: calc(100vw - 2 * var(--s4)); box-shadow: var(--shadow-2); }
.offline { background: var(--warn); color: var(--bg); text-align: center; padding: var(--s2) var(--s4); font-size: var(--text-sm); }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tabs: the top bar's pages, and the sub-tabs within a page */
nav.tabs { display: flex; gap: var(--s1); }
nav.tabs a { padding: 6px var(--s3); border-radius: var(--r-pill); color: var(--muted); font-weight: 500; white-space: nowrap; }
nav.tabs a.on { background: var(--accent-soft); color: var(--accent); }
.subtabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); margin: 0 0 var(--s4); }
.subtabs a { padding: var(--s2) var(--s3); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subtabs a.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }

/* numbers: KPI tiles, bars, tables, heatmap */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); min-width: 0; }
.kpi span { display: block; font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi b { font-size: var(--text-xl); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi small { color: var(--muted); }
.kpis.small { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s2); }
.kpis.small .kpi { padding: var(--s2) var(--s3); }
.kpis.small .kpi b { font-size: var(--text-base); overflow-wrap: anywhere; }
.bars { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto; gap: 6px var(--s2); align-items: center; }
.bar { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; font-size: var(--text-sm); }
.bar .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .track { height: 10px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.bar .fill { display: block; height: 100%; min-width: 2px; background: var(--chart-1); border-radius: var(--r-pill); }
.bar .n { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.bar.pick { cursor: pointer; }
.bar.pick:hover .label { text-decoration: underline; }
.tablewrap { overflow: auto; max-height: 560px; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; font-size: var(--text-sm); }
table.data th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: var(--text-xs); padding: 6px var(--s2); white-space: nowrap; }
table.data td { padding: 6px var(--s2); border-top: 1px solid var(--line); }
table.data th.num, table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.pick { cursor: pointer; }
table.data tr.pick:hover td { background: var(--accent-soft); }
.heat { display: grid; grid-template-columns: minmax(0, 36px) repeat(24, minmax(0, 1fr)); gap: 2px; font-size: var(--text-2xs); color: var(--muted); min-width: 0; }
.heat .hrow { align-self: center; min-width: 0; }
.heat .hcell { min-width: 0; aspect-ratio: 1; border-radius: 3px; background: var(--line); }
.heat .hcol { min-width: 0; text-align: center; overflow: visible; white-space: nowrap; }
.heat .hday-short { display: none; }
.chart { width: 100%; min-height: 220px; }
.u-legend { font-size: var(--text-xs); color: var(--muted); }

/* the logo: in dark mode, a turquoise glow keeps its black tower and bolts visible */
.logo { display: block; height: auto; }
.logo.hero { margin: 0 auto var(--s4); width: 200px; max-width: 60vw; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo { filter: drop-shadow(0 0 1px rgba(54, 232, 255, .95)) drop-shadow(0 0 4px rgba(54, 232, 255, .55)); }
  :root:not([data-theme="light"]) .logo.hero { filter: drop-shadow(0 0 1.5px rgba(54, 232, 255, .95)) drop-shadow(0 0 9px rgba(54, 232, 255, .5)); }
}
:root[data-theme="dark"] .logo { filter: drop-shadow(0 0 1px rgba(54, 232, 255, .95)) drop-shadow(0 0 4px rgba(54, 232, 255, .55)); }
:root[data-theme="dark"] .logo.hero { filter: drop-shadow(0 0 1.5px rgba(54, 232, 255, .95)) drop-shadow(0 0 9px rgba(54, 232, 255, .5)); }

/* ---- 4 utilities (small and few) --------------------------------------------------------- */
.muted { color: var(--muted); }
.small { font-size: var(--text-xs); }
.up { color: var(--ok); font-variant-numeric: tabular-nums; }
.down { color: var(--warn); }
.why { font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; }
.m-0 { margin: 0; } .mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); } .mb-2 { margin-bottom: var(--s2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 5 pages ------------------------------------------------------------------------------- */
/* shell: logo · pages · account */
header.top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s4); min-height: var(--header-h);
  padding: calc(var(--s2) + var(--safe-t)) calc(var(--gutter) + var(--safe-r)) var(--s2) calc(var(--gutter) + var(--safe-l));
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
header.top .brand { display: flex; align-items: center; gap: var(--s2); line-height: 1.1; text-decoration: none; white-space: nowrap; }
header.top .logo { width: 46px; }
header.top .brand-name { color: var(--fg); font-size: var(--text-lg); font-weight: 700; text-transform: lowercase; }
header.top nav.tabs { overflow-x: auto; scrollbar-width: none; }
header.top nav.tabs::-webkit-scrollbar { display: none; }
.account { display: flex; align-items: center; gap: var(--s3); white-space: nowrap; }
.menu { position: relative; }
.burger { font-size: var(--text-lg); line-height: 1; padding: var(--s1) var(--s2); }
.burger.on { color: var(--fg); }
.menu-pop { position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 30; min-width: 160px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2, 8px); box-shadow: 0 6px 24px rgba(0,0,0,.2); padding: var(--s1) 0; }
.menu-pop > * { padding: var(--s2) var(--s3); text-align: left; color: inherit; text-decoration: none; font-size: var(--text-base); }
.menu-pop > a:hover, .menu-pop > button:hover { background: var(--surface-2); }
.menu-pop .who { font-size: var(--text-sm); border-bottom: 1px solid var(--line); }
@keyframes pulse { 50% { opacity: .35; } }
main.page { padding: var(--s4) calc(var(--gutter) + var(--safe-r)) calc(var(--s6) + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
  max-width: 1600px; margin: 0 auto; }

/* Home (#/): the site's name, a large link per public section with a glance at it now, the private pages below */
.home { max-width: 1080px; margin: 0 auto; }
.home-head { text-align: center; margin: var(--s5) 0 var(--s6); }
.home-head .logo.hero { width: 132px; margin-bottom: var(--s3); }
.home-head .site-name { text-transform: lowercase; font-size: 32px; letter-spacing: -.01em; margin: 0 0 var(--s1); }
.home-head p { margin: 0; font-size: var(--text-md); }
.homecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); grid-auto-flow: dense; gap: var(--s4); }
.homecard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s2); min-height: 220px;
  padding: var(--s5); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.homecard:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.homecard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.homecard h2 { margin: 0; font-size: 28px; letter-spacing: -.01em; }
.homecard .glance { flex: 1; display: flex; flex-direction: column; gap: var(--s2); font-size: var(--text-base); }
.homecard .glance b { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.homecard .glance-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); }
.homecard small { color: var(--muted); font-size: var(--text-sm); }
/* The Photos card: the newest photo behind it, darkened so the text reads in either theme */
.homecard.pic { color: #fff; background: #1c1917; }
.homecard.pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.homecard.pic::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .75)); }
.homecard > :not(img):not(.homebg) { position: relative; z-index: 1; }
.homecard.pic small, .homecard.pic .muted { color: rgba(255, 255, 255, .8); }
/* a card with a picture beside its text (Home's radar), a row of its own: the picture whole and uncovered, since its time
   and credits sit at its edges; stacked under the text on a narrow screen */
.homecard.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr);
  grid-template-rows: auto 1fr auto; column-gap: var(--s5); align-items: start; }
.homecard.wide > img.media { grid-column: 2; grid-row: 1 / 4; display: block; width: calc(100% + var(--s5)); max-width: none;
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--surface-2); border-left: 1px solid var(--line); }
@media (max-width: 720px) {
  .homecard.wide { display: flex; }
  .homecard.wide > img.media { width: calc(100% + 2 * var(--s5)); margin: var(--s1) calc(-1 * var(--s5)) calc(-1 * var(--s5));
    border-left: 0; border-top: 1px solid var(--line); }
}
/* The Weather and APRS cards' backgrounds: faint, behind the text */
.homebg { position: absolute; z-index: 0; pointer-events: none; }
.homebg.curve { left: 0; right: 0; bottom: 0; width: 100%; height: 42%; }
.homebg.curve .fill { opacity: .18; }
.homebg.curve .edge { fill: none; stroke-width: 2; opacity: .55; }
.homebg.bars { left: 0; right: 0; bottom: 0; width: 100%; height: 38%; }
.homebg.bars rect { fill: var(--accent); opacity: .16; }
.homebg.bars rect.now { opacity: .32; }
.homebg.rings { right: 0; bottom: 0; width: 200px; height: 200px; }
.homebg.rings circle { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: .3; }
.homebg.rings .dot { fill: var(--accent); stroke: none; opacity: .45; }
/* Health (/api/status): a dot per connection, the panel on Home and Status, the Status tab's dot (pulsing while
   the worker is busy) and, for visitors, one by the logo when anything's amber or red */
.health-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.health-dot.ok { background: var(--ok); } .health-dot.warn { background: var(--warn); } .health-dot.bad { background: var(--no); }
.health-dot.off { background: transparent; border: 1.5px solid var(--muted); }
.qcflags { display: flex; flex-direction: column; margin-top: var(--s1); }
.qcflags small { color: var(--muted); }
header.top .brand .health-dot { margin-left: var(--s1); }
.localmode { margin-left: var(--s2); padding: 1px 6px; border: 1px dashed var(--muted); border-radius: 4px; font-size: var(--text-xs);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.health-dot.busy { animation: pulse 1.2s ease-in-out infinite; }
nav.tabs .health-dot, .homelinks .health-dot { margin-left: var(--s2); vertical-align: middle; }
.health { margin-top: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.health + .card { margin-top: var(--s4); }    /* e.g. Jobs, under it on the Status page */
.health-head { display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left; padding: 0; }
.health-head.link, .health-head.link b { color: var(--fg); font-size: var(--text-base); text-decoration: none; }
.health-head .muted { margin-left: auto; font-size: var(--text-sm); }
.health-rows { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.health-row { display: grid; grid-template-columns: auto minmax(110px, 160px) 1fr auto; gap: var(--s2); align-items: baseline;
  padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--text-sm); }
.health-row .health-dot { align-self: center; }
@media (max-width: 520px) { .health-row { grid-template-columns: auto 1fr; } .health-row > span, .health-row > a { grid-column: 2; } }
.highlights { margin-top: var(--s6); }
.hltiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s2); }
.wxtile.hl { padding: var(--s3); background: var(--surface); }
.wxtile.hl b { font-size: var(--text-lg); }
.hl-record { font-style: normal; text-transform: none; letter-spacing: 0; margin-left: var(--s1); padding: 0 6px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); font-size: var(--text-2xs); }
.onthisday { margin-top: var(--s6); }
.onthisday h2 { display: flex; align-items: baseline; gap: var(--s2); }
.onthisday h2 a { margin-left: auto; font-size: var(--text-sm); font-weight: 500; }
.otd-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 120px), 1fr)); gap: var(--s2); }
.otd-strip a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
.otd-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.otd-strip a:hover img { transform: scale(1.04); }
.otd-strip span { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s3) var(--s2) var(--s1); font-size: var(--text-xs);
  color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
@media (prefers-reduced-motion: reduce) { .otd-strip img, .otd-strip a:hover img { transition: none; transform: none; } }
.homelinks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s5); }
.homelinks a { display: inline-flex; align-items: center; padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--fg); font-weight: 500; }
.homelinks a:hover { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .homecard, .homecard:hover { transition: none; transform: none; } }

/* sign-in and first-run setup */
.login { max-width: 360px; margin: 8vh auto; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.login .site-name { text-transform: lowercase; margin: 0 0 var(--s4); text-align: center; font-size: var(--text-xl); }
.login input { width: 100%; }
.login button { width: 100%; margin-top: var(--s4); }
.setup { max-width: 820px; margin: 6vh auto; padding: 0 var(--gutter); }
.setup h1 { font-size: var(--text-xl); margin: 0 0 var(--s2); text-align: center; }
.setup > input { width: 100%; max-width: 260px; font-family: var(--mono); letter-spacing: .05em; }
.setup-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s4); margin-top: var(--s4); }
.setup-choices h2 { font-size: var(--text-md); text-transform: none; letter-spacing: 0; color: var(--fg); margin: 0 0 var(--s2); }
.setup-choices input, .restore input:not([type=file]) { width: 100%; }
.setup-choices button.primary, .restore button.primary { margin-top: var(--s3); }
.dropzone { position: relative; display: block; padding: var(--s5) var(--s4); border: 2px dashed var(--line); border-radius: var(--r-md);
  text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.disabled { opacity: .55; cursor: not-allowed; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* photos: tiles, filters and presets */
.tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2);
  cursor: zoom-in; padding: 0; border: 0; min-height: 0; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.tile .cap { position: absolute; inset: auto 0 0 0; padding: 18px var(--s2) 6px; font-size: var(--text-xs); color: var(--on-photo);
  text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); opacity: 0; transition: opacity .2s; }
.tile:focus-visible .cap { opacity: 1; }
.tile .vid { position: absolute; top: 6px; right: 6px; font-size: var(--text-2xs); background: var(--scrim); color: var(--on-photo);
  padding: 1px 6px; border-radius: var(--r-sm); }
/* justified rows (#128): each tile's size is set by the layout, at its photo's aspect ratio */
.justified { display: flex; flex-direction: column; gap: 6px; }
.jrow { display: flex; gap: 6px; }
.jrow .tile { aspect-ratio: auto; flex: 0 1 auto; min-width: 0; }
.jrow.last .tile { flex-shrink: 0; }
/* the timeline (#126): a rail down the right edge, beside the photos (over them on phones, while scrolling) */
.with-timeline { margin-right: 44px; }
.with-timeline .justified { overflow-anchor: none; }
.timeline { position: fixed; z-index: 15; right: calc(var(--s1) + var(--safe-r)); top: calc(var(--header-h) + var(--s5)); bottom: var(--s5);
  width: 40px; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: var(--r-sm); }
.timeline:focus-visible { outline: 2px solid var(--accent); }
.timeline .yr { position: absolute; right: 4px; transform: translateY(-50%); font-size: var(--text-2xs); color: var(--muted);
  font-variant-numeric: tabular-nums; pointer-events: none; }
.timeline .thumb { position: absolute; right: 0; width: 40px; height: 2px; background: var(--accent); pointer-events: none; }
.timeline .bubble { position: absolute; right: 46px; transform: translateY(-50%); white-space: nowrap; font-size: var(--text-sm);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px var(--s2); box-shadow: var(--shadow-2);
  pointer-events: none; opacity: 0; transition: opacity .2s; }
.timeline.active .bubble, .timeline:hover .bubble, .timeline:focus-visible .bubble { opacity: 1; }
.toplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2); }
.toplist .tile { cursor: pointer; }
.toplist .tile .cap { opacity: 1; }
.chips.filters { margin: calc(-1 * var(--s1)) 0 var(--s3); }
.presets { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s2) var(--s3); margin: calc(-1 * var(--s1)) 0 var(--s3); }
.pgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: var(--s1) 0; }
.pgroup .why { width: 90px; flex: none; }

/* gear (#127): when each camera was in use, on one scale of years */
.inuse { display: grid; grid-template-columns: minmax(110px, 26%) minmax(0, 1fr) auto; gap: 6px var(--s2); align-items: center; }
.inuse .row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; font-size: var(--text-sm);
  text-align: left; color: inherit; text-decoration: none; }
.inuse .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inuse .track { position: relative; height: 10px; background: var(--surface-2); border-radius: var(--r-pill); }
.inuse .span { position: absolute; top: 0; bottom: 0; background: var(--chart-1); border-radius: var(--r-pill); min-width: 4px; }
.inuse .row:hover .span { background: var(--accent); }
.inuse .n { font-variant-numeric: tabular-nums; color: var(--muted); }
.inuse .axis .track { background: none; height: 1.4em; }
.inuse .axis .track span { position: absolute; transform: translateX(-50%); font-size: var(--text-2xs); color: var(--muted); }
.card.gear { margin-bottom: var(--s4); }
.cols.settings4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }   /* two by two, not three and one */

/* albums */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); }
.album { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; color: inherit; }
.album:hover { border-color: var(--accent); }
.album .cover { aspect-ratio: 4 / 3; background: var(--surface-2); }
.album .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album .meta { padding: var(--s2) var(--s3); }
.album .meta b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album .meta span { font-size: var(--text-sm); color: var(--muted); }

/* lightbox (always dark) */
.lightbox { position: fixed; inset: 0; z-index: 50; background: var(--overlay); display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  color: var(--lb-fg); }
.lightbox.noinfo { grid-template-columns: 1fr; }
.lightbox .stage { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lightbox .stage.zoomed { overflow: auto; display: block; cursor: zoom-out; }
.lightbox .stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; }
.lightbox .stage.zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
/* touch (#129): the photo follows the fingers, then eases back into place or on to its new spot */
.lightbox .stage { touch-action: none; }
.lightbox .stage.zoomed { touch-action: auto; }
.lightbox .stage img { transition: transform .2s ease-out, opacity .2s; will-change: transform; }
.lightbox .stage img.live { transition: none; }
@media (prefers-reduced-motion: reduce) { .lightbox .stage img { transition: none; } }
/* slideshow (#130): the photos fade in; the controls and the cursor go once the pointer is still */
.lightbox .showbar { position: absolute; left: 50%; bottom: calc(var(--s3) + var(--safe-b)); transform: translateX(-50%); display: flex;
  gap: var(--s1); align-items: center; padding: 4px; border-radius: var(--r-md); background: rgba(0, 0, 0, .45); z-index: 2; }
.lightbox .showbar button, .lightbox .showbar select { background: transparent; color: #fff; border: 0; font-size: var(--text-sm); min-height: 36px; }
.lightbox .showbar select option { color: initial; }
.lightbox.playing .stage img { animation: fadein .8s ease-out; }
.lightbox.idle, .lightbox.idle .stage img { cursor: none; }
.lightbox.idle .navbtn, .lightbox.idle .close, .lightbox.idle .showbar { opacity: 0; pointer-events: none; }
.lightbox .navbtn, .lightbox .close, .lightbox .showbar { transition: opacity .3s; }
@keyframes fadein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lightbox.playing .stage img { animation: none; } }
.lightbox .navbtn, .lightbox .close { position: absolute; border: 0; background: rgba(0, 0, 0, .45); color: #fff; border-radius: var(--r-sm); padding: 0; }
.lightbox .navbtn { top: 50%; transform: translateY(-50%); font-size: 28px; width: 46px; height: 64px; }
.lightbox .navbtn.prev { left: calc(var(--s2) + var(--safe-l)); }
.lightbox .navbtn.next { right: calc(var(--s2) + var(--safe-r)); }
.lightbox .close { top: calc(var(--s2) + var(--safe-t)); right: calc(var(--s2) + var(--safe-r)); font-size: var(--text-lg); width: 44px; height: 44px; z-index: 2; }
.lightbox aside { background: var(--lb-panel); border-left: 1px solid var(--lb-line); padding: var(--s4); padding-top: calc(var(--s4) + var(--safe-t));
  padding-bottom: calc(var(--s4) + var(--safe-b)); overflow: auto; font-size: var(--text-sm); -webkit-overflow-scrolling: touch; }
.lightbox aside h2 { font-size: var(--text-md); margin: 0 0 6px; }
.lightbox aside .desc { color: var(--lb-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.lightbox aside dl { display: grid; grid-template-columns: auto 1fr; gap: 3px var(--s3); margin: var(--s3) 0; }
.lightbox aside dt { color: var(--lb-muted); } .lightbox aside dd { margin: 0; overflow-wrap: anywhere; }
.lightbox aside a { color: var(--lb-link); }
/* the panel is always dark: its buttons (Share, Send to Review) too, not the page's light surface under light text */
.lightbox aside button:not(.link) { background: var(--lb-raised); border-color: var(--lb-line); color: var(--lb-fg); }
.lightbox aside button:not(.link):hover { border-color: var(--accent); }
.lightbox .chips .chip { border-color: #3a342f; color: var(--lb-text); }
.lightbox .stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: var(--s3) 0; }
.lightbox .stats3 div { background: var(--lb-raised); border-radius: var(--r-sm); padding: 6px var(--s2); }
.lightbox .stats3 b { display: block; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.lightbox .stats3 span { font-size: var(--text-2xs); color: var(--lb-muted); text-transform: uppercase; letter-spacing: .04em; }
.lightbox .hint { font-size: var(--text-xs); color: var(--lb-muted); margin-top: var(--s3); }
.lightbox .comment { border-color: var(--lb-line); }
.lightbox .related h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); margin: var(--s3) 0 6px; }
.lightbox .related h3 a { font-weight: normal; font-size: var(--text-xs); }
.lightbox .strip { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.lightbox .strip button { flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden;
  background: var(--lb-raised); cursor: pointer; }
.lightbox .strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pointsmap { height: 240px; border-radius: var(--r-md); overflow: hidden; isolation: isolate; margin: 0 0 var(--s3); }
.minimap { height: 160px; border-radius: var(--r-md); overflow: hidden; isolation: isolate; margin: var(--s3) 0 var(--s1); }
.maplink { margin: 0 0 var(--s2); font-size: var(--text-sm); }

/* review */
.review { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: var(--s4); }
.review .pic { position: sticky; top: calc(var(--header-h) + var(--s3)); align-self: start; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.review .pic img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #000; }
.review .pic .cap { display: flex; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s3); font-size: var(--text-sm); color: var(--muted); }
.review .panel { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.duplicate-match { display: flex; align-items: center; gap: var(--s2); color: inherit; }
.duplicate-match img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-sm); }
.row { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row input[type=checkbox] { margin-top: 2px; flex: none; }
.row .what { flex: 1; min-width: 0; }
.row input[type=text] { width: 100%; margin-top: var(--s1); }
.row textarea { margin-top: var(--s1); min-height: 70px; }
.locmap { height: 280px; border-radius: var(--r-md); overflow: hidden; isolation: isolate; margin-top: var(--s2); cursor: crosshair; }
.locsearch { display: flex; gap: var(--s2); }
.bulkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s2); }
.bulkcard { display: flex; gap: var(--s2); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; min-width: 0; }
.bulkcard.on { border-color: var(--accent); background: var(--accent-soft); }
.bulkcard img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r-sm); flex: none; background: var(--surface-2); }
.bulkcard .body, .applied .body { flex: 1; min-width: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.bulkcard .t { display: flex; gap: var(--s1); align-items: center; margin-bottom: 2px; }
.bulkcard .t a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.applied { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.applied img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.locsearch input { flex: 1; min-width: 0; }
.chip.prop.off.nostrike { text-decoration: none; }
.status.conf-high { color: var(--ok); } .status.conf-low { color: var(--no); }
.replaces { font-size: var(--text-xs); color: var(--muted); font-style: italic; margin: 3px 0; }
.kv dt { font-size: var(--text-xs); color: var(--muted); } .kv dd { margin: 0 0 var(--s2); overflow-wrap: anywhere; }
.comment { border-top: 1px solid var(--line); padding: 6px 0; font-size: var(--text-sm); }
.comment:first-child { border-top: 0; }
.comment .who { font-size: var(--text-xs); color: var(--muted); }

/* analytics */
.feed { display: flex; gap: var(--s2); align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: var(--text-sm); }
.feed:first-of-type { border-top: 0; }
.feed img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; flex: none; background: var(--line); }
.feed .quote { color: var(--muted); }
.trend { display: grid; grid-template-columns: 1fr auto 60px; gap: var(--s2); padding: 6px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: var(--text-sm); }
.trend span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tagpage h2 { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.tagpage h2 span { display: inline-flex; gap: var(--s3); align-items: center; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tagbars { columns: 2 420px; column-gap: 28px; }
.tagbars .bars { display: block; }
.tagbars .bar { grid-template-columns: minmax(110px, 28%) minmax(0, 1fr) 4.5em 1em; gap: var(--s2); break-inside: avoid; margin-bottom: 6px; }
.tagbars .bar .n { text-align: right; }
.bar .after { font-size: var(--text-2xs); }
.group-inline { display: inline-flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: center; }
.impact .kpis.small { grid-template-columns: repeat(2, 1fr); }

/* Status: the jobs, service cards (each filters the log), the activity log */
.srcdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: 6px; vertical-align: middle; }
.svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--s3); margin: var(--s4) 0; }
button.svc { display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); min-width: 0; padding: var(--s3); text-align: left;
  background: var(--surface); border-radius: var(--r-md); }
button.svc.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.svchead { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.svchead b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svcnum { min-width: 0; }
.svcnum b { font-size: var(--text-xl); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.svcnum small, .svcmeta { font-size: var(--text-xs); color: var(--muted); }
.svcbar { display: block; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.svcbar i { display: block; height: 100%; background: var(--accent); }
.svcmeta, .svcnow { display: block; font-size: var(--text-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svcwait { display: block; color: var(--warn); white-space: normal; }
.jobs h2 .muted, .actlog h2 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: var(--s2); }
.jobs h2 .badge { vertical-align: middle; }
.jobkinds { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0 0 var(--s2); font-size: var(--text-sm); }
.jobkinds small { color: var(--muted); }
.joblist { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.jobrow { display: flex; align-items: center; gap: var(--s2); padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
.jobrow:first-child { border-top: 0; }
.jobrow.running { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: var(--r-sm); padding: 6px var(--s2); margin: 0 calc(-1 * var(--s2)); }
.jobrow.idle { padding: var(--s2) 0; }
.jobrow img, .jobicon { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; flex: none; background: var(--line);
  display: flex; align-items: center; justify-content: center; }
.jobicon .srcdot { margin: 0; width: 12px; height: 12px; }
.jobwhat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jobwhat b, .jobwhat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobwhat span { font-size: var(--text-xs); }
.jobpos { width: 2.5em; flex: none; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.jobwhen { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jobwhen small { font-size: var(--text-2xs); color: var(--muted); }
.actbar .seg { flex: 1 1 100%; min-width: 0; }
.actbar .seg button { min-height: 30px; font-size: var(--text-sm); }
.acts { max-height: min(70dvh, 760px); overflow-y: auto; overscroll-behavior: contain; }
.acts { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.act { display: grid; grid-template-columns: 6.5em 9.5em minmax(0, 1fr) auto 5.5em; gap: var(--s2); align-items: baseline;
  padding: 5px 0; border-top: 1px solid var(--line); }
.act:first-child { border-top: 0; }
.act.bad { background: color-mix(in srgb, var(--no) 7%, transparent); }
.act.job .actwhat b { color: var(--accent); }
.act time, .acttime { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--text-xs); }
.acttime { text-align: right; display: flex; flex-direction: column; }
.acttime small { color: var(--warn); }
.actsrc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); }
.actwhat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act .status { justify-self: end; max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  button.svc { padding: var(--s2); }
  .svc .svcmeta { display: none; }
  .svcnum b { font-size: var(--text-lg); }
  .svcnum small { display: block; }
  .svchead .status { max-width: 5em; overflow: hidden; text-overflow: ellipsis; }
  .act { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "src status" "what what" "time took"; row-gap: 2px; }
  .act time { grid-area: time; } .actsrc { grid-area: src; } .actwhat { grid-area: what; white-space: normal; overflow-wrap: anywhere; }
  .act .status { grid-area: status; } .acttime { grid-area: took; flex-direction: row; gap: var(--s2); justify-content: flex-end; }
}
.qdone { width: 100%; font-size: var(--text-sm); }
.qdone th { text-align: left; font-size: var(--text-xs); color: var(--muted); font-weight: 600; padding: var(--s1) var(--s2) var(--s1) 0; }
.qdone td { padding: 6px var(--s2) 6px 0; border-top: 1px solid var(--line); vertical-align: top; }

/* map */
.mapwrap { height: calc(100dvh - var(--header-h) - 120px); min-height: 360px; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; isolation: isolate; background: var(--surface); }
.mc-wrap { background: none; border: 0; }
.mc { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), var(--shadow-1); cursor: pointer; }
.mthumb { border-radius: var(--r-sm); border: 2px solid #fff; box-shadow: var(--shadow-1); object-fit: cover; background: var(--line); cursor: pointer; }

/* settings */
.admin { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); padding-bottom: 90px; }
.admin .sections { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--header-h) + var(--s3)); align-self: start; }
.admin .sections button { justify-content: flex-start; border: 0; background: none; padding: 0 var(--s3); color: var(--muted); }
.admin .sections button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.admin .settings { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.settings h2.part { font-size: var(--text-lg); margin: var(--s6) 0 var(--s2); }
.settings h3.group { margin: var(--s5) 0 var(--s1); padding-bottom: var(--s1); border-bottom: 1px solid var(--line); }
.settings h2.part + h3.group, .settings h2.part + .card { margin-top: var(--s2); }
.theme-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.theme-setting select { width: min(100%, 280px); }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 340px); gap: 6px var(--s4); padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.setting.wide { grid-template-columns: 1fr; }
.setting.dirty { border-color: var(--accent); }
.setting.locked { opacity: .75; }
.setting .label b { margin-right: 6px; }
.setting .input input[type=text], .setting .input input[type=number], .setting .input select, .setting .input textarea { width: 100%; }
.colorfield { display: inline-flex; align-items: center; gap: var(--s2); }
.maprows { display: flex; flex-direction: column; gap: 6px; }
.maprow { display: grid; grid-template-columns: minmax(80px, 200px) auto 1fr auto; gap: var(--s2); align-items: center; }
.items { overflow-x: auto; }
.tripmap { height: min(55dvh, 460px); }
.tripdot { width: 16px; height: 16px; border-radius: 50%; background: var(--chart-2); border: 2px solid var(--bg); box-shadow: 0 0 0 1.5px var(--fg); }
.replay { display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0; }
.replay input[type=range] { flex: 1; min-width: 0; }
.places .placesmap { height: 280px; margin-top: var(--s2); }
.places tr.sel td input:not([type=radio]) { border-color: var(--chart-2); }
.places td input[type=radio] { width: auto; min-width: 0; }
.places td select { min-width: 96px; }
.placetip { font-size: var(--text-xs); }
.items table { width: 100%; }
.items th { font-size: var(--text-xs); color: var(--muted); text-align: left; font-weight: 500; padding: 0 6px var(--s1) 0; }
.items td { padding: 0 6px 6px 0; }
.items td input { width: 100%; min-width: 80px; }
.cats { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s2); }
.cat label { display: block; font-size: var(--text-xs); color: var(--muted); }
.cat label input, .cat label textarea { display: block; width: 100%; margin-top: 3px; color: var(--fg); font-size: var(--text-sm); }
.catrow { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr auto; gap: var(--s2); align-items: end; margin-bottom: var(--s2); }
.secretform, .pwform { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.secretform input, .pwform input { flex: 1 1 180px; }
.sessionrow, .logrow { display: flex; justify-content: space-between; gap: var(--s2); padding: 6px 0; border-top: 1px solid var(--line);
  font-size: var(--text-sm); flex-wrap: wrap; }
.sessionrow:first-of-type, .logrow:first-of-type { border-top: 0; }
.logrow { justify-content: flex-start; overflow-wrap: anywhere; }
.alerts-log td { vertical-align: top; }
.alerts-log td.nowrap { white-space: nowrap; }
@media (max-width: 720px) {     /* a phone: each alert a block, its cells one under another */
  .alerts-log thead { display: none; }
  .alerts-log tr { display: block; border-top: 1px solid var(--line); padding: var(--s2) 0; }
  .alerts-log td { display: block; border-top: 0; padding: 2px var(--s2); }
  .alerts-log td.nowrap { white-space: normal; }
}
.alertmap { height: 360px; }
.alert-evidence { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); color: var(--muted); font-size: var(--text-xs); }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  padding: var(--s3) calc(var(--gutter) + var(--safe-r)) calc(var(--s3) + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-2); }
.savebar .errors { flex-basis: 100%; margin: 0; padding-left: 18px; color: var(--no); font-size: var(--text-sm); }

/* ---- 6 small screens and touch --------------------------------------------------------------- */
/* hover effects only where there's a pointer to hover with */
@media (hover: hover) {
  .tile:hover img { transform: scale(1.03); }
  .tile:hover .cap { opacity: 1; }
}
/* touch (iPhone, iPad): bigger targets; 16px text in fields so iOS doesn't zoom on focus;
   no keyboard-shortcut hints */
@media (pointer: coarse) {
  :root { --control-h: 44px; }
  input, select, textarea { font-size: 16px; }
  button.link { padding: var(--s2); }
  button.preset { min-height: 36px; }
  nav.tabs a { padding: var(--s2) var(--s3); }
  .hint-keys, .lightbox .hint { display: none; }
  .toplist .tile .cap { font-size: var(--text-2xs); padding-top: 12px; }
}

/* tablets in portrait and smaller (iPad ≤ 1024 px wide) */
@media (max-width: 1024px) {
  :root { --gutter: var(--s3); --header-h: 104px; }
  header.top { grid-template-columns: auto 1fr; grid-template-areas: "brand account" "tabs tabs"; gap: var(--s2) var(--s3); }
  header.top .brand { grid-area: brand; }
  header.top .account { grid-area: account; justify-self: end; }
  header.top nav.tabs { grid-area: tabs; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .lightbox { grid-template-columns: minmax(0, 1fr) 300px; }
  .admin { grid-template-columns: 170px minmax(0, 1fr); gap: var(--s4); }
}
@media (max-width: 900px) {
  .lightbox, .lightbox.noinfo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lightbox aside { max-height: 45dvh; border-left: 0; border-top: 1px solid var(--lb-line); padding-top: var(--s4); }
  .review { grid-template-columns: 1fr; }
  .review .pic { position: static; }
  .review .pic img { max-height: 55dvh; }
}
/* phones and narrow windows: logo + account on one row, the pages below it to swipe through */
@media (max-width: 760px) {
  header.top .logo { width: 38px; }
  header.top .account { gap: var(--s2); }
  .subtabs, .seg, .range { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .subtabs::-webkit-scrollbar, .seg::-webkit-scrollbar, .range::-webkit-scrollbar { display: none; }
  .seg button, .range button { flex: none; }
  .admin { grid-template-columns: 1fr; }
  .admin .sections { flex-direction: row; overflow-x: auto; position: static; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter); }
  .admin .sections button { flex: none; }
  .setting { grid-template-columns: 1fr; }
  .catrow { grid-template-columns: 1fr; }
  .pgroup .why { width: 100%; }
  .toolbar input[type=search] { flex-basis: 100%; max-width: none; }
  .tagbars { columns: 1; }
  .mapwrap { height: calc(100dvh - var(--header-h) - 150px); }
  .qdone th:nth-child(5), .qdone td:nth-child(5) { display: none; }
}
@media (max-width: 520px) {
  .jrow .tile { border-radius: 2px; }
  .with-timeline { margin-right: 0; }
  .timeline { width: 30px; background: color-mix(in srgb, var(--surface) 80%, transparent); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .timeline.active { opacity: 1; pointer-events: auto; }
  .timeline .thumb { width: 30px; }
  .timeline .yr { right: 2px; }
  .justified, .jrow { gap: 3px; }
  .albums { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
  .toplist { grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi b { font-size: var(--text-lg); }
  .bars { grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) auto; }
  .tagbars .bar { grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) 4.5em 1em; }
  .card { padding: var(--s3); }
  .login { margin: 4vh var(--s3); padding: var(--s4); }
  h1.title { font-size: var(--text-lg); }
  .lightbox .navbtn { width: 40px; height: 56px; }
  .maprow { grid-template-columns: 1fr; }
  .heat { grid-template-columns: minmax(0, 20px) repeat(24, minmax(0, 1fr)); gap: 1px; }
  .heat .hcol3 { visibility: hidden; }     /* keep its grid cell, or every cell after it shifts */
  .heat .hday-full { display: none; }
  .heat .hday-short { display: inline; }
}

/* weather */
.wxcard.stale { opacity: .75; }
.wxcard h2 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: var(--s2); }
.wxbatt { float: right; }
.wxhero { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s3); }
.wxtemp, .wxtile, .wxdial { color: inherit; }   /* each links to its History chart */
.wxdial { flex: none; display: flex; }
.wxtemp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.wxtemp b { font-size: 40px; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wxtemp .meter { margin-top: var(--s2); }
.wxtemp .ends { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--muted); }
.wxtemp .spark { height: 28px; margin-top: var(--s1); }
.dial { width: 128px; height: 128px; flex: none; }
.wxtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s2); }
.wxtile { display: flex; flex-direction: column; min-width: 0; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.wxtile > span { font-size: var(--text-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wxtile b { font-size: var(--text-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wxtile small { font-size: var(--text-2xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wxtile .spark, .wxtile .meter { margin-top: var(--s2); }
.wxtile:hover { border-color: var(--accent); }
.spark { display: block; width: 100%; height: 22px; overflow: visible; }
.meter { position: relative; height: 6px; border-radius: var(--r-pill); }
.meter i { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); border: 2px solid var(--surface); transform: translate(-50%, -50%); }
.wxrecent { font-size: var(--text-xs); margin: var(--s3) 0 0; }
.wxrecords { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.wxrecords > .card { margin-bottom: 0; }
.wxsince { margin: 0 0 var(--s3); font-size: var(--text-sm); }
.wxmonths td { white-space: nowrap; }
.wxmonths td .muted { font-size: var(--text-xs); }
.card:has(> .wxmonths) { overflow-x: auto; }
.rose { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
/* Weather history: titled sections of cards, at most two across (so each station's pair lines up); .wide takes the row */
.wxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(420px, calc((100% - var(--s4)) / 2))), 1fr)); gap: var(--s4); }
.wxgrid > .card { margin-bottom: 0; }
.wxgrid > .card.wide { grid-column: 1 / -1; }
.wxsection, .wxgrid > .card { scroll-margin-top: calc(var(--header-h) + var(--s3)); }
/* The chart a Live tile linked to: outlined, fading out */
.wxgrid > .card.focus { animation: wxfocus 2.4s ease-out; }
@keyframes wxfocus { 0%, 40% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }
/* Weather map: station pins (temperature + wind arrow), popups, the loop controls */
.wxpin-wrap { background: none; border: 0; }
.wxpin { display: flex; align-items: center; justify-content: center; gap: 2px; height: 28px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--fg); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: var(--text-sm); }
.wxpin i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 11px solid var(--accent); }
.wxstorm-wrap { background: none; border: 0; }
.wxstorm-arrow { display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid; }
.wxpop { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); min-width: 180px; }
.wxpop a { margin-top: var(--s1); }
.wxhaz { display: flex; align-items: center; gap: var(--s2); }
.wxhaz i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.wxhaztext { display: flex; flex-direction: column; gap: 2px; max-width: 280px; }
.wxhaztext p { margin: var(--s1) 0 0; font-size: var(--text-xs); }
/* A map with ⌖ and ⛶ (#78, #80: Weather, Photos, APRS): full screen is the browser's, or covers the page */
.mapbox { position: relative; }
.mapbox.full { background: var(--bg); }
.mapbox.full .mapwrap { height: 100%; margin: 0; border: 0; border-radius: 0; }
.mapbox.native { width: 100%; height: 100%; }
.mapbox.pseudo { position: fixed; inset: 0; z-index: 2000; height: 100dvh; padding: var(--safe-t) var(--safe-r) 0 var(--safe-l); }
html.wxfull, html.wxfull body { overflow: hidden; }
html.wxfull header.top, html.wxfull .subtabs { display: none; }
/* Weather map controls (#78): the map fills the screen below the header, and its controls sit on it */
.wxmap .mapwrap { height: calc(100dvh - var(--header-h) - 84px); }
.wxwarn { position: absolute; top: 56px; right: var(--s2); z-index: 999; margin: 0; padding: 2px var(--s2); font-size: var(--text-xs);
  background: var(--surface); color: var(--warn); border-radius: var(--r-sm); box-shadow: var(--shadow-1); }
/* ⌖ and ⛶ with the zoom buttons */
.wxtools button { display: flex; width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-bottom: 1px solid #ccc; border-radius: 0;
  background: #fff; color: #222; font-size: 18px; }
.wxtools button:first-child { border-radius: 4px 4px 0 0; }
.wxtools button:last-child { border-bottom: 0; border-radius: 0 0 4px 4px; }
.wxtools button:hover { background: #f4f4f4; }
.wxtools .wxlocate.on { color: #2f80ed; }
.wxtools .wxlocate.follow { background: #2f80ed; color: #fff; }
.wxtools .wxlocate.finding { color: #2f80ed; animation: wxfind 1s ease-in-out infinite alternate; }
@keyframes wxfind { to { opacity: .35; } }
/* the Layers button and panel (a bottom sheet on a phone) */
.wxlayersbtn { position: absolute; top: var(--s2); right: var(--s2); z-index: 1000; max-width: calc(100% - 70px); gap: 6px;
  box-shadow: var(--shadow-1); font-weight: 600; }
.wxlayersbtn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.wxlayersbtn small { color: var(--muted); font-weight: 400; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wxlayers { position: absolute; top: 54px; right: var(--s2); z-index: 1001; width: 310px; max-height: calc(100% - 130px); overflow: auto;
  overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.wxlayers-body { padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; }
.wxlayers h3 { display: flex; align-items: center; justify-content: space-between; margin: var(--s3) 0 var(--s1); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wxlayers h3:first-child { margin-top: 0; }
.wxclose { min-height: 28px; padding: 0 var(--s2); border: 0; background: none; }
.wxlayer, .wxradios label { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; cursor: pointer; }
.wxsub { padding-left: var(--s5); font-size: var(--text-sm); }
.wxsub:has(input:disabled) { opacity: 0.55; cursor: default; }
.wxrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s3); }
.wxradios { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.wxslider { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--text-xs); }
.wxslider input { width: 110px; }
.wxslider output { min-width: 3.2em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.wxhandle { display: none; }
.wxnotes { font-size: var(--text-xs); margin: var(--s2) 0 0; }
.wxlayers .heatkey { flex-wrap: wrap; font-size: var(--text-xs); }
/* the timeline bar along the bottom of the map */
.wxbar { position: absolute; left: var(--s2); right: var(--s2); bottom: 24px; z-index: 1000; display: flex; align-items: center; gap: var(--s2);
  padding: 4px var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1);
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wxbar button { min-height: 32px; height: 32px; padding: 0 10px; flex: none; }
.wxplay { min-width: 40px; }
.wxscrub { flex: 1 1 140px; min-width: 0; display: flex; align-items: flex-start; gap: 3px; }
.wxtrack { position: relative; flex: 1; height: 34px; min-width: 0; }
.wxbuf { position: absolute; top: 18px; height: 6px; background: var(--line); }
.wxbuf.in { background: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.wxtick { position: absolute; top: 16px; height: 10px; width: 1px; background: var(--muted); }
.wxtick span { position: absolute; top: -16px; transform: translateX(-50%); font-size: 10px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.wxmap input[type=range] { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }   /* not a text box */
.wxtrack input { position: absolute; left: 0; right: 0; top: 8px; width: 100%; height: 26px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.wxtrack input::-webkit-slider-runnable-track { background: none; height: 26px; }
.wxtrack input::-moz-range-track { background: none; }
.wxtrack input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: 5px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-1); }
.wxtrack input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.wxgap { position: relative; margin-top: 18px; height: 6px; min-width: 24px;
  background: repeating-linear-gradient(45deg, var(--line) 0 3px, transparent 3px 6px); }
.wxgap span { position: absolute; top: -18px; right: 0; font-size: 10px; color: var(--muted); white-space: nowrap; }
.wxtime { display: flex; flex-direction: column; line-height: 1.15; min-width: 64px; max-width: 220px; }
.wxtime b { font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.wxtime small { font-size: var(--text-2xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wxnow.on { color: var(--accent); border-color: var(--accent); }
.wxmore { display: none; }
.wxmap.pseudo .wxbar { bottom: calc(24px + var(--safe-b)); }
@media (max-width: 639px) {
  .wxmap .mapwrap { height: calc(100dvh - var(--header-h) - 60px - var(--safe-b)); }
  .wxbar { flex-wrap: wrap; left: var(--s1); right: var(--s1); bottom: calc(30px + var(--safe-b)); gap: var(--s1); padding: 2px var(--s1); }
  .wxbar button { min-height: 44px; height: 44px; min-width: 44px; padding: 0 var(--s2); }
  .wxbar .extra { display: none; order: 5; }
  .wxbar.more .extra { display: inline-flex; }
  .wxmore { display: inline-flex; }
  .wxtime { min-width: 0; }
  .wxtime small { display: none; }
  .wxbar.more .wxtime small { display: block; }
  .wxtrack { height: 44px; }
  .wxtrack input { top: 10px; height: 34px; }
  .wxbuf { top: 24px; }
  .wxtick { top: 22px; }
  .wxtick span { top: -20px; }
  .wxgap { margin-top: 24px; }
  /* zoom, my location and full screen: bottom right, in thumb reach (on the Weather map, above the timeline) */
  .mapbox .leaflet-top.leaflet-left { top: auto; left: auto; right: 0; bottom: calc(24px + var(--safe-b)); }
  .wxmap .leaflet-top.leaflet-left { bottom: calc(94px + var(--safe-b)); }
  .wxmap:has(.wxbar.more) .leaflet-top.leaflet-left { bottom: calc(150px + var(--safe-b)); }   /* above the bar's second row */
  .mapbox .leaflet-top.leaflet-left .leaflet-control { float: none; margin: 0 var(--s2) var(--s2) 0; }
  .mapbox .leaflet-bar.leaflet-control-zoom a, .wxtools button { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
  .mapbox .leaflet-control-attribution { font-size: 9px; line-height: 1.3; }
  .wxlayers { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 50%; z-index: 1002; border-radius: 14px 14px 0 0;
    padding-bottom: var(--safe-b); transition: transform .15s ease-out; }
  .wxhandle { display: flex; justify-content: center; padding: var(--s2) 0 var(--s1); touch-action: none; cursor: grab; position: sticky; top: 0;
    background: var(--surface); }
  .wxhandle i { width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  .wxlayer, .wxradios label, .wxclose { min-height: 44px; }
  .wxlayers input[type=checkbox], .wxlayers input[type=radio] { width: 20px; height: 20px; }
}
.jump { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; margin: 0 0 var(--s2); }
/* APRS: a pin per callsign (heading arrow + callsign), the map a little shorter so the cards show under it */
.aprsmap { height: min(60dvh, 560px); margin-bottom: var(--s4); }
.aprspin { display: inline-flex; align-items: center; gap: var(--s1); height: 28px; padding: 0 var(--s2) 0 var(--s1); white-space: nowrap;
  border-radius: var(--r-pill); background: var(--surface); color: var(--fg); border: 2px solid var(--accent); box-shadow: var(--shadow-1); font-size: var(--text-sm); }
.aprspin i { width: 0; height: 0; margin: 0 3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 11px solid var(--accent); }
.aprspin i[hidden] { display: inline-block; width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--muted); }
.aprsdot { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%; }
/* APRS → Igate: the density grid's map, with its color scale under it */
.igatemapbox { margin-bottom: var(--s4); }
.igatedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.igatedot.digi { width: 12px; height: 12px; background: var(--chart-2); border: 1.5px solid var(--fg); }
.igatescatter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s4); }
.igatedirs { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (max-width: 720px) { .igatedirs { grid-template-columns: minmax(0, 1fr); } }
.igatepolar { width: 100%; max-width: 340px; height: auto; display: block; }
.igatepolar .ring { fill: none; stroke: var(--line); }
.igatepolar .tick { fill: var(--muted); font-size: 10px; }
.igatepolar .compass { fill: var(--muted); font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.igatepolar .wedge { fill: var(--chart-1); fill-opacity: .55; stroke: var(--chart-1); stroke-width: 1; }
.igatepolar .wedge.thin { fill: var(--muted); fill-opacity: .12; stroke: var(--line); }
.igatepolar .half { fill: none; stroke: var(--chart-2); stroke-width: 2; stroke-dasharray: 5 4; }
.igatemap { height: min(60dvh, 560px); }
.igatescale { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: var(--text-xs); color: var(--muted); }
.igatescale i { flex: 0 1 160px; height: 8px; border-radius: 4px; }
/* full screen: the scale sits on the map's bottom left, or it would be below the screen */
.igatemapbox.full .igatescale { position: absolute; left: var(--s2); bottom: calc(var(--s3) + var(--safe-b)); z-index: 1000; margin: 0;
  padding: 2px var(--s2); background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--shadow-1); }
/* APRS cards: everything that can be long is either cut with an ellipsis or allowed to break, never pushed wider */
.aprscols { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); align-items: start; }
.aprscard { display: flex; flex-direction: column; gap: var(--s3); }
.aprscard.quiet { opacity: .8; }
.aprshead { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.aprscall { font-size: var(--text-lg); letter-spacing: -.01em; white-space: nowrap; }
.aprswhat { flex: 1 1 0; min-width: 0; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aprshead .status { flex: none; margin-left: auto; }
.aprsbody { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.aprsdial { width: 96px; height: 96px; }
.aprsstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr)); gap: var(--s2) var(--s3); min-width: 0; }
.aprsstat { display: flex; flex-direction: column; min-width: 0; }
.aprsstat span, .aprssparks span { font-size: var(--text-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.aprsstat b { font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aprsstat small { font-size: var(--text-2xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aprssparks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.aprssparks > div { min-width: 0; }
.aprscomment { margin: 0; padding-left: var(--s2); border-left: 2px solid var(--line); font-size: var(--text-sm); overflow-wrap: anywhere; }
.aprsfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--text-xs); }
.aprspath { display: flex; flex-wrap: wrap; gap: var(--s1); flex: 1 1 auto; min-width: 0; }
.aprspath code { padding: 0 var(--s1); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-2xs); overflow-wrap: anywhere; }
.aprslinks { display: inline-flex; gap: var(--s3); margin-left: auto; white-space: nowrap; }
.aprspackets { max-height: 280px; overflow: auto; border-top: 1px solid var(--line); }
.aprspackets table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-xs); }
.aprspackets td { padding: 3px var(--s2) 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.aprspackets td:nth-child(1) { width: 30%; } .aprspackets td:nth-child(2) { width: 17%; } .aprspackets td:nth-child(3) { width: 23%; }
.aprspackets .mono { font-family: var(--mono); }
@media (max-width: 420px) {
  .aprsbody { grid-template-columns: 72px minmax(0, 1fr); }
  .aprsdial { width: 72px; height: 72px; }
  .aprsstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aprsstat.wide { grid-column: span 2; }
  .aprspackets td:nth-child(4) { display: none; }      /* the comment is on the card already */
  .aprspackets td:nth-child(1) { width: 42%; } .aprspackets td:nth-child(2) { width: 22%; } .aprspackets td:nth-child(3) { width: auto; }
}
.rose svg { flex: 1 1 180px; min-width: 0; width: min(100%, 300px); }
.rose-key { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--text-sm); color: var(--muted); }
.rose-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: var(--s2); vertical-align: -1px; }
.rose-key i.rose-calm { background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; }
.heatkey { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-sm); margin: var(--s2) 0 0; }
.heatkey i { display: inline-block; width: 90px; height: 10px; border-radius: 3px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.calendar { display: block; max-width: 100%; height: auto; margin-top: var(--s2); }
.daterange { display: inline-flex; align-items: center; gap: var(--s2); }