/* Park pages (task A-5) — built on the main.css design tokens AND its shared surface
   classes (.glass, .spot, .eyebrow, .btn, .pillar, .chip, .stat) so /parks/* has the same
   depth and effects as the home page. Design-quality pass (user feedback 2026-07-14):
   atmospheric hero, real glass cards, a glass sub-nav bar, home-matching section rhythm. */
/* Сторінки парків (завдання A-5) — на токенах main.css І її спільних класах поверхонь
   (.glass, .spot, .eyebrow, .btn, .pillar, .chip, .stat), щоб /parks/* мали ту саму
   глибину й ефекти, що й головна. Прохід якості дизайну (фідбек користувача 2026-07-14):
   атмосферний hero, справжні glass-картки, glass-субнав, ритм секцій як на головній. */

/* ===== ATMOSPHERIC HERO — echoes the home hero gradient + aurora bloom (PLAN §15) ===== */
/* ===== АТМОСФЕРНИЙ HERO — відлунює градієнт і заграву аврори головної (PLAN §15) ===== */
.pk-hero{position:relative;isolation:isolate;overflow:hidden;
  padding:calc(96px + env(safe-area-inset-top)) 0 clamp(26px,4vw,44px);
  background:radial-gradient(100% 78% at 50% -18%,#2A0F55 0%,transparent 56%),
             linear-gradient(180deg,#160B36 0%,var(--bg0) 78%)}
.pk-hero::after{content:"";position:absolute;left:-10%;right:-10%;top:-16%;height:78%;z-index:-1;
  pointer-events:none;filter:blur(74px);opacity:.55;mix-blend-mode:screen;
  background:radial-gradient(42% 60% at 18% 0%,rgba(0,255,255,.40),transparent 70%),
             radial-gradient(42% 60% at 84% 12%,rgba(255,46,154,.34),transparent 70%),
             radial-gradient(52% 62% at 55% 0%,rgba(165,0,255,.30),transparent 72%)}
/* Park title — the proper name glows like the home slogan (.hero h1 .glow), a touch larger, with a
   slow pulsing aurora bloom behind the letters; "National Park" stays a quiet subline (user 2026-07-17). */
/* Назва парку — власне ім'я світиться, як слоган головної (.hero h1 .glow), трохи більше, з повільною
   пульсуючою aurora-заграврою позаду літер; "National Park" — тихий підрядок (користувач 2026-07-17). */
.pk-hero h1{font-family:"Unbounded",sans-serif;font-weight:900;line-height:1.02;
  letter-spacing:-.02em;margin:14px 0 10px;display:flex;flex-direction:column;gap:2px}
/* Parks-index headline — flat cyan, no italic (per user spec) */
/* Заголовок індексу парків — рівний cyan, без курсиву (за вказівкою користувача) */
.pk-idx-title{font-style:normal;color:var(--cyan)}
.pk-title-name{position:relative;isolation:isolate;display:inline-block;width:max-content;max-width:100%;
  font-size:clamp(38px,7.4vw,72px);
  background:linear-gradient(92deg,var(--magenta) 0%,var(--violet) 40%,var(--cyan) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,46,154,.45))}
/* Aurora bloom behind the letters — a soft cyan/violet/magenta radial curtain that breathes slowly */
/* Aurora-заграва позаду літер — м'яка cyan/violet/magenta радіальна завіса, що повільно дихає */
.pk-title-name::before{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;top:-42%;bottom:-42%;
  pointer-events:none;filter:blur(40px);mix-blend-mode:screen;
  background:radial-gradient(38% 60% at 16% 42%,rgba(0,255,255,.55),transparent 70%),
             radial-gradient(40% 62% at 84% 56%,rgba(255,46,154,.50),transparent 70%),
             radial-gradient(52% 72% at 50% 50%,rgba(165,0,255,.42),transparent 72%);
  animation:pk-aurora 7s ease-in-out infinite}
@keyframes pk-aurora{
  0%,100%{opacity:.55;transform:translateX(-3%) scale(1)}
  50%{opacity:.95;transform:translateX(3%) scale(1.06)}}
/* "National Park" subline — palette yellow with the project's signature glow (matches .flies/.alert .cat) (user request) */
/* Підрядок "National Park" — жовтий із палітри та фірмове світіння проєкту (як .flies/.alert .cat) (запит користувача) */
.pk-title-desig{font-size:clamp(15px,2vw,22px);font-weight:800;letter-spacing:.01em;
  color:var(--yellow);text-shadow:0 0 14px rgba(255,255,0,.55)}
/* Respect reduced-motion — keep the glow, drop the pulse */
/* Поважаємо reduced-motion — лишаємо світіння, прибираємо пульс */
@media(prefers-reduced-motion:reduce){.pk-title-name::before{animation:none;opacity:.7}}
.answer{font-size:clamp(15px,2.2vw,18px);color:var(--paper);max-width:64ch;line-height:1.6}

/* Breadcrumb — mirrors the Schema.org BreadcrumbList */
/* Хлібні крихти — дзеркалять Schema.org BreadcrumbList */
.pk-crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.pk-crumb a{color:var(--mut)}
.pk-crumb a:hover{color:var(--cyan)}
.pk-crumb .sep{opacity:.5}
.pk-crumb .cur{color:var(--paper)}

/* Hero facts — glass chips (the quick data strip AI answers cite, PLAN §13) */
/* Hero-факти — glass-чіпи (швидка стрічка даних, яку цитують AI, PLAN §13) */
.pk-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pk-fact{display:flex;flex-direction:column;gap:2px;padding:11px 16px;border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--glass-hi),transparent 45%),var(--glass);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.pk-fact b{font-family:"JetBrains Mono",monospace;font-size:16px;color:var(--cyan);text-shadow:0 0 14px rgba(0,255,255,.4)}
.pk-fact i{font-style:normal;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.pk-fact.grade-a b{color:var(--lime);text-shadow:0 0 14px rgba(57,255,136,.45)}

/* ===== SUB-NAV — glass pill bar, sticky. No more ".pk-subnav wrap" class conflict. ===== */
/* ===== СУБНАВ — glass-пігулка, sticky. Більше жодного конфлікту класів ".pk-subnav wrap". ===== */
.pk-subnav{position:sticky;top:calc(70px + env(safe-area-inset-top));z-index:60;margin-top:24px}
.pk-subnav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:7px;border-radius:999px;
  background:rgba(6,3,18,.72);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 36px -12px rgba(0,0,0,.6)}
.pk-subnav-in::-webkit-scrollbar{display:none}
.pk-subnav-in a{flex:0 0 auto;padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap;transition:color .2s,background .2s,box-shadow .2s}
.pk-subnav-in a:hover{color:var(--cyan);background:rgba(0,255,255,.09);box-shadow:0 0 16px -4px rgba(0,255,255,.4)}
.pk-subnav-in a.on{color:var(--cyan);background:rgba(0,255,255,.12);box-shadow:0 0 16px -5px rgba(0,255,255,.5)}

/* ===== SECTION RHYTHM — match the home page (no per-section borders; reveal handles entrances) ===== */
/* ===== РИТМ СЕКЦІЙ — як на головній (без бордерів у кожній секції; появу веде reveal) ===== */
.pk-section{padding:clamp(40px,6.5vw,80px) 0;position:relative}
.pk-section h2{font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(20px,3vw,30px);margin:8px 0 6px}
.pk-lead{color:var(--mut);max-width:60ch}

/* Activity chips — like the home .chip (glass + neon icon) */
/* Чіпи активностей — як home .chip (glass + неонова іконка) */
.act-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.act{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;
  background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--paper)}
a.act{transition:border-color .2s,box-shadow .2s,color .2s}
a.act:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px -6px rgba(0,255,255,.5)}
.act .ic{font-size:17px;filter:drop-shadow(0 0 6px rgba(0,255,255,.6))}

/* Trails data table — glass container; scrolls horizontally on mobile (never the body) */
/* Таблиця даних трейлів — glass-контейнер; горизонтальний скрол на мобільному (ніколи не body) */
.table-wrap{overflow-x:auto;margin-top:18px;border-radius:var(--r-md);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--glass-hi),transparent 40%),var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 48px -22px rgba(0,0,0,.7)}
.trail-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.trail-table th,.trail-table td{padding:12px 15px;text-align:left;white-space:nowrap}
.trail-table thead th{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:rgba(255,255,255,.03)}
.trail-table tbody tr{border-top:1px solid var(--line)}
.trail-table tbody tr:hover{background:rgba(0,255,255,.04)}
.trail-table .yes{color:var(--lime)}
.trail-table .no{color:var(--mut);opacity:.6}

/* Unobvious "know before you go" — flat + gradient accent bar, same recipe as the home .dl cards */
/* Неочевидне — плаский фон + градієнтна планка-акцент, той самий рецепт, що й home .dl-картки */
.unobv-grid{display:grid;gap:12px;margin-top:18px}
@media(min-width:720px){.unobv-grid{grid-template-columns:repeat(2,1fr)}}
.unobv{position:relative;overflow:hidden;display:flex;gap:13px;padding:17px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line)}
.unobv::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--cyan),var(--violet))}
.unobv .u-ic{font-size:22px;flex:0 0 auto}
.unobv b{font-size:14.5px}
.unobv p{font-size:13px;color:var(--mut);margin-top:3px}
.unobv a{font-size:12.5px;font-weight:700}

