/* Layout: a single column for sign-up; the map page splits into map + list on wide screens.
   Look follows michael-salib.com: cool grey ground, black type, navy accent, stone cards, square corners,
   Orpheus Pro / Adobe Garamond Pro (stood in for by Cormorant Garamond / EB Garamond). */
:root{
  --paper:#eaecf0; --card:#e0e0db; --field:#ffffff; --ink:#000000; --muted:#454c5c; --line:rgba(0,0,0,.14);
  --course:#e8590c; --cheer:#253551; --cheer-ink:#eaecf0; --cheer-soft:#d5dbe6;
  --ok:#1d6b40; --ok-bg:#dcebe1; --warn:#7a4300; --warn-bg:#f1e3cc; --bad:#9b2318; --bad-bg:#f3dcd8;
  --display:"Cormorant Garamond","Orpheus Pro",Garamond,"Times New Roman",serif;
  --body:"EB Garamond","Adobe Garamond Pro",Garamond,Georgia,serif;
  --num:"Cormorant Garamond",Garamond,Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#000000; --card:#14161b; --field:#0b0c10; --ink:#eaecf0; --muted:#a3aab8; --line:rgba(234,236,240,.18);
  --course:#ff7a2e; --cheer:#a9b8d6; --cheer-ink:#000000; --cheer-soft:#1b2232;
  --ok:#7fd1a0; --ok-bg:#10241a; --warn:#f0bf73; --warn-bg:#2a1f0e; --bad:#f2958b; --bad-bg:#2e1614; color-scheme:dark;}}
:root[data-theme="dark"]{
  --paper:#000000; --card:#14161b; --field:#0b0c10; --ink:#eaecf0; --muted:#a3aab8; --line:rgba(234,236,240,.18);
  --course:#ff7a2e; --cheer:#a9b8d6; --cheer-ink:#000000; --cheer-soft:#1b2232;
  --ok:#7fd1a0; --ok-bg:#10241a; --warn:#f0bf73; --warn-bg:#2a1f0e; --bad:#f2958b; --bad-bg:#2e1614; color-scheme:dark;}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:18px/1.55 var(--body);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--cheer)}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.col{max-width:560px;margin:0 auto}

.masthead{padding-block:30px 8px;display:grid;gap:6px}
.kicker{font:600 17px/1.2 var(--body);color:var(--muted)}
h1{font:500 clamp(36px,9vw,52px)/1.02 var(--display);margin:0;text-wrap:balance}
.lede{margin:6px 0 0;color:var(--muted);max-width:44ch}
h2{font:500 28px/1.1 var(--display);margin:0;text-wrap:balance}
.label{font:600 17px/1.2 var(--body);color:var(--muted)}

.section{padding-block:24px 0;display:grid;gap:12px}
.card{background:var(--card);padding:18px}

/* mile rail */
.rail{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin-inline:-2px;scrollbar-width:thin}
.mile{scroll-snap-align:center;flex:0 0 80px;height:92px;border:1px solid var(--line);background:var(--field);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font:inherit;padding:4px}
.mile b{font:600 36px/1 var(--num);font-variant-numeric:lining-nums tabular-nums}
.mile span{font-size:13px;line-height:1.15;text-align:center;color:var(--muted)}
.mile[aria-pressed="true"]{background:var(--cheer);border-color:var(--cheer);color:var(--cheer-ink)}
.mile[aria-pressed="true"] span{color:var(--cheer-ink)}
.mile.taken:not([aria-pressed="true"]){border-color:var(--cheer);box-shadow:inset 0 -3px 0 var(--cheer)}

.detail{display:grid;gap:14px}
.detail .where{font:500 28px/1.1 var(--display)}
.facts{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:16px}
.facts div{display:grid}
.facts span{color:var(--muted);font-weight:600}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.seg button{min-height:54px;border:1px solid var(--line);background:var(--field);color:var(--ink);font:500 17px/1.1 var(--body);cursor:pointer;padding:6px}
.seg button small{display:block;font-weight:600;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{border:2px solid var(--cheer);background:var(--cheer-soft);color:var(--cheer)}
.seg button[aria-pressed="true"] small{color:var(--cheer)}
.hint{font-size:15px;color:var(--muted);margin:0;font-weight:600}
.optout{margin-top:6px;max-width:48ch}
.optout a{color:var(--ink);white-space:nowrap}

.spots{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px;border:1px solid var(--line);background:var(--field);color:var(--ink);font:500 16px var(--body);cursor:pointer}
.chip b{font:600 20px var(--num);font-variant-numeric:lining-nums}
.chip[aria-pressed="true"]{border:2px solid var(--cheer);background:var(--cheer-soft);color:var(--cheer)}
.chip.add{border-style:dashed;color:var(--muted);background:transparent}
.legs{display:grid;gap:6px}
.leg{font-size:16px;padding:8px 12px}
.leg.ok{color:var(--ok);background:var(--ok-bg)} .leg.tight{color:var(--warn);background:var(--warn-bg)} .leg.no{color:var(--bad);background:var(--bad-bg)}

.fields{display:grid;gap:14px}
label.f{display:grid;gap:6px;font-size:16px;font-weight:500;color:var(--ink)}
label.f .note{font-weight:600;color:var(--muted)}
input,select{font:400 18px var(--body);color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:0;padding:12px 14px;width:100%;min-width:0}
select{appearance:auto}
:focus-visible{outline:2px solid var(--cheer);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);font:500 19px var(--display);letter-spacing:.02em;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--cheer);border-color:var(--cheer);color:var(--cheer-ink)}
.btn.quiet{border-color:var(--line);color:var(--muted);min-height:46px;font:400 16px var(--body)}
.btn[disabled]{opacity:.55;cursor:progress}
.actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-block:20px 8px}
.error{color:var(--bad);background:var(--bad-bg);padding:10px 14px;margin:0}
.error:empty{display:none}

.done{display:grid;gap:14px}
.done ol{margin:0;padding-left:22px;display:grid;gap:4px}
.copyrow{display:flex;gap:8px}
.copyrow input{font-size:15px}
footer{color:var(--muted);font-size:15px;font-weight:600;padding-block:30px 34px}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}