:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#253b37;
  background:#f6f7f4;
  font-synthesis:none;
  --green:#176b60;
  --muted:#73807c;
  --line:#e1e6e0;
  --soft:#e9f1ec;
  --white:#fff;
  --radius:14px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

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

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
  border:1px solid #cdd8d1;
  background:white;
  color:#294e45;
  border-radius:8px;
  padding:10px 15px;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  transition:background .15s,border-color .15s;
}

button:hover {
  background:#f0f5f1;
  border-color:#80a99a;
}

button:disabled {
  opacity:.45;
  cursor:not-allowed;
}

button.primary {
  background:var(--green);
  color:white;
  border-color:var(--green);
}

button.primary:hover {
  background:#105448;
}

button.text-button {
  border:0;
  background:transparent;
  color:var(--green);
  padding:6px;
  font-size:12px;
}

button.icon-button {
  border:0;
  background:transparent;
  font-size:24px;
  padding:2px 8px;
  line-height:1;
}

button.small {
  padding:7px 10px;
  font-size:12px;
}

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

:focus-visible {
  outline:3px solid #d59f4b;
  outline-offset:3px;
}

[hidden] {
  display:none!important;
}

h1,h2,h3,p {
  margin-top:0;
}

h1 {
  font-size:30px;
  letter-spacing:-1px;
  font-weight:600;
  margin-bottom:8px;
}

h2 {
  font-size:17px;
  letter-spacing:-.3px;
  font-weight:650;
  margin-bottom:0;
}

h3 {
  font-size:16px;
  font-weight:600;
}

p {
  line-height:1.65;
  font-size:14px;
}

.muted,.hint {
  color:var(--muted);
}

.hint {
  font-size:12px;
  line-height:1.6;
}

.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  color:var(--muted);
  margin-bottom:12px;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#25453b;
  font-size:19px;
  letter-spacing:-.6px;
  font-weight:650;
}

.brand-mark {
  display:inline-flex;
  width:34px;
  height:34px;
  border-radius:11px;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:#ddedcb;
  font-size:50px;
  line-height:1;
  box-shadow:inset 0 0 0 8px #ffffff10;
}

.sidebar {
  width:224px;
  position:fixed;
  inset:0 auto 0 0;
  padding:32px 18px 20px;
  background:#fdfefb;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
}

.sidebar .brand {
  margin:0 6px 50px;
}

.sidebar-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 10px 10px;
}

.sidebar-heading .eyebrow {
  margin:0;
}

.sidebar nav {
  overflow:auto;
  flex:1;
}

.region-link {
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  width:100%;
  text-align:left;
  padding:13px 12px;
  margin-bottom:5px;
  background:transparent;
  line-height:1.5;
  font-size:13px;
  color:#63716b;
  font-weight:500;
}

.region-link.active {
  background:var(--soft);
  color:#245c4a;
  font-weight:650;
}

.region-link .region-dot {
  font-size:19px;
  color:#91ad9d;
}

.region-link small {
  margin-left:auto;
  color:#7d9487;
}

.sidebar-footer {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#7c8b82;
  padding:18px 5px 0;
  border-top:1px solid var(--line);
  margin-top:20px;
}

.sidebar-footer button {
  margin-left:auto;
}

.status-dot {
  width:6px;
  height:6px;
  background:#518f74;
  border-radius:100%;
}

main {
  margin-left:224px;
  padding:40px 36px 20px;
  max-width:1800px;
}

.page-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:28px;
}

.page-header .muted {
  font-size:13px;
  margin-bottom:0;
}

.header-actions {
  display:flex;
  gap:8px;
}

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

.panel {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 3px 8px #1d423203;
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
}

.overview-controls {
  display:flex;
  gap:12px;
  align-items:end;
  justify-content:space-between;
  padding:16px 22px;
}
.deletion-preview { display:block; width:100%; max-height:180px; object-fit:contain; margin:12px 0; }
#deleted-overviews { align-self:flex-start; margin:0 16px 8px; }
#deleted-overviews-list button { display:block; margin-top:8px; }
#deleted-overviews-list img { height:180px; object-fit:contain; }

