/* ==========================================================================
   Stations page — map / list / card views
   ========================================================================== */

.stations{
  display:flex;flex-direction:column;
  height:calc(100dvh - var(--nav-h));
}

.stations__bar{
  display:flex;align-items:center;gap:14px;
  padding:11px 30px;
  background:var(--surface);
  border-bottom:1px solid var(--panel-line);
  flex:none;
}
.stations__title{font-size:26px;letter-spacing:-.02em}
.stations__filter{min-width:320px}

.stations__view{position:relative;flex:1;min-height:0}
.stations__view--scroll{overflow-y:auto;padding:26px 0 60px}

#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-size:11px}
html[data-theme="dark"] .maplibregl-ctrl-attrib{background:rgba(0,0,0,.55);color:#c6c8ca}
html[data-theme="dark"] .maplibregl-ctrl-attrib a{color:#c6c8ca}

/* Right-hand tool stack, echoing the CampbellON map controls ---------------- */
.map-tools{
  position:absolute;top:14px;right:14px;z-index:5;
  display:flex;flex-direction:column;gap:6px;
}
.map-tool{
  width:34px;height:34px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(19,18,17,.72);border:1px solid rgba(255,255,255,.14);
  color:#e8eaec;backdrop-filter:blur(6px);
  transition:border-color .18s,color .18s,background .18s;
}
.map-tool:hover{border-color:var(--gold);color:var(--gold)}
.map-tool[aria-pressed="false"]{opacity:.55}

.map-status{
  position:absolute;left:14px;bottom:34px;z-index:5;
  background:rgba(19,18,17,.82);color:#e8eaec;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm);padding:9px 14px;font-size:13px;max-width:min(420px,60vw);
  backdrop-filter:blur(6px);
}
.map-status b{color:var(--gold)}

/* Station markers ------------------------------------------------------------
   The marker element MapLibre positions must have no size of its own. If the
   label lives inside a sized wrapper, the wrapper grows to the width of the
   text and `anchor: center` centres *that* box on the coordinate, pushing the
   dot west by half the label width and up by half its height. So the wrapper
   is a 0x0 origin and both children are positioned against it. */
.pin-wrap{position:relative;width:0;height:0}

.pin{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-50%);
  width:15px;height:15px;border-radius:50%;cursor:pointer;
  background:var(--st-ok);
  border:2.5px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.45);
  transition:transform .15s;
}
/* The centring translate has to be repeated here or hover would drop it. */
.pin:hover{transform:translate(-50%,-50%) scale(1.28)}
.pin--stale{background:var(--st-warn)}
.pin--off{background:var(--st-off)}
.pin--placeholder{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.75)}

.pin-label{
  position:absolute;left:0;top:0;
  transform:translate(-50%,11px);
  font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.02em;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8);
  white-space:nowrap;pointer-events:none;
}

/* Popup ------------------------------------------------------------------- */
.maplibregl-popup-content{
  background:var(--surface);color:var(--tundora);
  border:1px solid var(--panel-line);border-radius:var(--r-md);
  padding:0;box-shadow:var(--shadow);font-family:var(--body);
  min-width:250px;
}
.maplibregl-popup-close-button{color:var(--muted);font-size:19px;padding:2px 8px}
html[data-theme="dark"] .maplibregl-popup-tip{border-top-color:var(--surface);border-bottom-color:var(--surface)}
.pop{padding:14px 16px 16px}
.pop__name{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink);margin:0 0 2px}
.pop__town{font-size:12.5px;color:var(--muted);margin:0 0 11px}
.pop__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-bottom:13px}
.pop__k{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pop__v{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--ink);line-height:1.15}
.pop__v small{font-family:var(--body);font-weight:400;font-size:11px;color:var(--muted);margin-left:2px}
.pop__foot{display:flex;align-items:center;gap:10px}
.pop__stamp{font-size:11.5px;color:var(--muted)}
.pop__note{font-size:12px;color:var(--muted);margin:0 0 11px;padding:7px 10px;background:var(--surface-2);border-radius:var(--r-sm)}

/* List view --------------------------------------------------------------- */
.stn-table{width:100%;border-collapse:collapse;font-size:15px}
.stn-table th{
  font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);text-align:left;
  padding:0 14px 10px;border-bottom:1px solid var(--panel-line);white-space:nowrap;
}
.stn-table td{padding:13px 14px;border-bottom:1px solid var(--panel-line);vertical-align:middle}
.stn-table tbody tr{transition:background .15s}
.stn-table tbody tr:hover{background:var(--surface-2)}
.stn-table .num{text-align:right;font-variant-numeric:tabular-nums}
.stn-table a{font-family:var(--disp);font-weight:600;color:var(--ink)}
.stn-table a:hover{color:var(--gold)}
.stn-table .sub{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--muted)}
.stn-table .u{font-size:11.5px;color:var(--muted);margin-left:3px}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--st-ok);margin-right:8px;vertical-align:1px}
.dot--stale{background:var(--st-warn)}
.dot--off{background:var(--st-off)}
.dot--placeholder{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}

/* Card view --------------------------------------------------------------- */
.stn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.stn-card{
  background:var(--surface);border:1px solid var(--panel-line);
  border-radius:var(--r-md);padding:18px;transition:border-color .18s,transform .18s;
  display:block;
}
.stn-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.stn-card__name{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 3px}
.stn-card__town{font-size:12.5px;color:var(--muted);margin:0 0 15px}
.stn-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stn-card__k{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stn-card__v{font-family:var(--disp);font-weight:700;font-size:21px;color:var(--ink);line-height:1.15}
.stn-card__v small{font-family:var(--body);font-weight:400;font-size:11px;color:var(--muted);margin-left:2px}
.stn-card__foot{margin-top:15px;padding-top:12px;border-top:1px solid var(--panel-line);font-size:12px;color:var(--muted)}

.empty{padding:40px 30px;text-align:center;color:var(--muted)}

@media (max-width:860px){
  .stations__bar{flex-wrap:wrap;padding:11px 18px}
  .stations__filter{min-width:100%;order:5}
  .stn-table thead{display:none}
  .stn-table td{display:block;border:0;padding:3px 0}
  .stn-table tbody tr{display:block;padding:14px 0;border-bottom:1px solid var(--panel-line)}
  .stn-table .num{text-align:left}
}

/* The map view is full-bleed, so the footer only belongs to the scrolling
   list and card views. */
body.is-fixed .foot{display:none}
.foot{margin-top:0}

/* Link-out affordances -------------------------------------------------------
   Station dashboards live on campbellon.com, so every route to one leaves this
   site - in the same tab, by request. The arrow marks the destination as
   external so the departure is not a surprise. */
.ext{opacity:.55;margin-left:5px;vertical-align:-1px}
a:hover .ext{opacity:1}
.muted-name{font-family:var(--disp);font-weight:600;color:var(--muted)}
.pop__hw{font-size:12px;color:var(--muted);margin:0 0 12px}
.stn-card__desc{font-size:13.5px;color:var(--tundora);margin:0 0 14px}
.stn-card--muted{opacity:.62}
.stn-card--muted:hover{border-color:var(--panel-line);transform:none}
.stn-table td:last-child{white-space:nowrap}