/* Site Photo Mapper — Apple-style system palette, materials and motion, light + dark */
:root {
  /* surfaces */
  --bg: #f2f2f7;
  --panel: #ffffff;
  --panel-2: #f7f7f9;
  --sidebar: #f5f5f7;
  /* labels */
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #8e8e93;
  /* separators + fills (translucent so they work on any surface or material) */
  --border: rgba(60, 60, 67, .14);
  --border-strong: rgba(60, 60, 67, .26);
  --fill: rgba(118, 118, 128, .12);
  --fill-2: rgba(118, 118, 128, .2);
  --hover: rgba(118, 118, 128, .1);
  --press: rgba(118, 118, 128, .18);
  /* tint: --accent for text/links, --accent-fill behind white text (both ≥ 4.5:1) */
  --accent: #0066cc;
  --accent-fill: #0071e3;
  --accent-ink: #ffffff;
  --accent-soft: #e8f1fc;
  --danger: #d70015;
  --warn-bg: #fff5d9;
  --warn-border: #f2d283;
  --warn-text: #7a4d00;
  --ok: #248a3d;
  /* materials: translucent layers over the map */
  --mat: rgba(255, 255, 255, .72);
  --mat-thick: rgba(252, 252, 254, .86);
  --mat-blur: blur(24px) saturate(180%);
  --mat-edge: inset 0 0 0 .5px rgba(255, 255, 255, .6);
  --hud: rgba(28, 28, 30, .8);
  --focus-ring: 0 0 0 3.5px color-mix(in srgb, var(--accent-fill) 35%, transparent);
  --shadow-xs: 0 .5px 1px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .04);
  --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 16px -4px rgba(0, 0, 0, .1);
  --shadow-pop: 0 0 0 .5px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .05), 0 12px 32px -8px rgba(0, 0, 0, .2);
  --shadow-lg: 0 0 0 .5px rgba(0, 0, 0, .1), 0 24px 64px -12px rgba(0, 0, 0, .32);
  --r-sm: 7px;
  --radius: 10px;
  --r-lg: 14px;
  --r-sheet: 18px;
  /* motion: critically damped feel; drawer curve ≈ Apple's damping 1 / response .4 */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --sidebar-w: 320px;
  --detail-w: 400px;
  --topbar-h: 52px;
  --inset: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --panel: #1c1c1e;
    --panel-2: #2c2c2e;
    --sidebar: #161618;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --faint: #7c7c80;
    --border: rgba(84, 84, 88, .45);
    --border-strong: rgba(120, 120, 128, .55);
    --fill: rgba(118, 118, 128, .24);
    --fill-2: rgba(118, 118, 128, .34);
    --hover: rgba(118, 118, 128, .2);
    --press: rgba(118, 118, 128, .3);
    --accent: #4ea1ff;
    --accent-fill: #0a6cff;
    --accent-ink: #ffffff;
    --accent-soft: #172a45;
    --danger: #ff6961;
    --warn-bg: #3a2e12;
    --warn-border: #6b5420;
    --warn-text: #ffd479;
    --ok: #32b45a;
    --mat: rgba(30, 30, 32, .7);
    --mat-thick: rgba(28, 28, 30, .86);
    --mat-edge: inset 0 0 0 .5px rgba(255, 255, 255, .1);
    --hud: rgba(44, 44, 46, .82);
    --shadow-xs: 0 .5px 1px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .06);
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 16px -4px rgba(0, 0, 0, .5);
    --shadow-pop: 0 0 0 .5px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .7);
    --shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .1), 0 24px 64px -12px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 var(--font); color: var(--text); background: var(--bg); overflow: hidden;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, .dlg-head h2, .empty-state h2 { font-family: var(--font-display); }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
a { color: var(--accent); }

/* ---------- buttons & inputs ---------- */
/* Buttons: borderless filled style (macOS "bordered" / iOS "gray"). Feedback lands on press, fast;
   release settles slightly slower so the button springs back rather than snapping. */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  border: 1px solid transparent; background: var(--fill); border-radius: var(--r-sm); color: var(--text);
  cursor: pointer; white-space: nowrap; font-weight: 500; letter-spacing: -.005em;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 240ms var(--ease-out);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.btn:hover { background: var(--fill-2); }
.btn:active:not(:disabled) { transform: scale(.96); transition-duration: 150ms, 150ms, 150ms, 90ms; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-fill) 40%, transparent), inset 0 .5px 0 rgba(255, 255, 255, .25); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent-fill) 88%, #fff); }
.btn.primary:active:not(:disabled) { background: color-mix(in srgb, var(--accent-fill) 88%, #000); }
.caret { width: 10px; height: 10px; margin-right: -3px; opacity: .7; flex: none; transition: transform 300ms var(--ease-drawer); }
[aria-expanded=true] > .caret { transform: rotate(180deg); }
.btn.danger { color: var(--danger); }
.btn.small { height: 26px; padding: 0 9px; font-size: 12.5px; border-radius: 6px; }
.btn.icon { width: 32px; padding: 0; justify-content: center; }
.btn.small.icon { width: 26px; }
.btn.active { background: color-mix(in srgb, var(--accent-fill) 14%, transparent); color: var(--accent); }
.ico { width: 16px; height: 16px; flex: none; display: block; pointer-events: none; }
.btn.small .ico { width: 14px; height: 14px; }
input[type=text], input[type=number], input[type=search], input:not([type]), select, textarea {
  height: 30px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--panel); min-width: 0; transition: border-color 150ms ease, box-shadow 200ms var(--ease-out);
  box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .04);
}
input[type=text]:hover, input[type=number]:hover, input[type=search]:hover, input:not([type]):hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 100%, var(--text) 12%); }
textarea { height: auto; padding: 7px 9px; resize: vertical; line-height: 1.4; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent-fill); box-shadow: var(--focus-ring);
}
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, input[type=range]:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: 4px; }
.btn:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::placeholder { color: var(--faint); opacity: 1; }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--accent-fill); }
input[type=color] { width: 36px; height: 28px; padding: 0 2px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel); }