/* Live block — NPS alerts (accent-bar cards like .dl) + NOAA weather stub */
/* Блок Live — алерти NPS (картки з планкою, як .dl) + заглушка погоди NOAA */
.live-grid{display:grid;gap:14px;margin-top:18px}
@media(min-width:820px){.live-grid{grid-template-columns:1.4fr 1fr}}
.alerts{display:flex;flex-direction:column;gap:10px}
.alert{position:relative;overflow:hidden;padding:15px 17px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line)}
.alert::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--magenta),var(--yellow))}
.alert b{font-size:14px}
.alert p{font-size:12.5px;color:var(--mut);margin-top:4px}
.alert .cat{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.weather-stub{display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center;padding:22px;border-radius:var(--r-md);
  background:var(--glass);border:1px dashed var(--line);color:var(--mut);font-size:13px}
.no-data{color:var(--mut);font-size:13.5px;margin-top:14px}

/* NOAA weather card (task A-NOAA) — glass surface from the template; current period + a mini strip */
/* Картка погоди NOAA (завдання A-NOAA) — glass-поверхня з шаблону; поточний період + міні-стрічка */
.wx{display:flex;flex-direction:column;gap:14px;padding:18px}
.wx-now{display:flex;align-items:center;gap:16px}
.wx-temp{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:40px;line-height:1;color:var(--cyan);text-shadow:0 0 20px rgba(0,255,255,.5)}
.wx-temp small{font-size:16px;color:var(--mut);text-shadow:none}
.wx-lead{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-when{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.wx-lead b{font-size:15px;font-weight:700;line-height:1.25}
.wx-wind{font-size:11.5px;color:var(--mut)}
.wx-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wx-cell{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.wx-cell .wx-d{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.wx-cell b{font-family:"JetBrains Mono",monospace;font-size:16px;color:var(--paper)}
.wx-cell .wx-s{font-size:11px;color:var(--mut);line-height:1.3}
.wx-src{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);opacity:.7}

/* AirNow AQI card (task C-7) — third Live card; neutral tokens only, no EPA color scale (design-stop) */
/* Картка AQI AirNow (завдання C-7) — третя Live-картка; лише нейтральні токени, без EPA-шкали (дизайн-стоп) */
.live-side{display:flex;flex-direction:column;gap:14px}
.aq{display:flex;flex-direction:column;gap:10px;padding:18px}
.aq-head{display:flex;align-items:center;gap:16px}
.aq-val{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:34px;line-height:1;color:var(--paper)}
.aq-lead{display:flex;flex-direction:column;gap:2px;min-width:0}
.aq-label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.aq-lead b{font-size:15px;font-weight:700;line-height:1.25}
.aq-pol{font-size:11.5px;color:var(--mut)}
.aq-as-of{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--mut)}
.aq-stub{display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center;padding:18px;border-radius:var(--r-md);
  background:var(--glass);border:1px dashed var(--line);color:var(--mut);font-size:13px}

/* Nearby services — premium glass cards (.glass .spot come from the template) */
/* Сервіси поруч — преміум glass-картки (.glass .spot додаються в шаблоні) */
.svc-grid{display:grid;gap:12px;margin-top:18px}
@media(min-width:720px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
.svc{display:flex;gap:13px;padding:17px;transition:box-shadow .35s}
.svc:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 54px -18px rgba(0,0,0,.75),0 0 34px -8px rgba(0,255,255,.3)}
.svc .s-ic{font-size:20px;flex:0 0 auto}
.svc .s-type{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.svc b{font-size:14px;display:block;margin:2px 0}
.svc .s-meta{font-size:12.5px;color:var(--mut)}
.svc a{font-size:12.5px;font-weight:700}

/* Affiliate CTA cards (stay / getting there / tours) — premium glass (.glass .spot from the template) */
/* Афілейт-CTA (житло / як дістатись / тури) — преміум glass (.glass .spot з шаблону) */
.aff-grid{display:grid;gap:14px;margin-top:18px}
@media(min-width:720px){.aff-grid{grid-template-columns:repeat(3,1fr)}}
.aff{padding:20px;transition:box-shadow .35s}
.aff:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 54px -18px rgba(0,0,0,.75),0 0 34px -8px rgba(255,46,154,.3)}
.aff h3{font-size:15px;font-weight:700;margin-bottom:5px}
.aff p{font-size:13px;color:var(--mut);margin-bottom:14px}
.aff .btn{padding:12px 18px;font-size:13px}

/* Trail Nutrition hub (/nutrition/) — secondary line inside a table cell + the selection-criteria
   list inside an .aff card. Neutral tokens only, no new palette (the design-stop rule). */
/* Хаб Trail Nutrition (/nutrition/) — другорядний рядок усередині комірки таблиці + список
   критеріїв вибору всередині картки .aff. Лише нейтральні токени, без нової палітри (design-stop). */
.nut-sub{display:block;font-style:normal;font-size:11.5px;color:var(--mut);margin-top:3px}
.aff .nut-note-title{font-weight:700;color:var(--paper);margin-bottom:5px}
/* The selection criterion, marked like the source chips elsewhere on the site. */
/* Критерій вибору, позначений так само, як чипи джерел в інших місцях сайту. */
.nut-tip{font-size:12.5px;color:var(--mut)}
.aff .nut-tip::before{content:"◆ ";color:var(--lime);opacity:.7}
/* Equal-height cards with the CTA pinned to the bottom edge. SCOPED to .nut-grid on purpose:
   bare .aff also renders on park hubs, intersections and the dogs hub, and those are not ours
   to restyle from here. */
/* Картки однакової висоти з CTA, прибитим до нижнього краю. Свідомо ЗАСКОУПЛЕНО на .nut-grid:
   голий .aff рендериться ще й на хабах парків, перетинах і хабі собак, а це не наше право
   перестилювати звідси. */
.nut-grid .aff{display:flex;flex-direction:column}
.nut-grid .aff .nut-tip{margin-bottom:14px}
.nut-grid .aff .btn{margin-top:auto;align-self:flex-start}

/* Gateway airports inside the "Getting there" .aff card (CJ-2). One row per airport: an optional
   IATA chip, the name, and the source's own distance/time on its own line. Both the chip and the
   figure are optional because the sources often give neither — the row still reads as a sentence
   when they are missing. Neutral tokens only, no new palette (the design-stop rule). */
/* Ворітні аеропорти всередині картки .aff «Getting there» (CJ-2). Рядок на аеропорт: необов'язковий
   чип IATA, назва і відстань/час словами джерела окремим рядком. І чип, і цифра необов'язкові, бо
   джерела часто не дають ні того, ні того — без них рядок усе одно читається як речення. Лише
   нейтральні токени, без нової палітри (design-stop). */
.aff .apt{font-size:12.5px;color:var(--mut);margin-bottom:7px}
.aff .apt-code{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--paper);margin-right:7px;letter-spacing:.04em}
.aff .apt-figure{display:block;font-size:11.5px;opacity:.75;margin-top:2px}
/* .fine-note centres by default; the source line has to sit under the airport rows, not float
   between them. / .fine-note за замовчуванням центрується; рядок джерела має стояти під рядками
   аеропортів, а не плавати між ними. */
.aff .apt-src{text-align:left;margin-top:10px}

.pk-sources{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mut);margin-top:14px}
.pk-sources span::before{content:"◆ ";color:var(--lime);opacity:.7}
.disclosure{font-size:12px;color:var(--mut);max-width:70ch;margin-top:16px;opacity:.85}

/* ===== PARKS INDEX (NAVIGATION.uk §8 step 2) — premium glass cards with a hover lift ===== */
/* ===== ІНДЕКС ПАРКІВ (NAVIGATION.uk §8 крок 2) — преміум glass-картки з підйомом на hover ===== */
.pk-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:24px}
.pk-card{display:block;padding:19px;color:var(--paper);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.pk-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 54px -18px rgba(0,0,0,.8),0 0 36px -10px rgba(0,255,255,.5)}
/* Park name in a card — palette amber with a soft glow; brightens to pure yellow on card hover */
/* Назва парку в картці — амбер палітри з м'яким сяйвом; при наведенні яскравішає до чистого жовтого */
.pk-card h3{font-family:"Unbounded",sans-serif;font-weight:700;font-size:16px;margin-bottom:6px;line-height:1.25;
  color:#FFDA36;text-shadow:0 0 10px #FFDA3699}
.pk-card:hover h3{color:var(--yellow);text-shadow:0 0 14px rgba(255,255,0,.55)}
.pk-card .st{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mut)}
.pk-badge{display:inline-block;margin-top:12px;padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:700}
.pk-badge.ready{background:rgba(57,255,136,.12);color:var(--lime);border:1px solid rgba(57,255,136,.3);box-shadow:0 0 14px -4px rgba(57,255,136,.5)}
.pk-badge.soon{background:rgba(255,255,255,.05);color:var(--mut);border:1px solid var(--line)}
/* Between the two (TR-1c): the trails are curated, the park guide is not. Cyan rather than lime —
   a real thing to open, but not the same promise as a finished hub. */
