/* ------------------------------------------------------------------
   Postografi - layout, side panel and map chrome
   ------------------------------------------------------------------ */

:root {
  --panel-w: 340px;
  --bg: #12161c;
  --bg-2: #1a2029;
  --bg-3: #232b36;
  --line: #2f3946;
  --fg: #e8edf3;
  --fg-dim: #9aa7b6;
  --accent: #4da3ff;
  --accent-dim: #2b6ca8;
  --radius: 8px;
  --shadow: 0 6px 28px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

#map {
  position: absolute;
  inset: 0;
  background: #aad3df;
}

/* Muting the basemap makes the area colours much easier to read */
.mute-base .leaflet-tile-pane {
  filter: saturate(.18) brightness(1.08) contrast(.92);
}

svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons ---------- */

.ctl-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18, 22, 28, .92);
  backdrop-filter: blur(6px);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.ctl-btn:hover { background: var(--bg-3); }
.ctl-btn svg { width: 18px; height: 18px; }
.panel-open .ctl-btn { display: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-3); color: var(--fg); }
.icon-btn svg { width: 16px; height: 16px; }

.text-btn {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--fg-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.text-btn:hover { background: var(--bg-3); color: var(--fg); border-color: var(--accent-dim); }

/* ---------- panel ---------- */

#panel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: var(--panel-w);
  height: 100%;
  background: rgba(18, 22, 28, .96);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(calc(-1 * var(--panel-w) - 4px));
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.panel-open #panel { transform: none; }

.panel-head {
  flex: 0 0 auto;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.panel-title h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* The logo brings its own dark card, which sits close enough to the panel
   background to read as a deliberate panel rather than a pasted-on image.
   It is an <img> because both SVG files declare the same gradient ids, so
   inlining them in one document would make them collide. */
.brand img {
  display: block;
  width: 100%;
  max-width: 236px;
  height: auto;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 9px;
  width: 15px;
  height: 15px;
  color: var(--fg-dim);
  pointer-events: none;
}
#search {
  width: 100%;
  padding: 8px 32px 8px 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
}
#search::-webkit-search-cancel-button { display: none; }
#search:focus { outline: none; border-color: var(--accent); }
#searchClear { position: absolute; right: 3px; }

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 8px;
  min-height: 24px;
}
.status {
  flex: 1 1 120px;
  min-width: 0;
  font-size: 12px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.status-actions { display: flex; gap: 5px; }

/* ---------- tree ---------- */

.tree {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 6px 14px;
}
.tree::-webkit-scrollbar { width: 9px; }
.tree::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 5px; }
.tree::-webkit-scrollbar-thumb:hover { background: #33404f; }

.node { border-radius: 6px; }

.row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: default;
  user-select: none;
}
.row:hover { background: var(--bg-2); }
.row.is-on { background: rgba(77, 163, 255, .12); }

.twisty {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
}
.twisty:hover { color: var(--fg); background: var(--bg-3); }
.twisty svg { width: 11px; height: 11px; transition: transform .15s; }
.twisty[aria-expanded="true"] svg { transform: rotate(90deg); }
.twisty.leaf { visibility: hidden; cursor: default; }

.row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.swatch {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .28);
}
.swatch.multi { border-style: dashed; }

.label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.label .sub {
  margin-left: 6px;
  color: var(--fg-dim);
  font-size: 11.5px;
}
.label mark { background: rgba(255, 214, 87, .28); color: inherit; border-radius: 2px; }

.count {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--bg-3);
  color: var(--fg-dim);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.kids { margin-left: 15px; border-left: 1px solid var(--line); padding-left: 3px; }
.kids[hidden] { display: none; }

.level-3 .label { font-variant-numeric: tabular-nums; }
.pnr { font-weight: 600; letter-spacing: .3px; }

.empty { padding: 18px 10px; color: var(--fg-dim); font-size: 13px; text-align: center; }
.more { padding: 5px 10px; color: var(--fg-dim); font-size: 11.5px; font-style: italic; }

/* ---------- footer ---------- */

.panel-foot {
  flex: 0 0 auto;
  padding: 9px 12px 11px;
  border-top: 1px solid var(--line);
  background: rgba(12, 15, 20, .5);
}
.opt {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--fg-dim);
  cursor: pointer;
}
.opt input { accent-color: var(--accent); cursor: pointer; }
.opt:hover { color: var(--fg); }

