/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* — Legacy tokens (kept for compatibility, used across existing CSS) — */
  --bg: #0b1220;
  --surface: #f8fbff;
  --surface-2: #edf2fb;
  --surface-raised: #f0f4fa;
  --ink: #102139;
  --muted: #415470;
  --brand: #0FA4AF;
  --brand-deep: #024950;
  --accent: #ff7a45;
  --line: #bac9e2;
  --good: #18a957;
  --mid: #7d8798;
  --bad: #de4040;
  --text: #e2e8f0;
  --text-secondary: #7a9bb5;
  --text-muted: #9ca3af;
  --error: #de4040;
  --border: #334155;

  /* — Cycle 5 design system tokens —
   * Card-aesthetic foundation. New surfaces, panels, modals, empty states
   * should reference these. Existing classes will migrate over time. */

  /* Surfaces */
  --surface-card: #ffffff;
  --surface-elevated: #f8fbff;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.06);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.20);
  --shadow-hover: 0 2px 8px rgba(15, 164, 175, 0.12);

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* Type scale */
  --type-display: 20px;
  --type-h3: 16px;
  --type-h4: 15px;
  --type-body: 14px;
  --type-body-sm: 13px;
  --type-label: 11px;
  --type-caption: 9px;

  /* Spacing scale (8px grid + half-step) */
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 20px;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
#topbar {
  height: 62px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #0d213c, #163054);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: relative;
  z-index: 1100;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-center {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.project-switcher {
  display: flex;
  align-items: center;
}

#project-title {
  color: #eaf1ff;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  white-space: nowrap;
}

.role-badge {
  background: var(--brand-deep);
  color: white;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.role-badge.role-owner  { background: var(--brand); color: white; }
.role-badge.role-editor { background: #6c757d; color: white; }
.role-badge.role-public { background: #adb5bd; color: white; }

/* Team modal role chips */
.role-chip { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.role-chip.chip-owner  { background: var(--brand); color: white; }
.role-chip.chip-editor { background: #6c757d; color: white; }

.status-chip {
  font-size: 12px;
  color: var(--mid);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--mid);
  white-space: nowrap;
}
.status-chip.published {
  background: rgba(15, 164, 175, 0.15);
  color: #0FA4AF;
  border-color: rgba(15, 164, 175, 0.4);
}

/* Toolbar buttons in topbar context (dark background) */
.toolbar-btn {
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: transparent;
  color: #d0dff0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.toolbar-btn:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

.toolbar-btn.icon-only {
  padding: 6px 8px;
  min-width: 0;
}

.toolbar-btn.active {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.4);
}

#lock-btn {
  border-color: rgba(255,255,255,0.2);
  color: #d0dff0;
}

#lock-btn.locked {
  background: rgba(245,158,11,0.2);
  border-color: #f59e0b;
  color: #fcd34d;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  margin: 0 4px;
}

.btn-share {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  opacity: 1;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: #d0dff0;
}
.btn-share:hover {
  background: rgba(255,255,255,0.06);
}

/* ── App layout — 3 columns ───────────────────────────────────────────────── */
#app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Left panel ───────────────────────────────────────────────────────────── */
#left-panel {
  width: 360px;
  flex-shrink: 0;
  background: #f4f5f7;
  border-right: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 1px 0 0 var(--line), 4px 0 12px rgba(0,0,0,0.03);
}

.palette-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.palette-section {
  border-bottom: 1px solid var(--line);
}

.palette-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.palette-section-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.palette-add-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.palette-add-btn:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--brand-deep);
}

.section-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  padding: 0 4px;
}

.palette-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px 0;
}

.palette-item {
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  color: var(--ink);
}

.palette-item i {
  font-size: 15px;
  color: var(--muted);
  flex-shrink: 0;
}
.palette-item.active i { color: var(--brand); }

.palette-item:hover {
  background: var(--surface-2);
  color: var(--brand-deep);
}

.palette-item.active {
  background: rgba(15,164,175,0.1);
  color: var(--brand-deep, #024950);
  font-weight: 600;
  border-left: 2.5px solid var(--brand);
  padding-left: 13.5px;
}

#palette-search {
  width: calc(100% - 24px);
  margin: 8px 12px 4px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.palette-search-wrap {
  padding: 8px 12px 4px;
  position: relative;  /* containing block for #palette-search-results dropdown */
}


.points-header {
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

/* ── DRAW HERO ─────────────────────────────────────────────────────── */
.draw-hero {
  display: flex;
  gap: 8px;
  padding: 10px 10px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}

.draw-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 4px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--surface-raised, #f0f4fa);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-height: 78px;
  gap: 4px;
  position: relative;
}

.draw-card:hover {
  border-color: var(--brand);
  background: rgba(15, 164, 175, 0.07);
}

.draw-card.active {
  border-color: var(--brand);
  background: rgba(15, 164, 175, 0.13);
  box-shadow: 0 2px 8px rgba(15, 164, 175, 0.18);
}

.draw-card-icon {
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  transition: color 0.15s;
}

.draw-card:hover .draw-card-icon,
.draw-card.active .draw-card-icon {
  color: var(--brand);
}

.draw-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1;
}

.draw-card.active .draw-card-label {
  color: var(--brand);
}


/* ── Left Panel: Project Header ─────────────────────────────── */
.left-project-header {
  padding: 14px 12px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.left-project-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 28px;
  position: relative;            /* anchor for the project-dropdown */
}

/* Project switcher trigger — name + chevron, clickable */
.left-project-name-trigger {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  margin: 0;
  cursor: pointer;
  border-radius: var(--radius-md);
  font-family: inherit;
  text-align: left;
  min-width: 0;                  /* allow flex shrink for ellipsis */
  transition: background 0.12s ease;
}
.left-project-name-trigger:hover { background: rgba(15, 164, 175, 0.06); }
.left-project-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.left-project-name-trigger[aria-expanded="true"] .left-project-chevron,
.project-dropdown:not(.hidden) ~ * .left-project-chevron {
  transform: rotate(180deg);
}

.left-project-name {
  flex: 1;
  font-size: var(--type-h4);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.left-project-name-input {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2, #edf2fb);
  border: 1px solid var(--brand);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
}

.left-header-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.1s;
}

.left-header-icon-btn:hover {
  color: var(--brand);
  background: rgba(15, 164, 175, 0.08);
}

.left-status-chip {
  display: inline-block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--muted);
  border: 1px solid rgba(100, 116, 139, 0.25);
}

.left-status-chip.published {
  background: rgba(15, 164, 175, 0.12);
  color: var(--brand);
  border-color: rgba(15, 164, 175, 0.3);
}

