/*
 * sheet.css: the information panel, styled like a page from the cadastral extract:
 * hairline rows, tabular numbers, one dark rule where the data starts.
 *
 * Structure (see index.html):
 *   .sheet
 *     .sheet__bar    brand + language
 *     .sheet__body   scrolls
 *       .plot-head, .facts, .block, .fine-print
 *     .sheet__foot   show/hide button
 */

.sheet {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  width: var(--sheet-width);
  max-width: calc(100% - 2 * var(--edge));
  max-height: calc(100% - 2 * var(--edge));
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}

/* ------------------------------------------------------------------ Bar */

.sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.brand__mark { flex: none; display: block; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Body */

.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-4) var(--space-4);
  overscroll-behavior: contain;
}

.plot-head { margin-bottom: var(--space-4); }
.plot-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-title);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.plot-head__locality { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-muted); }

/* ------------------------------------------------------------------ Facts */

.facts { border-top: 2px solid var(--ink); }

.fact {
  display: grid;
  grid-template-columns: 8.25rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.fact dt { font-size: var(--text-sm); color: var(--ink-muted); padding-top: 0.1em; }
.fact dd { font-weight: 550; font-variant-numeric: tabular-nums; }
.fact__note { display: block; margin-top: 2px; font-size: var(--text-sm); font-weight: 400; color: var(--ink-muted); }

/* The area is the headline fact: label above, big figure below. */
.fact--area { display: block; padding: var(--space-4) 0 var(--space-3); }
.fact--area dt { padding: 0; }
.fact__figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-figure);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.fact__unit {
  margin-left: 0.2em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------ Boundary block */

.block { margin-top: var(--space-5); }
.block__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--text-base);
  letter-spacing: -0.005em;
}

