/* Ko Olina 2026 — mobile-first, offline-first, no external anything. */

:root{
  --ink:#0c2029;
  --ink-2:#41616e;
  --ink-3:#7d97a1;
  --line:#e2dcd0;
  --line-2:#efeae0;
  --bg:#f7f2e9;
  --card:#fffdf8;
  --sea:#0e6d81;
  --sea-d:#08475a;
  --lagoon:#19a8ab;
  --sun:#ff7d4d;
  --sun-2:#ffb15c;
  --gold:#c98a2b;
  --good:#1a8f6a;
  --warn:#b26b00;
  --bad:#c0392b;
  --r:16px;
  --r-s:11px;
  --sh:0 1px 2px rgba(12,32,41,.05), 0 6px 18px -8px rgba(12,32,41,.14);
  --sh-2:0 2px 4px rgba(12,32,41,.06), 0 18px 40px -18px rgba(12,32,41,.26);
  --sky-1:#0b3d52; --sky-2:#17849a; --sky-3:#43bfae;
  --tabh:calc(56px + env(safe-area-inset-bottom));
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eaf2f5; --ink-2:#9fb6c0; --ink-3:#6c8894;
    --line:#1d3540; --line-2:#162a33;
    --bg:#071319; --card:#0e2029;
    --sea:#3fb6c9; --sea-d:#8fd8e2; --lagoon:#35c9c0;
    --gold:#e8b45f; --good:#43c795; --warn:#e0a13a; --bad:#f0705f;
    --sh:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
    --sh-2:0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.8);
  }
}