/* When the chip holds a .cv-cachet stamp, strip the pill chrome so the
   cachet stands alone (keep margin-top for spacing from element above). */
.left-status-chip.left-status-chip--sealed {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* ── Left Panel: Drawing Tools (5 cards: zone/line/point/object/note) ── */
.draw-tools-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 10px 6px 6px;
  background: var(--surface);
}

/* Secondary row — undo/redo (cycle 5: moved out of topbar) */
.draw-tools-secondary-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.draw-tool-card--secondary {
  min-height: 30px;
  padding: 4px 0 3px;
  gap: 2px;
  color: var(--muted);
}
.draw-tool-card--secondary svg {
  width: 14px;
  height: 14px;
}
.draw-tool-card--secondary:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
}
.draw-tool-card--secondary:not(:disabled):hover {
  border-color: var(--brand);
  color: var(--ink);
  background: rgba(15, 164, 175, 0.06);
}

.draw-tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0 6px;
  min-height: 56px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  font-size: 18px;
  position: relative;
  overflow: hidden;
}

.draw-tool-card:hover {
  border-color: var(--brand);
  background: rgba(15, 164, 175, 0.07);
}

.draw-tool-card.active {
  border-color: var(--brand);
  background: rgba(15, 164, 175, 0.13);
  box-shadow: 0 2px 8px rgba(15, 164, 175, 0.18);
}

.draw-tool-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  white-space: nowrap;
  max-width: 100%;
  padding: 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.draw-tool-card.active .draw-tool-label {
  color: var(--brand);
}

/* ── Starter Packs ──────────────────────────────────────────── */
.packs-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 24px;
}

.pack-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 5px;
  padding: 10px 10px 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.pack-card-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
  padding-left: 2px;
}

.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.preset-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  position: relative;
  gap: 3px;
}

.preset-tile:hover {
  background: rgba(15, 164, 175, 0.07);
  border-color: rgba(15, 164, 175, 0.4);
  box-shadow: 0 2px 6px rgba(15, 164, 175, 0.12);
}

.preset-tile.active {
  background: rgba(15, 164, 175, 0.13);
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(15, 164, 175, 0.2);
}

.preset-emoji {
  font-size: 22px;
  line-height: 1.1;
}

.preset-label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 1px 3px;
  border-radius: 3px;
  line-height: 1.3;
}

.preset-badge.zone   { background: #3b82f6; }
.preset-badge.line   { background: #8b5cf6; }
.preset-badge.point  { background: #f59e0b; }
.preset-badge.object { background: var(--brand); }

/* ── Contextual Zone Modal ──────────────────────────────────── */
.contextual-modal {
  position: fixed;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 1200;
  display: flex;
  gap: 6px;
  min-width: 180px;
}

.contextual-modal.hidden {
  display: none;
}

/* Object Modal */
#contextual-object-modal {
  flex-direction: column;
  padding: 10px;
  min-width: 160px;
}

.object-modal-inner {
  display: flex;
  flex-direction: column;
}

.object-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

/* Emoji Picker */
#emoji-picker-modal {
  width: 352px;
  padding: 0;
}

emoji-picker {
  --background: var(--surface, #f8fbff);
  --border-color: var(--line, #bac9e2);
  --indicator-color: var(--brand, #0FA4AF);
  --input-border-color: var(--line, #bac9e2);
  --input-font-color: var(--ink, #102139);
  --button-active-background: rgba(15,164,175,0.15);
  --button-hover-background: rgba(15,164,175,0.08);
  width: 352px;
  height: 400px;
}

#el-emoji {
  width: 56px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px;
  background: var(--surface-raised, #f0f4fa);
}
#el-emoji:hover {
  border-color: var(--brand);
}

.zone-variant-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.12s, border-color 0.12s;
  flex: 1 1 0;
  min-width: 0;            /* override default min-width: auto so the longest label
                              ('Polygon') doesn't expand its tile past equal-share */
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.zone-variant-tile:hover {
  border-color: var(--brand);
  background: rgba(15, 164, 175, 0.08);
  color: var(--brand);
}

.zone-variant-tile .zone-var-icon {
  /* Now an SVG (was a unicode glyph). All three variants share viewBox
   * 0 0 24 24 + stroke-width 1.8 + currentColor stroke, so they render
   * at uniform size and weight regardless of which shape is rendered. */
  width: 22px;
  height: 22px;
  display: block;
  font-size: 20px;     /* legacy — harmless on SVGs but kept for safety if any branch still emits a span */
}

#palette-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}

.search-result-item:hover { background: var(--surface-2, #edf2fb); }

.search-result-label { flex: 1; }

.search-result-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface-2, #edf2fb);
  padding: 2px 6px;
  border-radius: 10px;
}

.search-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.palette-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
}

.palette-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}

.palette-icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

.palette-icon-btn.active {
  background: rgba(15,164,175,0.12);
  border: 1.5px solid var(--brand);
}

.palette-icon-btn i, .palette-icon-btn .ti {
  font-size: 20px;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.icon-emoji {
  font-size: 22px;
}

.icon-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}



.suggestions-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Map stage ────────────────────────────────────────────────────────────── */
#map-stage {
  flex: 1;
  position: relative;
  min-width: 0;
}

#map {
  position: absolute;
  inset: 0;
}

#map-stage.draw-active {
  cursor: crosshair;
}

/* Custom draw cursors */
#map-stage.mode-draw-line,
#map-stage.mode-draw-zone,
#map-stage.mode-draw-zone-rect,
#map-stage.mode-draw-zone-circle,
#map-stage.mode-draw-point {
  cursor: crosshair;
}

#map-stage.mode-pointer {
  cursor: default;
}

/* ── Mode indicator ───────────────────────────────────────────────────────── */
#mode-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}

#mode-indicator.mode-pointer {
  background: #dcfce7;
  color: #15803d;
}

#mode-indicator.mode-comment {
  background: #ffedd5;
  color: #c2410c;
}

#mode-indicator.mode-draw-line {
  background: #ede9fe;
  color: #5b21b6;
}

#mode-indicator.mode-draw-zone {
  background: #d1fae5;
  color: #065f46;
}

#mode-indicator.mode-draw-point {
  background: #fef3c7;
  color: #92400e;
}

#mode-indicator.mode-draw-zone-rect,
#mode-indicator.mode-draw-zone-circle {
  background: #d1fae5;
  color: #065f46;
}

/* ── Zone draw inline buttons ─────────────────────────────────────────────── */
.zone-draw-buttons {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
}