/* Проміжний стан (TR-1c): трейли куровані, гайд парку — ні. Cyan, а не lime — це справжня річ, яку
   варто відкрити, але не та сама обіцянка, що готовий хаб. */
.pk-badge.trail{background:rgba(0,255,255,.1);color:var(--cyan);border:1px solid rgba(0,255,255,.28)}

/* ===== PARKS PASSPORT (task C-5) — visited grid + progress + share, on the main.css tokens ===== */
/* ===== PARKS PASSPORT (завдання C-5) — сітка відвіданих + прогрес + шеринг, на токенах main.css ===== */
.pp-progress{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.pp-bar{flex:1 1 220px;max-width:420px;height:10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);overflow:hidden}
.pp-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--lime),var(--cyan,#39d0ff));box-shadow:0 0 16px -3px var(--lime);transition:width .35s cubic-bezier(.16,1,.3,1)}
.pp-count{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--mut)}
.pp-count b{color:var(--paper);font-size:16px}
.pp-share{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding:14px 16px;border-radius:14px;max-width:640px}
.pp-share-lbl{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:var(--mut)}
.pp-share-row{display:flex;gap:8px;flex-wrap:wrap}
.pp-share-url{flex:1 1 260px;min-width:0;font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--paper);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:24px}
.pp-grid form{margin:0}
.pp-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;cursor:pointer;
  padding:15px 16px 15px 44px;position:relative;border-radius:14px;color:var(--paper);
  background:rgba(255,255,255,.04);border:1px solid var(--line);font:inherit;transition:transform .18s,border-color .25s,background .25s,box-shadow .3s}
button.pp-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
.pp-card .pp-check{position:absolute;left:14px;top:15px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--mut);background:rgba(255,255,255,.05)}
.pp-card .pp-name{font-family:"Unbounded",sans-serif;font-weight:700;font-size:14.5px;line-height:1.25}
.pp-card .pp-st{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--mut)}
.pp-card.on{background:rgba(57,255,136,.1);border-color:rgba(57,255,136,.4);box-shadow:0 0 24px -10px rgba(57,255,136,.6)}
.pp-card.on .pp-check{color:var(--lime);border-color:rgba(57,255,136,.5);background:rgba(57,255,136,.16);box-shadow:0 0 12px -3px rgba(57,255,136,.6)}
.pp-card.on .pp-name{color:var(--lime)}

/* ===== PASSPORT 2.0 · BLAZES (task P-1) — trail log accordions + the three metals ===== */
/* ===== PASSPORT 2.0 · БЛЕЙЗИ (завдання P-1) — акордеони трейл-логу + три метали ===== */
/* main.css has no gold/silver/bronze tokens, so the metals are authored here on the .gr grade-pill
   recipe (colour + rgba fill + rgba border + glow). Gold reuses the amber already on .pk-card h3. */
/* У main.css немає токенів золота/срібла/бронзи, тож метали задані тут за рецептом пігулок .gr
   (колір + rgba-фон + rgba-рамка + світіння). Золото переиспользує амбер із .pk-card h3. */
.bz-park{--bz:var(--mut);--bz-soft:rgba(167,158,214,.12)}
.bz-park.bz-gold{--bz:#FFDA36;--bz-soft:rgba(255,218,54,.12)}
.bz-park.bz-silver{--bz:#D6DCEA;--bz-soft:rgba(214,220,234,.1)}
.bz-park.bz-bronze{--bz:#C98B52;--bz-soft:rgba(201,139,82,.12)}
/* The accordion accent follows the metal instead of the default cyan when a blaze is earned */
/* Акцент акордеона йде за металом замість типового cyan, коли блейз зароблено */
.bz-park.bz-gold[open],.bz-park.bz-silver[open],.bz-park.bz-bronze[open]{border-color:color-mix(in srgb,var(--bz) 34%,transparent)}
.bz-park.bz-gold::before,.bz-park.bz-silver::before,.bz-park.bz-bronze::before{background:linear-gradient(180deg,var(--bz),transparent)}
.bz-park.bz-gold:hover,.bz-park.bz-silver:hover,.bz-park.bz-bronze:hover{border-color:color-mix(in srgb,var(--bz) 30%,transparent)}
.g-ic.bz{color:var(--bz);font-size:17px}
.bz-park.bz-gold .g-ic.bz,.bz-park.bz-silver .g-ic.bz,.bz-park.bz-bronze .g-ic.bz{
  background:var(--bz-soft);border-color:color-mix(in srgb,var(--bz) 32%,transparent);box-shadow:0 0 16px -4px var(--bz)}
.bz-park.bz-gold[open] .g-ic.bz{box-shadow:0 0 22px -3px var(--bz)}
.g-ic.bz-none{color:var(--mut);opacity:.55}

/* Summary right cluster: label + mini bar + count; drops away on narrow screens */
/* Правий кластер summary: підпис + міні-бар + лічильник; на вузьких екранах ховається */
.bz-sum{display:flex;align-items:center;gap:10px;flex:none}
.bz-lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--bz)}
.bz-num{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mut)}
.pp-bar.bz-mini{flex:none;width:74px;max-width:74px;height:6px}
.pp-bar.bz-mini span{background:linear-gradient(90deg,var(--bz),var(--bz));box-shadow:0 0 10px -3px var(--bz)}
@media(max-width:700px){.bz-sum .bz-lbl,.bz-sum .pp-bar.bz-mini{display:none}}

/* Trail rows — the .pp-card checkbox pattern laid out as full-width lines inside the accordion */
/* Рядки трейлів — патерн чекбокса .pp-card, розкладений повнорядковими лініями в акордеоні */
.bz-park .g-body form{margin:0 0 8px}
.bz-trail{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;font:inherit;
  margin-bottom:8px;padding:11px 14px;border-radius:12px;color:var(--paper);
  background:rgba(255,255,255,.04);border:1px solid var(--line);transition:border-color .25s,background .25s,box-shadow .3s}
.bz-park .g-body form .bz-trail{margin-bottom:0}
button.bz-trail:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.bz-trail:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.bz-box{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:6px;
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--mut);background:rgba(255,255,255,.05)}
.bz-name{flex:1;font-size:14.5px;line-height:1.3}
.bz-meta{flex:none;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mut)}
.bz-trail.on{background:rgba(57,255,136,.1);border-color:rgba(57,255,136,.4);box-shadow:0 0 24px -12px rgba(57,255,136,.6)}
.bz-trail.on .bz-box{color:var(--lime);border-color:rgba(57,255,136,.5);background:rgba(57,255,136,.16);box-shadow:0 0 12px -3px rgba(57,255,136,.6)}
.bz-trail.on .bz-name{color:var(--lime)}
/* The park-level control reads a notch stronger than the trail rows below it */
/* Контрол рівня парку читається на щабель сильніше за рядки трейлів під ним */
.bz-stamp{border-style:dashed}
.bz-stamp .bz-name{font-family:"Unbounded",sans-serif;font-weight:700;font-size:13px}

.bz-hint,.bz-foot{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mut);margin:0 0 12px}
.bz-foot{margin:12px 0 0;color:var(--bz)}
.pp-stats{margin-top:18px}
.pk-fact.blaze-gold b{color:#FFDA36;text-shadow:0 0 14px rgba(255,218,54,.45)}
.pk-fact.blaze-silver b{color:#D6DCEA;text-shadow:0 0 14px rgba(214,220,234,.35)}
.pk-fact.blaze-bronze b{color:#C98B52;text-shadow:0 0 14px rgba(201,139,82,.4)}

/* ===== TRAIL FILTER (task B-1) — HTMX filter bar; glass pill row on the main.css tokens ===== */
/* ===== ФІЛЬТР ТРЕЙЛІВ (завдання B-1) — панель HTMX-фільтра; glass-пігулка на токенах main.css ===== */
/* position+z-index: lift the whole bar above the results table below, so an open dropdown overlays it */
/* position+z-index: піднімаємо весь рядок над таблицею результатів нижче, щоб відкрите меню лягало поверх */
.trail-filter{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;padding:16px 18px;border-radius:16px;margin:6px 0 18px}
/* Reuse the mockup's .field custom dropdown (main.css) — only lay it out in the filter row here. */
/* Перевикористовуємо кастомний .field-дропдаун макета (main.css) — тут лише розкладка в рядку фільтра. */
.trail-filter .field{flex:0 1 160px;min-width:130px}
.trail-filter .field.dd.open{z-index:40}  /* the open field above its neighbours / відкрите поле над сусідами */

/* Dog/Stroller = on-brand toggle chips (like the home .pchip), not raw native checkboxes */
/* Dog/Stroller = чіпи-перемикачі в стилі сайту (як .pchip на головній), а не сирі нативні чекбокси */
.trail-filter .tf-chk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mut);cursor:pointer;user-select:none;
  padding:9px 14px 9px 11px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:color .2s,border-color .25s,background .25s}
.trail-filter .tf-chk:hover{color:var(--paper);border-color:rgba(0,255,255,.35)}
.trail-filter .tf-chk input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.trail-filter .tf-chk::before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:5px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:transparent;transition:all .2s}
.trail-filter .tf-chk:has(input:checked){color:var(--lime);border-color:rgba(57,255,136,.45);background:rgba(57,255,136,.1)}
.trail-filter .tf-chk:has(input:checked)::before{content:"✓";color:var(--lime);border-color:rgba(57,255,136,.5);background:rgba(57,255,136,.16);box-shadow:0 0 10px -3px rgba(57,255,136,.6)}
.trail-filter .tf-chk:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
.trail-filter button{margin-left:auto}
.trail-filter.htmx-request{opacity:.6;transition:opacity .15s}
.filter-count{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--mut);margin-bottom:12px}

