/* CBLD Field App — "mission-control" dark theme.
   Deep cool navy surfaces, hairline borders, uppercase mono labels, and a
   CBLD-green accent (glow) for primary actions, live data, and highlights.
   Brand navy #183750 anchors the palette; green is the accent. */

:root {
  --navy: #183750;          /* brand navy (mid tone) */
  --bg: #0A1826;            /* app background, deep cool navy */
  --bg-2: #0E2036;          /* elevated / gradient stop */
  --panel: #122842;         /* card / panel surface */
  --panel-2: #17324f;       /* hover / active surface */
  --line: #23415f;          /* hairline cool border */
  --line-2: #2c4d6e;
  --ink: #E7EEF6;           /* primary text (cool white) */
  --muted: #90A6BC;         /* secondary text */
  --accent: #37C878;        /* CBLD green — the accent/glow */
  --accent-2: #24A25C;      /* deeper green */
  --accent-ink: #05210F;    /* text on bright green */
  --accent-soft: rgba(55,200,120,.15);
  --amber: #E9B949;
  --danger: #E86B62;
  --ok: var(--accent);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-h: 52px;
  --tabbar-h: 60px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Calibri, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 80% at 50% 0%, var(--bg-2) 0%, var(--bg) 60%) fixed;
  color: var(--ink);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---- Top bar ---- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background: linear-gradient(180deg, rgba(14,32,54,.98), rgba(10,24,38,.98));
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  padding-left: 12px; padding-right: 12px;
  z-index: 1000;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
#title { font-weight: 700; font-size: 17px; letter-spacing: .2px; flex: 1; }
#projectChip.chip {
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(55,200,120,.35);
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 10px; border-radius: 999px; max-width: 45%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono);
}
/* Offline sync indicator (top bar). Tap to force a sync. */
#syncChip.chip.sync {
  border: 1px solid rgba(255,255,255,.18); font-size: 11px; font-weight: 700;
  letter-spacing: .3px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; font-family: var(--mono); flex: none;
}
#syncChip.sync.offline { background: rgba(220,80,60,.16); color: #ff9b86; border-color: rgba(220,80,60,.4); }
#syncChip.sync.pending { background: rgba(230,170,40,.16); color: #ffcf6b; border-color: rgba(230,170,40,.4); }
#syncChip.sync.synced  { background: rgba(55,200,120,.14); color: var(--accent); border-color: rgba(55,200,120,.35); }
.icon-btn {
  background: transparent; border: 0; color: var(--ink);
  font-size: 22px; width: 34px; height: 34px; border-radius: 8px;
}
.icon-btn:active { background: rgba(255,255,255,.08); }
#inboxBtn { position: relative; flex: none; }
.badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 8px rgba(55,200,120,.6); }

/* ---- View ---- */
#view {
  position: absolute; left: 0; right: 0;
  top: calc(var(--topbar-h) + var(--safe-top));
  bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.pad { padding: 16px; }
.stack > * + * { margin-top: 12px; }

/* ---- Bottom tabs ---- */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(12,26,42,.96); border-top: 1px solid var(--line);
  display: flex; z-index: 1000; backdrop-filter: blur(8px);
}
.tab {
  position: relative; flex: 1; background: transparent; border: 0; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 11px; font-weight: 600; letter-spacing: .2px;
  transition: color .15s;
}
.tab .ti { font-size: 20px; line-height: 1; }
.tab.active { color: var(--accent); }
.tab.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--accent); box-shadow: 0 0 10px rgba(55,200,120,.7);
}

/* ---- Map ---- */
#map { position: absolute; inset: 0; background: var(--bg); }
.map-wrap { position: absolute; inset: 0; }