.zone-draw-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: 11px;
  background: var(--surface-raised, #f0f4fa);
  border: 1px solid var(--line, #bac9e2);
  border-radius: 4px;
  color: var(--ink, #102139);
  cursor: pointer;
  white-space: nowrap;
}

.zone-draw-btn:hover {
  background: var(--brand, #0FA4AF);
  border-color: var(--brand, #0FA4AF);
  color: #fff;
}

/* ── API status ───────────────────────────────────────────────────────────── */
#api-status {
  position: absolute;
  bottom: 48px;
  left: 12px;
  z-index: 400;
  font-size: 11px;
  color: #6b7280;
  background: rgba(255,255,255,0.8);
  padding: 4px 8px;
  border-radius: 4px;
}

/* ── Right panel ──────────────────────────────────────────────────────────── */
#right-panel {
  width: 360px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  box-shadow: -1px 0 0 var(--line), -4px 0 12px rgba(0,0,0,0.03);
}

/* ── Tab bar (cycle 5: pill-style on white card surface) ──────────────────── */
#tab-bar {
  display: flex;
  flex-shrink: 0;
  background: var(--surface-card);
  padding: var(--space-md);
  gap: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
}

.tab-btn {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--type-body-sm);
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.12s ease, color 0.12s ease;
}

.tab-btn:hover {
  background: rgba(15, 164, 175, 0.06);
  color: var(--ink);
}

.tab-btn.active {
  background: rgba(15, 164, 175, 0.12);
  color: var(--brand-deep);
  font-weight: 600;
}

/* ── Tab panes ────────────────────────────────────────────────────────────── */
.tab-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Element panel (in-flow, NOT position:fixed) ──────────────────────────── */
.element-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.element-panel.hidden {
  display: none !important;
}