/* The plan sketch (drawn by src/sketch.js). Colours come from tokens.css. */
.sketch {
  display: block;
  width: 100%;
  height: auto;
  background: var(--sheet-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.sketch__shape       { fill: var(--parcel-fill); stroke: var(--parcel-stroke); stroke-width: 2.25; stroke-linejoin: round; }
.sketch__dot         { fill: var(--ink); }
.sketch__corner      { font: 700 12px var(--font-body); fill: var(--ink); }
.sketch__length      { font: 500 12px var(--font-body); fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sketch__north       { stroke: var(--ink); stroke-width: 1.5; }
.sketch__arrowhead   { fill: var(--ink); }
.sketch__north-label { font: 700 11px var(--font-body); fill: var(--ink); }

/* Coordinates table, tucked away until asked for. */
.coords { margin-top: var(--space-3); font-size: var(--text-sm); }
.coords summary {
  cursor: pointer;
  padding: var(--space-1) 0;
  font-weight: 600;
  color: var(--ink);
}
.coords table { width: 100%; margin-top: var(--space-2); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.coords th, .coords td { padding: 0.4rem 0; border-top: 1px solid var(--line); text-align: right; font-weight: 400; }
.coords thead th { color: var(--ink-muted); font-size: var(--text-xs); font-weight: 500; }
.coords tbody th, .coords thead th:first-child { text-align: left; font-weight: 600; }

/* "Numbers check out" line */
.verify {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.verify__mark {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--ok);
}
.verify[data-state="mismatch"] { color: var(--warn); }
.verify[data-state="mismatch"] .verify__mark { background: var(--warn); }

.fine-print {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-muted);
}

/* --------------------------------------------------------- Legend (portfolio clients/projects, project plots) */

.legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.legend__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.legend__swatch {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Colour <input>s draw their own swatch inside; make it fill the circle we sized above. */
.legend__swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.legend__swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.legend__swatch::-moz-color-swatch { border: none; border-radius: 50%; }

.legend__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legend__name--link { color: inherit; text-decoration: none; cursor: pointer; }
.legend__name--link:hover { text-decoration: underline; }
.legend__meta { flex: none; color: var(--ink-muted); }
.legend__count { flex: none; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.legend__edit {
  flex: none;
  margin-left: var(--space-1);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  text-decoration: none;
}
.legend__edit:hover { color: var(--ink); text-decoration: underline; }
/* The row's Delete is a <button>: strip the button look so it sits beside Edit like a plain link. */
.legend__delete { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-xs); cursor: pointer; }
.legend__delete:hover, .legend__delete[data-confirming] { color: var(--warn); }
.group-actions__delete[data-confirming] { border-color: var(--warn); }

.group-new { width: 100%; margin-top: var(--space-3); }

/* A client row is an item holding the row itself and, when open, its plot list underneath. */
.legend__item { border-bottom: 1px solid var(--line); }
.legend__item > .legend__row { border-bottom: 0; }
.legend__name--button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 550;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.legend__name--button::after { content: " ▾"; color: var(--ink-muted); font-size: var(--text-xs); }
.legend__name--button[aria-expanded="true"]::after { content: " ▴"; }
.legend__name--button:hover { text-decoration: underline; }
.legend__swatch--none { cursor: default; background: var(--client-color-none); }
.legend__row--none { margin: 0; }

/* Search box above a plot list (group editor, owner's plot list). */
.plot-search {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
}
.plot-search:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.plot-search--client { width: calc(100% - 1.4rem); margin: 0 0 var(--space-1) 1.4rem; }
.plot-search__none { margin-top: 0; padding-top: 0; border-top: 0; }

/* The plot list under an open client: tick a plot to move it here. */
.client-plots {
  margin: 0 0 var(--space-2) 1.4rem;
  padding: var(--space-1) var(--space-3);
  background: var(--sheet-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  max-height: 16rem;
  overflow-y: auto;
}
.client-plots__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.client-plots__owner {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

/* "Plots" on the "all plots" panel: every plot, its owner and "Delete". Scrolls when there are many. */
.plot-list {
  max-height: 20rem;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  overscroll-behavior: contain;
}
.plot-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.plot-list__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; color: inherit; text-decoration: none; }
.plot-list__name:hover { text-decoration: underline; }
.plot-list__area { flex: none; color: var(--ink-muted); font-size: var(--text-xs); }
.plot-list__who { flex: none; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); font-size: var(--text-xs); }
.plot-list__owner {
  flex: none;
  max-width: 8.5rem;
  padding: 2px var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--ink);
}
.plot-list__owner:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.client-plots__pick { display: flex; flex: none; align-items: center; cursor: pointer; }
/* The plot's name opens it (like the "Plots" list); the tick box beside it moves it to this owner. */
.client-plots__name { flex: none; white-space: nowrap; color: inherit; text-decoration: none; }
.client-plots__name:hover { text-decoration: underline; }

/* "Add client": a text box and a button on one line. */
.add-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.add-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
}
.add-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Staff-only box on a plot (set encumbrances). */
.manage {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
}
.manage summary { cursor: pointer; font-weight: 600; color: var(--ink-muted); }
.manage .field:first-of-type { margin-top: var(--space-3); }
.manage .control { margin-top: var(--space-3); }

/* Public presentation (present.html): one card per plot. */
.lot { scroll-margin-top: var(--space-3); border-radius: var(--radius-control); transition: box-shadow var(--duration) var(--ease); }
.lot.is-focused { box-shadow: 0 0 0 3px var(--flag); }
.lot__sketch { margin-top: var(--space-3); }

/* ------------------------------------------------------------------ Back button */

.sheet__back {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink-muted);
  cursor: pointer;
}
.sheet__back::before { content: "←"; }
.sheet__back:hover { color: var(--ink); }

/* ------------------------------------------------------------------ Form fields (group editor) */

.field { margin-top: var(--space-4); font-size: var(--text-sm); }
.field label { display: block; margin-bottom: var(--space-1); color: var(--ink-muted); }
.field input[type="text"] {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  font: inherit;
  color: var(--ink);
}
.field input[type="text"]:focus-visible, .field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.field select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  font: inherit;
  color: var(--ink);
}
.field__hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); }

.field--row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.field--row input[type="color"] {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: none;
  cursor: pointer;
}
.field--row input[type="color"]:disabled { opacity: 0.35; cursor: not-allowed; }

/* ------------------------------------------------------------------ Group picker (checkboxes) */

