/* Page basics: body, buttons, titles, labels. */
[hidden]{display:none!important}
*{box-sizing:border-box}
img{max-width:100%}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;background:var(--bg);overflow-x:clip}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);
  /* Turquoise sky with soft clouds at the top, fading into the light mint page */
  background:radial-gradient(120px 46px at 12% 128px,rgba(255,255,255,.85),transparent 72%),
    radial-gradient(170px 60px at 88% 92px,rgba(255,255,255,.8),transparent 72%),
    radial-gradient(140px 50px at 58% 190px,rgba(255,255,255,.65),transparent 72%),
    linear-gradient(180deg,var(--sky) 0,var(--bg) 300px) no-repeat,var(--bg);color:var(--ink);font:var(--fs-m)/1.45 var(--body);overflow-x:clip;
  padding:0 max(20px,env(safe-area-inset-right,0px)) 120px max(20px,env(safe-area-inset-left,0px));
  -webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sky)}
.wrap{max-width:640px;margin:0 auto}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;text-wrap:balance;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(28px,8vw,34px)}
h2{font-size:21px}
h1 em,h2 em{font-style:normal;font-weight:600;color:var(--brand-text)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}

/* Buttons: round pills. primary = coral gradient (main action). accent = trip color. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;
  border:0;background:var(--panel);color:var(--ink);font:700 var(--fs-m)/1.1 var(--body);text-decoration:none;text-align:center}
.btn.primary{background:var(--cta);color:var(--on-cta);font-weight:800;box-shadow:0 8px 18px rgba(223,77,33,.28)}
.btn.primary.sm{background:var(--cta-2);box-shadow:none}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.go{background:var(--panel-2)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.danger{background:#FDECEC;color:var(--danger)}
.btn.sm{min-height:40px;padding:0 14px;font-size:var(--fs-s)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--panel);box-shadow:var(--shadow);color:var(--ink);display:grid;place-items:center;padding:0;text-decoration:none}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.dark{background:var(--dark);color:var(--on-dark)}

.label{font:700 var(--fs-xs)/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}
.note{color:var(--muted);font-size:var(--fs-s)}
.hint{color:var(--muted);font-size:var(--fs-s)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.empty{color:var(--muted);text-align:center;padding:28px 16px;background:var(--panel);border-radius:var(--r-card);margin-top:12px}
section{margin-top:26px}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.shead h2{font-size:19px}
.shead a,.shead .more{font:600 var(--fs-s)/1 var(--body);color:var(--muted);text-decoration:none;background:none;border:0;padding:8px 0}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--panel);
  font:600 var(--fs-s)/1 var(--body);color:var(--ink);white-space:nowrap;border:0}
.chip.dark{background:var(--dark);color:var(--on-dark)}
.chip.live{background:var(--now-bg);color:var(--now)}
.chip.accent{background:var(--brand);color:var(--on-brand)}
.chip.warn{background:var(--p-peach);color:var(--ink);font-size:var(--fs-xs);min-height:26px;padding:0 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}

/* Red dot = now */
.ndot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--now);flex:none}
@media (prefers-reduced-motion:no-preference){.ndot.pulse{animation:pulse 1.6s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.3}}

/* Test mode badge (red stripes) */
.sim-badge{align-self:flex-start;min-height:34px;padding:0 14px;border:0;border-radius:999px;color:#fff;
  font:800 var(--fs-xs)/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  background:repeating-linear-gradient(45deg,#E5383B 0 7px,#A81627 7px 14px)}

/* Line icons */
.ico{display:inline-grid;place-items:center;width:22px;height:22px;flex:none}
.ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Photos: grey-green box while loading, icon when nothing was found */
.photo{display:grid;place-items:center;position:relative;overflow:hidden;background:var(--panel-2);color:var(--muted)}
.photo>.ico svg{width:24px;height:24px;stroke-width:1.6}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.photo img.ok{opacity:1}