:root{--ground:#E8EDEA;--surface:#F5F8F6;--ink:#10302A;--muted:#4A645F;--hero:#123D34;--gold:#E3B35A;--gold2:#D9A441;--goldtext:#7A5200;--line:#CBD6D1;--soft:#DCE5E0;--seg:#D7E1DC;--ok:#2F8F6B}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ground);color:var(--ink);font-family:'Figtree',system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{overscroll-behavior:none}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
#app{position:fixed;inset:0;max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:var(--ground);overflow:hidden}
#view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:calc(env(safe-area-inset-top) + 16px) 20px 20px;display:flex;flex-direction:column;gap:14px;outline:none}
#nav{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border-top:1px solid var(--line);padding:0 4px env(safe-area-inset-bottom);min-height:calc(66px + env(safe-area-inset-bottom))}
#nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;color:var(--muted);font-size:11px;font-weight:500;position:relative;white-space:nowrap}
#nav button[aria-current=page]{color:var(--ink);font-weight:600}
#nav button[aria-current=page]::before{content:"";position:absolute;top:0;width:28px;height:4px;border-radius:0 0 4px 4px;background:var(--gold2)}
#nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 4px 0}
.card{background:var(--surface);border-radius:22px;padding:4px 6px}
.row{display:flex;align-items:center;gap:10px;min-height:56px;border-top:1px solid var(--soft)}
.row:first-child{border-top:0}
.seg{display:grid;gap:4px;padding:4px;background:var(--seg);border-radius:16px}
.seg button{height:44px;border:0;border-radius:12px;font-size:14px;font-weight:600;background:transparent;color:var(--ink)}
.seg button[aria-pressed=true],.seg button[aria-selected=true]{background:var(--hero);color:#F2F6F4}
.btn{height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--hero);color:#F2F6F4;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn svg,.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.light{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:0;width:44px;justify-content:center}
.btn.soft{background:#DCE7E2;color:var(--ink)}
.btn.full{width:100%;justify-content:center;height:48px;font-size:16px}
.head{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.head .top{display:flex;align-items:center;gap:10px}
.city{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dateline{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.dot.busy{background:var(--gold2)}.dot.bad{background:#B3452F}
.hero{background:var(--hero);color:#F2F6F4;border-radius:28px;padding:18px 22px 14px;display:flex;flex-direction:column;gap:2px}
.hero .eb{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hero .pill{font-size:12px;font-weight:600;color:var(--hero);background:var(--gold);border-radius:999px;padding:3px 10px}
.hero .line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px}
.hero .nm{display:flex;align-items:baseline;gap:10px;min-width:0;font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.hero .ar{font-family:'Amiri',serif;font-size:24px;color:var(--gold);font-weight:400}
.hero .tm{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.hero .cd{font-size:20px;font-weight:500;color:var(--gold);margin-top:2px}
.arc{margin-top:8px}
.arc .lbl{display:flex;justify-content:space-between;font-size:13px;color:#B9CCC5;margin-top:2px}
.pr{display:flex;align-items:center;gap:10px;min-height:58px;padding:0 6px 0 16px;border-radius:18px}
.pr.cur{background:#D4E0DA}
.pr .n{flex:1;font-size:17px;font-weight:600}
.pr .n small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.pr .t{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:600}
.bell{width:44px;height:44px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.bell[aria-pressed=true]{color:var(--hero)}
.bell svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bell[aria-pressed=true] svg{fill:var(--gold)}
.switch{flex:none;width:56px;height:44px;border:0;background:transparent;display:flex;align-items:center;justify-content:flex-end;padding:0}
.switch i{position:relative;display:block;width:44px;height:26px;border-radius:13px;background:#A9BAB3;transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);transition:left .15s}
.switch[aria-checked=true] i{background:var(--hero)}
.switch[aria-checked=true] i::after{left:21px}
.radio{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #7C918B;display:flex;align-items:center;justify-content:center}
[aria-pressed=true]>.radio,.radio.on{border-color:var(--hero)}
[aria-pressed=true]>.radio::after,.radio.on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--hero)}
.opt{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 12px;border:0;border-top:1px solid var(--soft);background:transparent;text-align:left;width:100%}
.opt:first-child{border-top:0}
.opt b{display:block;font-size:16px}.opt small{display:block;font-size:13px;color:var(--muted)}
.opt .tx{flex:1;min-width:0}
.field{width:100%;height:48px;border:1px solid var(--line);border-radius:24px;background:var(--surface);font-size:16px;padding:0 18px}
.select{position:relative;flex:1}
.select select{appearance:none;-webkit-appearance:none;width:100%;height:48px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:17px;font-weight:600;padding:0 44px 0 16px}
.select svg{position:absolute;right:14px;top:15px;width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sheet{position:absolute;inset:0;background:var(--ground);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 18px) 20px 0;gap:14px;z-index:20}
.sheet .scroll{flex:1;min-height:0;overflow-y:auto;margin-bottom:calc(env(safe-area-inset-bottom) + 16px)}
.ann{position:absolute;inset:0;z-index:30;background:rgba(16,48,42,.55);display:flex;align-items:flex-end;padding:16px 16px calc(env(safe-area-inset-bottom) + 16px)}
.ann .box{width:100%;background:var(--surface);border-radius:28px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px}
.ann .tt{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.12;white-space:nowrap}
.evrow{display:flex;gap:14px;align-items:center;min-height:64px;border-top:1px solid var(--soft);padding:6px 12px}
.evrow:first-child{border-top:0}
.evd{flex:none;width:50px;text-align:center;font-family:'Bricolage Grotesque',sans-serif}
.evd b{display:block;font-size:24px;line-height:1}.evd span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.compass{display:flex;justify-content:center;position:relative}
.flag{margin:auto -20px calc(-20px);min-height:84px;flex:1;display:flex}
.flag svg{width:100%;height:100%;display:block}
.toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);background:var(--hero);color:#F2F6F4;border-radius:999px;padding:10px 18px;font-size:14px;z-index:40;max-width:90%}
.note{font-size:13px;color:var(--muted);line-height:1.45;padding:0 4px}
table.wk{width:100%;border-collapse:collapse;font-size:14px}
table.wk th{font-weight:600;color:var(--muted);font-size:12px;text-align:left;padding:8px 4px}
table.wk td{padding:10px 4px;border-top:1px solid var(--soft)}
@media (prefers-color-scheme:dark){}
.seg.sm button{font-size:12.5px;padding:0 2px;white-space:nowrap}

#view.home{overflow:hidden}
#view.home .list{flex:1;min-height:0;display:flex;flex-direction:column}
#view.home .list .pr{flex:1;min-height:44px}
@media (max-height:720px){#view.home .hero .arc{display:none}}
#nav button[aria-current=page] svg{stroke:var(--gold2)}
#nav button[aria-current=page] span{color:var(--ink)}
