/* Z-197 /marinas/: марины по маршруту. Light-страница (как /food/, /ops/): без vendor и фото, тёмная по умолчанию, кнопка темы.
   Мобильный первый (360–412): компактная карточка (имя, роль, цена/ночь, чипы главного, 1–3 кнопки ≥ 52 px), остальное — <details>;
   тап-цели ≥ 44 px, safe-area (viewport-fit=cover в base); на ≥ 900 — две колонки карточек.
   Цвета — токены tokens.css + свои --card/--panel/--hot в двух темах (как pages/food.css). Текст ≥ 7:1. */
:root{--card:#ffffff;--panel:#eef6f8;--hot:#005c73;--hair:#c9cfd0;--sea:#dcecf1;--landc:#ece6dc;--trk:#b0471a;
  --warn-bg:#fff1e0;--warn-ink:#6b3a00;--ok-bg:#e3f2ea;--ok-ink:#0d4d2c}
html[data-theme=dark]{--card:#1b1816;--panel:#1f1b18;--hot:#e0ae58;--hair:#3a3430;--sea:#14232a;--landc:#2b2622;--trk:#ff9a62;
  --warn-bg:#3a2410;--warn-ink:#ffd8a8;--ok-bg:#0f2a1d;--ok-ink:#a8e6c2}
.page-marinas{font-variant-numeric:lining-nums tabular-nums}
.page-marinas [hidden]{display:none!important}

/* шапка: кнопка темы (только light-страницы; правила как в pages/food.css) */
.theme-btn{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;
  border:1.5px solid var(--ink);background:none;color:var(--ink);cursor:pointer;padding:0}
.theme-btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
[data-theme=light] .theme-btn svg{transform:rotate(180deg)}
@media (max-width:420px){.page-marinas .bar .ticket--mini{display:none}}

.page-marinas a{color:var(--hot)}
.mar-head{padding:clamp(28px,5vw,64px) var(--gutter) 8px}
.mar-head h1{font-size:clamp(2.4rem,5vw,4.2rem)}
.mar-head .lede{margin-top:12px;font:400 1.02rem/1.5 var(--font-text);color:var(--muted);max-width:72ch}
.small,.sub,small{font-size:var(--fs-small);color:var(--muted)}
.muted{color:var(--muted)}
.fx{margin:8px 0 0}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--hair);border-radius:999px;
  color:var(--ink);text-decoration:none;font-size:.95rem}
.toc a:hover,.toc a:focus-visible{border-color:var(--hot)}

/* safe-area: на iPhone в ландшафте поля не уходят под вырез (viewport-fit=cover только у /food/ и /marinas/) */
.page-marinas .wrap,.page-marinas .mar-head{padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right))}
.page-marinas main{padding-bottom:env(safe-area-inset-bottom)}

.msec{padding-block:clamp(28px,4vw,48px) 8px;scroll-margin-top:calc(var(--header-h) + 8px)}
.msec>h2{font-size:clamp(1.7rem,3vw,2.6rem);margin-bottom:8px}
.msec>.sub{max-width:76ch;margin:0 0 14px;line-height:1.5}

/* сводка */
.cards3{display:grid;gap:14px}
@media (min-width:900px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.box{border:1px solid var(--hair);border-radius:14px;background:var(--card);padding:16px}
.box h3{font-size:1.25rem;margin:0 0 10px}
.box p{margin:10px 0 0;line-height:1.5}
.steps{margin:0;padding-left:1.2em;line-height:1.5}
.steps li{margin-bottom:6px}
.rule{color:var(--ink)}
.tot{width:100%;border-collapse:collapse;font-size:.95rem}
.tot th,.tot td{padding:6px 4px;border-bottom:1px solid var(--hair);text-align:right;vertical-align:top}
.tot th:first-child{text-align:left}
.tot thead th{font-size:var(--fs-small);color:var(--muted);font-weight:600}
.tot .is-base{background:var(--panel)}

.vhfs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;margin-bottom:12px}
.ch{margin:0;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--hair);border-radius:12px;background:var(--card)}
.ch b{font:700 2.2rem/1 var(--font-display);color:var(--hot);min-width:1.6em;text-align:center}
.ch span{line-height:1.35;min-width:0;overflow-wrap:anywhere}

