/* ============================================================
   MINKSPIRE — design system „Inkowie i Majowie" v2
   Warstwy: 1) zmienne  2) tło i ornamenty  3) komponenty
            4) mikro-animacje  5) dostępność
   ============================================================ */

:root {
  /* Pergamin i kamień */
  --paper: #f8f6ec;
  --paper-2: #f3f0e2;
  --mist: #e6e7db;
  --line: #dfe2d8;
  --line-2: #c6cabb;
  --ink: #22271f;
  --ink-soft: #4c5142;
  --ink-mute: #656b58; /* było #848a75 — za mały kontrast (~3:1) na pergaminie */
  /* Barwniki tkanin */
  --gold: #c8971f;
  --gold-2: #e7c266;
  --gold-deep: #8c6714;
  --gold-carved: #6b4f11; /* etykiety font-carved */
  --terra: #a34726;
  --cochi: #9e2c47;
  --jade: #2f6f4c;
  --jade-deep: #245740;
  --sky: #1f7280;
  --violet: #5a457e;
  /* Las nocny (nagłówek, brama) */
  --forest-hi: #264234;
  --forest: #182a20;
  --forest-lo: #101d16;
  /* Cienie */
  --shadow-card: 0 1px 2px rgba(27,30,24,.06), 0 10px 24px -14px rgba(54,41,28,.45);
  --shadow-card-hov: 0 2px 4px rgba(27,30,24,.08), 0 18px 34px -14px rgba(54,41,28,.5);
  --shadow-deep: 0 24px 50px -20px rgba(8,18,12,.7);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Czcionki w całej aplikacji o ~10% większe (skala korzenia rem). */
html { font-size: 110%; }

/* Aplikacja wypełnia szerokość ekranu — bez poziomego przewijania. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ------------------------------------------------------------
   TŁO: mgielny kamień + tarasy + pieczęć chakany + poświata
   ------------------------------------------------------------ */
.paper-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--mist);
  background-image:
    radial-gradient(rgba(40, 60, 45, .05) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M0 48 L16 48 L16 32 L32 32 L32 16 L48 16 L48 32 L32 32' fill='none' stroke='%2340573f' stroke-opacity='0.06' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 5px 5px, 64px 64px;
}
/* Złota poświata świtu za pasem nagłówka. */
.paper-texture::before {
  content: "";
  position: absolute;
  top: -220px; left: 50%;
  width: min(1200px, 120vw); height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top, rgba(200,151,31,.14), transparent 65%);
}
/* Wielka, subtelna pieczęć chakany w tle — górny-prawy róg. */
.paper-texture::after {
  content: "";
  position: absolute;
  top: -150px; right: -150px;
  width: 540px; height: 540px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon points='18,42 30,42 30,36 36,36 36,30 42,30 42,18 36,18 36,12 30,12 30,6 18,6 18,12 12,12 12,18 6,18 6,30 12,30 12,36 18,36' fill='none' stroke='%2340573f' stroke-width='0.8'/%3E%3Ccircle cx='24' cy='24' r='5' fill='none' stroke='%2340573f' stroke-width='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: .05;
}

/* Pasek przewijania — inkaskie złoto. */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #c3a15a; border-radius: 8px; }

/* Poziome paski: przewijanie palcem bez widocznego paska. */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------
   ORNAMENTY
   ------------------------------------------------------------ */
/* Pas nagłówka „andyjski las" — złoto na leśnym kamieniu, z tkaniną u dołu. */
.hdr-band {
  background: linear-gradient(180deg, #233a2e 0%, var(--forest) 60%, #12211a 100%);
  border: 1px solid #2c4536;
  box-shadow: 0 10px 26px -14px rgba(8,18,12,.8), inset 0 1px 0 rgba(231,194,102,.12);
  /* Przyklejony do góry + wypełnia obszar paska stanu (safe-area) ciemnym pasem,
     zamiast kremowej luki. Wymaga viewport-fit=cover (base.html). */
  position: sticky;
  top: 0;
  z-index: 30;
  margin-top: calc(-1 * env(safe-area-inset-top));
  padding-top: calc(10px + env(safe-area-inset-top));
}
.hdr-band::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 5px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='8' viewBox='0 0 72 8'%3E%3Cpath d='M0 7 L6 1 L12 7 Z' fill='%23a34726'/%3E%3Cpath d='M12 7 L18 1 L24 7 Z' fill='%23c8971f'/%3E%3Cpath d='M24 7 L30 1 L36 7 Z' fill='%232f6f4c'/%3E%3Cpath d='M36 7 L42 1 L48 7 Z' fill='%231f7280'/%3E%3Cpath d='M48 7 L54 1 L60 7 Z' fill='%235a457e'/%3E%3Cpath d='M60 7 L66 1 L72 7 Z' fill='%239e2c47'/%3E%3C/svg%3E") repeat-x center/72px 8px;
  opacity: .9;
}

