/* Trip viewer styles — ported from chicago-trip/index.html lines 31–274,
   Chicago color literals replaced by the base.css theme vars. */

.trip{padding-bottom:70px}

/* ---------- header ---------- */
header.trip-hero{background:var(--hgrad); color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 16px 14px}
.emoji-strip{display:flex; height:24px; align-items:center; gap:10px; margin-bottom:8px}
.emoji-strip .he{font-size:22px; line-height:1}
.emoji-strip span{font-size:13px; line-height:1; animation:tw 2.8s infinite}
.emoji-strip span:nth-child(3n){animation-delay:.7s}
.emoji-strip span:nth-child(3n+1){animation-delay:1.4s}
@keyframes tw{0%,100%{opacity:1}50%{opacity:.35}}
header.trip-hero h1{margin:0; font-size:27px; letter-spacing:.4px; line-height:1.15}
header.trip-hero .sub{color:var(--accent-soft); font-size:13px; margin-top:2px}
#wx{display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none}
#wx::-webkit-scrollbar{display:none}
.wxd{background:var(--brand2); border-radius:10px; padding:5px 10px; font-size:11.5px; white-space:nowrap; color:rgba(255,255,255,.85)}
.wxd b{color:#fff}

/* ---------- tabs ---------- */
nav{position:sticky; top:0; z-index:20; background:var(--brand); display:flex;
  padding:0 8px; box-shadow:0 2px 8px rgba(0,0,0,.18); overflow-x:auto; scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{flex:1 0 auto; min-width:56px; background:none; border:none; color:rgba(255,255,255,.55); font:inherit; font-size:13px;
  padding:10px 2px 8px; cursor:pointer; border-bottom:3px solid transparent}
nav button .d{display:block; font-size:15px; font-weight:700}
nav button.on{color:#fff; border-bottom-color:var(--hot)}
nav button .prog{display:block; font-size:10px; margin-top:1px; color:var(--accent)}

main{max-width:640px; margin:0 auto; padding:14px 12px 30px}

/* ---------- day header ---------- */
.dayhead{display:flex; align-items:baseline; justify-content:space-between; margin:4px 4px 10px}
.dayhead h2{margin:0; font-size:17px}
.dayhead .tag{font-size:12px; color:var(--muted)}
.bar{height:7px; background:var(--line); border-radius:4px; margin:0 4px 18px; position:relative}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--hot),var(--accent)); border-radius:4px; transition:width .4s}
.bar .bstar{position:absolute; top:-6px; font-size:14px; line-height:1; transition:left .4s; transform:translateX(-50%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}

/* ---------- stop cards ---------- */
.stop{background:var(--card); border-radius:14px; box-shadow:var(--shadow); margin-bottom:10px;
  padding:12px 14px; display:flex; gap:12px; border:1px solid var(--line); position:relative}
.stop.done{opacity:.55}
.stop.done .tt{text-decoration:line-through; color:var(--done)}
.stop.next{border:2px solid var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow)}
.nextchip{position:absolute; top:-10px; right:12px; background:var(--accent); color:var(--brand);
  font-size:11px; font-weight:800; padding:2px 10px; border-radius:9px; letter-spacing:.5px;
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.chk{flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:2px solid var(--accent);
  background:var(--bg); cursor:pointer; margin-top:2px; font-size:17px; line-height:1; padding:0;
  display:flex; align-items:center; justify-content:center; transition:transform .12s}
.chk:active{transform:scale(.85)}
.stop.done .chk{background:var(--green); border-color:var(--green); color:#fff; font-size:16px; font-weight:700}
.body{flex:1; min-width:0}
.trow{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.tm{font-weight:800; font-size:13px; color:var(--hot); letter-spacing:.3px}
.tt{font-weight:700; font-size:15.5px}
.badge{font-size:10.5px; font-weight:700; padding:1.5px 7px; border-radius:8px; letter-spacing:.3px; white-space:nowrap}
.badge.ok{background:var(--green-soft); color:var(--green)}
.badge.pend{background:var(--amber-soft); color:var(--amber)}
.badge.opt{background:var(--line); color:var(--muted)}
.addr{font-size:12.5px; color:var(--muted); margin-top:2px}
.travel{font-size:12px; color:var(--accent); margin-top:3px}
@media (prefers-color-scheme: light){ .travel{color:var(--accent-deep)} }
.note{font-size:13px; color:var(--ink); margin-top:5px}
.stop.done .note, .stop.done .addr{color:var(--done)}
.acts{display:flex; gap:8px; margin-top:9px; flex-wrap:wrap}
.acts a, .acts button{font-size:12.5px; font-weight:600; text-decoration:none; padding:6px 12px; border-radius:9px;
  border:1px solid var(--line); color:var(--ink); background:var(--bg); font-family:inherit; cursor:pointer}
.acts a:active, .acts button:active{transform:scale(.96)}

/* ---------- info blocks / backups ---------- */
details.blk{background:var(--card); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; box-shadow:var(--shadow)}
details.blk summary{padding:12px 14px; font-weight:700; font-size:14px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px}
details.blk summary::-webkit-details-marker{display:none}
details.blk summary::after{content:"▾"; margin-left:auto; color:var(--muted); transition:transform .2s}
details.blk[open] summary::after{transform:rotate(180deg)}
details.blk .inner{padding:0 14px 12px; font-size:13.5px; color:var(--ink)}
details.blk .inner ul{margin:4px 0; padding-left:18px}
details.blk .inner li{margin-bottom:6px}
details.blk .inner a{color:var(--accent-deep); font-weight:600}
@media (prefers-color-scheme: dark){ details.blk .inner a{color:var(--accent)} }
.mut{color:var(--muted)}

/* checklists */
.cl{list-style:none; padding:0; margin:4px 0}
.cl li{display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px dashed var(--line); cursor:pointer}
.cl li:last-child{border-bottom:none}
.cl .box{flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:2px solid var(--accent); margin-top:1px;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent}
.cl li.done .box{background:var(--green); border-color:var(--green); color:#fff}
.cl li.done span.txt{text-decoration:line-through; color:var(--done)}

table{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px}
th{text-align:left; color:var(--muted); font-weight:600; padding:4px 6px; border-bottom:1px solid var(--line)}
td{padding:5px 6px; border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}

.pill-note{background:var(--accent-soft); color:var(--brand); border-radius:12px; padding:11px 14px; font-size:13px; margin-bottom:12px}
@media (prefers-color-scheme: dark){ .pill-note{background:var(--brand2); color:var(--accent-soft)} }

.resetbtn{width:100%; margin-top:6px; background:none; border:1.5px solid var(--hot); color:var(--hot);
  font:inherit; font-weight:700; font-size:13.5px; padding:10px; border-radius:12px; cursor:pointer}
.seg{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:6px}
.seg button{flex:1; border:none; background:var(--bg); color:var(--muted); font:inherit; font-size:13px; padding:9px; cursor:pointer}
.seg button.on{background:var(--brand); color:#fff; font-weight:700}
footer{text-align:center; font-size:11.5px; color:var(--muted); padding:18px 0 8px}

/* ---------- custom stops ---------- */
.delx{position:absolute; top:8px; right:10px; background:none; border:none; color:var(--muted);
  font-size:16px; cursor:pointer; padding:4px; line-height:1}
.addbtn{width:100%; background:none; border:2px dashed var(--accent); color:var(--accent);
  font:inherit; font-weight:700; font-size:14px; padding:12px; border-radius:14px; cursor:pointer; margin-bottom:10px}
@media (prefers-color-scheme: light){ .addbtn{color:var(--accent-deep); border-color:var(--accent)} }
.addform{background:var(--card); border:2px solid var(--accent); border-radius:14px; padding:14px;
  margin-bottom:10px; box-shadow:var(--shadow)}
.addform h3{margin:0 0 10px; font-size:15px; font-family:'Baloo 2',sans-serif}
.addform input{width:100%; font:inherit; font-size:14px; padding:9px 11px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink)}
.addform input::placeholder{color:var(--muted)}
.frow{display:flex; gap:8px}
.frow input:first-child{flex:0 0 90px}
.fbtns{display:flex; gap:8px; margin-top:2px}
.fbtns button{flex:1; font:inherit; font-weight:700; font-size:13.5px; padding:10px; border-radius:10px; cursor:pointer; border:none}
.fbtns .go{background:var(--brand); color:#fff}
.fbtns .no{background:var(--line); color:var(--muted)}

/* ---------- trip recap ---------- */
.recapbtn{width:100%; border:none; cursor:pointer; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:17px; color:#fff; padding:15px; border-radius:14px; margin-bottom:10px;
  background:var(--recapgrad, linear-gradient(100deg,var(--hot) 0%,var(--brand2) 50%,var(--accent-deep) 100%)); box-shadow:var(--shadow)}
.recapbtn:active{transform:scale(.97)}
.recap{position:fixed; inset:0; z-index:1000; color:#fff; display:flex; flex-direction:column;
  font-family:'Baloo 2',sans-serif; overflow:hidden; transition:background .5s; user-select:none; -webkit-user-select:none}
.rbars{display:flex; gap:5px; padding:calc(10px + env(safe-area-inset-top)) 14px 0; position:relative; z-index:2}
.rbars i{flex:1; height:4px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden}
.rbars i b{display:block; height:100%; width:0; background:#fff}
.rbars i.past b{width:100%}
.rbars i.cur b{animation:fillbar linear forwards}
@keyframes fillbar{to{width:100%}}
.rclose{position:absolute; top:calc(20px + env(safe-area-inset-top)); right:12px; z-index:3;
  background:rgba(0,0,0,.3); border:none; color:#fff; font-size:17px; width:38px; height:38px;
  border-radius:50%; cursor:pointer}
.rslide{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:34px 28px; gap:10px; position:relative; z-index:1;
  animation:slidein .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes slidein{from{opacity:0; transform:translateY(26px) scale(.96)}}
.rkick{font-size:14px; opacity:.85; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.rbig{font-size:clamp(70px,26vw,130px); font-weight:800; line-height:1}
.rtitle{font-size:32px; font-weight:800; line-height:1.15; text-wrap:balance}
.rsub{font-size:16.5px; opacity:.92; max-width:320px; line-height:1.45;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.remoji{font-size:54px; line-height:1}
.rwalk{animation:pace 2.2s ease-in-out infinite alternate}
@keyframes pace{from{transform:translateX(-60px) scaleX(1)}to{transform:translateX(60px) scaleX(1)}}
.rrow{font-size:29px; font-weight:800; display:flex; align-items:center; gap:12px}
.rrow em{font-style:normal; font-size:36px}
.rshower{position:absolute; inset:0; pointer-events:none; z-index:0}
.rshower span{position:absolute; top:-70px; font-size:34px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(220deg)}}
.rstars{font-size:34px; letter-spacing:8px}
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0}
.statgrid label{font-size:12px; color:var(--muted); font-weight:600; display:block}
.statgrid input, .statmoment input{width:100%; font:inherit; font-size:14px; padding:8px 10px;
  border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); margin-top:3px}
.savebtn{width:100%; margin-top:8px; background:var(--brand); color:#fff; border:none; font:inherit;
  font-weight:700; font-size:13.5px; padding:10px; border-radius:10px; cursor:pointer}

/* ---------- lock / join screen ---------- */
#lock{position:fixed; inset:0; z-index:2000; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:6px; padding:30px;
  background:var(--hgrad); color:#fff;
  font-family:'Baloo 2',sans-serif}
#lock .lkey{font-size:56px}
#lock h2{margin:0; font-size:28px}
#lock p{margin:2px 0 14px; color:var(--accent-soft); font-size:15px; font-family:-apple-system,BlinkMacSystemFont,sans-serif}
#lock form{display:flex; flex-direction:column; align-items:center; margin:0}
#lock input{font:inherit; font-size:18px; text-align:center; padding:12px 16px; border-radius:12px;
  border:2px solid var(--accent); background:rgba(255,255,255,.95); color:var(--brand); width:min(280px,80vw)}
#lock button{font:inherit; font-weight:800; font-size:16px; margin-top:12px; padding:12px 34px;
  border:none; border-radius:12px; background:var(--hot); color:#fff; cursor:pointer}
#lock .hint{min-height:22px; color:#FFD24C; font-size:14px; margin-top:12px}
#lock.wrong input{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}50%{transform:translateX(9px)}75%{transform:translateX(-5px)}}

/* ---------- family finder ---------- */
.mapbox{height:48vh; min-height:300px; border-radius:14px; border:1px solid var(--line);
  margin-bottom:10px; background:var(--card); z-index:1; position:relative}
.fpin{background:#fff; border:2px solid var(--brand); border-radius:14px; padding:2px 9px; display:flex;
  align-items:center; gap:5px; font-weight:700; font-size:13px; white-space:nowrap; color:var(--brand);
  box-shadow:0 2px 8px rgba(0,0,0,.3); font-family:'Baloo 2',sans-serif; width:max-content}
.fpin i{font-style:normal; font-size:16px}
.sharebar{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:10px 14px; margin-bottom:10px; font-size:13.5px; box-shadow:var(--shadow)}
.sharebar .who{flex:1; font-weight:700}
.sharebar button{font:inherit; font-size:12.5px; font-weight:700; border:none; border-radius:9px;
  padding:7px 12px; cursor:pointer; background:var(--green-soft); color:var(--green)}
.sharebar button.off{background:var(--amber-soft); color:var(--amber)}
.sharebar .sw{background:none; color:var(--muted); text-decoration:underline; padding:7px 2px}
.mrow{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; margin-bottom:8px; box-shadow:var(--shadow)}
.mrow .me1{font-size:22px}
.mrow .mm{flex:1; min-width:0}
.mrow .mn{font-weight:700; font-size:14.5px}
.mrow .ma{font-size:12px; color:var(--muted)}
.mrow a{font-size:12.5px; font-weight:600; text-decoration:none; padding:6px 11px; border-radius:9px;
  border:1px solid var(--line); color:var(--ink); background:var(--bg); white-space:nowrap}
.emorow{display:flex; gap:7px; flex-wrap:wrap; margin:8px 0}
.emopt{font-size:22px; background:var(--bg); border:2px solid var(--line); border-radius:11px;
  width:44px; height:44px; cursor:pointer; padding:0}
.emopt.sel{border-color:var(--hot); background:var(--amber-soft)}

/* ---------- attire popup ---------- */
.apop{position:fixed; inset:0; z-index:1500; background:rgba(10,20,32,.55); display:flex;
  align-items:center; justify-content:center; padding:24px; animation:apopin .2s}
@keyframes apopin{from{opacity:0}}
.apop .card2{background:var(--card); color:var(--ink); border-radius:18px; padding:20px 20px 16px;
  max-width:360px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.4); border:2px solid var(--accent);
  position:relative; animation:apoppop .25s cubic-bezier(.2,1.3,.4,1); text-align:center}
@keyframes apoppop{from{transform:scale(.85); opacity:0}}
.apop .ae{font-size:44px; line-height:1}
.apop h3{margin:6px 0 2px; font-family:'Baloo 2',sans-serif; font-size:19px}
.apop .awx{font-size:12.5px; color:var(--muted); margin-bottom:10px}
.apop .atxt{font-size:14.5px; line-height:1.5; text-align:left; background:var(--bg);
  border-radius:12px; padding:12px 14px}
.apop .aok{margin-top:12px; width:100%; background:var(--brand); color:#fff; border:none; font:inherit;
  font-weight:700; font-size:14px; padding:11px; border-radius:11px; cursor:pointer}

/* ---------- home base card ---------- */
.homecard{background:var(--hgrad); color:#fff; border-radius:14px;
  padding:16px; text-align:center; margin-bottom:12px; box-shadow:var(--shadow); border:2px solid var(--accent)}
.homecard .hh{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft); font-weight:700}
.homecard .haddr{font-family:'Baloo 2',sans-serif; font-size:22px; font-weight:800; margin:4px 0 2px}
.homecard .hsub{font-size:12.5px; color:var(--accent-soft); margin-bottom:11px}
.homecard .acts{justify-content:center; margin-top:0}
.homecard .acts a, .homecard .acts button{background:rgba(255,255,255,.16); color:#fff; border:none;
  font-size:12.5px; font-weight:600; text-decoration:none; padding:7px 14px; border-radius:9px;
  cursor:pointer; font-family:inherit}