/* DL brand pair (per digital-landscapes.com relaunch): Source Sans 3 for
   headings/UI, Quattrocento Sans for body text. OFL-licensed, served locally. */
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Quattrocento Sans";
  src: url("fonts/QuattrocentoSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quattrocento Sans";
  src: url("fonts/QuattrocentoSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-head: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-body: "Quattrocento Sans", "Segoe UI", system-ui, sans-serif;
  --bg: #f4f2ee;
  --panel: #ffffff;
  --ink: #26241f;
  --ink-soft: #7a766d;
  --line: #ddd8cf;
  --accent: #26241f;
  --sheet: #fdfcf9;
  --card: #d9c39a;
  /* the viewport is the one dark surface: splats read best against it */
  --stage: #14161a;
  /* The upload glyph — an arrow rising out of a tray. Inlined as a mask so it
     takes its colour from the theme's own tokens and needs no second file. */
  --dz-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3l5 5h-3v7h-4V8H7l5-5z"/><path d="M4 17v3h16v-3h2v5H2v-5h2z"/></svg>');
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  display: flex; height: 100vh; overflow: hidden;
  font-family: var(--font-body);
  background: var(--bg); color: var(--ink);
}

/* ---------- sidebar ---------- */
#sidebar {
  width: 330px; min-width: 330px; height: 100%; overflow-y: auto; overflow-x: hidden;
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
}
#sidebar header { display: flex; align-items: center; gap: 10px; }
#logo { width: 34px; height: 34px; flex: none; }
#sidebar header h1 { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; }
#sidebar .sub { color: var(--ink-soft); font-size: .8rem; margin-top: 2px; }
#sidebar footer {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  color: var(--ink-soft); font-size: .74rem;
}

/* ---------- upload targets ----------
   ⚠️ STYLED BY CLASS, NOT BY THE FIRST ZONE'S ID. This block used to read
   `#dropzone .dz`, which styled the terrain target and NOTHING ELSE: the
   photographs, the orthophoto, the feature layers and the tile boundary all
   rendered as bare text with no border, no padding and no pointer cursor, so
   four of the five places you can load a file did not look like places you
   could load a file. Marc asked where the tile boundary was loaded, which is
   what an unclickable-looking control gets you. `.dz` is used on drop targets
   and nowhere else, so the class is the honest selector. */
#dropzone, #dropzone2, #dropzone3, #dropzone4, #dropzone5 {
  display: flex; flex-direction: column; gap: 7px; text-align: center;
}
.dz {
  cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: 6px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--panel);
  transition: border-color .12s, background .12s;
}
/* The affordance itself: an arrow into a tray. Drawn in CSS from the same two
   tokens as everything else rather than fetched, because this tool ships no
   icon set and must not start one for a single glyph. */
.dz::before {
  content: "";
  width: 15px; height: 15px; margin-bottom: 1px; flex: none;
  background: var(--ink-soft);
  transition: background .12s;
  -webkit-mask: var(--dz-arrow) center / contain no-repeat;
  mask: var(--dz-arrow) center / contain no-repeat;
}
.dz:hover { border-color: var(--ink-soft); background: var(--bg); }
.dz:hover::before { background: var(--ink); }
/* Only the target under the pointer lights up. A window-wide highlight would
   say "drop anywhere" at the exact moment the user is choosing WHICH. */
.dz.dragover { border-color: var(--ink); background: var(--bg); }
.dz.dragover::before { background: var(--ink); }
.dz strong { font-family: var(--font-head); font-size: .88rem; }
/* The call to action reads at body weight; the caveats step down, so the eye
   gets "what do I click" before "what must the file be". */
.dz .act { color: var(--ink); font-size: .78rem; }
.dz .fine, .dz > span:not(.act) { color: var(--ink-soft); font-size: .74rem; line-height: 1.45; }
#dropzone > .or { color: var(--ink-soft); font-size: .72rem; }

/* ---------- folding sub-sections ----------
   ⚠️ THE GRAMMAR IS DL-TerrainDiversity'S, DELIBERATELY — one window family
   across the tool set, not two. A fold is INDENTED under a hairline spine
   rather than ruled off, because a full-width rule made a sub-section
   typographically identical to a top-level panel: three subs inside one
   section then read as three more sections. An indent says "inside"; a rule
   says "next". */
