@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{--ink:#142127;--deep:#111d22;--muted:#68787d;--line:#dfe6e5;--pale:#f3f6f3;--paper:#fbfcf9;--lime:#c7f36b;--teal:#1f6962;--orange:#dd7141;--font:'DM Sans','Noto Sans TC',sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}.page-shell{width:min(1260px,calc(100% - 72px));margin:0 auto}.masthead{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand-mark{display:flex;align-items:flex-end;gap:3px;height:21px}.brand-mark i{display:block;width:4px;border-radius:3px 3px 1px 1px;background:var(--teal)}.brand-mark i:nth-child(1){height:11px}.brand-mark i:nth-child(2){height:18px}.brand-mark i:nth-child(3){height:14px}.brand-name{font:700 16px var(--mono);letter-spacing:.04em}.brand-name span{color:var(--teal)}.mast-meta{display:flex;align-items:center;gap:9px;font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.09em;color:#53656a}.pulse,.live-indicator,.footer-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3a9e76}.pulse{box-shadow:0 0 0 4px rgba(58,158,118,.12);animation:pulse 2.1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(58,158,118,0)}}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:64px 0 38px}.eyebrow,.section-kicker{margin:0 0 13px;color:var(--teal);font:500 11px var(--mono);letter-spacing:.11em;text-transform:uppercase}.eyebrow-divider{padding:0 10px;color:#9ba9a7}.intro h1{margin:0;font-size:clamp(42px,6vw,72px);font-weight:700;letter-spacing:-.075em;line-height:1.04}.title-period{color:var(--teal)}.subtitle{margin:15px 0 0;color:var(--muted);font-size:14px;letter-spacing:.01em}.clock-card{display:flex;flex-direction:column;align-items:flex-end;padding:0 0 2px}.clock-label{font:500 9px var(--mono);color:#8b9798;letter-spacing:.13em;text-transform:uppercase}.clock-card time{margin-top:4px;font:500 28px var(--mono);letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums}.clock-date{font-size:11px;color:var(--muted);margin-top:2px}.overview{display:flex;align-items:center;min-height:66px;padding:0 19px;background:var(--deep);color:#edf4ef;border-radius:7px 7px 0 0;gap:25px}.overview-count,.overview-stops{display:flex;align-items:baseline;gap:7px;white-space:nowrap}.overview-count strong,.overview-stops strong{font:500 19px var(--mono);color:var(--lime);font-variant-numeric:tabular-nums}.overview-count span,.overview-stops span{font-size:11px;color:#a8b9b7}.overview-stops{padding-left:24px;border-left:1px solid rgba(255,255,255,.16)}.overview-note{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:#c1ceca}.live-indicator{width:6px;height:6px;background:var(--lime)}.update-meta{font:400 10px var(--mono);color:#81918e;white-space:nowrap}.board{border:1px solid var(--line);border-top:0;background:white;border-radius:0 0 8px 8px;overflow:hidden;box-shadow:0 12px 35px rgba(18,38,42,.035)}.board-heading{display:flex;justify-content:space-between;align-items:flex-end;padding:28px 24px 19px}.board-heading .section-kicker{margin-bottom:6px;font-size:9px;color:#899794}.board-heading h2,.station-heading h2{margin:0;font-size:23px;letter-spacing:-.05em}.controls{display:flex;gap:8px}.search-box{display:flex;align-items:center;gap:8px;width:263px;height:37px;padding:0 10px;border:1px solid var(--line);border-radius:5px;color:#839091}.search-icon{font-size:20px;line-height:1}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:400 11px var(--font)}.search-box input::placeholder{color:#9aa6a5}.search-box kbd{font:10px var(--mono);border:1px solid #e2e7e4;border-radius:3px;padding:1px 5px;color:#99a3a1}.refresh-button{height:37px;display:flex;align-items:center;gap:7px;padding:0 12px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font:500 11px var(--font);cursor:pointer;transition:.15s}.refresh-button:hover{background:var(--pale);border-color:#cbd6d2}.refresh-button:disabled{opacity:.65;cursor:wait}.refresh-icon{font-size:18px;line-height:1;color:var(--teal)}.refresh-button.loading .refresh-icon{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.filters{height:47px;display:flex;align-items:center;padding:0 23px;gap:7px;border-top:1px solid #edf0ee;border-bottom:1px solid var(--line);background:#fbfcfa}.filter-chip{height:28px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid transparent;border-radius:4px;background:transparent;color:#657477;font:500 10px var(--font);cursor:pointer;transition:.15s}.filter-chip span{color:#a2adaa;font:10px var(--mono)}.filter-chip:hover{background:#f1f4f1}.filter-chip.selected{background:white;border-color:#dce4e0;color:var(--ink);box-shadow:0 1px 2px rgba(12,30,26,.04)}.filter-chip.selected span{color:var(--teal)}.operator-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.operator-dot.kmb{background:#d9603a}.operator-dot.ctb{background:#28726a}.filter-spacer{flex:1}.sort-note{display:flex;align-items:center;gap:5px;color:#96a29e;font-size:10px}.sort-note span{font-size:15px;color:#71847e}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}thead{background:#f7f9f6}th{height:39px;padding:0 12px;color:#84918e;font:500 9px var(--mono);letter-spacing:.075em;text-transform:uppercase;border-bottom:1px solid #e9eeeb}th:first-child,td:first-child{padding-left:23px}.col-route{width:11%}.col-destination{width:28%}.col-stop{width:19%}.col-time{width:16%}.col-operator{width:10%}tbody tr:not(.state-row){height:62px;border-bottom:1px solid #edf0ed;transition:background .12s}tbody tr:not(.state-row):hover{background:#fbfcf9}td{padding:9px 12px;vertical-align:middle}.route-tag{display:inline-flex;align-items:center;justify-content:center;min-width:43px;height:28px;padding:0 8px;background:var(--deep);border-radius:4px;color:#f2f6f0;font:500 12px var(--mono);letter-spacing:-.03em}.destination{font-weight:600;font-size:13px;letter-spacing:-.02em}.destination .destination-en{display:block;margin-top:2px;color:#9aa5a2;font:10px var(--font);font-weight:400;letter-spacing:0}.stop-cell{display:flex;flex-direction:column;gap:3px}.stop-name{font-size:11px;font-weight:500;color:#405257}.stop-code{color:#97a4a0;font:9px var(--mono);letter-spacing:.03em}.eta{display:flex;align-items:baseline;gap:5px;white-space:nowrap;font:500 14px var(--mono);font-variant-numeric:tabular-nums;color:#53666a}.eta.primary{color:#19745f;font-weight:600}.eta.soon{color:#d35e38}.eta small{font:10px var(--font);color:#95a19f}.eta-time{display:block;color:#a3adab;font:9px var(--mono);margin-top:2px}.no-eta{color:#a3adaa;font:10px var(--font)}.operator-label{display:inline-flex;align-items:center;gap:6px;color:#788782;font-size:10px;white-space:nowrap}.operator-label i{width:6px;height:6px;border-radius:50%;background:#d9603a}.operator-label.ctb i{background:#28726a}.state-row td{height:180px;text-align:center;color:#81908c;font-size:12px}.loader{display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-3px;border:2px solid #d8e1dc;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}.empty-state{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#82908c;font-size:12px}.empty-state[hidden],.error-state[hidden]{display:none}.empty-icon{font-size:24px;color:var(--teal)}.empty-state strong{color:#405257;font-size:13px}.error-state{margin:0 23px 14px;padding:10px 12px;background:#fff5ef;color:#985330;border-radius:4px;font-size:11px}.board-footer{height:39px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-top:1px solid #edf0ed;color:#99a5a1;font-size:9px}.board-footer>span:first-child{display:flex;align-items:center;gap:7px}.footer-live{width:5px;height:5px}.station-section{padding:43px 3px 41px}.station-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:17px}.station-heading .section-kicker{font-size:9px;color:#8a9894;margin-bottom:5px}.station-heading h2{font-size:20px}.station-heading>p{margin:0 0 3px;color:#8b9895;font-size:10px}.station-list{display:flex;gap:10px}.station-list span{display:flex;align-items:center;gap:9px;min-height:37px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:#fff;color:#74817e;font-size:10px}.station-list b{color:var(--teal);font:500 10px var(--mono)}.site-footer{height:63px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:#9aa5a2;font-size:10px}.site-footer>div:first-child{display:flex;align-items:center;gap:12px}.footer-brand{color:var(--ink);font:500 10px var(--mono);letter-spacing:.04em}.source-links{display:flex;align-items:center;gap:14px}.source-links a{color:#657874;text-decoration:none;border-bottom:1px solid #c6d3ce}.source-links a:hover{color:var(--teal)}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #2a7669;outline-offset:3px}
@media(max-width:820px){.page-shell{width:calc(100% - 40px)}.intro{padding-top:49px}.overview{gap:16px}.update-meta{font-size:9px}.col-route{width:12%}.col-destination{width:29%}.col-stop{width:19%}.col-time{width:15%}.col-operator{width:10%}.board-heading{padding-left:18px;padding-right:18px}.filters{padding:0 17px}.sort-note{display:none}th:first-child,td:first-child{padding-left:18px}.station-list{flex-wrap:wrap}}
@media(max-width:600px){.page-shell{width:calc(100% - 28px)}.masthead{height:62px}.mast-meta{font-size:8px}.intro{align-items:flex-end;padding:38px 0 25px}.intro h1{font-size:43px}.eyebrow{font-size:9px}.subtitle{font-size:11px;margin-top:10px}.clock-card time{font-size:20px}.clock-label,.clock-date{font-size:8px}.overview{min-height:57px;padding:0 12px;gap:11px}.overview-count strong,.overview-stops strong{font-size:16px}.overview-count span,.overview-stops span{font-size:9px}.overview-stops{padding-left:11px}.overview-note{font-size:0;gap:0}.overview-note .live-indicator{margin-right:1px}.update-meta{max-width:100px;text-align:right;white-space:normal;line-height:1.3;font-size:8px}.board-heading{padding:21px 12px 14px;align-items:flex-end}.board-heading h2{font-size:20px}.board-heading .section-kicker{font-size:8px}.controls{gap:5px}.search-box{width:145px;height:34px;gap:5px;padding:0 7px}.search-box input{font-size:10px}.search-box input::placeholder{font-size:9px}.search-box kbd{display:none}.refresh-button{height:34px;padding:0 8px;font-size:10px}.refresh-button span:last-child{display:none}.filters{height:42px;padding:0 9px;gap:2px}.filter-chip{gap:5px;padding:0 6px;font-size:9px}.filter-chip span{font-size:9px}.operator-dot{width:5px;height:5px}.table-wrap{overflow:visible}table{table-layout:auto;min-width:0}thead th{height:34px;font-size:8px;padding:0 6px}.col-route{width:15%}.col-destination{width:31%}.col-stop{width:20%}.col-time{width:17%}.col-operator{display:none}th.col-operator{display:none}tbody tr:not(.state-row){height:59px}td{padding:7px 5px}.col-route,td:first-child{padding-left:9px}.route-tag{min-width:34px;height:25px;padding:0 5px;font-size:10px}.destination{font-size:10px;line-height:1.25}.destination .destination-en{display:none}.stop-name{font-size:9px;line-height:1.2}.stop-code{font-size:8px}.eta{font-size:11px;gap:2px}.eta small{font-size:8px}.eta-time{font-size:8px}.no-eta{font-size:8px}.board-footer{padding:0 10px;font-size:8px}.station-section{padding:31px 1px}.station-heading h2{font-size:18px}.station-heading>p{font-size:9px}.station-list{gap:6px}.station-list span{font-size:9px;padding:0 8px;min-height:32px}.station-list b{font-size:9px}.site-footer{height:auto;min-height:62px;align-items:flex-start;padding:15px 0;gap:12px;font-size:9px}.site-footer>div:first-child{gap:7px;flex-direction:column;align-items:flex-start}.source-links{gap:9px;flex-wrap:wrap;justify-content:flex-end}.source-links span{width:100%;text-align:right}.state-row td{height:150px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}

/* Large readable board type is the default on tablet and desktop layouts. */
@media (min-width: 601px) {
  .mast-meta{font-size:12px}
  .eyebrow{font-size:12px}
  .subtitle{font-size:16px}
  .overview-count strong,.overview-stops strong{font-size:22px}
  .overview-count span,.overview-stops span{font-size:13px}
  .overview-note{font-size:13px}
  .update-meta{font-size:11px}
  .board-heading .section-kicker{font-size:11px}
  .board-heading h2{font-size:28px}
  .search-box input{font-size:14px}
  .refresh-button{font-size:14px}
  .filter-chip{font-size:14px}
  .filter-chip span{font-size:12px}
  .sort-note{font-size:12px}
  th{height:40px;font-size:15px}
  tbody tr:not(.state-row){height:70px}
  td{padding:5px 9px}
  .route-tag{height:44px;font-size:32px}
  .destination{font-size:24px}
  .destination .destination-en{font-size:12px}
  .stop-name,.stop-code{font-size:16px}
  .eta{font-size:32px}
  .operator-label{font-size:15px}
}

/* Phones keep the same hierarchy at sizes that fit the narrow board columns. */
@media (max-width: 600px) {
  .mast-meta{font-size:9px}
  .eyebrow{font-size:10px}
  .subtitle{font-size:13px}
  .overview-count strong,.overview-stops strong{font-size:17px}
  .overview-count span,.overview-stops span{font-size:10px}
  .update-meta{font-size:9px}
  .board-heading .section-kicker{font-size:9px}
  .board-heading h2{font-size:22px}
  .search-box input{font-size:12px}
  .refresh-button{font-size:12px}
  .filter-chip{font-size:11px}
  th{font-size:10px}
  .route-tag{font-size:18px}
  .destination{font-size:16px}
  .stop-name{font-size:13px}
  .stop-code{font-size:10px}
  .eta{font-size:16px}
  .operator-label{font-size:10px}
}

/* Tablet dashboard: larger labels with tighter vertical spacing for 7-inch screens. */
@media (min-width: 601px) and (max-width: 1100px) {
  .page-shell{width:calc(100% - 40px)}
  .masthead{height:54px}
  .intro{padding:20px 0 14px}
  .eyebrow{margin-bottom:7px;font-size:10px}
  .intro h1{font-size:clamp(42px,5vw,54px)}
  .subtitle{margin-top:8px;font-size:13px}
  .clock-card time{font-size:24px}
  .clock-date{font-size:10px}
  .overview{min-height:50px;padding:0 15px;gap:15px}
  .overview-count strong,.overview-stops strong{font-size:18px}
  .overview-count span,.overview-stops span{font-size:10px}
  .overview-stops{padding-left:15px}
  .update-meta{font-size:9px}
  .board-heading{padding:17px 18px 12px}
  .board-heading h2{font-size:21px}
  .search-box{width:210px;height:35px}
  .refresh-button{height:35px}
  .filters{height:40px;padding:0 17px}
  .filter-chip{height:27px;font-size:11px}
  th{height:34px;font-size:10px}
  .col-route{width:9%}
  .col-destination{width:24%}
  .col-stop{width:15%}
  .col-time{width:18%}
  .col-operator{width:16%}
  tbody tr:not(.state-row){height:49px}
  td{padding:5px 9px}
  th:first-child,td:first-child{padding-left:15px}
  .route-tag{min-width:43px;height:29px;font-size:13px}
  .destination{font-size:15px}
  .destination .destination-en{font-size:10px}
  .stop-cell{gap:2px}
  .stop-name{font-size:12px}
  .stop-code{font-size:10px}
  .eta{font-size:15px;gap:4px}
  .operator-label{font-size:11px}
  .board-footer{height:34px;font-size:9px}
  .station-section{padding:30px 3px}
}

/* Keep the same readable type scale on a tablet held vertically. */
@media (min-width: 451px) and (max-width: 600px) {
  .page-shell{width:calc(100% - 24px)}
  .masthead{height:56px}
  .intro{padding:22px 0 14px}
  .intro h1{font-size:40px}
  .eyebrow{margin-bottom:7px;font-size:9px}
  .subtitle{margin-top:8px;font-size:12px}
  .clock-card time{font-size:20px}
  .clock-date{font-size:9px}
  .overview{min-height:51px;padding:0 10px;gap:8px}
  .overview-count strong,.overview-stops strong{font-size:16px}
  .overview-count span,.overview-stops span{font-size:9px}
  .overview-stops{padding-left:8px}
  .update-meta{font-size:8px}
  .board-heading{padding:16px 10px 11px}
  .board-heading h2{font-size:19px}
  .search-box{width:156px;height:34px}
  .refresh-button{height:34px}
  .filters{height:39px;padding:0 7px}
  .filter-chip{font-size:9px}
  thead th{height:33px;font-size:9px}
  .col-route{width:14%}
  .col-destination{width:28%}
  .col-stop{width:17%}
  .col-time{width:20%}
  tbody tr:not(.state-row){height:48px}
  td{padding:5px 4px}
  .col-route,td:first-child{padding-left:7px}
  .route-tag{min-width:35px;height:27px;font-size:12px}
  .destination{font-size:12px}
  .stop-cell{gap:2px}
  .stop-name{font-size:11px}
  .stop-code{font-size:9px}
  .eta{font-size:13px;gap:2px}
  .eta-time{display:none}
  .board-footer{height:34px;padding:0 8px;font-size:8px}
}

/* Extra-large type for the usual 7-inch landscape viewport (for example, 1024x600). */
@media (min-width: 601px) and (max-width: 1024px) and (max-height: 700px) {
  .mast-meta{font-size:11px}
  .eyebrow{font-size:11px}
  .overview-count strong,.overview-stops strong{font-size:20px}
  .overview-count span,.overview-stops span{font-size:11px}
  .overview-note{font-size:12px}
  .update-meta{font-size:10px}
  .board-heading .section-kicker{font-size:10px}
  .board-heading h2{font-size:24px}
  .search-box input{font-size:12px}
  .refresh-button{font-size:12px}
  .filters{height:42px}
  .filter-chip{font-size:14px}
  .filter-chip span{font-size:11px}
  .sort-note{font-size:11px}
  th{height:40px;font-size:15px;color:#53666a}
  .col-route{width:12%}
  .col-destination{width:29%}
  .col-stop{width:15%}
  .col-time{width:22%}
  .col-operator{display:none}
  tbody tr:not(.state-row){height:70px}
  td{padding:4px 7px}
  .route-tag{min-width:0;height:44px;padding:0 4px;font-size:32px}
  .destination{font-size:24px}
  .destination .destination-en{display:none}
  .stop-cell{gap:2px}
  .stop-name{font-size:16px;color:#34484d}
  .stop-code{font-size:16px;color:#53666a}
  .eta{font-size:32px;gap:3px;color:#405257}
  .eta.primary{color:#12624f}
  .eta.soon{color:#b84928}
}

/* Large default type scale for clear at-a-glance reading on desktop and tablets. */
.col-route{width:11%}
.col-destination{width:25%}
.col-stop{width:16%}
.col-time{width:20%}
.col-operator{width:8%}
th{height:40px;padding:0 10px;font-size:15px;color:#53666a}
tbody tr:not(.state-row){height:70px}
td{padding:5px 10px}
.route-tag{min-width:0;height:44px;padding:0 5px;font-size:32px}
.destination{font-size:24px;line-height:1.15}
.destination .destination-en{font-size:12px}
.stop-cell{gap:2px}
.stop-name{font-size:16px;color:#34484d}
.stop-code{font-size:16px;color:#53666a}
.eta{font-size:32px;gap:3px;color:#405257}
.eta.primary{color:#12624f}
.eta.soon{color:#b84928}
.filter-chip{font-size:14px}
.filter-chip span{font-size:12px}
.operator-label{font-size:13px}
.station-list span{font-size:14px}
.station-list b{font-size:14px}

/* Keep tablet columns legible while allowing long relative ETAs to wrap cleanly. */
@media (min-width: 601px) and (max-width: 1100px) {
  .col-route{width:12%}
  .col-destination{width:24%}
  .col-stop{width:14%}
  .col-time{width:21%}
  .col-operator{width:8%}
  .eta{white-space:normal;overflow-wrap:anywhere;line-height:1.12}
  .destination{overflow-wrap:anywhere}
}

@media (min-width: 601px) and (max-width: 820px) {
  .col-route{width:14%}
  .col-destination{width:26%}
  .col-stop{width:15%}
  .col-time{width:22.5%}
  .col-operator{display:none}
  .destination .destination-en{display:none}
}

/* Portrait tablets retain a large scale, with enough cell width for each field. */
@media (min-width: 451px) and (max-width: 600px) {
  .page-shell{width:calc(100% - 24px)}
  table{table-layout:fixed}
  .col-route{width:19.5%}
  .col-destination{width:23.5%}
  .col-stop{width:17%}
  .col-time{width:20%}
  .col-operator{display:none}
  thead th{height:38px;font-size:14px;padding:0 4px}
  tbody tr:not(.state-row){height:70px}
  td{padding:4px}
  .col-route,td:first-child{padding-left:7px}
  .route-tag{height:36px;padding:0 3px;font-size:24px}
  .destination{font-size:20px}
  .destination .destination-en{display:none}
  .stop-name,.stop-code{font-size:16px}
  .eta{font-size:24px;white-space:normal;overflow-wrap:anywhere;line-height:1.12}
  .filter-chip{font-size:11px}
  .filter-chip span{font-size:10px}
}

/* Phone sizing keeps every column readable and prevents long ETAs from overlapping. */
@media (max-width: 450px) {
  table{table-layout:fixed}
  .col-route{width:18.5%}
  .col-destination{width:24.5%}
  .col-stop{width:18%}
  .col-time{width:19.5%}
  .col-operator{display:none}
  thead th{height:36px;font-size:11px;padding:0 3px;letter-spacing:0}
  tbody tr:not(.state-row){height:70px}
  td{padding:4px 3px}
  .col-route,td:first-child{padding-left:6px}
  .route-tag{min-width:0;height:30px;padding:0 3px;font-size:20px}
  .destination{font-size:17px;line-height:1.12;overflow-wrap:anywhere}
  .destination .destination-en{display:none}
  .stop-cell{gap:2px}
  .stop-name{font-size:14px;line-height:1.12}
  .stop-code{font-size:12px}
  .eta{font-size:18px;white-space:normal;overflow-wrap:anywhere;line-height:1.12}
  .filter-chip{font-size:11px}
  .filter-chip span{font-size:10px}
}

/* Controls-first board layout: preserve the large route data and remove idle chrome. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.board{border-top:1px solid var(--line);border-radius:8px}
.board-heading.controls-only{padding:7px 12px;align-items:center}
.controls{width:100%;gap:8px}
.search-box{flex:1;width:auto;height:42px;padding:0 10px}
.search-box input{font-size:14px}
.refresh-button{height:42px;padding:0 14px;font-size:14px}
.refresh-icon{font-size:21px}
.filters{height:44px;padding:0 12px;gap:8px}
.filter-chip{height:34px;padding:0 10px;font-size:14px}
.filter-chip span{font-size:12px}
.table-wrap{overflow-x:auto}
table{table-layout:fixed}
th{height:40px;padding:0 9px;font-size:15px;color:#53666a}
tbody tr:not(.state-row){height:62px}
td{padding:3px 8px}
.route-tag{height:40px;padding:0 5px;font-size:32px}
.destination{font-size:24px;line-height:1.08;overflow-wrap:anywhere}
.destination .destination-en{display:none}
.stop-cell{gap:1px}
.stop-name{font-size:16px;line-height:1.08;color:#34484d}
.stop-code{font-size:16px;line-height:1.08;color:#53666a}
.eta{font-size:32px;line-height:1.08;gap:3px;color:#405257}
.eta.primary{color:#12624f}
.eta.soon{color:#b84928}
.error-state{font-size:14px}
.site-footer{height:auto;min-height:42px;margin-top:8px;padding:7px 3px;gap:14px;border-top:1px solid var(--line);font-size:11px}
.footer-meta{display:flex;flex-direction:column;gap:3px;color:#53666a;line-height:1.25}
.footer-status{display:flex;align-items:center;gap:5px;color:#657477;font:11px var(--mono)}
.footer-live{flex:0 0 6px;background:#3a9e76}
.source-links{flex:0 0 auto;gap:10px;font-size:12px;white-space:nowrap}
.source-links span{color:#657477}

@media (min-width: 601px) and (max-width: 1100px) {
  .page-shell{width:calc(100% - 40px)}
  .col-route{width:12%}
  .col-destination{width:24%}
  .col-stop{width:14%}
  .col-time{width:21%}
  .col-operator{width:8%}
  .eta{white-space:normal;overflow-wrap:anywhere}
  .destination{overflow-wrap:anywhere}
  .board-heading.controls-only{padding:6px 10px}
  .search-box{height:40px}
  .refresh-button{height:40px}
  .filters{height:42px}
  .filter-chip{height:32px}
}

@media (min-width: 821px) and (max-width: 1100px) {
  .col-operator{display:table-cell}
}

@media (min-width: 601px) and (max-width: 820px) {
  .col-route{width:14%}
  .col-destination{width:26%}
  .col-stop{width:15%}
  .col-time{width:22.5%}
  .col-operator{display:none}
  .destination .destination-en{display:none}
}

@media (min-width: 451px) and (max-width: 600px) {
  .page-shell{width:calc(100% - 24px)}
  .board-heading.controls-only{padding:6px 8px}
  .search-box{height:40px;padding:0 8px}
  .search-box input{font-size:13px}
  .refresh-button{height:40px;padding:0 11px}
  .filters{height:40px;padding:0 6px;gap:3px}
  .filter-chip{height:31px;padding:0 7px;font-size:12px}
  .filter-chip span{font-size:10px}
  table{table-layout:fixed}
  .col-route{width:22%}
  .col-destination{width:20%}
  .col-stop{width:16%}
  .col-time{width:21%}
  .col-operator{display:none}
  thead th{height:38px;padding:0 4px}
  tbody tr:not(.state-row){height:62px}
  td{padding:3px 4px}
  .col-route,td:first-child{padding-left:7px}
  .destination .destination-en{display:none}
}

@media (max-width: 450px) {
  .page-shell{width:calc(100% - 20px)}
  .board-heading.controls-only{padding:5px 6px}
  .controls{gap:5px}
  .search-box{height:38px;padding:0 6px;gap:4px}
  .search-box input{font-size:12px}
  .search-box input::placeholder{font-size:11px}
  .search-icon{font-size:18px}
  .refresh-button{height:38px;padding:0 9px}
  .filters{height:39px;padding:0 4px;gap:2px}
  .filter-chip{height:30px;padding:0 6px;font-size:11px}
  .filter-chip span{font-size:10px}
  table{table-layout:fixed}
  .col-route{width:18.5%}
  .col-destination{width:24.5%}
  .col-stop{width:18%}
  .col-time{width:19.5%}
  .col-operator{display:none}
  thead th{height:36px;padding:0 3px;font-size:11px;letter-spacing:0}
  tbody tr:not(.state-row){height:62px}
  td{padding:3px}
  .col-route,td:first-child{padding-left:6px}
  .route-tag{height:28px;padding:0 3px;font-size:20px}
  .destination{font-size:17px;line-height:1.08}
  .stop-cell{gap:1px}
  .stop-name{font-size:14px;line-height:1.08}
  .stop-code{font-size:12px;line-height:1.08}
  .eta{font-size:18px;line-height:1.08;white-space:normal;overflow-wrap:anywhere}
  .site-footer{align-items:flex-start;flex-direction:column;gap:6px;padding:7px 2px}
  .footer-meta{font-size:10px}
  .footer-status{font-size:10px;flex-wrap:wrap}
  .source-links{flex-wrap:wrap;white-space:normal;font-size:11px}
}

/* Three-column board: route, destination and a joined pair of relative ETAs. */
.col-route{width:14%}
.col-destination{width:38%}
.col-time{width:48%}
.route-tag.kmb{background:#b63731;color:#fff}
.route-tag.ctb{background:#86610d;color:#fff}
.eta-pair{display:flex;align-items:baseline;gap:3px 12px;flex-wrap:wrap}
.eta-pair .eta{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.08}
.eta-separator{color:#899794;font:500 18px var(--font)}
.no-eta{font-size:22px;color:#657477}

@media (min-width: 601px) and (max-width: 1100px) {
  .col-route{width:13%}
  .col-destination{width:40%}
  .col-time{width:47%}
}

@media (min-width: 601px) and (max-width: 820px) {
  .col-route{width:16%}
  .col-destination{width:38%}
  .col-time{width:46%}
}

@media (min-width: 451px) and (max-width: 600px) {
  .col-route{width:20%}
  .col-destination{width:35%}
  .col-time{width:45%}
}

@media (max-width: 450px) {
  .col-route{width:20%}
  .col-destination{width:34%}
  .col-time{width:46%}
}

/* Keep pickup location beneath the destination and stack the two ETAs by priority. */
.destination-stop-note{display:block;margin-top:2px;color:#405257;font-size:16px;font-weight:500;line-height:1.08;letter-spacing:0}
.eta-pair{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.eta-pair .eta-current{font-size:38px;line-height:1;color:#12624f;font-weight:700}
.eta-pair .eta-current.soon{color:#b84928}
.eta-pair .eta-next{font-size:21px;line-height:1.05;color:#718184;font-weight:500}
.eta-pair .eta-next.soon{color:#b84928}
.eta-number{font-size:1.24em;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.eta-unit{margin-left:.18em;font-size:.52em;font-weight:600;letter-spacing:0;vertical-align:.12em}
.eta-pair .eta-next .eta-number{font-size:1.16em;font-weight:700}
.eta-pair .eta-next .eta-unit{font-size:.68em}

@media (max-width: 600px) {
  .destination-stop-note{font-size:13px}
  .eta-pair .eta-current{font-size:24px}
  .eta-pair .eta-next{font-size:16px}
}

/* Region filters stay readable and wrap cleanly on narrow screens. */
.filter-chip{flex:0 0 auto;white-space:nowrap}
@media (max-width: 820px) {
  .filters{height:auto;min-height:42px;padding-top:5px;padding-bottom:5px;flex-wrap:wrap}
  .filter-spacer{display:none}
}

/* Destination tabs lead the board; update controls sit beside them. */
.filters{height:auto;min-height:56px;padding:5px 10px;gap:4px;flex-wrap:wrap}
.filter-chip{height:44px;padding:0 9px;font-size:21px;font-weight:600;line-height:1}
.filter-spacer{display:none}
.refresh-meta{display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}
.refresh-label{color:#718184;font-size:13px}
#updated{color:#53666a;font:600 15px var(--mono);font-variant-numeric:tabular-nums}
.refresh-meta .refresh-button{display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;height:34px;padding:0}
.refresh-meta .refresh-icon{font-size:23px}
.board-search{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--line);background:#fbfcfa}
.board-search .search-box{flex:0 1 300px;width:300px;height:40px;background:#fff}
.destination{font-size:32px;line-height:1.06}

@media (max-width: 820px) {
  .filters{gap:3px;padding:4px 8px}
  .filter-chip{height:40px;padding:0 8px;font-size:19px}
  .destination{font-size:29px}
}

@media (max-width: 600px) {
  .filters{padding:4px 5px}
  .filter-chip{height:38px;padding:0 6px;font-size:17px}
  .refresh-meta{gap:3px}
  #updated{font-size:13px}
  .refresh-meta .refresh-button{width:30px;min-width:30px;height:30px}
  .refresh-meta .refresh-icon{font-size:21px}
  .board-search{padding:7px 8px}
  .board-search .search-box{flex:1;width:100%}
  .destination{font-size:25px}
}

@media (max-width: 450px) {
  .destination{font-size:23px}
}

.refresh-meta .refresh-button .refresh-icon{display:inline-block;flex:none;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* A compact reminder toggle occupies the right edge of each departure row. */
.col-route{width:14%}
.col-destination{width:38%}
.col-time{width:37%}
.col-remind{width:11%}
th.col-remind,td:last-child{text-align:center;padding-left:4px;padding-right:8px}
.remind-button{min-width:76px;min-height:42px;padding:4px 7px;border:2px solid #9aa9a5;border-radius:6px;background:#fff;color:#405257;font:600 28px var(--font);line-height:1.1;cursor:pointer}
.remind-button.enabled{border-color:#b63731;background:#b63731;color:#fff}
.remind-button:hover{border-color:#b63731}
tbody tr.feed-stale{background:#fff8e9}
.feed-stale .eta,.feed-stale .no-eta{color:#78684c}
.reminder-flash{position:fixed;inset:0;z-index:1000;pointer-events:none;background:rgba(255,174,35,.3);opacity:0}
.reminder-flash.flashing{animation:reminder-flash 2s ease-in-out 3}
@keyframes reminder-flash{0%,100%{opacity:0}50%{opacity:1}}

@media (min-width:601px) and (max-width:1100px) {
  .col-route{width:13%}
  .col-destination{width:39%}
  .col-time{width:36%}
  .col-remind{width:12%}
}
@media (min-width:601px) and (max-width:820px) {
  .col-route{width:16%}
  .col-destination{width:36%}
  .col-time{width:35%}
  .col-remind{width:13%}
}
@media (min-width:451px) and (max-width:600px) {
  .col-route{width:20%}
  .col-destination{width:32%}
  .col-time{width:31%}
  .col-remind{width:17%}
  .remind-button{min-width:56px;min-height:36px;padding:3px;font-size:24px}
}
@media (max-width:450px) {
  .col-route{width:20%}
  .col-destination{width:31%}
  .col-time{width:30%}
  .col-remind{width:19%}
  .remind-button{min-width:48px;min-height:34px;padding:2px;font-size:24px}
  th.col-remind,td:last-child{padding-left:1px;padding-right:3px}
}

/* Keep the two compact control columns and the ETA width stable; the destination
   takes every remaining pixel and wraps only when its text needs the space. */
table{width:100%;table-layout:fixed}
.col-route{width:120px}
.col-destination{width:auto}
.col-time{width:185px}
.col-remind{width:90px}
.route-tag.kmb-longwin{background:#e68624;color:#171a1c}
.route-tag.kmb-overnight{background:#171a1c;color:#fff}
.route-tag.kmb-cross-boundary{background:#26834a;color:#fff}
.destination{overflow-wrap:anywhere}

@media (min-width:451px) and (max-width:600px) {
  .col-route{width:76px}
  .col-time{width:126px}
  .col-remind{width:60px}
  .remind-button{min-width:48px}
}

@media (max-width:450px) {
  .col-route{width:64px}
  .col-time{width:112px}
  .col-remind{width:54px}
}

.reminder-message{position:fixed;z-index:1001;left:50%;bottom:16px;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));max-height:35vh;overflow:auto;padding:12px 18px;border-radius:8px;background:#111d22;color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.3);font-size:22px;font-weight:600;line-height:1.35;text-align:center;white-space:pre-line;pointer-events:none}
.reminder-message[hidden]{display:none}
@media (max-width:600px){.reminder-message{font-size:17px;padding:10px 12px}}

/* Live ETA urgency is consistent for the main and following departure lines. */
.eta-pair .eta.eta-urgent-red{color:#b63731}
.eta-pair .eta.eta-urgent-orange{color:#b45b12}
.eta-pair .eta.eta-urgent-green{color:#12624f}
/* Keep stale feed text amber so it does not look like a current live ETA. */
.feed-stale .eta.eta-urgent-red,.feed-stale .eta.eta-urgent-orange,.feed-stale .eta.eta-urgent-green{color:#78684c}
.stale-eta-label{display:block;margin-bottom:3px;color:#78684c;font:500 10px var(--font)}
.footer-status.offline{color:#b63731}
.footer-status.offline .footer-live{background:#b63731}
.footer-status.unavailable{color:#b45b12}
.footer-status.unavailable .footer-live{background:#b45b12}
@media(max-width:600px){.stale-eta-label{font-size:8px}}