/* Moduł export repozytorium assets (kopia w projekcie: public/assets/export – nie edytować, zmiany w assets).
   Przycisk „PNG” (.export-btn) i menu formatów (.export-menu z attachExportMenu) na zmiennych CSS projektu.
   Rodzic przycisku musi mieć position: relative / absolute (menu otwiera się pod przyciskiem, do lewej krawędzi);
   klasa rodzica .export-up – menu w górę, .export-end – wyrównane do prawej.
   Dopasowanie bez nadpisywania reguł – zmienne --export-*:
     --export-surface (--surface)   --export-ink (--ink)       --export-ink-2 (--ink-2)   --export-muted (--muted)
     --export-line (--line-2)       --export-hover (--surface-2) --export-radius (--radius-sm)  --export-shadow (--shadow)
     --export-font (--font)         --export-menu-width (320px) */

.export-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35em .7em; border-radius: var(--export-radius, var(--radius-sm, 8px)); cursor: pointer;
  font: 600 .74rem/1.2 var(--export-font, var(--font, inherit)); color: var(--export-ink-2, var(--ink-2, #52514e));
  background: var(--export-surface, var(--surface, #fff)); border: 1px solid var(--export-line, var(--line-2, #d6d5ce));
  box-shadow: var(--export-shadow, var(--shadow, none));
}
.export-btn:hover { color: var(--export-ink, var(--ink, #0b0b0b)); }
.export-btn:disabled { opacity: .6; cursor: progress; }
.export-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.export-btn .caret { width: 12px; height: 12px; margin-left: -.1rem; transition: transform .15s; }
.export-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.export-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: max-content;
  max-width: min(var(--export-menu-width, 320px), calc(100vw - 48px));
  display: grid; padding: 4px; border-radius: var(--export-radius, var(--radius-sm, 8px));
  background: var(--export-surface, var(--surface, #fff)); border: 1px solid var(--export-line, var(--line-2, #d6d5ce));
  box-shadow: var(--export-shadow, var(--shadow, 0 8px 24px -12px rgba(0, 0, 0, .25)));
}
.export-menu[hidden] { display: none; }
/* Przycisk przy dolnej krawędzi (np. w rogu mapy) – menu otwiera się w górę; od prawej – do prawej krawędzi */
.export-up > .export-menu { top: auto; bottom: calc(100% + 6px); }
.export-end > .export-menu { left: auto; right: 0; }
.export-menu button {
  display: grid; gap: 1px; text-align: left; padding: .5em .7em; border: 0;
  border-radius: calc(var(--export-radius, var(--radius-sm, 8px)) - 2px);
  background: none; color: var(--export-ink, var(--ink, #0b0b0b)); font: 600 .8rem/1.3 var(--export-font, var(--font, inherit)); cursor: pointer;
}
.export-menu small { font-weight: 400; font-size: .72rem; color: var(--export-muted, var(--muted, #6b6964)); }
.export-menu small:empty { display: none; }
.export-menu button:hover, .export-menu button:focus-visible {
  background: var(--export-hover, var(--surface-2, color-mix(in srgb, currentColor 6%, transparent))); outline: none;
}