.overview-controls label {
  flex:1;
  max-width:240px;
}

.overview-controls button {
  margin-bottom:0;
}

.map-tools {
  border-top:1px solid var(--line);
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#fcfdfb;
}

.map-tools span {
  font-size:11px;
  color:#6a7e71;
  flex:1;
  line-height:1.5;
}

.map-scroll {
  padding:20px;
  background:#edf0ea;
  max-height:75vh;
  overflow:auto;
}

.photo-map {
  position:relative;
  width:100%;
  line-height:0;
  touch-action:manipulation;
}

.photo-map img {
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}

.photo-map.mapping {
  cursor:crosshair;
  box-shadow:0 0 0 3px #d0a248;
  border-radius:6px;
}

.marker {
  position:absolute;
  transform:translate(-50%,-50%);
  background:#fffef4;
  color:#214e3a;
  border:2px solid #508367;
  border-radius:50%;
  width:30px;
  height:30px;
  padding:0;
  font:700 10px ui-sans-serif,system-ui;
  box-shadow:0 1px 6px #0004;
  z-index:1;
}

.marker:hover,.marker.selected {
  background:#176b60;
  color:white;
  border-color:white;
  z-index:2;
}

.marker.selected {
  box-shadow:0 0 0 3px #176b6077;
}

.map-footer {
  display:flex;
  justify-content:space-between;
  padding:13px 20px;
  gap:10px;
  font-size:10px;
  color:var(--muted);
}

.count {
  display:inline-block;
  font-size:11px;
  background:#eef2ec;
  border-radius:20px;
  padding:3px 7px;
  margin-left:5px;
  font-weight:500;
  vertical-align:middle;
}

.spot-list {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  max-height:180px;
  overflow:auto;
}

.spot-list:empty {
  display:none;
}

.spot-chip {
  padding:7px 10px;
  font-size:12px;
  border-radius:6px;
  background:#f8faf6;
}

.spot-chip.active {
  color:var(--green);
  border-color:#7ba995;
  background:#edf5ec;
}

.spot-chip.unmapped {
  border-style:dashed;
}

.spot-chip small {
  font-size:9px;
  margin-left:4px;
}

.spot-detail {
  padding:22px;
}

.detail-empty {
  text-align:center;
  padding:50px 15px;
  color:#7d8d83;
}

.detail-empty>span {
  font-size:42px;
  color:#a1b9a9;
  display:block;
  margin-bottom:20px;
}

.detail-empty h3 {
  color:#556b5d;
  margin-bottom:8px;
}

.detail-empty p {
  font-size:12px;
}

.detail-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.detail-header h3 {
  font-size:20px;
  letter-spacing:-.5px;
  margin:0;
}

.spot-note {
  font-size:12px;
  color:#708178;
  margin-bottom:20px;
}

