/* Shared styles */
:root {
  color-scheme: dark;
  --sidebar-bg: #141418;
  --sidebar-text: #e8e6e3;
  --sidebar-muted: #9b9790;
  --sidebar-border: #2a2a30;
  --sidebar-accent: #5b8def;
  --preview-bg: #0e0e11;
  --poster-aspect: 21 / 29.7;
  --poster-aspect: 21 / 29.7;
  --compass-bg: #f3e1da;
  --compass-ring: #6e2f28;
  --compass-accent: #6b9fd8;
  --compass-muted: #cda89b;
  --card-cta-height: 40px;
}

:root {
  --panel-bg: rgba(20,20,24,0.92);
  --panel-border: #2a2a30;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  /* background: var(--preview-bg); */
  color: var(--sidebar-text);
  overflow: auto;
}

/* Layout: keep horizontal centering but allow normal document flow vertically
   so tall pages can scroll. Use `flex-start` to avoid clipping content. */
body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}


/* Home styles */
.home {
  display: grid;
  place-items: center;
  background: inherit;
  color: var(--sidebar-text);
  width: min(1040px, 100%);
  display: grid;
  gap: 24px;
}

.hero {
  padding: 12px 4px;
}

.hero-actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: flex-start;
  max-width: 680px;
}
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
  width: auto;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: 24px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: inherit;
  text-decoration: none;
}

.card h3 {  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-size: clamp(1rem, 3vw, 1rem);
  line-height: 1;
}

.card-icon {
  width: var(--card-cta-height);
  height: var(--card-cta-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(91,141,239,0.8);
  color: var(--sidebar-accent);
  flex-shrink: 0;
}

.card-icon svg,
.card-icon img {
  height: calc(var(--card-cta-height) * 0.75);
  width: auto;
  display: block;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card p {
  margin: 0;
  color: var(--sidebar-muted);
  line-height: 1.6;
  /* max-width: 34ch; */
}

.card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: var(--card-cta-height);
  border-radius: 14px;
  background: rgba(91,141,239,0.8);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  width: fit-content;
  transition: background 180ms ease;
}

/* Ensure these UI elements render above any background thumbnail image */
.card-icon,
.card-cta {
  position: relative;
  z-index: 2;
}

/* Right-side group for card icon + CTA (used by dynamic cards) */
.card-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

/* Scope hover to the CTA belonging to the hovered card only (direct children)
    This prevents an outer card (e.g. the "My Designs" wrapper) from
    applying hover styles to nested cards' CTAs. */
.card:hover > .card-cta,
.card:hover > .card-right > .card-cta {
  background: rgba(91,141,239,1);
}

.card-cta-arrow {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 760px) {
  .home  .options { grid-template-columns: 1fr; }
  .home .card { padding: 22px; }
}

/* Coming soon page: make the main 'box' full-width */
.home.coming-soon {
  /* match home container width */
  width: min(1040px, 100%);
  display: grid;
  place-items: center;
  padding: 48px 24px;
  margin: 0 auto;
}
.home.coming-soon .hero {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.home.coming-soon > div {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
.home.coming-soon .card {
  width: min(520px, 48%);
}

/* Two-column layout for coming-soon card */
.home.coming-soon .card-columns {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
.home.coming-soon .card-col--left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home.coming-soon .card-col--right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.home.coming-soon .coming-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

@media (max-width: 760px) {
  .home.coming-soon .card-columns {
    grid-template-columns: 1fr;
  }
  .home.coming-soon .coming-image {
    max-height: 200px;
    max-width: 100%;
    width: 100%;
  }
}

/* App styles */
.app {
  display: flex;
  height: 100vh; /* fix to viewport height to prevent page scrolling */
  width: 100%;
  max-width: 100%;
  background: inherit;
  overflow: hidden; /* hide overflowing document content so the page doesn't scroll */
}

.sidebar {
  width: min(320px, 34vw);
  min-width: 260px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 16px 16px;
  overflow: hidden;
}

.sidebar-header h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sidebar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 10px;
  color: var(--sidebar-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sidebar-home-link {
  display: inline-flex;
  align-items: center;
  color: #7f90b4;
  text-decoration: none;
  transition: color 160ms ease;
}

.sidebar-home-link:hover {
  color: #fff;
}

.sidebar-tagline {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--sidebar-muted);
  line-height: 1.4;
}

.accordion {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  border-top: 1px solid var(--sidebar-border);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.accordion-item {
  border-bottom: 1px solid var(--sidebar-border);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: color 160ms ease;
}

.accordion-trigger:hover {
  color: #fff;
}

.accordion-item.is-open .accordion-trigger {
  color: #fff;
}

.location-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sidebar-border);
}

.location-heading {
  margin: 0 0 10px;
  padding: 0 4px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.accordion-label {
  letter-spacing: 0.02em;
}

.accordion-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--sidebar-muted);
  border-bottom: 2px solid var(--sidebar-muted);
  transform: rotate(45deg);
  transition: transform 200ms ease, border-color 200ms ease;
  flex-shrink: 0;
  margin-top: -3px;
}

.accordion-item.is-open .accordion-chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
  border-color: var(--sidebar-accent);
}

.accordion-panel {
  padding: 0 4px 14px;
}

.accordion-panel[hidden] {
  display: none;
}

.search-wrap {
  position: relative;
}

input[type="search"],
input[type="text"],
select,
.layout-select {
  width: 100%;
  border: 1px solid var(--sidebar-border);
  background: #1c1c22;
  color: var(--sidebar-text);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}

input:focus,
select:focus {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: 1px;
}

.search-results {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #1c1c22;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.search-results li button {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  gap: 2px;
}

.search-results li button .result-label {
  font-weight: 500;
  font-size: 0.85rem;
}

.search-results li button .result-region {
  font-size: 0.75rem;
  opacity: 0.7;
}

.search-results li button:hover {
  background: #2a2a32;
}

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

.theme-swatch {
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  background: none;
}

.theme-swatch.is-active {
  border-color: var(--sidebar-accent);
}

.theme-swatch-preview {
  flex: 1;
  min-height: 36px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: stretch;
}

.theme-swatch-color {
  flex: 1 1 0;
  border-radius: 4px;
  height: 100%;
  display: block;
}

.theme-swatch-color--road { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.theme-swatch-color--water { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); }
.theme-swatch-color--land { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02); }