/* Leaflet controls, dark-themed (default is white and clashes) */
.leaflet-bar { border: 1px solid var(--line-2) !important; box-shadow: 0 4px 12px rgba(0,0,0,.5) !important; }
.leaflet-bar a { background: var(--panel) !important; color: var(--ink) !important; border-bottom: 1px solid var(--line) !important; }
.leaflet-bar a:hover { background: var(--panel-2) !important; }
.leaflet-control-attribution { background: rgba(12,26,42,.82) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--accent) !important; }
.fab {
  position: absolute; right: 16px; bottom: 16px; z-index: 500;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  color: var(--accent-ink); border: 0;
  width: 60px; height: 60px; border-radius: 999px; font-weight: 800;
  font-size: 30px; box-shadow: 0 6px 18px rgba(55,200,120,.4), 0 2px 6px rgba(0,0,0,.4);
  transition: transform .1s;
}
.fab:active { transform: scale(.95); }
.fab.small { width: 46px; height: 46px; font-size: 20px; bottom: 226px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.fab.mid2 { width: 46px; height: 46px; font-size: 22px; font-weight: 800; bottom: 86px;
  background: linear-gradient(160deg, #3f7fb0, #2c5f8a); color: #fff; box-shadow: 0 4px 12px rgba(46,95,138,.5); }
.fab.mid3 { width: 46px; height: 46px; font-size: 22px; font-weight: 800; bottom: 156px;
  background: linear-gradient(160deg, #2f9e88, #1f7d6b); color: #fff; box-shadow: 0 4px 12px rgba(31,125,107,.5); }

/* Map top overlay: one bar across the top that clears the zoom control on the
   left; the GPS/location chip sits left (between the zoom and the menus) and the
   Map + Filter dropdowns are grouped on the right. Nothing overlaps. */
.map-topbar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 500;
  display: flex; gap: 8px; align-items: flex-start; padding-left: 48px; }
#gpsChip { margin-right: auto; }
.gps-chip { background: rgba(12,26,42,.9); color: var(--ink); padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--line); backdrop-filter: blur(6px);
  white-space: nowrap; }
.filter-menu { position: relative; }
.filter-menu > summary { list-style: none; cursor: pointer; background: rgba(12,26,42,.9); color: var(--ink);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); backdrop-filter: blur(6px); }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-panel { position: absolute; top: 34px; right: 0; left: auto; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); min-width: 180px; }
.filter-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; color: var(--ink); }
.filter-row input { width: auto; accent-color: var(--accent); }

/* Baseline capture bar */
.baseline-bar { position: absolute; left: 10px; right: 10px; bottom: 16px; z-index: 500; display: none;
  background: rgba(12,26,42,.97); color: var(--ink); padding: 10px 12px; border-radius: 14px; font-size: 13px;
  align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line-2); }
.baseline-bar.show { display: flex; }
.baseline-bar .btn { width: auto; }

/* Place mode: crosshair + bottom action bar */
.crosshair { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; z-index: 550; pointer-events: none; }
.crosshair.hidden { display: none; }
.crosshair::before { content: ''; position: absolute; inset: 3px; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 0 12px rgba(55,200,120,.6); }
.crosshair::after { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.place-bar { position: absolute; left: 10px; right: 10px; bottom: 16px; z-index: 600;
  background: rgba(14,32,54,.98); color: var(--ink); padding: 12px; border-radius: 14px;
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-2); box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.place-bar.hidden { display: none; }
.place-bar .btn { width: auto; flex: none; }
.place-bar .row { display: flex; align-items: center; gap: 8px; }
.place-bar .grow { flex: 1; }
.place-bar input { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--ink); font-size: 14px; width: 100%; }
.place-bar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.place-bar label.small { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--muted); }
.linkbtn { background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 0 2px; }
.linkbtn:hover { color: var(--ink); }

/* In-app modal dialogs (confirm / prompt) */
.modal-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(4,10,18,.6);
  display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); }
.modal-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 20px; max-width: 380px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.modal-msg { color: var(--ink); font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.modal-input { width: 100%; margin-top: 12px; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: inherit; font-size: 16px; }
.modal-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns .btn { flex: 1; }

/* Site-walk status bar */
.walk-bar { position: absolute; left: 10px; right: 10px; top: 56px; z-index: 600;
  background: rgba(14,32,54,.98); color: var(--ink); padding: 8px 12px; border-radius: 12px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; border: 1px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.walk-bar.hidden { display: none; }
.walk-bar .grow { flex: 1; }
.walk-bar .btn { width: auto; flex: none; }
.walk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 0 rgba(55,200,120,.6); animation: walkpulse 1.4s infinite; }
@keyframes walkpulse { 0% { box-shadow: 0 0 0 0 rgba(55,200,120,.5); } 70% { box-shadow: 0 0 0 8px rgba(55,200,120,0); } 100% { box-shadow: 0 0 0 0 rgba(55,200,120,0); } }
@media (prefers-reduced-motion: reduce) { .walk-dot { animation: none; } }

/* Map point search — top-left box + fixed-size scrollable results overlay */
.map-search { position: absolute; top: 52px; left: 48px; z-index: 560; width: min(300px, calc(100% - 58px)); }
.map-search-box { display: flex; align-items: center; gap: 6px; background: rgba(12,26,42,.95);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 10px; backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.map-search-box .ms-icon { font-size: 13px; opacity: .8; }
.map-search-box input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink);
  font-size: 14px; padding: 2px 0; }