/* ===== NATIONAL PILLAR HUBS (task B-3) — A–D grade pills for the With Dogs matrix, reusing hub tokens ===== */
/* ===== НАЦІОНАЛЬНІ ХАБИ СТОВПІВ (завдання B-3) — пігулки оцінок A–D для матриці With Dogs, на токенах хаба ===== */
.gr{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:2px 9px;border-radius:8px;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px;border:1px solid var(--line)}
.gr.A{color:var(--lime);background:rgba(57,255,136,.12);border-color:rgba(57,255,136,.32)}
.gr.B{color:#9ee36a;background:rgba(158,227,106,.1);border-color:rgba(158,227,106,.3)}
.gr.C{color:#f5c451;background:rgba(245,196,81,.1);border-color:rgba(245,196,81,.3)}
.gr.D{color:#ff8f8f;background:rgba(255,143,143,.1);border-color:rgba(255,143,143,.3)}


/* ===== COMPARE TWO PARKS (task C-8) — side-by-side table + picker on the main.css tokens ===== */
/* ===== ПОРІВНЯННЯ ДВОХ ПАРКІВ (завдання C-8) — таблиця side-by-side + пікер на токенах main.css ===== */
.cmp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.cmp-table th,.cmp-table td{padding:13px 16px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
.cmp-table thead th{font-family:"Unbounded",sans-serif;font-weight:700;font-size:15px;color:var(--paper);border-top:none;background:rgba(255,255,255,.03)}
.cmp-table thead th a{color:var(--cyan)}
.cmp-table thead th:first-child{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--mut)}
.cmp-table tbody th{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:500;white-space:nowrap}
.cmp-table tbody td{color:var(--paper);font-size:13.5px}
.cmp-table tbody tr:hover{background:rgba(0,255,255,.04)}
.cmp-yes{color:var(--lime)}
.cmp-no{color:var(--mut);opacity:.6}

.cmp-picker{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;padding:clamp(18px,3vw,26px);margin-top:8px}
/* Branded picker: reuse the shared builder dropdown (.field → main.js custom .dd-menu), like the home
   hero and the trail filter. The card must NOT clip the absolute menu, so the form is .glass WITHOUT
   .spot (that added overflow:hidden and clipped the list); the open field lifts above its neighbours,
   mirroring .trail-filter .field.dd.open. No-JS falls back to the native <select> (still GET→303). */
/* Фірмовий пікер: спільний дропдаун builder (.field → кастомний .dd-menu у main.js), як hero головної
   й trail-фільтр. Картка НЕ має обрізати абсолютне меню, тож форма .glass БЕЗ .spot (він додавав
   overflow:hidden і обрізав список); відкрите поле піднімається над сусідами, як
   .trail-filter .field.dd.open. Без JS — фолбек на нативний <select> (все ще GET→303). */
.cmp-picker .field{flex:1 1 220px;min-width:170px}
.cmp-picker .field.dd.open{z-index:40}
.cmp-vs{font-family:"Unbounded",sans-serif;font-weight:700;font-size:15px;color:var(--mut);align-self:center;margin-top:12px}
.cmp-picker .btn{flex:0 0 auto}

/* ===== COMPLETE GUIDE — premium collapsible detailed description (native <details>, no JS; user request) ===== */
/* ===== ПОВНИЙ ГАЙД — преміум розкривний детальний опис (нативний <details>, без JS; запит користувача) ===== */
/* Jump chips → section anchors (in-page nav + internal links) / Чіпи-переходи → якорі секцій */
.g-jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.g-jump a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--mut);
  padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:color .2s,border-color .25s,background .25s,transform .15s}
.g-jump a:hover{color:var(--paper);border-color:rgba(0,255,255,.4);background:rgba(0,255,255,.06);transform:translateY(-2px)}

.guide{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.guide-sec{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,var(--glass-hi),transparent 42%),var(--glass);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:border-color .25s,box-shadow .3s}
.guide-sec:hover{border-color:rgba(0,255,255,.28);box-shadow:0 18px 44px -22px rgba(0,0,0,.8),0 0 30px -14px rgba(0,255,255,.5)}
.guide-sec[open]{border-color:rgba(0,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 34px -16px rgba(0,255,255,.55)}
/* Left accent bar lights up when open / Ліва акцентна смуга світиться відкритою */
.guide-sec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--lime));opacity:0;transition:opacity .25s}
.guide-sec[open]::before{opacity:.9}

.guide-sec summary{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;user-select:none;padding:15px 20px}
.guide-sec summary::-webkit-details-marker{display:none}
.guide-sec summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px;border-radius:16px}
.g-ic{flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:19px;
  border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:all .25s}
.guide-sec[open] .g-ic{background:rgba(0,255,255,.1);border-color:rgba(0,255,255,.35);box-shadow:0 0 16px -5px rgba(0,255,255,.6)}
.g-title{flex:1;font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(15px,2vw,17px);color:var(--paper);line-height:1.25;transition:color .2s}
.guide-sec summary:hover .g-title{color:var(--cyan)}
.g-chev{flex:none;font-family:"JetBrains Mono",monospace;font-size:20px;color:var(--cyan);transition:transform .25s}
.guide-sec[open] .g-chev{transform:rotate(90deg)}

.g-body{padding:2px 24px 20px 72px;color:#c7c2de;font-size:15px;line-height:1.72}
.g-body p{margin:0 0 13px}
.g-body p:last-child{margin-bottom:0}
.g-body strong{color:var(--paper);font-weight:700}
.g-body em{color:var(--cyan);font-style:italic}
.g-body ul{margin:0 0 13px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.g-body li{position:relative;padding-left:20px}
.g-body li::before{content:"›";position:absolute;left:2px;top:-1px;color:var(--cyan);font-weight:700}
@media(max-width:560px){.g-body{padding-left:22px}}

/* ===== "Do I need a reservation?" tool (task C-13) — verdict card + requirement badges ===== */
/* ===== Інструмент «Do I need a reservation?» (завдання C-13) — картка-вердикт + бейджі вимог ===== */
.rsv-verdict{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;margin-top:8px}
.rsv-verdict .rsv-mark{font-size:30px;flex:0 0 auto;line-height:1}
.rsv-verdict b{font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(16px,2.4vw,20px);line-height:1.25;display:block}
.rsv-verdict p{font-size:14px;color:var(--mut);margin-top:6px;line-height:1.55}
/* Accent bar per verdict — amber/magenta = plan ahead, lime = clear, muted = unknown */
/* Планка-акцент за вердиктом — амбер/магента = планувати, лайм = чисто, муть = невідомо */
.rsv-verdict.req b{color:var(--yellow);text-shadow:0 0 14px rgba(255,255,0,.45)}
.rsv-verdict.ok b{color:var(--lime);text-shadow:0 0 14px rgba(57,255,136,.45)}
.rsv-verdict.unk b{color:var(--paper)}
/* Requirement kind badge — reuses the ticker/tag look; color by kind */
/* Бейдж типу вимоги — вигляд як у тег-пігулок тикера; колір за типом */
.rsv-badge{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--mut)}
.rsv-badge.timed_entry{background:rgba(0,255,255,.1);color:var(--cyan)}
.rsv-badge.permit{background:rgba(255,255,0,.12);color:var(--yellow)}
.rsv-badge.lottery{background:rgba(255,46,154,.14);color:var(--magenta)}
.rsv-note{font-size:12.5px;color:var(--mut);margin-top:16px;line-height:1.55;max-width:70ch}
.rsv-remind{margin-top:26px}

/* ===== Tools hub /tools/ (NAVIGATION.uk §2.1) — reuses the home .tools/.tool cards; adds "Soon" state ===== */
/* ===== Хаб інструментів /tools/ (NAVIGATION.uk §2.1) — переиспользує .tools/.tool головної; додає стан «Soon» ===== */
.tools-hub{margin-top:6px}
/* Planned tool: looks present but reads as inactive — muted, no hover lift, no tilt (transform locked). */
/* Запланований інструмент: видно, але читається як неактивний — приглушений, без hover-підйому й tilt. */
.tool.soon{opacity:.6;cursor:default}
.tool.soon:hover{border-color:var(--line);box-shadow:none;transform:none!important}
.tool-soon{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--mut);vertical-align:middle;margin-left:4px}