.group-picker { display: flex; flex-direction: column; gap: var(--space-3); }
.group-picker__client {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.group-picker__client legend {
  padding: 0 var(--space-1);
  font-weight: 650;
  font-size: var(--text-sm);
}
.group-picker__row {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.group-picker__row input { margin-right: var(--space-2); }

.group-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.group-actions__delete { margin-left: auto; color: var(--warn); }

/* ------------------------------------------------------------------ Claude's view (advice on a plot) */

.advice { font-size: var(--text-sm); }
.advice p + p, .advice__list, .advice__chips { margin-top: var(--space-2); }
.advice__message { padding: var(--space-3); background: var(--sheet-sunk); border-radius: var(--radius-control); color: var(--ink-muted); }
.advice[data-state="error"] .advice__message { color: var(--warn); }
.advice__place { color: var(--ink-muted); }
.advice__subtitle {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--text-sm);
}
.advice__list { margin-bottom: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.advice__list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.advice__list strong { display: block; font-weight: 600; }
.advice__list span { color: var(--ink-muted); }
.advice__list--plain li { color: var(--ink-muted); }

/* The suggested group is a raised card, so it reads as one thing shared by all of its plots. */
.advice__group {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--sheet-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.advice__group .advice__subtitle { margin-top: 0; color: var(--ink-muted); font-weight: 500; }
.advice__group-name { margin-top: var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.advice__group .control { margin-top: var(--space-3); }
.advice__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; list-style: none; }
.advice__chips li { padding: 2px var(--space-2); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.advice__chips a { color: inherit; text-decoration: none; }
.advice__chips a:hover { text-decoration: underline; }
.advice__chips span:empty { display: none; }
.advice__idea { color: var(--ink-muted); }
.advice__confidence { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--ink-muted); }
.advice__refresh {
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 550;
  color: var(--ink-muted);
  text-decoration: underline;
  cursor: pointer;
}
.advice__refresh:hover { color: var(--ink); }
.advice .fine-print { margin-top: var(--space-3); }

/* ------------------------------------------------------------------ Foot */

.sheet__foot { border-top: 1px solid var(--line); }
.sheet__toggle {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 550;
  text-align: center;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.sheet__toggle:hover { background: var(--sheet-sunk); }

.is-sheet-collapsed .sheet__body { display: none; }

/* ------------------------------------------------------------------ Phones: panel sits under the map */

@media (max-width: 47.5rem) {
  .sheet {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    max-height: 52dvh;
    border-width: 1px 0 0;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .fact--area { padding-top: var(--space-3); }
  .fact__figure { font-size: calc(var(--text-figure) * 0.85); }
}

/* ------------------------------------------------------------------ Sign out (in the top bar) */

.sheet__bar-end { display: flex; align-items: center; gap: var(--space-2); }
.sheet__sign-out {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 550;
  color: var(--ink-muted);
  cursor: pointer;
}
.sheet__sign-out:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------------ Upload extracts (?uploads=1) */

.dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink-muted);
  text-align: center;
  cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--flag); color: var(--ink); }
.dropzone:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Files chosen but not sent yet, each with its owner. */
.staging { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--sheet-sunk); font-size: var(--text-sm); }
.staging__all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 600; }
.staging__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.staging__row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.staging__row .upload__name { flex: 1 1 auto; min-width: 0; }
.staging__row select { flex: none; max-width: 50%; }
.staging .group-actions { margin-top: var(--space-3); }

.staging select, .upload__owner select {
  min-height: 2rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}

/* "Enter a plot by hand": the same form fields as elsewhere, a wide box for the pasted coordinates, and a line that
   says what they make as you type (data-state: ok | warn | bad). */
.entry { margin-top: var(--space-3); }
.entry > .field__hint:first-of-type { margin-top: var(--space-2); }
.entry input[type="text"], .entry select, .entry__corners {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  font: inherit;
  color: var(--ink);
}
.entry input[type="text"]:focus-visible, .entry__corners:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.entry input:user-invalid { border-color: var(--warn); }
.entry__corners { resize: vertical; font-variant-numeric: tabular-nums; white-space: pre; overflow-x: auto; }
.entry__trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.entry__trio label span { display: block; margin-bottom: var(--space-1); }
.entry__check { margin-top: var(--space-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.entry__check:empty { display: none; }
.entry__check[data-state="ok"] { color: var(--ok); }
.entry__check[data-state="warn"] { color: var(--badge-wait-text); }
.entry__check[data-state="bad"] { color: var(--warn); }
.entry .advice__message { margin-top: var(--space-3); }
.entry .group-actions { margin-top: var(--space-3); }
.entry .group-actions .control { margin-top: 0; }
.entry[data-state="error"] .advice__message { color: var(--warn); }
@media (max-width: 22rem) {
  .entry__trio { grid-template-columns: 1fr; }
}

.add-row--wrap { flex-wrap: wrap; }
.add-row--wrap input { flex-basis: 100%; }

.upload-queue { list-style: none; margin: var(--space-3) 0 0; padding: 0; font-size: var(--text-sm); color: var(--ink-muted); }
.upload-queue li { padding: var(--space-1) 0; overflow-wrap: anywhere; }
.upload-queue li.is-ok { color: var(--ok); }
.upload-queue li.is-fail { color: var(--warn); }

/* The review list: one row per uploaded PDF. */
.block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.block__head .advice__refresh { margin-top: 0; }
.block__count { color: var(--ink-muted); font-weight: 500; }
/* A short explanation straight under a block's title (fine print normally closes a panel, with a rule above). */
.fine-print--lead { margin: 0 0 var(--space-2); padding-top: 0; border-top: 0; }
.upload-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-muted); }
.upload-note:empty, .uploads:empty { display: none; }
.uploads { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: 1px solid var(--line); }
.upload { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.upload__main { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.upload__name { font-weight: 600; overflow-wrap: anywhere; }
.upload__meta { margin-top: var(--space-1); color: var(--ink-muted); }
.upload__owner { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--ink-muted); }
.upload__owner select { flex: 1 1 auto; min-width: 0; }
.upload__error { margin-top: var(--space-1); color: var(--warn); }
.upload__notes { margin: var(--space-1) 0 0; padding-left: 1.1em; color: var(--ink-muted); }
.upload__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.upload__actions .control { min-height: 2rem; padding: 0 var(--space-3); border: 1px solid var(--line); }
.upload__actions .control:disabled { opacity: 0.45; cursor: not-allowed; }
.control--warn { color: var(--warn); }
.control--warn[data-confirming] { border-color: var(--warn); }

.badge {
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--sheet-sunk);
  color: var(--ink-muted);
}
.badge[data-status="pending"], .badge[data-status="needs_review"], .badge[data-status="no_coordinates"] { background: var(--badge-wait-bg); color: var(--badge-wait-text); }
.badge[data-status="approved"] { background: var(--badge-ok-bg); color: var(--ok); }
.badge[data-status="infected"], .badge[data-status="unreadable"], .badge[data-status="rejected"] { background: var(--badge-bad-bg); color: var(--warn); }
.badge[data-status="duplicate"], .badge[data-status="unsupported"] { background: var(--badge-odd-bg); color: var(--badge-odd-text); }

