/* "Apps" tab (floating menu): the hub of pastel tiles (one color per app), and the cards inside each app */
.appgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.apptile{--t:var(--panel);--ti:var(--ink);display:grid;justify-items:start;gap:6px;text-align:left;background:var(--t);border:0;border-radius:var(--r-card);padding:16px;min-height:132px;color:var(--ink)}
.apptile[data-app="flights"]{--t:var(--p-mint);--ti:var(--i-mint)}
.apptile[data-app="docs"]{--t:var(--p-peach);--ti:var(--i-peach)}
.apptile[data-app="weather"]{--t:var(--p-sky);--ti:var(--i-sky)}
.apptile[data-app="info"]{--t:var(--p-lime);--ti:var(--i-lime)}
.apptile .ico{color:var(--ti);width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.7)}
.apptile .ico svg{width:26px;height:26px}
.apptile b{font:700 21px/1 var(--display);margin-top:auto}
.apptile small{color:var(--ink);opacity:.72;font-size:var(--fs-xs);line-height:1.3}
.apptile:active{filter:brightness(.96)}
.appsec{margin-top:20px}

/* Cards (documents, flights) */
.cards{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.card{background:var(--panel);border-radius:var(--r-card);padding:14px;display:grid;gap:8px;border:1.5px solid transparent}
.card.next{border-color:var(--brand)}
.card.past{opacity:.55}
.card .ct b{font:600 19px/1.15 var(--display)}
.card .ct small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
.card .acts{margin-top:2px}
.code{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:8px;border:1.5px dashed var(--line);background:var(--bg)}
.code .mono{font:800 var(--fs-l)/1 var(--body);letter-spacing:.08em}
.code i{font-style:normal;font-size:var(--fs-xs);color:var(--accent-text);font-weight:700}

/* Flight = boarding pass */
.ptop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.route>div:last-child{text-align:right}
.route b{display:block;font:600 clamp(34px,11vw,48px)/1 var(--display)}
.route small{color:var(--ink);font-size:var(--fs-m);font-weight:700}
.route .plane{color:var(--muted);font-size:22px}
.pinfo{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.pinfo dt{font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pinfo dd{margin:4px 0 0;font-weight:800}

/* Weather */
.wxnow{display:flex;gap:16px;align-items:center;background:var(--panel);border-radius:var(--r-card);padding:14px;margin-top:12px}
.wbig{display:flex;align-items:center;gap:6px}
.wbig span{font-size:38px}
.wbig b{font:600 52px/1 var(--display)}
.wtx{font:600 19px/1.1 var(--display);margin:4px 0}
.upd{margin-top:6px}
.upd.warn{color:var(--now)}
.wxlist{list-style:none;margin:0;padding:0}
.wxlist li{display:grid;grid-template-columns:70px 34px 1fr auto;gap:8px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule)}
.wxlist .wd{font:700 var(--fs-s)/1 var(--body)}
.wxlist .wi{font-size:20px;text-align:center}
.wxlist .wt{color:var(--muted)}
.wxlist .wt b{color:var(--ink);font-size:var(--fs-l)}
.wxlist .wr{color:var(--muted);font-size:var(--fs-s)}
.wxlist li.today .wd{color:var(--now)}
.wxlist li.past{opacity:.6}


/* Radar (Temps) */
.radarhost{margin-top:10px}
.radarbox{background:var(--panel);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.radarmap{height:min(62vh,380px);background:var(--panel-2)}
.rme{width:14px;height:14px;border-radius:50%;background:var(--now);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.rctl{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px 12px 4px}
.rplay{width:40px;height:40px;border-radius:50%;border:0;background:var(--dark);color:var(--on-dark);font:700 13px/1 var(--body)}
.rctl input{width:100%;accent-color:var(--dark)}
.rtime{text-align:right;min-width:74px;line-height:1.1}
.rtime b{display:block;font-size:var(--fs-l)}
.rtime small{color:var(--muted);font-size:var(--fs-xs)}
.rfoot{display:flex;justify-content:space-between;gap:8px;padding:4px 12px 12px;color:var(--muted);font-size:var(--fs-xs)}
.rleg{display:inline-flex;align-items:center;gap:6px}
.rleg i{width:70px;height:8px;border-radius:4px;background:linear-gradient(90deg,#04e9e7,#019ff4,#02fd02,#01c501,#fdf802,#fd9500,#fd0000,#bc0000,#f800fd)}

/* Next hours: a strip you scroll sideways */
.hours{list-style:none;margin:10px 0 0;padding:0 0 6px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.hours li{flex:0 0 58px;scroll-snap-align:start;display:grid;justify-items:center;gap:4px;background:var(--panel);border-radius:16px;padding:10px 4px}
.hours .hh{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.hours li.today .hh{color:var(--now)}
.hours .wi{font-size:20px}
.hours b{font-size:var(--fs-m)}
.hours small{font-size:11px;color:var(--muted)}
.hours .amt{min-height:13px;color:var(--ink);font-weight:700}

/* The week */
.wxweek{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.wk{background:var(--panel);border-radius:20px;padding:12px 14px;display:grid;gap:8px}
.wkh{display:grid;grid-template-columns:56px 30px 1fr auto;gap:8px;align-items:center}
.wkh .wd{font:700 var(--fs-s)/1 var(--body)}
.wk.today .wd{color:var(--now)}
.wkh .wi{font-size:22px;text-align:center}
.wtx2{color:var(--muted);font-size:var(--fs-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkh .wt{color:var(--muted)}
.wkh .wt b{color:var(--ink);font-size:var(--fs-l)}
.wkd{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-xs);color:var(--muted)}
.wkd b{color:var(--ink)}
.wkd small{font-size:inherit}
.trust{margin-top:10px;background:var(--panel);border-radius:16px;padding:10px 14px;font-size:var(--fs-s);color:var(--muted)}
.trust summary{font-weight:700;color:var(--ink);cursor:pointer}
.trust p{margin:8px 0 0}
.trust b{color:var(--ink)}

/* Weather line on each trip day */
.daywx{margin-top:8px;display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:0;border-radius:999px;padding:6px 12px;font:700 var(--fs-s)/1 var(--body);color:var(--ink)}

/* Rows inside a card (flight live status) */
.lrow{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-s);color:var(--muted)}
.lrow b{color:var(--ink);font-size:var(--fs-m)}
.lrow i{font-style:normal}