.detail-actions {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.detail-actions button {
  font-size:11px;
  padding:8px 10px;
}

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

.photo-card {
  margin:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fafcf8;
}

.photo-card img {
  width:100%;
  height:125px;
  object-fit:cover;
  display:block;
}

.photo-card a {
  display:block;
}

.photo-card figcaption {
  padding:10px;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.photo-card input {
  width:15px;
  min-height:15px;
  margin:0;
}

.photo-card label {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  margin:0;
}

.photo-card a:focus-visible {
  outline-offset:-3px;
}

.history-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:26px 0 12px;
}

.history-toolbar h3 {
  font-size:13px;
  margin:0;
}

.notes-form {
  margin-top:22px;
  border-top:1px solid var(--line);
  padding-top:18px;
}

.notes-form textarea {
  min-height:75px;
  font-size:12px;
}

.notes-form button {
  margin-top:8px;
}

.empty-panel {
  text-align:center;
  padding:80px 25px;
  color:#7d8d83;
}

.empty-panel h3 {
  color:#4d6757;
  margin-bottom:6px;
}

.empty-panel p {
  font-size:13px;
}

.empty-icon {
  font-size:46px;
  color:#9caf9e;
  margin-bottom:20px;
}

.welcome {
  max-width:850px;
  margin:10px auto 0;
  text-align:center;
  padding:35px 40px;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.welcome h2 {
  font-size:27px;
  margin:12px 0;
}

.welcome>p:not(.eyebrow) {
  max-width:510px;
  margin:0 auto 24px;
  color:#738379;
}

.map-illustration {
  width:160px;
  height:115px;
  margin:0 auto 30px;
  border:1px solid #c8d9cb;
  border-radius:65% 35% 40% 60%;
  background:repeating-linear-gradient(25deg,transparent 0 15px,#b5cbb61a 15px 16px),#edf4e9;
  position:relative;
}

.map-illustration span {
  position:absolute;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid #8aa995;
  border-radius:50%;
  color:#558061;
  font-size:10px;
  background:#fafef5;
}

.map-illustration span:nth-child(1) {
  left:30px;
  top:30px;
}

.map-illustration span:nth-child(2) {
  left:95px;
  top:20px;
}

.map-illustration span:nth-child(3) {
  left:78px;
  top:76px;
}

.steps {
  display:flex;
  text-align:left;
  gap:24px;
  border-top:1px solid var(--line);
  margin-top:40px;
  padding-top:25px;
}

.steps div {
  flex:1;
}

.steps b {
  display:block;
  font-size:10px;
  color:#98ad9d;
  margin-bottom:10px;
}

.steps strong {
  display:block;
  font-size:12px;
  margin-bottom:7px;
  font-weight:600;
}

.steps span {
  font-size:11px;
  color:#87938b;
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#9aa69c;
  margin-top:28px;
  padding-top:14px;
}

.login-shell {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:radial-gradient(ellipse at top,#e3eee1,transparent 60%);
}

.login-card {
  width:min(450px,100%);
  background:white;
  padding:40px;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 20px 60px #254b3b08;
}

.login-card .brand-mark {
  margin-bottom:25px;
}

.login-card h1 {
  font-size:26px;
}

.login-card>p {
  color:var(--muted);
}

.login-card .primary {
  width:100%;
  margin-top:8px;
  display:flex;
  justify-content:space-between;
}

.login-card label {
  margin-top:24px;
}

label {
  font-size:12px;
  font-weight:550;
  display:block;
  margin-bottom:5px;
  color:#52685d;
}

input,select,textarea {
  border:1px solid #ccd7cc;
  border-radius:7px;
  padding:10px 11px;
  background:#fff;
  color:#284536;
  width:100%;
  display:block;
  margin-top:7px;
  font-size:13px;
  min-height:39px;
}

input[type=file] {
  padding:12px;
  background:#f5f8f2;
  border-style:dashed;
}

input[type=date] {
  max-width:250px;
}

textarea {
  resize:vertical;
}

.error {
  font-size:13px;
  color:#a13e39;
  min-height:0;
  margin:12px 0 0;
}

.error:empty {
  display:none;
}

.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:#254f40;
  color:white;
  border-radius:9px;
  padding:13px 22px;
  box-shadow:0 4px 25px #0002;
  font-size:13px;
  max-width:90vw;
  z-index:100;
}

.toast.is-error {
  background:#873f38;
}

dialog {
  color:#253b37;
  background:#fff;
  border:1px solid #d1dcd2;
  border-radius:17px;
  padding:26px;
  max-width:calc(100vw - 32px);
  width:450px;
  max-height:calc(100dvh - 40px);
  overflow:auto;
  box-shadow:0 25px 100px #18392b22;
}

dialog::backdrop {
  background:#16392c66;
  backdrop-filter:blur(3px);
}

.wide-dialog {
  width:1100px;
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}

.dialog-heading h2 {
  font-size:21px;
}

.dialog-heading .eyebrow {
  margin-bottom:7px;
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:24px;
}

#modal-fields label {
  margin-bottom:18px;
}

#modal-fields .hint {
  margin:0;
}

.compare-grid,.capture-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.compare-grid>section {
  min-width:0;
}

.compare-grid .photo-map {
  margin-top:14px;
}

.compare-grid img {
  width:100%;
  height:auto;
  border-radius:7px;
}

.input-like {
  display:block;
  margin-top:7px;
  padding:11px;
  background:#f1f6ed;
  border-radius:7px;
  font-size:13px;
}

.notice {
  background:#eff5ea;
  border:1px solid #dde8d4;
  padding:12px 15px;
  border-radius:8px;
  font-size:12px;
  color:#56704f;
  margin:18px 0;
  line-height:1.6;
}

.unmapped-spots {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.camera-toolbar {
  display:flex;
  align-items:end;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px;
}

.camera-toolbar label {
  flex:1;
  min-width:160px;
  margin:0;
}

.video-wrap {
  background:#1e2b25;
  position:relative;
  border-radius:9px;
  overflow:hidden;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
}

.video-wrap video {
  display:block;
  max-width:100%;
  width:100%;
  height:100%;
  object-fit:contain;
}

.video-status {
  position:absolute;
  bottom:12px;
  left:12px;
  background:#0f1b16bb;
  color:#eef5eb;
  padding:6px 9px;
  border-radius:5px;
  font-size:11px;
}

.capture-controls {
  display:flex;
  gap:12px;
  align-items:end;
  margin:15px 0;
}

.capture-controls label {
  flex:1;
  margin:0;
}

.capture-controls .hint {
  flex:1;
}

details {
  border-top:1px solid var(--line);
  margin:20px 0 12px;
  padding-top:12px;
}

summary {
  font-size:12px;
  cursor:pointer;
  color:#68836e;
}

pre {
  font-size:11px;
  background:#f3f6ef;
  padding:15px;
  border-radius:7px;
  overflow:auto;
  max-height:240px;
}

#capture-review img {
  max-width:100%;
  border-radius:8px;
}

#capture-review .capture-result {
  background:#f5f8f1;
  border-radius:8px;
  padding:14px;
}

