:root{
  --navy:#132A46;
  --navy-deep:#0C1D33;
  --amber:#E3A008;
  --amber-deep:#B87F05;
  --steel:#2E6F95;
  --paper:#F3F5F7;
  --line:#D7DEE5;
  --ink:#1B1F27;
  --ink-soft:#5B6572;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  font-family:'Segoe UI', 'Public Sans', Arial, sans-serif;
  color:var(--ink);
}
.site-header{
  background:var(--navy);
  background-image:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%);
  color:var(--white);
  padding:16px 28px;
  display:flex;
  align-items:center;
  gap:18px;
}
.site-logo{
  flex:none;
  display:block;
  background:var(--white);
  border-radius:5px;
  padding:1px;
  line-height:0;
}
.site-logo img{
  display:block;
  height:66px;
  width:auto;
}
.site-header-text{ min-width:0; }
.site-header .tag{
  display:inline-block;
  background:var(--amber);
  color:var(--navy-deep);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:3px;
  margin-bottom:8px;
}
.site-header h1{ margin:0; font-size:26px; }
.site-header h1 a{ color:var(--white); text-decoration:none; }
.content{
  max-width:900px;
  margin:0 auto;
  padding:28px 20px 60px;
}
.site-footer{
  text-align:center;
  color:var(--ink-soft);
  font-size:12px;
  padding:20px;
}

.date-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.date-display{ font-size:22px; font-weight:700; color:var(--navy); }
.date-sub{ font-size:12px; letter-spacing:0.05em; color:var(--ink-soft); margin-top:4px; }
.date-form{ display:flex; align-items:center; gap:8px; font-size:13px; }
.date-form input[type=date]{ padding:6px 8px; border:1px solid var(--line); border-radius:4px; }
.date-form button{
  background:var(--navy); color:var(--white); border:none;
  padding:7px 14px; border-radius:4px; cursor:pointer; font-weight:600;
}

.badge{
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:3px;
  margin-left:8px;
}
.badge-exception{ background:#FCE9C6; color:var(--amber-deep); }
.badge-terminus{ background:#DCEAF1; color:var(--steel); }

.offday-notice{
  background:#FFF3F0;
  border:1px solid #F3C7BC;
  color:#8A3B2A;
  padding:14px 16px;
  border-radius:6px;
  margin-bottom:20px;
}

.format-group{ margin-bottom:32px; }
.format-title{
  font-size:15px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:2px solid var(--navy);
  padding-bottom:6px;
  margin-bottom:16px;
}

.route-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px 18px;
  margin-bottom:16px;
}
.route-card-head{
  display:flex;
  align-items:center;
  margin-bottom:4px;
  text-decoration:none;
  width:fit-content;
}
.route-card-head:hover .route-name{ text-decoration:underline; }
.route-name{ font-weight:700; font-size:17px; color:var(--navy); }
.direction-badge{
  margin-left:10px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.05em;
  padding:3px 8px;
  border-radius:3px;
  color:var(--white);
}
.direction-outbound{ background:var(--amber-deep); }
.direction-inbound{ background:var(--steel); }
.route-description{ color:var(--ink-soft); font-size:13px; margin-bottom:10px; }
.route-endpoints{ font-size:13.5px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.stop-ref{ font-weight:600; color:var(--navy); }
.endpoint-arrow{ color:var(--ink-soft); }

.runs-table{ width:100%; border-collapse:collapse; }
.runs-table th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  border-bottom:2px solid var(--navy);
  padding:0 8px 6px;
}
.runs-table td{
  padding:8px;
  font-family:'Consolas','Menlo',monospace;
  font-size:14px;
  border-bottom:1px solid var(--line);
}
.runs-table td.depart{ font-weight:700; color:var(--navy); }
.runs-table td.arrive{ color:var(--steel); }
.runs-table tr:last-child td{ border-bottom:none; }

.stop-header{ margin-bottom:6px; }
.stop-code-badge{
  display:inline-block;
  background:var(--navy);
  color:var(--white);
  font-family:monospace;
  font-weight:700;
  padding:3px 9px;
  border-radius:4px;
  margin-bottom:6px;
}
.stop-header h2{ margin:4px 0; color:var(--navy); }
.stop-geocode{ font-size:12px; color:var(--ink-soft); font-family:monospace; }
.stop-intro{ color:var(--ink-soft); font-size:13.5px; margin-bottom:20px; }

.time-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.time-chip{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:4px;
  padding:6px 10px;
  font-family:monospace;
  font-weight:600;
  font-size:13.5px;
  color:var(--navy);
}

/* ---- Route map ---- */
.route-map-wrap{
  height:320px;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:20px;
  background:var(--white);
}
#route-map{
  width:100%;
  height:100%;
}
/* No map controls are added at all; this only tames the attribution
   mark MapLibre always draws (required for OSM/OpenFreeMap data). */
.maplibregl-ctrl-attrib{
  font-size:9px;
  background:rgba(255,255,255,0.7) !important;
}
.maplibregl-ctrl-attrib a{ color:var(--ink-soft) !important; }

.route-page-head{ margin-bottom:4px; }
.route-page-head h2{ margin:0 0 16px; color:var(--navy); }

/* ---- Route page: direction sections & per-run stop grid ---- */
.direction{ margin-bottom:32px; }
.direction-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.direction-head .arrow{ color:var(--amber-deep); font-weight:700; font-size:15px; }
.direction-head h3{
  margin:0;
  font-size:16px;
  color:var(--navy);
  text-transform:uppercase;
  letter-spacing:0.02em;
}

.trip-block{
  margin-bottom:16px;
  padding:14px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
}
.trip-block-label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--amber-deep);
  margin-bottom:10px;
}

.stop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
}
.stop-chip{
  display:block;
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:4px;
  padding:8px 10px;
  min-width:0;
  text-decoration:none;
  transition:border-color 0.12s ease, box-shadow 0.12s ease;
}
.stop-chip:hover{
  border-color:var(--navy);
  box-shadow:0 1px 4px rgba(12,29,51,0.12);
}
.stop-chip.terminus{ border-left-color:var(--steel); }
.stop-chip-label{
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  line-height:1.25;
  margin-bottom:4px;
}
.stop-chip-time{
  font-family:monospace;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
}
.stop-chip.terminus .stop-chip-time{ color:var(--steel); }
.stop-chip-tag{
  display:block;
  margin-top:2px;
  font-size:9.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--steel);
}