/* "Approve all ready" on the upload review list. */
.upload-approve-all { width: 100%; margin-bottom: var(--space-2); }
.upload-approve-all:disabled { opacity: 0.5; cursor: not-allowed; }

/* "All · To review · No coordinates · ...": wraps onto a second line on a phone. */
.upload-filter { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.upload-filter .control { gap: 0.35em; min-height: 1.75rem; padding: 0 var(--space-2); font-size: var(--text-xs); }
.upload-filter__count { opacity: 0.7; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Price estimate and urban certificates (staff)
   The plot page's #plot-pricing and #plot-permits, filled by src/pricing-panel.js. */

.pricing__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 0; }
.pricing__total {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pricing__per { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pricing__range { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pricing__warnings { margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.pricing__warnings li { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--warn); background: var(--sheet-sunk); color: var(--ink); }
.pricing__warnings li + li { margin-top: var(--space-1); }

.pricing__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.pricing__facts dt { color: var(--ink-muted); font-size: var(--text-xs); }
.pricing__facts dd { margin: 0; font-weight: 600; }
.pricing__reasoning { margin-top: var(--space-3); font-size: var(--text-sm); }
.pricing__effect { font-weight: 600; font-variant-numeric: tabular-nums; }
.pricing__adjustments strong { display: inline; }
.pricing__adjustments span { color: var(--ink-muted); }
.pricing__adjustments .pricing__effect { color: var(--ink); }

.pricing__nearby, .pricing__sources, .pricing__choices { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.pricing__nearby li, .pricing__sources li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-3);
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.pricing__nearby li > :last-child { text-align: right; color: var(--ink-muted); }
.pricing__sources li { flex-direction: column; }
.pricing__sources li span { color: var(--ink-muted); font-size: var(--text-xs); }
.pricing__sources a { color: var(--ink); overflow-wrap: anywhere; }

.pricing__together { margin: var(--space-4) 0 0; padding: var(--space-2) var(--space-3) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); font-size: var(--text-sm); }
.pricing__together legend, .permits fieldset legend { padding: 0 var(--space-1); color: var(--ink-muted); }
.pricing__choices .field { margin-top: var(--space-2); }
.pricing__choices .legend__meta { margin-left: auto; }
.pricing .control:disabled { opacity: 0.45; cursor: not-allowed; }
.pricing .group-actions { margin-top: var(--space-3); }
.pricing .field textarea, .permits .field textarea, .permits .field input[type="date"], .permits .field input[type="number"] {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--sheet-raised);
  font: inherit;
  color: var(--ink);
}
.pricing .field textarea { resize: vertical; }
.pricing[data-state="running"] [data-pricing-message] { color: var(--ink); }

.permits__list { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.permits__item {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--sheet-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
}
.permits__item p { margin: var(--space-1) 0 0; }
.permits__item p:empty { display: none; }
.permits__name { margin-top: 0 !important; font-weight: 600; }
.permits__relation { color: var(--ok); }
.permits__relation[data-state="assumed"] { color: var(--badge-wait-text); }
.permits__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.permits__item .control { margin-top: var(--space-2); }

/* Two small fields side by side (dates, POT and CUT); one under the other on a narrow phone. */
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field--pair label span, .permits__utilities label span { display: block; margin-bottom: var(--space-1); }
.permits__utilities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); margin-left: 0; margin-right: 0; padding: var(--space-2) var(--space-3) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); }
.permits__utilities legend { grid-column: 1 / -1; }
@media (max-width: 22rem) {
  .field--pair, .permits__utilities, .pricing__facts { grid-template-columns: 1fr; }
}