/* hub.css — the hub screen. */
/* ── station hub ──
   The Hub is the one screen that is about anticipation rather than record, so
   it is the one place the app uses photography and a warmer layout. Everything
   else stays on the dense operational grid. */
.dest{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);cursor:pointer;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end}
.dest:hover{border-color:var(--faint)}
.dest .ph{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
/* The scrim is what keeps white text legible over a photograph we do not
   control — some city images are bright sky, some are night skyline. */
.dest .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,18,.15) 0%,rgba(6,10,18,.55) 45%,rgba(6,10,18,.92) 100%)}
.dest .bd{position:relative;padding:14px 15px 13px;color:#fff}
.dest .iata{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:1px;line-height:1}
.dest .city{font-size:14px;font-weight:600;opacity:.95;margin-top:2px}
.dest .when{font-size:11px;font-family:var(--mono);opacity:.8;margin-top:5px;display:flex;gap:8px;flex-wrap:wrap}
.dest .tag{position:absolute;top:11px;right:11px;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.8px;background:rgba(6,10,18,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);color:#fff;padding:4px 9px;border-radius:999px}
.dest .tag.next{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:700}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px}
/* A station with no photograph must still look deliberate rather than broken. */
.dest.noph{background:linear-gradient(135deg,var(--raise),var(--surface))}
.dest.noph .bd{color:var(--txt)}
.dest.noph .sc{background:none}
.wx{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.wx .d{flex:0 0 auto;min-width:86px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:9px 11px;text-align:center}
.wx .d .dy{font-size:10px;color:var(--faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px}
.wx .d .ic{display:flex;justify-content:center;line-height:0;margin:5px 0 3px;color:var(--dim)}
.wx .d .mt.sun{display:flex;align-items:center;justify-content:center;gap:4px}
.wx .d .mt.sun svg{flex:none;opacity:.8}
.wx .d .t{font-family:var(--mono);font-size:13px;font-weight:600}
.wx .d .t small{color:var(--faint);font-weight:400}
.wx .d .mt{font-size:10px;color:var(--dim);margin-top:2px}
/* 118px, not 140: inside the modal a phone has ~280px of content width, and
   140 forced a single column that turned four short facts into four screens
   of scrolling. At 118 two fit side by side and the block reads at a glance. */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px}
.kv .b{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 12px}
.kv .b .k{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint);font-weight:700}
.kv .b .v{font-family:var(--mono);font-size:15px;font-weight:600;margin-top:3px}
.kv .b .s{font-size:11px;color:var(--dim);margin-top:1px}
/* AI text is boxed and labelled so it can never be mistaken for roster fact. */
.ai{border:1px solid var(--line);border-left:3px solid var(--dh);border-radius:12px;background:var(--surface);padding:12px 14px}
.ai p{margin:0 0 8px}.ai p:last-child{margin:0}
.ai .lb{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.8px;color:var(--dh);font-weight:700;margin-bottom:7px}
.warnbox{border:1px solid rgba(255,202,74,.35);background:rgba(255,202,74,.08);color:var(--trn);border-radius:12px;padding:10px 13px;font-size:12px}