/* hktraffic-hk — Apple HIG white theme */
:root {
  /* Apple system colors */
  --bg: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-tertiary: #fbfbfd;
  --separator: rgba(60, 60, 67, 0.12);
  --separator-strong: rgba(60, 60, 67, 0.29);

  /* Label hierarchy */
  --label: #1d1d1f;
  --label-secondary: rgba(60, 60, 67, 0.78);
  --label-tertiary: rgba(60, 60, 67, 0.56);
  --label-quaternary: rgba(60, 60, 67, 0.36);

  /* Accent (Apple Blue) */
  --accent: #007aff;
  --accent-hover: #0a84ff;

  /* Traffic status (Apple system colors) */
  --green: #34c759;
  --amber: #ff9500;
  --red: #ff3b30;
  --green-bg: rgba(52, 199, 89, 0.10);
  --amber-bg: rgba(255, 149, 0, 0.10);
  --red-bg: rgba(255, 59, 48, 0.10);

  /* Card */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang HK", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-secondary);
  color: var(--label);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0 0 60px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }

/* ============ Header (sticky, large title) ============ */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
  padding: 14px 20px 12px;
}
.hd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hd-row h1 {
  font-size: 34px; font-weight: 700; letter-spacing: -0.4px;
  line-height: 1.1;
}
.data-status {
  color: var(--label-tertiary); font-size: 13px; font-weight: 400;
  text-align: right;
}
.data-status::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 6px; vertical-align: middle;
}
.data-status.error::before { background: var(--red); }
.data-status.loading::before { background: var(--label-quaternary); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

.hd-controls { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.ctl {
  background: var(--bg-secondary); color: var(--label);
  border: none; padding: 7px 14px; border-radius: 980px;
  font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: all 0.2s ease;
}
.ctl:hover { background: #ececef; }
.ctl:active { transform: scale(0.97); }
.ctl-cta {
  background: var(--accent); color: #fff;
  width: 100%; padding: 12px; font-size: 15px; font-weight: 600;
  border-radius: 12px;
}
.ctl-cta:hover { background: var(--accent-hover); }

/* ============ Main container ============ */
main { padding: 16px 20px; max-width: 960px; margin: 0 auto; }

/* ============ Section card (Apple-style) ============ */
section.rcard {
  background: var(--bg);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease;
}
section.rcard:hover { box-shadow: var(--card-shadow-hover); }

.rcard-h {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 16px 20px;
  background: none; border: none;
  color: var(--label); font-size: 17px; font-weight: 600;
  cursor: pointer; font-family: inherit; letter-spacing: -0.2px;
}
.rcard-h:hover { background: rgba(0, 0, 0, 0.02); }
.rcard-cin {
  color: var(--label-tertiary); font-size: 18px; font-weight: 400;
  width: 20px; text-align: center;
}
.rcard-body { padding: 0 20px 16px; }
.rcard.collapsed .rcard-body { display: none; }
.rcard.collapsed .rcard-cin::before { content: '+'; font-size: 20px; }
.rcard:not(.collapsed) .rcard-cin::before { content: '−'; font-size: 18px; }

.badge {
  background: var(--label-tertiary); color: #fff;
  border-radius: 10px; padding: 1px 8px; font-size: 12px;
  font-weight: 600; margin-left: 8px; vertical-align: middle;
}

/* ============ Harbour strip (iconic feature) ============ */
.harbour-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: stretch; padding: 4px 0 8px;
}
.harbour-side h3 {
  font-size: 12px; color: var(--label-tertiary);
  text-transform: uppercase; letter-spacing: 0.6px;
  font-weight: 600; margin-bottom: 8px; text-align: center;
}
.harbour-mid {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: var(--label-tertiary);
  font-size: 11px; padding-top: 20px;
}
.harbour-mid .arrow { font-size: 20px; margin: 4px 0; color: var(--label-secondary); }

.harbour-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin-bottom: 4px;
  border-radius: 10px; transition: background 0.15s;
}
.harbour-card:hover { background: var(--bg-secondary); }
.harbour-card .sign {
  font-weight: 700; color: var(--label-tertiary);
  font-size: 12px; width: 30px;
  font-variant-numeric: tabular-nums;
}
.harbour-card .dest { font-size: 14px; font-weight: 500; flex: 1; }
.harbour-card .mins {
  font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 56px; text-align: right;
}

/* ============ Status colors (Apple system) ============ */
.cls-green { color: var(--green); }
.cls-amber { color: var(--amber); }
.cls-red { color: var(--red); }
.bg-green { background: var(--green-bg); }
.bg-amber { background: var(--amber-bg); }
.bg-red { background: var(--red-bg); }

/* ============ Tabs (segmented control) ============ */
.view-tabs {
  display: flex; gap: 0; padding: 2px;
  background: var(--bg-secondary); border-radius: 9px;
  margin-bottom: 14px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  flex: 1; min-width: max-content;
  background: transparent; color: var(--label-secondary);
  border: none; padding: 6px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: all 0.2s;
  white-space: nowrap;
}
.tab.active {
  background: var(--bg); color: var(--label);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  font-weight: 600;
}
.view-pane { display: none; }
.view-pane.active { display: block; }

/* ============ Route rows ============ */
.route-group { margin-bottom: 20px; }
.route-group h3 {
  font-size: 13px; color: var(--label-tertiary);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600; padding: 0 4px 8px;
}
.route-row {
  display: grid; grid-template-columns: 36px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 12px 12px; margin-bottom: 2px;
  border-radius: 10px; transition: background 0.15s;
  font-size: 14px;
}
.route-row:hover { background: var(--bg-secondary); }
.route-row .sign-id {
  font-weight: 700; color: var(--label-tertiary);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.route-row .name { font-size: 14px; line-height: 1.3; }
.route-row .dest { color: var(--label-tertiary); font-size: 12px; }
.route-row .mins {
  font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 40px; text-align: right;
}
.route-row .status-text {
  font-size: 11px; font-weight: 500;
  min-width: 32px; text-align: right;
  padding: 2px 6px; border-radius: 4px;
}

/* ============ News ============ */
.news-item {
  padding: 14px 12px; margin-bottom: 4px;
  border-radius: 10px; transition: background 0.15s;
  font-size: 14px;
}
.news-item:hover { background: var(--bg-secondary); }
.news-item:last-child { margin-bottom: 0; }
.news-time { color: var(--label-tertiary); font-size: 12px; font-weight: 500; }
.news-title { font-weight: 600; margin: 4px 0; line-height: 1.4; }
.news-route {
  display: inline-block; color: var(--accent);
  font-size: 12px; font-weight: 500;
  background: rgba(0, 122, 255, 0.08);
  padding: 2px 8px; border-radius: 6px; margin-top: 4px;
}

/* ============ Near (GPS) ============ */
#near-list { margin-top: 12px; }
.near-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; margin-bottom: 2px;
  border-radius: 10px; font-size: 14px;
  transition: background 0.15s;
}
.near-row:hover { background: var(--bg-secondary); }
.near-row .name { flex: 1; line-height: 1.3; }
.near-row .dist {
  color: var(--label-tertiary); font-size: 12px;
  margin-right: 12px; font-variant-numeric: tabular-nums;
}
.near-row .speed {
  font-weight: 600; min-width: 70px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============ Map placeholder ============ */
.map-placeholder {
  background: var(--bg-secondary);
  border-radius: 12px; padding: 40px 20px;
  text-align: center; color: var(--label-secondary);
}
.map-placeholder p { margin: 6px 0; font-size: 14px; }
.map-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin: 0 6px; vertical-align: middle;
}
.map-dot.green { background: var(--green); }
.map-dot.amber { background: var(--amber); }
.map-dot.red { background: var(--red); }

/* ============ Cams ============ */
.cams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cam-card {
  background: var(--bg-secondary);
  border-radius: 10px; padding: 12px; font-size: 13px;
  transition: background 0.15s;
}
.cam-card:hover { background: #ececef; }
.cam-card .road { font-weight: 600; margin-bottom: 2px; }
.cam-card .loc { color: var(--label-tertiary); font-size: 12px; }

/* ============ States ============ */
.empty, .loading, .error {
  padding: 32px 20px; text-align: center;
  color: var(--label-tertiary); font-size: 14px;
}
.error { color: var(--red); }

/* ============ Footer ============ */
footer {
  padding: 32px 20px 0; max-width: 960px; margin: 0 auto;
  color: var(--label-tertiary); font-size: 12px;
  text-align: center;
}
footer p { margin: 4px 0; }
footer a { color: var(--accent); }

/* ============ Responsive ============ */
@media (max-width: 600px) {
  .hd-row h1 { font-size: 28px; }
  .harbour-grid { grid-template-columns: 1fr; gap: 8px; }
  .harbour-mid { flex-direction: row; padding: 4px 0; }
  .harbour-mid .arrow { margin: 0 8px; }
  .route-row { grid-template-columns: 32px 1fr auto; }
  .route-row .dest { display: none; }
  .cams-grid { grid-template-columns: 1fr; }
  .view-tabs { padding: 2px; }
  .tab { padding: 6px 10px; font-size: 12px; }
}
/* ============ SVG harbour diagram (P1 visualisation) ============ */
.svg-wrap {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px 12px 12px;
  margin-bottom: 16px;
}
.svg-wrap svg { width: 100%; height: auto; max-height: 220px; display: block; }

/* ============ Tunnel strip rows (P1) ============ */
.tunnel-row {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--separator);
}
.tunnel-row:last-child { border-bottom: none; }
.tunnel-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tunnel-label { font-size: 13px; font-weight: 600; color: var(--label); }
.tunnel-from { font-size: 10px; color: var(--label-tertiary); font-family: var(--font-mono); letter-spacing: 0.04em; }
.tunnel-bar-wrap { position: relative; min-width: 0; }
.tunnel-bar { width: 100%; height: 24px; display: block; }
.bar-fill { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.bar-fill.cls-green { fill: #34c759; }
.bar-fill.cls-amber { fill: #ff9500; }
.bar-fill.cls-red { fill: #ff3b30; }
.tunnel-stops { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 2px; }
.stop-label { font-size: 9px; color: var(--label-tertiary); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.tunnel-result { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tunnel-mins { font-size: 17px; font-weight: 700; font-family: var(--font-mono); line-height: 1; }
.tunnel-mins.cls-green { color: #1d8c3a; }
.tunnel-mins.cls-amber { color: #c47200; }
.tunnel-mins.cls-red { color: #d70015; }
.tunnel-unit { font-size: 12px; margin-left: 1px; opacity: 0.6; font-weight: 400; }

/* ============ Leaflet tunnel labels (P3) ============ */
.tunnel-label { background: none !important; border: none !important; }
.tunnel-label-inner {
  background: rgba(255,255,255,0.95);
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  white-space: nowrap;
  border: 1px solid var(--separator);
  text-align: center;
}
.tunnel-label-inner.cls-green { color: #1d8c3a; }
.tunnel-label-inner.cls-amber { color: #c47200; }
.tunnel-label-inner.cls-red { color: #d70015; }

@media (max-width: 600px) {
  .tunnel-row { grid-template-columns: 56px 1fr 56px; gap: 6px; }
  .tunnel-label { font-size: 12px; }
  .tunnel-mins { font-size: 14px; }
}