/* HK Dashboard — Apple-inspired, original implementation. No proprietary Apple assets. */
:root {
  color-scheme: light;
  --bg:#F5F5F7;
  --card:rgba(255,255,255,.72);
  --card-solid:#fff;
  --primary:#007AFF;
  --success:#30D158;
  --warning:#FFD60A;
  --danger:#FF453A;
  --text:#1D1D1F;
  --secondary:#6E6E73;
  --tertiary:#92949D;
  --line:rgba(42,47,58,.085);
  --shadow:0 10px 40px rgba(0,0,0,.075),0 1px 0 rgba(255,255,255,.7) inset;
  --backdrop:saturate(170%) blur(40px);
  --radius:24px;
  --space:18px;
  --shell-padding:36px;
  --tile-height:100%;
  -webkit-font-smoothing:antialiased;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#000;
  --card:rgba(28,28,30,.78);
  --card-solid:#1C1C1E;
  --primary:#0A84FF;
  --success:#32D74B;
  --warning:#FFD60A;
  --danger:#FF453A;
  --text:#F5F5F7;
  --secondary:#ABABB1;
  --tertiary:#85858D;
  --line:rgba(238,240,255,.095);
  --shadow:0 10px 40px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.035) inset;
}
* {box-sizing:border-box}
html,body {margin:0; min-height:100%; width:100%}
@supports (width:clamp(1px,2px,3px)) { :root { --shell-padding:clamp(24px,3.05vw,44px); } }
body {background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang HK","PingFang TC","Helvetica Neue",sans-serif;overflow-x:hidden;transition:background .25s ease,color .25s ease}
body::before {content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(70% 55% at 92% -10%,rgba(0,122,255,.11),transparent 80%),radial-gradient(60% 70% at -10% 112%,rgba(90,200,250,.085),transparent 76%);pointer-events:none}
:root[data-theme="dark"] body::before {background:radial-gradient(70% 55% at 92% -10%,rgba(10,132,255,.15),transparent 76%),radial-gradient(55% 65% at -10% 108%,rgba(78,88,170,.13),transparent 74%)}
button {font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
button:focus-visible {outline:3px solid var(--primary);outline-offset:3px}
.icon-sprite {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.svg-icon {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.shell {width:100%;max-width:1700px;margin:0 auto;padding:calc(24px + env(safe-area-inset-top,0px)) calc(var(--shell-padding) + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(var(--shell-padding) + env(safe-area-inset-left,0px));height:auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:12px}
.topbar {flex:0 0 150px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.time-block {min-width:0}
.section-kicker {font-size:10px;font-weight:800;letter-spacing:2.7px;color:var(--secondary);display:flex;align-items:center;gap:10px;white-space:nowrap}
.live-dot {width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(48,209,88,.10)}
.kicker-slash {opacity:.4}
.clock-line {display:flex;align-items:center;gap:27px;margin-top:6px}
.clock {font-size:88px;font-size:clamp(76px,7.7vw,106px);font-weight:650;letter-spacing:-6px;line-height:1.03;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.date-block {border-left:1px solid var(--line);padding-left:24px;display:flex;flex-direction:column;gap:4px}
.weekday {font-size:20px;line-height:1.2;font-weight:700}
.calendar-date {font-size:17px;font-weight:550;color:var(--secondary)}
.timezone {font-size:11px;font-weight:750;letter-spacing:1px;color:var(--tertiary);margin-top:3px}
.right-tools {display:flex;gap:16px;align-items:flex-start;padding-top:2px}
.status-pills {display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.status-pill {font-size:12px;color:var(--text);font-weight:650;background:var(--card);border:1px solid var(--line);border-radius:100px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;backdrop-filter:var(--backdrop);-webkit-backdrop-filter:var(--backdrop)}
.status-pill .svg-icon {width:16px;height:16px;color:var(--success)}
.status-pill.muted {color:var(--secondary)}
.status-pill.muted .svg-icon {color:var(--tertiary)}
.status-pill.is-offline .svg-icon {color:var(--danger)}
.action-tools {display:flex;gap:8px}
.icon-button {border:1px solid var(--line);background:var(--card);border-radius:16px;width:46px;height:46px;display:grid;place-items:center;color:var(--text);backdrop-filter:var(--backdrop);-webkit-backdrop-filter:var(--backdrop);transition:background .2s ease,transform .2s ease}
.icon-button:active {transform:scale(.96)}
.dashboard-grid {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(320px,1.083333fr) minmax(296px,1fr);gap:var(--space);min-height:0;flex:1 0 auto}
.widget {min-width:0;min-height:0;position:relative;isolation:isolate;overflow:visible;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:var(--backdrop);-webkit-backdrop-filter:var(--backdrop);padding:23px 25px;display:flex;flex-direction:column}
.weather-widget {grid-column:1 / span 8;grid-row:1}
.warning-widget {grid-column:9 / span 4;grid-row:1}
.kmb-widget {grid-column:1 / span 4;grid-row:2}
.mtrbus-widget {grid-column:5 / span 4;grid-row:2}
.lrt-widget {grid-column:9 / span 4;grid-row:2}
.widget-heading,.eta-heading {display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.eyebrow {font-size:10px;font-weight:800;letter-spacing:1.7px;color:var(--tertiary);line-height:1.3;white-space:nowrap}
.source-label {font-size:11px;font-weight:500;letter-spacing:.1px}
h2 {font-size:23px;line-height:1.18;letter-spacing:-.55px;margin:8px 0 0;font-weight:720}
.micro-status,.eta-status {color:var(--secondary);font-size:11px;font-weight:700;white-space:nowrap;background:rgba(132,140,160,.10);border-radius:100px;padding:7px 11px;margin-top:2px}
.micro-status.calm {color:var(--primary);background:rgba(0,122,255,.075)}
.micro-status.is-live,.eta-status.is-live {color:#17994B;background:rgba(48,209,88,.11)}
.micro-status.is-stale,.eta-status.is-stale {color:#C58C00;background:rgba(255,189,48,.13)}
.weather-hero {display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;min-height:0;gap:5px;margin-top:7px}
.weather-temperature {display:flex;line-height:.95;letter-spacing:-5px;font-size:90px;font-size:clamp(72px,8.3vw,110px);font-weight:600;font-variant-numeric:tabular-nums}
.degree {font-size:.52em;line-height:.95;letter-spacing:-2px;margin-left:5px;font-weight:470}
.weather-condition {font-size:19px;font-weight:700;letter-spacing:-.25px;margin-top:12px}
.weather-station {font-size:12px;font-weight:600;color:var(--secondary);margin-top:8px}
.weather-art {width:135px;width:clamp(105px,12vw,155px);height:135px;height:clamp(105px,12vw,155px);flex:none;margin-right:2px;filter:drop-shadow(0 18px 16px rgba(48,106,169,.16))}
.weather-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:6px}
.metric {min-height:68px;background:rgba(138,155,177,.07);border:1px solid rgba(127,142,164,.035);border-radius:15px;padding:11px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0}
.metric>span {font-size:11px;font-weight:650;color:var(--secondary);white-space:nowrap}
.metric strong {font-size:17px;line-height:1.15;font-weight:700;letter-spacing:-.4px;overflow-wrap:anywhere}
.tiny-note {color:var(--tertiary);font-size:9px;font-weight:500}
.data-footnote {color:var(--tertiary);font-size:10px;line-height:1.4;margin-top:10px}
.warning-widget {background:linear-gradient(116deg,rgba(239,250,244,.94),rgba(240,249,246,.62) 60%,rgba(228,248,237,.52));}
.warning-widget::after {content:"";position:absolute;z-index:-1;width:330px;height:330px;right:-80px;top:-190px;border:45px solid rgba(48,209,88,.055);border-radius:50%}
.warning-widget.is-alert {background:linear-gradient(117deg,rgba(255,240,236,.96),rgba(255,239,233,.77) 75%,rgba(255,215,209,.74));border-color:rgba(255,69,58,.40);box-shadow:0 0 0 1px rgba(255,69,58,.15),0 10px 38px rgba(255,69,58,.14),0 0 60px rgba(255,69,58,.14)}
.warning-widget.is-alert::after {border-color:rgba(255,69,58,.07)}
.warning-widget.is-unknown {background:var(--card)}
:root[data-theme="dark"] .warning-widget {background:linear-gradient(115deg,rgba(27,53,40,.94),rgba(25,35,31,.88));}
:root[data-theme="dark"] .warning-widget.is-alert {background:linear-gradient(120deg,rgba(70,30,28,.96),rgba(42,27,27,.88));}
:root[data-theme="dark"] .warning-widget.is-unknown {background:var(--card)}
.warning-mini {font-size:11px;font-weight:700;color:var(--secondary);background:rgba(255,255,255,.23);border:1px solid var(--line);padding:7px 12px;border-radius:20px}
.warning-main {display:flex;align-items:center;gap:17px;flex:1 1 auto;min-height:0;padding:0 4px}
.warning-icon-circle {height:60px;width:60px;flex:0 0 60px;border-radius:20px;display:grid;place-items:center;background:rgba(48,209,88,.15);color:#26AB55}
.warning-icon-circle .svg-icon {width:32px;height:32px;stroke-width:2}
.is-alert .warning-icon-circle {color:var(--danger);background:rgba(255,69,58,.12)}
.is-unknown .warning-icon-circle {color:var(--tertiary);background:rgba(120,130,140,.08)}
.warning-headline {font-size:38px;font-size:clamp(27px,3.05vw,43px);letter-spacing:-1.4px;line-height:1.1;font-weight:750}
.warning-content p {font-size:13px;font-weight:600;color:var(--secondary);margin:10px 0 0;line-height:1.4;max-width:570px}
.warning-list {display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:23px}
.warning-small-label {color:var(--secondary);font-size:11px;font-weight:650}
.alert-chip {font-size:11px;font-weight:750;padding:5px 9px;border-radius:99px;background:rgba(255,69,58,.10);color:#BC352C}
:root[data-theme="dark"] .alert-chip {color:#FF8E83}
.eta-widget {padding:23px 23px 18px}
.eta-heading {align-items:center;justify-content:flex-start;gap:13px}
.eta-heading>div {min-width:0}
.eta-heading h2 {font-size:21px;letter-spacing:-.55px;white-space:nowrap;margin-top:6px}
.transport-glyph {height:48px;width:48px;flex:0 0 48px;border-radius:15px;display:grid;place-items:center}
.transport-glyph .svg-icon {width:28px;height:28px;stroke-width:1.7}
.bus-color {background:#EAF2FF;color:#2168D9}
.mtr-color {background:#EDECFB;color:#6E5ED2}
.lr-color {background:#FFF4DA;color:#D9951A}
:root[data-theme="dark"] .bus-color {background:#19345A;color:#83B7FF}
:root[data-theme="dark"] .mtr-color {background:#2D2A50;color:#B4AAFF}
:root[data-theme="dark"] .lr-color {background:#483B1D;color:#FFC35A}
.route-tag {font-size:18px;letter-spacing:-.5px;padding-left:2px;font-weight:800}
.kmb-tag {color:#316FD8}.mtr-tag{color:#796BDA}.lr-tag{color:#D99B28}
.eta-status {margin-left:auto;font-size:10px;padding:6px 9px}
.route-caption {display:flex;align-items:center;gap:7px;margin-top:13px;color:var(--secondary);font-size:13px;font-weight:600;white-space:nowrap}
.inline-arrow {width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.6}
.platform-chip {font-size:10px;font-weight:700;color:var(--primary);padding:5px 8px;border-radius:100px;background:rgba(0,122,255,.10);margin-left:auto}
.next-eta {display:flex;align-items:center;justify-content:space-between;flex:1;min-height:95px}
.next-label {font-size:12px;color:var(--secondary);font-weight:700;margin-bottom:8px}
.eta-main {display:flex;align-items:baseline;gap:8px;font-weight:730;line-height:1}
.eta-main>span:first-child {font-size:60px;font-size:clamp(45px,5.6vw,72px);letter-spacing:-3px;font-variant-numeric:tabular-nums}
.eta-unit {font-size:17px;font-weight:650;color:var(--secondary);letter-spacing:0}
.next-decorator {font-size:84px;line-height:1;color:var(--primary);opacity:.045;font-weight:800;letter-spacing:-4px;user-select:none}
.eta-divider {height:1px;background:var(--line);flex:0 0 1px;margin-bottom:15px}
.eta-pair {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.eta-pair>div {display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.eta-pair span {font-size:12px;font-weight:600;color:var(--secondary)}
.eta-pair strong {font-size:19px;font-weight:750;letter-spacing:-.4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.eta-note {color:var(--tertiary);font-size:10px;line-height:1.35;margin-top:11px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.bottom-note {min-height:22px;display:flex;align-items:center;justify-content:space-between;color:var(--tertiary);font-size:11px;font-weight:600;letter-spacing:.15px}
.footer-separator {margin:0 7px}
.preview-banner {border-radius:10px;background:#1E82EE;color:white;padding:8px 12px;font-size:12px;font-weight:750;text-align:center;flex:0 0 auto}
.preview-banner[hidden] {display:none}
.portrait-notice {display:none}
@media (max-width:1150px) {
  :root {--space:14px;--shell-padding:25px}
  .shell {padding-top:18px}
  .topbar {flex-basis:125px}
  .clock {font-size:78px}
  .right-tools {flex-direction:column;align-items:flex-end;gap:8px}
  .status-pill {min-height:36px;padding:0 11px;font-size:11px}
  .icon-button {height:44px;width:44px;border-radius:13px}
  .widget {padding:18px 19px}
  .weather-art {width:105px;height:105px}
  .weather-temperature {font-size:80px}
  .metric {min-height:60px;padding:8px 9px}
  .eta-widget {padding:17px}
  .eta-heading h2 {font-size:17px}
  .eta-heading {gap:8px}
  .transport-glyph {height:40px;width:40px;flex-basis:40px;border-radius:12px}
  .transport-glyph .svg-icon {width:24px;height:24px}
  .route-tag {font-size:17px}
  .route-caption {font-size:11px;gap:5px}
  .platform-chip {padding:4px}
  .eta-main>span:first-child {font-size:52px}
  .next-eta {min-height:72px}
  .next-decorator {font-size:65px}
}
@media (max-height:825px) and (orientation:landscape) {
  .shell {gap:9px}
  .topbar {flex-basis:116px}
  .clock {font-size:72px}
  .clock-line {margin-top:2px}
  .section-kicker {font-size:9px}
  .widget h2 {font-size:20px;margin-top:5px}
  .weather-temperature {font-size:72px}
  .weather-condition {font-size:16px;margin-top:5px}
  .weather-station {font-size:11px;margin-top:4px}
  .weather-art {width:97px;height:97px}
  .weather-metrics {gap:6px}
  .metric {min-height:53px}
  .data-footnote {margin-top:5px;font-size:9px}
  .warning-main {gap:12px}
  .warning-headline {font-size:30px}
  .warning-icon-circle {width:50px;height:50px;flex-basis:50px;border-radius:15px}
  .eta-heading h2 {font-size:18px}
  .route-caption {margin-top:8px}
  .next-label {margin-bottom:3px}
  .eta-divider {margin-bottom:8px}
  .eta-note {margin-top:7px}
}
@media (max-width:800px) and (orientation:landscape) {
  .shell {min-height:650px;height:auto}
  .topbar {flex-basis:auto;min-height:105px}
  .dashboard-grid {min-height:580px}
  .warning-content p {font-size:11px}
  .eta-heading .eyebrow {letter-spacing:.6px;font-size:9px}
  .eta-status {display:none}
}
@media (orientation:portrait) and (max-width:1200px) and (hover:none) and (pointer:coarse) {
  .shell {display:none}
  .portrait-notice {display:flex;min-height:100vh;min-height:100dvh;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;color:var(--text)}
  .rotate-glyph {font-size:76px;color:var(--primary);line-height:1;transform:rotate(-12deg)}
  .portrait-notice h1 {font-size:27px;margin:22px 0 0}
  .portrait-notice p {font-size:16px;color:var(--secondary);margin-top:13px}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Content must remain reachable in short desktop windows and at browser zoom. */
.topbar {flex-shrink:0}
.bottom-note {flex-shrink:0;flex-wrap:wrap;gap:6px}
.warning-main {flex-shrink:0;padding-top:16px;padding-bottom:16px}
.weather-hero {flex-shrink:0;min-height:130px}
.weather-widget {gap:6px}
.route-caption {white-space:normal;flex-wrap:wrap;line-height:1.5}
.eta-heading {flex-wrap:wrap}
.eta-heading h2 {white-space:normal}
.widget-heading {flex-wrap:wrap}
.warning-widget::after {display:none}
/* Balanced layout: retain three equal ETA cards on landscape iPad. */
.dashboard-grid {min-height:640px;min-height:max(640px,calc(100vh - 236px));flex:1 0 auto}
.warning-main {flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;flex:1 0 auto}
.warning-icon-circle {flex:0 0 50px}
.warning-headline {font-size:clamp(26px,2.6vw,38px);overflow-wrap:anywhere;line-height:1.2}
.warning-content p {font-size:13px;line-height:1.6}
.weather-hero {padding:8px 0}
.weather-temperature {font-size:clamp(84px,9vw,120px)}
.weather-art {width:145px;height:145px}
.weather-condition {font-size:22px}
.weather-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1050px) {
  .eta-heading {gap:8px}
  .eta-heading h2 {font-size:17px}
  .eta-status {font-size:10px;padding:5px 7px}
  .weather-temperature {font-size:88px}
  .weather-art {width:110px;height:110px}
  .warning-headline {font-size:27px}
}
@media (max-width:900px) {
  .dashboard-grid {grid-template-rows:auto;min-height:0}
  .weather-widget {grid-column:1 / span 7;grid-row:1}
  .warning-widget {grid-column:8 / span 5;grid-row:1}
  .kmb-widget {grid-column:1 / span 6;grid-row:2}
  .mtrbus-widget {grid-column:7 / span 6;grid-row:2}
  .lrt-widget {grid-column:1 / span 12;grid-row:3}
  .eta-widget {min-height:285px}
}
@media (max-width:700px) {
  .topbar {flex-direction:column;gap:14px}
  .right-tools {width:100%;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .status-pills {justify-content:flex-start}
  .dashboard-grid {display:flex;flex-direction:column;min-height:0}
  .weather-widget {min-height:440px}
  .warning-widget {min-height:205px}
  .clock-line {gap:18px}
  .date-block {padding-left:16px}
  .clock {font-size:68px}
  .weather-art {width:90px;height:90px}
}
/* Give the two proportional rows a definite available height. */
.dashboard-grid {height:calc(100vh - 236px);min-height:720px;flex:0 0 auto}
.weather-hero {padding:0;min-height:110px}
.weather-hero-copy {display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:center}
.weather-temperature {grid-column:1;grid-row:1 / span 2;font-size:100px}
.weather-condition {grid-column:2;margin:0;align-self:end}
.weather-station {grid-column:2;margin:0;align-self:start;line-height:1.5}
.weather-art {width:110px;height:110px}
.weather-metrics {grid-template-columns:repeat(6,minmax(0,1fr))}
.metric {padding:10px;min-height:65px}
@media (max-width:1100px) {
  .weather-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
  .weather-temperature {font-size:80px}
  .weather-hero-copy {gap:7px 16px}
  .weather-condition {font-size:18px}
  .weather-art {width:90px;height:90px}
  .metric {min-height:53px;padding:8px}
}
@media (max-width:900px) {
  .dashboard-grid {height:auto;min-height:0}
  .weather-hero-copy {display:block}
  .weather-condition {margin-top:8px}
  .weather-station {margin-top:6px}
}