/* ---------- Evaluation pass: touch targets, motion, hold timer, focus ---------- */
#app:focus{outline:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:var(--on-brand);padding:10px 14px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:8px}
.hold-low{color:var(--warn)}
.app-dots button{height:44px}
.app-dots button::after{top:19px}
@media (max-width:820px){
  .crumb{display:inline-flex;align-items:center;min-height:44px;padding-right:12px;margin-bottom:4px}
  .btn.sm{min-height:44px}
  .app-view .btn.sm{min-height:44px}
}
.btn,.cardbuy,.dcard,.app-tk,.app-line{transition:transform .1s ease,border-color .15s,background-color .15s}
.btn:active:not(:disabled),.dcard:active,.app-tk:active,.app-line:active{transform:scale(.98)}
@media (prefers-reduced-motion:no-preference){
  section.view{animation:vfade .18s ease-out}
  @keyframes vfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .okmark{animation:okpop .35s cubic-bezier(.2,.9,.3,1.3)}
  @keyframes okpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
  .toast{animation:vfade .15s ease-out}
}
@media (prefers-reduced-motion:reduce){.btn:active:not(:disabled),.dcard:active,.app-tk:active,.app-line:active{transform:none}}
.goesto{font-size:18px;margin:4px 0 14px;color:var(--text-dim)}
.goesto b{color:var(--text);word-break:break-all}

/* Status palette: seven statuses, seven different hues (never reused). */
.chip.st-soon,.chip.st-soldout,.chip.st-cancelled,.chip.st-postponed,.chip.st-offsale,.chip.st-passed{background:rgba(14,14,15,.82);border-color:currentColor}
.st-soon{color:var(--st-soon)}.st-soldout{color:var(--st-soldout)}.st-cancelled{color:var(--st-cancelled)}.st-postponed{color:var(--st-postponed)}.st-offsale{color:var(--st-offsale)}.st-passed{color:var(--st-passed)}
.stat.st-soon::before{background:var(--st-soon)}.stat.st-soldout::before{background:var(--st-soldout)}.stat.st-cancelled::before{background:var(--st-cancelled)}.stat.st-postponed::before{background:var(--st-postponed)}.stat.st-offsale::before{background:var(--st-offsale)}.stat.st-passed::before{background:var(--st-passed)}
.cardbuy.st-soon,.cardbuy.st-soldout,.cardbuy.st-cancelled,.cardbuy.st-postponed,.cardbuy.st-offsale,.cardbuy.st-passed{background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 40%,transparent)}
@media (hover:hover){.cardbuy.st-soon:hover,.cardbuy.st-soldout:hover,.cardbuy.st-cancelled:hover,.cardbuy.st-postponed:hover,.cardbuy.st-offsale:hover,.cardbuy.st-passed:hover{border-color:currentColor}}
.dm h1,.dm-title h1{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;line-height:1.2}
.dm-meta div{overflow-wrap:anywhere}