.review-actions {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:15px;
}

.review-actions a {
  font-size:12px;
}

.pair-link {
  display:flex;
  gap:10px;
}

.pair-link input {
  margin:0;
}

.remote-wrap {
  max-height:60vh;
  aspect-ratio:16/10;
}
.remote-wrap img {
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
}

.compare-grid figcaption {
  font-size:13px;
  margin:10px 0;
}

.comparison-original {
  font-size:12px;
  display:block;
  margin:10px 0;
}

.comparison-figure {
  margin:0;
}

#print-sheet {
  display:none;
}

@media(min-width:1500px) {
  main {
    padding:48px;
  }
  .workspace-grid {
    grid-template-columns:minmax(0,1.8fr) minmax(350px,1fr);
  }
}

@media(max-width:1100px) {
  main {
    padding:30px 22px;
  }
  .sidebar {
    width:190px;
    padding-left:12px;
    padding-right:12px;
  }
  .sidebar .brand {
    font-size:17px;
  }
  .brand-mark {
    width:30px;
    height:30px;
  }
  main {
    margin-left:190px;
  }
  .workspace-grid {
    grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);
    gap:15px;
  }
  .page-header {
    align-items:start;
  }
  .header-actions {
    flex-direction:column;
  }
  .panel-heading {
    padding:17px;
  }
  .spot-detail {
    padding:17px;
  }
  .overview-controls {
    padding:15px;
    align-items:stretch;
    flex-direction:column;
  }
  .overview-controls label {
    max-width:none;
  }
  .map-tools {
    flex-wrap:wrap;
  }
  .map-tools span {
    flex-basis:100%;
  }
  .map-footer {
    flex-direction:column;
  }
  .photo-grid {
    gap:8px;
  }
}