details.sub { display: block; padding-left: 9px; border-left: 1px solid var(--line); margin-left: 1px; }
details.sub + details.sub { margin-top: 9px; }
details.sub > summary.subhead {
  cursor: pointer; list-style: none; user-select: none;
  display: block; padding: 2px 0;
}
details.sub > summary.subhead::-webkit-details-marker { display: none; }
details.sub > summary.subhead::before { content: "\25B8\A0"; font-size: .68rem; color: var(--ink-soft); }
details.sub[open] > summary.subhead::before { content: "\25BE\A0"; }
details.sub > summary.subhead:hover { color: var(--ink); }
/* The body spaces itself off the summary only when it is actually open, so a
   run of closed folds sits tight and the whole panel shortens. */
details.sub > .sub-body { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }


/* ── the "add another" strip ──────────────────────────────────────────────
   ⚠️ NOT THE BIG .dz BOX, and the difference is the point. A .dz is a
   destination you go to; this sits at the BOTTOM OF ITS OWN LIST and reads as
   "add another one of these" — the affordance the sibling tool uses for exactly
   this job. It is also LABELLED WITH ITS GEOMETRY, so nobody has to work out
   which zone takes a polygon. Ported from DL-TerrainSlicer's .shp-drop. */
.shpdrop {
  border: 1px dashed var(--line); border-radius: 4px;
  padding: 7px 9px; margin: 2px 0 6px; cursor: pointer;
  font-size: .78rem; color: var(--ink-soft); text-align: left;
  transition: border-color .12s, color .12s, background .12s;
}
.shpdrop:hover, .shpdrop.dragover {
  border-color: var(--ink); color: var(--ink); background: var(--bg);
}
.shpdrop b { font-family: var(--font-head); font-weight: 700; }

#scene-card { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.row-between { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#scene-name { font-size: .9rem; word-break: break-all; }

/* ---------- panels ---------- */
.panel { display: flex; flex-direction: column; gap: 9px; }
.panel h2 {
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
}
.meta { color: var(--ink-soft); font-size: .78rem; line-height: 1.4; }
.meta.keys { font-size: .74rem; }
.meta.keys b { color: var(--ink); font-weight: 700; }

.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

button {
  font: inherit; font-size: .82rem; cursor: pointer;
  padding: 7px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink);
}
button:hover { border-color: var(--ink-soft); }
button.toggle.on, button.tool.on { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
button.link {
  border: none; background: none; padding: 0;
  color: var(--ink-soft); font-size: .76rem; text-decoration: underline;
}
button.link:hover { color: var(--ink); }
button:disabled { opacity: .45; cursor: default; }

.field { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.field > span { display: flex; justify-content: space-between; color: var(--ink-soft); }
.field em { font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-soft); }
input[type=range] { width: 100%; accent-color: var(--ink); }
select {
  font: inherit; font-size: .82rem; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--sheet); color: var(--ink);
}

.list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.list li {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px;
  font-size: .8rem;
}
.list li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .val { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.list li button { padding: 2px 6px; font-size: .72rem; }
.list:empty { display: none; }

/* ---------- viewport ---------- */
#viewport { position: relative; flex: 1; background: var(--stage); }
#canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* measurement + annotation markers, projected each frame */
.marker {
  position: absolute; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sheet); border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.label {
  position: absolute; transform: translate(-50%, -140%);
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 3px 7px; font-size: .76rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.label.note { transform: translate(-50%, -160%); pointer-events: auto; max-width: 220px; white-space: normal; }
.label.note b { display: block; font-family: var(--font-head); }
#overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#overlay svg polyline, #overlay svg polygon { fill: rgba(217,195,154,.25); stroke: #fdfcf9; stroke-width: 1.5; }

.hud {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: rgba(38,36,31,.9); color: #fdfcf9;
  border-radius: 6px; padding: 7px 13px; font-size: .8rem;
  pointer-events: none;
}
#hint { top: 16px; }
#status { bottom: 16px; }

#dropveil {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(20,22,26,.8); border: 3px dashed var(--card);
  color: var(--sheet); font-family: var(--font-head); font-size: 1.1rem;
}
#dropveil.on { display: flex; }

@media (max-width: 760px) {
  body { flex-direction: column; }
  #sidebar { width: 100%; min-width: 0; height: auto; max-height: 46vh; border-right: none; border-bottom: 1px solid var(--line); }
  #viewport { flex: 1; min-height: 0; }
}