/* „Tkanina andyjska" — kolorowy, stonowany pas — ozdobny separator. */
.greca {
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cpath d='M0 13 L6 3 L12 13 Z' fill='%23a34726'/%3E%3Cpath d='M12 13 L18 3 L24 13 Z' fill='%23c8971f'/%3E%3Cpath d='M24 13 L30 3 L36 13 Z' fill='%232f6f4c'/%3E%3Cpath d='M36 13 L42 3 L48 13 Z' fill='%231f7280'/%3E%3Cpath d='M48 13 L54 3 L60 13 Z' fill='%235a457e'/%3E%3Cpath d='M60 13 L66 3 L72 13 Z' fill='%239e2c47'/%3E%3Crect y='12.4' width='72' height='1.6' fill='%231d4534'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 72px 14px;
  opacity: .88;
}

/* Meander schodkowy Majów (greca escalonada) — cienki separator sekcji. */
.stepfret {
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 9 L0 5 L4 5 L4 1 L12 1 L12 5 L8 5 L8 9 Z M20 9 L20 5 L24 5 L24 1 L32 1 L32 5 L28 5 L28 9 Z' fill='none' stroke='%23a08b4f' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x center/40px 10px;
  opacity: .55;
}

/* Nagłówek strony: tytuł serif + schodkowe podkreślenie ze słońcem. */
.h-page { position: relative; padding-bottom: 12px; margin-bottom: 4px; }
.h-page::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 148px; height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='7' viewBox='0 0 148 7'%3E%3Cpath d='M0 6 L0 3 L8 3 L8 0 L24 0 L24 3 L16 3 L16 6 Z' fill='%23c8971f'/%3E%3Cpath d='M32 6 L32 3 L40 3 L40 0 L56 0 L56 3 L48 3 L48 6 Z' fill='%23a34726'/%3E%3Cpath d='M64 6 L64 3 L72 3 L72 0 L88 0 L88 3 L80 3 L80 6 Z' fill='%232f6f4c'/%3E%3Ccircle cx='104' cy='3.5' r='3' fill='%23c8971f'/%3E%3Ccircle cx='116' cy='3.5' r='2' fill='%23a34726' fill-opacity='.7'/%3E%3Ccircle cx='126' cy='3.5' r='1.4' fill='%232f6f4c' fill-opacity='.6'/%3E%3C/svg%3E") no-repeat left center/148px 7px;
}

/* Promienie Inti — wolno wirujący pierścień w medalionie nagłówka. */
.sun-rays { animation: sun-spin 90s linear infinite; transform-origin: center; }
@keyframes sun-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   KOMPONENTY
   ------------------------------------------------------------ */
/* Karta pergaminowa — podstawowa powierzchnia treści. */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
/* Karta będąca odnośnikiem / interaktywna — unosi się. */
a.card, .card-hov {
  display: block;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
}
a.card:hover, .card-hov:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hov);
  border-color: #d9cba0;
}
/* Górna złota nitka karty przy najechaniu. */
a.card, .card-hov { position: relative; overflow: hidden; }
a.card::before, .card-hov::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity: 0;
  transition: opacity .25s;
}
a.card:hover::before, .card-hov:hover::before { opacity: 1; }