.opt-range { gap: 9px; }
.opt-range > span { flex: 0 0 auto; }
.opt-range input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  background: var(--bg-3);
  -webkit-appearance: none;
  appearance: none;
}
.opt-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.opt-range input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.opt-range output {
  flex: 0 0 auto;
  width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.credit {
  margin: 7px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: #6d7a89;
}

/* ---------- hover card ---------- */

.hover-card {
  position: absolute;
  z-index: 1002;
  min-width: 130px;
  max-width: 240px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(18, 22, 28, .95);
  box-shadow: var(--shadow);
  pointer-events: none;
  font-size: 12.5px;
}
.hover-card .hc-pnr {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.hover-card .hc-sted { font-weight: 600; }
.hover-card .hc-meta { margin-top: 2px; color: var(--fg-dim); font-size: 11.5px; }
.hover-card .hc-hint { margin-top: 5px; color: #6d7a89; font-size: 10.5px; }

/* ---------- loading ---------- */

.loader {
  position: absolute;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .3s;
}
.loader[hidden] { display: none; }
.loader.fade { opacity: 0; pointer-events: none; }
.loader-box { text-align: center; color: var(--fg-dim); }
.loader-logo {
  display: block;
  width: min(280px, 62vw);
  height: auto;
  margin: 0 auto 22px;
}
.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 12px;
  border: 3px solid var(--bg-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-box p { margin: 0; font-size: 13px; }
.loader-box .err { color: #ff8a8a; max-width: 420px; }
.loader-box .err code {
  display: block;
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--fg);
  font-size: 12px;
  user-select: all;
}

/* ---------- leaflet overrides ---------- */

.leaflet-container { background: #aad3df; font: inherit; }
.pk-canvas { position: absolute; top: 0; left: 0; pointer-events: none; }
.leaflet-control-attribution {
  background: rgba(18, 22, 28, .82) !important;
  color: var(--fg-dim) !important;
  font-size: 10.5px !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-bar a {
  background: rgba(18, 22, 28, .92) !important;
  color: var(--fg) !important;
  border-color: var(--line) !important;
}
.leaflet-bar a:hover { background: var(--bg-3) !important; }
/* Zoom sits top right, clear of the panel; only the bottom-left scale bar
   has to step aside when the panel is open. */
.leaflet-control-zoom { margin-right: 12px !important; margin-top: 12px !important; }
.panel-open .leaflet-control-scale { margin-left: calc(var(--panel-w) + 12px) !important; }
.leaflet-control-scale { transition: margin-left .22s cubic-bezier(.4, 0, .2, 1); }

/* ---------- basemap switcher (bottom right) ---------- */

/* The bottom-right corner also holds Leaflet's attribution; make the corner a
   column so the switcher can be ordered above it. */
.leaflet-bottom.leaflet-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.basemap-ctl { order: -1; margin: 0 12px 8px 0; }

.basemap-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18, 22, 28, .92);
  backdrop-filter: blur(6px);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.basemap-btn:hover { background: var(--bg-3); }
.basemap-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.basemap-list {
  margin-top: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18, 22, 28, .96);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  min-width: 178px;
}
.basemap-list[hidden] { display: none; }

.basemap-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--fg);
  cursor: pointer;
}
.basemap-opt:hover { background: var(--bg-2); }
.basemap-opt input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.leaflet-control-scale-line {
  background: rgba(18, 22, 28, .82) !important;
  border-color: var(--line) !important;
  color: var(--fg-dim) !important;
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
  :root { --panel-w: 100vw; }
  #panel { border-right: 0; }
  .panel-open .leaflet-control-zoom,
  .panel-open .leaflet-control-scale { margin-left: 12px !important; }
  .hover-card { max-width: 70vw; }
}

/* Shown when the search and the selection do not overlap */
.notice {
  margin: 4px 4px 8px;
  padding: 8px 10px;
  border: 1px solid #4a3a1e;
  border-left: 3px solid #d8a13a;
  border-radius: 6px;
  background: rgba(216, 161, 58, .09);
}
.notice p { margin: 0 0 7px; font-size: 12px; color: #e0cba0; line-height: 1.35; }