/* Shared across index, street pages and the map chrome. */
:root{
  --bg:#fbfaf8; --panel:#fff; --ink:#16181d; --muted:#5d6470; --line:#e3e1dc;
  --accent:#1c5d99; --accent-ink:#fff; --warn:#b4401f; --soon:#fff4ed;
  --ok:#2c6e49; --shadow:0 2px 12px rgba(0,0,0,.10);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#14161a; --panel:#1c1f25; --ink:#eceef2; --muted:#9aa2b1; --line:#2c313a;
  --accent:#5b9bd5; --accent-ink:#0d1117; --warn:#ff8a5c; --soon:#2a1f19;
  --ok:#6fcf97; --shadow:0 2px 12px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:680px;margin:0 auto;padding:22px 18px 80px}
a{color:var(--accent)}
h1{font-size:1.6rem;margin:0 0 6px;letter-spacing:-.02em}
h2{font-size:1.05rem;margin:26px 0 10px;letter-spacing:-.01em}
.lede{margin:0 0 20px;color:var(--muted)}
.crumb{font-size:.85rem;color:var(--muted);margin:0 0 14px}
.crumb a{text-decoration:none}

/* sticky search */
.search{position:sticky;top:0;background:var(--bg);padding:10px 0 12px;z-index:5}
input[type=search],input[type=email]{width:100%;padding:13px 15px;font-size:1.02rem;
  border:2px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink)}
input[type=search]:focus,input[type=email]:focus{outline:none;border-color:var(--accent)}
.tools{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.count{font-size:.85rem;color:var(--muted);margin:8px 2px}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin-bottom:10px}
.card.soon{border-color:var(--warn);background:var(--soon)}
.street{font-weight:650;font-size:1.08rem;margin:0 0 3px}
.street a{text-decoration:none;color:inherit}
.street a:hover{text-decoration:underline}
.rule{color:var(--muted);font-size:.92rem;margin:0 0 10px}
.next{font-size:.95rem;margin:0 0 4px}
.badge{display:inline-block;font-size:.78rem;font-weight:650;padding:3px 9px;
  border-radius:999px;background:var(--accent);color:var(--accent-ink);margin-left:6px}
.badge.warn{background:var(--warn);color:#fff}
.variant{font-size:.8rem;color:var(--warn);margin:6px 0 0}
.dist{font-size:.8rem;color:var(--muted);margin:4px 0 0}

/* subscribe block */
details{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font-weight:600;font-size:.93rem;color:var(--accent)}
.opts{display:grid;gap:10px;margin-top:12px}
.opt{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--bg)}
.opt h4{margin:0 0 4px;font-size:.95rem}
.opt p{margin:0 0 9px;font-size:.85rem;color:var(--muted)}
.opt form{display:flex;gap:7px}
.opt form input{flex:1;padding:9px 11px;font-size:.9rem;border-width:1px;border-radius:8px}

button,.btn{display:inline-block;padding:10px 15px;font-size:.92rem;font-weight:600;
  border:0;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  cursor:pointer;text-decoration:none;white-space:nowrap}
button[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost,button.ghost{background:transparent;color:var(--accent);
  border:1.5px solid var(--accent)}
.btn.small{padding:7px 12px;font-size:.85rem}

.dates{margin:10px 0 0;padding-left:18px;font-size:.88rem;color:var(--muted)}
.msg{font-size:.85rem;margin-top:8px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--warn)}

/* iOS-only warning: the "Ta bort notiser" toggle defaults ON and silently
   strips every alarm, so a subscription can look fine and never fire. */
.ios{display:none;font-size:.82rem;line-height:1.45;color:var(--ink);
  background:var(--soon);border:1px solid var(--warn);border-radius:8px;
  padding:9px 11px;margin:0 0 10px}
body.is-ios .ios{display:block}

footer{margin-top:34px;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--line);padding-top:16px}