:root {
  --ink: #172522;
  --muted: #66736f;
  --paper: #f4f1e9;
  --panel: #fffdf7;
  --panel-2: #f5f1e7;
  --line: #d9d8ce;
  --sun: #ffbd51;
  --sun-deep: #f28b3c;
  --water: #a9c8cf;
  --green: #789474;
  --green-area: #cbdcb8;
  --road: #dcd8cd;
  --road-casing: #c4bfb0;
  --paved: #e7e2d5;
  --rail: #b3aea3;
  --shore: #8bb0ba;
  --shade: #243d4a;
  --accent: #d65d3d;
  --building: #d8d2c5;
  --building-line: #a9a79f;
  --terrace: #e9e3d4;
  --grid-cold: #315b6a;
  --grid-hot: #ffbd51;
  --focus: #2f6fed;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --ink: #eef2f0;
    --muted: #9aa6a1;
    --paper: #14201d;
    --panel: #1b2825;
    --panel-2: #202e2a;
    --line: #35423e;
    --sun: #ffcf85;
    --sun-deep: #f6a35c;
    --water: #35545c;
    --green: #5f7a5c;
    --green-area: #2f3f33;
    --road: #2f3b36;
    --road-casing: #232e2a;
    --paved: #26332e;
    --rail: #47514b;
    --shore: #4d6f78;
    --shade: #0b1a22;
    --accent: #ef8a68;
    --building: #3a423d;
    --building-line: #545e57;
    --terrace: #2a352f;
    --grid-cold: #2c4b57;
    --grid-hot: #ffcf85;
  }
}

:root[data-theme="dark"] {
  --ink: #eef2f0;
  --muted: #9aa6a1;
  --paper: #14201d;
  --panel: #1b2825;
  --panel-2: #202e2a;
  --line: #35423e;
  --sun: #ffcf85;
  --sun-deep: #f6a35c;
  --water: #35545c;
  --green: #5f7a5c;
  --green-area: #2f3f33;
  --road: #2f3b36;
  --road-casing: #232e2a;
  --paved: #26332e;
  --rail: #47514b;
  --shore: #4d6f78;
  --shade: #0b1a22;
  --accent: #ef8a68;
  --building: #3a423d;
  --building-line: #545e57;
  --terrace: #2a352f;
  --grid-cold: #2c4b57;
  --grid-hot: #ffcf85;
}

* { box-sizing: border-box; }

html, body { background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 189, 81, .13), transparent 30rem),
    var(--paper);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; color: inherit; }

a { color: var(--accent); }