/* ===== "Safe to Go?" tool (task C-16) — go/watch/wait verdict + AQI/alerts/weather signal cards ===== */
/* ===== Інструмент «Safe to Go?» (завдання C-16) — вердикт go/watch/wait + картки сигналів AQI/алерти/погода ===== */
.safe-verdict{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;margin-top:8px}
.safe-verdict .sv-mark{font-size:30px;flex:0 0 auto;line-height:1}
.safe-verdict b{font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(16px,2.4vw,20px);line-height:1.25;display:block}
.safe-verdict p{font-size:14px;color:var(--mut);margin-top:6px;line-height:1.55}
.safe-verdict.go b{color:var(--lime);text-shadow:0 0 14px rgba(57,255,136,.45)}
.safe-verdict.watch b{color:var(--yellow);text-shadow:0 0 14px rgba(255,255,0,.45)}
.safe-verdict.wait b{color:var(--magenta);text-shadow:0 0 15px rgba(255,46,154,.5)}
.safe-grid{display:grid;gap:12px;margin-top:18px}
@media(min-width:720px){.safe-grid{grid-template-columns:repeat(3,1fr)}}
.safe-card{padding:17px}
.safe-card .sc-label{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.safe-card .sc-big{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:26px;line-height:1.1;margin:8px 0 3px;color:var(--paper)}
.safe-card .sc-sub{font-size:12.5px;color:var(--mut);line-height:1.4}
.safe-card .sc-as-of{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.05em;color:var(--mut);margin-top:7px}
.safe-alerts{display:flex;flex-direction:column;gap:8px;margin-top:9px}
.safe-alert{font-size:12.5px;line-height:1.4}
.safe-alert .cat{font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.safe-none{font-size:12.5px;color:var(--mut);margin-top:9px;line-height:1.5}
.safe-note{font-size:12.5px;color:var(--mut);margin-top:16px;line-height:1.55;max-width:70ch}

/* Sun & Moon block on astro/photo intersections (task C-9) — glass cards on the shared tokens.
   Блок Sun & Moon на astro/photo-перетинах (завдання C-9) — glass-картки на спільних токенах. */
.sky-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:18px}
.sky-card{padding:16px;border-radius:16px;text-align:center}
.sky-ic{display:block;font-size:26px;margin-bottom:8px;filter:drop-shadow(0 0 12px rgba(0,255,255,.35))}
.sky-card b{display:block;font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--paper)}
.sky-card i{display:block;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:6px}
.sky-note{color:var(--mut);max-width:70ch;margin-top:14px;font-size:14px}
.sky-note b{color:var(--cyan)}

/* 30-night darkness calendar on the stargazing landing (C-9 follow-up) — shared tokens only;
   .dark = under 25% moonlight, the naked-eye Milky-Way window, so it carries the cyan glow.
   Календар темряви на 30 ночей на лендінгу stargazing (продовження C-9) — лише спільні токени;
   .dark = менше 25% місячного світла, вікно Чумацького Шляху неозброєним оком — тому cyan-сяйво. */
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:18px}
.cal-cell{padding:10px 6px;border-radius:12px;border:1px solid var(--line);text-align:center;opacity:.55}
.cal-cell b{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--paper);margin-top:6px}
.cal-cell i{display:block;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.cal-ic{display:block;font-size:18px}
.cal-cell.dark{opacity:1;border-color:var(--cyan);background:rgba(0,255,255,.05)}
.cal-cell.dark .cal-ic{filter:drop-shadow(0 0 10px rgba(0,255,255,.4))}
.cal-cell.dark i{color:var(--cyan)}

/* ===== Gear Checklist (task C-3) — tick-off list on shared tokens; native checkboxes, no JS.
   Named .pack-*: main.css already owns .chk (the success-checkmark SVG), and reusing that name
   gave every list item a fixed 70x70 centered box — a real collision, not a hypothetical one. =====
   ===== Gear Checklist (завдання C-3) — список із відмічанням на спільних токенах; нативні чекбокси,
   без JS. Імена .pack-*: main.css уже володіє .chk (SVG-галочка успіху), і повторне ім'я давало
   кожному пункту фіксований центрований бокс 70x70 — колізія реальна, не гіпотетична. ===== */
.pack-flag{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--paper);cursor:pointer;
  padding:10px 14px;border:1px solid var(--line);border-radius:12px;align-self:flex-end}
.pack-flag input{accent-color:var(--cyan)}
.pack-sec{padding:clamp(16px,3vw,24px);border-radius:16px;margin-top:16px}
.pack-sec h3{font-family:"Unbounded",sans-serif;font-size:16px;color:var(--paper)}
.pack-intro{color:var(--mut);font-size:13px;margin-top:8px;max-width:70ch}
.pack-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.pack{display:flex;align-items:baseline;gap:10px;padding:8px 4px;border-top:1px solid var(--line)}
.pack label{display:flex;align-items:baseline;gap:10px;cursor:pointer;flex:1;min-width:0}
.pack input{accent-color:var(--cyan);flex:0 0 auto;transform:translateY(2px)}
.pack b{color:var(--paper);font-size:14px}
.pack span{color:var(--mut);font-size:13px;line-height:1.5}
/* Ticked = packed: strike it through so progress is visible at a glance (pure CSS, no JS)
   Відмічено = спаковано: перекреслюємо, щоб прогрес було видно одним поглядом (чистий CSS, без JS) */
.pack label:has(input:checked) b{text-decoration:line-through;opacity:.45}
.pack label:has(input:checked) span{opacity:.45}
.pack-shop{flex:0 0 auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--cyan)}

/* ===== Best Time to Visit (task C-4) — month matrix table, hub verdict strip, crowd dots.
   Verdict colors map to the site palette: best=lime, good=cyan, shoulder=yellow, tough=magenta —
   one .v-* modifier drives the badge, the strip cell, the mini-bar and the legend dot alike. =====
   ===== Best Time to Visit (завдання C-4) — таблиця-матриця місяців, смуга вердиктів хаба, крапки
   натовпів. Кольори вердиктів з палітри сайту: best=lime, good=cyan, shoulder=yellow, tough=magenta —
   один модифікатор .v-* живить бейдж, клітинку смуги, міні-бар і крапку легенди однаково. ===== */
.v-best{--vc:var(--lime)}
.v-good{--vc:var(--cyan)}
.v-shoulder{--vc:var(--yellow)}
.v-tough{--vc:var(--magenta)}

/* Screen-reader-only caption: the table stays citable/semantic without a visual double heading
   Підпис лише для скрінрідера: таблиця лишається семантичною без візуального дубля заголовка */
.sr-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bt-scroll{overflow-x:auto;margin-top:6px;-webkit-overflow-scrolling:touch}
.bt-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.bt-table th{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.bt-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--paper)}
.bt-table tr.now td{background:rgba(0,255,255,.05)}
.bt-month{font-weight:700;white-space:nowrap}
.bt-month a{color:var(--paper);text-decoration:none}
.bt-month a:hover{color:var(--cyan)}
.bt-now{margin-left:8px;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.12em;
  color:var(--cyan);border:1px solid rgba(0,255,255,.4);border-radius:999px;padding:2px 7px;vertical-align:middle}
.bt-badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;
  color:var(--vc);background:color-mix(in srgb,var(--vc) 12%,transparent);border:1px solid color-mix(in srgb,var(--vc) 40%,transparent)}
.bt-temps{white-space:nowrap;color:var(--mut)}
.bt-temps b{color:var(--paper)}
.bt-note{color:var(--mut);font-size:13px;line-height:1.5;min-width:220px}

/* Crowd dots 1–5 — same visual language as the pillar meter on the home page
   Крапки натовпів 1–5 — та сама візуальна мова, що meter стовпів на головній */