.theme-swatch-name {
  font-size: 0.65rem;
  padding: 4px 6px;
  text-align: center;
  color: var(--sidebar-muted);
  background: #1c1c22;
}

.layer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88rem;
  cursor: pointer;
}

/* Switch track + thumb (mirrors poi-legend-switch) */
.layer-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.layer-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.layer-track {
  display: inline-block;
  width: 34px;
  height: 18px;
  background: #3a3a44;
  border-radius: 9px;
  transition: background 180ms;
  position: relative;
}

.layer-switch input:checked ~ .layer-track {
  background: var(--sidebar-accent);
}

.layer-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 180ms;
}

.layer-switch input:checked ~ .layer-track .layer-thumb {
  transform: translateX(16px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.field:last-child {
  margin-bottom: 0;
}

.field span {
  font-size: 0.78rem;
  color: var(--sidebar-muted);
}

.export-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  background: var(--sidebar-accent);
  color: #fff;
  cursor: pointer;
  transition: filter 160ms ease;
  text-decoration: none;
}

.btn-primary:hover,
.btn-secondary:hover {
  filter: brightness(1.08);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: wait;
}

.attribution {
  margin: 14px 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--sidebar-muted);
}

.attribution a {
  color: var(--sidebar-muted);
}

.preview {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  font-family: 'Baskervville', serif;
  background: inherit;
}

.preview-toolbar {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  border-radius: 10px;
  background: rgba(20, 20, 24, 0.9);
  color: #e8e6e3;
  font-size: 1.2rem;
  cursor: pointer;
}

.icon-btn.is-active {
  border-color: var(--sidebar-accent);
  color: var(--sidebar-accent);
}

/* Fixed document model container */
.preview-container {
  --doc-width: 1734px;
  --doc-height: 2303px;
  --doc-scale: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.document-viewport {
  position: relative;
  width: calc(var(--doc-width) * var(--doc-scale));
  height: calc(var(--doc-height) * var(--doc-scale));
  flex: none;
}

/* Keep the silhouette area stable; animate transforms on the SVG itself */
.lake-silhouette-svg {
  transform-origin: center center;
  transition: transform 300ms ease;
}

.lake-silhouette-area.no-transition .lake-silhouette-svg {
  transition: none;
}

.document {
  width: var(--doc-width);
  height: var(--doc-height);
  background: var(--poster-bg);
  color: var(--poster-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  inset: 0 auto auto 0;
  transform: scale(var(--doc-scale));
  transform-origin: top left;
}

.poster-map {
  flex: 1;
  min-height: 0;
}

.poster-compass {
  position: absolute;
  top: var(--compass-top, 3%);
  right: var(--compass-right, 2.5%);
  width: var(--compass-size, 4.27%);
  height: var(--compass-size, 4.27%);
  z-index: 2;
  pointer-events: none;
}

.poster-compass[hidden] {
  display: none;
}

.poster-compass-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22));
}

