/* TrainEkhonKoi web. Tokens and shapes are the canvas's (design/README.txt). Light is the theme. */
/* The three brand fonts, served from here: no request leaves for a font, and the page works offline. OFL 1.1, licences in fonts/. */
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Anek Bangla';font-weight:400;font-display:swap;src:url(fonts/anek-bangla-bengali-400-normal.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:'Anek Bangla';font-weight:500;font-display:swap;src:url(fonts/anek-bangla-bengali-500-normal.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:'Anek Bangla';font-weight:600;font-display:swap;src:url(fonts/anek-bangla-bengali-600-normal.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:'Anek Bangla';font-weight:700;font-display:swap;src:url(fonts/anek-bangla-bengali-700-normal.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}
:root{--navy:#0C1A3D;--navy2:#15234F;--ink:#121725;--mut:#5A6475;--line:#e2e5ec;--bg:#f3f5f9;--soft:#eef0f5;
--live:#16a34a;--liveBg:#dcfce7;--liveInk:#14532d;--liveLine:#bbf7d0;--age:#65a30d;
--late:#D08700;--lateBg:#FDF3E0;--lateInk:#92520A;--lateLine:#F3DCAE;
--unc:#2563eb;--uncBg:#dbeafe;--uncInk:#1e3a8a;--uncLine:#bfdbfe;--tt:#a8aebd;--red:#dc2626}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#dfe3ec;color:var(--ink);font-family:'Plus Jakarta Sans','Anek Bangla',system-ui,sans-serif;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--navy);text-decoration:none}
.mono{font-family:'IBM Plex Mono','Anek Bangla',ui-monospace,monospace}
.noscript{padding:24px;text-align:center}
.app{max-width:480px;min-height:100%;margin:0 auto;background:var(--bg);display:flex;flex-direction:column;position:relative}
.view{flex:1;display:flex;flex-direction:column;padding-bottom:84px}
.view.deep{padding-bottom:18px}

/* navy head */
.head{background:linear-gradient(135deg,var(--navy2),var(--navy) 55%,#091533);border-radius:0 0 28px 28px;padding:14px 16px 18px;display:flex;flex-direction:column;gap:13px;color:#fff}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:36px;height:36px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.brand-name{font-size:17px;font-weight:800}
.brand-sub{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#93A6D6}
.brand-sub i{width:6px;height:6px;border-radius:50%;background:#4ade80}
.hbtn{min-height:38px;min-width:38px;padding:0 11px;border-radius:11px;border:1px solid #2B3C70;background:rgba(255,255,255,.08);font-weight:700;font-size:12px;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px}
.search{display:flex;align-items:center;gap:10px;height:48px;border-radius:13px;padding:0 14px;background:#fff}
.search input{flex:1;min-width:0;border:0;outline:0;font:500 15px 'Plus Jakarta Sans','Anek Bangla',sans-serif;color:var(--ink);background:transparent}
.count{font-size:11.5px;font-weight:600;color:var(--mut);background:var(--soft);border-radius:7px;padding:4px 8px}
.head h1{margin:0;font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px}
.head .eyebrow{font-size:11px;font-weight:600;color:#93A6D6;display:flex;align-items:center;gap:6px}
.head .eyebrow i{width:6px;height:6px;border-radius:50%;background:#4ade80}
.head-title{display:flex;flex-direction:column;min-width:0;flex:1}
.head-title b{font-size:17px;font-weight:800}
.head-title span{font-size:11.5px;color:#93A6D6}

.body{padding:14px 16px 0;display:flex;flex-direction:column;gap:10px}
.sec{display:flex;align-items:center;justify-content:space-between;padding-top:2px}
.sec b{font-size:14.5px;font-weight:700}
.sec a,.sec span{font-size:13px;font-weight:600}
.sec .when{font-size:11.5px;color:var(--mut);font-weight:500}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px;display:flex;flex-direction:column;gap:12px}
a.card{color:inherit}

/* state pill: one shape, six looks */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:8px;padding:4px 9px;flex:none;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;flex:none}
.s-live{color:var(--liveInk);background:var(--liveBg)} .s-live i{background:var(--live)}
.s-ageing{color:var(--liveInk);background:var(--liveBg)} .s-ageing i{background:var(--age)}
.s-unconfirmed{color:var(--uncInk);background:var(--uncBg)} .s-unconfirmed i{width:9px;height:9px;background:#fff;border:2px solid var(--unc)}
.s-estimated{color:var(--lateInk);background:var(--lateBg)} .s-estimated i{background:var(--late)}
.s-timetable,.s-no_data{color:var(--mut);background:var(--soft)} .s-timetable i,.s-no_data i{background:#fff;border:2px solid var(--tt);width:9px;height:9px}

/* train card */
.t-top{display:flex;align-items:center;gap:9px}
.t-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.t-name b{font-size:16.5px;font-weight:700}
.t-name span{font-size:11.5px;color:var(--mut);white-space:nowrap}
.t-run{display:flex;align-items:flex-end;gap:11px}
.t-end{display:flex;flex-direction:column;flex:none}
.t-end.r{align-items:flex-end}
.t-end b{font-size:18px;font-weight:600;line-height:1.1}
.t-end span{font-size:11px;color:var(--mut)}
.bar{flex:1;position:relative;height:34px}
.bar .rail{position:absolute;left:0;right:0;top:22px;height:4px;border-radius:2px;background:var(--line)}
.bar .done{position:absolute;left:0;top:22px;height:4px;border-radius:2px;background:var(--navy)}
.bar .knob{position:absolute;top:15px;width:17px;height:17px;margin-left:-8.5px;border-radius:50%;background:var(--navy);border:3px solid #fff;outline:2px solid #C3CDE4}
.bar .pct{position:absolute;top:-3px;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:var(--navy);background:#E8ECF7;border-radius:6px;padding:1px 6px}
.bar.late .done,.bar.late .knob{background:var(--late)} .bar.late .knob{outline-color:var(--lateLine)} .bar.late .pct{color:var(--lateInk);background:var(--lateBg)}
.bar.unc .done,.bar.unc .knob{background:var(--unc)} .bar.unc .knob{background:#fff;border-color:var(--unc);outline-color:var(--uncLine)} .bar.unc .pct{color:var(--uncInk);background:var(--uncBg)}
.bar.tt .done{background:var(--tt)} .bar.tt .knob{background:#fff;border-color:var(--tt);outline-color:var(--soft)} .bar.tt .pct{color:var(--mut);background:var(--soft)}
.t-foot{display:flex;align-items:center;gap:7px;border-top:1px solid var(--soft);padding-top:9px;font-size:12.5px}
.t-foot .grow{flex:1}
.t-foot .side{font-size:11px;font-weight:600;color:var(--mut);white-space:nowrap}
.latechip{font-size:11.5px;font-weight:700;color:var(--lateInk);background:var(--lateBg);border-radius:8px;padding:4px 9px;white-space:nowrap}

/* the "how sure" block */
.sure{border-radius:18px;padding:13px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sure.live,.sure.ageing{border-color:var(--liveLine)} .sure.unconfirmed{border-color:var(--uncLine)} .sure.estimated{border-color:var(--lateLine)}
.sure .age{flex:1;font-size:11px;color:var(--mut)}
.sure .big{font-size:19px;font-weight:700}
.sure .why{font-size:11.5px;color:var(--mut)}
.band{position:relative;height:22px}
.band .rail{position:absolute;left:4px;right:4px;top:13px;height:4px;border-radius:2px;background:var(--line)}
.band .zone{position:absolute;top:9px;height:12px;border-radius:6px;opacity:.25}
.band .dot{position:absolute;top:8px;width:14px;height:14px;margin-left:-7px;border-radius:50%}
.band .a{position:absolute;left:0;top:10px;width:10px;height:10px;border-radius:50%;background:var(--navy)}
.band .z{position:absolute;right:0;top:11px;width:8px;height:8px;border-radius:2px;background:var(--tt)}
.sure-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--soft);padding-top:10px;font-size:12.5px;font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.box{border-radius:13px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;background:var(--soft)}
.box.amber{background:var(--lateBg)}
.box small{font-size:11px;color:var(--mut)} .box.amber small{color:var(--lateInk)}
.box b{font-size:15.5px;font-weight:700} .box span{font-size:11.5px;color:var(--mut)}
.note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink)}
.rowlink{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 13px;font-size:14px;font-weight:700;color:var(--ink)}
.rowlink .grow{flex:1}

/* route */
.stops{background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px 13px}
.stop{display:grid;grid-template-columns:54px 22px 1fr;align-items:center;gap:8px;padding:9px 0;position:relative;color:inherit}
.stop .tm{display:flex;flex-direction:column;line-height:1.15}
.stop .tm s{font-size:10.5px;color:var(--tt)} .stop .tm b{font-size:14px;font-weight:600}
.stop .tm b.l{color:var(--lateInk)}
.stop .pin{justify-self:center;width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid var(--tt);position:relative;z-index:1}
.stop.past .pin{background:var(--navy);border-color:var(--navy)}
.stop.here .pin{border-color:var(--late);width:15px;height:15px}
.stop::before{content:"";position:absolute;left:72px;top:0;bottom:0;width:3px;background:var(--line)}
.stop.past::before{background:var(--navy)}
.stop:first-child::before{top:50%} .stop:last-child::before{bottom:50%}
.stop .st{display:flex;flex-direction:column;min-width:0}
.stop .st b{font-size:15px;font-weight:700} .stop .st span{font-size:11px;color:var(--mut)}
.stop.here{background:var(--lateBg);margin:0 -13px;padding:9px 13px} .stop.here::before{left:85px}
.herechip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#fff;background:var(--late);border-radius:6px;padding:2px 7px;align-self:flex-start;margin-top:2px}

/* board */
.brow{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--soft);color:inherit}
.brow:first-child{border-top:0}
.brow .tm{display:flex;flex-direction:column;line-height:1.15} .brow .tm b{font-size:17px;font-weight:600} .brow .tm s{font-size:10.5px;color:var(--tt)}
.brow .tm b.l{color:var(--lateInk)}
.brow .nm{display:flex;flex-direction:column;gap:1px;min-width:0}
.brow .nm b{font-size:15px;font-weight:700} .brow .nm span{font-size:11px;color:var(--mut)}
.brow .nm em{font-style:normal;font-size:11px;font-weight:700}
.brow .nm em.g{color:var(--liveInk)} .brow .nm em.a{color:var(--lateInk)} .brow .nm em.b{color:var(--uncInk)}
.brow.gone{opacity:.55}
.pf{display:flex;flex-direction:column;align-items:flex-end} .pf small{font-size:10px;color:var(--mut);font-weight:600} .pf b{font-size:20px;font-weight:600;line-height:1}
.hint{display:flex;align-items:center;gap:9px;background:#E8ECF7;border-radius:13px;padding:10px 12px;font-size:12px;color:var(--navy);font-weight:600}
.pick{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 13px}
.pick a{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--soft);color:inherit;font-size:14.5px;font-weight:700}
.pick a:first-child{border-top:0} .pick a span{flex:1} .pick a small{font-size:11px;color:var(--mut);font-weight:500}

/* drawn empty states: full page, never a bare line */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 28px;text-align:center}
.empty b{font-size:17px;font-weight:800} .empty span{font-size:13px;color:var(--mut);max-width:280px}
.btn{min-height:44px;padding:0 18px;border:0;border-radius:13px;background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:8px}
.skel{height:118px;border-radius:18px;background:linear-gradient(90deg,#e9ecf2 25%,#f4f6fa 37%,#e9ecf2 63%);background-size:400% 100%;animation:sk 1.2s ease infinite}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* bottom bar */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:flex-end;padding:7px 6px calc(11px + env(safe-area-inset-bottom))}
.nav a{flex:1;min-height:50px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:500;color:var(--mut)}
.nav a span{width:36px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.nav a.on{font-weight:700;color:var(--navy)} .nav a.on span{background:#E8ECF7}
.nav a.mid{justify-content:flex-end} .nav a.mid span{width:50px;height:50px;border-radius:17px;background:var(--navy);margin-top:-16px}
@media (min-width:481px){.app{box-shadow:0 0 0 1px #cfd5e2}}

/* ---- step 7b: the live map -------------------------------------------------------------------- */
.map-view{padding-bottom:0}
.map-view .head.thin{border-radius:0 0 20px 20px;padding-bottom:13px}
.mwrap{position:relative;flex:1 1 46vh;min-height:46vh;margin:-14px 0 0;background:#eef1f6;overflow:hidden}
.map{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.map:active{cursor:grabbing}
.mzoom{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;background:#fff;border-radius:13px;overflow:hidden;border:1px solid var(--line)}
.mzoom button{width:42px;height:42px;border:0;background:#fff;font-size:21px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center}
.mzoom button+button{border-top:1px solid var(--line)}
.mpill{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;align-items:center;gap:8px;border:0;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;border-radius:13px;padding:10px 15px}
.mpill.still{background:#1B2B55}
.mcredit{position:absolute;left:10px;top:10px;font-size:9.5px;color:#5A6475;background:rgba(255,255,255,.75);border-radius:5px;padding:2px 6px}
.map-view:not(.deep) .mcard{padding-bottom:96px}
.mcard{padding:12px 16px 0;display:flex;flex-direction:column;gap:10px}
.mrow{display:flex;gap:10px}
.mrow .btn{flex:1;justify-content:center}
.mstrip{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.green{background:var(--live)}
.btn.red{background:var(--red)}
.btn.wide{width:100%;justify-content:center;min-height:50px;font-size:15px}

/* ---- step 7b: sheets ---------------------------------------------------------------------------- */
html.nosc,html.nosc body{overflow:hidden}
.sheetback{position:fixed;inset:0;background:rgba(10,16,32,.42);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.sheet{width:100%;max-width:480px;background:#fff;border-radius:24px 24px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:11px;max-height:92vh;overflow:auto}
.sheet .grab{width:42px;height:4px;border-radius:3px;background:#d7dbe4;align-self:center}
.sheet h2{margin:0;font-size:19px;font-weight:800}
.sheet h3{margin:0;font-size:16px;font-weight:800}
.sheet p{margin:0;font-size:13px;color:var(--mut);line-height:1.45}
.lst{display:flex;flex-direction:column;gap:11px}
.li{display:flex;gap:10px;align-items:flex-start}
.li .ic{width:30px;height:30px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.li b{font-size:13.5px;font-weight:700;display:block}
.li small{font-size:11.5px;color:var(--mut);line-height:1.4;display:block;margin-top:1px}
.btns{display:flex;gap:10px;margin-top:3px}
.btns .ghost{flex:none;width:112px;justify-content:center;min-height:50px}
.warn{display:flex;gap:8px;align-items:center;background:var(--lateBg);border:1px solid var(--lateLine);color:var(--lateInk);border-radius:12px;padding:9px 11px;font-size:11.5px;font-weight:600;line-height:1.35}
.okline{display:flex;gap:8px;align-items:center;background:var(--liveBg);border:1px solid var(--liveLine);color:#166534;border-radius:12px;padding:10px 11px;font-size:13px;font-weight:700}
.pickrow{display:flex;align-items:center;gap:9px;width:100%;background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 13px;font-size:13px;color:var(--mut)}
.pickrow .grow{flex:1;text-align:left}
.pickrow b{font-size:13.5px;color:var(--ink)}
.picklist{display:flex;flex-direction:column;overflow:auto;max-height:54vh}
.pick-a{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:0;border-bottom:1px solid var(--soft);padding:13px 2px;font-size:14.5px;font-weight:700;text-align:left}
.pick-a span{flex:1}
.pick-a small{color:var(--mut);font-weight:500;font-size:12px}
.midmark{width:58px;height:58px;border-radius:19px;background:var(--soft);display:flex;align-items:center;justify-content:center;align-self:center;margin-top:6px}
.midmark.ok{background:var(--live)} .midmark.bad{background:#fee2e2}
.sheet .shead{display:flex;flex-direction:column;gap:2px}
.sheet .shead small{font-size:12px;color:var(--mut)}
.choices{display:flex;flex-direction:column;gap:9px}
.choice{display:flex;align-items:center;gap:11px;width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px;text-align:left;color:inherit}
.choice .ic{width:38px;height:38px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center}
.choice b{font-size:14.5px;font-weight:700;display:block} .choice small{font-size:11.5px;color:var(--mut)}
.pfwrap{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--soft);padding-top:11px}
.pfwrap small{font-size:12px;font-weight:700;color:var(--mut)}
.pfrow{display:flex;gap:7px;flex-wrap:wrap}
.pfb{min-width:46px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--soft);font-size:15px;font-weight:700}
.pfb.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pfb.none{flex:1;border-style:dashed;background:#fff;font-size:12.5px;font-weight:600;color:var(--mut)}
.pfb.none.on{background:var(--navy);color:#fff;border-style:solid}
.privacy{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut)}
.okbox{display:flex;align-items:center;gap:10px;background:var(--liveBg);border:1px solid var(--liveLine);border-radius:14px;padding:11px 12px}
.okbox b{font-size:14px;font-weight:700;display:block;color:#166534} .okbox small{font-size:11.5px;color:#166534}
.ambox{background:var(--lateBg);border:1px solid var(--lateLine);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.ambox b{color:var(--lateInk)} .ambox small{color:var(--lateInk)}
.prog{display:block;height:7px;border-radius:4px;background:#F3DCAE;overflow:hidden}
.prog i{display:block;height:100%;background:var(--late)}
.rowlink.green{background:var(--liveBg);border-color:var(--liveLine)}
.rowlink.green b{display:block;font-size:14px;color:#14532d} .rowlink.green small{font-size:11.5px;color:#166534}

/* ---- step 7b: sharing is running ------------------------------------------------------------------ */
.sending{background:var(--navy);color:#fff;border-radius:18px;padding:13px;display:flex;flex-direction:column;gap:10px}
.sending .sq{width:46px;height:46px;border-radius:14px;background:var(--live);display:flex;align-items:center;justify-content:center;flex:none}
.sending.stale .sq{background:var(--late)}
.sending .grow{flex:1;display:flex;flex-direction:column}
.sending small{font-size:11.5px;color:#93A6D6;font-weight:600}
.sending b{font-size:19px;font-weight:800}
.sending .line{display:block;height:7px;border-radius:4px;background:#1B2B55;overflow:hidden}
.sending .line i{display:block;height:100%;background:var(--live);transition:width .4s linear}
.sending.stale .line i{background:var(--late)}
.sending .age{font-size:11.5px;color:#93A6D6}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.three .box{background:#fff;border:1px solid var(--line)}
.three b{font-size:20px} .three b.ok{color:var(--live)} .three b.amb{color:var(--lateInk)}
.acts{display:flex;flex-direction:column}
.act{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--soft);font-size:13px}
.act:first-child{border-top:0}
.act .dotm{width:10px;height:10px;border-radius:50%;flex:none;background:var(--tt)}
.act.ok .dotm{background:var(--live)} .act.wait .dotm{background:var(--late)} .act.bad .dotm{background:var(--red)} .act.start .dotm{background:var(--navy)}
.act .grow{flex:1}
.act small{color:var(--mut);font-size:11px}
.nav a.mid.live span{background:var(--live)}

/* the train picker rows of the share screen */
.pick a span.col{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.pick a span.col b{font-size:15px;font-weight:700}
.pick a span.col small{font-size:11.5px;color:var(--mut);font-weight:500}
.pick a .pill{flex:none}
.riders{display:flex;align-items:center;gap:9px;background:#E8ECF7;border-radius:13px;padding:11px 12px;font-size:13px;font-weight:700;color:var(--navy)}
.pick-a .tm{flex:none;width:52px;font-size:14px}