/* =========================================================================
   PRETENDE — Mapa realizacji · style
   RTL-ready: wyłącznie logical properties (inline-start/end), layout
   przełącza się automatycznie po ustawieniu dir="rtl" na <html>.
   ========================================================================= */

/* ---------- Fonty marki (fallback: Archivo z Google Fonts) ---------- */
@font-face {
  font-family: 'Sequel Black';
  src: url('https://pretende.com/fonts/sequel-sans-black-head.ttf') format('truetype');
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: 'Sequel Light';
  src: url('https://pretende.com/fonts/Sequel-Sans-Light-Disp.ttf') format('truetype');
  font-weight: 300; font-display: swap;
}

:root {
  /* motyw ciemny („szyldy nocą") — dostępny przełącznikiem */
  --bg: #04060a;
  /* panele są prawie kryjące i BEZ backdrop-filter: rozmycie tła nad stale
     animowaną kanwą WebGL jest drogie, a w przeskalowanej ramce (iframe /
     transform: scale) Chrome rysuje je w złym rozmiarze — rozmyty pas obok panelu */
  --panel: rgba(10, 13, 18, 0.94);
  --panel-solid: #0b0e13;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f4f5f6;
  --text-dim: rgba(244, 245, 246, 0.55);
  --glow: #ffc866;          /* akcent — ciepłe światło szyldu */
  --glow-soft: rgba(255, 200, 102, 0.35);
  --mk-project: #ffc866;    /* znaczniki legendy/list */
  --mk-branch: #8ad8ff;
  --mk-hq: #ffffff;
  --input-bg: rgba(255, 255, 255, 0.06);
  --hover-bg: rgba(255, 255, 255, 0.07);
  --active-bg: rgba(255, 255, 255, 0.10);
  --thumb-bg: #10141b;
  --shadow-panel: 0 18px 60px rgba(0, 0, 0, 0.55);
  --head: 'Sequel Black', 'Archivo Black', 'Archivo', 'Noto Sans Arabic', system-ui, sans-serif;
  --body: 'Sequel Light', 'Archivo', 'Noto Sans Arabic', system-ui, sans-serif;
  --radius: 14px;
  --sidebar-w: 380px;
}

/* ---------- MOTYW JASNY — domyślny, spójny z pretende.com ----------
   (biel #f9fafa, czerń #0c0c0c, cienkie linie, akcent brąz/mosiądz
   jak patynowane litery z realizacji PRETENDE) */
[data-theme="light"] {
  --bg: #f9fafa;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-solid: #ffffff;
  --line: rgba(12, 12, 12, 0.10);
  --line-strong: rgba(12, 12, 12, 0.26);
  --text: #0c0c0c;
  --text-dim: rgba(12, 12, 12, 0.55);
  --glow: #a5793a;          /* brąz / mosiądz */
  --glow-soft: rgba(165, 121, 58, 0.45);
  --mk-project: #0c0c0c;
  --mk-branch: #0c0c0c;
  --mk-hq: #a5793a;
  --input-bg: rgba(12, 12, 12, 0.045);
  --hover-bg: rgba(12, 12, 12, 0.05);
  --active-bg: rgba(12, 12, 12, 0.08);
  --thumb-bg: #e9ebed;
  --shadow-panel: 0 14px 44px rgba(12, 12, 12, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

#app { position: fixed; inset: 0; }

/* ============================== MAPA ============================== */
#map {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 800px at 68% 42%, rgba(60, 90, 140, 0.16), transparent 60%),
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.5), transparent 40%),
    radial-gradient(1.6px 1.6px at 84% 12%, rgba(255,255,255,.4), transparent 40%),
    radial-gradient(1.4px 1.4px at 22% 78%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(2px 2px at 74% 84%, rgba(255,255,255,.3), transparent 40%),
    radial-gradient(1.4px 1.4px at 46% 8%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(1.2px 1.2px at 92% 56%, rgba(255,255,255,.3), transparent 40%),
    var(--bg);
}
[data-theme="light"] #map {
  background: radial-gradient(1100px 720px at 66% 44%, rgba(165, 121, 58, 0.06), transparent 60%), var(--bg);
}
/* motyw satelitarny: głęboka czerń kosmosu wokół globu */
[data-theme="earth"] #map { background: #000004; }
.maplibregl-canvas { outline: none; }
.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--panel-solid) 60%, transparent) !important;
  color: var(--text-dim); font-size: 10px; border-radius: 6px 0 0 0;
}
.maplibregl-ctrl-attrib a { color: var(--text-dim) !important; }

/* Kontrolki zoom — pod topbarem, inaczej wchodzą pod przełącznik języka */
.maplibregl-ctrl-top-right { margin-block-start: 64px; }