/* ---------- top bar ---------- */
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--panel); border-bottom: 1px solid var(--border); position: relative; z-index: 1001;
}
.brand { display: flex; align-items: center; gap: 10px; font: 650 15px/1 var(--font-display); letter-spacing: -.02em; margin-right: 6px; }
/* app-icon style mark: squircle tile, top-lit gradient */
.brand-mark {
  width: 30px; height: 30px; padding: 5px; color: #fff; border-radius: 8px;
  background: linear-gradient(180deg, #48a3ff, #0063d9);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 60, 140, .3);
}
.topbar-spacer { flex: 1; }
/* segmented control: recessed track, raised thumb */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--fill); border-radius: 9px; }
.seg button {
  border: 0; background: transparent; padding: 0 14px; height: 28px; cursor: pointer; font-weight: 500; border-radius: 7px; color: var(--text);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.seg button:hover:not(:disabled):not([aria-selected=true]) { background: var(--hover); }
.seg button[aria-selected=true] { background: var(--panel); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); }
/* topbar Map/Plan: one thumb that slides between equal-width segments */
.topbar .seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.topbar .seg::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 2); border-radius: 7px;
  background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: transform 340ms var(--ease-drawer);
}
.topbar .seg:has([data-mode=plan][aria-selected=true])::before { transform: translateX(100%); }
.topbar .seg button { position: relative; padding: 0 18px; }
.topbar .seg button[aria-selected=true] { background: transparent; box-shadow: none; }
.topbar .seg button:hover:not([aria-selected=true]) { background: transparent; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .seg button[aria-selected=true], .topbar .seg::before { background: #636366; }
}
.plan-picker select { max-width: 260px; height: 32px; }
.menu-wrap { position: relative; }
/* menus: translucent material, macOS-style accent highlight on hover */
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); background: var(--mat-thick); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border: 0; border-radius: 12px; box-shadow: var(--shadow-pop), var(--mat-edge); padding: 5px; min-width: 200px; z-index: 2000;
  transform-origin: top right;
  transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-drawer);
}
@starting-style { .menu { opacity: 0; transform: translateY(-6px) scale(.96); } }
.menu a { display: flex; align-items: center; padding: 6px 10px; border-radius: 7px; color: var(--text); text-decoration: none; }
.menu a:hover { background: var(--accent-fill); color: var(--accent-ink); }
.progress { position: relative; width: 200px; height: 24px; border-radius: 12px; background: var(--fill); overflow: hidden; }
.progress .bar {
  position: absolute; inset: 0 auto 0 0; width: 0; transition: width 400ms var(--ease-drawer);
  background: color-mix(in srgb, var(--accent-fill) 22%, transparent); border-right: 2px solid var(--accent-fill);
}
.progress .label { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 500; line-height: 24px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.layout { display: flex; height: calc(100% - var(--topbar-h)); }
/* sidebar is a structural region: heavier, slightly tinted surface (macOS source list) */
.sidebar {
  width: var(--sidebar-w); flex: none; display: flex; flex-direction: column; background: var(--sidebar);
  border-right: 1px solid var(--border); overflow: hidden; timeline-scope: --side-scroll;
}
/* only the list scrolls, so the scrollbar starts below the filters rather than beside them */
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-timeline: --side-scroll; }
.side-scroll, .detail-body, .tp-body, .dlg-body, .rv-list, .menu, .td-strip, .br-body {
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.main { position: relative; flex: 1; min-width: 0; }
.map { position: absolute; inset: 0; background: var(--bg); }
#mapPlan { background: #e9ecf0; }

/* ---------- sidebar ---------- */
/* Scroll edge effect: no hard divider at rest; a soft shadow fades in only once the list scrolls under. */
.side-section {
  padding: 14px 14px 12px; flex: none; max-height: 60%; overflow-y: auto; scrollbar-width: none;
  position: relative; background: var(--sidebar); z-index: 2; box-shadow: 0 1px 0 var(--border);
}
@supports (animation-timeline: scroll()) {
  .side-section { box-shadow: none; animation: scroll-edge linear both; animation-timeline: --side-scroll; animation-range: 0 32px; }
  @keyframes scroll-edge { to { box-shadow: 0 1px 0 var(--border), 0 8px 16px -10px rgba(0, 0, 0, .28); } }
}
.counts { font-size: 13px; color: var(--muted); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.counts b { color: var(--text); font-weight: 650; }
/* sentence-case section headers, Apple sidebar style */
.filter-label { font-size: 11.5px; letter-spacing: 0; color: var(--muted); margin: 12px 0 6px 2px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px;
  border: 0; background: var(--panel); cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 240ms var(--ease-out);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.chip:hover { background: color-mix(in srgb, var(--panel) 92%, var(--text)); }
.chip:active { transform: scale(.95); transition-duration: 150ms, 150ms, 150ms, 90ms; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15); }
.chip .n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 400; }
.chip[aria-pressed=true] { background: var(--accent-fill); color: var(--accent-ink); font-weight: 600; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-fill) 35%, transparent); }
.chip[aria-pressed=true] .n { color: inherit; opacity: .8; }
.chip[aria-pressed=true] .dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
@media (prefers-color-scheme: dark) {
  .chip { background: var(--fill); box-shadow: none; }
  .chip:hover { background: var(--fill-2); }
}
.options { margin-top: 14px; font-size: 13px; }
.options summary {
  cursor: pointer; color: var(--muted); list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
  padding: 3px 8px 3px 4px; margin-left: -4px; border-radius: 6px; transition: color 150ms ease, background-color 150ms ease;
}
.options summary::-webkit-details-marker { display: none; }
.options summary::before, .list-section summary::before {
  content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg);
  margin: 0 3px; transition: transform 300ms var(--ease-drawer); flex: none;
}
.options[open] > summary::before, .list-section[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.options summary:hover { color: var(--text); background: var(--hover); }
.options[open] > summary ~ * { animation: reveal 260ms var(--ease-out) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }
.options .check, .options .row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.options .row input { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

.photo-list { list-style: none; margin: 0; padding: 6px 8px; }
/* No transitions on rows: selection moves with arrow keys and must be instant.
   Selection uses the source-list convention: solid accent row, white labels. */
.photo-item {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center;
  padding: 6px 8px; cursor: pointer; border-radius: var(--radius); position: relative;
}
.photo-item + .photo-item { margin-top: 1px; }
.photo-item:hover { background: var(--hover); }
.photo-item.selected { background: var(--accent-fill); color: var(--accent-ink); }
.photo-item .th {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--fill);
  border: 2px solid var(--panel); box-shadow: 0 0 0 2px var(--c, var(--faint)), 0 1px 3px rgba(0, 0, 0, .18);
}
.photo-item.selected .th { border-color: var(--accent-fill); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .25); }
.photo-item .t { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; }
.photo-item .s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.photo-item.selected .s, .photo-item.selected .flags { color: rgba(255, 255, 255, .82); }
.photo-item .lv { font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); white-space: nowrap; }
.photo-item.selected .lv { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); color: #fff; }
.photo-item .flags { font-size: 11px; color: var(--faint); }
.list-empty { padding: 32px 16px; color: var(--muted); text-align: center; text-wrap: pretty; }
/* Collapsible list sections (Located / Unlocated). The header sticks to the top of the scrolling
   list while its section is in view, so a long list can be collapsed without scrolling back up. */
