/* Plona prototype v2. Brand orange stays for shapes; a darker orange carries text and buttons (white on it is 5.0:1). */
:root{--orange:#F26A21;--ob:#BF4A0A;--ob-h:#A03D06;--ot:#A63F05;--ink:#141414;--sub:#575757;--line:#E4DED7;--bg:#FAF7F4;--card:#fff;--tint:#FFEEE3;--tint-line:#f7cdb2;
--good:#1AA463;--gf:#0B6B40;--good-d:#0B6B40;--good-bg:#E6F6EE;--warn-bg:#FFF6DD;--warn-d:#6B4E00;--warn:#E0A100;--bad:#C22F2F;--bad-bg:#FDE9E7;--wait:#EFEAE4;--field:#767676;
--r-sm:6px;--r-md:10px;--r-lg:16px;--bar-h:60px;--team:#1E4C8A;--team-h:#173C6E;color-scheme:light}
/* 3.5.8, the design foundation (DESIGN.md "Spacing"; Chandon, Oct 16: "a compromise of no scroll and better space usage with
   consideration to what device is being used to show plona"). One spacing scale (--s1 to --s7, 4 to 48px). The step page gaps (--v-*)
   grow with the screen's height (svh holds still while Safari's bars move and while the keyboard is open), between a floor and a ceiling:
   --v-top under the step bar, --v-title under the h1, --v-field between fields, --v-group between groups (always more than inside one),
   --v-foot over the button; --fi-h is the height of a box with its label inside (48px on a short phone, 56px on a tall one). The floors
   never shrink: form text 16px, fields and buttons 48px, taps 44px, fields 12px apart, the smallest
   helper or legal line 13px. In the iPhone and Android apps the keyboard resizes the web view, so steps.js sets --vh there (1% of the
   screen, read while no field is open); in a browser it is unset and 1svh is used. Width and gaps only: no colors, so dark mode is untouched. */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
--v-top:16px;--v-title:16px;--v-field:12px;--v-group:24px;--v-foot:12px;--h-step:clamp(22px,6.6vw,30px);--fi-h:54px;
--tap:44px;--ctl-h:48px;--t-in:16px;--t-min:13px}
@supports (height:1svh){:root{--v-top:clamp(8px,calc(var(--vh,1svh) * 2.5),28px);--v-title:clamp(12px,calc(var(--vh,1svh) * 2.5),28px);--v-field:clamp(12px,calc(var(--vh,1svh) * 2.2),20px);
--v-group:clamp(16px,calc(var(--vh,1svh) * 3.5),40px);--v-foot:clamp(12px,calc(var(--vh,1svh) * 2),24px);--h-step:clamp(22px,min(6.6vw,calc(var(--vh,1svh) * 3.6)),30px);
--fi-h:clamp(48px,calc(var(--vh,1svh) * 6),56px)}}
/* team blue (team mode, 3.4.2): the switch to team mode and its bull screen. White text on it: 8.6:1 light, 5.7:1 dark */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--team:#3767A8;--team-h:#2E5A96}}
:root[data-theme=dark]{--team:#3767A8;--team-h:#2E5A96}
/* the hidden attribute always wins over a display rule (.btn, .row and others set display, which showed "hidden" buttons) */
[hidden]{display:none!important}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#F4F1EC;--sub:#B9B3AB;--line:#3a3632;--bg:#141210;--card:#1D1B19;--tint:#3a2418;--tint-line:#6b3a1d;--wait:#2a2724;--good-bg:#12301f;--good-d:#6fdba4;--warn-bg:#3a3010;--warn-d:#f2d477;--bad:#ff8a80;--bad-bg:#3d1c1a;--ot:#FFA66B;--field:#8f8a83;color-scheme:dark}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Instrument Sans',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
h1,h2,h3,.disp{font-family:'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em;font-weight:600;line-height:1.15}
h1{font-size:clamp(26px,5vw,36px)}h2{font-size:22px}h3{font-size:17px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:'tnum'}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.on-dark :focus-visible,.banner.mine :focus-visible,.banner.done :focus-visible,.banner.frozen :focus-visible,.btn:focus-visible{outline-color:var(--ink);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
main:focus{outline:0}h1:focus,h2:focus,h3:focus,[tabindex="-1"]:focus{outline:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:100}.skip:focus{top:8px}
p{margin:0}.sub{color:var(--sub);font-size:15px}.small{font-size:13px;color:var(--sub)}
.stack>*+*{margin-top:12px}.stack-l>*+*{margin-top:20px}
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-family:'Clash Grotesk',sans-serif;font-weight:700;font-size:21px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-right:4px}.brand i{width:9px;height:9px;background:var(--orange);border-radius:50%;margin-left:3px}
.spacer{flex:1}
.tb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 10px;border-radius:10px;text-decoration:none;font:600 14px 'Instrument Sans',sans-serif;border:0;background:none;cursor:pointer;color:var(--ink);position:relative}
.tb:hover{background:rgba(127,127,127,.12)}
.tb svg{width:22px;height:22px;flex:none}
.badge{background:var(--ob);color:#fff;border-radius:99px;font-size:12px;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.tb .badge{position:absolute;top:2px;right:0}
.rolepill{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px 10px;min-height:28px;display:inline-flex;align-items:center}
@media(max-width:560px){.tb .lbl{display:none}.rolepill{display:none}}
.wrap{max-width:1120px;margin:0 auto;padding:18px 16px 24px}
.narrow{max-width:640px;margin:0 auto;padding:18px 16px 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-md);border:2px solid var(--ob);background:var(--ob);color:#fff;font:700 16px 'Instrument Sans',sans-serif;cursor:pointer;text-decoration:none;text-align:center;line-height:1.2}
.btn:hover{background:var(--ob-h);border-color:var(--ob-h)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}.btn.dark:hover{opacity:.85}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--ink)}.btn.ghost:hover{background:var(--wait)}
.btn.bad{background:var(--card);color:var(--bad);border-color:var(--bad)}.btn.bad:hover{background:var(--bad-bg)}
.btn.full{width:100%}
.btn.bigger{min-height:56px;font-size:18px;width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn.sm{min-height:44px;padding:0 14px;font-size:15px}
.linkbtn{display:inline-flex;align-items:center;background:none;border:0;color:var(--ink);text-decoration:underline;font:600 15px 'Instrument Sans',sans-serif;cursor:pointer;min-height:44px;padding:0 6px}
.protobtn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px dashed var(--sub);border-radius:var(--r-md);background:transparent;color:var(--sub);font:600 14px 'Instrument Sans',sans-serif;cursor:pointer}
.protobtn:hover{background:var(--wait)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.end{justify-content:flex-end}
.grow{flex:1 1 200px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.card.top3{border-top:3px solid var(--orange)}
.card.next{border:2px solid var(--ob)}
.card h2{margin-bottom:6px}
.card.quiet{background:var(--bg)}
.kicker{font:700 12px 'Instrument Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ot);margin-bottom:4px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:13px;min-height:26px}
.chip.g{background:var(--good-bg);border-color:#9ed8bb;color:var(--good-d)}.chip.o{background:var(--tint);border-color:var(--tint-line);color:var(--ot)}.chip.b{background:var(--bad-bg);border-color:#f3c3be;color:var(--bad)}.chip.w{background:var(--warn-bg);border-color:#efd88f;color:var(--warn-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
label.f,.f{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
.hint{font-size:13px;color:var(--sub);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=search],select,textarea{width:100%;min-height:48px;font:16px 'Instrument Sans',sans-serif;color:var(--ink);background:var(--card);border:1.5px solid var(--field);border-radius:var(--r-sm);padding:10px 12px}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ob);box-shadow:0 0 0 3px rgba(242,106,33,.3)}
.err{color:var(--bad);font-size:13px;margin-top:4px;font-weight:600}.err:empty{display:none}
.okline{color:var(--good-d);font-size:13px;margin-top:4px;font-weight:600}.okline:empty{display:none}
input.bad,select.bad{border-color:var(--bad)}
.field{margin-bottom:14px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
input[type=date]{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}
.grid3{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:10px}.grid3 input,.grid2 input,.grid2 select{min-width:0}
@media(max-width:520px){.grid2.stk{grid-template-columns:1fr}}
.pwrow{display:flex;gap:8px}.pwrow input{flex:1}
.ac{position:relative}
.ac ul{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:2px;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-sm);list-style:none;max-height:260px;overflow:auto;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.ac li{min-height:44px;padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:16px}
.ac li[aria-selected=true],.ac li:hover{background:var(--tint)}
.ac .dym{font-size:13px;color:var(--sub);padding:8px 12px;cursor:default}
.verified{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--good-d);margin-top:4px}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.choice label{position:relative;display:block}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.choice span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--field);border-radius:99px;background:var(--card);font-weight:600;font-size:15px}
.choice input:checked+span{border-color:var(--ob);background:var(--tint);color:var(--ot);box-shadow:inset 0 0 0 1px var(--ob)}
.choice input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.choice.stackv{flex-direction:column;flex-wrap:nowrap}.choice.stackv span{border-radius:var(--r-md);width:100%;padding:10px 14px;min-height:52px}
.choice input[disabled]+span{opacity:.5}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer;font-size:16px}
.check input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--ob)}
.tracker2{display:flex;gap:8px;margin:0 0 16px;list-style:none}
.tracker2 li{flex:1;border:1.5px solid var(--line);border-radius:var(--r-md);padding:8px 10px;font-size:13px;color:var(--sub);background:var(--card)}
.tracker2 li b{display:block;font-size:14px;color:var(--ink)}
.tracker2 li.now{border-color:var(--ob);background:var(--tint)}
.tracker2 li.done{border-color:var(--good);background:var(--good-bg)}
.tracker2 li.done b:before{content:'\2713  ';color:var(--good-d)}
.price{background:#1c1a18;color:#F4F1EC;border:1px solid #4a4540;border-radius:var(--r-lg);padding:16px 18px}
.price .amt{font-family:'Clash Grotesk',sans-serif;font-size:40px;font-weight:600;line-height:1}
.priceinput{display:flex;align-items:center;gap:6px;font:600 28px 'Clash Grotesk',sans-serif}
.priceinput input{font-size:28px;font-family:'Clash Grotesk',sans-serif;font-weight:600;max-width:170px;min-height:56px}
.bar3{position:relative;height:16px;border-radius:99px;background:linear-gradient(90deg,#e2b53a 0,#e2b53a 60%,var(--good) 60%,var(--good) 100%);margin:14px 6px 4px;border:1px solid rgba(0,0,0,.15)}
.bar3.dis{background:var(--wait)}
.bar3 .mk{position:absolute;top:-6px;width:6px;height:26px;background:var(--ink);border-radius:3px;transform:translateX(-3px)}
.bar3lab{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);margin:0 2px}
.take{display:grid;gap:8px;margin:12px 0}
.take div{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.take b{font-variant-numeric:tabular-nums}
.calc{width:100%;border-collapse:collapse;font-size:14px}
.calc td{padding:6px 0;border-top:1px solid var(--line);vertical-align:top}.calc td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;padding-left:10px}
.calc .as{display:block;color:var(--sub);font-size:12.5px;font-weight:400}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:none;cursor:pointer;color:var(--ink);margin:-8px -4px -8px 0}
.ibtn span{width:24px;height:24px;border-radius:50%;border:2px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font:700 14px 'Instrument Sans',sans-serif;font-style:normal}
details.how>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.banner{border-radius:var(--r-lg);padding:16px 18px;background:var(--wait);display:flex;gap:14px;align-items:flex-start}
.banner .k{font:700 12px 'Instrument Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.banner h1{font-size:clamp(22px,5.2vw,32px);margin:4px 0 4px}
.banner p{font-size:16px}
.banner.mine{background:var(--ob);color:#fff}
.banner.done{background:var(--gf);color:#fff}
.banner.frozen{background:var(--bad);color:#fff}
:root[data-theme=dark] .banner.frozen{color:#141414}
.dotlive{width:10px;height:10px;border-radius:50%;background:currentColor;flex:none;margin-top:4px}
.banner.wait .dotlive{animation:pulse 2s ease-in-out infinite;background:var(--sub)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.track{display:flex;margin:16px 0 6px;list-style:none;counter-reset:s}
.track li{flex:1;text-align:center;position:relative;font-size:11.5px;color:var(--sub);min-width:0}
.track li:before{content:'';position:absolute;top:14px;left:-50%;width:100%;height:4px;background:var(--line);z-index:0}
.track li:first-child:before{display:none}
.track li.done:before,.track li.now:before{background:var(--good)}
.track .d{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.track li.done .d{background:var(--gf);border-color:var(--gf);color:#fff}
.track li.now .d{background:var(--ob);border-color:var(--ob);color:#fff;box-shadow:0 0 0 4px rgba(242,106,33,.25)}
.track li.now{color:var(--ink);font-weight:700}
.track .l{display:block;margin-top:4px;line-height:1.2}
.trackline{font-size:14px;color:var(--sub);margin-bottom:14px}.trackline b{color:var(--ink)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
@media(max-width:560px){.three{gap:6px}}
.three div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 8px;font-size:13px;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.three b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:900px){.rgrid{grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}.rgrid aside{position:sticky;top:72px}}
.li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.li:first-child{border-top:0}
.tick{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:var(--card);color:var(--sub)}
.tick.ok{background:var(--gf);border-color:var(--gf);color:#fff}
.tick.now{border-color:var(--ob);color:var(--ot)}
.movecard{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;position:relative}
.movecard:hover{border-color:var(--orange);box-shadow:0 12px 30px rgba(242,106,33,.10)}
.movecard.mine{border-top:3px solid var(--orange)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 12px;font-size:13px;font-weight:700;background:var(--wait)}
.pill.mine{background:var(--ob);color:#fff}.pill.done{background:var(--good-bg);color:var(--good-d)}.pill.frozen{background:var(--bad);color:#fff}
/* deck */
.strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.strip .cnt{font-weight:700;margin-right:4px}
.sc{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 6px;border-radius:99px;border:1.5px solid var(--field);background:var(--card);font:600 14px 'Instrument Sans',sans-serif;color:var(--ink);cursor:pointer}
.sc i{width:32px;height:32px;border-radius:50%;background:var(--wait);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:700}
.sc[aria-pressed=true]{border-color:var(--ob);background:var(--tint);box-shadow:inset 0 0 0 1px var(--ob)}
.sc.aside{opacity:.6}
.app{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:var(--card);text-align:center}
.app.front{border:2px solid var(--ob)}
.ring{--p:80;--c:var(--orange);width:148px;height:148px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--wait) 0);display:grid;place-items:center;margin:8px auto 4px}
.ring.hi{--c:var(--good)}
.ring>div{width:118px;height:118px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring b{font:600 46px 'Clash Grotesk',sans-serif}.ring small{font-size:10.5px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;text-align:center}
.ringtxt{font-size:15px;font-weight:600}
.app .nm{font:600 22px 'Clash Grotesk',sans-serif;margin-top:6px}
.app .chips{justify-content:center;margin:8px 0}
.facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0;text-align:center}
.facts div{background:var(--bg);border-radius:var(--r-md);padding:8px 4px;font-size:12px;color:var(--sub)}.facts b{display:block;color:var(--ink);font-size:15px}
.reasons{list-style:none;text-align:left;font-size:15px;margin:8px 0}.reasons li{padding:2px 0 2px 24px;position:relative}.reasons li:before{content:'\2713';position:absolute;left:0;color:var(--good-d);font-weight:700}.reasons li.no:before{content:'!';color:var(--warn-d)}
.quote{font-size:14px;color:var(--sub);font-style:italic;margin:6px 0}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.confirm{background:var(--tint);border:1.5px solid var(--ob);border-radius:var(--r-md);padding:14px;margin-top:12px;text-align:left}
.confirm.bad{background:var(--bad-bg);border-color:var(--bad)}
.confirm p{font-weight:600;margin-bottom:10px}
.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.compare .app{padding:14px}
.compare .ring{width:96px;height:96px}.compare .ring>div{width:76px;height:76px}.compare .ring b{font-size:30px}.compare .ring small{display:none}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:520px){.slots{grid-template-columns:repeat(5,1fr)}}
.slot{position:relative;display:block}
.slot .im{aspect-ratio:1;border:2px dashed var(--field);border-radius:var(--r-md);background:var(--card);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:24px;color:var(--sub)}
.slot.ok .im{border-style:solid;border-color:var(--good)}
.slot .im img{width:100%;height:100%;object-fit:cover}
.slot .cap{font-size:13px;font-weight:600;margin-top:4px;line-height:1.2;text-align:center}
.slot label.pick{position:absolute;inset:0;cursor:pointer;border-radius:var(--r-md)}
.slot label.pick input{position:absolute;opacity:0;width:1px;height:1px}
.slot label.pick:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.photobtns{display:flex;gap:6px;margin-top:6px;justify-content:center}
.sbs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sbs figure{margin:0}.sbs img{width:100%;border-radius:var(--r-sm);display:block;border:1px solid var(--line)}.sbs figcaption{font-size:12px;color:var(--sub);margin-top:2px}
.sbs h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:6px}
.livebox{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--wait);font-weight:600}
.livebox .dotlive{background:var(--ob);animation:pulse 1.6s infinite}
.livebox.pausedbox .dotlive{animation:none;background:var(--sub)}
.stopli{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}.stopli:first-child{border-top:0}
.stopli img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.stars{display:flex;gap:4px}
.star{width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:30px;color:var(--field);line-height:1;border-radius:8px}
.star.on{color:var(--ob)}
.state{border:2px solid var(--line);border-radius:var(--r-lg);padding:18px;background:var(--card)}
.state .ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 22px 'Instrument Sans',sans-serif;margin-bottom:8px;background:var(--wait)}
.state.warn{border-color:var(--warn);background:var(--warn-bg)}.state.err{border-color:var(--bad);background:var(--bad-bg)}.state.ok{border-color:var(--good)}
.state dl{margin:10px 0}.state dt{font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);margin-top:8px}.state dd{margin:0}
.sbanner{padding:10px 14px;font-weight:600;font-size:15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--warn-bg);color:var(--warn-d);border-bottom:1px solid var(--warn)}
.sbanner.err{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.sbanner .in{max-width:1120px;margin:0 auto;width:100%;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* bottom bar and sheets */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--line);padding:6px 10px calc(6px + env(safe-area-inset-bottom));display:flex;gap:8px;justify-content:center;min-height:var(--bar-h)}
.bar button{flex:1 1 0;max-width:340px;min-height:48px;border-radius:var(--r-md);border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:700 15px 'Instrument Sans',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 10px}
.bar button.help{background:var(--ink);color:var(--bg)}
.bar button.trip{background:var(--ob);border-color:var(--ob);color:#fff}
.bar button[aria-expanded=true]{border-color:var(--ob);box-shadow:inset 0 0 0 1px var(--ob)}
.bar button[aria-disabled=true]{opacity:.7}
body.typing .bar{display:none}
.sheet{position:fixed;z-index:35;left:0;right:0;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));max-height:calc(100dvh - var(--bar-h) - 70px);background:var(--card);border:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.18);display:flex;flex-direction:column}
@media(min-width:900px){.sheet{left:auto;right:16px;width:400px;bottom:calc(var(--bar-h) + 8px);border-radius:16px;max-height:calc(100dvh - 140px)}}
.sheet header{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line)}
.sheet header h2{flex:1;font-size:18px}
.sheet .body{padding:14px 16px;overflow:auto;flex:1}
.sheet footer{padding:10px 12px;border-top:1px solid var(--line)}
.msgs{display:flex;flex-direction:column;gap:8px;min-height:120px;max-height:40vh;overflow:auto;margin-bottom:8px}
.msg{max-width:85%;padding:8px 12px;border-radius:14px;background:var(--wait);font-size:15px}
.msg.me{align-self:flex-end;background:var(--tint);border:1px solid var(--tint-line)}
.msg.plona{align-self:center;background:var(--good-bg);font-size:13px;max-width:100%;text-align:center}
.msg small{display:block;color:var(--sub);font-size:11px}
.help ol{padding-left:22px}.help ol li{margin:6px 0}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:60;max-width:90vw;font-weight:600}
/* round 3A: no bottom bar, so the toast sits 20px off the bottom; over the driver's trip button when it shows */
html.plh-has-bar .toast{bottom:calc(var(--bar-real) + 12px)}
/* demo */
.demo{margin-top:28px;border:2px dashed var(--field);border-radius:var(--r-lg);background:var(--card)}
.demo>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;padding:0 16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.demo .in{padding:4px 16px 16px}
.demo h3{font-size:14px;margin:14px 0 6px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.demo .row{gap:8px}
.demo button{min-height:44px;padding:0 12px;border:1.5px solid var(--field);background:var(--card);color:var(--ink);border-radius:8px;font:600 14px 'Instrument Sans',sans-serif;cursor:pointer}
.demo button[aria-pressed=true]{border-color:var(--ob);background:var(--tint);color:var(--ot)}
.docrow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.paperfront{border:2px solid var(--ob);border-radius:var(--r-md);padding:14px;background:var(--card)}
.paperfront dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0}.paperfront dt{color:var(--sub);font-size:14px}.paperfront dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.saved{font-size:13px;color:var(--good-d);font-weight:600}
.install{display:flex;gap:12px;align-items:flex-start}
.hide{display:none!important}
.divider{border:0;border-top:1px solid var(--line);margin:16px 0}
/* 3.5.8: spacing classes on the scale (app.css :root --s1 to --s4), for page code in place of an inline margin or padding. Like the inline
   style each one replaces, they win over a component's own spacing. */
