:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;color-scheme:light;--bg:#f6f7f2;--card:#fff;--text:#213c34;--muted:#53665b;--border:#e0e7df;--input:#fafbf8;--green:#23735b;--blue:var(--green);--soft:#eaf2e8;--red:#b43e38;--hero:#e6efda;--shadow:0 8px 28px #253d3010;color:var(--text);background:var(--bg)}
:root[data-theme=dark]{color-scheme:dark;--bg:#14201c;--card:#1e2d26;--text:#edf3e9;--muted:#acbeb0;--border:#35463b;--input:#19281f;--green:#a3d8b0;--soft:#304638;--red:#ffada4;--hero:#293e2e;--shadow:0 8px 28px #0002}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,summary,input,select{-webkit-tap-highlight-color:transparent}button{min-height:44px;padding:10px 17px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer;font-weight:600;font-size:14px}button:hover{background:var(--soft)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:4px}.primary{color:#fff;background:#23735b;border-color:#23735b;box-shadow:0 3px 8px #23735b15}.primary:hover{background:#195c48;border-color:#195c48}.danger{color:var(--red)}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:30px;letter-spacing:-1px}h2{font-size:24px;letter-spacing:-.6px;margin:0 0 24px}h3{font-size:17px}p{line-height:1.7}.muted,.meta{color:var(--muted);line-height:1.65;font-size:13px}.error{color:var(--red)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-header,main,footer{max-width:1160px;margin:auto;padding:24px 40px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:30px;padding-bottom:26px}.brand-lockup{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;background:#23735b;color:#f3f8ee;width:45px;height:45px;border-radius:14px}.brand-icon svg{width:26px;height:26px}.brand{font-size:13px;letter-spacing:2px;font-weight:800}.brand-caption{display:block;font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:1px}.header-actions{display:flex;align-items:center;gap:8px}.header-actions button{background:transparent;border-color:transparent;font-size:12px;padding:8px 10px}.account-chip{display:flex;align-items:center;gap:7px;font-size:13px;margin-right:12px;max-width:180px;overflow-wrap:anywhere}.account-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}main{padding-top:0;min-height:70vh}nav{display:flex;gap:8px;border-bottom:1px solid var(--border);padding:0 0 18px;margin-bottom:32px}nav button{display:flex;align-items:center;gap:9px;border-color:transparent;background:transparent;font-weight:500;color:var(--muted);padding:10px 18px}nav svg{width:19px;height:19px;flex-shrink:0}nav button.active{background:var(--soft);color:var(--green);font-weight:700}nav button:hover{color:var(--text)}footer{font-size:11px;color:var(--muted);text-align:center;padding-top:34px;padding-bottom:30px}footer a{color:inherit;text-decoration:none}
.eyebrow{display:block;font-size:10px;font-weight:750;letter-spacing:2px;color:var(--muted);margin-bottom:12px}.commute-hero{display:flex;justify-content:space-between;align-items:center;overflow:hidden;border-radius:26px;background:var(--hero);padding:38px 42px;margin-bottom:38px;position:relative;min-height:260px}.hero-copy{z-index:1}.hero-copy h2{font-size:34px;letter-spacing:-1px;margin:0 0 12px}.hero-copy p{color:var(--muted);margin:0 0 25px;font-size:14px}.hero-copy .primary{min-width:142px}.hero-copy .primary>span:first-child{margin-right:5px;font-size:20px;line-height:14px;vertical-align:-1px}.journey-art{width:40%;max-width:370px;flex-shrink:0}.journey-art svg{display:block;width:100%;height:auto}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.section-heading .eyebrow{font-size:9px;margin-bottom:7px}.section-heading h2{font-size:22px;margin:0}.count-label{font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--border);padding:7px 12px;border-radius:20px}.task-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.task-card{border:1px solid var(--border);background:var(--card);border-radius:20px;padding:24px;min-width:0;box-shadow:0 3px 10px #1b443305}.task-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.route-mark{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--muted)}.route-mark svg{width:17px;height:17px;color:var(--green)}.state{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:5px 10px;border-radius:20px;background:var(--soft);color:var(--green);white-space:nowrap}.state:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.state.paused{background:var(--input);color:var(--muted)}.departure{font-size:42px;font-weight:650;letter-spacing:-2px;line-height:1.1;font-variant-numeric:tabular-nums;margin:21px 0 9px}.task-route{font-size:17px;font-weight:650;margin:0 0 8px;overflow-wrap:anywhere}.task-rule{font-size:12px;color:var(--muted);line-height:1.7;min-height:20px}.task-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:16px;margin-top:22px}.task-bottom>button{border:none;background:var(--soft);color:var(--green);padding:8px 16px}.task-secondary{display:flex;align-items:center;gap:4px}.task-secondary>button{border-color:transparent;color:var(--muted);font-size:12px}.task-menu{position:relative;border:0;margin:0;padding:0}.task-menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;cursor:pointer;font-size:24px;line-height:1}.task-menu summary::-webkit-details-marker{display:none}.task-menu summary:hover{background:var(--soft)}.menu-items{position:absolute;right:0;bottom:48px;z-index:5;min-width:160px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:6px}.menu-items button{display:block;width:100%;text-align:left;border:0;background:transparent}.menu-items button:hover{background:var(--soft)}.empty{grid-column:1/-1;border:1px dashed var(--border);border-radius:20px;text-align:center;padding:52px 24px;color:var(--muted);background:var(--card)}.empty svg{width:32px;height:32px;margin-bottom:12px;opacity:.7}.empty strong{display:block;color:var(--text);font-weight:600;font-size:16px}.empty p{font-size:13px;margin-bottom:0}
article{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:30px;margin-bottom:20px;min-width:0}.history-item{display:flex;align-items:flex-start;gap:14px;padding:22px 0;border-bottom:1px solid var(--border)}.history-item:last-child{border:0}.result-symbol{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:12px;background:#fff0e6;color:#a85b28;font-size:17px;font-weight:700}.success .result-symbol{background:var(--soft);color:var(--green)}:root[data-theme=dark] .result-symbol{background:#513928;color:#ffd0a4}.history-item strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}.history-item .meta{font-size:12px;margin-top:5px}.history-time{display:block;margin-top:3px}.result-owner{font-size:11px;color:var(--green);margin-bottom:6px}.pagination{display:flex;justify-content:center;gap:8px;margin-top:24px}.pagination .active{background:var(--green);color:var(--card);border-color:var(--green)}.task-group{border:0;border-top:1px solid var(--border);padding:20px 0;margin:0}.task-group>summary{padding:6px 0 16px;font-weight:650;cursor:pointer;font-size:16px}.task-group:last-child{padding-bottom:0}.task-group .task-card{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:8px 24px;padding:18px 20px;border-radius:14px;box-shadow:none;margin-top:10px;align-items:center;background:var(--input)}.task-group .task-top{grid-column:1/-1}.task-group .departure{font-size:32px;grid-column:1;grid-row:2/4;margin:0}.task-group .task-route{grid-column:2;grid-row:2;margin:0}.task-group .task-rule{grid-column:2;grid-row:3}.task-group .task-bottom{grid-column:3;grid-row:2/4;border:0;margin:0;padding:0}.task-group .migration-note{grid-column:1/-1}.row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}.row:last-child{border:0}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row .actions button{font-size:12px}.narrow-panel{max-width:620px}.migration-panel{background:transparent;border-style:dashed}.migration-panel h2{font-size:17px}
label{display:block;font-size:13px;font-weight:550;margin:18px 0}input,select{display:block;width:100%;min-height:48px;padding:12px 14px;margin-top:9px;border:1px solid var(--border);border-radius:12px;background:var(--input);color:var(--text);font-size:16px;min-width:0}input:focus,select:focus{outline:2px solid var(--green);outline-offset:2px}.check{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:400;line-height:1.5}.check input{width:18px;height:18px;min-height:18px;margin:0;accent-color:#23735b}.pair{display:flex;align-items:center;gap:20px}.pair>label{flex:1;min-width:0}.filter-panel{margin-bottom:22px;border:1px solid var(--border);border-radius:14px;background:var(--input);padding:15px 20px}.filter-panel>summary{font-weight:600;font-size:13px;cursor:pointer}.filter-panel form{display:flex;align-items:flex-end;gap:16px}.filter-panel .pair{flex:1}.filter-panel button{margin-bottom:18px}.filter-panel input,.filter-panel select{background:var(--card)}.wide{width:100%;margin-top:12px}.login-shell{max-width:450px;margin:9vh auto;padding:24px}.login-shell>.brand-lockup{justify-content:center;margin-bottom:32px}.login-shell article{padding:32px;box-shadow:var(--shadow)}.login-shell h1{font-size:25px;margin-top:0}.login-shell .muted{font-size:13px;margin-bottom:26px}
#message:not(:empty),#formMessage:not(:empty){border:1px solid var(--border);border-left:4px solid var(--green);background:var(--soft);border-radius:12px;padding:14px 18px;margin:0 0 20px;font-size:13px;line-height:1.6}#message.error:not(:empty),#formMessage:not(:empty){border-left-color:var(--red);color:var(--red)}dialog{width:min(540px,calc(100% - 32px));max-height:90dvh;border:1px solid var(--border);padding:0;border-radius:24px;background:var(--card);color:var(--text);box-shadow:0 28px 100px #13271e40;overscroll-behavior:contain}dialog::backdrop{background:#14271f66;backdrop-filter:blur(4px)}body:has(dialog[open]){overflow:hidden}#taskEditor{margin:0;border:0;padding:28px;border-radius:0}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.dialog-heading h2{margin:0;font-size:25px}.dialog-heading .eyebrow{font-size:9px}.icon-button{width:44px;padding:0;font-size:26px;border:0;color:var(--muted);background:var(--input)}.dialog-intro{font-size:13px;color:var(--muted);margin:16px 0 24px}#taskForm>details{margin-top:24px;border-top:1px solid var(--border);padding:20px 0 0}#taskForm>details>summary{font-size:13px;font-weight:600;cursor:pointer;min-height:28px}#taskForm>.muted{font-size:11px;margin:22px 0}.form-actions{position:sticky;bottom:-28px;background:var(--card);border-top:1px solid var(--border);padding:16px 0 4px;margin-top:20px;z-index:2}.form-actions .primary{flex:1;min-width:140px}.form-actions button{font-size:13px}.toast-region{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;width:min(420px,calc(100% - 32px));pointer-events:none}.toast{padding:16px 20px;border:1px solid var(--border);border-left:4px solid var(--green);border-radius:14px;background:var(--card);color:var(--text);box-shadow:var(--shadow);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6}.toast.error{border-left-color:var(--red);color:var(--red)}
@media(min-width:761px){#users{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;align-items:start}#users>article:nth-child(2){grid-column:2;grid-row:1/3}#users .pair{display:block}.migration-panel{grid-column:1}.task-card:hover{border-color:#b5cbb6}}
@media(max-width:900px){.app-header,main,footer{padding-left:24px;padding-right:24px}.task-group .task-card{grid-template-columns:95px minmax(0,1fr);gap:8px 18px}.task-group .task-bottom{grid-row:4;grid-column:1/-1;border-top:1px solid var(--border);padding-top:12px;margin-top:10px}.commute-hero{padding:30px}.hero-copy h2{font-size:29px}}
@media(max-width:760px){.app-header{padding:22px 20px 24px;align-items:flex-start;gap:10px}.brand-icon{width:38px;height:38px;border-radius:12px}.brand-icon svg{width:23px;height:23px}.brand{font-size:11px;letter-spacing:1px}.brand-caption{font-size:10px;letter-spacing:0}.brand-lockup{gap:9px}.header-actions{gap:0;justify-content:flex-end;flex-wrap:wrap;max-width:155px}.header-actions button{min-height:34px;font-size:11px;padding:5px 7px}.account-chip{width:100%;justify-content:flex-end;font-size:10px;margin:0 7px 3px}.account-dot{width:5px;height:5px}main{padding:0 20px;min-height:65vh}nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-around;margin:0;padding:9px 12px calc(9px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--border);background:var(--card);box-shadow:0 -6px 24px #203c3005}nav button{flex:1;flex-direction:column;gap:5px;padding:7px 5px;font-size:10px;border-radius:12px;min-height:54px;max-width:130px}nav svg{width:21px;height:21px}nav button.active{background:var(--soft)}footer{padding-bottom:calc(105px + env(safe-area-inset-bottom));padding-top:28px;font-size:10px}.commute-hero{min-height:222px;margin-bottom:28px;border-radius:22px;padding:27px 24px;align-items:flex-start}.hero-copy h2{font-size:27px;margin-bottom:10px}.hero-copy p{font-size:12px;max-width:250px;margin-bottom:22px}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:13px}.hero-copy .primary{min-width:130px}.journey-art{position:absolute;width:165px;right:-30px;bottom:12px;opacity:.9}.hero-copy{max-width:100%}.hero-copy .primary{position:relative;z-index:1}.section-heading{margin-bottom:15px}.section-heading h2{font-size:20px}.count-label{font-size:10px;padding:6px 10px}.task-cards{grid-template-columns:1fr;gap:14px}.task-card{padding:21px;border-radius:18px}.departure{font-size:40px;margin:17px 0 8px}.task-route{font-size:16px}.task-bottom{margin-top:18px;padding-top:13px}.task-bottom button{min-height:44px}.task-secondary>button{padding:8px 12px}.task-rule{font-size:11px}article{border-radius:18px;padding:22px 20px}article>h2{font-size:22px;margin-bottom:20px}.history-item{gap:11px;padding:18px 0}.history-item strong{font-size:13px}.history-item .meta{font-size:11px}.result-symbol{width:31px;height:31px;border-radius:10px}.row{flex-direction:column;align-items:flex-start;gap:12px}.row .actions{width:100%}.row .actions button{flex:1}.pair{gap:12px}.filter-panel{padding:14px}.filter-panel form{display:block}.filter-panel .pair{display:block}.filter-panel button{width:100%;margin:0 0 3px}.task-group>summary{font-size:14px}.task-group .task-card{display:block;padding:17px}.task-group .departure{font-size:34px;margin:18px 0 8px}.task-group .task-route{font-size:15px;margin-bottom:7px}.task-group .task-bottom{display:flex;padding-top:12px;margin-top:16px}.admin-panel{padding:22px 14px}.admin-panel>h2{padding-left:6px}.empty{padding:36px 20px}.login-shell{margin:5vh auto}.login-shell article{padding:28px 24px}.login-shell>.brand-lockup{margin-bottom:28px}dialog{width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}#taskEditor{padding:26px 22px calc(22px + env(safe-area-inset-bottom))}.form-actions{bottom:calc(-22px - env(safe-area-inset-bottom));padding-bottom:calc(12px + env(safe-area-inset-bottom));margin-bottom:calc(-12px - env(safe-area-inset-bottom))}.form-actions button{padding:11px 12px}.toast-region{top:12px;right:16px}.dialog-intro{margin-top:12px}.migration-panel h2{font-size:17px}}
@media(max-width:360px){.app-header,main{padding-left:14px;padding-right:14px}.hero-copy h2{font-size:24px}.journey-art{width:140px;right:-30px}.header-actions{max-width:140px}.commute-hero{padding:24px 20px}.task-card{padding:18px}.brand-caption{font-size:9px}.pair{flex-direction:column;align-items:stretch;gap:0}.pair>label{margin:12px 0}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s,transform .15s}.primary:active{transform:translateY(1px)}dialog[open]{animation:appear .18s ease-out}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}

.filter-toolbar{display:none}.filter-dialog article{margin:0;border:0;padding:28px}.filter-dialog .pair{display:block}.filter-dialog form>button{width:100%;background:#23735b;color:#fff;border-color:#23735b;margin-top:12px}.filter-dialog #filterMessage:not(:empty){font-size:13px;margin-top:16px}.filter-dialog{max-width:440px}@media(max-width:760px){.filter-toolbar{display:flex;justify-content:flex-end;margin:-6px 0 10px}.filter-toolbar button{font-size:12px;color:var(--green);background:var(--soft);border:0}.filter-dialog{max-width:100%}.filter-dialog article{padding:26px 22px calc(22px + env(safe-area-inset-bottom))}}
.thanks-trigger{position:fixed;right:18px;bottom:18px;z-index:19;min-height:36px;padding:7px 13px;border-color:var(--border);background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--green);font-size:11px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}.thanks-dialog{width:min(460px,calc(100% - 32px));overflow:visible}.thanks-dialog article{position:relative;margin:0;border:0;padding:52px 44px 44px;text-align:center;background:linear-gradient(145deg,var(--card),var(--hero));overflow:hidden}.thanks-dialog article:after{content:"";position:absolute;width:170px;height:170px;border:1px solid var(--border);border-radius:50%;right:-70px;bottom:-95px}.thanks-dialog .icon-button{position:absolute;right:18px;top:18px;z-index:1}.thanks-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 22px;border-radius:19px;background:#23735b;color:#f3f8ee;font-size:23px;box-shadow:0 10px 28px #23735b30}.thanks-dialog .eyebrow{color:var(--green);margin-bottom:14px}.thanks-dialog h2{font-size:25px;line-height:1.45;margin:0 auto 14px;max-width:330px}.thanks-dialog p{position:relative;z-index:1;color:var(--muted);font-size:13px;margin:0 auto;max-width:320px}@media(max-width:760px){.thanks-trigger{right:14px;bottom:calc(82px + env(safe-area-inset-bottom))}.thanks-dialog{width:calc(100% - 32px);margin:auto;border-radius:24px;border-bottom:1px solid var(--border)}.thanks-dialog article{padding:48px 28px 38px}.thanks-dialog h2{font-size:22px}}

/* Mobile ride records and the ticket overlay. */

.viewing-tickets{background:#f3f4ed}.viewing-tickets .app-header,.viewing-tickets nav,.viewing-tickets footer,.viewing-tickets .thanks-trigger{display:none}.viewing-tickets main{padding:0;margin:0;max-width:none}.viewing-tickets #message:empty{display:none}
.ticket-page{min-height:100dvh;background:linear-gradient(#abb57f 0,#bbc49b 110px,#f1f2eb 245px);padding:0 8px calc(25px + env(safe-area-inset-bottom));color:#252a26}.ticket-header{height:73px;display:flex;align-items:center;justify-content:space-between;color:white;padding:0 8px}.ticket-header h2{font-size:20px;margin:0;color:white}.ticket-header button{background:none;border:0;color:white;font-size:25px;padding:10px}.ticket-page>p{margin:0;text-align:center}.ride-ticket{position:relative;background:#fff;border-radius:4px;min-height:118px;margin-bottom:12px;padding:17px;display:flex;align-items:flex-start;gap:16px}.ride-badge{width:44px;height:44px;border-radius:5px;background:#c69637;color:#fff1c5;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700}.ride-badge svg{width:21px;height:21px}.ride-description{min-width:0;padding:0 55px 0 0}.ride-description strong{font-size:16px;overflow-wrap:anywhere}.ride-description p{font-size:12px;color:#919794;margin:8px 0}.inactive .ride-description strong{color:#969c98}.ride-status{position:absolute;right:12px;top:17px;font-size:12px;font-weight:700;border-radius:22px;padding:5px 11px;white-space:nowrap}.status-booked{color:#1890ff;background:#eef7ff}.status-expired{color:#ff3d69;background:#ffe9ef}.status-cancelled{color:#999;background:#f0f0f0}.status-used{color:#00ae7b;background:#e2faef}.ride-code{position:absolute;right:12px;bottom:12px;border:0;border-radius:22px;background:#acbd7c;color:white;font-weight:700;padding:6px 10px;font-size:12px}.ticket-paging{display:flex;justify-content:center;align-items:center;gap:20px}
.ticket-dialog{width:calc(100% - 46px);max-width:390px;padding:0;border:0;border-radius:9px;background:white;color:#2c2523;max-height:calc(100dvh - 32px)}.ticket-dialog::backdrop{background:#0005}.ticket-dialog article{margin:0;padding:26px 16px 16px;background:linear-gradient(#eafcfd,white 80px);border:0;border-radius:0;box-shadow:none}.ticket-dialog h2{text-align:center;font-size:16px;margin:0 0 28px;color:#211e1d}.ticket-close{position:absolute;right:6px;top:4px;border:0;background:none;color:#687361;font-size:22px;padding:3px 9px}.ticket-qr-area{width:100%;min-height:126px;display:grid;place-items:center}.ticket-qr-area img{width:126px;height:126px;object-fit:contain;image-rendering:pixelated}.ticket-qr-area p{text-align:center;font-size:14px}.ticket-qr-area [hidden]{display:none}.qr-refresh{display:block;margin:20px auto 16px;border:1px solid #b2c181;border-radius:22px;background:#f5f7ec;color:#83973c;font-size:13px;padding:4px 12px;font-weight:700}.ticket-details p{font-size:12px;margin:10px 0;color:#5a504a}.ticket-details strong{font-size:13px;color:#2c2523;overflow-wrap:anywhere}.ticket-cancel{width:100%;margin-top:5px;min-height:39px;border:1px solid #ff4c70;border-radius:4px;color:#ff4c70;background:white;font-size:14px;font-weight:700}.ticket-dialog .error{font-size:12px}.viewing-tickets #appView{padding:0}.viewing-tickets .ticket-page{max-width:480px;margin:auto}.viewing-tickets main{width:100%}

.ticket-dialog{margin:auto}.ticket-dialog::backdrop{backdrop-filter:none}.ride-code,.qr-refresh{min-height:26px}.ticket-close{min-height:32px}

/* Ticket shortcuts and a crisp, fixed-size back chevron. */
.ticket-fab{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:19;width:calc(100vw / 3);height:auto;min-height:0;aspect-ratio:1000 / 430;padding:0;display:block;border:0;border-radius:0;background:transparent;color:white;box-shadow:none;filter:drop-shadow(0 4px 8px #193d2430)}.ticket-fab:hover{background:transparent;filter:drop-shadow(0 5px 10px #193d2440)}.ticket-fab svg.ticket-art{display:block;width:100%;height:100%}.ticket-shortcut-copy{position:absolute;left:45%;right:12%;top:25%;bottom:25%;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left;line-height:1.2;color:white;pointer-events:none}.ticket-shortcut-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(10px,3.05vw,22px);font-weight:800}.ticket-shortcut-copy #ticketShortcutTime{font-size:clamp(10px,3.4vw,25px);font-variant-numeric:tabular-nums}.ticket-fab.unavailable .ticket-paper{fill:#969c98}.ticket-fab.unavailable .ticket-bus-inset{fill:#969c98}.ticket-fab.unavailable #ticketShortcutTime:empty{display:none}.viewing-tickets .ticket-fab{display:none}.ticket-header button{width:44px;height:44px;min-height:44px;padding:10px;display:grid;place-items:center;flex:0 0 44px}.ticket-header button svg{display:block;width:24px;height:24px;flex:none}
.ticket-dialog{width:calc(100% - 32px);max-width:390px}.ticket-dialog article{padding:22px 16px 16px}.ticket-dialog h2{margin-bottom:16px}.ticket-qr-area{min-height:0;display:flex;justify-content:center;align-items:center}.ticket-qr-area img{width:min(100%,260px,calc(100dvh - 330px));height:auto;aspect-ratio:1;flex:none}.ticket-qr-area p:empty{display:none}.qr-refresh{margin:14px auto}.ticket-details p{margin:8px 0}.ticket-header h2{letter-spacing:0}
@media(max-width:760px){.ticket-fab{right:14px}.header-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:0}.header-actions button{padding:6px 7px}}
@media(max-height:580px){.ticket-dialog article{padding-top:18px}.ticket-dialog h2{margin-bottom:10px}.qr-refresh{margin:10px auto}.ticket-details p{margin:5px 0}}
.qr-refresh:hover{background:#edf2df;color:#718332}.ticket-cancel:hover{background:#fff2f5;color:#ff4c70}

.ticket-shortcut-shell{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:19;width:calc(100vw / 3);aspect-ratio:1000 / 430}.ticket-shortcut-shell .ticket-fab{position:relative;right:auto;bottom:auto;width:100%;height:100%}.viewing-tickets .ticket-shortcut-shell{display:none}.ticket-shortcut-refresh{position:absolute;right:4%;top:4%;display:grid;place-items:center;width:22px;height:22px;min-height:0;padding:4px;border:0;border-radius:50%;color:white;background:#0002;z-index:1}.ticket-shortcut-refresh:hover{background:#0004}.ticket-shortcut-refresh svg{width:14px;height:14px;display:block}.ticket-shortcut-refresh:disabled{opacity:.5}.ticket-shortcut-copy{right:20%}@media(max-width:760px){.ticket-shortcut-shell{right:14px}}
.ticket-shortcut-refresh{left:3%;right:auto;top:4%;width:18px;height:18px;padding:3px}.ticket-shortcut-refresh svg{width:12px;height:12px}.ticket-shortcut-copy{right:12%}
/* Keep the manual refresh control outside the ticket, at its upper right. */
.ticket-shortcut-refresh{left:auto;right:-5%;top:auto;bottom:105%;width:calc(100% / 3);height:auto;aspect-ratio:1;padding:8%;border-radius:50%;background:#518a42;box-shadow:0 3px 10px #193d2430}.ticket-shortcut-refresh:hover{background:#3e7332}.ticket-shortcut-refresh svg{width:100%;height:100%}.ticket-shortcut-shell:has(.ticket-fab.unavailable) .ticket-shortcut-refresh{background:#969c98}

.ticket-shortcut-refresh:disabled svg{animation:ticket-refresh-spin .8s linear infinite;transform-origin:center}@keyframes ticket-refresh-spin{to{transform:rotate(360deg)}}

.ticket-shortcut-copy{right:11%}.ticket-shortcut-copy #ticketShortcutRoute{font-size:clamp(9px,2.7vw,20px);letter-spacing:0}

/* Cover startup routing until the final page and initial QR request settle. */
.page-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:var(--bg,#f6f7f2);color:var(--green,#23735b)}body.page-loading{overflow:hidden}body.page-loading>#loginView,body.page-loading>#appView,body.page-loading>#toastRegion,body.page-loading dialog{visibility:hidden}body.page-loading dialog::backdrop{background:transparent;backdrop-filter:none}
.loader{width:60px;display:flex;align-items:flex-start;aspect-ratio:1}.loader:before,.loader:after{content:"";flex:1;aspect-ratio:1;--g:conic-gradient(from -90deg at 10px 10px,currentColor 90deg,#0000 0);background:var(--g),var(--g),var(--g);filter:drop-shadow(30px 30px 0 currentColor);animation:l20 1s infinite}.loader:after{transform:scaleX(-1)}@keyframes l20{0%{background-position:0 0,10px 10px,20px 20px}33%{background-position:10px 10px}66%{background-position:0 20px,10px 10px,20px 0}100%{background-position:0 0,10px 10px,20px 20px}}
@media(prefers-reduced-motion:reduce){.loader:before,.loader:after{animation:none}}

/* Second confirmation for cancelling a ride ticket. */
.cancel-ticket-dialog{width:min(348px,calc(100% - 56px));max-width:348px;margin:auto;padding:0;border:0;border-radius:12px;background:#fff;color:#2c2523;box-shadow:0 24px 80px #0000004d}
.cancel-ticket-dialog::backdrop{background:#0006;backdrop-filter:none}
.cancel-ticket-dialog article{margin:0;padding:28px 20px 20px;border:0;border-radius:0;background:#fff;box-shadow:none;text-align:center}
.cancel-ticket-dialog h2{font-size:18px;font-weight:700;line-height:1.5;letter-spacing:0;margin:0 0 18px;color:#211e1d}
.cancel-ticket-hint{margin:0 0 24px;color:#8c8c8c;font-size:14px;line-height:1.7}
.cancel-ticket-hint span{display:block}
.cancel-ticket-actions{display:flex;gap:12px}
.cancel-ticket-actions button{flex:1;min-height:48px;padding:0 10px;border:0;border-radius:6px;font-size:16px;font-weight:700}
.cancel-ticket-keep{background:#f4f4f4;color:#696969}
.cancel-ticket-keep:hover{background:#ececec}
.cancel-ticket-confirm{background:#f43f5e;color:#fff}
.cancel-ticket-confirm:hover{background:#dc3451}
@media(max-width:760px){.cancel-ticket-dialog{width:calc(100% - 56px);max-width:348px;margin:auto;border:0;border-radius:12px}}

.ticket-dialog button:focus-visible,.cancel-ticket-dialog button:focus-visible{outline:2px solid transparent;outline-offset:2px}