.list-section + .list-section { border-top: 1px solid var(--border); }
.list-section > summary {
  padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px;
  position: sticky; top: 0; z-index: 1; background: var(--sidebar);
}
.list-section > summary::-webkit-details-marker { display: none; }
.list-section > summary:hover { background: linear-gradient(var(--hover), var(--hover)) var(--sidebar); }
.list-section[open] > summary ~ * { animation: reveal 260ms var(--ease-out) both; }
/* rows revealed by keyboard nav must not end up under the sticky header */
.list-section .photo-item { scroll-margin-top: 44px; }
.unlocated .hint { margin: 0 14px 6px; color: var(--muted); font-size: 12.5px; }
.pill { display: inline-block; min-width: 20px; padding: 0 7px; border-radius: 10px; background: var(--fill); font-size: 11.5px; line-height: 18px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---------- banners & map chrome ---------- */
/* Everything floating over the map is a translucent material: the map stays visible underneath,
   so the chrome adds structure without hiding where you are. */
.banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000;
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text);
  padding: 7px 8px 7px 14px; border-radius: 12px; box-shadow: var(--shadow-pop); display: flex; gap: 10px; align-items: center; max-width: 80%;
  font-weight: 500; transition: opacity 200ms var(--ease-out), transform 340ms var(--ease-drawer);
}
@starting-style { .banner { opacity: 0; transform: translate(-50%, -10px); } }
/* HUD: dark material in both themes, like iOS system HUDs */
.pick-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000;
  background: var(--hud); color: #fff; padding: 6px 6px 6px 16px; border-radius: 22px; box-shadow: var(--shadow-lg);
  display: flex; gap: 10px; align-items: center; -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  font-weight: 500; letter-spacing: .005em;
  transition: opacity 200ms var(--ease-out), transform 340ms var(--ease-drawer);
}
@starting-style { .pick-hint { opacity: 0; transform: translate(-50%, 12px); } }
.pick-hint .btn { height: 28px; border-radius: 14px; background: rgba(255, 255, 255, .16); color: #fff; }
.pick-hint .btn:hover { background: rgba(255, 255, 255, .26); }
.map-panel {
  position: absolute; left: 12px; bottom: 24px; z-index: 900; background: var(--mat); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-radius: 12px; box-shadow: var(--shadow-pop), var(--mat-edge); padding: 7px 10px 7px 12px; display: flex; gap: 12px; align-items: center; font-size: 13px;
}
.map-panel label { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 500; }
.map-panel select { max-width: 200px; height: 28px; color: var(--text); font-weight: 400; }
/* selection tool palette: a capsule under the zoom control (same material as Leaflet's controls) */
.map-tools {
  position: absolute; left: 10px; top: 92px; z-index: 900; display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden; background: var(--mat); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: var(--shadow-pop), var(--mat-edge);
}
.map-tools button {
  width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text);
  cursor: pointer; transition: background-color 150ms ease, color 150ms ease;
}
.map-tools button + button { border-top: 1px solid var(--border); }
.map-tools button:hover { background: var(--hover); }
.map-tools button[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); }
.map-tools .ico { width: 18px; height: 18px; }
.placing .map-tools { display: none; }
.leaflet-container.tool-box { cursor: crosshair; user-select: none; }
.leaflet-container.tool-pan { cursor: grab; }
.leaflet-container.tool-pan:active { cursor: grabbing; }
.leaflet-container.box-selecting .leaflet-tooltip { display: none; }
.select-box {
  position: absolute; z-index: 700; pointer-events: none; border-radius: 2px;
  border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.empty-state {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 800; pointer-events: none;
}
.empty-state > div {
  pointer-events: auto; background: var(--mat-thick); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-radius: 20px; box-shadow: var(--shadow-lg), var(--mat-edge);
  padding: 30px 34px 26px; max-width: 440px; text-align: center; text-wrap: pretty;
}
.empty-state h2 { margin: 0 0 8px; font-size: 20px; font-weight: 650; line-height: 1.2; letter-spacing: -.022em; text-wrap: balance; }
.empty-state p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }

/* Leaflet theming: controls as grouped material capsules (Apple Maps) */
.leaflet-container { font: 13px/1.4 var(--font); }
.leaflet-bar a, .leaflet-control-layers { background: transparent; color: var(--text); border-color: var(--border); }
.leaflet-container .leaflet-bar, .leaflet-container .leaflet-control-layers {
  border: 0; border-radius: 12px; overflow: hidden;
  background: var(--mat); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); box-shadow: var(--shadow-pop), var(--mat-edge);
}
.leaflet-container .leaflet-bar a { width: 36px; height: 36px; line-height: 34px; font-weight: 400; transition: background-color 150ms ease; }
.leaflet-container .leaflet-bar a:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.leaflet-container .leaflet-bar a:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border-bottom: 0; }
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--hover); color: var(--text); }
.leaflet-bar a:active { background: var(--press); }
.leaflet-container .leaflet-control-layers-toggle { width: 36px; height: 36px; background-size: 20px; }
@media (prefers-color-scheme: dark) { .leaflet-control-layers-toggle { filter: invert(1); } .leaflet-control-layers-expanded .leaflet-control-layers-toggle { filter: none; } }
.leaflet-control-layers-expanded { color: var(--text); padding: 8px 12px 8px 10px; }
.leaflet-control-layers-separator { border-top-color: var(--border); }
.leaflet-control-attribution.leaflet-control { background: var(--mat); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); color: var(--muted); border-top-left-radius: 8px; padding: 1px 7px; font-size: 11px; }
.leaflet-control-attribution a { color: var(--muted); }
.leaflet-control-scale-line { background: var(--mat); border-color: var(--muted); color: var(--text); border-radius: 0 0 4px 4px; font-size: 11px; font-variant-numeric: tabular-nums; }
.leaflet-tooltip.pm-tip { font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 8px; border: 0; background: var(--mat-thick); color: var(--text); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); box-shadow: var(--shadow-pop); font-variant-numeric: tabular-nums; }
.leaflet-tooltip.pm-tip::before { display: none; }
.leaflet-container.picking, .leaflet-container.picking .leaflet-interactive { cursor: crosshair; }
.plan-image { image-rendering: auto; }