.maplibregl-ctrl-group {
  background: var(--panel) !important; border: 1px solid var(--line);
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.45) !important;
}
.maplibregl-ctrl-group button { background: transparent !important; width: 34px; height: 34px; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) opacity(.85); }
[data-theme="light"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: opacity(.8); }

/* ============================== INTRO ============================== */
#intro {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
  background: radial-gradient(900px 600px at 50% 46%, rgba(8, 12, 20, 0.25), rgba(4, 6, 10, 0.88));
  transition: opacity .9s ease, visibility .9s;
  padding: 24px;
}
[data-theme="light"] #intro {
  background: radial-gradient(900px 600px at 50% 46%, rgba(255, 255, 255, 0.35), rgba(249, 250, 250, 0.94));
}
#intro.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#intro .brand {
  font-family: var(--head); letter-spacing: .42em; font-size: 13px;
  color: var(--text-dim); text-transform: uppercase;
  padding-inline-start: .42em; /* kompensacja letter-spacing przy wyśrodkowaniu */
}
#intro h1 {
  font-family: var(--head); text-transform: uppercase;
  font-size: clamp(30px, 6vw, 74px); line-height: 1.02; letter-spacing: .02em;
  text-wrap: balance;
}
#intro h1 .accent {
  display: block; color: transparent;
  -webkit-text-stroke: 1px var(--glow);
  text-shadow: 0 0 32px var(--glow-soft);
}
#intro p { color: var(--text-dim); max-width: 560px; font-size: 15px; }
#intro button {
  margin-top: 12px; font-family: var(--head); text-transform: uppercase;
  letter-spacing: .28em; font-size: 12px; color: var(--bg);
  background: var(--text); border: 0; border-radius: 999px;
  padding: 15px 34px 14px calc(34px + .28em); cursor: pointer;
  box-shadow: 0 0 42px var(--glow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
#intro button:hover { transform: translateY(-2px); box-shadow: 0 0 64px var(--glow-soft); }

/* ============================== TOPBAR ============================== */
#topbar {
  position: absolute; z-index: 40;
  inset-block-start: 0; inset-inline: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
#brandbox { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#brandbox .logo {
  font-family: var(--head); font-size: 19px; letter-spacing: .34em;
  text-transform: uppercase; white-space: nowrap;
}
#brandbox .logo em { font-style: normal; color: var(--glow); }
#brandbox .tag {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
#topbar .spacer { flex: 1; }

#langbox { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; }
#langbox button {
  font-family: var(--body); font-size: 12px; letter-spacing: .08em;
  color: var(--text-dim); background: transparent; border: 0;
  border-radius: 999px; padding: 6px 12px; cursor: pointer; text-transform: uppercase;
}
#langbox button.active { color: var(--bg); background: var(--text); font-weight: 700; }

/* ============================== SIDEBAR ============================== */
#sidebar {
  position: absolute; z-index: 30;
  inset-block-start: 78px; inset-inline-start: 18px;
  inline-size: var(--sidebar-w);
  max-block-size: calc(100% - 140px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  transition: transform .35s ease, opacity .35s ease;
}
#sidebar.collapsed { transform: translateX(calc(var(--sb-dir, -1) * (100% + 26px))); opacity: 0; pointer-events: none; }
[dir="rtl"] #sidebar { --sb-dir: 1; }

#sidebar header { padding: 18px 18px 12px; border-block-end: 1px solid var(--line); }
#sidebar header h2 {
  font-family: var(--head); font-size: 15px; letter-spacing: .22em; text-transform: uppercase;
}
#sidebar header .sub { font-size: 12px; color: var(--text-dim); margin-block-start: 4px; }

#searchwrap { position: relative; padding: 12px 14px 4px; }
#search {
  inline-size: 100%; font-family: var(--body); font-size: 14px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 38px 11px 14px;
  padding-inline-end: 38px; padding-inline-start: 14px;
  outline: none; transition: border-color .2s;
}
#search:focus { border-color: var(--glow-soft); }
#search::placeholder { color: var(--text-dim); }
#searchwrap .icon {
  position: absolute; inset-inline-end: 26px; inset-block-start: 24px;
  color: var(--text-dim); pointer-events: none; font-size: 14px;
}

#filters { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.f-row { display: flex; gap: 8px; }
.f-row > * { flex: 1; min-width: 0; }
.f-label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim); margin-block-end: 4px;
}
select {
  inline-size: 100%; font-family: var(--body); font-size: 13px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px; outline: none; cursor: pointer;
  appearance: none;
}
select:focus { border-color: var(--glow-soft); }
select option { background: var(--panel-solid); color: var(--text); }

