/* koordinat.online — tool.css
 * Redesigned 2026-04-09: app-shell layout with vertical toolbar
 */

/* ─── Design tokens (override / extend koordinat.css) ─── */
:root {
  --toolbar-w:      56px;
  --header-h:       56px;
  --bottom-h:       36px;

  /* Brand gradient (K-logo og brand-mark) */
  --g-brand:        linear-gradient(135deg, #1a2a4a 0%, #1d5fa8 40%, #2dd4a8 100%);

  /* Palette — warm cream temperature (overrides koordinat.css cool tokens) */
  --brand:          #1d5fa8;
  --brand-dark:     #164a85;
  --brand-50:       rgba(29,95,168,0.07);
  --cream:          #faf8f5;
  --bg:             #faf8f5;       /* override koordinat.css --bg to warm cream */
  --surface:        #ffffff;
  --surface-2:      #fdf9f6;       /* override koordinat.css --surface-2 */
  --border:         #e5e0da;
  --line:           #e5e0da;       /* override koordinat.css --line to warm */
  --text:           #1a2236;
  --text-secondary: #4a5a6a;
  --text-muted:     #6b7a8a;
  --muted:          #6b7a8a;       /* override koordinat.css --muted */
  --accent:         #0fb87a;
  --grid-line:      rgba(29,95,168,0.12);

  /* Motion */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Dark mode tokens ─── */
[data-theme="dark"] {
  --cream:          #0e1929;
  --bg:             #0e1929;
  --surface:        #0e1929;
  --surface-2:      #0a1420;
  --border:         #2a3040;
  --line:           #2a3040;
  --text:           #e0e4ea;
  --text-secondary: #a0aab8;
  --text-muted:     #6b7c93;
  --muted:          #6b7c93;
  --brand-50:       rgba(29,95,168,0.15);
  --grid-line:      rgba(29,95,168,0.15);
}

/* ─── App shell ─── */
html, body { height: 100%; overflow: hidden; }
body.tool-page { overflow: hidden; }
.app-shell { display: flex; flex-direction: column; height: 100vh; }

/* ─── Header ─── */
.app-header {
  height: var(--header-h); min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; gap: 12px;
  background: rgba(250,248,245,0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 200;
}
.app-header-left { display: flex; align-items: center; gap: 10px; }
.brand-mark-gradient {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--g-brand);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-weight: 900;
  font-size: 17px; color: #fff; letter-spacing: -0.5px; flex-shrink: 0;
}
.brand-name-hd { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; }
.brand-name-hd em { color: var(--text-muted); font-style: normal; }
.header-badges { display: flex; align-items: center; gap: 6px; }
.crs-badge, .tier-badge {
  font-family: 'DM Mono', monospace; font-size: 11px;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap;
}
.crs-badge  { background: var(--brand-50); color: var(--brand); border: 1px solid rgba(29,95,168,0.15); }
.tier-badge { background: #f0faf6; color: #157a56; border: 1px solid rgba(15,184,122,0.2); }
.acct-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-50); border: 1.5px solid rgba(29,95,168,0.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 150ms var(--ease-out);
}
@media (hover: hover) { .acct-btn:hover { border-color: var(--brand); } }
.acct-btn svg { color: var(--brand); }

/* ─── Main body ─── */
.app-body { flex: 1; display: flex; overflow: hidden; position: relative; }

/* ─── Vertical toolbar ─── */
.vtoolbar {
  width: var(--toolbar-w); min-width: var(--toolbar-w);
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; gap: 2px; z-index: 100; position: relative;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}
.vtb-btn {
  position: relative; width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary);
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
  border: none; background: transparent; flex-shrink: 0;
}
@media (hover: hover) {
  .vtb-btn:hover {
    background: linear-gradient(135deg, rgba(29,95,168,0.08) 0%, rgba(45,212,168,0.06) 100%);
    color: var(--brand);
  }
}
.vtb-btn.active { background: var(--brand-50); color: var(--brand); }
.vtb-btn.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--brand);
}
/* tool-core.js bruger active-bar og snap-on klasser */
.vtb-btn.active-bar { background: var(--brand-50); color: var(--brand); }
.vtb-btn.snap-on { background: rgba(15,184,122,0.1); color: var(--accent); }
.vtb-sep { width: 28px; height: 1px; background: var(--border); margin: 4px 0; flex-shrink: 0; }
.vtb-btn.cap-gated .vtb-lock {
  display: flex; position: absolute; top: 5px; right: 5px;
  width: 13px; height: 13px; background: var(--surface); border-radius: 50%;
  align-items: center; justify-content: center;
}
.vtb-btn:not(.cap-gated) .vtb-lock { display: none; }

/* ─── Map area ─── */
.map-area { flex: 1; position: relative; overflow: hidden; }
.map-area.draw-active { cursor: crosshair; }
.map-area.info-active { cursor: help; }
#map { position: absolute; inset: 0; }
#map-chip {
  position: absolute; top: 10px; right: 10px;
  background: rgba(250,248,245,0.92); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 4px 12px; font-size: 12px; color: var(--text-secondary);
  display: none; z-index: 50;
}
.map-warning {
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%);
  background: #fff8e1; border: 1px solid #ffe08a;
  border-radius: 8px; padding: 8px 14px;
  font-size: 12px; color: #7a5c00; z-index: 60; max-width: 90%;
}
/* "Ligger punkterne forkert? Indberet" — vises når punkter er plottet på kortet
   (toggles i _plotPoints / tool-core.js), lige under #map-chip. */
#crs-report-btn {
  position: absolute; top: 46px; right: 10px;
  background: rgba(250,248,245,0.92); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 12px; font-size: 11.5px; color: var(--text-secondary);
  display: none; z-index: 50; cursor: pointer; font-family: inherit;
}
#crs-report-btn.on { display: block; }
@media (hover: hover) {
  #crs-report-btn:hover { background: var(--surface); color: var(--text); }
}