/* ---------- photo markers ---------- */
.pm { background: none; border: 0; pointer-events: none; }
.pm .pm-body { position: absolute; inset: 0; transition: transform 340ms var(--ease-drawer); }
.pm .pm-wedge { position: absolute; transform-origin: 50% 50%; pointer-events: none; overflow: visible; }
.pm .pm-thumb {
  position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden; pointer-events: auto; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 3px var(--ring), 0 3px 10px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3); background: #ccd2da;
  transition: transform 240ms var(--ease-out);
}
.pm .pm-thumb.no-dir { box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px rgba(255, 255, 255, .75), 0 3px 10px rgba(0, 0, 0, .35); }
.pm .pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.pm .pm-nothumb { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #ccd2da 0 4px, #b8c0ca 4px 8px); }
.pm .pm-badge { position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ff9f0a; border: 2px solid #fff; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.pm .pm-leader { position: absolute; overflow: visible; pointer-events: none; display: none; }
.pm .pm-leader.on { display: block; }
.pm .pm-leader line { stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8)); }
.pm .pm-leader circle { fill: #111; stroke: #fff; stroke-width: 1.5; }
.pm.selected .pm-thumb { border-color: #ffd60a; box-shadow: 0 0 0 3px var(--ring), 0 0 0 7px rgba(255, 214, 10, .55), 0 6px 18px rgba(0, 0, 0, .5); }
.pm.dragging .pm-thumb { cursor: grabbing; outline: 2px dashed #ffd60a; outline-offset: 6px; }
/* reference photo of a multi-selection: solid yellow halo with a dark keyline (others: translucent) */
.pm.selected.ref .pm-thumb { box-shadow: 0 0 0 3px var(--ring), 0 0 0 7px #ffd60a, 0 0 0 8.5px rgba(0, 0, 0, .65), 0 6px 18px rgba(0, 0, 0, .5); }
.pm.dragging.ref .pm-thumb { outline-offset: 10px; }
.hide-wedges .pm .pm-wedge { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pm:hover .pm-thumb { transform: scale(1.1); }
}
.cp-icon { background: none; border: 0; --c: #ff375f; }
.cp-icon.pending { --c: #ff9f0a; }
.cp-icon.sel { --c: #0a84ff; }
.cp-icon .cp { position: relative; width: 0; height: 0; }
.cp-icon .ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c); box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1px #fff, 0 2px 6px rgba(0, 0, 0, .3); }
.cp-icon .ring::after { content: ""; position: absolute; left: 6px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px #fff; }
.cp-icon .num { position: absolute; left: 9px; top: -27px; background: var(--c); color: #fff; font: 700 11px/16px var(--font);
  padding: 0 7px; border-radius: 9px; border: 1.5px solid #fff; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }

/* ---------- detail panel ---------- */
/* A parallel, non-blocking panel: floats inset over the map as a thick material card (no scrim),
   so the map keeps flowing around it. Enters from the right edge it is anchored to. */
.detail {
  position: absolute; top: var(--inset); right: var(--inset); bottom: var(--inset); width: var(--detail-w); z-index: 1000;
  background: var(--mat-thick); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-radius: var(--r-sheet); box-shadow: var(--shadow-lg), var(--mat-edge); display: flex; flex-direction: column; overflow: hidden;
  transition: transform 380ms var(--ease-drawer), opacity 200ms var(--ease-out);
}
@starting-style { .detail { transform: translateX(calc(100% + var(--inset))); opacity: .4; } }
.detail-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--border); min-height: 50px; }
.detail-head .title { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; padding: 0 4px; }
.detail-head .pos { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; padding: 0 6px; }
/* header icon buttons are plain glyphs until hovered (toolbar style) */
.detail-head .btn.icon, .tp-head .btn.icon, .dlg-head .btn.icon { background: transparent; color: var(--muted); border-radius: 8px; }
.detail-head .btn.icon:hover, .tp-head .btn.icon:hover, .dlg-head .btn.icon:hover { background: var(--hover); color: var(--text); }
.dlg-head .btn.icon:last-child, .detail-head .btn.icon:last-child, .tp-head .btn.icon:last-child { background: var(--fill); border-radius: 50%; width: 26px; height: 26px; }
.dlg-head .btn.icon:last-child:hover, .detail-head .btn.icon:last-child:hover, .tp-head .btn.icon:last-child:hover { background: var(--fill-2); }
.detail-body { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.detail .preview { position: relative; background: #000; display: grid; place-items: center; min-height: 200px; cursor: zoom-in; overflow: hidden; }
.detail .preview img { max-width: 100%; max-height: 46vh; display: block; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .detail .preview:hover img { transform: scale(1.015); } }
.detail .preview .noimg { color: #8e8e93; padding: 40px; }
.detail section { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.detail section:last-child { border-bottom: 0; }
.detail h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
/* multi-selection panel */
.multi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); max-height: 34vh; overflow-y: auto; }
.mthumb {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--fill);
  box-shadow: 0 0 0 2px var(--c, var(--faint)); transition: transform 240ms var(--ease-out), box-shadow 150ms ease;
}
.mthumb img, .mthumb .noth { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; pointer-events: none; }
.mthumb:hover { transform: scale(1.06); }
.mthumb.ref { box-shadow: 0 0 0 2px var(--c, var(--faint)), 0 0 0 5px #ffd60a; }
.mthumb .mref {
  position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); font-size: 10px; font-weight: 700; line-height: 14px;
  padding: 0 5px; border-radius: 7px; background: #ffd60a; color: #1c1c1e; pointer-events: none;
}
.mmore { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--fill); color: var(--muted); font-size: 12px; font-weight: 600; }
.detail .mhint { margin: 0 0 10px; }
.tag.lvtag { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--text); }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 7px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-all; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kv .orig { color: var(--faint); font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row + .row { margin-top: 8px; }
.grow { flex: 1; }
.tag { font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 9px; background: var(--fill); color: var(--muted); white-space: nowrap; line-height: 17px; }
.tag.warn { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-border); color: var(--warn-text); }
.dial { width: 64px; height: 64px; flex: none; cursor: pointer; touch-action: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .08)); }
.dial .ring { fill: var(--panel); stroke: var(--border-strong); }
.dial .needle { fill: var(--accent-fill); opacity: .45; }
.dial .tick { stroke: var(--faint); }
.dial text { fill: var(--muted); font: 600 9px var(--font); text-anchor: middle; }
.bearing-input { width: 80px; }

/* ---------- dialogs ---------- */
/* Modal tasks: a sheet over a dimming scrim. The sheet "materialises" — scale and blur resolve
   together with opacity — rather than plainly fading. Closing is instant. */
.dlg {
  border: 0; border-radius: var(--r-sheet); padding: 0; background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); max-height: 92vh;
}
.dlg[open] { transition: opacity 220ms var(--ease-out), transform 380ms var(--ease-drawer), filter 260ms var(--ease-out); }
.lightbox[open] { transition: opacity 220ms var(--ease-out); }
.dlg[open]::backdrop, .lightbox[open]::backdrop { transition: opacity 260ms ease; }
@starting-style {
  .dlg[open] { opacity: 0; transform: scale(.94) translateY(8px); filter: blur(6px); }
  .lightbox[open] { opacity: 0; }
  .dlg[open]::backdrop, .lightbox[open]::backdrop { opacity: 0; }
}
.dlg::backdrop { background: rgba(0, 0, 0, .3); }
@media (prefers-color-scheme: dark) { .dlg::backdrop { background: rgba(0, 0, 0, .55); } .dlg { box-shadow: var(--shadow-lg), inset 0 0 0 .5px rgba(255, 255, 255, .1); } }
.dlg.wide { width: min(980px, 94vw); }
.dlg.full { width: 97vw; height: 94vh; max-width: none; max-height: none; }
.dlg-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px 22px; border-bottom: 1px solid var(--border); }
.dlg-head h2 { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -.022em; flex: 1; }
.dlg-body { padding: 18px 22px; overflow: auto; max-height: calc(92vh - 128px); }
.dlg-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px 16px 22px; border-top: 1px solid var(--border); align-items: center; }
.dlg-foot .grow { flex: 1; }
.dlg-foot .btn { min-width: 76px; justify-content: center; }
.note { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-border); color: var(--warn-text); padding: 10px 13px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; line-height: 1.45; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 8px 6px; border-bottom: 1px solid var(--border); }
table.grid tbody tr:hover td { background: var(--hover); }
table.grid td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid input[type=number] { width: 90px; }
table.grid input[type=text] { width: 100%; }
table.grid tr.sel td { background: var(--accent-soft); }
.strip { width: 100%; height: auto; display: block; background: var(--panel-2); border-radius: 12px; margin-bottom: 14px; box-shadow: inset 0 0 0 1px var(--border); }
.strip .axis { stroke: var(--border-strong); }
.strip text { fill: var(--muted); font: 11px var(--font); }
.strip .bandlabel { fill: var(--text); font-weight: 600; }
.strip .hbar { fill: var(--faint); opacity: .55; }