/* przełączniki typów */
#typechips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: .04em; cursor: pointer; user-select: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px;
  color: var(--text-dim); background: var(--input-bg);
  transition: all .18s ease;
}
.chip .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; }
.chip[data-type="project"] .dot { background: var(--mk-project); box-shadow: 0 0 8px var(--glow); }
.chip[data-type="branch"]  .dot { background: transparent; border: 2px solid var(--mk-branch); }
.chip[data-type="hq"]      .dot { background: var(--mk-hq); box-shadow: 0 0 8px var(--glow-soft); }
.chip.active { color: var(--text); border-color: var(--line-strong); background: var(--active-bg); }

#clearbtn {
  align-self: flex-start; font-size: 11px; letter-spacing: .06em;
  color: var(--text-dim); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
#clearbtn:hover { color: var(--text); }

#stats {
  display: flex; gap: 14px; padding: 10px 18px;
  border-block-start: 1px solid var(--line); font-size: 11px; color: var(--text-dim);
}
#stats b { color: var(--glow); font-weight: 700; }

#resultlist { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 12px; }
#resultlist::-webkit-scrollbar { inline-size: 8px; }
#resultlist::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.r-item {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; border-radius: 10px; cursor: pointer;
  transition: background .15s ease;
}
.r-item:hover, .r-item.active { background: var(--hover-bg); }
.r-thumb {
  inline-size: 54px; block-size: 42px; border-radius: 8px; object-fit: cover;
  background: var(--thumb-bg); flex-shrink: 0; border: 1px solid var(--line);
}
.r-meta { min-width: 0; flex: 1; }
.r-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-sub { font-size: 11.5px; color: var(--text-dim); margin-block-start: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-badge {
  flex-shrink: 0; inline-size: 9px; block-size: 9px; border-radius: 50%;
}
.r-badge.project { background: var(--mk-project); box-shadow: 0 0 8px var(--glow-soft); }
.r-badge.branch { background: transparent; border: 2px solid var(--mk-branch); }
.r-badge.hq { background: var(--mk-hq); box-shadow: 0 0 8px var(--glow-soft); }
.no-results { padding: 22px 16px; font-size: 13px; color: var(--text-dim); text-align: center; }

/* przycisk zwijania panelu */
#sbtoggle {
  position: absolute; z-index: 31;
  inset-block-start: 78px; inset-inline-start: 18px;
  inline-size: 44px; block-size: 44px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer;
  font-size: 17px;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
#sidebar.collapsed ~ #sbtoggle { display: flex; }

/* ============================== LEGENDA ============================== */
#legend {
  position: absolute; z-index: 25;
  inset-block-end: 18px; inset-inline-start: 18px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px; display: flex; gap: 16px; align-items: center;
  font-size: 11.5px; color: var(--text-dim);
}
#legend .li { display: flex; align-items: center; gap: 7px; }
#legend .dot { inline-size: 9px; block-size: 9px; border-radius: 50%; }
#legend .dot.project { background: var(--mk-project); box-shadow: 0 0 8px var(--glow-soft); }
#legend .dot.branch { background: transparent; border: 2px solid var(--mk-branch); }
#legend .dot.hq { background: var(--mk-hq); box-shadow: 0 0 8px var(--glow-soft); }

#demonote {
  position: absolute; z-index: 25; inset-block-end: 18px; inset-inline-end: 18px;
  font-size: 10px; letter-spacing: .08em; color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; text-transform: uppercase;
}

/* ============================== PANEL SZCZEGÓŁÓW ============================== */
#detail {
  position: absolute; z-index: 45;
  inset-block-start: 78px; inset-inline-end: 18px;
  inline-size: 400px; max-block-size: calc(100% - 120px);
  display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-panel);
  transform: translateX(calc(var(--dt-dir, 1) * (100% + 26px)));
  opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
[dir="rtl"] #detail { --dt-dir: -1; }
#detail.open { transform: none; opacity: 1; pointer-events: auto; }

#d-gallery { position: relative; block-size: 230px; background: var(--thumb-bg); flex-shrink: 0; }
#d-gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
#d-gallery .g-nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 36px; block-size: 36px; border-radius: 50%;
  background: rgba(5, 7, 10, 0.6); color: #fff; border: 1px solid var(--line);
  cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