*,*::before,*::after{box-sizing:border-box}
/* display rules below would otherwise beat the UA stylesheet's [hidden] */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.5 ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--sea);text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── gate ─────────────────────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
  background:linear-gradient(165deg,#08303f,#0e6d81 55%,#1aa6a0)}
.gate-card{text-align:center;color:#fff;max-width:320px;width:100%}
.gate-mark{color:#ffd08a;margin-bottom:14px}
.gate-card h1{font-size:34px;letter-spacing:-.03em}
.gate-card p{opacity:.72;margin-top:4px;font-size:15px}
#gate-form{margin-top:26px;display:flex;flex-direction:column;gap:10px}
#gate-input{padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);color:#fff;text-align:center;font-size:17px}
#gate-input::placeholder{color:rgba(255,255,255,.6)}
#gate-input:focus{outline:2px solid #ffd08a;outline-offset:1px}
#gate-form button{padding:14px;border-radius:12px;background:#ffd08a;color:#08303f;font-weight:650}
.gate-err{color:#ffd08a;margin-top:12px;font-size:14px}

/* ── sky header ───────────────────────────────────────────────── */
.sky{
  background:linear-gradient(168deg,var(--sky-1),var(--sky-2) 62%,var(--sky-3));
  color:#fff;padding:calc(env(safe-area-inset-top) + 14px) 18px 24px;
  position:relative;overflow:hidden;transition:background .8s ease;
}
.sky::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-46px;height:92px;
  background:var(--bg);border-radius:50% 50% 0 0}
.sky-inner{position:relative;z-index:1;max-width:820px;margin:0 auto}
.sky-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.clocks{display:flex;gap:18px}
.clock{display:flex;flex-direction:column;line-height:1.15}
.clock-t{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;opacity:.66;margin-top:2px}
.clock-alt .clock-t{opacity:.62;font-weight:500;font-size:17px}
.net{display:flex;align-items:center;gap:6px;font-size:11.5px;padding:5px 10px;border-radius:99px;
  background:rgba(255,255,255,.15);letter-spacing:.02em}
.net .dot{width:7px;height:7px;border-radius:99px;background:#7ef2c0}
.net.off .dot{background:#ffc46b}
.greet{font-size:29px;margin-top:20px;letter-spacing:-.03em}
.count{font-size:14.5px;opacity:.78;margin-top:5px}

/* ── layout ───────────────────────────────────────────────────── */
main{max-width:820px;margin:0 auto;padding:4px 14px calc(var(--tabh) + 28px)}
.view{display:flex;flex-direction:column;gap:14px}
.sec{margin-top:12px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:0 3px 9px;}
.sec-h h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:650}
.sec-h .sec-x{font-size:12.5px;color:var(--ink-3)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:16px}

/* ── alerts ───────────────────────────────────────────────────── */
.alert{display:flex;gap:12px;padding:14px 15px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);box-shadow:var(--sh);align-items:flex-start}
.alert+.alert{margin-top:9px}
.alert .ico{flex:0 0 auto;width:22px;height:22px;border-radius:99px;display:grid;place-items:center;
  font-size:12px;font-weight:700;margin-top:1px;color:#fff}
.alert.high .ico{background:var(--bad)} .alert.medium .ico{background:var(--warn)} .alert.low .ico{background:var(--ink-3)}
.alert h3{font-size:15px}
.alert p{font-size:13.6px;color:var(--ink-2);margin-top:5px;line-height:1.52}
.alert .go{display:inline-block;margin-top:9px;font-size:13px;font-weight:600;color:var(--sea)}
.alert.done{opacity:.42}
.alert .ack{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--ink-3);padding:3px 8px;
  border:1px solid var(--line);border-radius:99px}

/* ── weather ──────────────────────────────────────────────────── */
.wx{padding:16px 16px 6px}
.wx-top{display:flex;align-items:center;gap:14px}
.wx-temp{font-size:44px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.wx-meta{flex:1;min-width:0}
.wx-meta .d{font-size:14.5px;font-weight:600}
.wx-meta .s{font-size:12.6px;color:var(--ink-3);margin-top:3px}
.wx-sun{display:flex;gap:16px;font-size:12.5px;color:var(--ink-2);margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line-2)}
.wx-sun b{font-weight:600;color:var(--ink)}
.wx-days{display:flex;gap:5px;overflow-x:auto;padding:12px 16px 16px;margin-top:4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wx-days::-webkit-scrollbar{display:none}
.wx-day{flex:0 0 auto;width:60px;text-align:center;padding:9px 4px;border-radius:12px;background:var(--line-2)}
.wx-day.now{background:linear-gradient(160deg,var(--sun-2),var(--sun));color:#fff}
.wx-day .dn{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.72}
.wx-day .de{font-size:19px;margin:4px 0 2px;line-height:1}
.wx-day .dt{font-size:12px;font-variant-numeric:tabular-nums}
.wx-day .dt i{opacity:.55;font-style:normal}

/* ── timeline ─────────────────────────────────────────────────── */
.tl{position:relative;padding-left:0}
.tl-i{display:grid;grid-template-columns:60px 1fr;gap:12px;padding:13px 15px;position:relative}
.tl-i+.tl-i{border-top:1px solid var(--line-2)}
.tl-t{font-size:12.5px;font-weight:650;color:var(--ink-2);font-variant-numeric:tabular-nums;
  padding-top:2px;letter-spacing:-.01em}
.tl-t i{display:block;font-style:normal;font-size:10px;color:var(--ink-3);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.tl-b h4{font-size:15px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tl-b p{font-size:13.3px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.tl-i.locked .tl-b h4::after{content:"confirmed";font-size:9.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--good);border:1px solid currentColor;padding:1px 5px;border-radius:99px;font-weight:600}
.tl-i.past{opacity:.44}
.tl-i.now{background:linear-gradient(90deg,rgba(255,125,77,.09),transparent 60%)}
.tl-i.now::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sun)}

/* ── flight / detail blocks ───────────────────────────────────── */
.fl{padding:16px}
.fl-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.fl-h .fn{font-size:15px;font-weight:650}
.fl-h .fd{font-size:12.5px;color:var(--ink-3)}
.fl-r{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.fl-p{text-align:center}
.fl-p .ap{font-size:26px;font-weight:650;letter-spacing:-.03em}
.fl-p .ti{font-size:15px;font-variant-numeric:tabular-nums;margin-top:2px}
.fl-p .ci{font-size:11px;color:var(--ink-3);margin-top:2px}
.fl-m{color:var(--ink-3);font-size:11px;text-align:center;min-width:64px}
.fl-m .ln{height:1px;background:var(--line);margin:6px 0;position:relative}
.fl-m .ln::after{content:"";position:absolute;right:0;top:-2.5px;width:0;height:0;
  border-left:5px solid var(--line);border-top:3px solid transparent;border-bottom:3px solid transparent}
.seats{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2)}
.seat{font-size:12px;padding:4px 9px;border-radius:99px;background:var(--line-2);font-variant-numeric:tabular-nums}
.seat b{font-weight:650}
.seat.none{background:rgba(192,57,43,.1);color:var(--bad)}

/* ── rows / kv ────────────────────────────────────────────────── */
.kv{display:flex;justify-content:space-between;gap:14px;padding:11px 15px;font-size:14px;align-items:baseline}
.kv+.kv{border-top:1px solid var(--line-2)}
.kv .k{color:var(--ink-3);flex:0 0 auto;font-size:13px}
.kv .v{text-align:right;font-weight:550;min-width:0;word-break:break-word}
.kv .v.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.copy{border:1px solid var(--line);border-radius:8px;padding:2px 7px;font-size:11px;
  color:var(--ink-3);margin-left:7px;vertical-align:middle}
.copy:active{background:var(--line-2)}

.list-a{display:block;padding:13px 15px;font-size:14.5px;color:var(--ink)}
.list-a+.list-a{border-top:1px solid var(--line-2)}
.list-a .s{font-size:12.6px;color:var(--ink-3);margin-top:2px}
.list-a .r{float:right;color:var(--sea);font-size:13px;font-weight:600}

/* ── option picker ────────────────────────────────────────────── */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{border:1.5px solid var(--line);border-radius:var(--r);background:var(--card);
  box-shadow:var(--sh);overflow:hidden;transition:border-color .18s,box-shadow .18s}
.opt.sel{border-color:var(--lagoon);box-shadow:0 0 0 3px color-mix(in srgb,var(--lagoon) 16%,transparent),var(--sh)}
.opt-h{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;width:100%;text-align:left}
.opt-tick{flex:0 0 auto;width:21px;height:21px;border-radius:99px;border:2px solid var(--line);margin-top:2px;
  display:grid;place-items:center}
.opt.sel .opt-tick{border-color:var(--lagoon);background:var(--lagoon)}
.opt-tick svg{width:12px;height:12px;color:#fff;stroke-width:3;opacity:0}
.opt.sel .opt-tick svg{opacity:1}
.opt-h .tt{flex:1;min-width:0}
.opt-h h3{font-size:15.5px}
.opt-h .vibe{font-size:12.3px;color:var(--ink-3);margin-top:3px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.opt-h .vibe span{white-space:nowrap}
.opt-h .vibe .sep{opacity:.4}
.pill-best{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:650;
  color:var(--gold);border:1px solid currentColor;padding:1px 6px;border-radius:99px}
.opt-body{border-top:1px solid var(--line-2);display:none}
.opt.sel .opt-body,.opt.open .opt-body{display:block}
.kidnote{display:flex;gap:9px;padding:12px 15px;font-size:13.2px;color:var(--ink-2);line-height:1.52;
  background:color-mix(in srgb,var(--sun) 7%,transparent);border-top:1px solid var(--line-2)}
.kidnote .e{flex:0 0 auto}
.peek{width:100%;padding:10px;font-size:12.5px;font-weight:600;color:var(--ink-3);
  border-top:1px solid var(--line-2)}
.opt.sel .peek{display:none}

/* ── places ───────────────────────────────────────────────────── */
.filters{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:0 0 auto;padding:7px 14px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);font-size:13.5px;font-weight:550;color:var(--ink-2)}
.filters button.on{background:var(--sea);border-color:var(--sea);color:#fff}
.place{padding:14px 15px}
.place+.place{border-top:1px solid var(--line-2)}
.place-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.place h3{font-size:15px}
.place .drive{font-size:12px;color:var(--ink-3);white-space:nowrap;flex:0 0 auto}
.place p{font-size:13.3px;color:var(--ink-2);margin-top:5px;line-height:1.52}
.place-f{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:12px}
.kidrate{font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.kidrate b{color:var(--gold);letter-spacing:.06em}
.maplink{font-size:12.8px;font-weight:600;color:var(--sea);display:flex;align-items:center;gap:5px}
.maplink svg{width:14px;height:14px}

/* ── checklist ────────────────────────────────────────────────── */
.chk{display:flex;gap:11px;padding:11px 15px;align-items:flex-start;width:100%;text-align:left;font-size:14.3px}
.chk+.chk{border-top:1px solid var(--line-2)}
.chk .box{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:2px solid var(--line);
  display:grid;place-items:center;margin-top:1px}
.chk .box svg{width:12px;height:12px;color:#fff;stroke-width:3.2;opacity:0}
.chk.on .box{background:var(--good);border-color:var(--good)}
.chk.on .box svg{opacity:1}
.chk.on span{text-decoration:line-through;color:var(--ink-3)}
.grp-h{padding:13px 15px 7px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:650}
.grp-h:not(:first-child){border-top:1px solid var(--line-2);margin-top:2px}

/* ── tips / misc ──────────────────────────────────────────────── */
.tip{padding:13px 15px}
.tip+.tip{border-top:1px solid var(--line-2)}
.tip b{font-size:14px;display:block}
.tip p{font-size:13.2px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.note{font-size:12.6px;color:var(--ink-3);padding:11px 15px;line-height:1.55}
.btn{display:block;width:100%;padding:13px;border-radius:12px;background:var(--sea);color:#fff;
  font-weight:600;font-size:14.5px;text-align:center}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.btn+.btn{margin-top:8px}
.bullets{margin:0;padding:4px 15px 14px 32px;font-size:13.3px;color:var(--ink-2);line-height:1.6}
.bullets li{margin-top:5px}

/* ── tabs ─────────────────────────────────────────────────────── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 7px;color:var(--ink-3)}
.tabs button svg{width:21px;height:21px}
.tabs button span{font-size:10.5px;letter-spacing:.01em;font-weight:550}
.tabs button.on{color:var(--sea)}

/* ── toast ────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 16px);transform:translate(-50%,14px);
  background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:13.5px;
  z-index:40;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--sh-2)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── desktop ──────────────────────────────────────────────────── */
@media (min-width:760px){
  main{padding:8px 24px 60px;max-width:860px}
  .greet{font-size:36px}
  .sky{padding:34px 24px 30px}
  .tabs{left:50%;transform:translateX(-50%);bottom:18px;width:min(520px,calc(100% - 48px));
    border:1px solid var(--line);border-radius:99px;box-shadow:var(--sh-2);padding-bottom:0}
  .tabs button{padding:11px 0 10px;flex-direction:row;gap:8px}
  .tabs button span{font-size:13px}
  :root{--tabh:86px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}