.poster-compass-disc {
  fill: var(--compass-bg);
  fill-opacity: 0.92;
}

.poster-compass-ring {
  fill: none;
  stroke: var(--compass-ring);
  stroke-width: 3;
}

.poster-compass-north {
  fill: var(--compass-ring);
}

.poster-compass-south {
  fill: var(--compass-accent);
}

.poster-compass-center {
  fill: var(--compass-muted);
  stroke: var(--compass-ring);
  stroke-width: 2;
}

/* poster-debug removed */

.poster-map .maplibregl-ctrl-bottom-left,
.poster-map .maplibregl-ctrl-bottom-right,
.poster-map .maplibregl-ctrl-top-right {
  display: none !important;
}

.poster-labels {
  flex-shrink: 0;
  height: var(--label-band-height, 12.5%);
  padding: 8px 16px;
  text-align: center;
  pointer-events: none;
  background: #ffffff;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.poster-labels h2 {
  margin: 0;
  font-size: clamp(10px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--poster-label);
}

.poster-labels p {
  margin: 4px 0 0;
  font-size: clamp(8px, 2.5vw, 20px);
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.04em;
  color: var(--poster-label);
}

.preview--lake {
  padding-top: 32px;
}

.lake-poster-frame {
  aspect-ratio: 24 / 36;
}

.lake-stage {
  position: relative;
  flex: 0 0 75%;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.lake-stage.is-dragging {
  cursor: grabbing;
}

.lake-stage-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lake-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  color: color-mix(in srgb, var(--poster-text) 58%, transparent);
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.lake-empty[hidden] {
  display: none;
}

.lake-labels {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 20px 26px;
}

.lake-labels h2 {
  font-size: clamp(1.35rem, 3vw, 2.2rem);
}

.lake-labels p {
  font-size: clamp(0.82rem, 1.6vw, 1.08rem);
}

/* Preview-only: make the second and third labels 100% larger (double size) */
#lake-label-name,
#lake-label-region,
#lake-label-coordinates {
  font-family: 'Baskervville', serif;
}
#lake-label-name {
  text-transform: uppercase;
}
#lake-label-region {
  font-size: 125%;
  line-height: 1.2;
}
#lake-label-coordinates {
  font-size: 125%;
  line-height: 1.1;
}
.lake-labels .poster-coordinates {
  font-size: clamp(0.72rem, 1.35vw, 0.95rem);
  opacity: 0.72;
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .app {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    min-width: 0;
    max-height: 42vh;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .poster-frame {
    width: min(92vw, 100%);
  }
}

/* ── Points of Interest ──────────────────────────────────────────────────────── */

.poi-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.poi-add-btn {
  flex: 1;
  border: 1px dashed var(--sidebar-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.poi-add-btn:hover,
.poi-add-btn.is-active {
  background: var(--sidebar-accent);
  color: #fff;
}

.poi-legend-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--sidebar-muted);
  cursor: pointer;
  white-space: nowrap;
}

/* Switch track + thumb */
.poi-legend-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.poi-legend-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.poi-legend-track {
  display: inline-block;
  width: 34px;
  height: 18px;
  background: #3a3a44;
  border-radius: 9px;
  transition: background 180ms;
  position: relative;
}

.poi-legend-switch input:checked ~ .poi-legend-track {
  background: var(--sidebar-accent);
}

.poi-legend-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 180ms;
}

.poi-legend-switch input:checked ~ .poi-legend-track .poi-legend-thumb {
  transform: translateX(16px);
}

.poi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poi-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 7px;
  background: #1c1c22;
}

.poi-icon-btn {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 120ms;
  color: #fff;
}

.poi-icon-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* Map coordinates display under POI panel */


/* Left sidebar debug panel */
.debug-panel {
  display: none;
  margin: 12px 12px;
  padding: 10px;
  border: 1px dashed var(--sidebar-border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.debug-panel label {
  display: block;
  font-size: 0.78rem;
  color: var(--sidebar-muted);
  margin-bottom: 6px;
}
.debug-panel input#debug-coords {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  background: #fff;
  color: #111;
  font: inherit;
}

.debug-panel input#debug-zoom {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  background: #fff;
  color: #111;
  font: inherit;
  margin-top: 6px;
}
.poi-item-name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poi-delete-btn {
  border: none;
  background: transparent;
  color: var(--sidebar-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 120ms, background 120ms;
  flex-shrink: 0;
}

.poi-delete-btn:hover {
  color: #f06060;
  background: rgba(240, 96, 96, 0.12);
}

/* ── POI on-poster overlays ──────────────────────────────────────────────────── */

.poi-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* children opt-in via pointer-events: auto */
  z-index: 3;
}