@media(max-width:760px) {
  .sidebar {
    position:static;
    width:100%;
    padding:15px 18px;
    display:block;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .sidebar .brand {
    margin:0 0 18px;
  }
  .sidebar-heading {
    padding:0;
    margin-bottom:8px;
  }
  .sidebar nav {
    display:flex;
    gap:5px;
    overflow-x:auto;
  }
  .region-link {
    white-space:nowrap;
    width:auto;
    margin:0;
    padding:9px 12px;
  }
  .sidebar-footer {
    display:none;
  }
  main {
    margin-left:0;
    padding:22px 15px;
  }
  .page-header {
    gap:12px;
    margin-bottom:22px;
  }
  .page-header h1 {
    font-size:24px;
  }
  .page-header .eyebrow {
    font-size:9px;
    letter-spacing:1.2px;
  }
  .page-header .muted {
    font-size:12px;
  }
  .header-actions button {
    font-size:11px;
    padding:9px 10px;
  }
  .workspace-grid {
    grid-template-columns:1fr;
  }
  .overview-controls {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:end;
  }
  .overview-controls label { flex-basis:100%; }
  .map-tools span {
    flex-basis:auto;
  }
  .map-scroll {
    max-height:none;
    padding:14px;
  }
  .map-footer {
    flex-direction:row;
  }
  .welcome {
    padding:26px 20px;
  }
  .welcome h2 {
    font-size:23px;
  }
  .steps {
    gap:14px;
  }
  .steps span {
    line-height:1.6;
    display:block;
  }
  .page-footer {
    font-size:9px;
  }
  .compare-grid,.capture-grid {
    grid-template-columns:1fr;
  }
  .camera-toolbar {
    align-items:stretch;
  }
  .camera-toolbar label {
    flex-basis:100%;
  }
  .camera-toolbar button {
    flex:1;
  }
  dialog {
    padding:20px;
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
  }
  .capture-controls {
    flex-wrap:wrap;
  }
  .capture-controls label {
    flex-basis:100%;
  }
  .photo-card img {
    height:180px;
  }
  .detail-empty {
    padding:25px 15px;
  }
  .login-card {
    padding:28px;
  }
  .pair-link {
    flex-wrap:wrap;
  }
  .pair-link input {
    min-width:0;
    flex:1;
  }
  .compare-grid .photo-map {
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media print {
  body>* {
    display:none!important;
  }
  #print-sheet {
    display:block!important;
  }
  #print-sheet h1 {
    font-size:24px;
  }
  #print-sheet img {
    max-width:100%;
    max-height:550px;
    object-fit:contain;
  }
  #print-sheet section {
    break-inside:avoid;
    margin:25px 0;
  }
  #print-sheet .photo-map img {
    max-height:none;
  }
  #print-sheet p {
    white-space:pre-wrap;
  }
  #print-sheet .print-photos {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
}