.crowd{display:inline-flex;gap:3px;vertical-align:middle}
.crowd i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.1)}
.crowd i.on{background:linear-gradient(120deg,var(--magenta),var(--sunset,#e07a3f) 70%);box-shadow:0 0 8px rgba(255,46,154,.5)}
.crowd-word{margin-left:8px;font-size:12px;color:var(--mut);white-space:nowrap}

/* Cross-park index: 12 tiny verdict ticks = the year in one glance
   Міжпарковий індекс: 12 крихітних рисок вердиктів = рік одним поглядом */
.bt-idx td b{color:var(--paper)}
.bt-mini{display:inline-flex;gap:2px}
.bt-mini i{width:10px;height:16px;border-radius:3px;background:color-mix(in srgb,var(--vc) 55%,transparent)}

/* Legend chips shared by tool + hub / Спільна легенда для інструмента й хаба */
.bt-legend{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:14px;font-size:12.5px;color:var(--mut)}
.bt-key{display:inline-flex;align-items:center;gap:6px}
.bt-key i{width:10px;height:10px;border-radius:3px;background:var(--vc);box-shadow:0 0 8px color-mix(in srgb,var(--vc) 60%,transparent)}

/* Reservation follow-up + right-now bridge + onward links on the tool page
   Продовження з бронюваннями + місток «просто зараз» + лінки далі на сторінці інструмента */
.bt-res{margin-top:22px;padding:clamp(16px,3vw,24px);border-radius:16px}
.bt-res h3{font-family:"Unbounded",sans-serif;font-size:17px;color:var(--paper);margin-top:6px}
.bt-now-strip{margin-top:18px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.03)}
.bt-now-strip p{color:var(--paper);font-size:14px;margin-top:4px}
.bt-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* Hub strip: 12 clickable month cells colored by verdict; the current month gets the "now" ring
   Смуга хаба: 12 клікабельних клітинок-місяців у кольорі вердикту; поточний місяць — кільце «now» */
.bt-answer{color:var(--mut);font-size:14.5px;max-width:70ch;margin:6px 0 14px}
.bt-answer b{color:var(--lime)}
.bt-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
.bt-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px;border-radius:10px;
  text-decoration:none;border:1px solid color-mix(in srgb,var(--vc) 35%,transparent);
  background:color-mix(in srgb,var(--vc) 10%,transparent);transition:transform .15s,box-shadow .2s}
.bt-cell b{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--vc)}
.bt-cell span{font-size:11.5px;color:var(--paper)}
.bt-cell:hover{transform:translateY(-3px);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--vc) 70%,transparent)}
.bt-cell.now{outline:2px solid var(--cyan);outline-offset:2px}
@media(max-width:720px){
  .bt-strip{grid-template-columns:repeat(6,1fr)}
  .bt-note{min-width:180px}
}

/* ===== PARK WEBCAMS (task C-12) — camera cards + the "where the cameras are" index =====
   The card must look finished WITHOUT a preview: only 18% of NPS cameras ship an image, so the
   layout is text-first and the shot is an optional band on top. Offline cards stay in the flow,
   dimmed but readable, because their status message is the useful part. */
/* ===== ВЕБКАМЕРИ ПАРКІВ (завдання C-12) — картки камер + індекс «де є камери» =====
   Картка мусить виглядати завершеною БЕЗ прев'ю: зображення має лише 18% камер NPS, тож розкладка
   спершу текстова, а кадр — необов'язкова смуга згори. Offline-картки лишаються в потоці,
   приглушені, але читабельні, бо корисне в них саме повідомлення статусу. */
.cam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:22px}
.cam-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .3s}
.cam-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -26px rgba(0,255,255,.5)}
.cam-card.is-off{opacity:.75}
.cam-card.is-off:hover{transform:none;box-shadow:none}

/* Preview band: fixed ratio so a slow image never shifts the text under it */
/* Смуга прев'ю: фіксована пропорція, тож повільне зображення не зсуває текст під ним */
.cam-shot{position:relative;aspect-ratio:16/9;background:rgba(255,255,255,.04);overflow:hidden}
.cam-shot img{width:100%;height:100%;object-fit:cover;display:block}
.cam-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,3,15,.75))}

.cam-body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 18px}
.cam-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cam-pill{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
/* Live gets the lime status token + a soft pulse — it is the one state worth noticing */
/* Live бере лаймовий статусний токен + мʼяку пульсацію — це єдиний стан, вартий уваги */
.cam-pill.ok{color:var(--lime);border-color:rgba(57,255,136,.45);background:rgba(57,255,136,.1);
  animation:cam-pulse 2.6s ease-in-out infinite}
@keyframes cam-pulse{
  0%,100%{box-shadow:0 0 10px -6px rgba(57,255,136,.7)}
  50%{box-shadow:0 0 20px -4px rgba(57,255,136,.85)}
}
@media(prefers-reduced-motion:reduce){.cam-pill.ok{animation:none}}
.cam-kind{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--mut)}
.cam-title{margin:0;font-family:"Unbounded",sans-serif;font-size:15.5px;line-height:1.3;color:var(--paper)}
/* Clamp the blurb: NPS descriptions run from "test image" to six sentences, which made the grid
   ragged — every card now shows the same three lines and the full text lives on the NPS page. */
/* Обрізаємо опис: описи NPS бувають від «test image» до шести речень, через що сітка була рваною —
   тепер кожна картка показує ті самі три рядки, а повний текст живе на сторінці NPS. */
.cam-desc{margin:0;font-size:13.5px;line-height:1.55;color:var(--mut);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cam-msg{margin:0;font-size:12.5px;line-height:1.5;color:#d9cf9a;
  border-left:2px solid rgba(255,214,0,.4);padding-left:10px}
.cam-open{margin-top:auto;padding-top:6px;font-family:"JetBrains Mono",monospace;font-size:12px;
  color:var(--cyan);text-decoration:none;align-self:flex-start}
.cam-open:hover{text-decoration:underline}
.cam-open.is-quiet{color:var(--mut)}
.cam-note{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--mut);max-width:80ch}
.cam-note a{color:var(--cyan)}

/* Index of parks that have cameras — chips, working-count first */
/* Індекс парків із камерами — чіпи, спершу к-сть робочих */
.cam-index{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.cam-chip{display:inline-flex;align-items:baseline;gap:8px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);text-decoration:none;transition:.2s}
.cam-chip:hover{border-color:rgba(0,255,255,.35);background:rgba(0,255,255,.06)}
.cam-chip.is-here{border-color:rgba(0,255,255,.5);background:rgba(0,255,255,.1)}
.cam-chip-name{font-size:13.5px;color:var(--paper)}
.cam-chip-n{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--lime)}
.cam-chip-n i{font-style:normal;color:var(--mut)}

/* Live conditions beside the cameras (C-12 follow-up). No bespoke widget: the weather and air
   quality cards are the hub's own .wx / .aq components, so this page matches the rest of the site.
   Only the two-column frame lives here. */
/* Живі умови поруч із камерами (доробка C-12). Жодного власного віджета: картки погоди і якості
   повітря — це власні компоненти хаба .wx / .aq, тож сторінка збігається з рештою сайту.
   Тут живе лише двоколонкова рамка. */
.cam-cond-grid{display:grid;gap:14px;margin-top:20px}
@media(min-width:820px){.cam-cond-grid{grid-template-columns:1.2fr 1fr}}

/* Live frame + refresh (C-12 follow-up). Only 16 parks publish a directly embeddable frame, so this
   is the delighter, not the baseline — cards without one keep their text-first layout. */
/* Живий кадр + оновлення (доробка C-12). Прямий кадр публікують лише 16 парків, тож це приємний
   бонус, а не база — картки без нього лишають текстову розкладку. */
.cam-shot.is-live{position:relative}
.cam-live-tag{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:7px;margin:0;
  padding:5px 11px;border-radius:999px;background:rgba(5,3,15,.72);backdrop-filter:blur(8px);
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.cam-live-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 10px var(--lime);animation:cam-blink 2.4s ease-in-out infinite}
@keyframes cam-blink{0%,100%{opacity:1}50%{opacity:.35}}
.cam-refresh{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;cursor:pointer;font:inherit;
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--paper);
  background:rgba(5,3,15,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);
  transition:border-color .2s,box-shadow .25s,transform .18s}
.cam-refresh:hover{border-color:rgba(0,255,255,.45);box-shadow:0 0 22px -8px var(--cyan);transform:translateY(-1px)}
.cam-refresh:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cam-refresh-ic{display:inline-block;font-size:13px;line-height:1}
.cam-refresh.is-spinning .cam-refresh-ic{animation:cam-spin .9s linear infinite}
@keyframes cam-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .cam-live-dot{animation:none}
  .cam-refresh.is-spinning .cam-refresh-ic{animation:none}
}

/* The hero live frame (C-12 follow-up) — the reason the page exists, so it leads rather than hides
   in the grid. 16/9 with fixed dimensions to hold its space while the remote image loads. */
/* Героїчний живий кадр (доробка C-12) — заради нього сторінка й існує, тож він веде, а не ховається
   в сітці. 16/9 із фіксованими розмірами, щоб тримати місце, поки вантажиться віддалене зображення. */
.cam-hero{position:relative;margin:22px 0 0;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 70px -34px rgba(0,255,255,.45)}
.cam-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cam-hero-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(5,3,15,.86));flex-wrap:wrap}
.cam-hero-tag{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.cam-hero-name{font-family:"Unbounded",sans-serif;font-size:15px;color:var(--paper)}
.cam-hero-bar .cam-refresh{position:static;margin-left:auto;order:3}
/* When the picture was last pulled. Recessive on purpose: it is a caveat, not a headline — the
   photo is the content, and the timestamp only exists so "live" is never read as "this second".
   Коли кадр востаннє забрали. Свідомо приглушено: це застереження, а не заголовок — контент тут
   фото, а мітка часу існує лише щоб «live» не читалось як «цієї секунди». */
.cam-age{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);opacity:.85}
.cam-hero-bar .cam-age{order:2}
.cam-live-tag .cam-age{margin-left:6px}
@media(max-width:560px){.cam-hero-name{font-size:13px}}

/* Camera view chips (C-12) — same pill language as the analytics range chips, with the count on
   board so a filter that would empty the page says so before it is clicked. */
