/* sitedrive.ca, the public map. No inline styles anywhere (the CSP allows only this file and Leaflet's). */
:root {
  --bg: #f6f7f9; --fg: #15191e; --muted: #5b6570; --card: #ffffff; --line: #d9dee4; --accent: #1864ab;
  --bad: #c92a2a; --warn: #a65b00; --bar: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1215; --fg: #eef1f4; --muted: #a3adb8; --card: #181c21; --line: #2c323a; --accent: #74c0fc;
    --bad: #ff8787; --warn: #ffc078; --bar: #14181c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1215; --fg: #eef1f4; --muted: #a3adb8; --card: #181c21; --line: #2c323a; --accent: #74c0fc;
  --bad: #ff8787; --warn: #ffc078; --bar: #14181c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column;
  overflow: hidden; -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }

#top { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top)); background: var(--bar); border-bottom: 1px solid var(--line);
  min-width: 0; }
.brand { font-weight: 800; font-size: 19px; text-decoration: none; color: var(--fg); flex: none; }
.brand span { color: var(--accent); }
.tag { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
#top nav { flex: none; display: flex; gap: 12px; }
#top nav a { text-decoration: none; font-weight: 600; }

#mapwrap { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--card); }
#tools { position: absolute; z-index: 800; left: 56px; top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
#tools button { padding: 9px 14px; font: inherit; font-weight: 700; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); color: var(--fg); cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
#toast { position: absolute; z-index: 850; left: 16px; right: 16px; bottom: 28px; margin: 0 auto; max-width: 460px;
  padding: 10px 14px; border-radius: 10px; background: rgba(20, 24, 28, .92); color: #fff; text-align: center; }

#panel { position: fixed; z-index: 1200; left: 0; right: 0; bottom: 0; max-height: 72vh; overflow-y: auto;
  background: var(--card); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 22px rgba(0, 0, 0, .25);
  transform: translateY(105%); transition: transform .2s ease-out; }
body.panelopen #panel { transform: none; }
@media (min-width: 900px) {
  body { flex-direction: column; }
  #mapwrap { margin-right: 380px; }
  #panel { top: 0; left: auto; right: 0; bottom: 0; width: 380px; max-height: none; border-radius: 0;
    border-top: 0; border-left: 1px solid var(--line); box-shadow: none; transform: translateX(105%);
    top: var(--toph, 49px); }
  body:not(.panelopen) #mapwrap { margin-right: 0; }
}
.phead { display: flex; align-items: center; gap: 8px; position: sticky; top: -10px; background: var(--card);
  padding: 6px 0; z-index: 1; }
.phead h2 { flex: 1; margin: 0; font-size: 18px; }
#panelclose { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  color: var(--fg); font-size: 16px; cursor: pointer; }
.grp h3 { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lay { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.lay.off { opacity: .75; }
.lay.busy .ltitle::after { content: " · loading…"; color: var(--muted); font-weight: 400; }
.lhead { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lhead input { width: 18px; height: 18px; flex: none; }
.ltitle { flex: 1; min-width: 0; font-weight: 700; }
.lcount { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.legend { list-style: none; margin: 6px 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 13px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.sw { display: inline-block; flex: none; }
.sw.line { width: 24px; height: 0; border-top: 4px solid; }
.sw.line.dash { border-top-style: dashed; }
.sw.polygon { width: 16px; height: 12px; border: 2px dashed; }
.sw.point { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.about { margin: 6px 0 0 26px; font-size: 13px; color: var(--muted); }
.note { margin: 4px 0 0 26px; font-size: 12.5px; color: var(--muted); }
.note.bad { color: var(--bad); font-weight: 600; }
.note.warn { color: var(--warn); font-weight: 600; }
.lsrc { margin: 4px 0 0 26px; font-size: 12.5px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
#sources { margin-top: 18px; font-size: 13.5px; }
#sources h2 { font-size: 16px; margin: 0 0 6px; }
#srclist { padding-left: 18px; margin: 6px 0; }
#srclist li { margin: 4px 0; }
.stmt { color: var(--muted); }
.foot { margin: 16px 0 4px; font-size: 13px; }

.pop strong { display: block; font-size: 14px; margin-bottom: 4px; overflow-wrap: anywhere; }
.pop table { border-collapse: collapse; font-size: 12.5px; }
.pop th { text-align: left; vertical-align: top; color: #5b6570; font-weight: 600; padding: 1px 8px 1px 0; white-space: nowrap; }
.pop td { padding: 1px 0; overflow-wrap: anywhere; }
.pop .src { margin: 6px 0 0; font-size: 12px; color: #5b6570; }
.clicon { background: none; border: 0; }
.cl { border-radius: 50%; color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center;
  justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .4); opacity: .92; }
.leaflet-container { font: 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.leaflet-control-attribution { max-width: 70vw; white-space: normal; }

@media (max-width: 600px) {
  .tag { display: none; }
  #top { gap: 8px; }
  #top nav { margin-left: auto; }
  #tools { left: 54px; top: 10px; }
}