/* ─── Import sidebar ─── */
.import-sidebar {
  position: relative; width: 0; overflow: hidden; flex-shrink: 0;
  transition: width 280ms var(--ease-out);
}
.import-sidebar.open { width: 360px; }
.import-sidebar > .sb-header,
.import-sidebar > .sb-body {
  width: 360px; /* fixed internal width regardless of container width */
}
.import-sidebar {
  background: var(--cream); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
/* Suppress transition on first paint to avoid FOUC slide-in */
.import-sidebar.no-transition { transition: none !important; }
.sb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sb-header h2 { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.sb-close {
  width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; color: var(--text-muted); cursor: pointer;
  background: transparent; border: none; transition: background 150ms; font-size: 18px; line-height: 1;
}
@media (hover: hover) { .sb-close:hover { background: var(--border); color: var(--text); } }
.sb-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sb-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.sb-badge {
  font-family: 'DM Mono', monospace; font-size: 11px; background: var(--brand-50);
  color: var(--brand); padding: 2px 7px; border-radius: 12px; font-weight: 500; letter-spacing: 0;
}
.textarea {
  width: 100%; min-height: 76px; resize: vertical;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-family: 'DM Mono', monospace;
  font-size: 12px; line-height: 1.6; color: var(--text); background: var(--surface);
  transition: border-color 150ms;
}
.textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.adv-toggle { font-size: 12px; color: var(--brand); cursor: pointer; text-decoration: none; display: inline-block; }
/* Drop-besked: hele skærmen er drop-zone (#global-drop-overlay). Panelet
   beskriver bare det; paste-boksen er fjernet (import = fil, ikke enkeltpunkter). */
.import-drop-hint {
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  background: var(--brand-50); border: 1px dashed rgba(29,95,168,0.28);
  border-radius: 10px; padding: 12px 14px; margin: 0 0 4px;
}

/* ─── To-tilstands-import-panel (mockup 25/7) ─── */
#import-state-empty, #import-state-loaded { display: flex; flex-direction: column; gap: 10px; }
#import-state-loaded[style*="none"] { display: none; }
.sec-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px; display: block;
}
/* Tilstand 1: beta-velkomst */
.imp-welcome {
  background: var(--accent-light, #e6faf3);
  border: 1px solid rgba(15,184,122,0.26);
  border-radius: 11px; padding: 13px 14px;
}
.imp-welcome-title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.imp-pill {
  font-size: 10px; font-weight: 700; color: var(--accent, #0fb87a);
  background: var(--surface); border: 1px solid rgba(15,184,122,0.4);
  border-radius: 999px; padding: 1px 8px;
}
.imp-welcome p { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin: 7px 0 0; }
/* Tilstand 1: stor drop-forklaring */
.imp-dropbig {
  border: 1.5px dashed var(--border); border-radius: 11px;
  padding: 22px 16px 16px; text-align: center; background: var(--bg, #faf8f5);
  cursor: pointer; transition: border-color 150ms, background 150ms;
}
@media (hover: hover) { .imp-dropbig:hover { border-color: var(--brand); background: var(--brand-50); } }
.imp-dropbig-icon {
  width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px;
  background: var(--brand-50); color: var(--brand); display: grid; place-items: center;
}
.imp-dropbig-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.imp-dropbig-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.45; }
.imp-pick-btn {
  margin-top: 12px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: var(--brand); border: none; border-radius: 8px; padding: 8px 18px; cursor: pointer;
  transition: background 150ms;
}
@media (hover: hover) { .imp-pick-btn:hover { background: var(--brand-dark, #164a85); } }
.imp-formats { margin-top: 11px; font-size: 10.5px; letter-spacing: 0.02em; color: var(--text-muted); }
/* Indberet-note (tilstand 1) */
.imp-indberet-note {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.imp-ic {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(196,127,26,0.13); color: var(--warn, #c07000); display: grid; place-items: center;
}
.imp-tx { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
/* Tilstand 2: kompakt fil-linje + chip */
.imp-addfiles {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font-size: 12px; color: var(--text-secondary); background: var(--bg, #faf8f5);
  border: 1.5px dashed var(--border); border-radius: 8px; padding: 6px 11px; cursor: pointer;
  font-family: inherit; transition: border-color 150ms, background 150ms;
}
@media (hover: hover) { .imp-addfiles:hover { border-color: var(--brand); background: var(--brand-50); } }
.imp-addfiles svg { color: var(--brand); flex-shrink: 0; }
.imp-addfiles b { color: var(--brand); font-weight: 600; }
.imp-filechip {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-50); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
}
.imp-filechip > svg { color: var(--brand); flex-shrink: 0; }
.imp-fname { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-fmeta { color: var(--text-muted); white-space: nowrap; font-size: 11.5px; }
.imp-fx {
  margin-left: auto; border: none; background: transparent; color: var(--text-muted);
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; cursor: pointer;
  transition: color 150ms, background 150ms;
}
@media (hover: hover) { .imp-fx:hover { color: var(--text); background: var(--surface); } }
/* Indberet-affordance (tilstand 2) */
.imp-report-link {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  font-size: 11.5px; color: var(--text-secondary);
  background: rgba(196,127,26,0.10); border: 1px solid rgba(196,127,26,0.26);
  border-radius: 9px; padding: 8px 11px; cursor: pointer; font-family: inherit;
  transition: border-color 150ms;
}
@media (hover: hover) { .imp-report-link:hover { border-color: var(--warn, #c07000); } }
.imp-report-link svg { color: var(--warn, #c07000); flex-shrink: 0; }
[data-theme="dark"] .imp-welcome { background: rgba(15,184,122,0.13); }
[data-theme="dark"] .imp-dropbig, [data-theme="dark"] .imp-addfiles { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .imp-ic { background: rgba(196,127,26,0.2); }
/* Upload-knap — dropzone er nu hele skærmen (#global-drop-overlay), feltet
   herunder er kun en diskret manuel fallback (Spor global-dropzone 2026-07-23) */
.upload-row { display: flex; align-items: center; }
.upload-btn {
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--surface);
  cursor: pointer; transition: border-color 150ms, background 150ms;
}
@media (hover: hover) { .upload-btn:hover { border-color: var(--brand); background: var(--brand-50); } }
.upload-formats-hint { font-size: 11px; color: var(--text-muted); margin: 2px 0 0; }
.upload-fname { font-size: 12px; color: var(--text-secondary); min-height: 18px; }

/* ─── Fuldskærms drop-zone ─── */
#global-drop-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,31,53,0.35); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease;
}
#global-drop-overlay.show { opacity: 1; pointer-events: auto; }
#global-drop-overlay .drop-pill {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.97);
  border: 1.5px solid #1fa888; border-radius: 999px;
  padding: 16px 32px; font-size: 16px; font-weight: 700; color: #136357;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 6px rgba(31,168,136,0.18);
}
/* To kompakte RÆKKER (label-prefix inline + værdi) i stedet for to høje
   kolonner — sparer lodret plads. Den verbose højde-note skjules. */
.guess-grid { display: flex; flex-direction: column; gap: 5px; }
.guess-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; line-height: 1.35;
}
.guess-item .lbl {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); display: inline; margin-right: 6px;
}
.guess-item .gi-val { display: inline; }
.guess-item strong { font-size: 11px; font-weight: 600; }
.guess-item .confidence-pill { font-size: 9.5px; margin-top: 1px; }
.guess-item #guess-height-note { display: none; }
.confidence-pill { font-size: 11px; color: #c07000; margin-top: 4px; }
.adv-row { display: none; }
.adv-row.open { display: block; }

/* ─── Kandidat-bekræftelse (CRS-liste m. procent — Spor KOORDINAT-CONFIRM-UI) ─── */
.cand-switch-line { font-size: 11px; color: var(--text-muted); margin: -2px 0 0; }
.cand-switch-line a { color: var(--brand); text-decoration: underline; cursor: pointer; }
@media (hover: hover) { .cand-switch-line a:hover { color: var(--brand-dark); } }
.candidate-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.cand-panel-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
}
.cand-manual-msg { font-size: 12px; line-height: 1.4; color: var(--warn, #c07000); margin: 0; }
.cand-hover-hint { font-size: 11px; line-height: 1.4; color: var(--text-muted); margin: 0; }
/* Bunden højde + intern scroll, så listen aldrig skubber "Bekræft valg" og
   resten af panelet langt ned uanset hvor mange kandidater der er. */
.cand-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow-y: auto; padding-right: 2px;
}
.cand-item { display: flex; flex-direction: column; }
.cand-row {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px;
  cursor: pointer; transition: border-color 150ms, background 150ms;
}
@media (hover: hover) { .cand-row:hover { border-color: var(--brand); } }
.cand-row:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
/* Primær = bedste gæt: altid brand-kant, så den kendes selv når et andet valg markeres */
.cand-item--primary .cand-row { border-color: var(--brand); }
.cand-row input[type="radio"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }
.cand-row-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cand-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cand-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.cand-pct { font-size: 11px; font-weight: 700; color: var(--brand); flex-shrink: 0; white-space: nowrap; }
.cand-best-check { color: var(--brand); font-weight: 700; }
.cand-epsg { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--text-muted); }
/* "Andre muligheder"-separator mellem primær og de sekundære kandidater */
.cand-divider {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin: 3px 0 1px;
}
.cand-divider::before, .cand-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* Advarsler kollapset bag "hvorfor?" — ellers gør de lange forklaringslinjer
   hver række høj. Klik afslører detaljerne. */
.cand-why { margin: 1px 0 0 26px; }
.cand-why > summary {
  font-size: 10.5px; color: var(--brand); cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 0; user-select: none;
}
.cand-why > summary::-webkit-details-marker { display: none; }
.cand-why > summary::marker { content: ''; }
.cand-why-icon { font-style: normal; opacity: 0.85; }
.cand-why[open] > summary { margin-bottom: 3px; }
.cand-why-body { display: flex; flex-direction: column; gap: 2px; }
.cand-warn { display: block; font-size: 10.5px; line-height: 1.4; color: var(--warn, #c07000); }
.cand-confirm-btn { width: 100%; }
.sel {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); cursor: pointer;
}
.tip-card {
  background: var(--brand-50); border-radius: 10px; padding: 8px 11px;
  font-size: 11px; line-height: 1.45; color: var(--text-secondary); border: 1px solid rgba(29,95,168,0.08);
}
.status-line { font-size: 12px; color: var(--text-secondary); min-height: 18px; }
.limit-note { font-size: 11px; color: var(--text-muted); display: none; }
.limit-note.on { display: block; }

/* ─── Beta-disclaimer ─── */
/* 1a — diskret altid-synlig infolinje ved upload-zonen */
.beta-inline-note {
  font-size: 10.5px; line-height: 1.5; color: var(--text-muted);
  margin: 0; padding: 0;
}
.beta-inline-note.hidden { display: none; }
/* 1b — større, dismissable første-besøgs-notice (top af sidebar) */
.beta-notice-box {
  position: relative; background: var(--brand-50); border: 1px solid rgba(29,95,168,0.15);
  border-radius: 10px; padding: 10px 30px 10px 12px; font-size: 12px; line-height: 1.5;
  color: var(--text-secondary);
}
.beta-notice-box p { margin: 0 0 4px; }
.beta-notice-box p:last-child { margin-bottom: 0; }
.beta-notice-box.hidden { display: none; }
.beta-notice-close {
  position: absolute; top: 6px; right: 8px; width: 22px; height: 22px;
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  font-size: 16px; line-height: 1; border-radius: 6px;
}
@media (hover: hover) { .beta-notice-close:hover { background: rgba(29,95,168,0.12); color: var(--text); } }
.pt-count { font-size: 12px; color: var(--text-muted); }
/* Handlings-knapperne fastgøres i bunden af den scrollende sidebar, så
   "Vis på kort" / "Omregn" altid er synlige uden at scrolle. */
.sidebar-actions {
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; bottom: 0; z-index: 3;
  margin: 6px -16px -16px; padding: 12px 16px 14px;
  background: var(--cream); border-top: 1px solid var(--border);
}
.btn {
  width: 100%; padding: 10px 16px; border-radius: 10px;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: background 150ms;
}
@media (hover: hover) { .btn:hover { background: var(--brand-dark, #164a85); } }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-outline {
  width: 100%; padding: 9px 16px; border-radius: 10px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text); font-size: 13px; cursor: pointer; transition: border-color 150ms;
}
@media (hover: hover) { .btn-outline:hover { border-color: var(--brand); color: var(--brand); } }
.btn-outline:disabled { opacity: 0.4; cursor: default; }
.sidebar-note { font-size: 11px; color: var(--text-muted); text-align: center; }

/* Step tabs — hidden, required by tool-core.js _step() */
.step-tab { display: none; }

/* ─── Bottom bar ─── */
.bottom-bar {
  height: var(--bottom-h); min-height: var(--bottom-h);
  background: rgba(250,248,245,0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 12px; gap: 10px;
  z-index: 100; position: relative;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}
#coord-display {
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--text-secondary); flex: 1;
}
.crs-label-pill {
  font-family: 'DM Mono', monospace; font-size: 10px;
  background: var(--brand-50); color: var(--brand);
  padding: 2px 8px; border-radius: 12px; white-space: nowrap;
}

/* ─── Fly-out panels (docked to toolbar) — Dynamic Action Bar ───
 *
 * Two-phase morph inspired by 21st.dev Dynamic Action Bar + iOS Dynamic Island:
 *   Phase 1 (container):  grow from trigger button via clip-path + scale
 *   Phase 2 (content):    fade + translate in AFTER container has grown
 *
 * Emil Kowalski principles applied:
 *   - Never animate from scale(0) — start at 0.96 for physical weight
 *   - Exit MUCH faster than enter (160ms vs 300ms) — things leaving get out of the way
 *   - Custom spring-ish easing — NOT too bouncy (0.34, 1.56, 0.64, 1 is too jiggly for UI)
 *   - Use transform + clip-path + opacity only (GPU-accelerated, no layout)
 *   - Content animates ONLY after container is visually stable
 *   - Respect prefers-reduced-motion
 *
 * State machine (set by JS via data-state):
 *   [no class / no data-state]   → closed, hidden at trigger Y
 *   .open                         → container growing / grown; content fading in
 *   .open[data-state="closing"]   → container shrinking back to trigger (switch-case)
 *
 * CSS vars set by JS _setPanelOrigin():
 *   --panel-origin-y    button center Y relative to panel top (px)
 *   --clip-seed-top     inset top  to expose 44px strip at button Y
 *   --clip-seed-bottom  inset bottom to expose 44px strip at button Y
 */

/* Custom easings — local to this component */
#draw-panel, #select-panel, #info-panel, #measure-panel {
  --dab-enter-curve: cubic-bezier(0.22, 1, 0.36, 1);
  --dab-exit-curve:  cubic-bezier(0.4, 0, 0.9, 0.5);
  --dab-enter-dur:   2000ms;   /* DEBUG: slow-mo to verify animation works */
  --dab-exit-dur:    1000ms;
  --dab-content-delay: 800ms;
  --dab-content-dur:   600ms;

  position: absolute; top: 8px; left: 8px; width: 272px;
  max-height: calc(100% - 16px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 4px 20px rgba(26,26,46,0.10), 0 1px 4px rgba(26,26,46,0.06);
  z-index: 1000;

  /* Closed state — clipped to a 44px strip at button Y, scaled down subtly */
  clip-path: inset(
    var(--clip-seed-top, 40%)
    100%
    var(--clip-seed-bottom, 40%)
    0%
    round 10px
  );
  transform: scale(0.96);
  transform-origin: 0px var(--panel-origin-y, 120px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;

  /* Default (exit) transition — applies when panel goes from .open back to closed,
     OR when switching panels via data-state="closing" */
  transition:
    clip-path   var(--dab-exit-dur) var(--dab-exit-curve),
    transform   var(--dab-exit-dur) var(--dab-exit-curve),
    opacity     120ms var(--dab-exit-curve),
    visibility  0ms linear var(--dab-exit-dur);
  will-change: clip-path, transform, opacity;

  /* @starting-style tells the browser what "from" values to use when the
     element first enters the DOM (e.g. via appendChild). Without this,
     dynamically created panels have no computed closed-state to transition
     FROM — so adding .open causes an instant jump instead of animation.
     Supported: Chrome 117+, Safari 17.5+, Firefox 129+. */
  @starting-style {
    clip-path: inset(40% 100% 40% 0% round 10px);
    transform: scale(0.96);
    opacity: 0;
  }
}

#draw-panel.open, #select-panel.open, #info-panel.open, #measure-panel.open {
  /* Open state — fully revealed container */
  clip-path: inset(0% 0% 0% 0% round 12px);
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;

  transition:
    clip-path   var(--dab-enter-dur) var(--dab-enter-curve),
    transform   var(--dab-enter-dur) var(--dab-enter-curve),
    opacity     180ms var(--dab-enter-curve),
    visibility  0ms linear 0ms;
}

/* Explicit closing state — used during panel-switch to ensure exit timing
   even before .open is removed by JS. */
#draw-panel[data-state="closing"],
#select-panel[data-state="closing"],
#info-panel[data-state="closing"],
#measure-panel[data-state="closing"] {
  clip-path: inset(
    var(--clip-seed-top, 40%)
    100%
    var(--clip-seed-bottom, 40%)
    0%
    round 10px
  );
  transform: scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path   var(--dab-exit-dur) var(--dab-exit-curve),
    transform   var(--dab-exit-dur) var(--dab-exit-curve),
    opacity     120ms var(--dab-exit-curve);
}

/* Phase 2: content inside panel fades + translates in AFTER container grows.
   Panel sections are direct children like .dp-head, .dp-section, .sp-head, etc.
   We target them generically via child selector. */
#draw-panel > *, #select-panel > *, #info-panel > *, #measure-panel > * {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   var(--dab-content-dur) var(--dab-enter-curve),
    transform var(--dab-content-dur) var(--dab-enter-curve);
  transition-delay: 0ms;
}

/* When panel is open: stagger children in (30ms apart, starting after container grows) */
#draw-panel.open > *,
#select-panel.open > *,
#info-panel.open > *,
#measure-panel.open > * {
  opacity: 1;
  transform: translateY(0);
}
#draw-panel.open > *:nth-child(1),
#select-panel.open > *:nth-child(1),
#info-panel.open > *:nth-child(1),
#measure-panel.open > *:nth-child(1) { transition-delay: var(--dab-content-delay); }

#draw-panel.open > *:nth-child(2),
#select-panel.open > *:nth-child(2),
#info-panel.open > *:nth-child(2),
#measure-panel.open > *:nth-child(2) { transition-delay: calc(var(--dab-content-delay) + 40ms); }

#draw-panel.open > *:nth-child(3),
#select-panel.open > *:nth-child(3),
#info-panel.open > *:nth-child(3),
#measure-panel.open > *:nth-child(3) { transition-delay: calc(var(--dab-content-delay) + 80ms); }

#draw-panel.open > *:nth-child(n+4),
#select-panel.open > *:nth-child(n+4),
#info-panel.open > *:nth-child(n+4),
#measure-panel.open > *:nth-child(n+4) { transition-delay: calc(var(--dab-content-delay) + 120ms); }

/* During close: content exits faster, no stagger, leading the container shrink */
#draw-panel[data-state="closing"] > *,
#select-panel[data-state="closing"] > *,
#info-panel[data-state="closing"] > *,
#measure-panel[data-state="closing"] > * {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity   100ms var(--dab-exit-curve),
    transform 100ms var(--dab-exit-curve);
  transition-delay: 0ms;
}

/* Reduced motion: skip transforms and clip, keep fade only */
@media (prefers-reduced-motion: reduce) {
  #draw-panel, #select-panel, #info-panel, #measure-panel {
    clip-path: none; transform: none;
    transition: opacity 120ms ease, visibility 0ms linear 120ms;
  }
  #draw-panel.open, #select-panel.open, #info-panel.open, #measure-panel.open {
    clip-path: none; transform: none;
    transition: opacity 120ms ease, visibility 0ms linear 0ms;
  }
  #draw-panel > *, #select-panel > *, #info-panel > *, #measure-panel > * {
    opacity: 1; transform: none; transition: opacity 120ms ease;
  }
  #draw-panel[data-state="closing"] > *,
  #select-panel[data-state="closing"] > *,
  #info-panel[data-state="closing"] > *,
  #measure-panel[data-state="closing"] > * {
    opacity: 0; transform: none;
  }
}
.dp-head, .sp-head, .ip-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.dp-close, .sp-close, .ip-close {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: none; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-muted); transition: background 150ms;
}
@media (hover: hover) { .dp-close:hover, .sp-close:hover, .ip-close:hover { background: var(--border); } }
.dp-section, .sp-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.dp-label, .sp-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); display: block; margin-bottom: 8px;
}
.draw-tools, .sel-tools { display: flex; gap: 6px; }
.draw-tool-btn, .sel-tool-btn {
  flex: 1; padding: 7px 6px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 11px; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-secondary); transition: border-color 150ms, background 150ms;
}
@media (hover: hover) { .draw-tool-btn:hover, .sel-tool-btn:hover { border-color: var(--brand); color: var(--brand); } }
.draw-tool-btn.active, .sel-tool-btn.active { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.di { font-size: 15px; }
.dp-hint { font-size: 11px; color: var(--text-muted); }
.draw-text-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 !important;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(255,255,255,.8);
}
.draw-text-label::before { display: none !important; }
.draw-snap-btn {
  margin-top: 8px; padding: 6px 10px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: border-color 150ms, color 150ms;
}
.draw-snap-btn.snap-on { border-color: var(--accent); color: var(--accent); }
#layer-list { margin-top: 8px; }
.dp-add-layer { margin-top: 8px; font-size: 12px; color: var(--brand); background: none; border: none; cursor: pointer; padding: 0; }
.dp-undo-row { display: flex; gap: 8px; }
.dp-undo-btn {
  flex: 1; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: border-color 150ms;
}
.dp-undo-btn:disabled { opacity: 0.4; cursor: default; }
.sp-counter { padding: 10px 14px; font-size: 13px; }
.sp-actions { display: flex; gap: 8px; padding: 10px 14px; }
.sp-btn {
  flex: 1; padding: 7px 10px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: border-color 150ms;
}
.sp-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (hover: hover) { .sp-btn.primary:hover { background: var(--brand-dark, #164a85); } }
.ip-hint { font-size: 12px; color: var(--text-muted); padding: 12px 14px; }

/* ─── Measure panel ─── */
.mp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.mp-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text-muted); transition: background 150ms; }
@media (hover: hover) { .mp-close:hover { background: var(--border); } }
.mp-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.mp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: block; margin-bottom: 8px; }
.meas-tools { display: flex; gap: 6px; }
.meas-tool-btn { flex: 1; padding: 7px 6px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); font-size: 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-secondary); transition: border-color 150ms, background 150ms; }
@media (hover: hover) { .meas-tool-btn:hover { border-color: var(--brand); color: var(--brand); } }
.meas-tool-btn.active { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.mp-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.mp-result { padding: 12px 14px; }
.mp-result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.mp-result-row:last-child { border-bottom: none; }
.mp-result-key { color: var(--text-muted); font-size: 12px; }
.mp-result-val { font-weight: 600; font-family: var(--font-mono, monospace); font-size: 13px; }
.mp-actions { display: flex; gap: 8px; padding: 10px 14px; }
.mp-btn { flex: 1; padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: border-color 150ms; }
@media (hover: hover) { .mp-btn:hover { border-color: var(--brand); color: var(--brand); } }
.mp-empty { font-size: 12px; color: var(--text-muted); padding: 12px 14px; }

/* Measure tooltip labels on map */
.meas-tooltip {
  background: rgba(26,26,46,0.82); color: #fff;
  border: none; border-radius: 5px; padding: 3px 7px;
  font-size: 11px; font-family: var(--font-mono, monospace);
  white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.meas-tooltip::before { display: none; }
.meas-tooltip-total {
  background: var(--brand, #1d5fa8); color: #fff;
  border: none; border-radius: 5px; padding: 4px 9px;
  font-size: 12px; font-weight: 600; font-family: var(--font-mono, monospace);
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}
.meas-tooltip-total::before { display: none; }

/* ─── Legend / results box ─── */
.legend-box {
  position: absolute; bottom: 46px; left: 10px; width: 340px; max-height: 260px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 4px 12px rgba(26,26,46,0.08);
  z-index: 100; display: none; flex-direction: column; overflow: hidden;
}
.legend-box.on { display: flex; }
.legend-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.legend-hd h4 { font-size: 13px; font-weight: 600; }
.legend-close { font-size: 18px; line-height: 1; background: none; border: none; cursor: pointer; color: var(--text-muted); }
.rtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.rtable th { background: var(--cream); padding: 6px 10px; text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.rtable td { padding: 5px 10px; border-top: 1px solid var(--border); font-family: 'DM Mono', monospace; font-size: 11px; }
.legend-export { width: auto; margin: 10px 14px; border-radius: 8px; padding: 7px 14px; flex-shrink: 0; font-size: 13px; }
.legend-export-row { display: flex; align-items: center; gap: 6px; margin: 10px 14px; }
.legend-export-row .legend-export { margin: 0; flex-shrink: 0; }
.export-fmt-sel { flex: 1; height: 32px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12px; padding: 0 8px; cursor: pointer; }
.legend-disclaimer {
  margin: 4px 14px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
  flex-shrink: 0;
}
.legend-disclaimer a { color: var(--brand); text-decoration: underline; }

/* ─── Color picker popup ─── */
#color-picker-popup {
  position: absolute; z-index: 300;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; box-shadow: 0 4px 12px rgba(26,26,46,0.08);
  display: none; width: 200px;
}
.cp-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cp-custom-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cp-custom-input { width: 28px; height: 24px; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; padding: 0; }
.cp-hex-input { flex: 1; padding: 3px 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: 'DM Mono', monospace; }

/* ─── Modals ─── */
#upgrade-modal, #export-modal, #crs-report-modal, #auth-modal {
  position: fixed; inset: 0; background: rgba(26,26,46,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; opacity: 0; pointer-events: none; transition: opacity 200ms;
}
#upgrade-modal.open, #export-modal.open, #crs-report-modal.open, #auth-modal.open { opacity: 1; pointer-events: auto; }

/* ─── Auth modal (login/opret konto — login-gating, se auth.js) ─── */
.auth-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.auth-tab {
  flex: 1; background: none; border: none; padding: 10px 4px; font-size: 13px;
  font-weight: 700; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.auth-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.auth-field-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: block; }
/* auth-modal-hint sidder som første element i .pdf-card, lige under den
   absolut positionerede .pdf-close (top:16px, 28x28px, se .pdf-close
   nedenfor). Uden clearance her overlapper ×-knappens nederste 16px hjørnet
   af hint-boksens baggrund (positioneret element males altid over statisk
   in-flow indhold, uanset DOM-rækkefølge) — margin-top løfter boksen ned
   under knappen, så de aldrig deler pixels. */
.auth-modal-hint {
  font-size: 12px; color: var(--text-muted); background: var(--cream);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  /* 40px clearance: ×-knappen er absolut (top:16px + 28px = 44px). Ved lav
     card-padding-top eller zoom kunne 24px røre knappens hjørne — 40px + at
     boksen selv holder afstand fra højre (margin-right forbi ×-kolonnen) gør
     det robust uanset viewport. */
  margin-top: 40px; margin-right: 40px; margin-bottom: 14px;
}
.auth-msg { font-size: 12.5px; border-radius: 8px; padding: 9px 11px; margin-bottom: 12px; line-height: 1.5; }
.auth-msg.err { background: rgba(211,47,47,.1); color: #d32f2f; border: 1px solid rgba(211,47,47,.25); }
.auth-msg.ok  { background: rgba(15,184,122,.12); color: #0e7a52; border: 1px solid rgba(15,184,122,.25); }
.auth-resend-link {
  font-size: 12px; color: var(--brand); text-decoration: underline; background: none;
  border: none; padding: 0; margin-top: 6px; cursor: pointer; display: inline-block;
}
.auth-resend-link:disabled { opacity: .5; cursor: default; text-decoration: none; }
#auth-reg-success p { font-size: 13px; color: var(--text-secondary); margin: 0 0 6px; }
/* Kode-login (primær, 2026-07-24) — se auth-view-code/auth-view-password i
   modal-markup'en (templates/tool.html + tool-modals.js). */
.auth-code-sent-to { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 12px; }
.auth-code-links-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.auth-code-links-row .auth-resend-link { margin-top: 0; }
.auth-switch-link {
  display: block; width: 100%; text-align: center; margin-top: 16px;
  background: none; border: none; padding: 0; font-size: 12.5px;
  color: var(--text-muted); text-decoration: underline; cursor: pointer;
}
@media (hover: hover) { .auth-switch-link:hover { color: var(--brand); } }

/* ─── Header konto-område ─── */
.acct-login-btn {
  height: 34px; border-radius: 18px; padding: 0 16px; font-size: 12.5px;
  font-weight: 700; color: #fff; background: var(--brand); border: none;
  cursor: pointer; transition: background 150ms var(--ease-out); white-space: nowrap;
}
@media (hover: hover) { .acct-login-btn:hover { background: var(--brand-dark); } }
.acct-logged { display: flex; align-items: center; gap: 8px; }
.acct-email-text {
  font-size: 12px; font-weight: 600; color: var(--text);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Login-gating: gråtonede ikoner når ikke logget ind ─── */
.login-gated { opacity: .45 !important; cursor: not-allowed !important; }
.crs-report-detected-val {
  font-size: 13px; font-family: 'DM Mono', monospace; color: var(--text);
  background: var(--cream); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; margin-bottom: 14px;
}
.crs-report-privacy {
  font-size: 10.5px; line-height: 1.5; color: var(--text-muted); margin-bottom: 16px;
}
#crs-report-comment { resize: vertical; min-height: 60px; font-family: inherit; }

/* PDF-panel: højre sidepanel så kortet til venstre forbliver INTERAKTIVT —
   brugeren skal kunne placere/flytte/rotere print-rammen på kortet mens panelet
   er åbent. Derfor INTET fuldskærms-backdrop (koordinat.css' centrerede regel +
   inset:0 overstyres her: left:auto ankrer til højre, align-items:stretch gør at
   kortet fylder panelets bredde uden at blive klippet). */
#pdf-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(380px, 92vw);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(26,26,46,0.15); backdrop-filter: none;
  z-index: 500; opacity: 1; pointer-events: none;
  transform: translateX(100%); transition: transform 250ms cubic-bezier(0.23,1,0.32,1);
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  overflow-y: auto;
}
#pdf-modal.open { transform: translateX(0); pointer-events: auto; }
#pdf-modal .pdf-card {
  width: 100%; max-width: none; border-radius: 0;
  box-shadow: none; transform: none; padding: 24px 22px;
}
.pdf-card, .pro-card {
  background: var(--surface); border-radius: 16px; padding: 28px 28px 24px;
  width: min(480px, 92vw); box-shadow: 0 8px 24px rgba(26,26,46,0.12); position: relative;
  overflow: hidden; /* clips gradient top-bar to border-radius */
}
.pdf-close, .pro-close {
  position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--cream); cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-muted);
}
@media (hover: hover) { .pdf-close:hover, .pro-close:hover { background: var(--border); } }
.pdf-card h3, .pro-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pdf-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); display: block; margin-bottom: 5px; }
.pdf-field select, .pdf-field input { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); }
.pdf-field-full { grid-column: 1 / -1; }
.pdf-preview { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--cream); margin-bottom: 16px; }
.pdf-preview-inner { position: relative; height: 180px; }
.pdf-preview-map { position: absolute; inset: 0; background: #e8eef5; }
.pdf-preview-map .leaflet-container { border-radius: 0; }
.pdf-panel-strip { position: absolute; right: 0; top: 0; bottom: 0; width: 0; background: var(--surface); z-index: 1000; }
.pdf-preview-north { position: absolute; top: 8px; right: 8px; font-size: 12px; font-weight: 700; color: var(--text); z-index: 1000; pointer-events: none; }
.pdf-preview-scale { position: absolute; bottom: 8px; left: 8px; font-size: 11px; color: var(--text-secondary); z-index: 1000; pointer-events: none; }
.pdf-preview-remark { position: absolute; bottom: 8px; right: 8px; font-size: 11px; color: var(--text-secondary); z-index: 1000; pointer-events: none; }
.pdf-frame-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdf-rotation-badge { font-size: 11px; font-weight: 700; background: var(--cream,#f5f0e8); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }
.pdf-actions { display: flex; gap: 10px; }
.pro-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.pro-list { padding-left: 18px; font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.pro-price { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.pro-price span { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.pro-actions { display: flex; gap: 10px; }
.pro-actions .btn, .pro-actions .btn-outline { flex: 1; }

/* ─── Toast ─── */
.mini-toast {
  position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; border-radius: 20px;
  padding: 8px 18px; font-size: 13px; z-index: 600;
  animation: toastIn 0.25s var(--ease-out);
}
.mini-toast.ok { background: #1a7a56; }
.mini-toast.err { background: #b3261e; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Session-restore toast (top-right) ─── */
.session-toast {
  position: fixed; top: 68px; right: 16px;
  background: rgba(250,248,245,0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(26,26,46,0.12), 0 1px 4px rgba(26,26,46,0.06);
  min-width: 220px;
  max-width: 280px;
}
.session-toast strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.session-toast-actions {
  display: flex; gap: 8px;
}
.session-toast-actions button {
  flex: 1; padding: 7px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; border: none;
  transition: background 150ms var(--ease-out);
}
.session-toast-btn-yes {
  background: var(--brand); color: #fff;
}
@media (hover: hover) { .session-toast-btn-yes:hover { background: var(--brand-dark); } }
.session-toast-btn-no {
  background: var(--cream); color: var(--text-secondary);
  border: 1.5px solid var(--border) !important;
}
@media (hover: hover) { .session-toast-btn-no:hover { background: var(--border); } }

/* ─── Dark mode overrides ─── */
[data-theme="dark"] .app-header {
  background: rgba(14,25,41,0.92);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .import-sidebar {
  background: #1a1f2e;
  border-right-color: var(--border);
}
[data-theme="dark"] .sb-header { border-bottom-color: var(--border); }
@media (hover: hover) { [data-theme="dark"] .sb-close:hover { background: #2a3040; color: var(--text); } }
[data-theme="dark"] .vtoolbar {
  background: #1a1f2e;
  border-right-color: var(--border);
}
[data-theme="dark"] .bottom-bar {
  background: rgba(14,25,41,0.92);
  border-top-color: var(--border);
}
[data-theme="dark"] .textarea {
  background: #111827;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .upload-btn {
  background: #111827;
  border-color: #3a4050;
  color: var(--text);
}
@media (hover: hover) {
  [data-theme="dark"] .upload-btn:hover { background: rgba(29,95,168,0.12); }
}
[data-theme="dark"] #global-drop-overlay .drop-pill {
  background: rgba(14,25,41,0.96); color: #6fe3c4;
  border-color: #2dd4a8;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 6px rgba(45,212,168,0.15);
}
[data-theme="dark"] .guess-item {
  background: #111827;
  border-color: var(--border);
}
[data-theme="dark"] .sel {
  background: #111827;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .tip-card {
  background: rgba(29,95,168,0.1);
  border-color: rgba(29,95,168,0.2);
}
[data-theme="dark"] .btn-outline {
  color: var(--text);
  border-color: var(--border);
}
@media (hover: hover) {
  [data-theme="dark"] .btn-outline:hover { border-color: var(--brand); color: #7eb3e8; }
}
[data-theme="dark"] .legend-box {
  background: #1a1f2e;
  border-color: var(--border);
}
[data-theme="dark"] .legend-hd { border-bottom-color: var(--border); }
[data-theme="dark"] .rtable th { background: #111827; }
[data-theme="dark"] .rtable td { border-top-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .export-fmt-sel {
  background: #111827;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] #draw-panel,
[data-theme="dark"] #select-panel,
[data-theme="dark"] #info-panel,
[data-theme="dark"] #measure-panel {
  background: #1a1f2e;
  border-color: var(--border);
}
[data-theme="dark"] .dp-head,
[data-theme="dark"] .sp-head,
[data-theme="dark"] .ip-head,
[data-theme="dark"] .mp-head { border-bottom-color: var(--border); }
[data-theme="dark"] .dp-section,
[data-theme="dark"] .sp-section,
[data-theme="dark"] .mp-section { border-bottom-color: var(--border); }
[data-theme="dark"] .draw-tool-btn,
[data-theme="dark"] .sel-tool-btn,
[data-theme="dark"] .meas-tool-btn {
  background: #111827;
  border-color: #3a4050;
  color: var(--text-secondary);
}
[data-theme="dark"] .dp-undo-btn,
[data-theme="dark"] .sp-btn,
[data-theme="dark"] .mp-btn {
  background: #111827;
  border-color: #3a4050;
  color: var(--text-secondary);
}
[data-theme="dark"] .draw-snap-btn {
  background: #111827;
  border-color: #3a4050;
  color: var(--text-secondary);
}
[data-theme="dark"] .mp-result-row { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] #color-picker-popup {
  background: #1a1f2e;
  border-color: var(--border);
}
[data-theme="dark"] .cp-hex-input {
  background: #111827;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .pdf-card,
[data-theme="dark"] .pro-card,
[data-theme="dark"] #upgrade-modal .pro-card {
  background: #1a1f2e;
  color: var(--text);
}
[data-theme="dark"] .pdf-close,
[data-theme="dark"] .pro-close {
  background: #111827;
  color: var(--text-muted);
}
@media (hover: hover) { [data-theme="dark"] .pdf-close:hover, [data-theme="dark"] .pro-close:hover { background: #2a3040; } }
[data-theme="dark"] .pdf-field select,
[data-theme="dark"] .pdf-field input {
  background: #111827;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .pdf-preview { border-color: var(--border); background: #111827; }
[data-theme="dark"] .pdf-preview-map { background: #1e2d42; }
[data-theme="dark"] .pro-sub,
[data-theme="dark"] .pro-list { color: var(--text-secondary); }
[data-theme="dark"] .session-toast {
  background: rgba(14,25,41,0.97);
  border-color: var(--border);
}
[data-theme="dark"] .session-toast-btn-no {
  background: #111827;
  color: var(--text-secondary);
}
@media (hover: hover) { [data-theme="dark"] .session-toast-btn-no:hover { background: #2a3040; } }
[data-theme="dark"] .map-warning { background: rgba(14,25,41,0.95); }
[data-theme="dark"] .leaflet-tile { filter: brightness(.75) saturate(.65); }
[data-theme="dark"] .leaflet-popup-content-wrapper { background: #1a1f2e; color: var(--text); }
[data-theme="dark"] .leaflet-popup-tip { background: #1a1f2e; }

/* ─── Accessibility: global focus ring ─── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.vtb-btn:focus-visible,
.btn:focus-visible,
.btn-outline:focus-visible,
.draw-tool-btn:focus-visible,
.sel-tool-btn:focus-visible,
.meas-tool-btn:focus-visible,
.dp-undo-btn:focus-visible,
.sp-btn:focus-visible,
.mp-btn:focus-visible,
.sb-close:focus-visible,
.dp-close:focus-visible,
.sp-close:focus-visible,
.ip-close:focus-visible,
.mp-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ─── Accessibility: reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .import-sidebar,
  .vtb-btn,
  .btn,
  .btn-outline,
  .upload-btn,
  #global-drop-overlay,
  .draw-tool-btn,
  .sel-tool-btn,
  .meas-tool-btn,
  #pdf-modal,
  #upgrade-modal,
  #export-modal,
  #auth-modal,
  .mini-toast {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── Empty states ─── */
.map-empty-state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; z-index: 5;
  color: var(--text-muted); font-size: 14px; gap: 8px;
  opacity: 1; transition: opacity 200ms;
}
.map-empty-state.hidden { display: none; }
.map-empty-state svg { opacity: 0.35; }
.map-empty-state p { margin: 0; font-size: 13px; }
.empty-row td {
  text-align: center; color: var(--text-muted);
  font-size: 12px; padding: 12px 10px; font-style: italic;
}
.layer-list-empty {
  font-size: 12px; color: var(--text-muted);
  padding: 6px 0; font-style: italic;
}

/* ─── Responsive: under 600px ─── */
@media (max-width: 600px) {

  /* --- Import sidebar → full-screen overlay --- */
  .import-sidebar.open {
    position: fixed; inset: 0; z-index: 500;
    width: 100% !important; border-radius: 0;
  }
  .import-sidebar > .sb-header,
  .import-sidebar > .sb-body { width: 100%; }
  /* Make close button larger / more visible on mobile */
  .import-sidebar .sb-close {
    width: 36px; height: 36px; font-size: 22px;
    background: var(--cream); border-radius: 50%;
  }

  /* --- Header: hide badges & brand text to save space --- */
  .header-badges { display: none; }
  .brand-name-hd { display: none; }

  /* --- Fly-out panels → bottom-sheet on mobile --- */
  #draw-panel, #select-panel, #info-panel, #measure-panel {
    position: fixed;
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; max-height: 50vh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 -4px 20px rgba(26,26,46,0.12);
    /* Override desktop clip-path reveal: use slide-up on mobile */
    clip-path: none;
    transform: translateY(100%);
    opacity: 1; /* keep fully opaque on mobile, only slide */
    transform-origin: center bottom;
    transition:
      transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0ms linear 280ms;
  }
  #draw-panel.open, #select-panel.open, #info-panel.open, #measure-panel.open {
    clip-path: none;
    transform: translateY(0);
    transition:
      transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0ms linear 0ms;
  }
  /* Mobile: skip content stagger — bottom-sheet already communicates arrival */
  #draw-panel > *, #select-panel > *, #info-panel > *, #measure-panel > * {
    opacity: 1; transform: none; transition: none;
  }
  #draw-panel[data-state="closing"],
  #select-panel[data-state="closing"],
  #info-panel[data-state="closing"],
  #measure-panel[data-state="closing"] {
    clip-path: none;
    transform: translateY(100%);
    opacity: 1;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  #draw-panel[data-state="closing"] > *,
  #select-panel[data-state="closing"] > *,
  #info-panel[data-state="closing"] > *,
  #measure-panel[data-state="closing"] > * {
    opacity: 1; transform: none;
  }

  /* --- Toolbar → horizontal bar above bottom-bar --- */
  .vtoolbar {
    position: fixed; bottom: var(--bottom-h); left: 0; right: 0; top: auto;
    width: 100%; height: 52px; flex-direction: row;
    border-right: none; border-top: 1px solid var(--border); z-index: 150;
    padding: 4px 8px; overflow-x: auto; justify-content: flex-start;
    background: var(--surface);
  }
  /* Separator becomes vertical in horizontal toolbar */
  .vtoolbar .vtb-sep {
    width: 1px; height: 28px; margin: 0 4px;
  }
  /* Active indicator moves to bottom edge in horizontal layout */
  .vtb-btn.active::before {
    left: 50%; top: auto; bottom: 0;
    transform: translateX(-50%);
    width: 24px; height: 3px;
    border-radius: 3px 3px 0 0;
  }

  .app-body { flex-direction: column; }
  .map-area { flex: 1; padding-bottom: 52px; }

  /* --- PDF modal → full-screen --- */
  #pdf-modal .pdf-card {
    width: 100vw; height: 100vh; max-width: 100vw;
    border-radius: 0; margin: 0;
    overflow-y: auto;
  }
  #pdf-modal { align-items: stretch; }

  /* --- Export / Upgrade / Auth modals → full-width bottom sheet --- */
  #upgrade-modal .pro-card,
  #export-modal .pdf-card,
  #auth-modal .pdf-card {
    width: 100%; max-width: 100%;
    border-radius: 12px 12px 0 0;
    margin-top: auto; margin-bottom: 0;
  }
  #upgrade-modal,
  #export-modal,
  #auth-modal { align-items: flex-end; }

  /* --- Legend box → full width with margins --- */
  .legend-box {
    max-width: 100%; width: auto;
    left: 10px; right: 10px;
  }

  /* --- PDF grid: stack fields vertically --- */
  .pdf-grid { grid-template-columns: 1fr; }

  /* --- Mini toast: avoid overlapping toolbar --- */
  .mini-toast { bottom: 100px; }
}

/* ─── Responsive: under 400px ─── */
@media (max-width: 400px) {
  /* Tighter header padding */
  .app-header { padding: 0 10px; gap: 8px; }

  /* Smaller toolbar buttons */
  .vtb-btn { width: 40px; height: 40px; }
  .vtoolbar { height: 48px; }
  .map-area { padding-bottom: 48px; }

  /* Stack guess-grid items on very small screens */
  .guess-grid { grid-template-columns: 1fr; }

  /* Sidebar body: less padding */
  .sb-body { padding: 14px; }
}