/* Чіпи вигляду камер (C-12) — та сама мова пігулок, що в чіпах діапазону аналітики, з лічильником
   на борту: фільтр, який спорожнить сторінку, каже про це до кліку. */
.cam-views{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.cam-view-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mut);
  font-family:"JetBrains Mono",monospace;font-size:12px;text-decoration:none;transition:.2s}
.cam-view-chip:hover{color:var(--paper);border-color:rgba(0,255,255,.32)}
.cam-view-chip.on{color:var(--bg0);background:linear-gradient(90deg,var(--cyan),#22C3DE);
  border-color:transparent;font-weight:700}
.cam-view-n{font-size:11px;opacity:.75}
.cam-view-chip.on .cam-view-n{opacity:.9}

/* Webcam card in the hub's Live block (C-12) — a link-shaped card that carries the live frame when
   the park has one, because "see it now" belongs beside today's weather, not two clicks away. */
/* Картка вебкамер у Live-блоці хаба (C-12) — картка-лінк, що несе живий кадр, коли парк його має,
   бо «побач зараз» належить поруч із сьогоднішньою погодою, а не за два кліки. */
.cam-hub{display:flex;flex-direction:column;gap:0;overflow:hidden;text-decoration:none;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .25s}
.cam-hub:hover{transform:translateY(-3px);box-shadow:0 26px 54px -28px rgba(0,255,255,.5)}
.cam-hub-shot{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:rgba(255,255,255,.04)}
.cam-hub-shot img{width:100%;height:100%;object-fit:cover;display:block}
.cam-hub-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(180deg,transparent,rgba(5,3,15,.8));pointer-events:none}
.cam-hub-body{display:flex;flex-direction:column;gap:4px;padding:16px 18px}
.cam-hub-label{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.cam-hub.has-shot .cam-hub-label{color:var(--lime)}
.cam-hub-body b{font-size:15px;font-weight:700;line-height:1.25;color:var(--paper)}
.cam-hub-sub{font-size:11.5px;color:var(--mut)}
.cam-hub-cta{margin-top:4px;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--cyan)}
.cam-hub:hover .cam-hub-cta{text-decoration:underline}

/* ===== METEOR SHOWERS (C-9 follow-up) — the calendar plus the Moon that decides it =====
   Status lives in three channels at once (icon + label + colour), never in colour alone, and the
   Moon is drawn rather than typed as an emoji: only a real disc can show "37% lit", which is the
   whole reason the card exists. */
/* ===== МЕТЕОРНІ ПОТОКИ (доробка C-9) — календар плюс Місяць, який усе вирішує =====
   Статус живе одразу в трьох каналах (іконка + підпис + колір), ніколи лише в кольорі, а Місяць
   намальований, а не набраний емодзі: тільки справжній диск покаже «освітлений на 37%», і саме
   заради цього картка існує. */
.met-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:22px}
.met-card{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:20px;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.met-card:hover{transform:translateY(-3px)}
/* Verdict tints the card's edge, so a scan of the grid reads at a glance */
/* Вердикт тонує край картки, тож погляд по сітці читається миттєво */
.met-card.is-great{border-color:rgba(57,255,136,.4);box-shadow:0 24px 52px -30px rgba(57,255,136,.55)}
.met-card.is-good{border-color:rgba(0,255,255,.3)}
.met-card.is-poor{border-color:var(--line);opacity:.9}

.met-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.met-verdict{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut)}
.met-card.is-great .met-verdict{color:var(--lime);border-color:rgba(57,255,136,.45);background:rgba(57,255,136,.1)}
.met-card.is-good .met-verdict{color:var(--cyan);border-color:rgba(0,255,255,.35);background:rgba(0,255,255,.08)}
.met-when{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mut)}

.met-name{margin:2px 0 0;font-family:"Unbounded",sans-serif;font-size:20px;line-height:1.15;color:var(--paper)}
.met-peak{margin:0;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mut)}

.met-body{display:flex;align-items:center;gap:16px;margin-top:6px}
.met-moon{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
.met-moon svg{display:block;filter:drop-shadow(0 0 14px rgba(255,248,214,.35))}
.met-moon-cap{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.06em;color:var(--mut);white-space:nowrap}
.met-facts{min-width:0}
.met-rate{display:flex;align-items:baseline;gap:8px}
.met-rate b{font-family:"Unbounded",sans-serif;font-size:26px;color:var(--paper);line-height:1}
.met-rate span{font-size:11.5px;color:var(--mut)}
.met-why{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--mut)}

.met-note{margin:8px 0 0;font-size:13px;line-height:1.55;color:#c7c2de}
.met-parent{margin:0;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--mut)}
.met-parent b{color:var(--paper);font-weight:400}
.met-caveat{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--mut);max-width:80ch}

/* Dark-sky certified roster (C-9 follow-up). The mark is a star, not a colour swatch: certification
   is a binary fact, so there is nothing to shade — either the registry lists the park or it doesn't. */
/* Реєстр сертифікованих (доробка C-9). Знак — зірка, а не кольоровий зразок: сертифікація це
   двійковий факт, тож немає чого відтіняти — реєстр або перелічує парк, або ні. */
.ds-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ds-chip{display:inline-flex;align-items:baseline;gap:9px;padding:10px 16px;border-radius:999px;
  text-decoration:none;border:1px solid rgba(255,248,214,.22);background:rgba(255,248,214,.05);
  transition:transform .18s,border-color .22s,box-shadow .28s}
.ds-chip:hover{transform:translateY(-2px);border-color:rgba(255,248,214,.45);
  box-shadow:0 0 26px -10px rgba(255,248,214,.5)}
.ds-mark{color:#FFF8D6;font-size:12px;text-shadow:0 0 12px rgba(255,248,214,.7)}
.ds-name{font-size:14px;color:var(--paper)}
.ds-state{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--mut)}
/* A certified park in the guide list wears the same star, so the two sections agree at a glance */
/* Сертифікований парк у списку гайдів носить ту саму зірку, тож дві секції узгоджуються поглядом */
.act.is-dark-sky{border-color:rgba(255,248,214,.3);background:rgba(255,248,214,.06)}

/* ===== NIGHT-SKY GALLERY (C-9 follow-up) =====
   Masonry via CSS columns: night photographs come in wildly different crops, and forcing them into
   a uniform grid would crop the sky out of half of them. Columns keep every frame whole.
   The caption is always present, not hover-only — a credit is a condition of use, and hiding it
   behind a hover would fail on touch entirely. */
/* ===== ГАЛЕРЕЯ НІЧНОГО НЕБА (доробка C-9) =====
   Masonry через CSS columns: нічні фото мають дуже різні пропорції, і втиснути їх у рівну сітку
   означало б обрізати небо в половини. Колонки лишають кожен кадр цілим.
   Підпис присутній завжди, не лише при наведенні — кредит це умова використання, а сховати його за
   hover означало б не показати його на дотику взагалі. */
/* Tighter gutters and a height cap (user feedback: "no gaps, nothing hanging"). The cap crops only
   the extreme portrait outliers that stretched a column far past its neighbours — everything else
   still arrives whole, and the lightbox always shows the uncropped frame. */
/* Вужчі проміжки й стеля висоти (фідбек користувача: «без пропусків і звисань»). Стеля обрізає лише
   крайні вертикальні викиди, що витягували колонку значно нижче сусідніх — решта лишається цілою,
   а лайтбокс завжди показує необрізаний кадр. */
.ng-grid{columns:3 260px;column-gap:10px;margin-top:24px}
@media(max-width:640px){.ng-grid{columns:1}}
.ng-item{break-inside:avoid;margin:0 0 10px;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);cursor:zoom-in;background:rgba(255,255,255,.03);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .25s}
.ng-item:hover{transform:translateY(-4px);border-color:rgba(255,248,214,.35);
  box-shadow:0 28px 60px -30px rgba(255,248,214,.45)}
.ng-item:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.ng-item img{display:block;width:100%;height:auto;max-height:400px;object-fit:cover}
.ng-cap{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:2px;
  padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(5,3,15,.9));pointer-events:none}
.ng-title{font-size:13.5px;line-height:1.3;color:var(--paper)}
.ng-meta{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mut)}

/* Lightbox — the native dialog, styled to match the site rather than the browser default.
   The dialog fills the viewport and centres its own stage: the global `*{margin:0}` reset wipes the
   UA `dialog{margin:auto}`, and with `inset:0` still in force that reset is exactly what pinned the
   open lightbox into the top-left corner (user feedback). Owning the centring also gives the
   step-through arrows somewhere to sit. */
/* Лайтбокс — рідний dialog, стилізований під сайт, а не під дефолт браузера.
   Діалог займає весь екран і центрує власну сцену: глобальний ресет `*{margin:0}` стирає
   `dialog{margin:auto}` від браузера, і при чинному `inset:0` саме цей ресет притискав відкритий
   лайтбокс у лівий верхній кут (фідбек користувача). Власне центрування ще й дає місце стрілкам. */
.ng-lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;
  border:none;padding:0;overflow:hidden;background:transparent;color:var(--paper)}