.element-panel.visible {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Header Card (Edit Element panel) ─────────────────────────── */
.panel-header-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  border-radius: 5px;
  padding: 10px 12px;
  margin: 10px 12px 0;
  flex-shrink: 0;
}
.panel-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 16px;
  color: #fff;
}
.panel-type-icon.type-zone   { background: #3b82f6; }
.panel-type-icon.type-line   { background: #8b5cf6; }
.panel-type-icon.type-point  { background: #f59e0b; }
.panel-type-icon.type-object { background: #0A7B84; }

.panel-header-emoji {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
/* Header text column — small caption above the editable name */
.panel-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.panel-header-caption {
  font-size: var(--type-caption);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
.panel-header-name {
  font-size: var(--type-h4);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  line-height: 1.2;
}
.panel-header-name-input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--brand, #0FA4AF);
  outline: none;
  padding: 0 2px;
  font-family: inherit;
}
.panel-header-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #94a3b8;
  border-radius: 3px;
  display: flex;
  align-items: center;
  line-height: 0;
  font-size: 16px;
  flex-shrink: 0;
}
.panel-header-action:hover { color: #0f172a; background: rgba(0,0,0,0.06); }

/* ── Prop cards (shared card style for panel sections) ─────────────────────── */
.prop-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 10px;
}
.prop-card-title {
  font-size: var(--type-body-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.prop-card-sublabel {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

/* ── Stroke card ───────────────────────────────────────────────────────────── */
.stroke-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stroke-color-row .color-swatches {
  flex: 1;
}
.eyedropper-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #f8fbff);
  border: 1px solid var(--line, #bac9e2);
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  font-size: 14px;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.eyedropper-btn:hover,
.eyedropper-btn.active {
  border-color: var(--brand, #0FA4AF);
  color: var(--brand, #0FA4AF);
}

.color-picker-expand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 0 2px;
}
.color-picker-expand.hidden {
  display: none;
}
.color-picker-native {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line, #bac9e2);
  border-radius: 4px;
  cursor: pointer;
  background: none;
}
.color-picker-native::-webkit-color-swatch-wrapper { padding: 2px; }
.color-picker-native::-webkit-color-swatch { border-radius: 2px; border: none; }
.color-picker-native::-moz-color-swatch { border-radius: 2px; border: none; }
.color-picker-hex {
  width: 80px;
  font-size: 12px;
  font-family: 'SF Mono', 'Menlo', monospace;
  padding: 4px 6px;
  border: 1px solid var(--line, #bac9e2);
  border-radius: 4px;
  color: var(--ink, #102139);
  background: var(--surface, #f8fbff);
}

.stroke-width-slider {
  width: 100%;
  margin-top: 2px;
}

/* ── Fill card ────────────────────────────────────────────────────────────── */
.fill-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fill-color-row .color-swatches {
  flex: 1;
}
.fill-opacity-slider {
  width: 100%;
  margin-top: 2px;
}

/* Prop card inner panel-fields: tighten margins */
.prop-card .panel-field {
  margin-bottom: 0;
}

/* ── Icon card (points only) ────────────────────────────────────────────────── */
.icon-card-display {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-card-emoji {
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #bac9e2);
  border-radius: 6px;
  background: var(--surface-raised, #f0f4fa);
  transition: border-color 0.15s;
}
.icon-card-emoji:hover {
  border-color: var(--brand, #0FA4AF);
}
.icon-card-change-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand, #0FA4AF);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.icon-card-change-btn:hover {
  text-decoration: underline;
}
.icon-card-width {
  margin-top: 10px;
}
.icon-width-slider {
  width: 100%;
  margin-top: 2px;
}

.panel-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
}

.panel-field {
  margin-bottom: 14px;
}

.panel-field label {
  display: block;
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

.panel-field input,
.panel-field select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.panel-body input[type="text"],
.panel-body input[type="number"],
.panel-body select {
  border: 1px solid var(--line);
}

.panel-body input[type="text"]:focus,
.panel-body input[type="number"]:focus,
.panel-body select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15,164,175,0.12);
  outline: none;
}

/* TYPE_REGISTRY dynamic fields section — soft separation, no hard rule */
.type-fields-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
}

.panel-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

.panel-footer button:not(.footer-btn) {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Unified footer button base — every footer button (normal + geo states) shares
   identical height / padding / radius. Color modifiers below override ONLY
   background/border/color, never geometry. */
.footer-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #d1d5db);
  background: #f9fafb;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.footer-btn:hover {
  background: #f1f3f5;
}

/* Color-only modifiers — override background/border/color only, NEVER height/padding/radius */
.btn-primary {
  background: var(--brand) !important;
  color: white !important;
  border-color: var(--brand) !important;
  border-radius: 8px;
}

.btn-primary:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.btn-danger {
  background: #fee2e2 !important;
  color: var(--bad) !important;
  border-color: #fca5a5 !important;
}

.btn-danger:hover {
  background: #fecaca !important;
}

/* Footer-scoped geometry override: .btn-secondary carries its own padding/border/radius
   for modal use; inside the footer, the .footer-btn geometry must win. Two-class
   specificity (0,2,0) beats the standalone .btn-secondary rule (0,1,0). */
.footer-btn.btn-secondary,
.footer-btn.btn-primary,
.footer-btn.btn-danger,
.footer-btn.btn-back-to-layers {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
}
/* Back link keeps borderless/transparent look but identical height */
.footer-btn.btn-back-to-layers {
  background: transparent !important;
  border-color: transparent !important;
}
/* Icon-only footer buttons (Back chevron, Delete trash): square 32x32, no
   horizontal padding, centered glyph. Specificity 0,2,0 matches the geometry
   override above; placed after it so padding:0 wins. */
.footer-btn.icon-only {
  width: 32px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

.panel-error {
  width: 100%;
  font-size: 12px;
  color: var(--bad);
  margin-top: 4px;
}

/* ── Layers panel ─────────────────────────────────────────────────────────── */
#tab-layers { background: #f4f5f7; }

#layers-list {
  flex: 1;
  overflow-y: auto;
  background: #f4f5f7;
  padding: 10px 10px 4px;
}

/* Old layer-row rules removed — replaced by LAYERS PANEL REDESIGN section below */

/* Active state — overrides the placeholder stub styles */
#add-layer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px dashed rgba(15,164,175,0.35);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  color: #0FA4AF;
  text-align: left;
}

#add-layer-btn:hover {
  background: rgba(15,164,175,0.04);
  border-color: #0FA4AF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ── Feedback panel ───────────────────────────────────────────────────────── */
.placeholder-text {
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ── Emoji marker icons ───────────────────────────────────────────────────── */
.emoji-marker-icon { background: transparent; border: none; }
.emoji-marker { font-size: 26px; line-height: 32px; text-align: center; width: 32px; height: 32px; }

/* ── Comment pin markers ──────────────────────────────────────────────────── */
/* Comment map markers use the emoji-marker pattern (cycle 4). Old
 * .comment-marker-wrap / .comment-bubble classes deleted with the SVG. */
.civix-comment-emoji-marker {
  font-size: 24px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
  transition: transform 0.12s ease;
}
.civix-comment-emoji-marker:hover { transform: scale(1.15); }
.civix-comment-emoji-marker.active-comment {
  filter: drop-shadow(0 0 8px #e67e22) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

/* ── Icon alignment in buttons ────────────────────────────────────────────── */
.toolbar-btn,
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.palette-section-header span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* SVGs inherit button color */
.toolbar-btn svg,
.tab-btn svg,
.palette-section-header svg,
.panel-footer svg,
#panel-close svg {
  flex-shrink: 0;
}

/* ── Global utility ───────────────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

/* ── Collab avatars ───────────────────────────────────────────────────────── */
.collab-avatars {
  min-height: 0;
  min-width: 0;
}

/* ── Responsive: collapse left panel below 900px ─────────────────────────── */
@media (max-width: 900px) {
  #left-panel {
    display: none;
  }
}

/* ── Saving state ────────────────────────────────────────────────────────── */
#topbar.saving { opacity: 0.6; pointer-events: none; }

/* ── Color swatches ──────────────────────────────────────────────────────── */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  border: 2px solid transparent;
  transition: border-color 0.1s;
}
.color-swatch:hover, .color-swatch.active {
  border-color: var(--brand, #3b82f6);
}

/* ── Line style buttons ──────────────────────────────────────────────────── */
.line-style-btns {
  display: flex;
  gap: 4px;
}
.line-style-btn {
  padding: 4px 8px;
  background: var(--surface, #f8fbff);
  border: 1px solid var(--line, #bac9e2);
  border-radius: 4px;
  color: var(--ink, #102139);
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.1s;
}
.line-style-btn:hover {
  border-color: var(--brand, #0FA4AF);
}
.line-style-btn.active {
  border-color: var(--brand, #0FA4AF);
  background: rgba(15, 164, 175, 0.12);
}

/* ── Fill pattern swatches ───────────────────────────────────────────────── */
.pattern-swatch {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 6px 4px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  color: var(--ink);
  font-size: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.pattern-swatch .pattern-preview {
  display: block;
  width: 100%;
  max-width: 32px;
  height: 18px;
  border-radius: 3px;
  flex: none;
}
.pattern-swatch .pattern-label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pattern-swatch:hover {
  border-color: rgba(15, 164, 175, 0.4);
  background: rgba(15, 164, 175, 0.07);
  box-shadow: 0 2px 6px rgba(15, 164, 175, 0.12);
}
.pattern-swatch.active {
  border-color: var(--brand, #0FA4AF);
  background: rgba(15, 164, 175, 0.13);
  box-shadow: 0 2px 8px rgba(15, 164, 175, 0.2);
}
.pattern-swatch.active .pattern-label {
  color: var(--brand, #0FA4AF);
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay.hidden {
  display: none;
}
.modal-card {
  background: #fff;
  border: 1px solid var(--line, #bac9e2);
  border-radius: 8px;
  width: 400px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line, #bac9e2);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #102139);
  flex-shrink: 0;
}
.modal-close {
  background: none;
  border: none;
  color: var(--muted, #415470);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
}
.modal-close:hover { color: var(--ink, #102139); }
.modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line, #bac9e2);
  padding-bottom: 12px;
}
.modal-tab {
  padding: 4px 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted, #415470);
  cursor: pointer;
  font-size: 13px;
}
.modal-tab.active {
  border-color: var(--brand, #0FA4AF);
  color: var(--brand, #0FA4AF);
}
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #415470);
  font-weight: 500;
}
.modal-field input, .modal-field select {
  background: var(--surface, #f8fbff);
  border: 1px solid var(--line, #bac9e2);
  border-radius: 4px;
  color: var(--ink, #102139);
  padding: 6px 8px;
  font-size: 13px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line, #bac9e2);
  flex-shrink: 0;
}
.btn-secondary {
  padding: 6px 14px;
  background: none;
  border: 1px solid var(--line, #bac9e2);
  border-radius: 4px;
  color: var(--ink, #102139);
  cursor: pointer;
  font-size: 13px;
}
.btn-secondary:hover { background: var(--surface-2, #edf2fb); }

/* ── Toast notifications ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.civix-toast {
  background: #1e2836;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-left: 3px solid #334155;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.civix-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
.civix-toast-info {
  border-left-color: var(--brand, #60a5fa);
}
.civix-toast-error {
  border-left-color: #ef4444;
}
.civix-toast-success {
  border-left-color: #22c55e;
}
.civix-toast-action {
  margin-left: 12px;
  background: var(--brand, #0FA4AF);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto; /* FIX 5: scoped to button, toast itself stays passthrough */
}
.civix-toast-dismiss {
  margin-left: 8px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto; /* FIX 5: scoped to button */
}

/* Disabled toolbar button state */
.toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Rotation handle ──────────────────────────────────────────────────────── */
.rotation-handle {
  width: 28px !important;
  height: 28px !important;
  background: #0A7B84; /* --color-primary-strong — AA-safe (5.03:1) for white glyph */
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  user-select: none;
  line-height: 1;
}
.rotation-handle:hover {
  background: var(--brand-deep, #024950);
}
.rotation-handle::after {
  display: none; /* tether line would require SVG overlay; skip for now */
}
.resize-handle {
  width: 28px !important;
  height: 28px !important;
  background: #0A7B84; /* --color-primary-strong — AA-safe (5.03:1) for white glyph */
  border: 2px solid #fff;
  border-radius: 4px; /* square-ish to distinguish from circular rotation handle */
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: nwse-resize;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  user-select: none;
  font-size: 14px;
  line-height: 1;
}
.resize-handle:hover {
  background: var(--brand-deep, #024950);
}

/* ── Emoji point markers (preset system) ────────────────────────────────────── */
.civix-emoji-marker {
  background: none !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Custom thin scrollbars ──────────────────────────────────────────────── */
.palette-scroll::-webkit-scrollbar,
.panel-body::-webkit-scrollbar { width: 4px; }
.palette-scroll::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* ── Geometry view styles ────────────────────────────────────────────────── */
#panel-geo-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  gap: 12px;
}

.geo-view-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  background: rgba(15,164,175,0.1);
  padding: 4px 10px;
  border-radius: 12px;
}

.geo-view-hint {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

/* ── Footer layout ───────────────────────────────────────────────────────── */
#footer-normal, #footer-geo {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}
#footer-normal {
  flex-wrap: wrap;
  row-gap: 6px;
}
#footer-geo {
  flex-wrap: nowrap;
}
/* Right-push the action cluster (Transform/Reshape/Delete) away from the Back
   button. margin-left:auto on a flex item eats all free space to its left, so
   ONLY the first VISIBLE action carries it — the rest sit tight with an 8px gap.
   Which action is first-visible varies by element type (Transform hidden for
   points; Reshape hidden for circles; Delete-only for points), and CSS sibling
   combinators (~/+) match by DOM presence not by .hidden state, so a JS helper
   (tagFirstVisibleAction) tags the first non-hidden action with .first-action.
   Default below is .first-action keeps auto; everything else gets the 8px gap. */
#footer-normal #panel-edit-geometry,
#footer-normal #panel-edit-vertices,
#footer-normal #panel-delete {
  margin-left: 8px;
}
/* ID-scoped first-action selectors: specificity (2,1,0) beats the (2,0,0)
   8px rule above so the first-visible action right-pushes the cluster.
   Scoped to the 3 action IDs only — Back is untouched. */
#footer-normal #panel-edit-geometry.first-action,
#footer-normal #panel-edit-vertices.first-action,
#footer-normal #panel-delete.first-action {
  margin-left: auto;
}
/* Back link — color-only modifier; geometry (height/padding/radius) comes from
   .footer-btn + the .footer-btn.btn-back-to-layers override above. */
.btn-back-to-layers {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
}
.btn-back-to-layers:hover {
  color: var(--text) !important;
  background: transparent !important;
}
/* Delete confirm flash. Icon-only Delete can't show "Confirm?" text, so the
   armed state is signalled purely visually: solid red fill + light-red ring.
   Class-based (.confirm-pending) — set/cleared by the footer delete handler. */
#panel-delete.confirm-pending {
  background: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #fca5a5;
}

/* ── Element Selection Highlight ─────────────────────────────────────────── */
/* Vector layers (zones, lines) */
/* Selected = official turquoise #0FA4AF; Editing = deep-teal #024950
   (distinguishable by hue, not just intensity). */
path.civix-selected {
  filter: drop-shadow(0 0 4px rgba(15, 164, 175, 0.55));
}
path.civix-editing {
  filter: drop-shadow(0 0 6px rgba(2, 73, 80, 0.9));
}
/* Point markers (emoji) */
.civix-emoji-marker.civix-selected {
  filter: drop-shadow(0 0 4px rgba(15, 164, 175, 0.7));
}
.civix-emoji-marker.civix-editing {
  filter: drop-shadow(0 0 6px rgba(2, 73, 80, 0.95));
}
/* Point markers (dot — rendered at zoom < LOD_DOT_ZOOM) */
.civix-dot-icon.civix-selected {
  filter: drop-shadow(0 0 4px rgba(15, 164, 175, 0.7));
}
.civix-dot-icon.civix-editing {
  filter: drop-shadow(0 0 6px rgba(2, 73, 80, 0.95));
}

/* CMD/CTRL + drag copy cursor */
.map-copy-dragging,
.map-copy-dragging * { cursor: copy !important; }

/* Search Control */
.search-control {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
}
.search-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.15s;
  outline: none;
}
.search-toggle-btn:focus { outline: none; }
.search-toggle-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.search-toggle-btn:hover {
  background: var(--brand-deep);
}
.search-toggle-btn svg {
  width: 16px;
  height: 16px;
  color: #fff;
  stroke: #fff;
}
.search-expanded {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  overflow: visible;
  width: 280px;
  transition: width 0.2s ease-out;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  padding: 0 8px 0 14px;
  height: 36px;
  width: 100%;
  font-family: inherit;
}
.search-input:focus { outline: none; box-shadow: none; }
.search-input::placeholder {
  color: var(--muted);
}
.search-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-right: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.search-close-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  max-height: 280px;
  overflow-y: auto;
  z-index: 9999;
  padding: 4px 0;
}
.search-item {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.35;
  border-radius: 0;
  transition: background 0.1s;
}
.search-item:hover {
  background: var(--surface-2);
}
.search-item-highlighted {
  background: var(--surface-2);
}
.search-item-noresult {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  cursor: default;
  font-style: italic;
}

/* ── Panel Collapse Toggles ───────────────────────────────────────────────── */
.panel-collapse-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.panel-collapse-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.panel-collapse-btn svg {
  transition: transform 0.3s;
}
.panel-collapse-btn.collapsed svg {
  transform: rotate(180deg);
}

/* Left panel collapse button (cycle 5: inline inside project header row,
 * no longer a sticky strip above) */
#left-panel-collapse {
  flex-shrink: 0;
  padding: 4px 6px;
}

#left-panel {
  transition: width 0.3s ease-in-out;
}
#left-panel.panel-collapsed {
  width: 28px !important;
  min-width: 28px !important;
  overflow: hidden;
  border-right: 1px solid var(--line);
  box-shadow: none;
}
/* When collapsed, center the chevron in the narrow strip */
#left-panel.panel-collapsed #left-panel-collapse {
  justify-content: center;
  padding: 5px 0;
}

#right-panel {
  transition: width 0.3s ease-in-out;
}
#right-panel.panel-collapsed {
  width: 28px !important;
  min-width: 28px !important;
  overflow: hidden;
  border-left: 1px solid var(--line);
  box-shadow: none;
}
/* When collapsed, hide tab buttons so only the collapse button fills the strip */
#right-panel.panel-collapsed #tab-bar .tab-btn {
  display: none;
}
#right-panel.panel-collapsed #right-panel-collapse {
  width: 100%;
  justify-content: center;
  padding: 8px 0;
}

/* ── Keyboard Shortcut Modal ──────────────────────────────────────────────── */
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--ink);
}
.shortcut-row kbd {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  min-width: 24px;
  text-align: center;
}

/* ── Basemap Switcher ─────────────────────────────────────────────────────── */
.basemap-control {
  display: flex;
  flex-direction: row;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.basemap-btn {
  background: white;
  border: none;
  border-right: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
}
.basemap-btn:last-child {
  border-right: none;
}
.basemap-btn:hover {
  background: var(--surface-2);
}
.basemap-btn.active {
  background: var(--brand);
  color: white;
}

/* ── Lock Map Control (on-map, top-right next to basemap) ────────────────── */
.lock-map-control {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.lock-map-control button {
  background: white;
  border: none;
  padding: 7px 8px;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.lock-map-control button:hover { background: var(--surface-2); }
.lock-map-control button.locked {
  background: var(--brand);
  color: #fff;
}
.lock-map-control button .lock-icon-closed { display: none; }
.lock-map-control button.locked .lock-icon-open { display: none; }
.lock-map-control button.locked .lock-icon-closed { display: block; }

/* Subtype is set at creation time from the palette; hide from Properties panel */
#subtype-field {
  display: none !important;
}

/* Type badge — typed object identity shown below panel header */
.type-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.type-badge span:first-child {
  font-size: 16px;
}

/* Advanced (Style) collapsible section — sentence case, soft separation */
.advanced-toggle {
  width: calc(100% - 24px);
  margin: var(--space-md) 12px 0;
  background: transparent;
  border: none;
  padding: var(--space-md) var(--space-md);
  text-align: left;
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-md);
  transition: background 0.12s ease;
}
.advanced-toggle:hover {
  background: rgba(15, 164, 175, 0.06);
}
.advanced-toggle #advanced-chevron {
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

/* Civix toggle switch */
.civix-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.civix-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.civix-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border, #d1d5db);
  border-radius: 20px;
  transition: background 0.2s;
}
.civix-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.civix-toggle input:checked + .civix-toggle-slider {
  background: var(--brand, #6366f1);
}
.civix-toggle input:checked + .civix-toggle-slider::before {
  transform: translateX(16px);
}

/* Section header row — sentence case, soft separation */
.panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--type-body-sm);
  font-weight: 600;
  color: var(--ink);
  padding: var(--space-md) 0 var(--space-sm);
  margin-top: var(--space-md);
}

/* Disabled state */
.panel-section-body.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Project Switcher ──────────────────────────────────────────────────── */
.project-switcher { position: relative; }
.project-switcher-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; max-width: 200px;
}
.project-switcher-btn:hover { background: rgba(255,255,255,0.06); }
#project-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Project dropdown — white card matching the rest of the cycle-5 aesthetic */
/* Dropdown uses position: fixed so it can escape ancestor overflow:hidden
 * (#app-layout and #left-panel both have overflow:hidden, which was clipping
 * the dropdown silently — opened correctly, never visible). Coordinates are
 * computed from the trigger's getBoundingClientRect() at open time. */
.project-dropdown {
  position: fixed;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  padding: var(--space-sm) 0;
  max-height: 320px;
  overflow-y: auto;
  min-width: 220px;
}
.project-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--type-body-sm);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.project-dropdown-item:hover { background: rgba(15, 164, 175, 0.06); }
.project-dropdown-item.active { color: var(--brand-deep); font-weight: 600; background: rgba(15, 164, 175, 0.08); }
.project-dropdown-item.project-new-btn { color: var(--brand-deep); font-weight: 500; }
.project-dropdown-item.project-new-btn:hover { background: rgba(15, 164, 175, 0.10); }
.project-dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-xs) var(--space-md);
}

/* ── User Menu ──────────────────────────────────────────────────────────── */
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  padding: 3px 6px; border-radius: 6px; color: var(--text);
  font: inherit;
}
.user-menu-trigger:hover { background: rgba(255,255,255,0.06); }
.user-avatar-initials {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.user-display-name { font-size: 13px; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 210px; background: #162a45;
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 1200;
  padding: 4px 0;
}
.user-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
}
.billing-badge {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: rgba(15,164,175,0.15); color: var(--brand);
  font-weight: 600;
}
.user-dropdown-divider { height: 1px; background: var(--border); margin: 2px 0; }
.user-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none;
  color: var(--text); font: inherit; font-size: 13px;
  padding: 8px 12px; cursor: pointer; text-align: left;
}
.user-dropdown-item:hover { background: rgba(255,255,255,0.06); }

/* === LAYERS PANEL REDESIGN === */

/* Layer cards — match .pack-card exactly */
.layer-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}

/* Layer card header — matches .pack-card-header label style */
.layer-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 7px;
  cursor: default;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* Layer actions (hover-reveal) — shown on card-header hover, confirm state, or touch */
.layer-actions { display: flex; gap: 4px; opacity: 0; pointer-events: none; transition: opacity 0.15s; margin-left: auto; flex-shrink: 0; }
.layer-card-header:hover .layer-actions,
.layer-card[data-confirm-pending] .layer-actions { opacity: 1; pointer-events: auto; }
.layer-action-btn { background: none; border: none; cursor: pointer; padding: 4px; color: #64748b; border-radius: 3px; display: flex; align-items: center; line-height: 0; }
.layer-action-btn:hover { color: #0f172a; background: rgba(0,0,0,0.08); }
.layer-action-btn.vis-active { color: #0FA4AF; }
.layer-action-btn.confirm-active { color: #ef4444; background: rgba(239,68,68,0.08); }

/* Layer name — compact, readable, no uppercase transform (user shouldn't feel like CAPSLOCK is on) */
.layer-name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #475569;
  flex: 1;
  min-width: 0;
  padding: 0 2px;
  outline: none;
  text-transform: none;
}
.layer-name-input:focus { border-bottom-color: #0FA4AF; color: #1e293b; }

/* Drag handle */
.drag-handle { cursor: grab; color: #cbd5e1; display: flex; align-items: center; flex-shrink: 0; }
.drag-handle:active { cursor: grabbing; }

/* Layer chevron */
.layer-chevron { color: #cbd5e1; display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.layer-chevron:hover { color: #94a3b8; }

/* Layer elements grid — matches .pack-grid inside pack cards */
.layer-elements {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px;
  overflow: hidden;
}
.layer-elements.collapsed { display: none; }
.layer-elements:empty { padding: 0; }

/* Element rows — small card tiles matching .preset-tile */
.element-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.1s, box-shadow 0.1s;
  position: relative;
}
.element-row:hover {
  background: rgba(15,164,175,0.04);
  border-color: rgba(15,164,175,0.25);
  box-shadow: 0 2px 6px rgba(15,164,175,0.10);
}
.element-row:hover .element-row-actions { opacity: 1; pointer-events: auto; }
.element-row[data-confirm-pending] .element-row-actions { opacity: 1; pointer-events: auto; }

/* Element row actions */
.element-row-actions { display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity 0.1s; margin-left: auto; flex-shrink: 0; }
.elem-action-btn { background: none; border: none; cursor: pointer; padding: 4px; color: #64748b; border-radius: 3px; display: flex; align-items: center; line-height: 0; }
.elem-action-btn:hover { color: #0f172a; background: rgba(0,0,0,0.08); }
.elem-action-btn.confirm-active { color: #ef4444; }

/* Element type icon (legacy, kept for safety) */
.element-type-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #94a3b8; }

/* Colored type badge — matches left-panel pack tiles [Z][L][P][Obj] */
.elem-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1.2;
  flex-shrink: 0;
}
.elem-type-badge.zone   { background: #3b82f6; }
.elem-type-badge.line   { background: #8b5cf6; }
.elem-type-badge.point  { background: #f59e0b; }
.elem-type-badge.object { background: #0A7B84; }

/* Element label */
.element-label { font-size: 12px; color: #334155; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

/* Empty layer placeholder (per-layer-card hint, not a full empty state) */
.layer-empty-hint {
  font-size: var(--type-label);
  color: var(--muted);
  text-align: center;
  padding: var(--space-md) 0 var(--space-sm);
}

/* Touch devices — always show actions */
@media (pointer: coarse) {
  .layer-actions, .element-row-actions { opacity: 1; pointer-events: auto; }
}

/* Drag-over highlight */
.layer-card.drag-over { box-shadow: inset 0 0 0 2px #0FA4AF; }
.layer-elements.drag-over { box-shadow: inset 0 0 0 2px #0FA4AF; background: rgba(15,164,175,0.04); }

/* Element row drag insertion indicator — 2px brand line above target row */
.element-row.drag-insert-before { position: relative; }
.element-row.drag-insert-before::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
  z-index: 10;
}

/* Layer card being dragged */
.layer-card.layer-card--dragging { opacity: 0.45; }

/* Selected element tile */
.element-row.selected {
  background: rgba(15,164,175,0.08);
  border-color: rgba(15,164,175,0.35);
  box-shadow: 0 2px 6px rgba(15,164,175,0.12);
}
.element-row.selected .element-label { color: #0FA4AF; font-weight: 600; }

/* ── Shared full-panel empty-state pattern ────────────────────────────────
 * One id-independent class used by BOTH right-panel empty states
 * (#properties-empty and the Feedback "No notes yet" state) so they can't
 * drift. Structure: .panel-empty-state > [__icon] + __title + __text.
 * Centers itself in the available pane height (flex:1 + justify-content).
 * Display-font title styling lives in editor-skin.css (warm-modern skin). */
.panel-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--color-text-faint);
  font-size: var(--type-body-sm);
  line-height: 1.5;
}
.panel-empty-state__icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-md);
  color: var(--color-text-faint); /* stroke via currentColor */
  opacity: .85;
}
.panel-empty-state__title {
  margin-bottom: var(--space-md);
}
.panel-empty-state__text {
  display: block;
  max-width: 22ch;
}

/* Feedback pane: make the ancestors of the empty state grow as flex columns
 * so .panel-empty-state's flex:1 actually fills the pane height and centers
 * the same way #properties-empty does. Populated comment cards are normal
 * block children and still stack top-down and scroll. */
#all-comments-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#all-comments-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── On-map comment popups ────────────────────────────────────────────── */
.leaflet-popup.civix-comment-popup .leaflet-popup-content-wrapper {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.leaflet-popup.civix-comment-popup .leaflet-popup-content {
  margin: 0;
  width: 320px !important;
  line-height: 1.5;
}
.leaflet-popup.civix-comment-popup .leaflet-popup-tip {
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.leaflet-popup.civix-comment-popup .leaflet-popup-close-button {
  display: none;
}

.civix-cp-card {
  display: flex;
  flex-direction: column;
  font-family: inherit;
  color: #1f2937;
  font-size: 13px;
  max-height: 480px;
  overflow: hidden;
}
.civix-cp-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.civix-cp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 10px;
  font-size: 12px;
  color: #64748b;
}
.civix-cp-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0A7B84;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.civix-cp-author {
  font-weight: 600;
  color: #1f2937;
  font-size: 13px;
}
.civix-cp-time {
  margin-left: auto;
  font-size: 11px;
  color: #94a3b8;
}
.civix-cp-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 0 0 4px;
  margin-left: 2px;
}
.civix-cp-close:hover { color: #1f2937; }

.civix-cp-body {
  padding: 0 18px 14px;
  flex: 1;
  overflow-y: auto;
}
.civix-cp-body p { margin: 0; }

.civix-cp-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px 12px;
  font-size: 12px;
  color: #64748b;
}
.civix-cp-vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  color: #64748b;
  font-family: inherit;
}
.civix-cp-vote:hover { background: rgba(15, 164, 175, 0.08); }
.civix-cp-vote.civix-cp-vote--active { color: #0FA4AF; font-weight: 600; }
.civix-cp-vote.civix-cp-vote--down.civix-cp-vote--active { color: #b91c1c; }
.civix-cp-vote-arrow { font-size: 14px; line-height: 1; }
.civix-cp-replies-pill { color: #94a3b8; font-size: 11px; }

.civix-cp-divider {
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 0 18px;
}

/* Reply sub-cards — tinted, rounded, no left-border-bar (cycle 4) */
.civix-cp-reply {
  margin: 8px 18px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.04);
}
.civix-cp-reply-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.civix-cp-reply-body {
  margin: 4px 0 0;
  font-size: 13px;
  color: #1f2937;
}
.civix-cp-meta--inline {
  padding: 4px 0 0;
}
.civix-cp-author--small {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}
.civix-cp-avatar--small {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

/* Tombstone variants — author trail, no body, frozen votes.
 * Avatar uses dark text on light grey for WCAG AA contrast (4.5:1+). */
.civix-cp-avatar--tombstone {
  background: #e2e8f0;
  color: #475569;
}
.civix-cp-removed-body {
  color: #94a3b8;
  font-style: italic;
  margin: 0;
}
.civix-cp-header--tombstone .civix-cp-author {
  color: #64748b;
}
.civix-cp-reply--tombstone {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.civix-cp-tombstone-author {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.civix-cp-tombstone-label {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}
.civix-cp-tombstone-votes {
  margin-left: auto;
  font-size: 11px;
  color: #94a3b8;
  display: inline-flex;
  gap: 6px;
}

/* Frozen vote chips — non-interactive display on tombstones.
 * Specificity bump (.civix-cp-vote.civix-cp-vote--frozen) so this rule wins
 * over .civix-cp-vote:hover regardless of source order. */
.civix-cp-vote.civix-cp-vote--frozen {
  cursor: default;
  color: #94a3b8;
  background: transparent;
}
.civix-cp-vote.civix-cp-vote--frozen:hover { background: transparent; }
.civix-cp-vote--was-mine {
  color: #64748b;
  font-weight: 600;
}

/* Composer popup form — transparent, no faux footer (cycle 4 polish) */
.civix-cp-composer .civix-cp-form {
  padding: 14px 18px 16px;
  background: transparent;
  border-top: none;
  border-radius: 0;
}
.civix-cp-composer .civix-cp-textarea {
  min-height: 64px;
  font-size: 13px;
}
.civix-cp-composer .civix-cp-btn {
  padding: 8px 16px;
}

.civix-cp-form {
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fafbfc;
  border-radius: 0 0 12px 12px;
}

/* ── Feedback-tab catalog cards (cycle 4) ─────────────────────────── */
.civix-cp-catalog-empty {
  color: var(--text-secondary);
  font-size: 12px;
  padding: 6px 2px;
}
.civix-cp-catalog-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.civix-cp-catalog-card:hover {
  box-shadow: 0 2px 8px rgba(15, 164, 175, 0.12);
  border-color: rgba(15, 164, 175, 0.18);
}
.civix-cp-catalog-card--tombstone {
  background: #f8fafc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.civix-cp-catalog-card--tombstone:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border-color: rgba(15, 23, 42, 0.08);
}
.civix-cp-catalog-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.civix-cp-catalog-card-row1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.civix-cp-catalog-author {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}
.civix-cp-catalog-card--tombstone .civix-cp-catalog-author {
  color: #64748b;
}
.civix-cp-catalog-time {
  margin-left: auto;
  font-size: 11px;
  color: #94a3b8;
}
.civix-cp-catalog-preview {
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
  word-break: break-word;
}
.civix-cp-catalog-chips {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
}
.civix-cp-catalog-vote-chip,
.civix-cp-catalog-reply-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.civix-cp-catalog-card--tombstone .civix-cp-catalog-vote-chip,
.civix-cp-catalog-card--tombstone .civix-cp-catalog-reply-chip {
  background: rgba(15, 23, 42, 0.04);
  color: #94a3b8;
}

/* Collapsible "X removed comments" disclosure */
.civix-cp-removed-disclosure {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
}
.civix-cp-removed-toggle {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  padding: 4px 2px;
  font-family: inherit;
}
.civix-cp-removed-toggle:hover { color: #475569; }
.civix-cp-trail-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.civix-cp-trail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
}
.civix-cp-trail-row:hover { background: #f1f5f9; }
.civix-cp-textarea {
  width: 100%;
  min-height: 38px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  background: #fff;
}
.civix-cp-textarea:focus { border-color: #0FA4AF; }
.civix-cp-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Chat-input style emoji button — sits inside the textarea bottom-left,
 * subtle grey, becomes solid on hover. (Cycle 4 polish round 2.) */
.civix-cp-textarea-wrap {
  position: relative;
}
.civix-cp-textarea--with-emoji {
  padding-left: 34px;
}
.civix-cp-textarea-emoji-btn {
  position: absolute;
  left: 8px;
  top: 8px;                    /* aligns with the first line of text */
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 120ms ease, background 120ms ease;
}
.civix-cp-textarea-emoji-btn:hover {
  color: #475569;
  background: rgba(15, 23, 42, 0.04);
}
.civix-cp-textarea-emoji-btn svg { display: block; }
.civix-cp-btn {
  cursor: pointer;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
}
.civix-cp-btn--primary {
  background: #0A7B84;
  color: #fff;
}
.civix-cp-btn--primary:hover { background: #024950; }
.civix-cp-btn--secondary {
  background: transparent;
  color: #64748b;
  border: 1px solid rgba(15, 23, 42, 0.12);
}
.civix-cp-btn--secondary:hover { background: rgba(15, 23, 42, 0.04); }

.civix-cp-delete-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
}
.civix-cp-delete-btn:hover { color: #b91c1c; }

/* Composer popup variant — same chrome, simpler body */
.civix-cp-composer .civix-cp-header {
  font-weight: 600;
  color: #1f2937;
  padding-bottom: 8px;
}

/* ── Multi-select ─────────────────────────────────────────────────────────── */
.civix-marquee {
  position: absolute;
  border: 1.5px dashed var(--brand, #0FA4AF);
  background: rgba(15, 164, 175, 0.08);
  pointer-events: none;
  z-index: 650;
}
path.civix-group-box {
  stroke: #0FA4AF; /* official turquoise */
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  fill: rgba(15, 164, 175, 0.04);
  pointer-events: none;
}
.civix-select-chip {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #0A7B84; /* --color-primary-strong — AA-safe (5.03:1) for white text */
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 700;
  pointer-events: none;
}
.civix-select-chip.hidden { display: none; }

/* ── Help FAB + one-time nudge ───────────────────────────────────────────────── */
.civix-help-fab {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1e2836;
  color: #e2e8f0;
  border: 1px solid #334155;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  z-index: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.civix-help-fab:hover { background: #27313f; }
.civix-help-nudge {
  position: absolute;
  bottom: 18px;
  left: 58px;
  background: #1e2836;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  z-index: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.civix-help-nudge.hidden { display: none; }