/* Time Zone Buddy. Warm peach/yellow look from the reference, on top of the RandomZone theme tokens (rz.css). */
body.tzb{--tzo:#ff8f4a;--tzo2:#ff9a55;--tzy:#f4ec3a;--tzink:#1f140b;--tzmut:#6c5a48;--tzcard:rgba(255,251,240,.78);--tzcard2:rgba(255,255,255,.55);--tzline:rgba(70,40,10,.14);--tzdot:#8c5a2b;--tzfield:rgba(255,255,255,.72);--tzgood:#1c9e63;--tzedge:#f2c14e;--tzoffc:rgba(120,95,70,.22);--tzbad:#c4372b;--tznight:#4b3a63;
  --ink:var(--tzink);--mut:var(--tzmut);--line:var(--tzline);--surface:#fff8ec;--surface2:#f5ead9;
  background:radial-gradient(900px 520px at 88% -60px,rgba(255,170,100,.55),transparent 62%),radial-gradient(800px 460px at -5% 8%,rgba(246,236,110,.38),transparent 62%),linear-gradient(180deg,#f4e8dc,#ece4d8) fixed;color:var(--tzink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body.tzb{--tzink:#fff2e2;--tzmut:#cdb89f;--tzcard:rgba(255,232,200,.075);--tzcard2:rgba(255,232,200,.05);--tzline:rgba(255,226,186,.16);--tzdot:#e2b27a;--tzfield:rgba(255,232,200,.08);--tzgood:#37d08a;--tzedge:#d9a93c;--tzoffc:rgba(255,226,186,.14);--tzbad:#ff7b6e;--tznight:#2a1f3d;--surface:#2a1c12;--surface2:#35241a;
  background:radial-gradient(900px 520px at 88% -60px,rgba(255,120,40,.30),transparent 62%),radial-gradient(800px 460px at -5% 8%,rgba(240,225,60,.12),transparent 62%),linear-gradient(180deg,#1d130c,#150e09) fixed}}
:root[data-theme=dark] body.tzb{--tzink:#fff2e2;--tzmut:#cdb89f;--tzcard:rgba(255,232,200,.075);--tzcard2:rgba(255,232,200,.05);--tzline:rgba(255,226,186,.16);--tzdot:#e2b27a;--tzfield:rgba(255,232,200,.08);--tzgood:#37d08a;--tzedge:#d9a93c;--tzoffc:rgba(255,226,186,.14);--tzbad:#ff7b6e;--tznight:#2a1f3d;--surface:#2a1c12;--surface2:#35241a;
  background:radial-gradient(900px 520px at 88% -60px,rgba(255,120,40,.30),transparent 62%),radial-gradient(800px 460px at -5% 8%,rgba(240,225,60,.12),transparent 62%),linear-gradient(180deg,#1d130c,#150e09) fixed}
body.tzb .nav{background:color-mix(in srgb,var(--tzcard) 70%,transparent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tzapp{padding-top:22px;padding-bottom:70px}
.tz-boot{padding:80px 0;text-align:center;color:var(--tzmut)}
.tz-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.tz-title{font-size:clamp(1.9rem,5vw,2.9rem);font-weight:850;letter-spacing:-.035em;line-height:1.05}
.tz-title span{color:var(--tzo)}
.tz-sub{color:var(--tzmut);margin-top:6px;max-width:46ch}
.tabs{display:flex;gap:4px;background:var(--tzcard);border:1px solid var(--tzline);padding:4px;border-radius:16px}
.tabs button{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--tzmut);font:inherit;font-weight:700;font-size:.92rem;padding:0 14px;min-height:44px;border-radius:12px;cursor:pointer}
.tabs button i{font-style:normal}
.tabs button:hover{color:var(--tzink)}
.tabs button[aria-current=page]{background:var(--tzo);color:#2a1604;box-shadow:0 6px 16px rgba(255,143,74,.35)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--tzline);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabbar[hidden]{display:none!important}
.tabbar button{display:grid;justify-items:center;gap:2px;border:0;background:transparent;color:var(--tzmut);font:inherit;font-size:.68rem;font-weight:700;min-height:52px;padding:4px 2px;border-radius:12px;cursor:pointer}
.tabbar button i{font-style:normal;font-size:1.25rem;line-height:1.1}
.tabbar button[aria-current=page]{color:var(--tzink);background:color-mix(in srgb,var(--tzo) 30%,transparent)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
@media (max-width:820px){.tabs{display:none}.tabbar:not([hidden]){display:grid}.tzapp{padding-bottom:104px}}

.shared{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--tzy) 38%,var(--tzcard));border:1px solid var(--tzline);border-radius:16px;padding:10px 14px;margin-bottom:14px;color:#2a2105;font-weight:600}
.shared-actions{display:flex;gap:8px;flex-wrap:wrap}
.shared[hidden]{display:none}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;align-items:stretch}
.hero-clock{padding:6px 4px 0}
.hero-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.hero-city select{background:var(--tzcard);border:1px solid var(--tzline);border-radius:14px;color:var(--tzink);font:inherit;font-weight:800;font-size:1.05rem;min-height:44px;padding:0 12px;max-width:100%}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:999px;background:var(--tzo);color:#2a1604;white-space:nowrap}
.chip.phase{background:var(--tzcard);color:var(--tzink);border:1px solid var(--tzline)}
.chip.dst{background:var(--tzy);color:#2a2105}
.hero-digits{display:flex;flex-direction:column;font-weight:300;font-size:clamp(6.2rem,19vw,12.5rem);line-height:.84;letter-spacing:-.055em;font-variant-numeric:tabular-nums;font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif;margin:4px 0 0 -.04em}
.hd-m{opacity:.9}
.hero-meta{display:flex;align-items:baseline;gap:10px;margin-top:14px;color:var(--tzmut);font-weight:700;flex-wrap:wrap}
.hero-sec{font-size:1.6rem;font-variant-numeric:tabular-nums;color:var(--tzink)}
.hero-ampm{font-size:1rem;font-weight:850;background:var(--tzy);color:#2a2105;padding:2px 9px;border-radius:999px}
.hero-name{font-size:1rem}
.hero-map{position:relative;border-radius:28px;background:linear-gradient(160deg,#9a6330,#5d3a1c 55%,#2b1a0e);overflow:hidden;min-height:260px;box-shadow:var(--shadow);isolation:isolate}
.hero-map canvas{position:absolute;inset:0;width:100%;height:100%}
.pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:3px}
.pin b{font-size:.66rem;line-height:1;font-weight:800;background:var(--tzy);color:#2a2105;border-radius:999px;padding:3px 7px;font-variant-numeric:tabular-nums;white-space:nowrap;transform:translateY(-14px);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.pin i{width:11px;height:11px;border-radius:50%;background:#2b1a0e;border:2px solid #fff;display:block;margin-top:-8px}
.pin.pin-hero b{font-size:.78rem;background:#fff;padding:4px 9px}
.pin.pin-hero i{background:var(--tzo);width:14px;height:14px}
.map-cap{position:absolute;left:16px;top:12px;font-size:.78rem;font-weight:700;color:rgba(255,240,220,.85);letter-spacing:.04em}

/* tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.tile{border-radius:28px;padding:16px 18px;display:grid;gap:10px;color:#2a1604;min-height:170px;align-content:space-between}
.tile-date{background:var(--tzo2)}.tile-sun{background:var(--tzy);color:#2a2105}
.tile header{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.tile header i{font-style:normal;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.35);display:grid;place-items:center;font-size:1.1rem}
.tile-big{font-size:clamp(1.3rem,3.6vw,2rem);font-weight:650;letter-spacing:-.02em;line-height:1.1}
.tile footer{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem}
.pill{background:rgba(255,255,255,.4);border-radius:999px;padding:3px 11px;font-size:.82rem;font-weight:700}
.sun-row{display:flex;justify-content:space-between;gap:10px}
.sun-row small{display:block;font-size:.76rem;font-weight:700;opacity:.8}
.sun-row b{font-size:clamp(1.3rem,3.6vw,2rem);font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* pills */
.pills-row{display:flex;gap:10px;overflow-x:auto;padding:14px 18px 26px;margin:2px -18px -8px;scroll-snap-type:x proximity;align-items:center;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cpill{flex:0 0 auto;scroll-snap-align:center;width:58px;height:58px;border-radius:50%;border:1px solid var(--tzline);background:var(--tzcard);color:var(--tzink);font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;display:grid;place-items:center;transition:width .2s,height .2s,box-shadow .2s}
.cpill[aria-pressed=true]{width:80px;height:80px;background:#fff;color:#2a1604;font-size:1.05rem;box-shadow:0 8px 16px rgba(60,30,0,.22);border-color:transparent}
.pills-row .more{flex:0 0 auto;width:58px;height:58px;border-radius:50%;border:2px dashed var(--tzline);background:transparent;color:var(--tzmut);font-size:1.5rem;cursor:pointer}

/* clock cards */
.grid-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:20px 0 12px}
.grid-head h2,.panel h2,.plan-head h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.grid-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--tzcard);border:1px solid var(--tzline);border-radius:12px;padding:3px}
.seg button{border:0;background:transparent;color:var(--tzmut);font:inherit;font-weight:700;font-size:.86rem;min-height:38px;padding:0 12px;border-radius:9px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--tzo);color:#2a1604}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px}
.ccard{position:relative;background:var(--tzcard);border:1px solid var(--tzline);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.ccard.hero-on{outline:2px solid var(--tzo)}
.cc-main{display:grid;gap:4px;width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:14px 14px 12px;min-height:150px;align-content:start}
.cc-name{font-weight:800;font-size:1.02rem;padding-right:78px;line-height:1.2}
.cc-country{font-size:.76rem;color:var(--tzmut);margin-top:-2px}
.cc-time{font-size:2.5rem;font-weight:400;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:6px;display:flex;align-items:baseline;gap:6px}
.cc-time small{font-size:.8rem;font-weight:800;letter-spacing:0;color:var(--tzmut)}
.cc-date{font-size:.84rem;color:var(--tzmut);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.cc-star,.cc-del{position:absolute;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--tzline);background:var(--tzcard2);color:var(--tzmut);cursor:pointer;display:grid;place-items:center;font-size:1rem}
.cc-star{right:10px}.cc-del{right:52px}
.cc-star[aria-pressed=true]{background:var(--tzy);color:#2a2105;border-color:transparent}
.cc-del:hover{color:var(--tzbad)}
.empty-note{color:var(--tzmut);padding:18px;text-align:center}
.getapp-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:26px;color:var(--tzmut);font-weight:700}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 16px 6px 12px;border-radius:12px;background:#111;color:#fff;text-decoration:none;border:1px solid #333;font:inherit;text-align:left;line-height:1.15;cursor:pointer}
.store i{font-style:normal;font-size:1.5rem}.store small{display:block;font-size:.66rem;opacity:.8;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.store b{display:block;font-size:1.02rem}
.store.soon{background:var(--tzcard2);color:var(--tzmut);border:1px dashed var(--tzline);cursor:not-allowed}
a.store:hover{background:#000;border-color:var(--tzo)}

/* panels + forms */
.panel{background:var(--tzcard);border:1px solid var(--tzline);border-radius:24px;padding:18px;margin-top:16px;box-shadow:var(--shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.panel[hidden]{display:none}
.form-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:10px}
label{display:grid;gap:5px;font-size:.8rem;font-weight:700;color:var(--tzmut)}
input[type=text],input[type=search],input[type=date],input[type=time],input[type=datetime-local],select,textarea{font:inherit;font-size:1rem;color:var(--tzink);background:var(--tzfield);border:1px solid var(--tzline);border-radius:12px;min-height:44px;padding:0 12px;max-width:100%}
textarea{padding:10px 12px;line-height:1.5;resize:vertical;width:100%}
select option{color:#1f140b;background:#fff}
label.switch{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--tzink);font-size:.95rem}
label.switch input{width:22px;height:22px;accent-color:var(--tzo)}
.hint{color:var(--tzmut);font-size:.88rem;margin-top:8px}
.btn.danger{background:var(--tzbad);color:#fff}
.btn.primary{background:linear-gradient(135deg,var(--tzo),#ff7a3c);color:#2a1604;box-shadow:0 8px 20px rgba(255,143,74,.35)}
.btn.ghost{background:var(--tzcard2);color:var(--tzink);border-color:var(--tzline)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.warn{margin-top:12px;border-radius:12px;padding:10px 12px;background:color-mix(in srgb,var(--tzy) 30%,transparent);border:1px solid var(--tzedge);color:var(--tzink);font-weight:600;font-size:.92rem}
.warn[hidden]{display:none}
.days{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.days button,.dsm button{border:1px solid var(--tzline);background:var(--tzcard2);color:var(--tzmut);font:inherit;font-weight:800;border-radius:12px;min-width:46px;min-height:44px;cursor:pointer}
.days button[aria-pressed=true],.dsm button[aria-pressed=true]{background:var(--tzo);color:#2a1604;border-color:transparent}
.dsm{display:flex;gap:3px;flex-wrap:wrap}.dsm button{min-width:30px;min-height:30px;font-size:.72rem;border-radius:8px}

/* compare + convert lists */
.cmp,.cv-list{display:grid;gap:10px;margin-top:14px}
.row{display:grid;grid-template-columns:minmax(150px,1.4fr) 1fr 1fr 1fr 1.4fr;gap:10px;align-items:center;background:var(--tzcard);border:1px solid var(--tzline);border-radius:18px;padding:12px 16px}
.row.base{outline:2px solid var(--tzo)}
.row .nm b{display:block;font-size:1.02rem}.row .nm small,.row small{color:var(--tzmut);font-size:.78rem}
.row .tm{font-size:1.7rem;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.row .df b{display:block}
.row .ph{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row .rm{justify-self:end}
.cv-row{grid-template-columns:minmax(150px,1.4fr) 1.2fr 1fr 1fr auto}
.cv-add{position:relative;margin-top:12px;max-width:520px}
.cv-add input{width:100%}
.amb{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.amb button{border:1px solid var(--tzedge);background:transparent;color:var(--tzink);border-radius:9px;font:inherit;font-size:.78rem;font-weight:700;padding:4px 9px;cursor:pointer}
.amb button[aria-pressed=true]{background:var(--tzy);color:#2a2105}
@media (max-width:820px){.row,.cv-row{grid-template-columns:1fr 1fr;gap:8px 12px}.row .nm{grid-column:1/-1}.row .ph{grid-column:1/-1}.row .rm{grid-column:1/-1;justify-self:start}}

/* results list */
.results{list-style:none;margin:0;padding:6px;border:1px solid var(--tzline);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-lg);max-height:min(46vh,340px);overflow:auto}
.cv-add .results{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:20}
.results.inline{margin-top:10px;box-shadow:none}
.results li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;cursor:pointer;min-height:48px}
.results li.on,.results li:hover{background:color-mix(in srgb,var(--tzo) 24%,transparent)}
.results li.added{opacity:.6}
.results li.none{cursor:default;color:var(--tzmut);justify-content:center}
.r-main{display:grid}.r-main b{font-size:.98rem}.r-main small,.r-side small{color:var(--tzmut);font-size:.76rem}
.r-side{display:grid;text-align:right;font-variant-numeric:tabular-nums}

/* dialogs */
dialog.dlg{border:1px solid var(--tzline);border-radius:24px;background:var(--surface);color:var(--tzink);padding:18px;width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:var(--shadow-lg);margin:auto}
dialog.dlg.small{width:min(400px,calc(100% - 24px))}
dialog.dlg::backdrop{background:rgba(25,12,2,.58);backdrop-filter:blur(3px)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.dlg-h h2,dialog h2{font-size:1.2rem;font-weight:800}
.dlg-foot{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.fld{margin-top:10px}.fld input,.fld textarea{width:100%}
.share-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.share-btns a.btn{text-decoration:none}

/* planner */
.people{display:grid;gap:8px;margin-top:12px}
.person{display:grid;grid-template-columns:auto minmax(120px,1fr) auto auto auto auto;gap:8px 12px;align-items:center;background:var(--tzcard2);border:1px solid var(--tzline);border-radius:16px;padding:8px 12px}
.person.off{opacity:.55}
.person label.chk{display:flex;align-items:center;gap:8px;color:var(--tzink);font-size:.95rem;font-weight:800;min-height:44px}
.person input[type=checkbox]{width:22px;height:22px;accent-color:var(--tzo)}
.person small{color:var(--tzmut);font-weight:600}
.person input[type=time]{min-height:38px;width:152px}
@media (max-width:820px){.person{grid-template-columns:1fr 1fr;}.person .dsm,.person .nm2{grid-column:1/-1}}
.plan-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.slots{display:grid;gap:10px;margin-top:12px}
.slot{display:grid;gap:8px;border:1px solid var(--tzline);border-radius:18px;padding:12px 14px;background:var(--tzcard2);cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.slot:hover,.slot.on{border-color:var(--tzo);box-shadow:0 0 0 2px color-mix(in srgb,var(--tzo) 40%,transparent)}
.slot-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.slot-time{font-size:1.25rem;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tier{font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px}
.tier.ideal{background:var(--tzgood);color:#04180d}.tier.good{background:#8fd36a;color:#11230a}.tier.stretch{background:var(--tzedge);color:#2a1d02}.tier.poor{background:var(--tzbad);color:#fff}
.slot-why{font-size:.86rem;color:var(--tzmut)}
.slot-zones{display:flex;flex-wrap:wrap;gap:6px}
.zc{font-size:.76rem;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--tzline);display:inline-flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums}
.zc.work{background:color-mix(in srgb,var(--tzgood) 24%,transparent)}.zc.edge{background:color-mix(in srgb,var(--tzedge) 30%,transparent)}.zc.off{background:var(--tzoffc)}.zc.night{background:var(--tznight);color:#fff;border-color:transparent}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--tzmut);font-weight:600;margin:10px 0 6px}
.lg{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:5px}
.lg.work{background:var(--tzgood)}.lg.edge{background:var(--tzedge)}.lg.off{background:var(--tzoffc);border:1px solid var(--tzline)}.lg.night{background:var(--tznight)}.lg.ovl{background:rgba(255,143,74,.35);border:2px solid var(--tzo)}
.tl{--lab:128px;--loc:92px;position:relative;margin-top:8px;overflow:hidden}
.tl-axis,.tl-row{display:grid;grid-template-columns:var(--lab) 1fr var(--loc);gap:8px;align-items:center}
.tl-axis{height:22px;margin-bottom:4px;font-size:.7rem;color:var(--tzmut);font-weight:700}
.tl-ticks{position:relative;height:100%}
.tl-ticks span{position:absolute;transform:translateX(-50%);top:3px;font-variant-numeric:tabular-nums}
.tl-row{margin-bottom:6px}
.tl-lab{display:grid;line-height:1.2;overflow:hidden}.tl-lab b{font-size:.9rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tl-lab small{color:var(--tzmut);font-size:.72rem}
.tl-track{position:relative;height:38px;border-radius:10px;overflow:hidden;background:var(--tzoffc)}
.tl-track svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tl-loc{font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;line-height:1.2}.tl-loc small{display:block;color:var(--tzmut);font-weight:600;font-size:.7rem}
.tl-over{position:absolute;left:calc(var(--lab) + 8px);right:calc(var(--loc) + 8px);top:26px;bottom:0;pointer-events:none}
.tl-over .band{position:absolute;top:0;bottom:0;background:rgba(255,143,74,.22);border-left:2px solid var(--tzo);border-right:2px solid var(--tzo);border-radius:6px}
.tl-over .now{position:absolute;top:-4px;bottom:0;width:2px;background:var(--tzbad)}
.tl-over .now::before{content:"now";position:absolute;top:-4px;left:4px;font-size:.62rem;font-weight:800;color:var(--tzbad)}
.tl-cur{position:absolute;top:-2px;bottom:-2px;min-width:12px;border:2px solid var(--tzink);background:rgba(255,255,255,.22);border-radius:9px;cursor:grab;pointer-events:auto;touch-action:none}
.tl-cur:active{cursor:grabbing}
.tl-cur::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:22px;transform:translate(-50%,-50%);border-radius:2px;background:var(--tzink);opacity:.7}
.cursor-sum{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (max-width:820px){.tl{--lab:78px;--loc:60px}.tl-lab small{display:none}.tl-loc small{display:none}}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero-map{min-height:230px}.tiles{gap:10px}.tile{padding:14px;min-height:150px;border-radius:24px}}
@media (max-width:420px){.cards{grid-template-columns:1fr 1fr;gap:10px}.cc-main{padding:12px 10px 10px;min-height:150px}.cc-time{font-size:2rem}.cc-name{font-size:.92rem;padding-right:0;margin-top:44px}.panel{padding:14px;border-radius:20px}}
.favs,.percity{display:grid;gap:8px;margin-top:10px}
.favrow,.pcrow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--tzcard2);border:1px solid var(--tzline);border-radius:14px;padding:8px 12px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#1f140b;color:#fff;padding:11px 18px;border-radius:14px;font-weight:700;z-index:90;max-width:calc(100% - 28px);box-shadow:var(--shadow-lg)}
.toast[hidden]{display:none}
@media (min-width:821px){.toast{bottom:28px}}
@media (prefers-reduced-motion:reduce){.cpill{transition:none}}

.tl-track rect.work{fill:var(--tzgood)}.tl-track rect.edge{fill:var(--tzedge)}.tl-track rect.off{fill:var(--tzoffc)}.tl-track rect.night{fill:var(--tznight)}
.tl-hours{position:absolute;inset:0;pointer-events:none}
.tl-hours span{position:absolute;bottom:2px;transform:translateX(-50%);font-size:.6rem;font-weight:850;line-height:1;color:var(--tzink);background:color-mix(in srgb,var(--surface) 62%,transparent);border-radius:4px;padding:1px 3px;font-variant-numeric:tabular-nums}
.tl-row[data-class=night] .tl-loc,.tl-row[data-class=off] .tl-loc{color:var(--tzmut)}
body.tzb [hidden]{display:none!important}
.row small,.row b{display:block}.row .ph{display:flex}.row .ph .chip{display:inline-flex}

@media (max-width:820px){
  .cc-star,.cc-del{width:44px;height:44px;top:6px}.cc-star{right:6px}.cc-del{right:54px}.cc-name{padding-right:104px}
  .dsm button{min-width:44px;min-height:44px;font-size:.8rem}.person input[type=time],.pcrow input[type=time]{min-height:44px}
  .seg button{min-height:44px}.amb button{min-height:44px;padding:0 12px}.results li{min-height:48px}.btn.sm{min-height:44px}
}
@media (max-width:420px){.cc-name{padding-right:0}}
.seg button{min-width:44px}

.person{grid-template-columns:auto minmax(120px,1fr);align-items:center}
.person details.hrs{grid-column:1/-1}
.hrs>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--tzmut);list-style:none}
.hrs>summary::-webkit-details-marker{display:none}
.hrs>summary::before{content:"▸";font-size:.8rem}.hrs[open]>summary::before{content:"▾"}
.hrs>summary b{color:var(--tzink);font-weight:750}
.hrs-body{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:4px 0 8px}
@media (min-width:821px){.person{grid-template-columns:auto minmax(120px,1fr) auto}.person details.hrs{grid-column:auto}.hrs>summary{pointer-events:none;min-height:0}.hrs>summary::before,.hrs[open]>summary::before{content:""}.hrs>summary span{display:none}.hrs>summary b{display:none}.hrs-body{padding:0}}

/* draggable hour strips (Compare + Convert) */
.hs-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.hs-nav{min-width:44px;min-height:44px;font-size:1.25rem;line-height:1;padding:0 12px}
.hs-date{background:var(--tzfield);border:1px solid var(--tzline);border-radius:12px;color:var(--tzink);font:inherit;min-height:44px;padding:0 10px}
.hs-hint{color:var(--tzmut);font-size:.82rem;flex:1 1 220px}
.row.hs{grid-template-columns:minmax(180px,220px) repeat(3,minmax(0,1fr));grid-template-areas:"nm strip strip strip" "tm strip strip strip" "df of ph ph";gap:8px 14px}
.row.hs .nm{grid-area:nm;align-self:end}.row.hs .tm-w{grid-area:tm;align-self:start}.row.hs .hs-strip{grid-area:strip}.row.hs .df{grid-area:df}.row.hs .of{grid-area:of}.row.hs .ph,.cv-row.hs>:last-child{grid-area:ph}
.row.hs .tm{font-size:2.2rem}
.hs-strip{position:relative;padding-top:14px;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;min-width:0;border-radius:12px}
.hs-dls{position:absolute;top:0;left:0;right:0;height:14px;overflow:hidden}
.hs-dl{position:absolute;font-size:.6rem;font-weight:800;letter-spacing:.06em;color:var(--tzmut);line-height:14px;transform:translateX(3px)}
.hs-cells{position:relative;height:44px;border-radius:10px;overflow:hidden;background:var(--tzoffc);border:1px solid var(--tzline)}
.hs-c{position:absolute;top:0;bottom:0;display:grid;place-items:center;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tzink);box-shadow:inset -1px 0 0 color-mix(in srgb,var(--tzink) 11%,transparent)}
.hs-c.work{background:color-mix(in srgb,var(--tzedge) 44%,var(--surface))}
.hs-c.edge{background:color-mix(in srgb,var(--tzedge) 16%,var(--surface))}
.hs-c.off{background:color-mix(in srgb,var(--tzink) 6%,var(--surface))}
.hs-c.night{background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 3px,transparent 3px 7px),color-mix(in srgb,#3d4f9a 72%,var(--tznight));color:#fff}
.hs-mid{display:grid;line-height:1;text-align:center;gap:1px}.hs-mid b{font-size:.56rem;letter-spacing:.05em}.hs-mid i{font-style:normal;font-size:.95rem}
.hs-c[data-mid]{box-shadow:inset 2px 0 0 var(--tzo),inset -1px 0 0 color-mix(in srgb,var(--tzink) 11%,transparent)}
.hs-ov{position:absolute;left:0;right:0;top:14px;height:44px;overflow:hidden;pointer-events:none;border-radius:10px}
.hs-cur{position:absolute;top:0;bottom:0;transform:translateX(-50%);border:2px solid var(--tzink);border-radius:8px;background:rgba(255,255,255,.2);box-shadow:0 0 0 2px color-mix(in srgb,var(--surface) 55%,transparent)}
.hs-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--tzbad)}
.hs-now[hidden]{display:none}
.hs-strip:focus-visible{outline:3px solid var(--a1);outline-offset:3px}
[data-step="2"] .hs-c:not([data-ev2]):not([data-mid]) .hs-n,[data-step="3"] .hs-c:not([data-ev3]):not([data-mid]) .hs-n{visibility:hidden}
[data-step="2"] .hs-c,[data-step="3"] .hs-c{font-size:.72rem}
@media (max-width:820px){
  .row.hs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"nm tm" "strip strip" "df of" "ph ph";gap:8px 12px}
  .row.hs .nm{grid-column:auto;align-self:center}.row.hs .tm-w{text-align:right}.row.hs .tm{font-size:1.9rem}
  .row.hs .ph,.row.hs .rm{grid-column:auto}.row.hs .rm{justify-self:start}
  .cv-row.hs>:last-child{justify-self:start}
}
[data-step="2"] .hs-mid b,[data-step="3"] .hs-mid b{display:none}
@media (prefers-reduced-motion:reduce){.hs-cur{transition:none}}

/* ---- inline time editing on city rows ---- */
.row .tm{background:none;border:0;padding:0;margin:0;font-family:inherit;color:inherit;text-align:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.35em;min-height:44px;border-radius:10px;border-bottom:2px dashed transparent}
.row .tm::after{content:"✎";font-size:.38em;opacity:.55;letter-spacing:0}
.row .tm:hover,.row .tm:focus-visible{border-bottom-color:var(--tzo,#ff8f4a)}.row .tm:hover::after,.row .tm:focus-visible::after{opacity:1}
.row.editing .tm{border-bottom-color:var(--tzo,#ff8f4a)}
.te{margin-top:8px;padding:10px;border-radius:14px;background:var(--tzcard2,rgba(128,128,128,.12));border:1px solid var(--tzline,rgba(128,128,128,.3));display:grid;gap:8px;max-width:340px}
.te-f{display:flex;flex-wrap:wrap;gap:8px}
.te-in{min-height:44px;padding:6px 10px;border-radius:12px;border:1px solid var(--tzline,rgba(128,128,128,.4));background:var(--tzcard,transparent);color:inherit;font:inherit;font-size:1rem}
.te-b{display:flex;flex-wrap:wrap;gap:6px}.te-b .btn{min-height:44px;min-width:44px}
.te-note{font-size:.84rem;line-height:1.4;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (min-width:821px){.te{max-width:100%}}
@media (max-width:820px){.row.hs.editing{grid-template-areas:"nm nm" "tm tm" "strip strip" "df of" "ph ph"}.row.hs.editing .tm-w{text-align:left}.te{max-width:none;width:100%}.te-in{flex:1 1 130px;min-width:0}}

/* ---- Compare: Simple layout (one compact line per city, like a world-clock planner) ---- */
.cmp-mode{display:inline-flex;gap:4px;background:var(--tzcard);border:1px solid var(--tzline);padding:4px;border-radius:14px;margin-bottom:12px}
.cmp-mode button{border:0;background:transparent;color:var(--tzmut);font:inherit;font-weight:750;font-size:.9rem;min-height:44px;padding:0 18px;border-radius:10px;cursor:pointer}
.cmp-mode button[aria-pressed=true]{background:var(--tzo);color:#2a1604}
#view-compare.simple #cmpHint,#view-compare.simple #cmpPanel label:nth-child(2){display:none}
#view-compare.simple #cmpPanel{padding:10px 14px}
.cmp-simple{gap:6px}
.cmp-simple .row.hs{grid-template-columns:62px minmax(120px,190px) 128px minmax(0,1fr) 44px;grid-template-areas:"df nm tm strip rm";gap:4px 14px;align-items:center;padding:6px 14px;border-radius:14px}
.cmp-simple .row.hs .nm{align-self:center}.cmp-simple .row.hs .tm-w{align-self:center;text-align:right}
.cmp-simple .row.hs .tm{font-size:1.5rem;justify-content:flex-end;min-height:36px}.cmp-simple .row.hs .tm::after{font-size:.5em}
.cmp-simple .row.hs .tm-w small{display:block}
.cmp-simple .row.hs .df{align-self:center}.cmp-simple .row.hs .df b{font-size:.92rem;color:var(--tzmut)}.cmp-simple .row.hs .df small,.cmp-simple .row.hs .of{display:none}
.cmp-simple .row.hs .ph{grid-area:rm;justify-self:end}.cmp-simple .row.hs .ph .chip{display:none}
.cmp-simple .row.hs .rm{font-size:0;padding:0;width:44px;min-width:44px;height:44px;border-radius:12px;display:inline-grid;place-items:center}.cmp-simple .row.hs .rm::before{content:"✕";font-size:.95rem}
.cmp-simple .hs-strip{padding-top:12px}.cmp-simple .hs-cells{height:38px}
.cmp-simple .row.editing{align-items:start}
@media (max-width:820px){
  .cmp-simple .row.hs{grid-template-columns:minmax(0,1fr) auto 44px;grid-template-areas:"nm tm rm" "strip strip strip";gap:2px 10px;padding:8px 12px}
  .cmp-simple .row.hs .df{display:none}.cmp-simple .row.hs .tm{font-size:1.45rem;min-height:44px}
  .cmp-simple .row.hs.editing{grid-template-areas:"nm nm nm" "tm tm tm" "strip strip strip"}
}

/* ---- Looks: soft, low-contrast LIGHT themes (set on body[data-look]; "warm" is the default and leaves everything as designed) ---- */
.looks{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.looks button{display:grid;gap:4px;justify-items:start;text-align:left;font:inherit;color:var(--tzink);background:var(--tzcard2);border:1px solid var(--tzline);border-radius:16px;padding:12px;min-height:44px;cursor:pointer}
.looks button[aria-pressed=true]{border-color:var(--tzo);box-shadow:0 0 0 2px color-mix(in srgb,var(--tzo) 35%,transparent)}
.looks .sw{display:flex}.looks .sw i{width:26px;height:26px;border-radius:50%;margin-right:-6px;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.looks small{color:var(--tzmut);font-size:.78rem}
body.tzb[data-look=cream]{--tzo:#eaa273;--tzo2:#efae82;--tzy:#efe6a0;--tzink:#5a5046;--tzmut:#71665a;--tzcard:rgba(255,255,255,.62);--tzcard2:rgba(255,255,255,.5);--tzline:rgba(110,90,70,.12);--tzdot:#b59b80;--tzfield:rgba(255,255,255,.8);--tzgood:#78b393;--tzedge:#ebd79a;--tzoffc:rgba(120,100,80,.1);--tzbad:#c98078;--tznight:#cfc8e0;--surface:#fbf6ec;--surface2:#f1e9dc;background:linear-gradient(180deg,#f8f2e8,#f1eadf) fixed}
body.tzb[data-look=mist]{--tzo:#8ea3d8;--tzo2:#9bb0e2;--tzy:#e3e9b8;--tzink:#4a5568;--tzmut:#5a6a80;--tzcard:rgba(255,255,255,.66);--tzcard2:rgba(255,255,255,.52);--tzline:rgba(70,85,110,.12);--tzdot:#9aa8c0;--tzfield:rgba(255,255,255,.82);--tzgood:#7bb89d;--tzedge:#e0e6b6;--tzoffc:rgba(80,95,120,.1);--tzbad:#c98a8a;--tznight:#c8cde6;--surface:#f7f9fc;--surface2:#e9edf4;background:linear-gradient(180deg,#eff2f7,#e8ecf3) fixed}
body.tzb[data-look=sage]{--tzo:#9db98c;--tzo2:#abc49c;--tzy:#e8e4b4;--tzink:#4d584a;--tzmut:#5f6c59;--tzcard:rgba(255,255,255,.64);--tzcard2:rgba(255,255,255,.5);--tzline:rgba(70,95,65,.12);--tzdot:#a1b296;--tzfield:rgba(255,255,255,.82);--tzgood:#74b393;--tzedge:#e6e1b0;--tzoffc:rgba(80,105,75,.1);--tzbad:#c88a82;--tznight:#cbd1e2;--surface:#f6f9f2;--surface2:#e9efe3;background:linear-gradient(180deg,#eff3eb,#e8eee4) fixed}
body.tzb[data-look=cream] .btn.primary,body.tzb[data-look=mist] .btn.primary,body.tzb[data-look=sage] .btn.primary{background:var(--tzo);box-shadow:0 4px 12px color-mix(in srgb,var(--tzo) 30%,transparent);color:#3a3228}
body.tzb[data-look=cream] .tabs button[aria-current=page],body.tzb[data-look=mist] .tabs button[aria-current=page],body.tzb[data-look=sage] .tabs button[aria-current=page],body.tzb[data-look=cream] .cmp-mode button[aria-pressed=true],body.tzb[data-look=mist] .cmp-mode button[aria-pressed=true],body.tzb[data-look=sage] .cmp-mode button[aria-pressed=true]{background:var(--tzo);color:#3a3228;box-shadow:none}
body.tzb[data-look=cream] .hs-c.night,body.tzb[data-look=mist] .hs-c.night,body.tzb[data-look=sage] .hs-c.night{background:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 3px,transparent 3px 7px),var(--tznight);color:var(--tzink)}
body.tzb[data-look=cream] .hs-c.work,body.tzb[data-look=mist] .hs-c.work,body.tzb[data-look=sage] .hs-c.work{background:color-mix(in srgb,var(--tzedge) 62%,var(--surface))}
body.tzb[data-look=cream] .row,body.tzb[data-look=mist] .row,body.tzb[data-look=sage] .row,body.tzb[data-look=cream] .panel,body.tzb[data-look=mist] .panel,body.tzb[data-look=sage] .panel{box-shadow:none}