#d-gallery .g-prev { inset-inline-start: 10px; }
#d-gallery .g-next { inset-inline-end: 10px; }
#d-gallery .g-dots {
  position: absolute; inset-block-end: 10px; inset-inline: 0;
  display: flex; gap: 6px; justify-content: center;
}
#d-gallery .g-dots i {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: background .2s, transform .2s;
}
#d-gallery .g-dots i.on { background: var(--glow); transform: scale(1.25); }
#d-close {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  inline-size: 34px; block-size: 34px; border-radius: 50%;
  background: rgba(5, 7, 10, 0.65); color: #fff; border: 1px solid var(--line);
  cursor: pointer; font-size: 15px; z-index: 2;
}
#d-typebadge {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(5,7,10,.65); border: 1px solid var(--line-strong); color: var(--text);
}
#d-typebadge.project { color: var(--glow); border-color: var(--glow-soft); }
#d-typebadge.branch { color: var(--branch); }

#d-body { padding: 18px; overflow-y: auto; }
#d-body::-webkit-scrollbar { inline-size: 8px; }
#d-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
#d-title { font-family: var(--head); font-size: 18px; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
#d-place { font-size: 13px; color: var(--text-dim); margin-block-start: 5px; }
#d-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 12px; }
#d-cats span {
  font-size: 11px; letter-spacing: .05em; color: var(--glow);
  border: 1px solid var(--glow-soft); border-radius: 999px; padding: 4px 10px;
}
#d-desc { font-size: 13.5px; line-height: 1.65; color: rgba(244,245,246,.82); margin-block-start: 14px; }
#d-facts { margin-block-start: 14px; display: flex; flex-direction: column; gap: 7px; }
#d-facts .fact { display: flex; gap: 10px; font-size: 12.5px; }
#d-facts .fact b { color: var(--text-dim); font-weight: 400; min-inline-size: 92px; }

#d-siblings { margin-block-start: 16px; border-block-start: 1px solid var(--line); padding-block-start: 12px; }
#d-siblings h4 {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim); margin-block-end: 8px; font-weight: 400;
}
#d-siblings .s-item {
  display: flex; align-items: center; gap: 10px; padding: 8px; margin-inline: -8px;
  border-radius: 8px; cursor: pointer; font-size: 13px;
}
#d-siblings .s-item:hover { background: var(--hover-bg); }
#d-siblings .s-item img { inline-size: 40px; block-size: 32px; border-radius: 6px; object-fit: cover; }
#d-siblings .s-item.current { opacity: .45; pointer-events: none; }

/* ============================== MOBILE ============================== */
#mfab {
  display: none; position: absolute; z-index: 41;
  inset-block-end: 20px; inset-inline-end: 16px;
  inline-size: 54px; block-size: 54px; border-radius: 50%;
  background: var(--text); color: var(--bg); border: 0; font-size: 20px;
  box-shadow: 0 8px 30px var(--glow-soft); cursor: pointer;
}

/* przełącznik motywu */
#themetoggle {
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
#themetoggle:hover { border-color: var(--line-strong); }

@media (max-width: 860px) {
  :root { --sidebar-w: 100%; }

  #topbar { padding: 10px 12px; gap: 8px; }
  #brandbox { min-width: 0; overflow: hidden; }
  #brandbox .logo { font-size: 15px; letter-spacing: .22em; }
  #brandbox .tag { display: none; }
  #langbox, #themetoggle { flex-shrink: 0; }
  .maplibregl-ctrl-top-right { margin-block-start: 56px; }

  /* sidebar = dolny arkusz */
  #sidebar {
    inset-block-start: auto; inset-block-end: 0; inset-inline: 0;
    inline-size: 100%; max-block-size: 72%;
    border-radius: 18px 18px 0 0; border-inline: 0; border-block-end: 0;
  }
  #sidebar.collapsed { transform: translateY(calc(100% + 10px)); opacity: 0; }
  #sidebar::before {
    content: ''; display: block; inline-size: 44px; block-size: 4px;
    background: var(--line-strong); border-radius: 2px; margin: 10px auto 0;
  }
  #sbtoggle { display: none !important; }
  #mfab { display: block; }

  #legend { inset-block-end: 86px; inset-inline-start: 12px; flex-wrap: wrap; gap: 10px; max-inline-size: 60%; padding: 8px 10px; }
  #demonote { inset-block-end: 86px; inset-inline-end: 84px; display: none; }

  /* detail = pełny dolny arkusz nad sidebar */
  #detail {
    inset-block-start: auto; inset-block-end: 0; inset-inline: 0;
    inline-size: 100%; max-block-size: 82%;
    border-radius: 18px 18px 0 0;
    transform: translateY(calc(100% + 10px));
  }
  #detail.open { transform: none; }
  #d-gallery { block-size: 200px; }
}

@media (max-width: 400px) {
  #langbox button { padding: 5px 9px; font-size: 11px; }
}

/* redukcja animacji */
@media (prefers-reduced-motion: reduce) {
  #sidebar, #detail, #intro { transition: none; }
}