.shell {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 22px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.subtitle {
  max-width: 610px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.location {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

.location::before {
  width: 9px;
  height: 9px;
  border: 2px solid var(--accent);
  border-radius: 50% 50% 50% 0;
  content: "";
  transform: rotate(-45deg);
}

.theme-toggle {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.site-switcher {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}

.site-switcher[hidden] { display: none; }

.data-note {
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
}

.data-note[hidden] { display: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.stat {
  min-height: 96px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.stat-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.stat strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.1;
}

.stat small { color: var(--muted); }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  align-items: start;
}

.map-card, .controls, .side-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
}

.map-card { overflow: hidden; }

.map-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.map-toolbar strong { font-size: 13px; }
.map-toolbar span { color: var(--muted); font-size: 12px; }

.mode-switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}

.mode-switch button {
  min-height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.mode-switch button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
}

.mode-switch button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.map-wrap {
  position: relative;
  aspect-ratio: 100 / 67;
  min-height: 470px;
  background: #e8e5da;
}

:root:not([data-theme="light"]) .map-wrap { @media (prefers-color-scheme: dark) { background: #1a2420; } }
:root[data-theme="dark"] .map-wrap { background: #1a2420; }

svg { display: block; width: 100%; height: 100%; }

.north-arrow, .scale-bar, .map-note {
  position: absolute;
  z-index: 4;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
  opacity: .95;
}

.north-arrow {
  top: 14px;
  right: 14px;
  width: 48px;
  padding: 7px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.north-arrow b { display: block; font-size: 14px; }

.scale-bar {
  bottom: 14px;
  right: 14px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
}

.scale-bar i {
  display: block;
  width: 22px;
  height: 6px;
  border-top: 3px solid var(--ink);
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

.map-note {
  left: 14px;
  bottom: 14px;
  max-width: 260px;
  padding: 9px 11px;
  color: var(--muted);
  font-size: 11px;
}

.controls {
  position: sticky;
  top: 12px;
  padding: 17px;
}

.controls h2 {
  margin: 0 0 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 500;
}

.controls > p {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 12px;
}

.control {
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.control-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.control-head label { font-size: 12px; font-weight: 750; }
.control-head output { color: var(--accent); font-size: 12px; font-weight: 750; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .03em;
}

.badge[hidden] { display: none; }

.leaf-off-badge {
  color: var(--sun-deep);
  background: rgba(255, 189, 81, .16);
}

input[type="range"] {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, var(--sun-deep) var(--fill, 50%), var(--line) var(--fill, 50%));
  appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--sun-deep);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  cursor: pointer;
  appearance: none;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--sun-deep);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  cursor: pointer;
}

input[type="range"]:focus-visible,
button:focus-visible,
.table-hit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The time slider's track IS the day: grey outside the sunlit window, sun
   between --sun-a and --sun-b (written by renderSunWindow()). Unlike the day
   slider it draws no --fill progress bar — one meaning per pixel, and the
   thumb already shows the current moment. The stops are plain value/max
   percentages of the day span, so like the --fill gradient above they ignore
   the 18px thumb's inset and sit up to ~9px off at 00:00 / 24:00; both
   sliders being consistently off beats correcting only one of them. The 0%
   defaults leave a flat --line track, which is also the "no direct sun today"
   state. */
#timeSlider {
  background: linear-gradient(90deg,
    var(--line) var(--sun-a, 0%), var(--sun) var(--sun-a, 0%),
    var(--sun) var(--sun-b, 0%), var(--line) var(--sun-b, 0%));
}

.sun-span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* Daylight strip under the time slider. preserveAspectRatio="none" stretches the
   viewBox (rewritten to `0 0 {n_steps} 14` by renderSunStrip()) to the control's
   width, so x is the schedule step index regardless of rendered size. Keep this
   height in step with STRIP_H in app.js: y is not stretched, so 1 user unit is
   1 CSS pixel only while the two agree. */
.sun-strip {
  display: block;
  width: 100%;
  height: 14px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--panel-2);
  cursor: pointer;
}

.sun-strip rect { shape-rendering: crispEdges; }

/* Marker lines carry vector-effect="non-scaling-stroke" (set in app.js) so the
   non-uniform viewBox stretch cannot smear their width. */
.strip-mark-sunrise, .strip-mark-sunset { stroke: var(--muted); }
/* --accent, not --ink: this mark always lands where the terrace has just run
   out of sun, i.e. on the cold (dark) end of colorForRatio()'s ramp. */
.strip-mark-loses { stroke: var(--accent); }

.ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
}

.strip-caption {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.actions {
  display: grid;
  grid-template-columns: 46px repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}

button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

button:hover { border-color: var(--muted); }
button.primary { color: var(--paper); border-color: var(--ink); background: var(--ink); }

.height-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.day-picker {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  align-items: center;
}

.height-presets button[aria-pressed="true"],
.day-picker button[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--ink);
  background: var(--ink);
}

.toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.toggle[hidden] { display: none; }

.toggle input { accent-color: var(--accent); }

.sun-compass {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border-radius: 12px;
  background: var(--panel-2);
}

.dial {
  position: relative;
  width: 78px;
  height: 78px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 48%, rgba(0,0,0,.06) 49%, transparent 51%);
}

.dial span {
  position: absolute;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.sun-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  margin: -7.5px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 1px 8px rgba(242, 139, 60, .7);
  transition: top .15s ease, left .15s ease;
}

.sun-dot.below { opacity: .25; }

.sun-copy strong { display: block; font-size: 13px; }
.sun-copy span { color: var(--muted); font-size: 11px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.legend span { display: inline-flex; align-items: center; gap: 6px; }
/* ...but `display` here outranks the UA sheet's `[hidden] { display: none }`, so
   conditional entries (#lastSunLegend, #waterLegend, #roadLegend) need this to hide at all. */
.legend span[hidden] { display: none; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
/* The two stops mirror colorForRatio()'s cold/hot constants in app.js. */
.swatch-gradient { background: linear-gradient(90deg, #2c4b57, #ffbd51); }

.method {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: var(--panel-2);
  font-size: 12px;
}

.method strong { color: var(--ink); }

.site-footer {
  margin-top: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.side-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.side-panel { padding: 16px; }
.side-panel h3 { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 500; }
.side-panel p.hint { margin: 0 0 10px; color: var(--muted); font-size: 11px; }

.table-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  font-size: 12px;
}

.table-detail-grid dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.table-detail-grid dd { margin: 0; font-weight: 700; }
.table-detail-grid dd.secondary { font-size: 11px; font-weight: 600; color: var(--muted); }

#horizonPanel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 100;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}

.provenance-list { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.provenance-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.provenance-list li:first-child { border-top: none; padding-top: 0; }
.confidence-high { color: #3c8a52; }
.confidence-medium { color: var(--sun-deep); }
.confidence-low { color: var(--accent); }

.licence-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10.5px; }

.site-label { fill: #52605c; font: 700 2px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
:root:not([data-theme="light"]) .site-label { @media (prefers-color-scheme: dark) { fill: #a9b3ae; } }
:root[data-theme="dark"] .site-label { fill: #a9b3ae; }

.small-label { fill: var(--muted); font: 1.55px/1 Inter, sans-serif; }

.building { fill: var(--building); stroke: var(--building-line); stroke-width: .25; }
.terrace-shape { fill: var(--terrace); stroke: var(--building-line); stroke-width: .22; }
.shadow-layer { pointer-events: none; }
.shadow-layer polygon { fill: #1d5364; stroke: none; }
.shadow-layer line { fill: none; stroke: #1d5364; }
.shadow-fill { opacity: .35; }
/* Base map (plan 20260819_05): the optional context layer drawn underneath
   everything else from basemap.json. `pointer-events: none` is load-bearing —
   the layer spans the whole map and would otherwise swallow the clicks meant
   for the tables and obstacles drawn on top of it. Widths on the line kinds
   are real metres (set per feature by app.js), so they scale with pan/zoom. */
.basemap { pointer-events: none; }
.bm-water { fill: var(--water); }
.bm-green { fill: var(--green-area); }
.bm-paved { fill: var(--paved); }
.bm-pier { fill: var(--paved); stroke: var(--road-casing); stroke-width: .2; }
.bm-parking { fill: var(--road); }
.bm-road-casing { stroke: var(--road-casing); fill: none; }
.bm-road { stroke: var(--road); fill: none; }
.bm-path { stroke: var(--road); fill: none; stroke-dasharray: 1.2 1.0; }
.bm-rail { stroke: var(--rail); fill: none; stroke-dasharray: 2.0 1.4; }
.bm-shore { stroke: var(--shore); fill: none; stroke-width: .35; }

.tree { fill: var(--green); stroke: #526b50; stroke-width: .22; }
.umbrella { fill: rgba(203, 218, 142, .8); stroke: #91a46c; stroke-width: .18; }

.table-ring { fill: var(--panel); stroke-width: .5; cursor: pointer; }
.table-ring.sun { stroke: #df8f30; }
.table-ring.shade { stroke: #1d5364; }
.table-ring.selected { stroke-width: .8; }
.table-hit { fill: transparent; cursor: pointer; }
.table-num { font: 700 1.7px/1 Inter, sans-serif; fill: var(--ink); text-anchor: middle; pointer-events: none; }

.grid-cell { stroke: none; cursor: default; }

.sun-arrow { stroke: var(--sun-deep); stroke-width: .6; fill: none; marker-end: url(#sunArrowHead); }

#siteMap { touch-action: none; cursor: grab; }
.map-wrap.panning #siteMap { cursor: grabbing; }
#siteMap:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.scale-bar span { font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 1fr; }
  .controls { position: static; }
  .map-wrap { min-height: 390px; }
  .side-panels { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .shell { padding: 13px; }
  header { align-items: flex-start; flex-direction: column; }
  header > div, .header-right { max-width: 100%; }
  .location { white-space: normal; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 84px; }
  .map-wrap { min-height: 330px; aspect-ratio: auto; height: 64vh; }
  .map-note { max-width: 210px; }
  .actions { grid-template-columns: 1fr 1fr; }
}

/* --- editor (plan 07b) + shared map-toolbar controls (.tool-group, plan T3) --- */

.editor-shell .eyebrow a { color: inherit; }

.editor-link { display: inline-flex; align-items: center; text-decoration: none; }

.editor-workspace { grid-template-columns: minmax(0, 1fr) 360px; }

.tool-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}

.tool-group button {
  min-height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.tool-group button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }

.imagery-toggle { padding: 0 8px 0 4px; border: none; background: none; }
.imagery-toggle[hidden] { display: none; }

#editorMap { cursor: crosshair; touch-action: none; }
#editorMap:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.editor-controls { max-height: none; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.field-grid.three { grid-template-columns: repeat(3, 1fr); }

.field-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.field-grid input, .field-grid select,
#selectionFields input, #selectionFields select {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

#selectionFields { display: flex; flex-direction: column; gap: 8px; }
#selectionFields label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }

.blank-form { margin-bottom: 14px; padding: 16px; }
.blank-form h3 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 500; }
.blank-form button.primary { margin-top: 12px; }

.draft-note { display: flex; align-items: center; gap: 8px; }

.linklike {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  min-height: 0;
}

.actions.two { grid-template-columns: 1fr 1fr; }

.export-panel code {
  display: block;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 10.5px;
  word-break: break-all;
}

.validation-list { margin: 0 0 6px; padding: 0; list-style: none; font-size: 11.5px; }
.validation-list:empty { margin: 0; }
.validation-error { padding: 4px 8px; margin-bottom: 4px; border-radius: 6px; background: rgba(214, 93, 61, .12); color: var(--accent); }
.validation-warning { padding: 4px 8px; margin-bottom: 4px; border-radius: 6px; background: rgba(255, 189, 81, .16); color: var(--sun-deep); }

.base-footprint { fill: var(--building); stroke: var(--building-line); stroke-width: .25; opacity: .45; pointer-events: none; }
.base-tree { fill: var(--green); stroke: #526b50; opacity: .4; }
.base-umbrella { fill: rgba(203, 218, 142, .5); stroke: #91a46c; }

.editor-terrace { fill: rgba(233, 227, 212, .55); stroke: var(--accent); stroke-width: .3; cursor: move; }
.editor-obstacle { stroke-width: .25; cursor: move; }
.editor-tree { fill: rgba(120, 148, 116, .7); stroke: #526b50; }
.editor-umbrella { fill: rgba(203, 218, 142, .85); stroke: #91a46c; }
.editor-other, .editor-building { fill: rgba(216, 210, 197, .85); stroke: var(--building-line); }
.editor-obstacle.selected, .editor-terrace.selected { stroke: var(--focus); stroke-width: .5; }

.editor-table .table-ring { fill: var(--sun); stroke: var(--ink); stroke-width: .3; cursor: move; }
.editor-table.selected .table-ring { stroke: var(--focus); stroke-width: .5; }
.editor-table .table-hit { fill: transparent; }

.vertex-handle { fill: var(--panel); stroke: var(--accent); stroke-width: .3; cursor: pointer; }
.vertex-handle.selected { fill: var(--focus); stroke: var(--focus); }
.radius-handle { stroke: var(--muted); }

.draft-ring { fill: none; stroke: var(--accent); stroke-width: .3; stroke-dasharray: 1 0.6; }
.draft-vertex { fill: var(--accent); }
.draft-vertex.draft-first { fill: var(--focus); }

#imageryLayer image { opacity: .95; }

@media (max-width: 980px) {
  .editor-workspace { grid-template-columns: 1fr; }
}