:root { --bg:var(--sst-paper); --card:#fff; --ink:var(--sst-ink); --muted:var(--sst-muted); --line:var(--sst-line); --open:#1a7f43; --closed:#c0392b; --unknown:#7a8594; --planned:#b07d00; }
@media (prefers-color-scheme: dark) { :root { --bg:#12161c; --card:#1b212a; --ink:#e8ecf1; --muted:#9aa7b6; --line:#2c3541; --open:#4cc27f; --closed:#ff6b5b; --unknown:#8b97a6; --planned:#e0b13c; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.4 var(--sst-font); }
header { padding:14px 16px; border-bottom:1px solid var(--line); background:var(--card); }
h1 { margin:0; font-size:1.2rem; }
.sub { margin:2px 0 0; color:var(--muted); font-size:.85rem; }
main { display:grid; grid-template-columns:minmax(300px,380px) 1fr; height:calc(100vh - 92px); }
#side { overflow:auto; display:flex; flex-direction:column; }
#list { padding:12px; display:flex; flex-direction:column; gap:10px; }
#map { height:100%; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--sst-radius); padding:10px 12px; cursor:pointer; }
.card:focus-visible { outline:2px solid var(--open); }
.card h3 { margin:0; font-size:1rem; display:flex; justify-content:space-between; gap:8px; }
.meta, .when { color:var(--muted); font-size:.82rem; }
.note { margin:4px 0; }
.badge { font-size:.75rem; font-weight:600; padding:1px 8px; border-radius:99px; border:1px solid currentColor; text-transform:uppercase; }
.open { color:var(--open); } .closed { color:var(--closed); } .unknown { color:var(--unknown); } .planned { color:var(--planned); }
.actions { display:flex; gap:8px; margin-top:6px; }
button { font:inherit; padding:4px 12px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); width:min(92vw,380px); }
dialog label { display:block; margin:10px 0; font-weight:600; font-size:.85rem; }
dialog select, dialog textarea, dialog input { display:block; width:100%; margin-top:4px; font:inherit; padding:6px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
dialog menu { display:flex; justify-content:flex-end; gap:8px; padding:0; }
.error { color:var(--closed); min-height:1.2em; margin:0; }
/* Station pins are red (ports of entry); the ring around the red core is the station's status: green open, red closed, grey unknown, amber planned. */
.pin { width:18px; height:18px; border-radius:50%; background:#d7191c; border:4px solid #7a8594; box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px #0006; }
@media (max-width:760px) { main { grid-template-columns:1fr; grid-template-rows:45vh 1fr; height:auto; } #map { order:-1; height:45vh; } #side { overflow:visible; } }
a { color: var(--muted); }
[hidden] { display: none !important; }
#insp table { width:100%; border-collapse:collapse; font-size:.85rem; }
#insp td { padding:2px 4px; border-bottom:1px solid var(--line); }
#insp td.num { text-align:right; font-variant-numeric:tabular-nums; }
#insp h3 { margin:12px 0 4px; font-size:.9rem; }
.bars { display:flex; align-items:flex-end; gap:2px; height:80px; border-bottom:1px solid var(--line); }
.bar { flex:1; background:var(--open); min-height:1px; }
#layers { padding:12px 12px 0; }
#layers .toggle { display:flex; gap:8px; align-items:center; cursor:pointer; }
#layers fieldset { border:1px solid var(--line); border-radius:6px; margin:8px 0; padding:4px 10px 8px; display:flex; gap:14px; flex-wrap:wrap; }
#layers legend { color:var(--muted); font-size:.8rem; padding:0 4px; }
#layers fieldset label { display:flex; gap:4px; align-items:center; cursor:pointer; }
#layers .period { display:flex; gap:8px; align-items:center; font-size:.85rem; }
#layers select { font:inherit; padding:2px 6px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
#loc-summary { margin:6px 0 0; }
.popup-rows { margin:4px 0 0; padding:0; list-style:none; font-size:.85rem; }

.notice { display:flex; gap:12px; align-items:center; justify-content:center; padding:8px 12px; background:var(--closed); color:#fff; font-size:.9rem; }
.notice button { font:inherit; padding:2px 12px; border-radius:6px; border:1px solid #fff; background:transparent; color:#fff; cursor:pointer; }
.install { margin:8px 12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:.9rem; }
.install ol { margin:6px 0; padding-left:20px; }
.install button { font:inherit; margin-right:8px; }
/* The installed app is read-only for now: updates are made from the web page. */
html.standalone .update-btn { display:none; }

#notify { padding:12px 12px 0; }
#notify .toggle { display:flex; gap:8px; align-items:center; cursor:pointer; }
#notify-note { margin:6px 0 0; }
.follow-btn[aria-pressed="true"] { background:var(--open); border-color:var(--open); color:#fff; }
.follow-btn:disabled { opacity:.6; cursor:default; }
.card.flash { outline:3px solid var(--open); transition:outline-color 1.5s; }

.conditions { margin:12px 12px 0; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:.9rem; }
.conditions summary { cursor:pointer; font-weight:600; }
.conditions ul { margin:6px 0; padding-left:18px; }
.conditions li { margin:4px 0; }

/* Inspection search */
.search-open { margin:0 0 10px; width:100%; }
dialog.wide { width:min(94vw,640px); max-height:90vh; overflow:auto; }
dialog .dates { display:flex; gap:10px; }
dialog .dates label { flex:1; }
.results { list-style:none; margin:10px 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.results li { border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--bg); font-size:.85rem; }
.results .top { display:flex; justify-content:space-between; gap:8px; font-weight:600; }
.results .meta { color:var(--muted, inherit); opacity:.85; margin-top:2px; }
.results .oos { color:#b42318; font-weight:700; }
dialog .actions { display:flex; gap:8px; flex-wrap:wrap; }
dialog .s-levels { border:1px solid var(--line); border-radius:6px; margin:10px 0; padding:4px 10px 8px; }
dialog .s-levels label { display:inline-block; margin:4px 12px 0 0; font-weight:600; }
dialog .s-levels input { display:inline; width:auto; margin:0 4px 0 0; }


.station-header {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:92px;
  padding-inline:clamp(16px, 3vw, 36px);
  background:linear-gradient(110deg, var(--sst-navy) 35%, var(--sst-deep-blue));
  color:#f7fcff;
}
.station-header img { flex:none; }
.station-header .sub { color:#d0e2f1; }
.station-brand { margin:0 0 2px; color:var(--sst-ice); font-size:.66rem; font-weight:750; letter-spacing:.15em; }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--sst-focus); outline-offset:3px; }

/* Station tracker: spacious controls and readable, consistent cards. */
body { line-height: 1.55; }
.station-header { min-height: 108px; gap: 16px; }
.station-header h1 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -.035em; }
main { grid-template-columns: minmax(340px, 420px) 1fr; height: calc(100dvh - 108px); min-height: 480px; }
#side { background: var(--bg); border-right: 1px solid var(--line); }
#list { padding: 16px; gap: 14px; }
.card { padding: 18px; box-shadow: 0 3px 12px #10274208; transition: border-color .15s ease, box-shadow .15s ease; }
.card:hover { border-color: var(--sst-focus); box-shadow: 0 5px 18px #10274214; }
.card h3 { align-items: center; margin-bottom: 8px; gap: 12px; }
.badge { font-size: .65rem; padding: 3px 9px; letter-spacing: .045em; }
.meta, .when { line-height: 1.6; }
.actions { flex-wrap: wrap; margin-top: 12px; }
button { min-height: 40px; padding: 8px 12px; font-size: .82rem; font-weight: 600; }
button:hover { border-color: var(--sst-focus); }
.conditions { margin: 16px 16px 0; padding: 14px; }
#layers, #notify { padding: 16px 16px 0; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sst-blue); flex-shrink: 0; }
.search-open { margin: 16px 16px 0; width: calc(100% - 32px); background: var(--sst-blue); border-color: var(--sst-blue); color: white; }
dialog { padding: 24px; border-radius: 18px; box-shadow: 0 24px 80px #0004; }
dialog::backdrop { background: #08152899; backdrop-filter: blur(4px); }
dialog h2 { margin-top: 0; letter-spacing: -.025em; }
dialog input, dialog select, dialog textarea { min-height: 44px; font-size: 16px; }
@media (max-width: 760px) {
  .station-header { padding: 20px 16px; }
  main { height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: 42dvh 1fr; }
  #map { height: 42dvh; }
  .station-header .sub { font-size: .75rem; }
  dialog .dates { flex-wrap: wrap; }
  dialog .dates label { min-width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
/* Station status history */
.history-list { list-style:none; display:flex; flex-direction:column; gap:8px; max-height:min(58vh,520px); overflow:auto; margin:12px 0; padding:0; }
.history-entry { padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.history-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.history-heading time { color:var(--muted); font-size:.78rem; text-align:right; }
.history-note { margin:6px 0 0; overflow-wrap:anywhere; }
#history { width:min(92vw,520px); max-height:90vh; overflow:auto; }
#history h2 { margin:6px 0; font-size:1.05rem; }