/* Ticket view follows the real ticket PDF: artwork field, logo, white QR panel, black footer with name, tier, code. */
.tk-card{width:min(100%,340px);border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.tk-art.flyer{aspect-ratio:auto;border-radius:0;box-shadow:none;align-items:center;justify-content:flex-start;gap:14px;padding:14px 18px 26px;min-height:440px}
.tk-logo{width:78px;height:auto;display:block}
.tk-art .tk-qr{width:100%;box-shadow:none;border-radius:16px;padding:14px}
.tk-title{font-family:var(--display);font-weight:800;font-size:34px;line-height:.95;letter-spacing:-.03em;text-transform:uppercase;text-align:center;color:#fff;margin-top:8px;text-wrap:balance}
.tk-foot{background:#000;color:#fff;text-align:center;padding:14px 12px 16px;display:grid;gap:2px}
.tk-who{font-size:20px;font-weight:600}.tk-tier{font-size:16px}.tk-codeln{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.04em;color:#ddd;font-variant-numeric:normal}

/* Fan app Events and saved cards: flyer, text, bookmark. */
.app-evs{display:grid;gap:10px}
.app-ev{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:16px}
.app-ev-main{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:10px 52px 10px 10px;color:inherit}
.app-ev-main .flyer{aspect-ratio:4/5;padding:4px;border-radius:8px}
.app-ev-main .flyer .stamp{display:none}
.app-ev-t{display:grid;gap:2px;min-width:0}
.app-ev-t b{font-family:var(--display);font-size:16px;line-height:1.15}
.app-ev-t span{font-size:13px;color:var(--muted)}
.app-going{color:var(--brand)!important;font-family:inherit!important;font-size:13px!important}
.app-ev .app-save{position:absolute;right:6px;top:6px;margin:0}
.app-next .btn+.btn{margin-top:8px}
.app-next-none{background:var(--panel)}
.app-empty{display:grid;gap:6px;padding:28px 8px;text-align:center}.app-empty span{color:var(--muted)}

/* Fan app Events: poster-led. */
.app-poster{position:relative;animation:posterIn .45s cubic-bezier(.2,.7,.2,1) both}
.app-poster-main{display:block;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit}
.app-poster-main .flyer{aspect-ratio:4/5;border-radius:14px;padding:6px}
.app-poster .app-save{position:absolute;right:8px;top:8px;margin:0;background:rgba(14,14,15,.72);border-radius:50%;width:40px;height:40px;display:grid;place-items:center;backdrop-filter:blur(6px)}
.app-save.just[aria-pressed="true"] svg{animation:pop .3s ease}
.app-pd{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 2px 0}
.app-pd-d{display:grid;justify-items:center;line-height:1;min-width:34px}
.app-pd-d i{font-style:normal;font-family:var(--display);font-weight:800;font-size:28px}
.app-pd-d em{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:700}
.app-pd-t{display:grid;gap:1px;min-width:0}
.app-pd-t b{font-family:var(--display);font-size:16px;line-height:1.15}
.app-pd-t span{font-size:13px;color:var(--muted)}
.app-poster.big .app-pd-d i{font-size:36px}.app-poster.big .app-pd-t b{font-size:21px}
.app-poster.big .app-poster-main .flyer{border-radius:20px}
.app-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
.app-rail::-webkit-scrollbar{display:none}
.app-rail .app-poster{flex:0 0 62%;scroll-snap-align:start}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.app-grid .app-pd{grid-template-columns:1fr}.app-grid .app-pd-d{display:none}
.app-pd-dt{display:none;color:var(--brand)!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px!important}.app-grid .app-pd-dt{display:block}
.app-grid .app-poster:nth-child(2){animation-delay:.05s}.app-grid .app-poster:nth-child(3){animation-delay:.1s}.app-grid .app-poster:nth-child(4){animation-delay:.15s}
@keyframes posterIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.app-poster,.app-poster .app-save[aria-pressed="true"] svg{animation:none}}
.app-view .app-body .app-poster-main .flyer{aspect-ratio:4/5}
.app-rail{scroll-padding-inline:16px}

/* Fan app motion. QR is never animated (see MOTION-PLAN.md). */
@property --wash{syntax:'<color>';inherits:true;initial-value:#39c984}
@property --washa{syntax:'<number>';inherits:true;initial-value:0}
.app-fr.washed{background:radial-gradient(120% 55% at 50% -8%,color-mix(in srgb,var(--wash) 38%,transparent),transparent 70%),var(--bg);transition:--wash .7s ease}
.app-poster .flyer{will-change:transform;transition:transform .12s linear}
.app-rail .app-poster{transition:opacity .15s linear}
.app-body{animation:appIn .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes appIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.app-view .stat:not([class*="st-"])::before{animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(57,201,132,.7)}70%,100%{box-shadow:0 0 0 7px rgba(57,201,132,0)}}
.app-save svg{transition:transform .15s}
.app-save:active svg{transform:scale(.8)}
.app-save[aria-pressed="true"]::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--pglow,var(--brand));opacity:0;pointer-events:none}
.app-save.just[aria-pressed="true"]::after{animation:ring .5s ease-out both}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
.app-tabs button[aria-current="page"] svg{animation:tabpop .4s ease}
@keyframes tabpop{0%{transform:translateY(0)}40%{transform:translateY(-4px) scale(1.12)}100%{transform:none}}
.app-next{background-size:180% 180%;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}
.app-cd{display:flex;gap:14px;margin:8px 0 2px}
.cd-u{display:grid;justify-items:center;min-width:44px;line-height:1}
.cd-u b{font-family:var(--display);font-weight:800;font-size:30px;font-variant-numeric:tabular-nums}
.cd-u i{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-top:4px}
.cd-s b{animation:tick 1s steps(1) infinite}
@keyframes tick{0%{opacity:1;transform:translateY(0)}}
.tk-art{position:relative;overflow:hidden}
.tk-art::before{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);animation:sheen 4.5s ease-in-out infinite;pointer-events:none;z-index:0}
.tk-art>*{position:relative;z-index:1}
@keyframes sheen{0%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
.tk-logo{animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.tk-off i{animation:ping 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.app-body,.app-view .stat::before,.app-save[aria-pressed="true"]::after,.app-tabs button svg,.app-next,.cd-s b,.tk-art::before,.tk-logo,.tk-off i{animation:none!important}.app-fr.washed{transition:none}}

.tkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,340px));gap:20px;justify-content:center;margin:16px 0}
.tkgrid .tk-card{width:100%}