.map-search-box input:focus { outline: none; }
.map-search-box input::placeholder { color: var(--muted); }
.map-search-box input::-webkit-search-cancel-button { display: none; }
.ms-clear { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; }
.ms-clear:hover { color: var(--ink); }
.ms-clear.hidden { display: none; }
.map-search-results { margin-top: 6px; max-height: 46vh; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.map-search-results.hidden { display: none; }
.ms-count, .ms-empty { padding: 2px 6px 4px; }
.ms-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 9px; cursor: pointer; }
.ms-row:hover { background: var(--bg-2); }
.ms-row .name { color: var(--ink); font-weight: 600; font-size: 14px; }
.ms-thumb { flex: none; width: 42px; height: 42px; border-radius: 8px; overflow: hidden; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; }
.ms-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-thumb .swatch { width: 12px; height: 12px; border-radius: 50%; }

/* Stacked-point chooser */
.stack-chooser { position: absolute; left: 10px; right: 10px; bottom: 16px; z-index: 600;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: 8px; max-height: 50%; overflow: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 6px; }
.stack-head { display: flex; align-items: center; font-weight: 700; color: var(--ink); font-size: 13px; padding: 2px 4px; }
.stack-head button { margin-left: auto; background: transparent; border: 0; font-size: 16px; color: var(--muted); }
.map-hint {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 500; background: rgba(12,26,42,.9); color: var(--ink);
  font-size: 12px; padding: 6px 12px; border-radius: 999px; max-width: 88%;
  text-align: center; border: 1px solid var(--line);
}

/* Leaflet marker: CSS pin, no image files needed */
.cbld-pin {
  width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.cbld-pin b { transform: rotate(45deg); display: block; text-align: center;
  color: #fff; font-size: 10px; line-height: 20px; font-weight: 700; }
.me-dot {
  width: 16px; height: 16px; border-radius: 50%; background: #2D8CFF;
  border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(45,140,255,.25);
}
.ab-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
  background: var(--panel); color: #fff; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.ab-tip { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); font-size: 11px; font-weight: 700; }
.ab-tip::before { display: none; }
.area-tip { background: rgba(12,26,42,.9); color: var(--ink); border: 1px solid var(--line-2); font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 6px; }
.area-tip::before { display: none; }
.gps-chip { display: inline-flex; align-items: center; gap: 6px; }
.gps-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7f92; }
.gps-dot.ok { background: var(--accent); box-shadow: 0 0 8px rgba(55,200,120,.7); }
.gps-dot.wait { background: var(--amber); } .gps-dot.bad { background: var(--danger); }

/* ---- Cards / lists ---- */
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 15px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 22px rgba(0,0,0,.28);
}
.card h3 { margin: 0 0 4px; font-size: 16px; color: var(--ink); font-weight: 700; }
.card .sub { color: var(--muted); font-size: 13px; }
/* Collapsible card headers — native <details class="card"> summary. */
details.card > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
  content: "▸"; color: #183750; font-size: 12px; line-height: 1;
  /* brand navy sits on a light chip so it stays legible on the dark card */
  background: var(--ink); border-radius: 3px; padding: 1px 3px; transition: transform .12s;
}
details.card[open] > summary::before { content: "▾"; }
.list-row {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; transition: border-color .15s, background .15s;
}
.list-row .grow { flex: 1; min-width: 0; }
.list-row .name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .meta { color: var(--muted); font-size: 12px; }
.list-row.tappable:active { background: var(--panel-2); border-color: var(--line-2); }

