/* Project detail page: tab chrome + opci-podaci panel. Table/map styles come from land-purchases.css. */

/* --- Copy link button --- */
.copy-link-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--muted);
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.copy-link-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-link-btn.copied { color: #166534; border-color: #166534; }
.copy-link-btn svg { flex-shrink: 0; }

/* --- Tabs --- */
.tabs {
  display: flex;
  background: #fff;
  border-bottom: 2px solid var(--border);
  padding: 0 .5rem;
  gap: .15rem;
  overflow-x: auto;          /* scroll tabs on narrow screens rather than wrapping */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.tab-btn {
  padding: .5rem .9rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  cursor: pointer;
  font-size: .9rem;
  color: var(--muted);
  border-radius: 4px 4px 0 0;
}
.tab-btn:hover { color: var(--fg); background: #f3f4f6; }
/* Active tab visually MERGES with the panel below it: white background matching
   content, accent line on top as the indicator, bottom border in white to "erase"
   the parent's grey separator at the active tab's position. Inactive tabs still
   sit above the line. */
.tab-btn.active {
  color: var(--accent);
  font-weight: 600;
  background: #fff;
  border-top: 2px solid var(--accent);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom-color: #fff;
  border-radius: 4px 4px 0 0;
}
/* Unread tab — green left bar mirroring the index-page unread row treatment.
   Cleared by clicking the tab (writes the server's last_update to localStorage). */
.tab-btn.unread { box-shadow: inset 3px 0 0 0 #16a34a; }

/* --- Placeholders for tabs not yet implemented --- */
.tab-placeholder {
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: .95rem;
}

/* --- Opći podaci tab --- */
.opci-body {
  padding: 1rem;
  max-width: 48rem;
}
.project-hero-link {
  display: block;
  margin: 0 0 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}
.project-hero {
  display: block;
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
}
.eu-project-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.eu-project-list li {
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.eu-project-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.eu-project-list a:hover { text-decoration: underline; }
.eu-project-meta {
  display: block;
  margin-top: .2rem;
  font-size: .8rem;
  color: var(--muted);
}
.subscribe-box {
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f3f4f6;
  opacity: .75;
}
.subscribe-box p { margin: 0 0 .65rem; }
.subscribe-form {
  display: flex;
  gap: .5rem;
}
.subscribe-form input,
.subscribe-form button {
  padding: .55rem .7rem;
  border-radius: 6px;
  font: inherit;
}
.subscribe-form input {
  flex: 1;
  border: 1px solid #d1d5db;
  background: #e5e7eb;
  color: #6b7280;
}
.subscribe-form button {
  border: 1px solid #d1d5db;
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}
.opci-body h3 {
  margin: 1.25rem 0 .4rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.opci-body h3:first-child { margin-top: 0; }
.alias-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
}
.alias-list li {
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: .75rem;
  align-items: baseline;
}
.alias-list code {
  font-family: ui-monospace, monospace;
  background: #f3f4f6;
  padding: .1rem .35rem;
  border-radius: 3px;
  font-size: .82rem;
  flex-shrink: 0;
}
.alias-meta {
  color: var(--muted);
  font-size: .78rem;
}

/* --- EOJN tab --- */
.eojn-body { padding: .5rem 0; }
.eojn-summary { padding: .5rem 1rem; font-size: .85rem; color: var(--muted); margin: 0; }
.eojn-table {
  width: 100%;
  /* On narrow screens we don't want columns squeezed below readability. The
     wrapper (.table-scroll) already does horizontal overflow, so giving the
     table a min-width lets columns reach a comfortable size and forces the
     user to swipe horizontally instead of squinting at squashed numbers. */
  min-width: 60rem;
  border-collapse: collapse;
  font-size: .85rem;
  background: #fff;
  table-layout: auto;
}
.eojn-table th, .eojn-table td {
  padding: .45rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.eojn-table th {
  font-weight: 600;
  font-size: .78rem;
  color: var(--muted);
  background: #f3f3f3;
  position: sticky;
  top: 0;
  white-space: nowrap;
}
.eojn-table th[data-sort] { cursor: pointer; user-select: none; }
.eojn-table th[data-sort]:hover { color: var(--accent); }
.eojn-table th .sort-arrow { margin-left: .25rem; opacity: .5; }
.eojn-table th.sorted .sort-arrow { opacity: 1; color: var(--accent); }
.eojn-table .date, .eojn-table .num { white-space: nowrap; }
.eojn-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.eojn-table .eojn-src { font-size: .75rem; }
.eojn-table .eojn-src abbr { text-decoration: none; cursor: help; border-bottom: 1px dotted var(--muted); }
.eojn-table a.eojn-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.eojn-table a.eojn-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.eojn-err { color: #991b1b; }
.eojn-amend-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .35rem;
  font-size: .68rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
tr.eojn-amended { opacity: .75; }

/* The EOJN tab has no map above it, so its table should fill the remaining viewport
   instead of inheriting the 60vh cap from land-purchases.css's .table-scroll. */
#tab-eojn .table-scroll { max-height: none; }

/* --- Swim-lanes overview on Opći podaci tab (one lane per data source) --- */
.swim-lanes {
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: .6rem .75rem .75rem;
  max-width: 48rem;
}
.swim-loading {
  font-size: .85rem;
  color: var(--muted);
  padding: .35rem 0;
}
.swim-axis {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  height: 1.1rem;
  margin-bottom: .25rem;
}
.swim-axis-spacer {
  flex: 0 0 5.5rem;       /* matches the lane label column */
}
.swim-axis-track {
  position: relative;
  flex: 1;
  height: 100%;
  border-bottom: 1px solid var(--border);
}
.swim-year-mark {
  position: absolute;
  bottom: 0;
  font-size: .7rem;
  color: var(--muted);
  transform: translateX(-50%);
  background: #fff;
  padding: 0 .15rem;
  font-variant-numeric: tabular-nums;
}
.swim-today-label {
  position: absolute;
  top: -.1rem;
  transform: translateX(-50%);
  font-size: .65rem;
  color: #dc2626;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 3px;
  padding: 0 .25rem;
  white-space: nowrap;
}
.swim-lane {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 1.6rem;
  margin: 1px 0;
}
.swim-label {
  flex: 0 0 5.5rem;
  display: flex;
  flex-direction: column;
  font-size: .72rem;
  line-height: 1;
  color: var(--muted);
}
.swim-label-name {
  font-weight: 600;
  color: var(--fg);
  font-size: .8rem;
  margin-bottom: .1rem;
}
.swim-label-meta {
  font-size: .68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.swim-track {
  position: relative;
  flex: 1;
  height: 100%;
  background: #f8fafc;
  border-radius: 3px;
  overflow: hidden;
}
.swim-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  z-index: 3;
  cursor: help;
}
.swim-bar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: #8b5cf6;
  border-radius: 3px;
  z-index: 2;
  cursor: help;
  min-width: 2px;
  opacity: .85;
}
.swim-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: .7rem;
  color: #cbd5e1;
}
.swim-year-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e5e7eb;
  z-index: 1;
  pointer-events: none;
}
.swim-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dc2626;
  z-index: 4;
  pointer-events: none;
  opacity: .7;
}
/* Bulldozer glyph for Prijava početka građenja in the Akti lane — same positioning
   contract as .swim-dot (centered horizontally), but rendered as an emoji at a size
   that fits the 14px swim-track height. */
.swim-akt-icon {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  line-height: 1;
  z-index: 3;
  cursor: help;
  pointer-events: auto;
}
/* Vertical line per MGIPU akt date — yellow, thinner than the today marker, rendered
   above year guides and parcel dots so it stays visible across all swim lanes. */
.swim-akt-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #eab308;
  z-index: 4;
  pointer-events: none;
  opacity: .85;
}
/* Land-purchase row in the "geocoding pending" state — the table renders straight
   from quick-pass parcel numbers, then switches to the real geocoded hits when the
   slow pass finishes. Row stays full-opacity so the user can read the data; only the
   click-to-zoom affordance is suppressed (cursor + pointer-events on the row) and a
   small ⌛ next to the parcel number signals "lat/lng not in yet". */
#purchases-tbody tr.row-loading { cursor: default; pointer-events: none; }
#purchases-tbody tr.row-loading .zkc-num::after {
  content: ' ⌛';
  font-size: .7em;
  vertical-align: middle;
  opacity: .8;
}

/* UPU dokumentacija block on Opći podaci — one row per UPU alias on the project,
   showing status / godina donosenja / Glasnik reference + a deep-link to the
   Zagreb geoportal. Glasilo strings (e.g. "SGGZ 6/05, 9/07") are kept verbatim;
   the link prefills the geoportal Karta search box with the UPU naziv. */
.upu-doc-list { list-style: none; padding: 0; margin: .25rem 0 1rem; }
.upu-doc-list li { padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.upu-doc-list li:last-child { border-bottom: none; }
.upu-doc-meta { color: var(--muted); font-size: .78rem; }
.upu-doc-list a { color: var(--accent); text-decoration: none; }
.upu-doc-list a:hover { text-decoration: underline; }

/* "Zadnja aktivnost: …" label sits on the same row as the "Natrag na projekte" link
   in the header, right-aligned. .backlink-row is a flex container with the link on the
   left and this label on the right; both shrink to nowrap on mobile. */
.backlink-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .4rem;
}
.backlink-row .backlink { margin: 0; }
.last-activity {
  font-size: .82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 600px) { .last-activity { font-size: .72rem; } }

@media (max-width: 639px) {
  .swim-lanes { padding: .5rem .5rem .6rem; max-width: 100%; }
  .swim-axis-spacer { flex: 0 0 3.5rem; }
  .swim-label { flex: 0 0 3.5rem; }
  .swim-label-name { font-size: .72rem; }
  .swim-label-meta { font-size: .62rem; }
  .swim-lane { height: 1.4rem; }
  .swim-year-mark { font-size: .62rem; }
}

/* --- EOJN Gantt chart (one bar per contract with both signed_date and end_date) --- */
.eojn-gantt {
  padding: .5rem 1rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.eojn-gantt-title {
  margin: 0 0 .4rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.gantt-axis {
  position: relative;
  height: 1rem;
  margin-bottom: .15rem;
  border-bottom: 1px solid var(--border);
}
.gantt-year-mark {
  position: absolute;
  bottom: 0;
  font-size: .72rem;
  color: var(--muted);
  transform: translateX(-50%);
  padding: 0 .2rem;
  background: #fff;
  font-variant-numeric: tabular-nums;
}
.gantt-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gantt-row {
  position: relative;
  height: 1.4rem;
  background: #f8fafc;
  border-radius: 3px;
  cursor: pointer;
}
.gantt-row:hover { background: #eff6ff; }
.gantt-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 .35rem;
  overflow: hidden;
  font-size: .72rem;
  color: #fff;
  white-space: nowrap;
  min-width: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.gantt-bar-label {
  text-overflow: ellipsis;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.gantt-year-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  z-index: 1;
  pointer-events: none;
}
.gantt-today-line {
  position: absolute;
  top: -1.15rem;          /* extend up into the axis to label "danas" implicitly */
  bottom: 0;
  width: 2px;
  background: #dc2626;
  z-index: 4;
  pointer-events: none;
}
.gantt-today-line::before {
  content: 'danas';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: .65rem;
  color: #dc2626;
  background: #fff;
  padding: 0 .25rem;
  border: 1px solid #fecaca;
  border-radius: 3px;
  white-space: nowrap;
}
.eojn-table tr.highlight {
  background: #fef9c3;
  transition: background 1.5s;
}

@media (max-width: 639px) {
  .eojn-gantt { padding: .4rem .5rem .8rem; }
  .gantt-row { height: 1.2rem; }
  .gantt-bar { font-size: .68rem; padding: 0 .25rem; }
  .gantt-year-mark { font-size: .65rem; }
}

/* --- Ostale isplate tab --- */
.ostale-body { padding: .5rem 0; }
.ostale-summary { padding: .5rem 1rem; font-size: .85rem; color: var(--muted); margin: 0; }
.ostale-table {
  width: 100%;
  /* Same min-width as .eojn-table — wrapper .table-scroll handles horizontal
     overflow on phones so columns don't get squeezed below readability. */
  min-width: 60rem;
  border-collapse: collapse;
  font-size: .85rem;
  background: #fff;
  table-layout: auto;
}
.ostale-table th, .ostale-table td {
  padding: .45rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  /* Allow long words and tokens to wrap rather than push the column wider. */
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.ostale-table th {
  font-weight: 600;
  font-size: .78rem;
  color: var(--muted);
  background: #f3f3f3;
  position: sticky;
  top: 0;
  white-space: nowrap;
}
.ostale-table th[data-sort] { cursor: pointer; user-select: none; }
.ostale-table th[data-sort]:hover { color: var(--accent); }
.ostale-table th .sort-arrow { margin-left: .25rem; opacity: .5; }
.ostale-table th.sorted .sort-arrow { opacity: 1; color: var(--accent); }
/* Keep dates/amounts on one line — the numbers themselves should never wrap mid-digit. */
.ostale-table .date, .ostale-table .num { white-space: nowrap; }
.ostale-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ostale-table .k-code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  background: #eef2ff;
  color: #3730a3;
  padding: 0 .3rem;
  border-radius: 3px;
  margin-right: .25rem;
}
#tab-ostale .table-scroll { max-height: none; }

/* Otkup tab: no taxonomy-stats bar, filter controls simpler */
#table-section #filter-count {
  margin-left: auto;
  font-size: .8rem;
  color: var(--muted);
}

/* --- Monitor labels (above the table) --- */
.monitor-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  font-size: .82rem;
  background: #f0f9ff;
  border-bottom: 1px solid #bae6fd;
}
.monitor-label-prefix {
  color: var(--muted);
  font-weight: 500;
}
.monitor-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #fff;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: .1rem .4rem;
}
.monitor-chip a { color: var(--accent); text-decoration: none; }
.monitor-chip a:hover { text-decoration: underline; }
.monitor-ssc {
  font-size: .75rem;
  color: var(--muted);
  padding: 0 .2rem;
  border-left: 1px solid var(--border);
}
.overlay-legend { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; font-size: .75rem; color: var(--muted); }
.overlay-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.overlay-legend-dot.city        { background: #2c6bed; }
.overlay-legend-dot.government  { background: #0891b2; }
.overlay-legend-dot.institution { background: #7c3aed; }
.overlay-legend-dot.company     { background: #d97706; }
.overlay-legend-dot.private     { background: #d64545; }
.overlay-legend-dot.unknown     { background: #9ca3af; }
/* legacy alias kept in case some other view still emits .other */
.overlay-legend-dot.other       { background: #d64545; }
.overlay-legend-dot.owner-matched { background: #facc15; border: 1px solid #713f12; box-sizing: border-box; }
.overlay-legend-dot.zabiljezba { background: #5eead4; border: 1px solid #0d9488; box-sizing: border-box; }
.popup-zabiljezba { margin-top: .25rem; padding: .2rem .35rem; background: #ccfbf1; color: #115e59; border-radius: 3px; font-size: .78rem; }

/* --- Mobile tweaks (<640px) --- */
@media (max-width: 639px) {
  .copy-link-btn { padding: .25rem .5rem; font-size: .72rem; }
  .copy-link-btn svg { width: 14px; height: 14px; }
  #copy-link-label { display: none; }             /* icon-only on tight headers */
  .tab-btn { padding: .45rem .6rem; font-size: .82rem; }
  .opci-body { padding: .75rem; }
  .subscribe-form { flex-direction: column; }
  .timeline { grid-template-columns: 1fr auto; font-size: .82rem; }
  .eojn-table { font-size: .78rem; }
  .eojn-table th, .eojn-table td { padding: .35rem .4rem; }
}

/* --- SSC links in Opći podaci (legacy class — kept for any remaining users) --- */
.ssc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
}
.ssc-list li { padding: .25rem 0; }
.ssc-list a { color: var(--accent); }

/* External-link buttons (Javni natječaj, Skyscrapercity diskusija) — compact
   outlined buttons stacked in a flex-wrap row at the bottom of Opći podaci. */
.link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}
.link-btn {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: .85rem;
  color: var(--accent);
  background: #fff;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.link-btn:hover { background: var(--accent); color: #fff; }

/* --- Vremenski pregled (timeline) in Opći podaci --- */
.timeline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem .75rem;
  font-size: .88rem;
  max-width: 28rem;
}
.timeline .tl-row {
  display: contents;
}
.timeline .tl-label {
  color: var(--muted);
}
.timeline .tl-val {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.progress-section {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 32rem;
}
.progress-track {
  position: relative;
  width: 100%;
  height: .65rem;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: visible;
}
.progress-track.overdue .progress-elapsed {
  background: #dc2626;
  border-radius: 999px;
}
.progress-elapsed {
  height: 100%;
  border-radius: 999px;
  background: #2563eb;
}
.progress-today-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2563eb;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
.progress-dates {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--muted);
}
.progress-date-end { text-align: right; }
.progress-overdue { color: #dc2626; font-weight: 600; }

/* --- Walk-mode launcher on the Otkup/Parcele map ---
   Floats over the bottom-center of the Leaflet map. Yellow fill mirrors the equivalent
   button in consensus-builder; click opens zagreb.lol/prijevoz in walk mode at the
   project's centroid (polygon centroid preferred, project lat/lng as fallback). */
#map-walk-btn.map-walk-btn {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: #fdd835;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  padding: 6px 8px;
  min-width: 40px;
  min-height: 36px;
  box-sizing: border-box;
  color: #1a1a1a;
  cursor: pointer;
  line-height: 0;
}
#map-walk-btn.map-walk-btn[hidden] { display: none !important; }
#map-walk-btn.map-walk-btn:not([hidden]) { display: inline-flex; }
#map-walk-btn.map-walk-btn:hover { background: #fbc02d; }
#map-walk-btn.map-walk-btn:active { background: #f9a825; }
#map-walk-btn.map-walk-btn:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

/* --- 3D fly-through launcher ---
   Sits next to the walking-man, opens zagreb-3d with the project polygon shown
   as translucent upward rays. Same shape/size as the walk button so the pair
   reads as a related "explore in another mode" cluster. */
#map-3d-btn.map-3d-btn {
  position: absolute;
  left: calc(50% + 28px);
  bottom: 12px;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: #ffe082;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  padding: 6px 10px;
  min-height: 36px;
  box-sizing: border-box;
  color: #1a1a1a;
  cursor: pointer;
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
}
#map-3d-btn.map-3d-btn[hidden] { display: none !important; }
#map-3d-btn.map-3d-btn:not([hidden]) { display: inline-flex; }
#map-3d-btn.map-3d-btn:hover { background: #ffd54f; }
#map-3d-btn.map-3d-btn:active { background: #ffca28; }
#map-3d-btn.map-3d-btn:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.map-3d-btn__label { font-size: 13px; font-weight: 700; }