.wlist{display:grid;gap:10px}
.wrow{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px}
.wrow-t{display:grid;gap:2px;min-width:0}.wrow-t b{font-family:var(--display);font-size:17px}
.wrow-a{grid-column:1/-1;display:flex;gap:14px;align-items:center}

/* Fan app: postponed banner, going card, promoter page, prefs */
.tk-banner{background:#3a2a05;color:#ffd27a;font-size:13px;text-align:center;padding:8px 12px;line-height:1.3}
.app-going-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(57,201,132,.1);border:1px solid rgba(57,201,132,.4);border-radius:14px;padding:12px 14px;margin-top:14px}
.app-going-card b{display:block;color:var(--brand)}.app-going-card small{display:block;color:var(--text-dim);font-size:13px}
.app-pl{background:none;border:0;text-align:left;color:inherit;padding:0;flex:1;min-height:44px}
.app-pl b{display:block}.app-pl small{display:block;color:var(--muted);font-size:13px}
.app-prom{display:flex;align-items:center;gap:14px;margin-top:6px}
.app-prom-logo{width:56px;height:56px;border-radius:16px;background:var(--chip);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;color:var(--brand);flex:none}
.prefs{display:flex;flex-wrap:wrap;gap:8px}
.pref{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--chip);color:var(--text-dim);font-weight:600}
.pref[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);background:rgba(57,201,132,.1)}
/* Promoter: ticket row 2, share card, map preview, tap targets */
.trow2{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:-2px 0 14px}
.fld-sm{display:grid;gap:4px;font-size:13px;color:var(--muted);width:96px}
.sharecard{display:flex;gap:16px;align-items:center}
.shareqr{width:104px;flex:none;background:#fff;border-radius:12px;padding:8px}.shareqr svg{display:block;width:100%;height:auto}
.sharelink{font-weight:700;word-break:break-all}
.mapbox iframe{width:100%;height:220px;border:0;border-radius:10px;display:block}
.mapcap{font-size:13px;color:var(--muted);margin-top:6px}
.trow .inp,.brow .inp,.brow select,.bcard .inp,.tagrow .inp,.trow2 .inp{min-height:44px}
.iconbtn,.bcard .btn.sm,.tagrow .btn,.chipx button{min-width:44px;min-height:44px}

/* App ad on the home page, stubs, empty states, onboarding */
.appad{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin:10px 0}
.appad img{border-radius:10px;flex:none}.appad div{flex:1;min-width:0;display:grid}.appad b{font-size:15px}.appad span{font-size:13px;color:var(--muted)}
.stubs{display:grid;gap:12px}
.stub{position:relative;display:grid;grid-template-columns:1fr 96px;width:100%;text-align:left;color:#fff;border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);border-radius:20px;background:linear-gradient(135deg,var(--tone) 30%,color-mix(in srgb,var(--glow) 50%,var(--tone)));padding:0;overflow:hidden}
.stub::before,.stub::after{content:"";position:absolute;left:calc(100% - 96px - 9px);width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid color-mix(in srgb,var(--glow) 45%,transparent)}
.stub::before{top:-10px}.stub::after{bottom:-10px}
.stub-main{display:grid;gap:3px;padding:16px 14px 16px 16px;min-width:0}
.stub-date{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;font-weight:700}
.stub-name{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.05;letter-spacing:-.02em;margin:2px 0 4px}
.stub-meta{font-size:13px;opacity:.85}
.stub-side{border-left:2px dashed rgba(255,255,255,.3);display:grid;align-content:center;justify-items:center;gap:2px;padding:10px 6px;text-align:center}
.stub-n{font-family:var(--display);font-size:26px;font-weight:800}.stub-pp{font-size:15px;color:#ffd27a}
.stub-side span{font-size:13px;opacity:.85}.stub-side i{font-style:normal;font-size:13px;font-weight:700;margin-top:6px;color:#fff;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 10px}
.stub.past{filter:saturate(.25);opacity:.7}
.empty-state{display:grid;justify-items:start;gap:6px;padding:18px;border:1px dashed var(--border);border-radius:14px;color:var(--muted)}
.empty-state b{color:var(--text);font-size:16px}
.benefits{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px}.benefits li{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text-dim)}.benefits b{display:block;color:var(--text)}
.steps-ol{padding-left:20px;display:grid;gap:8px;margin:14px 0}

#hdrMy{white-space:nowrap}
@media (max-width:420px){header.top .wrap{gap:8px}#hdrMy,#hdrSign{padding-inline:10px;font-size:14px}}

.phonebox{display:flex;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;margin:0 0 6px}
.phoneqr{width:96px;flex:none;background:#fff;border-radius:10px;padding:8px}.phoneqr svg{display:block;width:100%;height:auto}
.app-ordr{display:grid;justify-items:end;gap:6px}

/* App first open */
.first{padding-top:36px}.first-logo{width:120px;display:block;margin:0 auto 22px}
.first-h{font-family:var(--display);font-size:32px;margin:0 0 6px;text-align:left}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 4px;min-height:48px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:14px 0}.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--border)}

/* Ticket as a picture: no animation on it, status overlay away from the QR */
.tk-art::before{display:none!important}
.tk-logo{animation:none!important}
.tk-card.dimmed .tk-qr,.tk-card.dimmed .tk-logo,.tk-card.dimmed .tk-title,.tk-card.dimmed .tk-foot{opacity:.4}
.tk-ov{position:absolute;left:12px;right:12px;bottom:16px;background:rgba(0,0,0,.82);color:#fff;font-weight:800;font-size:16px;text-align:center;border-radius:10px;padding:10px 8px;z-index:2}
.tk-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;scrollbar-width:none;gap:0}
.tk-slides::-webkit-scrollbar{display:none}
.tk-slide{flex:0 0 100%;scroll-snap-align:center;display:grid;justify-items:center}
.tk-slide .tk-card{width:min(100%,340px)}
.tk-unsaved{display:grid;gap:8px;justify-items:center;text-align:center;background:rgba(0,0,0,.35);border:1px dashed var(--border);padding:48px 20px;min-height:420px;align-content:center}
.tk-unsaved b{font-size:18px}
.tk-count{font-size:13px;font-weight:700;background:rgba(0,0,0,.35);border-radius:999px;padding:4px 10px}
.tk-banner-top{width:100%;background:#3a2a05;color:#ffd27a;font-size:13px;text-align:center;padding:8px 12px;border-radius:12px;line-height:1.3}
.tk-off.warn{color:#ffd27a}.tk-off.warn i{background:#ffb020;animation:none}
.tk-hint{font-size:13px;color:var(--text-dim)}
.stub{grid-template-columns:48px 1fr 96px}
.stub-fly{display:block;padding:14px 0 14px 14px}.stub-fly .flyer{aspect-ratio:4/5;border-radius:6px;padding:0;min-height:0}.stub-fly .stamp{display:none}
.stub-main{padding-left:12px}
.stub-ns{font-size:12px;color:#ffd27a;font-weight:700}
.app-saving{display:grid;gap:4px;background:rgba(57,201,132,.1);border:1px solid rgba(57,201,132,.4);border-radius:14px;padding:12px 14px;margin:6px 0 12px}
.app-saving.warn{background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.4)}
.app-saving.warn{position:relative;padding-right:44px}
.app-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--text-dim);font-size:22px;line-height:1;cursor:pointer}
.app-x:active{background:rgba(255,255,255,.08)}
.app-saving span{font-size:13px;color:var(--text-dim)}.app-saving .btn{justify-self:start;margin-top:4px}
.tk-art.flyer{min-height:580px}
.tk-ov{bottom:18px}

.past-list{display:grid;gap:2px}
.past-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border);color:var(--muted)}
.past-row b{display:block;font-weight:600;color:var(--text-dim)}.past-row small{display:block;font-size:13px}