/* Kafelek nawigacji. */
.tile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px; /* cel dotykowy na telefonie */
  padding: 12px 13px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  color: #565c49;
  background: var(--paper);
  border: 1px solid var(--line-2);
  transition: transform .18s var(--ease-out), box-shadow .2s, border-color .18s, background-color .18s, color .18s;
}
.tile:hover {
  transform: translateY(-1px);
  border-color: var(--gold);
  box-shadow: 0 6px 14px -8px rgba(27,30,24,.5);
}
.tile-active {
  color: #fdf6ec;
  background: linear-gradient(135deg, var(--gold), #ad8118);
  border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(140,103,20,.7);
}
.tile-active:hover { border-color: transparent; }
.tile-sub-active {
  color: #fdf6ec;
  background: var(--jade);
  border-color: transparent;
}
/* Telefon: dokładnie 2 równe kolumny menu (auto-fill potrafi je rozjechać);
   !important, bo siatka jest ustawiana stylem inline w base.html. */
@media (max-width: 480px) {
  nav.grid, [id^="nav-group-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Chip / pastylka statusu i filtrów. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink-soft);
  transition: transform .15s var(--ease-out), box-shadow .2s, filter .15s;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 5px 12px -7px rgba(27,30,24,.45); }
.chip-gold   { border-color: #ead9b6; background: #f7ead0; color: var(--gold-deep); }
.chip-terra  { border-color: #e7d3bf; background: #fbf2e2; color: var(--terra); }
.chip-cochi  { border-color: #e7d0d1; background: #f7ecec; color: var(--cochi); }
.chip-jade   { border-color: #d8e0c6; background: #eef2e3; color: var(--jade); }
.chip-sky    { border-color: #c9dde0; background: #e8f2f3; color: var(--sky); }
.chip-violet { border-color: #d8d0e3; background: #efeaf5; color: var(--violet); }
/* Chip aktywny (wybrany filtr) — wypełniony kolorem. */
.chip-on { color: #fdf6ec !important; border-color: transparent !important; }
.chip-on.chip-gold, .chip-on.chip { background: linear-gradient(135deg, var(--gold), #ad8118); }
.chip-on.chip-terra { background: linear-gradient(135deg, #bd5a35, var(--terra)); }
.chip-on.chip-cochi { background: linear-gradient(135deg, #ba3a58, var(--cochi)); }
.chip-on.chip-jade  { background: linear-gradient(135deg, #3f8a5f, var(--jade)); }
.chip-on.chip-sky   { background: linear-gradient(135deg, #2a8b97, var(--sky)); }
.chip-on.chip-violet{ background: linear-gradient(135deg, #6f5896, var(--violet)); }

/* Przyciski — gradient z przesuwającym się błyskiem złota. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  color: #fdf6ec;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s var(--ease-out), box-shadow .2s, filter .18s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,244,214,.35), transparent);
  transition: left .5s var(--ease-out);
}
.btn:hover::after { left: 125%; }
.btn-gold  { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #2a1e08; box-shadow: 0 8px 18px -10px rgba(140,103,20,.8); }
.btn-jade  { background: linear-gradient(135deg, var(--jade), var(--jade-deep)); box-shadow: 0 8px 18px -10px rgba(24,42,32,.8); }
.btn-terra { background: linear-gradient(135deg, #bd5a35, #85391e); box-shadow: 0 8px 18px -10px rgba(51,22,12,.8); }
.btn-cochi { background: linear-gradient(135deg, #ba3a58, #822439); box-shadow: 0 8px 18px -10px rgba(50,14,21,.8); }
/* Przycisk drugorzędny — pergamin z obwódką. */
.btn-ghost {
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-deep); filter: none; }

/* Pola formularzy. */
.field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 9px 12px;
  transition: border-color .15s, box-shadow .2s;
}

/* Obrazki: powiększenie w kadrze przy najechaniu. */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform .45s var(--ease-out);
  will-change: transform;
}
.img-zoom:hover img { transform: scale(1.05); }

/* Zwijane sekcje <details> — bez natywnego trójkąta, chip pełni rolę wskaźnika. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chip { background: linear-gradient(135deg, var(--gold), #ad8118); color: #fdf6ec; border-color: transparent; }

/* Pusty stan — delikatna ramka z haftem. */
.empty {
  border: 1.5px dashed var(--line-2);
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
  color: var(--ink-mute);
  background: rgba(248,246,236,.6);
}

/* ------------------------------------------------------------
   MIKRO-ANIMACJE
   ------------------------------------------------------------ */
/* Wejście elementów: dodaj klasę .rv — skrypt w base.html nada .rv-in
   przy pojawieniu się w kadrze (stagger ustawiany per rodzeństwo). */
/* Ukrywamy tylko, gdy JS działa (html.js) — bez JS treść zostaje widoczna. */
.js .rv:not(.rv-in) { opacity: 0; transform: translateY(10px); }
.rv-in {
  opacity: 1;
  transform: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}

/* Widoczny fokus — złota obwódka (dostępność klawiatury). */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 151, 31, .22);
}
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Wszystko klikalne reaguje płynnie (spójny fallback poza komponentami). */
a, button, input, select, textarea {
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease,
              background-color .15s ease, color .15s ease, opacity .15s ease, filter .15s ease;
}
a:active, button:active { transform: scale(.985); }

/* Kafelki nawigacji i karty-odnośniki bez klas komponentów (stare inline). */
a[style*="box-shadow"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(54, 41, 28, .55) !important;
}
button:hover, a[style*="linear-gradient"]:hover { filter: brightness(1.06); }

/* Komunikaty wsuwają się z góry. */
.msg { animation: msg-in .25s ease both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(-6px); } }
.msg.error, .msg.warning { border-left-color: var(--cochi) !important; color: #661d2d !important; }

.rotate-4 { transform: rotate(4deg); }
.-rotate-4 { transform: rotate(-4deg); }

/* Płynne przejścia między stronami (natywne View Transitions) i przewijanie. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html { scroll-behavior: smooth; }
}

/* ------------------------------------------------------------
   DOSTĘPNOŚĆ: ograniczenie ruchu
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  a, button, input, select, textarea, .msg, .tile, .chip, .btn, .card, .img-zoom img {
    transition: none !important;
    animation: none !important;
  }
  .rv { opacity: 1; transform: none; }
  .sun-rays { animation: none; }
}