/* Styling for the skyscraper-viability report. Two-pane shell: control panel + map.
   Palette and layout intentionally echo the sibling viewer/ for visual consistency. */

:root {
  --bg: #f4f1ea;
  --panel: #fbf9f4;
  --ink: #1d2a33;
  --muted: #5d6b66;
  --line: rgba(29, 42, 51, 0.12);
  --accent: #8a2e12;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.control-panel {
  width: 360px;
  min-width: 320px;
  height: 100%;
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 20px;
}

.map-panel { flex: 1; position: relative; }
#map { position: absolute; inset: 0; }

.panel-header h1 { margin: 4px 0 8px; font-size: 1.45rem; line-height: 1.15; }
.header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.eyebrow {
  margin: 0; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.7rem; font-weight: 700; color: var(--accent);
}
.lang-toggle { display: flex; gap: 2px; flex-shrink: 0; }
.lang-toggle button {
  padding: 3px 8px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 0.72rem; font-weight: 700; color: var(--muted); border-radius: 5px;
}
.lang-toggle button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.intro { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }

.panel-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.panel-section h2 { margin: 0 0 10px; font-size: 0.95rem; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; }

.field-label {
  display: block; margin: 14px 0 6px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.field-label:first-child { margin-top: 0; }

select {
  width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; font-size: 0.9rem; color: var(--ink);
}

.field-help { margin: 8px 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.45; }
.toggle-row { display: flex; gap: 6px; }
.toggle-row.toggle-wrap { flex-wrap: wrap; }
.toggle-row.toggle-wrap button { flex: 1 1 40%; }
#use-toggle { flex-wrap: nowrap; }
#use-toggle button { flex: 1 1 0; min-width: 0; }
/* 5 layer buttons: a 2-col grid keeps every button the same width, so the lone last
   one ("Ostvarivo danas") sits at normal width instead of stretching across its row. */
#cap-toggle { display: grid; grid-template-columns: 1fr 1fr; }
.toggle-row button {
  flex: 1; padding: 8px 4px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 0.82rem; color: var(--ink);
}
.toggle-row button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Type toggle greyed out while a developability layer is active — those layers use the
   GUP-prescribed mix, so the selected type has no effect on them. */
#use-field.disabled-group { opacity: 0.45; pointer-events: none; }

.secondary-button {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 0.78rem; color: var(--ink);
}

/* collapsible assumptions */
.assumptions > summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
}
.assumptions > summary::-webkit-details-marker { display: none; }
.assumptions > summary h2 { margin: 0; }
.disclosure-caret {
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.assumptions[open] > summary .disclosure-caret { transform: rotate(45deg); }
.assumptions-body { margin-top: 14px; }
.assumptions-reset-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* sliders */
.slider-panel { display: flex; flex-direction: column; gap: 14px; }
.slider-row { display: grid; grid-template-columns: 1fr; gap: 4px; }
.slider-row .slider-head {
  display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem;
}
.slider-row .slider-name { color: var(--ink); }
.slider-row .slider-value { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); white-space: nowrap; }
.slider-row .slider-head .slider-name { min-width: 0; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.slider-row .slider-help { font-size: 0.68rem; color: var(--muted); }

/* legend */
.legend-caption { margin: 0 0 10px; font-size: 0.75rem; color: var(--muted); line-height: 1.45; }
.legend-note { margin: 2px 0 6px 24px; font-size: 0.7rem; color: var(--muted); line-height: 1.4; }
.legend { display: flex; flex-direction: column; gap: 4px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.legend-swatch { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--line); }
.legend-swatch.land-gap {
  opacity: 0.72;
  border: 1px solid #1f5eff;
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, #1f5eff 4px 6px);
}

/* selection card — fixed min-height so the layout never jumps between
   the full pro-forma and the short "no data" / empty message. */
.selection-card { min-height: 280px; }
/* selection card */
.selection-card { font-size: 0.84rem; line-height: 1.5; }
.selection-card .empty-state { color: var(--muted); font-style: italic; }
.selection-card h3 { margin: 0 0 8px; font-size: 1.0rem; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px dotted var(--line); }
.kv[title] { cursor: help; }
.kv[title] span:first-child { text-decoration: underline dotted var(--line); text-underline-offset: 2px; }
.kv span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.kv[class*="verdict-"] {
  margin: 4px 0 6px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f5ef;
}
.kv.verdict-viable { border-color: #87aa6d; background: #eef6e9; }
.kv.verdict-noLand { border-color: #8ba6ff; background: #eef3ff; }
.kv.verdict-noHeight { border-color: #b6b0a4; background: #f1eee8; }
.kv.verdict-viable span:last-child { color: #426b2a; }
.kv.verdict-noLand span:last-child { color: #1f4fd0; }
.kv.verdict-noHeight span:last-child { color: #756f66; }
.verdict { margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-weight: 700; text-align: center; }
.verdict.viable { background: #1f6f43; color: #fff; }
.verdict.marginal { background: #b8862b; color: #fff; }
.verdict.no { background: #6b7079; color: #fff; }

.note-card p { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: 0; }
.inline-message {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; font-size: 0.8rem;
  background: #fbe9e3; color: var(--accent);
}

.block-tooltip { font-size: 0.8rem; }
.block-tooltip strong { display: block; }

@media (max-width: 760px) {
  .app-shell { flex-direction: column; }
  .control-panel { width: 100%; min-width: 0; height: auto; max-height: 50vh; -webkit-overflow-scrolling: touch; }
  .map-panel { flex: 1; min-height: 50vh; }
  /* bigger touch targets */
  .toggle-row button { padding: 10px 4px; }
  .lang-toggle button { padding: 6px 12px; }
  .slider-row input[type="range"] { height: 26px; }
  .panel-header h1 { font-size: 1.3rem; }
  .selection-card { min-height: 264px; }
}
/* never let the body scroll behind the fixed two-pane shell */
html, body { -webkit-text-size-adjust: 100%; }

/* Developability layer: header project link, selection-card note + per-parcel drill list. */
.project-link { margin: 2px 0 8px; font-size: 0.72rem; }
.project-link a { color: var(--accent); font-weight: 700; text-decoration: none; }
.project-link a:hover { text-decoration: underline; }
.dev-note { margin: 10px 0 4px; font-size: 0.7rem; color: var(--muted); line-height: 1.4; }
.dev-parcels { margin-top: 8px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 8px; }
.dev-parcels h4 { margin: 0 0 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.kv.dev-parcel span:first-child { font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.panel-footer { margin-top: 6px; padding: 12px 0 4px; text-align: center; border-top: 1px solid rgba(0,0,0,0.08); }
.panel-footer a { color: var(--accent); font-weight: 700; text-decoration: none; font-size: 0.8rem; }
.panel-footer a:hover { text-decoration: underline; }