/* What To Do v2 — whattodo-v2 */
:root { --bg:#f5f1ff; --card:#ffffff; --ink:#1e1b2e; --muted:#6b6580; --acc:#6d28d9; --acc-soft:#ede4ff; --line:#e4ddf5; --good:#1f7a3d; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-text-size-adjust:100%; }
header { background:var(--acc); color:#fff; padding:14px 16px 12px; position:sticky; top:0; z-index:5; }
header h1 { margin:0; font-size:22px; }
header .sub { font-size:13px; opacity:.85; margin-top:2px; }
main { padding:12px 12px 40px; max-width:640px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px; box-shadow:0 1px 3px rgba(60,30,120,.06); }
.lbl { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:12px 0 6px; font-weight:700; }
.row { display:flex; gap:8px; align-items:center; }
.row input[type=text] { flex:1; }
input[type=text] { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:16px; background:#fff; color:var(--ink); }
button { font-size:16px; }
.btn { background:var(--acc); color:#fff; border:0; border-radius:10px; padding:10px 16px; font-weight:600; min-height:44px; }
.btn:disabled { opacity:.45; }
.ghost { background:var(--acc-soft); color:var(--acc); border:0; border-radius:10px; padding:10px 14px; font-weight:600; min-height:44px; }
.seg { display:flex; background:var(--acc-soft); border-radius:12px; padding:4px; gap:4px; }
.seg button { flex:1; border:0; border-radius:9px; padding:10px 4px; background:transparent; color:var(--acc); font-weight:700; min-height:44px; font-size:15px; }
.seg button.on { background:var(--acc); color:#fff; }
.muted { color:var(--muted); font-size:14px; }
.small { font-size:13px; }
/* Each event is its own card: easier to scan than one long divided list. */
.ev { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 16px 14px; margin-bottom:12px; box-shadow:0 1px 3px rgba(60,30,120,.06); }
.ev h3 { margin:0 0 6px; font-size:19px; line-height:1.3; }
.ev .when { font-weight:600; color:var(--acc); font-size:15px; }
.ev .where { margin-top:4px; color:var(--muted); font-size:14px; }
.ev .dist { color:var(--muted); font-size:13px; margin-top:2px; }
.ev .price { margin-top:8px; font-weight:700; font-size:16px; }
.ev .price.free { color:var(--good); }
.ev .desc { margin-top:8px; color:#3a3550; font-size:15px; line-height:1.5; }
.ev .links { margin-top:12px; display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; }
.ev .links a { color:var(--acc); font-weight:600; font-size:15px; padding:10px 2px; }
.addbtn { border:1.5px solid var(--acc); background:#fff; color:var(--acc); border-radius:999px; padding:9px 18px; font-weight:700; font-size:15px; min-height:44px; }
.addbtn.on { background:var(--acc-soft); border-color:var(--acc-soft); }
.gapline { text-align:center; margin:2px 0 12px; }
.gapline span { display:inline-block; background:var(--acc-soft); color:var(--acc); font-size:13px; font-weight:600; border-radius:999px; padding:5px 14px; }
.sec-head { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin:20px 2px 8px; }
.badge { display:inline-block; background:var(--acc-soft); color:var(--acc); border-radius:6px; padding:1px 7px; font-size:12px; font-weight:700; margin-left:6px; vertical-align:middle; }
.notice { background:#fff8e6; border:1px solid #f0dfa8; border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:12px; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:18px 12px 30px; }
input[type=range] { width:100%; accent-color:var(--acc); }
.radius-line { display:flex; justify-content:space-between; align-items:baseline; }
.radius-line output { font-weight:700; color:var(--acc); }