/* Tiny icon pin (legend mode) */
.poi-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.45));
  padding-bottom: 17px; /* leaves room for the pointer triangle */
}

/* The pointed triangle tail, rendered as a CSS border trick */
.poi-pin::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 20px solid var(--poster-text);
}

/* Circular pin body filled with theme colour */
.poi-pin-body {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  background: var(--poster-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -6px; /* overlap the triangle so they read as one shape */
}

/* White inner circle containing the icon */
.poi-pin-circle {
  width: 33px;
  height: 33px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.09rem;
  font-weight: 700;
  color: var(--poster-text);
  line-height: 1;
}

/* Reduce POI pins by 50% when legend mode is active */
.poi-overlay.legend-mode .poi-pin {
  padding-bottom: 8.5px;
}

.poi-overlay.legend-mode .poi-pin::after {
  border-left: 8.5px solid transparent;
  border-right: 8.5px solid transparent;
  border-top: 10px solid var(--poster-text);
}

.poi-overlay.legend-mode .poi-pin-body {
  width: 27px;
  height: 27px;
  margin-bottom: -3px;
}

.poi-overlay.legend-mode .poi-pin-circle {
  width: 16.5px;
  height: 16.5px;
  font-size: 0.545rem;
}

/* SVG layer for connector lines between anchor dots and draggable label boxes */
.poi-line-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Filled triangle tail pointing from box bottom to anchor */
.poi-tail {
  fill: var(--poster-text);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* Anchor dot at the geo location, coloured to match box */
.poi-callout-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--poster-text);
  border: 2px solid var(--poster-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Draggable label box — bottom-centre sits at the label position */
.poi-callout-box {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--poster-text);
  color: var(--poster-bg);
  border-radius: 2px;
  padding: 16px 20px 16px 12px;
  font-size: clamp(1.2rem, 2.4vw, 1.56rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  transform: translate(-50%, -100%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
}

/* Reduce callout labels by 50% when legend mode is OFF */
.poi-overlay:not(.legend-mode) .poi-callout-box {
  gap: 5px;
  padding: 8px 10px 8px 6px;
  font-size: clamp(0.6rem, 1.2vw, 0.78rem);
  max-width: 180px;
}

.poi-overlay:not(.legend-mode) .poi-callout-icon {
  font-size: 0.9em;
}

.poi-callout-box:hover {
  filter: brightness(1.08);
}

.poi-callout-box.is-dragging {
  cursor: grabbing;
  filter: brightness(1.12);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.poi-callout-icon {
  font-size: 1.8em;
  flex-shrink: 0;
  line-height: 1;
}

.poi-callout-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── POI legend panel (legend mode) ─────────────────────────────────────────── */

.poi-legend {
  position: absolute;
  background: var(--poster-text);
  color: var(--poster-bg);
  border-radius: 2px;
  /* reduced by 80% total (50% + 30%) from original size */
  padding: 7px 8px 7px 6px;
  z-index: 9999;
  font-size: clamp(0.53rem, 1.05vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.12);
  min-width: 120px;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 50%;
  min-width: 133px; /* reduced 30% more (190 -> 133) */
}

.poi-legend.is-dragging {
  cursor: grabbing;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.poi-legend[hidden] {
  display: none;
}

.poi-legend-row {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.poi-legend-icon {
  font-size: 1em;
  flex-shrink: 0;
  line-height: 1;
}

.poi-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── POI name dialog ─────────────────────────────────────────────────────────── */

.poi-dialog {
  border: 1px solid var(--sidebar-border);
  border-radius: 14px;
  background: #1c1c22;
  color: var(--sidebar-text);
  padding: 24px;
  width: min(340px, 90vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.poi-dialog::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}

.poi-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.poi-dialog-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.poi-dialog-input {
  width: 100%;
  border: 1px solid var(--sidebar-border);
  background: #141418;
  color: var(--sidebar-text);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}

.poi-dialog-input:focus {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: 1px;
}

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

.poi-dialog-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.poi-dialog-btn--ghost {
  background: transparent;
  color: var(--sidebar-muted);
  border: 1px solid var(--sidebar-border);
}

.poi-dialog-btn--ghost:hover {
  color: var(--sidebar-text);
}

.poi-dialog-btn--primary {
  background: var(--sidebar-accent);
  color: #fff;
}

.poi-dialog-btn--primary:hover {
  filter: brightness(1.1);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Lake Silhouette Application Styles */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Theme color variables - set by lakeApp.js */
#preview-container {
  --lake-silhouette: #8FB9BD;
  --lake-silhouette-stroke: #5a7a82;
  --lake-background: #F3E9DF;
  --lake-label-text: #8B3C2A;
  --doc-width: 600px;
  --doc-height: 800px;
  --doc-scale: 1;
}

.lake-document {
  width: var(--doc-width);
  height: var(--doc-height);
  display: flex;
  flex-direction: column;
  background: white;
  color: var(--lake-label-text);
  font-family: inherit;
  overflow: hidden;
  position: absolute;
  inset: 0 auto auto 0;
  transform: scale(var(--doc-scale));
  transform-origin: top left;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.lake-silhouette-area {
  flex: 0 0 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5px;
  position: relative;
  z-index: 1;
}

.lake-silhouette-svg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.lake-labels-area {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  background: white;
  gap: 12px;
  min-height: 0;
  position: relative;
  z-index: 2;
}

.lake-labels-area h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #000000;
}

.lake-labels-area p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
}

.lake-labels-area p:nth-child(3) {
  font-size: 15px; /* increased ~25% from 12px to 15px */
  color: #000000;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Increase spacing between region and coordinates by moving
   the name+region up half the extra space and coords down half. */
.lake-labels-area h2,
.lake-labels-area p:first-of-type {
  transform: translateY(-8px);
}

.lake-labels-area p:nth-child(3) {
  transform: translateY(8px);
}

/* Separator line between region and coordinates */
.lake-label-separator {
  height: 2px;
  width: 120px; /* default; JS will override to match name width */
  background: var(--lake-sep-color, #1e4d7b);
  margin: 0;
  transition: width 160ms ease, background-color 160ms ease;
}

.lake-labels-area h2,
.lake-labels-area p:first-of-type,
.lake-label-separator {
  /* ensure these elements are rendered in normal flow for transform positioning */
  display: block;
}

/* Theme Grid */
#theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px;
}

.theme-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: transparent;
  border: 2px solid var(--sidebar-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font: inherit;
  color: var(--sidebar-text);
}

.theme-item:hover {
  border-color: var(--sidebar-accent);
  background: rgba(91, 141, 239, 0.1);
}

.theme-item--active {
  border-color: var(--sidebar-accent);
  background: rgba(91, 141, 239, 0.15);
}

.theme-swatch {
  display: flex;
  gap: 4px;
  width: 100%;
}

.theme-color {
  flex: 1;
  height: 40px;
  border-radius: 4px;
  background: #ccc;
}

.theme-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────────
   Reusable Confirmation Overlay Component
   ──────────────────────────────────────────────────────────────────────────── */

.confirmation-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.confirmation-backdrop.is-open {
  display: flex;
}

.confirmation-modal {
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  width: 90%;
  max-width: 420px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: confirmation-slide-in 200ms ease;
}

@keyframes confirmation-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.confirmation-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--sidebar-border);
}

.confirmation-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.confirmation-body {
  padding: 16px 24px;
  flex: 1;
}

.confirmation-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--sidebar-text);
  letter-spacing: 0.01em;
}

.confirmation-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid var(--sidebar-border);
}

.confirmation-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 160ms ease;
  min-width: 100px;
  text-align: center;
}

.confirmation-btn--cancel {
  background: transparent;
  color: var(--sidebar-text);
  border: 1px solid var(--sidebar-border);
}

.confirmation-btn--cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--sidebar-muted);
}

.confirmation-btn--cancel:focus {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: 2px;
}

.confirmation-btn--confirm {
  background: var(--sidebar-accent);
  color: #fff;
}

.confirmation-btn--confirm:hover {
  filter: brightness(1.1);
}

.confirmation-btn--confirm:focus {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: 2px;
  opacity: 0.9;
}

/* Danger variant for destructive actions */
.confirmation-modal.is-danger .confirmation-btn--confirm,
.confirmation-btn.is-danger {
  background: #e85d5d;
}

.confirmation-modal.is-danger .confirmation-btn--confirm:hover,
.confirmation-btn.is-danger:hover {
  background: #f06060;
  filter: none;
}

/* Focus visible styling for accessibility */
.confirmation-btn:focus-visible {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: 2px;
}

/* Hide rotation and reset controls in the lake preview while keeping
   their DOM and event handlers intact. Reversible and non-destructive. */
#rotate-left,
#rotate-right,
#reset-app-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}