/* карта */
.mar-defs{position:absolute;width:0;height:0;overflow:hidden}
.mmap{display:block;width:100%;height:auto;border:1px solid var(--hair);border-radius:14px;background:var(--sea)}
.mmap-all{max-width:1100px}   /* без max-height: иначе letterbox показывает суше за краем coast.json (4° в. д.) */
.mmap-seg{max-width:1100px;margin:6px 0 16px}
.mmap .sea{fill:var(--sea)}
#mar-base .land{fill:var(--landc);stroke:var(--muted);stroke-width:.6;vector-effect:non-scaling-stroke}
#mar-base .trk{fill:none;stroke:var(--trk);stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.mmap .pt{stroke:var(--paper);stroke-width:1.5;vector-effect:non-scaling-stroke}
.mmap .pt-main{fill:var(--hot)}
.mmap .pt-backup{fill:var(--card);stroke:var(--hot);stroke-width:2.5}
.mmap .pt-anch{fill:#2f7d4f}
.mmap .pt-fuel{fill:#b0471a}
.mmap .pn{text-anchor:middle;font-weight:700;font-family:var(--font-text);fill:var(--paper);pointer-events:none}
.mmap .pt-backup+.pn{fill:var(--ink)}
.mmap a:focus-visible .pt{stroke:var(--ink);stroke-width:4}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:var(--fs-small);color:var(--muted);margin:0 0 10px}
.legend .li{white-space:nowrap}
.lg{display:inline-block;width:14px;height:14px;margin-right:4px;vertical-align:-2px;border-radius:50%;background:var(--hot)}
.lg-backup{background:var(--card);border:2.5px solid var(--hot)}
.lg-anch{background:#2f7d4f;border-radius:0;transform:rotate(45deg) scale(.85)}
.lg-fuel{background:#b0471a;border-radius:2px}

/* карточки: компактная голова + чипы + кнопки, детали — в <details class="more"> */
.mlist{display:grid;gap:14px}
@media (min-width:900px){.mlist{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.marina{border:1px solid var(--hair);border-radius:16px;background:var(--card);padding:14px 14px 4px;
  scroll-margin-top:calc(var(--header-h) + 12px);min-width:0;display:flex;flex-direction:column;gap:10px}
.marina:target{outline:3px solid var(--hot);outline-offset:2px}
.marina.role-main{border-left:6px solid var(--hot)}
.marina>*{margin:0;min-width:0}
.mh{display:flex;gap:12px;align-items:flex-start}
.mt{min-width:0}
.num{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--hot);color:var(--paper);font-weight:700;margin-top:2px}
.role-backup .num{background:var(--card);color:var(--ink);border:2.5px solid var(--hot)}
.role-anchorage .num{background:#2f7d4f;color:#fff}
.role-fuel .num{background:#b0471a;color:#fff;border-radius:6px}
.mh h3{font-size:1.28rem;line-height:1.2;margin:0;overflow-wrap:anywhere}
.where{margin:3px 0 0;font-size:var(--fs-small);color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.where .role{font-weight:600;color:var(--ink)}
.plan{font-weight:600;line-height:1.35;font-size:.95rem}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:8px 12px;border-radius:12px;background:var(--panel)}
.price b{font:700 1.5rem/1.15 var(--font-display);color:var(--hot);overflow-wrap:anywhere}
.price .pn2{font-size:var(--fs-small);color:var(--muted);line-height:1.3}
.price.is-none b{font:600 1rem/1.3 var(--font-text);color:var(--muted)}
.feats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ft{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border-radius:999px;font-size:.84rem;line-height:1.25;
  border:1px solid var(--hair);color:var(--muted)}
/* иконки чипов — маска из inline SVG (одна на страницу в CSS, не 120 <svg> в HTML) */
.ft::before{content:"";flex:none;width:17px;height:17px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.i-fuel{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16M3 21h14M8 7h4M15 10h2a2 2 0 0 1 2 2v4a1.5 1.5 0 0 0 3 0V8l-3-3'/%3E%3C/svg%3E")}
.i-pump{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11M7.5 9.5 12 14l4.5-4.5M4 17c2.5 2.5 5.5 2.5 8 0s5.5-2.5 8 0'/%3E%3C/svg%3E")}
.i-wp{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4'/%3E%3C/svg%3E")}
.i-cat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15h7l-1 4H4zM14 15h7l-1 4h-5zM10 16.5h4M12 4v10M12 4l6 9h-6'/%3E%3C/svg%3E")}
.ft-1,.ft-incl,.ft-has{color:var(--ok-ink);background:var(--ok-bg);border-color:transparent}
.ft-0,.ft-extra{color:var(--warn-ink);background:var(--warn-bg);border-color:transparent}
.ft-u{border-style:dashed}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.act{flex:1 1 8.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:52px;min-width:0;padding:6px 10px;
  border-radius:12px;border:1.5px solid var(--hot);color:var(--ink)!important;text-decoration:none;font-weight:700;font-size:1rem;
  text-align:center;line-height:1.15}
.act small{font-weight:400;font-size:.74rem;margin-top:2px;color:var(--muted);max-width:100%;overflow-wrap:anywhere}
.act-book{flex-basis:100%;background:var(--hot);color:var(--paper)!important}
.act-book small{color:var(--paper);opacity:.85}
.act:hover,.act:focus-visible{background:var(--panel)}
.act-book:hover,.act-book:focus-visible{background:var(--hot);filter:brightness(1.1)}
.acts-2 .act{min-height:48px;font-size:.95rem;border-width:1px}
.more{border-top:1px solid var(--hair);margin:0 -14px;padding:0 14px}
.more>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;font-weight:600}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s}
.more[open]>summary::before{transform:rotate(45deg)}
.more>summary small{font-weight:400}
.more[open]{padding-bottom:12px}
.more .acts-2{margin:4px 0 10px}
.facts{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:6px 10px;margin:0;font-size:.92rem;line-height:1.45}
.facts dt{color:var(--muted);font-weight:600}
.facts dd{margin:0;overflow-wrap:anywhere;min-width:0}
.facts .vhf{font:700 1.3rem/1 var(--font-display);color:var(--hot)}
.facts .lnk{display:flex;flex-wrap:wrap;column-gap:14px;align-items:center}
.facts .lnk a,.src a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.facts .lnk a[href^="tel:"]{white-space:nowrap}
@media (max-width:420px){.facts{grid-template-columns:minmax(0,1fr);gap:2px}.facts dd{margin-bottom:8px}}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.78rem;font-weight:600}
.tag-est{background:var(--warn-bg);color:var(--warn-ink)}
.tag-ok{background:var(--ok-bg);color:var(--ok-ink)}
.src-h{margin:10px 0 0;font-size:var(--fs-small);color:var(--muted);font-weight:600}
.src{margin:0;padding-left:1.1em;font-size:.8rem;line-height:1.35;color:var(--muted)}
.src a{overflow-wrap:anywhere}

/* Z-197 ф.2: #m-tools (static/js/marinas.js) — липкая строка под шапкой: кнопка «Фильтры · Сортировка (N)», счётчик, статус;
   панель раскрывается вниз со своим скроллом (не больше экрана минус шапка). --mt-h (высота строки) — от JS, для якорей. */
html{scroll-padding-top:calc(var(--header-h) + var(--mt-h,0px) + 12px)}
#m-tools{position:sticky;top:var(--header-h);z-index:40;background:var(--paper);border-bottom:1px solid var(--hair);
  padding:6px max(var(--gutter),env(safe-area-inset-right)) 6px max(var(--gutter),env(safe-area-inset-left))}
.mt-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}   /* одна строка ≤ 57 px: кнопка + «10 из 30» */
.mt-toggle{display:inline-flex;align-items:center;gap:0;min-height:44px;min-width:0;padding:0 16px;white-space:nowrap;border-radius:999px;border:1.5px solid var(--hot);
  background:none;color:var(--ink);font:600 1rem/1.2 var(--font-text);cursor:pointer}
.mt-toggle::after{content:"";flex:none;width:12px;height:8px;background:currentColor;   /* без transition: панель меняется мгновенно, шеврон тоже */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.mt-toggle[aria-expanded=true]::after{transform:rotate(180deg)}
.mt-long,.mt-n:not(:empty){margin-left:.3em}   /* в inline-flex ведущий пробел текста схлопывается */
.mt-toggle::after{margin-left:10px}
@media (max-width:389px){.mt-long{display:none}}
.mt-count{margin:0;flex:none;white-space:nowrap;font-size:var(--fs-small);color:var(--muted)}
.mt-status{margin:4px 0 0;font-size:var(--fs-small);line-height:1.35;color:var(--ink)}
.mt-status:empty{margin:0}
.mt-panel{display:grid;gap:12px;padding:10px 0 0;max-height:calc(100dvh - var(--header-h) - 90px);overflow:auto;overscroll-behavior:contain}
.mt-grp{border:0;margin:0;padding:0;min-width:0}
.mt-grp legend{padding:0;margin-bottom:6px;font-weight:600;font-size:var(--fs-small);color:var(--muted)}
.mchips,.mt-ref{display:flex;flex-wrap:wrap;gap:6px}
.mchip{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid var(--hair);background:var(--card);
  color:var(--ink);font:500 .95rem/1.2 var(--font-text);cursor:pointer}
.mchip[aria-pressed=true]{background:var(--hot);border-color:var(--hot);color:var(--paper);font-weight:700}
.mt-ref{margin-top:8px;align-items:center}
.mt-ref select{flex:1 1 12rem;min-width:0;max-width:100%;min-height:44px;padding:0 34px 0 12px;border-radius:12px;border:1px solid var(--hair);
  -webkit-appearance:none;appearance:none;color:var(--ink);font:inherit;   /* WebKit без appearance:none игнорирует min-height */
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23889' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px}
.mt-note{flex-basis:100%;margin:6px 0 0;font-size:.8rem;line-height:1.35;color:var(--muted)}
.mt-foot{display:flex;gap:8px;position:sticky;bottom:0;padding:6px 0 4px;background:var(--paper)}
.mt-foot button,.m-empty button{flex:1;min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--hot);background:none;
  color:var(--ink);font:600 1rem/1.2 var(--font-text);cursor:pointer}
.mt-foot .mt-done{background:var(--hot);color:var(--paper)}
.mchip:focus-visible,.mt-toggle:focus-visible,.mt-foot button:focus-visible,.m-empty button:focus-visible,.mt-ref select:focus-visible{outline:3px solid var(--hot);outline-offset:2px}
.m-empty{padding-block:24px 8px}
.m-empty p{margin:0 0 10px;font-weight:600}
.m-empty button{flex:none}
.marina .dist{font-weight:700;font-size:.95rem;color:var(--hot)}
.mmap a.off{opacity:.25}
@media (min-width:900px){.mt-panel{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}.mt-foot{grid-column:1/-1;max-width:420px}}