/* Ticket rows: plain soft rectangle (overrides the earlier stub styling) */
.stub{display:flex;align-items:center;justify-content:space-between;gap:14px;grid-template-columns:none;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px 16px;color:var(--text);background-image:none;filter:none;opacity:1}
.stub::before,.stub::after{display:none}
.stub-main{padding:0;gap:3px}
.stub-date{opacity:1;color:var(--text-dim);letter-spacing:.06em}
.stub-name{font-size:19px;margin:0}
.stub-meta{opacity:1;color:var(--muted)}
.stub-n{font-family:var(--display);font-weight:800;font-size:28px;display:grid;justify-items:center;line-height:1;flex:none;min-width:52px}
.stub-n small{font-family:var(--body,inherit);font-weight:500;font-size:12px;color:var(--muted);margin-top:3px}
.stub .app-by{font-size:13px;color:var(--brand);font-weight:600}


/* "Few left": the event label (amber, same look as the other status chips) */
.chip.st-low{background:rgba(14,14,15,.82);border-color:currentColor}.st-low{color:var(--st-low)}.stat.st-low::before{background:var(--st-low)}

/* Ticket screen in the app: the finished ticket picture the event sent (shown as it is, never redrawn) */
.tk-slide .tk-img{width:min(100%,340px);height:auto;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.45);display:block;background:#fff}
/* The slides must be as wide as the screen, not as wide as all the tickets side by side */
.tk-body{grid-template-columns:minmax(0,1fr)}.tk-body .tk-slides{min-width:0;max-width:100%}