.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.status-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.progress-track { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #2a3f52; }
.progress-track > div { height: 100%; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-head { margin-bottom: 3px; }
.cal-dow { text-align: center; font-size: 10px; color: var(--muted, #90A6BC); font-weight: 700; }
.cal-cell { position: relative; aspect-ratio: 1; border: 0; border-radius: 8px; background: #1b2c3d; color: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 4px 0 0; cursor: pointer; min-height: 40px; }
.cal-cell.cal-dim { opacity: .38; }
.cal-cell.cal-today { outline: 2px solid #3f7fb0; }
.cal-cell.cal-sel { background: #2D5A7A; }
.cal-num { font-size: 13px; font-weight: 600; line-height: 1; }
.cal-dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-top: 3px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ann-urgent { border-color: #E86B62; box-shadow: 0 0 0 1px #E86B6255; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.dash-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dash-num { font-size: 24px; font-weight: 700; line-height: 1; }
.bnd-seg { transform: translate(-50%, -50%); white-space: nowrap; font-size: 10px; font-weight: 700;
  color: #183750; background: rgba(255,255,255,.85); border-radius: 4px; padding: 1px 4px; box-shadow: 0 0 0 1px rgba(24,55,80,.25); }
@media (max-width: 360px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(55,200,120,.3);
  font-family: var(--mono); letter-spacing: .3px; }
.pill.warn { background: rgba(232,107,98,.15); color: var(--danger); border-color: rgba(232,107,98,.35); }
.pill.amb { background: rgba(233,185,73,.15); color: var(--amber); border-color: rgba(233,185,73,.35); }

/* ---- Forms ---- */
label.fld { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .6px; font-family: var(--mono); }
input[type=text], input[type=number], input[type=search], textarea, select {
  width: 100%; font: inherit; font-size: 16px; /* 16px stops iOS zoom */
  padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--bg-2); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #5f7488; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 70px; resize: vertical; }
.row2 { display: flex; gap: 10px; }
.row2 > * { flex: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 15px;
  padding: 12px 16px; border-radius: 11px; border: 1px solid transparent;
  background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); width: 100%;
  box-shadow: 0 4px 14px rgba(55,200,120,.28); transition: transform .1s, box-shadow .15s, background .15s;
}
.btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(55,200,120,.24); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:active { background: var(--panel-2); }
.btn.mid { background: linear-gradient(160deg, #2f5f8a, #234a6d); color: #fff; box-shadow: 0 4px 12px rgba(35,74,109,.4); }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(232,107,98,.5); box-shadow: none; }
.btn.sm { width: auto; padding: 8px 12px; font-size: 13px; }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty .big { font-size: 40px; opacity: .35; }

/* ---- Photo / markup ---- */
.photo-frame { position: relative; width: 100%; background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.photo-frame img { display: block; width: 100%; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--panel); flex: none; }
.markup-stage { position: relative; touch-action: none; background: #000; }
.markup-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.markup-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Per-category push-to-talk. One button per model.js PIN_TYPES entry; the stripe
   is that category's own colour, so the row reads the same way the map pins do.
   `.live` is the one currently listening -- every other button is `disabled`,
   which is what keeps two recognisers from running at once. */
.voice-btn { border-left: 5px solid var(--line-2); }
.voice-btn.live { background: linear-gradient(160deg, var(--danger, #c0392b), #8e2a21); color: #fff; }
.voice-btn[disabled] { opacity: .45; }

.pen {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line-2);
}
.pen.active { box-shadow: 0 0 0 3px var(--accent); }

/* ---- Codes ---- */
.code-row { display: flex; gap: 10px; align-items: baseline; }
.code-row .code { font-weight: 800; color: var(--accent); font-family: var(--mono); min-width: 56px; margin-right: 8px; flex: none; }
.code-row .desc { flex: 1; color: var(--ink); }

.toast-show { display: flex !important; align-items: center; justify-content: center; gap: 12px; }
#toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 18px + var(--safe-bottom));
  transform: translateX(-50%); background: var(--panel); color: var(--ink);
  padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 2000;
  max-width: 90%; text-align: center; border: 1px solid var(--line-2); box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.toast-act { background: transparent; border: 0; color: var(--accent); font-weight: 800; font-size: 12px;
  padding: 2px 4px; cursor: pointer; font-family: var(--mono); text-transform: uppercase; letter-spacing: .6px; flex: none; }

/* Segmented control */
.seg { display: flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 3px; }
.seg-btn { flex: 1; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13px;
  color: var(--muted); padding: 8px 10px; border-radius: 8px; transition: background .15s, color .15s; }
.seg-btn.active { background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }

/* Chart running table */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.chart-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.chart-tbl th { background: var(--bg-2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  padding: 8px 6px; text-align: left; white-space: nowrap; position: sticky; top: 0; font-family: var(--mono); }
.chart-tbl td { border-top: 1px solid var(--line); padding: 2px; vertical-align: middle; }
.chart-tbl td.ro { padding: 6px; color: var(--muted); white-space: nowrap; }
.chart-cell { width: 92px; min-width: 72px; font-size: 13px; padding: 6px 6px; border: 0; background: transparent; border-radius: 6px; color: var(--ink); }
.chart-cell:focus { background: var(--panel-2); outline: none; }
.chart-tbl td:first-child { position: sticky; left: 0; background: var(--panel); }
.chart-open { background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border: 0; width: 26px; height: 26px; border-radius: 7px; font-size: 13px; font-weight: 800; }

.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 700; margin: 8px 2px; font-family: var(--mono); }
.divider { height: 1px; background: var(--line); margin: 4px 0; }
.right { margin-left: auto; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* Zooming past the basemap's real resolution (map.js MAX_ZOOM): a plain white ground where no tile exists. */
.leaflet-container { background: #fff !important; }