/* Shared layout and base styling for every page. Light theme only. */

/* One font stack and a small type scale: 14 (small), 16 (body), 18 (h2), 24 (h1). */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: #1a1a1a;
  --muted: #666;
  --accent: #1a5fb4;
  --line: rgba(0, 0, 0, 0.08);        /* hairlines: table rows, header edge */
  --control: rgba(0, 0, 0, 0.18);     /* outlines of selects and buttons */
  --head-h: 48px;                     /* updated by layout.js to the header's real height */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: var(--head-h); }
body { display: flex; flex-direction: column; min-height: 100vh; background: #fff; color: var(--text);
  font: 16px/1.5 var(--font); }
h1 { font-size: 24px; line-height: 1.25; font-weight: 700; }
h2 { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 24px 0 8px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Form controls use the page font (browsers default them to a different one). */
button, input, select, textarea { font: inherit; font-size: 14px; color: inherit; }
select, button { border: 1px solid var(--control); border-radius: 6px; background: #fff; }
select:not([multiple]), button { height: 30px; padding: 0 8px; }
select[multiple] { padding: 2px; }
select[multiple] option { padding: 2px 4px; border-radius: 4px; }
select[multiple] option:checked { background: #e3ecf8; color: var(--text); }
button { cursor: pointer; }
button:hover { background: #f4f4f4; }
select:disabled { opacity: 0.55; }
input[type="radio"], input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--accent); }

/* Header: title left, tabs right; sticky and see-through so tabs stay reachable. */
.site-header { position: sticky; top: 0; z-index: 1100; display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 24px; padding: 10px 16px; background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--line); }
.site-header a { text-decoration: none; }
.site-title { font-weight: 700; color: var(--text); }
.site-tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-tabs a { color: var(--muted); }
.site-tabs a:hover, .site-tabs a[aria-current="page"] { color: var(--text); }
.site-tabs a[aria-current="page"] { font-weight: 600; }

/* Page: title + one-line summary, then the workspace. */
.page { flex: 1; width: 100%; padding: 16px; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.page-head .summary { margin: 0; font-size: 14px; color: var(--muted); }
.page-head .summary strong { color: var(--text); }
.breadcrumb { margin: 0 0 4px; font-size: 14px; color: var(--muted); }

/* Workspace: filters | primary | secondary. Side panels stick below the header and
   scroll on their own if they are taller than the window. */
.workspace { display: grid; gap: 24px; align-items: start;
  grid-template-columns: 240px minmax(0, 1fr) 360px;
  grid-template-areas: "filters primary secondary"; }
.workspace.no-secondary { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "filters primary"; }
.filters, .secondary { position: sticky; top: calc(var(--head-h) + 16px); min-width: 0;
  max-height: calc(100vh - var(--head-h) - 32px); overflow: auto; }
.filters { grid-area: filters; }
.primary { grid-area: primary; min-width: 0; }
.secondary { grid-area: secondary; }
.primary > h2:first-child, .secondary > h2:first-child { margin-top: 0; }

/* Filter groups: plain stacked sections (no boxes). Selects sit full width under their label. */
.filters fieldset { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.filters fieldset:last-child { margin-bottom: 0; }
.filters legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.filters label { display: block; font-size: 14px; line-height: 1.9; }
.filters select { display: block; width: 100%; margin-bottom: 4px; }
.filters br { display: none; }

/* Toolbar sits directly above the main visual. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; font-size: 14px; }
.toolbar select { margin-left: 4px; }
.toolbar .group { display: inline-flex; align-items: center; gap: 4px; }
.hint { color: var(--muted); }

/* Tall main visuals fill the remaining viewport height. */
.fill-height { height: calc(100vh - 190px); min-height: 400px; }

/* Data tables: hairline rows, no outer box. */
table { border-collapse: collapse; font-size: 14px; }
th, td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-weight: 600; }

/* Leaflet: page font, and keep its controls (z-index 1000) under the sticky header. */
body .leaflet-container { font-family: var(--font); isolation: isolate; }

.site-footer { padding: 16px; font-size: 14px; color: var(--muted); }

/* Tablet: secondary panel drops below the primary. */
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas: "filters primary" "filters secondary"; }
  .secondary { position: static; max-height: none; overflow: visible; }
}

/* Phone: single column — filters, then primary, then secondary. */
@media (max-width: 700px) {
  .site-header { column-gap: 16px; }
  .site-tabs { column-gap: 12px; font-size: 14px; }
  .workspace, .workspace.no-secondary { gap: 16px; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "filters" "primary" "secondary"; }
  .filters { position: static; max-height: none; overflow: visible; }
  .fill-height { height: 60vh; min-height: 320px; }
}

/* Pages without a filters column (e.g. a single building): primary sized to its content
   (a narrow drawing, up to 60%), secondary takes the rest. Stacks only on phones. */
.workspace.no-filters { grid-template-columns: fit-content(60%) minmax(280px, 1fr); grid-template-areas: "primary secondary"; }
@media (max-width: 1100px) {
  .workspace.no-filters .secondary { position: sticky; max-height: calc(100vh - var(--head-h) - 32px); overflow: auto; }
}
@media (max-width: 700px) {
  .workspace.no-filters { grid-template-columns: minmax(0, 1fr); grid-template-areas: "primary" "secondary"; }
  .workspace.no-filters .secondary { position: static; max-height: none; overflow: visible; }
}