.ng-lightbox[open]{display:grid;place-items:center}
.ng-lightbox::backdrop{background:rgba(3,2,10,.86);backdrop-filter:blur(6px)}
.ng-stage{position:relative;width:min(1100px,92vw);display:flex;flex-direction:column}
.ng-frame{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,248,214,.2);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.ng-full{display:block;width:100%;height:auto;max-height:74vh;object-fit:contain}
.ng-info{display:flex;flex-direction:column;gap:3px;padding:14px 4px 0}
.ng-info-title{font-family:"Unbounded",sans-serif;font-size:16px}
.ng-info-meta{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mut)}
.ng-info-link{margin-top:4px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--cyan);
  text-decoration:none;width:fit-content}
.ng-info-link:hover{text-decoration:underline}
.ng-close{position:absolute;top:-16px;right:-8px;z-index:3;width:38px;height:38px;border-radius:50%;
  cursor:pointer;font-size:15px;line-height:1;color:var(--paper);
  background:rgba(12,6,32,.9);border:1px solid rgba(255,255,255,.18);transition:.2s}
.ng-close:hover{border-color:rgba(255,45,150,.5);color:var(--magenta)}
@media(max-width:900px){.ng-close{top:8px;right:8px}}

/* Step-through controls: arrows over the frame and a position counter, so it is obvious there is
   more than one photograph here and where in the run you are. */
/* Контроли гортання: стрілки поверх кадру й лічильник позиції, щоб було очевидно, що фото більше
   за одне, і де саме ти в цій низці. */
.ng-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;
  border-radius:50%;cursor:pointer;font-size:26px;line-height:1;color:var(--paper);
  display:grid;place-items:center;background:rgba(12,6,32,.72);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);
  transition:background .2s,border-color .2s,transform .2s}
.ng-prev{left:12px}
.ng-next{right:12px}
.ng-nav:hover{background:rgba(24,12,58,.92);border-color:rgba(255,248,214,.45)}
.ng-prev:hover{transform:translateY(-50%) translateX(-3px)}
.ng-next:hover{transform:translateY(-50%) translateX(3px)}
.ng-count{position:absolute;top:12px;left:14px;z-index:2;padding:5px 10px;border-radius:999px;
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--paper);
  background:rgba(12,6,32,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px)}

/* Opening rises out of the backdrop; closing shrinks back into it; stepping slides the new frame in
   from the side you asked for, so the direction of travel is felt and not just seen. */
/* Відкриття підіймається з підкладки, закриття згортається назад у неї, а гортання вводить новий
   кадр із того боку, який ти попросив, — напрям руху відчувається, а не лише бачиться. */
@keyframes ngRise{from{opacity:0;transform:scale(.9) translateY(22px);filter:blur(10px)}
                  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ngSink{from{opacity:1;transform:none;filter:blur(0)}
                  to{opacity:0;transform:scale(.94) translateY(12px);filter:blur(8px)}}
@keyframes ngFade{from{opacity:0}to{opacity:1}}
@keyframes ngFromRight{from{opacity:0;transform:translateX(52px) scale(.96)}
                       to{opacity:1;transform:none}}
@keyframes ngFromLeft{from{opacity:0;transform:translateX(-52px) scale(.96)}
                      to{opacity:1;transform:none}}
.ng-lightbox[open] .ng-stage{animation:ngRise .4s cubic-bezier(.16,1,.3,1)}
.ng-lightbox[open]::backdrop{animation:ngFade .32s ease}
.ng-lightbox.is-closing .ng-stage{animation:ngSink .19s ease forwards}
.ng-lightbox.is-closing::backdrop{animation:ngFade .19s ease reverse forwards}
.ng-frame.to-next .ng-full{animation:ngFromRight .36s cubic-bezier(.16,1,.3,1)}
.ng-frame.to-prev .ng-full{animation:ngFromLeft .36s cubic-bezier(.16,1,.3,1)}

@media(prefers-reduced-motion:reduce){.ng-item{transition:none}.ng-item:hover{transform:none}
  .ng-lightbox[open] .ng-stage,.ng-lightbox[open]::backdrop,.ng-frame .ng-full{animation:none}}

/* ── Trail page (task TR-1b) ─────────────────────────────────────────────────
   Lives in park.css because the page lives under /parks/*. If any partial from
   this page is ever included outside /parks/*, its rules move to main.css —
   a partial whose styles are not in base.html is a trap for the next editor.
   The page reads as a DOCUMENT, not a landing page: it is read before setting
   off, often in sunlight and one-handed, so the body text is bigger and the
   measure shorter than anywhere else on the site.
   ── Сторінка трейла (завдання TR-1b) ─────────────────────────────────────────
   Живе в park.css, бо сторінка живе під /parks/*. Якщо якийсь партіал звідси
   колись підключать поза /parks/*, його правила переїжджають у main.css —
   партіал, чиїх стилів немає в base.html, це пастка для наступного редактора.
   Сторінка читається як ДОКУМЕНТ, а не лендінг: її читають перед виходом, часто
   на сонці й однією рукою, тож тіло тексту крупніше, а міра рядка коротша, ніж
   деінде на сайті. */
#answer{max-width:68ch}
.tr-permit{max-width:68ch;margin-top:16px;padding:13px 16px;border-radius:var(--r-md);
  background:rgba(255,0,255,.07);border:1px solid rgba(255,0,255,.3);font-size:15px;line-height:1.6}

/* Suitability chips — three states, and the unknown one must never borrow the "no" styling */
/* Чіпи придатності — три стани, і невідомий ніколи не позичає оформлення «ні» */
.tr-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.tr-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 15px;
  border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:14px}
.tr-chip.yes{border-color:rgba(174,255,0,.34);color:var(--paper)}
.tr-chip.no{color:var(--mut)}
.tr-chip.unk{color:var(--mut);border-style:dashed;opacity:.85}
.tr-exposure{max-width:68ch;margin-top:16px;font-size:16px;line-height:1.7}
.tr-exposure span{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);display:block;margin-bottom:4px}

/* Two bars, both drawn from a measured number. No elevation profile: no track, no max elevation. */
/* Дві смужки, обидві з виміряного числа. Жодного профілю висоти: немає ні треку, ні макс. висоти. */
.tr-bars{display:grid;gap:22px;margin-top:20px;max-width:68ch}
.tr-bar-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:9px}
.tr-bar-head b{font-family:"JetBrains Mono",monospace;font-size:19px;color:var(--paper)}
.tr-bar-head span{font-size:13.5px;color:var(--mut)}
.tr-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.tr-bar-fill{display:block;height:100%;border-radius:999px;transition:width .6s cubic-bezier(.16,1,.3,1)}
.tr-bar-fill.steep{background:linear-gradient(90deg,var(--cyan),var(--magenta))}
.tr-bar-fill.shade{background:linear-gradient(90deg,var(--yellow),var(--lime))}
.tr-note{max-width:68ch;margin-top:20px;font-size:16px;line-height:1.7;color:var(--mut)}

/* Live layer — park-level, and the caption says so on every card */
/* Живий шар — рівня парку, і підпис каже про це на кожній картці */
.tr-live{display:grid;gap:12px;margin-top:18px}
@media(min-width:760px){.tr-live{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.tr-live-card{padding:17px;border-radius:var(--r-md)}
.tr-live-card b{display:block;font-size:15px;margin-bottom:6px}
.tr-live-card p{font-size:14.5px;line-height:1.6;color:var(--paper)}
.tr-live-src{display:block;margin-top:9px;font-size:11.5px;color:var(--mut)}
.tr-live-card.alert-card{border-color:rgba(255,255,0,.28)}

/* Long-form guide: the one place on the site where people read paragraphs */
/* Довгий гайд: єдине місце на сайті, де люди справді читають абзаци */
.tr-guide .g-body{font-size:17px;line-height:1.75}
.tr-guide .g-body p{max-width:68ch;margin-bottom:13px}
.tr-guide .g-body li{max-width:68ch;margin-bottom:8px}

/* Neighbouring trails — the reason is the link's context, not decoration */
/* Сусідні трейли — причина є контекстом лінка, а не оздобою */
.tr-nb-grid{display:grid;gap:12px;margin-top:18px}
@media(min-width:760px){.tr-nb-grid{grid-template-columns:repeat(3,1fr)}}
.tr-nb{display:block;padding:18px;border-radius:var(--r-md);transition:transform .25s}
.tr-nb:hover{transform:translateY(-3px)}
.tr-nb-why{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan)}
.tr-nb b{display:block;margin:7px 0 5px;font-size:16px}
.tr-nb-nums{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--mut)}

/* The trail name in the hub table is now a link — it must read as one on a phone too */
/* Назва трейла в таблиці хаба тепер лінк — на телефоні це має читатись як лінк */
.trail-table .t-link{color:var(--paper);border-bottom:1px solid rgba(0,255,255,.4)}
.trail-table .t-link:hover{color:var(--cyan)}

@media(prefers-reduced-motion:reduce){.tr-bar-fill{transition:none}.tr-nb:hover{transform:none}}