/* grouped cards: white on the panel-2 inset, hairline instead of borders */
.plan-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 14px 16px; background: var(--panel); border-radius: var(--r-lg); margin-bottom: 10px; box-shadow: 0 0 0 1px var(--border), var(--shadow-xs); transition: box-shadow 150ms ease; }
.plan-card:hover { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow); }
.plan-card .fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 13px; }
.plan-card .fields label { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.plan-card .actions { display: flex; flex-direction: column; gap: 6px; }
.plan-card .status { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.upload { display: flex; gap: 8px; align-items: center; padding: 14px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); margin-bottom: 16px; flex-wrap: wrap; background: var(--panel-2); }

/* georeference dialog */
.georef { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.georef .maps { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; gap: 2px; background: var(--border); }
.georef .maps > div { position: relative; min-height: 0; }
.georef .maps .map { inset: 0; }
.georef .maplabel {
  position: absolute; top: 10px; left: 58px; z-index: 1000; background: var(--mat); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-pop), var(--mat-edge);
}
.georef .bottom { display: grid; grid-template-columns: 380px 1fr; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--border); max-height: 34vh; overflow: auto; }
.georef .pending { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.georef .pending .step { display: flex; align-items: center; gap: 9px; }
.georef .pending .step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; transition: background-color 200ms ease, color 200ms ease; }
.georef .pending .step.done .n { background: var(--ok); color: #fff; }
.georef .fitinfo { font-size: 13px; margin-bottom: 6px; }
.georef .fitinfo b { font-variant-numeric: tabular-nums; }
.georef .overlay-ctl {
  position: absolute; right: 10px; bottom: 24px; z-index: 1000; background: var(--mat); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-radius: 10px; padding: 6px 10px; font-size: 12px; display: flex; gap: 8px; align-items: center; box-shadow: var(--shadow-pop), var(--mat-edge);
}

/* lightbox: Photos-style black stage, glass controls */
.lightbox { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(0, 0, 0, .94); color: #f5f5f7; }
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.lightbox .lb { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.lightbox .lb-head { display: flex; gap: 8px; align-items: center; padding: 12px 16px; }
.lightbox .lb-head .title { flex: 1; font-weight: 600; letter-spacing: -.005em; font-variant-numeric: tabular-nums; padding: 0 6px; }
.lightbox .lb-head .btn { background: rgba(255, 255, 255, .12); color: #fff; border-radius: 16px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.lightbox .lb-head .btn:hover { background: rgba(255, 255, 255, .2); }
.lightbox .lb-head .btn.icon { border-radius: 50%; }
.lightbox .lb-img { display: grid; place-items: center; min-height: 0; padding: 0 16px 16px; }
.lightbox .lb-img img { max-width: 100%; max-height: calc(100vh - 76px); object-fit: contain; border-radius: 4px; }

/* toasts: dark HUD material in both themes; status shown by a leading dot */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 5000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.toasts[popover] { inset: auto 16px 16px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; }
.toasts[popover]:not(:popover-open) { display: flex; } /* still visible in browsers without popover support */
.toasts:empty { pointer-events: none; }
/* transitions, not keyframes: toasts stack quickly and must retarget smoothly */
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--hud); color: #fff; padding: 10px 16px; border-radius: 14px; box-shadow: var(--shadow-lg); max-width: 420px; font-size: 13px; font-weight: 500;
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  transition: opacity 220ms var(--ease-out), transform 380ms var(--ease-drawer);
}
@starting-style { .toast { opacity: 0; transform: translateY(14px) scale(.96); } }
.toast.leaving { opacity: 0; transform: translateX(16px); transition-duration: 180ms; pointer-events: none; }
.toast.ok::before, .toast.error::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.toast.ok::before { background: #30d158; box-shadow: 0 0 0 3px rgba(48, 209, 88, .25); }
.toast.error { background: color-mix(in srgb, #c4000f 88%, #000); }
.toast.error::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }

.spinner { width: 14px; height: 14px; border: 2px solid var(--fill-2); border-top-color: var(--accent-fill); border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-plan { position: absolute; inset: 0; display: grid; place-items: center; z-index: 950; pointer-events: none; }
.loading-plan > div {
  background: var(--mat-thick); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  padding: 10px 18px; border-radius: 22px; box-shadow: var(--shadow-pop), var(--mat-edge); display: flex; gap: 10px; align-items: center; font-weight: 500;
}

/* ======================================================================
   Projects, sources, import review (docs/IMPORT_CONTRACT.md §7)
   ====================================================================== */
.hint { color: var(--muted); font-size: 12.5px; }
.err { color: var(--danger); }
.warn-t { color: var(--warn-text); }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left; border-radius: 3px; }
.linkish:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn.danger-fill { background: var(--danger); color: #fff; }
.btn.danger-fill:hover { background: color-mix(in srgb, var(--danger) 88%, #fff); }
.btn.warn { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-border); color: var(--warn-text); }

/* menus with buttons: macOS highlight — the hovered item fills with the accent, labels go white */
.menu .mi { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); text-align: left; cursor: pointer; font-weight: 500; }
.menu .mi:hover:not(:disabled) { background: var(--accent-fill); color: var(--accent-ink); }
.menu .mi:hover:not(:disabled) .sub, .menu .mi:hover:not(:disabled) .tick { color: rgba(255, 255, 255, .85); }
.menu .mi:active:not(:disabled) { background: color-mix(in srgb, var(--accent-fill) 85%, #000); }
.menu .mi:disabled { opacity: .45; cursor: default; }
.menu .mi .sub { font-size: 12px; color: var(--muted); font-weight: 400; }
#photosMenu { min-width: 250px; }
.menu-head { font-size: 11.5px; letter-spacing: 0; color: var(--muted); font-weight: 600; padding: 6px 10px 4px; }
.menu-sep { height: 1px; background: var(--border); margin: 5px 10px; }
.menu-err { margin: 4px 6px; padding: 7px 9px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 12.5px; }
.menu-empty { padding: 6px 10px; color: var(--muted); font-size: 13px; }

/* project switcher */
.project-btn { max-width: 280px; font-weight: 600; }
.project-btn .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-menu { left: 0; right: auto; min-width: 320px; max-width: 440px; max-height: 70vh; overflow-y: auto; transform-origin: top left; }
.proj-row { display: flex; align-items: center; gap: 2px; border-radius: 7px; }
.proj-row .btn.icon.small { width: 26px; flex: none; opacity: .6; background: transparent; color: var(--muted); transition: opacity 150ms ease, background-color 150ms ease; }
@media (hover: hover) { .proj-row .btn.icon.small { opacity: 0; } }
.proj-row:hover .btn.icon.small, .proj-row .btn.icon.small:focus-visible { opacity: 1; }
.proj-row .btn.icon.small:hover { background: var(--hover); color: var(--text); }
.proj-row .btn.icon.small.danger:hover { color: var(--danger); }
.proj-row .proj-name { flex: 1; min-width: 0; display: grid; grid-template-columns: 18px 1fr; column-gap: 4px; }
.proj-row .proj-name .tick { grid-row: span 2; color: var(--accent); align-self: center; }
.proj-row .proj-name .tick .ico { width: 14px; height: 14px; }
.proj-row .proj-name .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-row .proj-name .sub { grid-column: 2; }

/* topbar status */
.scan { display: flex; align-items: center; gap: 8px; }
.scan-chip { cursor: pointer; padding: 0; font: inherit; color: inherit; border: 0; transition: background-color 150ms ease, transform 240ms var(--ease-out); }
.scan-chip:hover { background: var(--fill-2); }
.scan-chip:active { transform: scale(.97); transition-duration: 150ms, 90ms; }
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px 0 10px; border-radius: 14px; border: 0; background: color-mix(in srgb, #ff9f0a 18%, transparent);
  color: var(--warn-text); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: background-color 150ms ease, transform 240ms var(--ease-out);
}
.status-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, .25); }
.status-chip:hover { background: color-mix(in srgb, #ff9f0a 26%, transparent); }
.status-chip:active { transform: scale(.96); transition-duration: 150ms, 90ms; }

/* small modal helpers (ui.js) */
.dlg.small { width: min(460px, 94vw); }
.dlg.small .dlg-body p { margin: 0 0 8px; line-height: 1.5; }
.confirm-msg ul.tight, ul.tight { margin: 6px 0 0; padding-left: 20px; }
ul.tight li { margin: 3px 0; }
label.typed, label.stack { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; font-size: 13px; color: var(--muted); font-weight: 500; }
label.typed input, label.stack input { width: 100%; color: var(--text); height: 32px; font-weight: 400; }
.check.small { font-size: 12.5px; }
.h-sub { font-weight: 400; color: var(--muted); font-size: 14px; letter-spacing: 0; }

/* sources dialog: grouped cards on an inset background */
.src-body h3 { margin: 0 0 6px; font-size: 13px; font-weight: 650; }
.src-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.src-empty { padding: 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--muted); text-align: center; }
.src-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 0 0 1px var(--border), var(--shadow-xs); transition: box-shadow 150ms ease; }
.src-card:hover { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow); }
.src-card.disabled { opacity: .6; }
.src-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 650; letter-spacing: -.01em; }
.src-path { color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 640px; }
.src-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.src-counts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cnt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 1px 9px; border-radius: 10px; line-height: 18px; font-variant-numeric: tabular-nums; background: var(--fill); color: var(--text); white-space: nowrap; }
.cnt.files { font-weight: 650; }
.cnt.c-full { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.cnt.c-partial { background: color-mix(in srgb, var(--accent-fill) 14%, transparent); }
.cnt.bad { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn-border); }
.cnt.skip { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.src-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.src-prog { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.src-prog .dl, .cnt .cloud { display: inline-flex; align-items: center; gap: 4px; }
svg.cloud { width: 16px; height: 11px; color: var(--accent); flex: none; vertical-align: -1px; }
.src-add { padding: 16px; border-radius: var(--r-lg); margin-bottom: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border); }
.src-add .row { margin-top: 10px; }
.src-add .hint { margin: 0; }
.src-add #srcPath { min-width: 280px; }
.src-add #srcRecent { max-width: 230px; }
.add-error { color: var(--danger); margin: 6px 0 0; font-size: 13px; min-height: 0; }
.add-error:empty { display: none; }
.dropzone { padding: 20px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); text-align: center; transition: background-color 200ms ease, border-color 200ms ease, transform 380ms var(--ease-drawer); }
.dropzone .hint { margin-top: 4px; }
.dropzone.over { border-color: var(--accent-fill); border-style: solid; background: var(--accent-soft); transform: scale(1.012); }
.dropzone #srcUpload:not(:empty) { margin-top: 10px; text-align: left; }
.progress.wide { flex: 1; width: auto; min-width: 200px; }
.up-row { flex-wrap: nowrap; }
.summary-card { padding: 16px 18px; border-radius: var(--r-lg); background: var(--accent-soft); margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fill) 22%, transparent); }
.summary-card .sc-head { font-size: 13px; color: var(--muted); }
.summary-card .pc-sum { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.summary-card .pc-actions { margin-top: 6px; }
.scan-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.scan-line b { color: var(--text); }

/* folder browser */
.browse-dlg { width: min(640px, 94vw); }
.browse-dlg .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 8px 18px; border-bottom: 1px solid var(--border); font-size: 13px; }
.crumbs .crumb { border: 0; background: none; padding: 3px 6px; border-radius: 6px; cursor: pointer; color: var(--accent); font: inherit; font-weight: 500; }
.crumbs .crumb:hover { background: var(--hover); }
.crumbs .sep { color: var(--faint); }
.br-body { padding: 6px 8px; height: min(52vh, 460px); }
.br-list { list-style: none; margin: 0; padding: 0; }
.br-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.br-item:hover { background: var(--accent-fill); color: var(--accent-ink); }
.br-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-item .fic { width: 18px; height: 15px; color: #1e9bf0; flex: none; }
.br-item:hover .fic { color: #fff; }
.br-files { padding: 8px 10px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--border); margin-top: 4px; }
.br-cur { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* import review */
.dlg.tall { height: 90vh; max-height: 90vh; }
.dlg.tall[open] { display: flex; flex-direction: column; }
.seg.small { border-radius: 8px; }
.seg.small button { height: 24px; padding: 0 10px; font-size: 12.5px; border-radius: 6px; }
.seg button:disabled { opacity: .45; cursor: default; }
.rv { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 22px 0; gap: 12px; }
.rv-summary { font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rv-summary b { color: var(--text); }
/* buckets read as stat tiles: big tabular number, coloured status dot, no heavy top rule */
.rv-buckets { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bk {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: var(--r-lg);
  border: 0; background: var(--panel); cursor: pointer; text-align: left; color: var(--text); font: inherit;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-xs);
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 240ms var(--ease-out);
}
.bk:hover { background: var(--panel-2); }
.bk:active { transform: scale(.97); transition-duration: 150ms, 150ms, 90ms; }
.bk[aria-pressed=true] { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-fill); }
.bk .bk-n { font: 650 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.bk .bk-l { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.bk .bk-l::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bk, var(--faint)); flex: none; }
.bk .bk-extra { font-size: 11px; color: var(--faint); }
.bk-all { --bk: var(--text); }
.bk-ready { --bk: var(--ok); }
.bk-partial { --bk: #0a84ff; }
.bk-time_only { --bk: #ff9f0a; }
.bk-none { --bk: #8e8e93; }
.bk-attention { --bk: var(--danger); }
.bk-duplicates { --bk: #af52de; }
.rv-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.rv-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.rv-toolbar select.small, .rv-toolbar select { height: 28px; font-size: 12.5px; }
.rv-toolbar input[type=search] { height: 28px; padding: 0 10px; border-radius: 14px; background: var(--fill); border-color: transparent; box-shadow: none; }
.rv-toolbar input[type=search]:focus-visible { background: var(--panel); border-color: var(--accent-fill); box-shadow: var(--focus-ring); }
.rv-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -22px; padding: 0 22px; }
.rv-row { display: grid; grid-template-columns: 20px 40px minmax(0, 1fr) auto 120px; gap: 10px; align-items: center; padding: 6px 6px; border-bottom: 1px solid var(--border); }
.rv-row:hover { background: var(--hover); }
.rv-row.sel { background: var(--accent-soft); }
.rv-row.excluded .rv-th, .rv-row.excluded .rv-name { opacity: .5; }
.rv-th { width: 40px; height: 40px; border-radius: 8px; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); object-fit: cover; background: var(--fill); cursor: pointer; display: block; }
.rv-th.none { background: repeating-linear-gradient(45deg, var(--panel-2) 0 4px, var(--fill-2) 4px 8px); }
.rv-name { min-width: 0; }
.rv-name .fn { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
.rv-name .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-flags { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.tag.new { background: color-mix(in srgb, var(--accent-fill) 14%, transparent); color: var(--accent); }
.rv-more, .rv-empty { padding: 16px; text-align: center; color: var(--muted); }
.rv-more { display: flex; gap: 8px; justify-content: center; }

/* provenance pills: filled = EXIF, outlined = by hand / inferred, dashed = missing */
.pills { display: inline-flex; gap: 3px; }
.pv { display: inline-block; min-width: 38px; text-align: center; font: 650 10.5px/16px var(--font); letter-spacing: .03em; padding: 0 5px; border-radius: 5px; border: 1.5px solid var(--ok); }
.pv-exif { background: var(--ok); color: #fff; }
.pv-manual { background: transparent; color: var(--accent); border-color: var(--accent); }
.pv-inferred { background: transparent; color: #a35200; border-color: #ff9f0a; }
.pv-missing { background: transparent; color: var(--faint); border: 1.5px dashed var(--border-strong); }
@media (prefers-color-scheme: dark) {
  .pv-exif { color: #04140a; }
  .pv-inferred { color: #ffb340; border-color: #ffb340; }
}

/* detail additions */
.excl-bar { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--fill); font-size: 13px; color: var(--muted); }
.excl-bar.warn { background: var(--warn-bg); color: var(--warn-text); }
.tag.hand { background: color-mix(in srgb, var(--accent-fill) 14%, transparent); color: var(--accent); }
.detail .note { margin: 0; }

/* sidebar additions */
.photo-item.excluded { opacity: .55; }
.photo-item.excluded .th { filter: grayscale(1); }
.unlocated .hint .linkish { font-size: inherit; }

/* markers: placed by hand → dashed ring + hand badge; no direction → "?" */
.pm .pm-thumb.manual {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 3px 10px rgba(0, 0, 0, .35);
  outline: 3px dashed var(--ring); outline-offset: 0;
}
.pm.selected .pm-thumb.manual { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 7px rgba(255, 214, 10, .55), 0 6px 18px rgba(0, 0, 0, .5); }
.pm .pm-hand {
  position: absolute; left: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 50%; background: #0a84ff; color: #fff;
  border: 1.5px solid #fff; display: grid; place-items: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.pm .pm-hand svg { width: 11px; height: 11px; }
.pm .pm-nodir {
  position: absolute; right: -5px; bottom: -5px; width: 15px; height: 15px; border-radius: 50%; background: #48484a; color: #fff;
  border: 1.5px solid #fff; font: 700 10px/12px var(--font); text-align: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.hide-wedges .pm .pm-nodir { display: none; }

/* utilities (replacing static inline styles in JS-rendered markup); !important so they keep the
   precedence the inline styles had over component rules such as `table.grid input` */
.u-muted        { color: var(--muted) !important; }
.u-danger       { color: var(--danger) !important; }
.u-danger-strong { color: var(--danger) !important; font-weight: 600 !important; }
.u-small        { font-size: 12.5px !important; }
.u-fs13         { font-size: 13px !important; }
.u-fw400        { font-weight: 400 !important; }
.u-mt10         { margin-top: 10px !important; }
.u-mt12         { margin-top: 12px !important; }
.u-mb10         { margin-bottom: 10px !important; }
.u-mt6-flush    { margin: 6px 0 0 !important; }
.u-mt8-flush    { margin: 8px 0 0 !important; }
.u-pad10        { padding: 10px !important; }
.u-pad-10-6     { padding: 10px 6px !important; }
.u-pad-12-6     { padding: 12px 6px !important; }
.u-center       { justify-content: center !important; }
.u-wfull        { width: 100% !important; }
.w-64  { width: 64px !important; }
.w-70  { width: 70px !important; }
.w-80  { width: 80px !important; }
.w-110 { width: 110px !important; }
.w-140 { width: 140px !important; }
.w-170 { width: 170px !important; }
.w-220 { width: 220px !important; }

@media (max-width: 1100px) {
  :root { --sidebar-w: 270px; --detail-w: 340px; }
  .brand span { display: none; }
  .project-btn { max-width: 180px; }
  .rv-buckets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1350px) {
  .scan-chip.progress { width: 160px; }
}

/* ---------- placement tray (tray.js) ---------- */
/* Dock and panel are material layers over the map. Neither animates in: the tray toggles with P
   and is used hundreds of times a session, so it appears instantly. */
:root { --tray-w: 380px; --dock-h: 132px; }
@media (max-width: 1100px) { :root { --tray-w: 320px; } }
.tray-dock {
  position: absolute; left: 0; right: var(--tray-w); bottom: 0; height: var(--dock-h); z-index: 1001;
  background: var(--mat-thick); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-top: 1px solid var(--border); box-shadow: 0 -10px 30px -14px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column;
}
.td-head { display: flex; align-items: center; gap: 10px; padding: 7px 12px 5px; font-size: 12.5px; min-width: 0; }
.td-head .grow { flex: 1; }
.td-tabs .n { color: inherit; opacity: .6; font-variant-numeric: tabular-nums; margin-left: 4px; font-weight: 500; }
.td-progress { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.td-bar { width: 110px; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; flex: none; }
.td-bar span { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 3px; transition: width 400ms var(--ease-drawer); }
.td-sel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-sel .btn { margin-left: 4px; }
.td-sort { white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.td-strip {
  flex: 1; display: flex; gap: 7px; padding: 2px 12px 10px; overflow-x: auto; overflow-y: hidden; align-items: stretch;
  scrollbar-width: thin; outline: none; scroll-padding-inline: 12px;
}
/* no transitions on filmstrip items: the current item moves with ← / → */
.fs-item {
  position: relative; flex: none; width: 104px; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: #000; border: 0; user-select: none; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .15);
}
.fs-item img, .fs-item .noimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-item .noimg { background: repeating-linear-gradient(45deg, #ccd2da 0 4px, #b8c0ca 4px 8px); }
.fs-item:hover { box-shadow: 0 0 0 2px var(--border-strong), 0 2px 6px rgba(0, 0, 0, .2); }
.fs-item.cur { box-shadow: 0 0 0 2.5px var(--accent-fill), 0 0 0 5px color-mix(in srgb, var(--accent-fill) 25%, transparent), 0 4px 10px rgba(0, 0, 0, .25); }
.fs-item.sel { box-shadow: 0 0 0 2.5px #ffd60a, 0 2px 6px rgba(0, 0, 0, .2); }
.fs-item.sel.cur { box-shadow: 0 0 0 2.5px #ffd60a, 0 0 0 5px var(--accent-fill), 0 4px 10px rgba(0, 0, 0, .25); }
.fs-item.st-done img, .fs-item.st-excluded img { opacity: .5; }
.fs-item.st-excluded img { filter: grayscale(1); }
.fs-t {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 6px 3px; font-size: 11px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em;
}
.fs-b {
  position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font: 700 10.5px/15px var(--font);
  text-align: center; color: #fff; background: #48484a; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.fs-b.done { background: var(--ok); }
.fs-b.excl { background: #ff3b30; }
.fs-b.later { background: #ff9f0a; }
.fs-b.loc { background: #0a84ff; font-size: 8px; }
.fs-chk {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #ffd60a; color: #111;
  font: 700 11px/18px var(--font); text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.fs-empty { color: var(--muted); padding: 24px 12px; font-size: 13px; }

.tray-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--tray-w); z-index: 1002;
  background: var(--mat-thick); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-left: 1px solid var(--border); box-shadow: -16px 0 40px -18px rgba(0, 0, 0, .3); display: flex; flex-direction: column;
}
.tp-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); min-height: 50px; }
.tp-head b { white-space: nowrap; font-weight: 650; letter-spacing: -.01em; }
.tp-prog { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; padding-left: 4px; }
.tp-body { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.tp-body section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.tp-body h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.tp-body .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-body .row .grow { flex: 1; min-width: 0; }
.tp-preview { background: #000; display: grid; place-items: center; min-height: 220px; cursor: zoom-in; }
.tp-preview img { max-width: 100%; max-height: 40vh; display: block; }
.tp-preview .noimg { color: #8e8e93; padding: 40px; }
.tp-meta { padding: 10px 14px; border-bottom: 1px solid var(--border); display: grid; gap: 3px; }
.tp-file { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-sub { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tp-between { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; }
.tp-nbs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tp-nb {
  display: flex; gap: 8px; align-items: center; padding: 4px; border: 0; border-radius: 10px; background: var(--panel);
  cursor: pointer; text-align: left; min-width: 0; color: var(--text); box-shadow: 0 0 0 1px var(--border), var(--shadow-xs);
  transition: box-shadow 150ms ease, background-color 150ms ease, transform 240ms var(--ease-out);
}
.tp-nb:hover { box-shadow: 0 0 0 1.5px var(--accent-fill), var(--shadow); }
.tp-nb:active { transform: scale(.97); transition-duration: 150ms, 150ms, 90ms; }
.tp-nb img, .tp-nb .noimg { width: 46px; height: 46px; border-radius: 7px; object-fit: cover; flex: none; background: var(--fill); }
.tp-nb .nb-t { display: grid; font-size: 11.5px; min-width: 0; }
.tp-nb .nb-t b { font-weight: 650; }
.tp-nb .nb-t span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-prec { gap: 14px; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* keycaps */
.tp-actions kbd, .tray-hint kbd, .tray-help kbd {
  display: inline-block; min-width: 18px; text-align: center;
  font: 600 10.5px/1 var(--font); padding: 3px 5px; border-radius: 5px; background: var(--panel); color: var(--text);
  box-shadow: 0 0 0 .5px var(--border-strong), 0 1px 0 var(--border-strong);
}
.tp-batch { margin: 10px 14px 0; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-border); color: var(--warn-text); font-size: 12.5px; display: grid; gap: 7px; }
.tp-batch-th { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.tp-batch-th img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
.tp-done { padding: 34px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.tp-done h3 { font: 650 18px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.tp-done p { margin: 0; color: var(--muted); line-height: 1.5; }

.tray-hint {
  position: absolute; left: calc((100% - var(--tray-w)) / 2); bottom: calc(var(--dock-h) + 12px); transform: translateX(-50%); z-index: 1003;
  background: var(--hud); color: #fff; padding: 8px 16px; border-radius: 20px; box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  font-size: 12.5px; font-weight: 500; letter-spacing: .005em; width: max-content; max-width: calc(100% - var(--tray-w) - 40px); text-align: center; pointer-events: none;
}
.tray-hint kbd { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.tray-hint .sep { opacity: .45; }
.tray-help { position: absolute; inset: 0; z-index: 1100; background: rgba(0, 0, 0, .3); display: grid; place-items: center; }
.th-box { background: var(--panel); border-radius: var(--r-sheet); box-shadow: var(--shadow-lg); padding: 16px 20px 18px; max-width: 560px; max-height: 90%; overflow: auto; }
.th-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 20px; font: 650 16px/1.25 var(--font-display); letter-spacing: -.02em; }
.th-box table { border-collapse: collapse; font-size: 13px; }
.th-box th { text-align: left; font-weight: 500; padding: 4px 16px 4px 0; white-space: nowrap; vertical-align: top; }
.th-box td { padding: 4px 0; color: var(--muted); }

/* map chrome moves out of the way of the dock and panel */
.placing .main .leaflet-right { right: var(--tray-w); }
.placing .main .leaflet-bottom { bottom: var(--dock-h); }
.placing .map-panel { bottom: auto; top: 12px; left: 62px; }
.placing .pick-hint { display: none; }
.placing .detail { right: calc(var(--tray-w) + var(--inset)); bottom: calc(var(--dock-h) + var(--inset)); }
.placing .toasts { right: calc(var(--tray-w) + 16px); bottom: calc(var(--dock-h) + 56px); }
.placing .toasts[popover] { inset: auto calc(var(--tray-w) + 16px) calc(var(--dock-h) + 56px) auto; }
.td-tabs button { white-space: nowrap; }
.td-sel:not(:empty) ~ .td-sort { display: none; }
.leaflet-container.tray-place, .leaflet-container.tray-place .leaflet-interactive { cursor: crosshair; }
.leaflet-container.tray-place .pm-thumb { cursor: copy; }
.leaflet-container.tray-aim, .leaflet-container.tray-aim .pm-thumb { cursor: crosshair; }
.leaflet-container.tray-pan, .leaflet-container.tray-pan .pm-thumb { cursor: grab; }
.toast .toast-act { margin-left: 6px; background: rgba(255, 255, 255, .16); border: 0; color: inherit; border-radius: 8px; padding: 3px 10px; cursor: pointer; font-weight: 600; transition: background-color 150ms ease, transform 240ms var(--ease-out); }
.toast .toast-act:hover { background: rgba(255, 255, 255, .26); }
.toast .toast-act:active { transform: scale(.95); transition-duration: 150ms, 90ms; }

/* time-neighbour pulse rings and the live aiming ghost */
.tray-pulse { pointer-events: none; }
.tray-pulse .ring {
  position: absolute; inset: 0; border-radius: 50%; border: 3px solid #ff9f0a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
  animation: trayPulse 1.6s var(--ease-out) infinite;
}
.tray-pulse .ring.r2 { animation-delay: .8s; }
.tray-pulse.far .ring { border-color: rgba(255, 159, 10, .6); animation-duration: 2.4s; }
.tray-pulse .lbl {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 11px/1 var(--font); color: #1d1d1f;
  background: #ffd60a; padding: 3px 7px; border-radius: 9px; border: 1.5px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums;
}
@keyframes trayPulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
.tray-ghost .pm-thumb, .tray-ghost * { pointer-events: none !important; }

/* ======================================================================
   Accessibility: reduced motion, reduced transparency, increased contrast
   ====================================================================== */
/* reduced motion: keep the fades (they aid comprehension), drop movement, scale and blur */
@media (prefers-reduced-motion: reduce) {
  @starting-style {
    .menu, .detail, .toast, .dlg[open] { transform: none; filter: none; }
    .banner { transform: translateX(-50%); }
    .pick-hint { transform: translateX(-50%); }
  }
  .btn:active:not(:disabled), .chip:active, .bk:active, .tp-nb:active, .status-chip:active, .scan-chip:active, .toast .toast-act:active { transform: none; }
  .toast.leaving { transform: none; }
  .dropzone.over { transform: none; }
  .pm:hover .pm-thumb, .detail .preview:hover img { transform: none; }
  .topbar .seg::before, .caret, .options summary::before, .list-section summary::before { transition: none; }
  .options[open] > summary ~ *, .list-section[open] > summary ~ * { animation: none; }
  .tray-pulse .ring { animation: none; }
  .tray-pulse .ring.r2 { display: none; }
}
/* reduced transparency: materials become solid */
@media (prefers-reduced-transparency: reduce) {
  :root { --mat: var(--panel); --mat-thick: var(--panel); --hud: #1c1c1e; }
  .menu, .map-panel, .detail, .empty-state > div, .leaflet-container .leaflet-bar, .leaflet-container .leaflet-control-layers,
  .leaflet-control-attribution.leaflet-control, .leaflet-tooltip.pm-tip, .pick-hint, .toast, .tray-dock, .tray-panel, .tray-hint,
  .loading-plan > div, .georef .maplabel, .georef .overlay-ctl { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* increased contrast: defined borders, stronger secondary text, solid surfaces */
@media (prefers-contrast: more) {
  :root { --border: rgba(60, 60, 67, .45); --border-strong: rgba(60, 60, 67, .7); --muted: #3a3a3c; --faint: #555558; --mat: var(--panel); --mat-thick: var(--panel); }
  .btn { box-shadow: inset 0 0 0 1px var(--border-strong); }
  .chip { box-shadow: inset 0 0 0 1px var(--border-strong); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --border: rgba(235, 235, 245, .4); --border-strong: rgba(235, 235, 245, .6); --muted: #d1d1d6; --faint: #aeaeb2; }
}