:root {
  --bg: #f4f5f7; --panel: #ffffff; --ink: #14171c; --muted: #596273; --line: #dde1e7;
  --accent: #0b64c0; --accent-ink: #ffffff; --danger: #c22b2b; --stage: #1a1e24;
  --radius: 10px; --tap: 44px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1115; --panel: #171b21; --ink: #e7eaef; --muted: #9aa4b2; --line: #2a313b;
    --accent: #4da3ff; --accent-ink: #04111f; --danger: #ff7b7b; --stage: #090b0e;
  }
}
* { box-sizing: border-box; }
/* Fixed page height only on desktop, where the stage should fill the viewport.
   On phones the page must grow with its content, or flex shrinks the toolbar
   and results panel to slivers. */
@media (min-width: 901px) { html, body { height: 100%; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1, h2 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.15rem; }
h2 { font-size: 1rem; }
[hidden] { display: none !important; }

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.tabs { display: flex; gap: 4px; background: var(--bg); padding: 3px; border-radius: var(--radius); }
.tabs button {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.units { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-left: auto; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg label { display: block; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 0 14px; line-height: 38px; font-weight: 600; color: var(--muted); }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

.field { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; color: var(--muted); }
.field.grow { flex: 1 1 120px; }
select, input[type=number], input[type=text], input:not([type]) {
  min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: .95rem; min-width: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; padding: 12px 16px 16px; min-height: 0; }
.workspace { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.view { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }

.toolbar { display: flex; flex: none; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.group { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.btn, .tool {
  min-height: var(--tap); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover, .tool:hover { border-color: var(--muted); }
.tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .45; cursor: default; }
.link { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 4px; text-decoration: underline; }

.calbar {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 6px 12px;
  border: 1px solid var(--line); border-left: 4px solid #12b886; border-radius: 8px; background: var(--panel); font-size: .9rem;
}
.stage {
  position: relative; flex: 1; min-height: 360px; background: var(--stage);
  border-radius: var(--radius); overflow: hidden; touch-action: none;
}
#photo-canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: grab; }
#photo-canvas[data-tool="pan"] { cursor: grab; }
#photo-canvas:not([data-tool="pan"]) { cursor: crosshair; }
.loupe {
  position: absolute; left: 0; top: 0; width: 128px; height: 128px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 4px 16px rgb(0 0 0 / .5); pointer-events: none; z-index: 5;
}
.empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto; }
.empty-card {
  max-width: 520px; background: var(--panel); color: var(--ink); padding: 20px 22px;
  border-radius: 14px; display: flex; flex-direction: column; gap: 10px;
}
.empty-card h2 { font-size: 1.2rem; }
.empty-card p, .empty-card ol { margin: 0; }
.empty-card ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.empty-card .btn { align-self: flex-start; }
.stage.dragover { outline: 3px dashed var(--accent); outline-offset: -6px; }
.fine { color: var(--muted); font-size: .8rem; margin: 0; }
.status { margin: 0; min-height: 1.4em; font-size: .88rem; color: var(--muted); }

.map-stage { touch-action: auto; }
#map { position: absolute; inset: 0; }
#map.measuring { cursor: crosshair; }
#map.measuring .leaflet-interactive { cursor: crosshair; }
.map-label { white-space: nowrap; pointer-events: none; }
.map-label span {
  display: inline-block; transform: translate(-50%, -50%); padding: 2px 8px; border: 1.5px solid #fff;
  border-radius: 999px; background: rgb(15 18 22 / .86); color: #fff; font: 600 12px/1.4 system-ui, sans-serif;
}
.map-vertex i {
  display: block; width: 18px; height: 18px; margin: 2px; border-radius: 50%; background: #fff;
  border: 3px solid #e8590c; box-shadow: 0 1px 4px rgb(0 0 0 / .5); cursor: grab;
}
.goto input { width: 190px; }
.leaflet-control-attribution { font-size: 10px; max-width: 60vw; }

#results {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto;
}
.results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.results-head .btn { min-height: 34px; padding: 0 10px; font-size: .85rem; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { border: 1px solid var(--line); border-left-width: 5px; border-radius: 8px; padding: 8px 10px; background: var(--bg); }
.item.selected { outline: 2px solid var(--accent); }
.item-head { display: flex; gap: 6px; align-items: center; }
.item-head .name { flex: 1; min-width: 0; font-weight: 600; background: transparent; border-color: transparent; min-height: 32px; padding: 0 6px; }
.item-head .name:hover, .item-head .name:focus { border-color: var(--line); background: var(--panel); }
.badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.icon-btn { min-width: 36px; min-height: 36px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; font: inherit; cursor: pointer; }
.icon-btn:hover { color: var(--ink); background: var(--panel); }
.value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.sub { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.item details { margin-top: 4px; font-size: .85rem; }
.item summary { cursor: pointer; color: var(--accent); }
.units-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-variant-numeric: tabular-nums; }
.units-table td { padding: 2px 4px; border-top: 1px solid var(--line); }
.units-table td:last-child { text-align: right; }

.convert { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.cv-inputs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cv-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cv-table td { padding: 7px 8px; border-top: 1px solid var(--line); }
.cv-table td:nth-child(2) { text-align: right; font-weight: 600; }
.cv-table td:first-child { color: var(--muted); }
.cv-table tr.sep td { border-top: 2px solid var(--line); }

dialog { max-width: min(480px, calc(100vw - 24px)); width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); padding: 18px; }
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
dialog p { margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.error { color: var(--danger); font-size: .9rem; }

@media (max-width: 900px) {
  main { grid-template-columns: minmax(0, 1fr); }
  /* One scrollable row per toolbar keeps the canvas on screen on phones. */
  .toolbar {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .toolbar .group { flex-wrap: nowrap; flex: none; }
  .btn, .tool { white-space: nowrap; padding: 0 12px; }
  .top { padding: 8px 12px; gap: 8px 12px; }
  /* Deterministic two-row grid: toggle on top, three equal selects below.
     Wrapping flex rows depended on each browser's control widths. */
  .units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; width: 100%; margin-left: 0; align-items: end; }
  .units .seg { grid-column: 1 / -1; }
  .units .seg label { flex: 1; }
  .units .seg span { text-align: center; padding: 0 9px; font-size: .95rem; }
  .units .field { font-size: .68rem; min-width: 0; }
  .units select { width: 100%; min-height: 38px; padding: 0 4px; }
  .goto input { width: 150px; }
  .stage { min-height: 56dvh; }
  #results { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }