/* Transport Kaki static pages (/mrt /bus /stop). Loaded AFTER app.css. Tokens + rules: ../DESIGN.md.
   Rule zero: nothing flush, 8px grid, nothing under 13px. app.css locks the SPA body (overflow hidden), undone here. */
html,body{height:auto}
body.pg{overflow:visible;min-height:100dvh;background:var(--page)}
.pg h1,.pg h2,.pg h3,.pg h4,.pg p,.pg ol,.pg ul,.pg dl{margin-block:0}
.pg ol,.pg ul{padding-inline-start:0;list-style:none}
.pg-in{max-width:760px;margin-inline:auto;padding-inline:var(--edge)}
.pg-top{background:var(--card);border-bottom:1px solid var(--hair)}
.pg-top .pg-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding-block:8px}
.pg-brand{font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--berry-hover);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.pg-open{min-height:44px;padding-inline:16px;font-size:15px}
.pg-main{padding-block:8px 40px}
.crumbs{padding-block:8px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 8px;font-size:13px;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center;min-height:32px}
.crumbs li+li::before{content:"\203A";padding-inline-end:8px;color:var(--handle)}
.crumbs a{color:var(--berry-hover);text-decoration:none;padding-block:8px}
.crumbs a:hover{text-decoration:underline}
.pg .board{margin-top:16px}
.pg .board .title{padding-top:8px;font-size:32px}
.pg .board .then{padding-top:8px;font-size:17px;font-weight:300}
.pg .board .meta{padding-top:16px}
.pg .board .eyebrow{color:#fff;opacity:.85}
.pg .pin-sta{display:inline-block;position:static;transform:none;box-shadow:none;border-color:transparent;vertical-align:middle}
.pg .board .badges{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.pg .board .badges .pin-sta{background:#fff;color:var(--berry-hover)}
.cta{padding-top:16px}
.pg h2.sec{padding-block:40px 8px}
.pg h3.sec2{font-size:17px;font-weight:700;padding-block:24px 8px}
.pg h3.sec2 .pin-sta{margin-inline-end:8px}
.pg h4{font-size:15px;font-weight:700;padding-block:8px}
.pg .list{padding-top:8px}
.pg .list>li>.item,.pg .list>li>.stopcard{border-top:1px solid var(--hair)}
.pg .item{color:var(--ink)}
a.item:hover{background:var(--surface)}
.item.cur{background:var(--berry-tint);padding-inline:8px;border-radius:14px}
.pg .list>li>.item{padding-inline:8px}
.pg .item .t small{padding-top:2px}
.pg .note,.pg .notice{margin-top:16px}
.pg .sub{padding-top:8px}
.pg details{margin-top:16px}
.pg summary{font-size:16px;min-height:56px}
.pg summary:hover{color:var(--berry-hover)}
.pg .bullet.sm{min-width:48px;height:32px;font-size:16px;border-radius:8px}
.pg .kv span{color:var(--muted)}

/* train times */
.tcard{padding-top:8px}
.tcard h4{padding-top:16px}
.tt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px;background:var(--card);border:1px solid var(--hair);border-radius:14px;overflow:hidden}
.tt th,.tt td{text-align:left;padding:8px 16px;border-top:1px solid var(--hair);vertical-align:top;line-height:1.4}
.tt thead th{border-top:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.tt tbody th{font-weight:400;color:var(--muted)}
.tt td{font-weight:700}
.tt small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.tnote{display:block;padding-top:8px;font-size:13px;color:var(--muted)}

/* crowd */
.crowd{background:var(--card);border:1px solid var(--hair);border-radius:22px;padding:24px;margin-top:16px}
.cr-h{display:flex;align-items:center;gap:16px}
.cr-l{font-weight:700}
.cr-now{padding-top:16px}
.cr-now b{display:block;font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.5px}
.cr-now small{display:block;padding-top:8px;font-size:13px;color:var(--muted)}
.meter{display:inline-flex;gap:8px;padding-top:8px}
.meter i{display:block;width:32px;height:8px;border-radius:999px;background:var(--surface)}
[data-level=l] .meter i:nth-child(1),[data-level=m] .meter i:nth-child(-n+2),[data-level=h] .meter i{background:var(--ink)}
.cr-fc{padding-top:8px}
.fc-bars{display:flex;align-items:flex-end;gap:2px;height:48px;padding-top:8px}
.fc-c{display:block;flex:1;min-width:0;border-radius:2px;background:var(--surface);height:8px}
.fc-c[data-l=l]{background:var(--handle);height:16px}
.fc-c[data-l=m]{background:var(--muted);height:32px}
.fc-c[data-l=h]{background:var(--ink);height:48px}
.fc-c.now{outline:2px solid var(--berry);outline-offset:2px}
.fc-ax{display:flex;justify-content:space-between;padding-top:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* nearby bus stops on MRT pages */
.stopcard{padding:16px 8px}
.sc-h b{display:block;font-weight:700;line-height:1.3}
.sc-h b a{text-decoration:none}
.sc-h small{display:block;font-size:13px;color:var(--muted);line-height:1.4;padding-top:2px}
.svs{display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:16px}
.sv{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}
.sv-row{align-items:center}

/* live arrivals */
.arrivals{padding-top:8px}
.arow{display:flex;align-items:center;gap:16px;min-height:72px;padding-block:16px;border-top:1px solid var(--hair)}
.arow .am{flex:none;min-width:80px;font-variant-numeric:tabular-nums}
.arow .am b{font-size:48px;line-height:1;font-weight:700;letter-spacing:-1.5px}
.arow .am span{font-size:16px;font-weight:300}
.arow .al{flex:1;min-width:0;text-align:right;font-size:16px;font-weight:300;font-variant-numeric:tabular-nums}
.arow .al small{display:block;font-size:13px;color:var(--muted);font-weight:400;padding-top:2px}

/* heat strip (bus pages) */
.hsel{display:flex;align-items:center;gap:16px;padding-top:16px}
.hsel label{font-weight:700}
.hsel select{flex:1;min-width:0;min-height:48px;padding-inline:16px;border-radius:14px;border:1px solid var(--hair);background:var(--card);font:inherit;color:var(--ink)}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:8px 16px;align-items:center;min-height:56px;padding:8px;border-top:1px solid var(--hair)}
.hn b{display:block;font-weight:700;line-height:1.3}
.hn small{display:block;font-size:13px;color:var(--muted)}
.hl-l{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.hl-l>span:first-child{flex:none;width:24px}
.hl-l .bar{flex:1;min-width:0}
.hl-l .n-in,.hl-l .n-out{flex:none;min-width:56px;text-align:right;color:var(--ink);font-weight:700}
.hl-l .b-out i{background:var(--muted)}
.hl-l+.hl-l{padding-top:4px}
.bar i{transition:width 220ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}

/* hourly profile (stop pages) */
.prof{display:flex;align-items:flex-end;gap:2px;height:112px;padding:8px;background:var(--card);border:1px solid var(--hair);border-radius:14px}
.pc{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;gap:1px}
.pc>i{display:block;flex:1;min-width:0;min-height:1px;border-radius:2px 2px 0 0;background:var(--ink)}
.pc>i.o{background:transparent;border:1px solid var(--ink);border-bottom:0}
.prof-ax{display:flex;justify-content:space-between;padding:8px 8px 0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* footer */
.pg-foot{background:var(--surface);padding-block:32px 40px;font-size:13px;line-height:1.5;color:var(--muted)}
.pg-foot p+p{padding-top:16px}
.pg-foot a{color:var(--berry-hover)}
.pg-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.pg-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

@media (min-width:900px){
  :root{--edge:32px}
  .pg .board .title{font-size:40px}
  .tcard{display:block}
}