/* Capture and review share space with the map, without covering the skin. */
.marker,.marker:hover,.marker.selected { background:transparent; color:#123b32; border:2px solid #fff; box-shadow:0 0 0 1px #174d40; }
.marker.selected { border-color:#ffe16d; box-shadow:0 0 0 2px #174d40; }
.marker-label { position:absolute; left:calc(100% + 4px); top:-7px; padding:1px 4px; border-radius:3px; background:#fffdebeb; color:#183f36; white-space:nowrap; }
.hide-markers .marker { visibility:hidden; }
.capture-workspace[open] { display:flex; flex-direction:column; gap:10px; width:96vw; max-width:1800px; height:94dvh; max-height:96dvh; padding:18px; overflow:auto; }
.capture-workspace .dialog-heading,.photo-review-dialog .dialog-heading { margin:0; }
.capture-workspace h2,.capture-workspace h3,.photo-review-dialog h2 { margin:0; }
.session-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.session-toolbar label { display:grid; gap:3px; font-size:12px; }
.session-toolbar select { max-width:260px; }
.capture-panes { display:grid; grid-template-columns:minmax(0,var(--overview-width,40%)) minmax(0,1fr); gap:16px; flex:1; min-height:250px; }
.capture-map-pane,.capture-live-pane { min-width:0; min-height:0; display:flex; flex-direction:column; gap:6px; }
.capture-workspace .panel-heading { padding:0; gap:10px; border:0; }
.capture-workspace .panel-heading label { font-size:12px; white-space:nowrap; }
.session-map-scroll { flex:1; min-height:0; overflow:auto; background:#eaece4; display:flex; align-items:flex-start; justify-content:center; }
#session-map { width:100%; }
#session-map img { width:100%; display:block; }
.capture-workspace .remote-wrap { flex:1; min-height:0; height:auto; background:#101a17; }
.capture-workspace .remote-wrap video,.capture-workspace .remote-wrap img { width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }
.capture-workspace #live-status,.capture-workspace #destination-status { margin:0; font-size:12px; }
.shot-strip { display:flex; gap:8px; overflow-x:auto; padding:5px 2px; min-height:90px; }
.shot-thumb { position:relative; padding:3px; border:2px solid transparent; background:#e4e9e1; flex:0 0 auto; }
.shot-thumb img { width:100px; height:74px; object-fit:contain; display:block; }
.shot-thumb span { position:absolute; right:3px; bottom:2px; padding:0 4px; background:#fff; color:#163f32; font-size:11px; }
.shot-thumb.active { border-color:#176b60; }
.session-connection { font-size:12px; }
.session-connection pre { max-height:100px; overflow:auto; }
.photo-review-dialog[open] { display:flex; flex-direction:column; gap:10px; width:94vw; height:92dvh; max-width:1600px; max-height:96dvh; padding:20px; }
.review-navigation { display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:13px; }
#review-image-scroll { flex:1; min-height:100px; overflow:auto; background:#121c18; display:flex; align-items:center; justify-content:center; }
#review-image { max-width:100%; max-height:100%; object-fit:contain; }
#review-image-scroll.actual-pixels { display:block; }
#review-image-scroll.actual-pixels img { max-width:none; max-height:none; }
@media(max-width:800px) { .capture-panes { grid-template-columns:1fr; min-height:600px; } .capture-workspace[open] { height:auto; } .capture-map-pane { min-height:250px; } .capture-live-pane { min-height:300px; } .pane-width { display:none!important; } .session-toolbar select { max-width:180px; } }
.capture-workspace input[type=checkbox],.photo-review-dialog input[type=checkbox] { width:16px; height:16px; min-height:0; padding:0; margin:0 4px 0 0; vertical-align:middle; }
.capture-workspace .panel-heading label,.review-navigation label { display:inline-flex; flex-direction:row; align-items:center; gap:4px; }

/* One scrolling content area per panel; the desktop window itself stays put. */
html:has(dialog[open]),body:has(dialog[open]) { overflow:hidden; }
@media(min-width:801px) {
  body:has(#app:not([hidden])) { overflow:hidden; }
  #app main { height:100dvh; display:flex; flex-direction:column; padding:18px 22px 12px; }
  .page-header { flex:none; margin-bottom:14px; gap:12px; }
  .page-header .eyebrow,.page-footer { display:none; }
  .page-header h1 { font-size:25px; margin-bottom:4px; }
  #workspace { flex:1; min-height:0; }
  .workspace-grid { height:100%; min-height:0; align-items:stretch; gap:14px; }
  .overview-panel,.spot-panel { display:flex; flex-direction:column; min-height:0; }
  .panel-heading { padding:12px 16px; flex:none; }
  .overview-controls { padding:10px 16px; }
  .map-tools { padding:8px 12px; flex:none; }
  .map-scroll { flex:1; min-height:0; max-height:none; padding:12px; }
  .map-footer { padding:8px 12px; flex:none; }
  .spot-list { flex:none; max-height:90px; overflow:auto; }
  .spot-detail { flex:1; min-height:0; overflow:auto; padding:14px; }
  #welcome { overflow:auto; }
}
.mapping-active { background:#fff1c8; border:2px solid #b27618; }
.mapping-active #map-instruction { color:#653f00; font-size:13px; font-weight:600; }
.photo-map.mapping .marker { cursor:crosshair; }
.photo-map.mapping .marker.selected { outline:3px dashed #b27618; outline-offset:4px; }
#move-spot[aria-pressed=true] { background:#fff1c8; border-color:#b27618; }
.capture-workspace[open],.photo-review-dialog[open] { width:calc(100vw - 24px); height:calc(100dvh - 24px); max-height:none; max-width:none; padding:12px; gap:8px; overflow:hidden; }
.capture-workspace .eyebrow,.photo-review-dialog .eyebrow { display:none; }
.capture-workspace .dialog-heading,.photo-review-dialog .dialog-heading { flex:none; }
.capture-workspace button,.photo-review-dialog button { padding:7px 10px; }
.capture-workspace .icon-button,.photo-review-dialog .icon-button { padding:2px 8px; }
.session-toolbar { flex:none; gap:8px; }
.session-toolbar select { padding:6px; min-height:0; max-width:220px; }
.session-toolbar input[type=range] { padding:0; width:105px; min-height:0; }
.capture-panes { flex:1 1 0; min-height:0; }
.capture-workspace .remote-wrap { overflow:hidden; }
.session-shots { flex:none; }
.shot-strip { min-height:0; flex:none; }
.shot-thumb img { height:56px; width:82px; }
.session-connection { flex:none; position:relative; }
.session-connection[open] { position:absolute; z-index:5; bottom:12px; left:12px; right:12px; background:white; border:1px solid var(--line); border-radius:8px; padding:12px; box-shadow:0 0 25px #0003; max-height:60%; overflow:auto; }
.photo-review-dialog .review-navigation { flex:none; gap:8px; }
#review-status { margin:0; flex:none; }
#review-image-scroll { min-height:0; overflow:hidden; }
#review-image-scroll.actual-pixels { overflow:auto; }
.framing-control { display:flex; align-items:center; gap:5px; font-size:12px; }
.framing-control span { display:flex; align-items:center; gap:4px; }
.framing-control input[type=range] { width:100px; padding:0; min-height:0; }
.framing-control output { min-width:38px; }
.dermoscope-mode .remote-wrap video,.dermoscope-mode .remote-wrap img,#review-image-scroll:not(.actual-pixels) img,.dermoscope-frame img { transform:scale(var(--lens-framing,1.5)); transform-origin:center; }
.dermoscope-frame { display:block; overflow:hidden; }
.shot-thumb .shot-image { display:block; position:static; background:transparent; padding:0; overflow:hidden; }
.dermoscope-mode #session-shots .shot-image img,#review-thumbs .shot-image img { transform:scale(var(--lens-framing,1.5)); }
#review-image-scroll.actual-pixels img { transform:none; }
@media(max-width:800px) {
  .capture-panes { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0; gap:8px; }
  .capture-map-pane,.capture-live-pane { min-height:0; }
  .session-toolbar { flex-wrap:nowrap; overflow-x:auto; align-items:center; }
  .session-toolbar>* { flex:none; }
  .session-toolbar select { max-width:150px; }
  .capture-workspace .panel-heading { flex-wrap:wrap; }
  .capture-workspace h3 { font-size:12px; }
  .review-navigation { max-height:30vh; overflow:auto; }
  #session-shots-title { font-size:12px; }
  .capture-workspace #destination-status,.capture-workspace #live-status { font-size:11px; }
}
@media print { #app main { height:auto; } body { overflow:visible!important; } }

/* A bounded image plane shared by overview display and annotation tools. */
.map-viewport { position:relative; overflow:hidden; padding:0; touch-action:none; user-select:none; background:#edf0ea; display:block; }
.map-viewport > .photo-map { position:absolute; left:0; top:0; margin:0; max-width:none; }
.map-viewport > .photo-map > img { width:100%; height:100%; max-width:none; object-fit:fill; }
.map-viewport .marker { width:var(--marker-size,30px); height:var(--marker-size,30px); }
.map-viewport > .photo-map.map-no-image { position:static; width:auto; padding:12px; line-height:1.5; }
.map-viewport.zoomed { cursor:grab; }
.map-viewport.panning,.map-viewport.panning * { cursor:grabbing!important; }
.map-zoom-controls { display:flex; flex:none; gap:5px; align-items:center; padding:4px 8px; border-bottom:1px solid var(--line); font-size:11px; }
.map-zoom-controls > span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.map-zoom-controls button { padding:3px 9px; min-height:28px; }
.map-zoom-controls output { display:block; width:38px; text-align:center; font-variant-numeric:tabular-nums; }
.comparison-map-viewport { height:clamp(180px,42dvh,480px); }
#map-scroll.map-viewport { padding:0; }
@media(max-width:800px) {
  #map-scroll.map-viewport { height:60dvh; min-height:240px; max-height:540px; }
  .capture-map-pane .map-zoom-controls > span { display:none; }
  .capture-map-pane .map-zoom-controls { justify-content:center; }
}