.mt0{margin-top:0!important}.mt1{margin-top:var(--s1)!important}.mt2{margin-top:var(--s2)!important}.mt3{margin-top:var(--s3)!important}.mt4{margin-top:var(--s4)!important}
.mb0{margin-bottom:0!important}.mb2{margin-bottom:var(--s2)!important}.mb3{margin-bottom:var(--s3)!important}.m0{margin:0!important}.p0{padding:0!important}.p3{padding:var(--s3)!important}

.show-lg{display:none!important}@media(min-width:900px){.show-lg{display:inline-flex!important}}

/* ===== app additions (part 1) ===== */
/* plona-db.js adds its own floating feedback tab. The app uses the bottom bar instead, so hide it. */
#plfb-tab,#chat-launch,#home-launch{display:none!important}
.tb .badge[hidden]{display:none}
.loading{padding:40px 16px;text-align:center;color:var(--sub)}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ob);display:inline-block;animation:spin 1s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.notif{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:12px 14px}
.notif.unread{border-left:4px solid var(--ob)}
.notif h3{font-size:16px;margin-bottom:2px}
.pill.wait{background:var(--wait)}
.pill.warn{background:var(--warn-bg);color:var(--warn-d)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:15px;margin:8px 0}.kv dt{color:var(--sub)}.kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}.kv a.kvchg{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 6px;margin:-12px 0 -12px -2px;vertical-align:middle}
.checkgroup+.checkgroup{margin-top:18px}
.checkgroup h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:4px}
.li .grow{flex:1;min-width:0}
.tag{display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:99px;padding:2px 10px;background:var(--wait);margin-left:6px}
.tag.ok{background:var(--good-bg);color:var(--good-d)}.tag.bad{background:var(--bad-bg);color:var(--bad)}.tag.warn{background:var(--warn-bg);color:var(--warn-d)}
.pwd{margin-top:8px}
.mockbar{margin:24px auto 0;max-width:1120px}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.bar button .dot{width:8px;height:8px;border-radius:50%;background:var(--ob);margin-left:6px}
.datewarn{margin-bottom:14px;padding:12px}
.progress{height:6px;border-radius:99px;background:var(--wait);overflow:hidden}.progress i{display:block;height:100%;background:var(--ob)}
.linkrow{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.small a,.sub a{color:var(--ot)}
@media(min-width:900px){.wrap.two{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}}

.stack-l>.three{margin-top:12px}
/* tester.js adds a fixed pill that points to the old Feedback tab; the app uses the helper in the bottom bar instead */
body>div[style*="left:12px"][style*="bottom:12px"]{display:none!important}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .banner.frozen,:root:not([data-theme=light]) .pill.frozen{color:#141414}}
/* 2026-09-30: "Driver gets" is typed right in the receipt */
.take .rcpt-drv{align-items:center}.take .rcpt-drv label{font-weight:700}.priceinput.drvin{font-size:20px}.priceinput.drvin input{font-size:20px;max-width:120px;min-height:44px;text-align:right}