/* Home ad: one small strip with the install steps. */
.appad3{padding:8px 12px}
.appad3 b{font-size:14px}
.ad-steps{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:2px 0 0;padding:0;counter-reset:ad;font-size:12px;color:var(--muted)}
.ad-steps li{counter-increment:ad;display:flex;align-items:center;gap:5px;white-space:nowrap}
.ad-steps li::before{content:counter(ad);display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--chip,#262628);color:var(--brand);font-size:10px;font-weight:700}

/* My tickets: "Get door-ready" checklist. */
.doorready{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin:0 0 16px}
.dr-head{display:flex;align-items:center;gap:8px}
.dr-logo{border-radius:8px;flex:none}
.dr-head b{font-size:16px}
.dr-head .mut{font-size:13px;flex:1}
.dr-hide{font-size:12px;color:var(--muted)}
.dr-bar{height:4px;border-radius:4px;background:var(--border);margin:8px 0 6px;overflow:hidden}
.dr-bar i{display:block;height:100%;background:var(--brand);border-radius:4px}
.dr-list{list-style:none;margin:0;padding:0}
.dr-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border)}
.dr-row:first-child{border-top:0}
.dr-row>div{flex:1;min-width:0;display:grid}
.dr-row b{font-size:14px;font-weight:600}
.dr-row small{font-size:12px;color:var(--muted)}
.dr-ic{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);font-size:12px;color:var(--muted)}
.dr-row.done .dr-ic{background:var(--brand);border-color:var(--brand);color:#04140c;font-weight:700}
.dr-row.done b{color:var(--muted);font-weight:500}

/* Tap areas: inline links stay the same size to the eye but are easier to hit on a phone. */
button.link,.legal a,.si-foot a{position:relative}
button.link::after,.legal a::after,.si-foot a::after{content:"";position:absolute;inset:-9px -6px}

/* Buttons: every normal button reaches the 44px tap target, the small ones too. */
.btn:not(.sm){min-height:44px}
.step button{width:44px;height:44px}
.qty button{width:44px;height:44px}
.cookie .btn.sm{min-height:44px}
.tabs button,.backstrip button{min-height:44px}

/* Hover: only on devices with a mouse, so a tap on a phone never leaves a button stuck looking hovered. */
@media (hover:hover){
  .btn.primary:hover{filter:brightness(1.12)}
  .qty button:hover:not(:disabled),.step button:hover:not(:disabled){background:var(--chip);color:var(--text)}
  .tblw tbody tr:hover{background:rgba(255,255,255,.04)}
  .btn.sm:hover,.btn.danger:hover{border-color:var(--muted)}
  .btn.danger:hover{border-color:var(--error)}
  .app-x:hover,.sheetx:hover,.iconbtn:hover{background:var(--chip)}
}

/* Installed app: respect the phone's notch and home bar, keep long names tidy, calmer taps. */
body.inapp .app-head{padding-top:calc(16px + env(safe-area-inset-top,0px))}
.app-tabs{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.app-body{-webkit-overflow-scrolling:touch}
.app-next-nm,.app-tk-t b,.app-line b,.app-sheet b{overflow-wrap:anywhere;text-wrap:balance}
.app-tk-t b{text-wrap:pretty}
.app-tk,.app-line,.app-msg,.app-sw,.app-ic,.app-tabs button{-webkit-tap-highlight-color:transparent}
.app-tabs button{transition:color .15s}
.app-tabs button[aria-current="page"]{font-weight:700}
.tk-code{user-select:all;-webkit-user-select:all;font-variant-numeric:tabular-nums}
.tk-qr{transition:box-shadow .2s}
@media (prefers-reduced-motion:reduce){.app-sw i::after,.app-tabs button,.tk-qr{transition:none}}

/* Phone ad: one line (logo, pitch, button). */
.ad-one{min-width:0;flex:1}
.ad-one b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The "new version" bar sits above the app's tab bar instead of covering it, and the page leaves room under it. */
body.inapp #rmdUpdate{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body:has(#rmdUpdate) main{padding-bottom:84px}

/* Pair number: Copy button and the new-number link on one row. */
.pair-acts{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px;flex-wrap:wrap}

/* Google's own sign-in button (js/views-live.js swaps it in for ours) */
.g-host{display:flex;justify-content:center;height:40px;margin:14px 0 4px;border-radius:10px;overflow:hidden;color-scheme:light}
.si2-form>.g-host:first-child{margin-top:0}

/* The notification ask on My Dispatch: it has to be seen, because it is how a cancelled or moved event reaches the person. */
.app-sheet.urgent{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.app-sheet.urgent .urg-tag{justify-self:start;font-size:12px;font-weight:800;letter-spacing:.02em;padding:3px 10px;border-radius:999px;background:var(--accent);color:#1a1500}

/* App landing page: the way to sign in has to be easy to see */
.gp-signin{margin-top:22px}
.gp-signin .btn{min-height:50px;font-size:16px;border-color:var(--accent);color:var(--text)}

/* App address: the install page has one job, so its header is just the logo (no menu, no sign-in, no link out). */
html.apphost body:is([data-view="phoneopen"],[data-view="getapp"],[data-view="appinstall"]) header.top :is(nav.main,#hdrDash,#hdrSign,#hdrAv,#hdrMenu){display:none}
.gp-main{min-height:54px;font-size:17px}
.gp-chrome{margin:6px 0 0;font-size:14px}
.gp-after{margin:16px 0 0}
.gp-signin .btn{border-color:var(--brand);color:var(--brand);background:transparent}
@media (hover:hover){.gp-signin .btn:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}}

/* The one-line phone ad: a three-column grid (icon, text, button) so the text always has room and never wraps the button onto its own row or collapses to nothing. */
.appad.ad-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px}
.appad.ad-row .ad-one b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.appad.ad-row .btn{white-space:nowrap}

/* Nothing to show means no box: an event with no tag has no empty pill, a ticket with no description has no blank line */
.ev2-top .chip:empty,.ev2-tn small:empty{display:none}