/* Component styles. All values resolve to a token in tokens.css (mirror of DESIGN.md). */
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);line-height:1.6}
b,strong{font-weight:700}
a{color:var(--primary)}
.topbar{display:flex;align-items:center;gap:var(--sp-xl);height:var(--topbar-h);padding:0 var(--sp-lg);
  background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.brand{font-family:var(--font-head);font-weight:600;color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.brand-logo{width:26px;height:26px;flex:0 0 auto;color:var(--primary)}
.stat-num{font-family:var(--font-head);font-weight:800;font-size:2rem;line-height:1}
.nav{display:flex;gap:var(--sp-lg);flex-wrap:nowrap;flex:1;justify-content:center;min-width:0}
.nav a{color:var(--muted);text-decoration:none;font-size:.875rem;padding:4px 0;border-bottom:2px solid transparent}
.nav a.active{color:var(--fg);border-bottom-color:var(--primary)}
.nav-burger{display:none;align-items:center;justify-content:center;background:none;border:0;color:var(--fg);cursor:pointer;padding:6px}
.nav-backdrop{display:none}
/* account menu (top-right) */
.account{position:relative;margin-left:auto}
.account-btn{display:flex;align-items:center;gap:var(--sp-sm);background:none;border:1px solid var(--border);
  border-radius:var(--r-full);padding:4px 12px 4px 4px;cursor:pointer;font:inherit;color:var(--fg)}
.account-btn:hover{background:var(--muted-bg)}
.account-avatar{width:28px;height:28px;border-radius:var(--r-full);background:var(--primary);color:var(--primary-fg);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.75rem}
.account-name{font-size:.875rem}
.caret{width:14px;height:14px;flex:none;color:var(--muted)}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(0,0,0,.08);padding:4px;display:none;z-index:20}
.account-menu.open{display:block}
.account-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;font-family:inherit;font-size:.875rem;color:var(--fg);text-decoration:none}
.account-item svg{flex:0 0 auto;color:var(--muted)}
.account-item:hover{background:var(--muted-bg)}
#app{max-width:var(--container-max);margin:0 auto;padding:var(--sp-xl) var(--sp-lg)}
h1,h2,h3{font-family:var(--font-head);letter-spacing:-.01em;margin:0 0 var(--sp-md)}
h1{font-size:2rem;font-weight:800} h2{font-size:1.5rem;font-weight:700} h3{font-size:1.125rem;font-weight:600}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-lg)}
.chip{display:inline-block;background:var(--muted-bg);border-radius:var(--r-full);
  padding:2px 10px;font-size:.75rem;color:var(--muted);margin:2px 4px 2px 0}
.muted{color:var(--muted)}
.back-link{display:inline-block;margin-bottom:var(--sp-md);font-size:.875rem;text-decoration:none}
/* [hidden] must win over class display rules (e.g. .avatar's flex) */
[hidden]{display:none!important}
.avatar{width:44px;height:44px;border-radius:var(--r-md);background:var(--primary);color:var(--primary-fg);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1rem;flex:0 0 auto}
/* round photo placeholder in the profile card */
.profile-head{display:flex;gap:var(--sp-md);align-items:center;margin-bottom:var(--sp-md)}
.profile-head h1{margin:0}
.avatar-round{width:72px;height:72px;border-radius:var(--r-full);background:var(--muted-bg);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;
  font-size:1.5rem;flex:0 0 auto;border:1px solid var(--border)}
.avatar img,.avatar-round img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.avatar-round:has(img){background:none}
/* structured profile blocks (компетенции / индустрии / увлечения / telegram) */
.pblock{margin:var(--sp-md) 0}
/* свободный текст, приехавший в список тегов: набирается абзацем под чипами */
.pblock-text{margin:8px 0 0;line-height:1.55}
/* Список из анкеты: человек писал по пункту в строке — так и показываем */
.plist-lines{margin:8px 0 0;padding-left:20px;line-height:1.55}
.plist-lines li{margin:3px 0}
.plist-lines li::marker{color:var(--muted)}
/* абзацы «о себе» в карточке профиля — воздух между частями анкеты */
.profile-card>p{margin:var(--sp-md) 0;line-height:1.6}
.plabel{font-family:var(--font-head);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* unified explorer: pairs strip + cluster filter */
.pairs-strip{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-md) var(--sp-lg);margin-bottom:var(--sp-lg)}
.pairs-strip-empty{display:flex;align-items:center;gap:var(--sp-sm);flex-wrap:wrap}
.pairs-strip-head{font-family:var(--font-head);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-sm)}
.pairs-strip-head .me-change{font-size:.7rem;margin-left:6px}
.pairs-strip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-md)}
.pair-chip{display:flex;align-items:center;gap:var(--sp-sm);padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-lg);text-decoration:none;color:var(--fg);transition:border-color .12s}
.pair-chip:hover{background:var(--hover-bg)}
.pair-chip-txt{flex:1;min-width:0}
.pair-chip-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inline-select{width:auto;display:inline-block}
.cl-banner{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-md);background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--r-lg);padding:12px 16px;margin-bottom:var(--sp-lg)}
.cl-clear{white-space:nowrap;font-size:.85rem;text-decoration:none}
@media(max-width:780px){.pairs-strip-row{grid-template-columns:1fr}}
/* contacts list page */
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 6px}
.fchip{padding:7px 13px;border:1px solid var(--border);border-radius:var(--r-full);font-size:.85rem;background:var(--card);cursor:pointer}
.fchip.on{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.fchip-more{border-style:dashed;color:var(--muted)}
.cl-desc{font-size:.85rem;margin:4px 0 var(--sp-md)}
/* two-column page: main (list / profile) + right rail */
.page-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--sp-lg);align-items:start}
.page-main{min-width:0}
.page-side{position:sticky;top:calc(var(--topbar-h) + var(--sp-md))}
.side-block{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-md) var(--sp-lg)}
.side-block + .side-block{margin-top:var(--sp-lg)}
.side-block .search{margin-top:6px}
.sec-label{font-family:var(--font-head);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:var(--sp-lg) 0 var(--sp-sm)}
.sec-label .me-change{font-size:.7rem;margin-left:6px;text-transform:none;letter-spacing:0}
.side-rec{display:flex;align-items:center;gap:var(--sp-sm);padding:9px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--fg)}
.side-rec:last-child{border-bottom:0}
.side-rec:hover .rec-nm{color:var(--primary)}
.side-av{width:40px;height:40px;border-radius:var(--r-full)}
.side-meta{min-width:0} .rec-nm{font-weight:600}
/* people list (single column, LinkedIn-style) */
.people-grid{display:flex;flex-direction:column;gap:var(--sp-sm)}
.person-card{display:flex;align-items:center;gap:var(--sp-md);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);padding:12px 14px;text-decoration:none;color:var(--fg);transition:border-color .12s}
.person-card:hover{background:var(--hover-bg)}
.person-card .avatar{width:48px;height:48px;border-radius:var(--r-full)}
.person-txt{min-width:0} .person-nm{font-weight:600}
.person-card .tag{display:inline-block;margin-top:3px;font-size:.68rem;color:var(--muted);background:var(--muted-bg);border-radius:6px;padding:2px 7px}
.person-card .arr{margin-left:auto;color:#c2c5cc;font-size:1.2rem}
/* profile card (premium, аналогична карточке профиля на главной) */
.profile-card{padding:var(--sp-xl);box-shadow:0 1px 3px rgba(17,17,17,.05)}
.profile-card .avatar-round{width:84px;height:84px;font-size:1.7rem}
.profile-card h1{font-size:1.6rem;margin:0}
.profile-cta{display:flex;gap:var(--sp-sm);margin:var(--sp-md) 0 var(--sp-lg)}
.btn-pri{display:inline-block;background:var(--primary);color:var(--primary-fg);border-radius:var(--r-md);padding:7px 14px;text-decoration:none;font-weight:600;font-size:.82rem}
.btn-sec{display:inline-block;background:var(--card);border:1px solid var(--border);color:var(--fg);border-radius:var(--r-md);padding:7px 14px;font-weight:600;font-size:.82rem;cursor:pointer;font-family:inherit}
.btn-sec:hover{background:var(--muted-bg)}
.common{background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--r-lg);padding:11px 14px;font-size:.88rem;margin-bottom:var(--sp-md)}
.common b{color:var(--primary)}
@media(max-width:780px){.page-grid{grid-template-columns:1fr}.page-side{position:static}}
/* программа: agenda-таймлайн */
.prog-intro{margin-top:-4px;margin-bottom:var(--sp-lg);max-width:760px}
.prog{display:flex;flex-direction:column;gap:var(--sp-md);max-width:760px}
.prog-day{display:grid;grid-template-columns:92px 1fr;gap:var(--sp-md);background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-lg)}
.prog-date{display:flex;flex-direction:column}
.prog-dd{font-family:var(--font-head);font-weight:800;font-size:1.4rem;line-height:1;color:var(--primary)}
.prog-wd{font-size:.8rem;color:var(--muted);margin-top:5px}
.prog-evs{display:flex;flex-direction:column;gap:12px;border-left:2px solid var(--border);padding-left:var(--sp-md)}
.prog-ev{display:flex;flex-direction:column;gap:3px}
.prog-ev-time{font-family:var(--font-head);font-weight:600;color:var(--muted);font-size:.82rem}
.tod{flex:0 0 auto;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--r-full);padding:3px 10px;min-width:60px;text-align:center}
.tod-morning{background:#fff2d9;color:#9a6b00}
.tod-day{background:var(--accent-soft);color:var(--primary)}
.tod-evening{background:#ece9fb;color:#4b3fae}
.prog-ev-txt{min-width:0;flex:1}
.prog-ev-title{font-weight:600}
.prog-ev-loc{font-size:.8rem;color:var(--muted);margin-top:1px}
@media(max-width:640px){.prog-day{grid-template-columns:1fr;gap:var(--sp-sm)}
  .prog-date{flex-direction:row;align-items:baseline;gap:8px}.prog-evs{border-left:0;padding-left:0}}
.prog-acc{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.prog-acc-head{display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer;list-style:none;font-family:var(--font-head)}
.prog-acc-head::-webkit-details-marker{display:none}
.prog-acc-head:hover{background:var(--hover-bg)}
.prog-acc-dd{font-weight:800;font-size:1.15rem;color:var(--primary)}
.prog-acc-wd{font-weight:600}
.prog-acc-n{margin-left:auto;font-size:.78rem;color:var(--muted);font-weight:400;font-family:var(--font-body)}
.prog-acc-chev{color:var(--muted);transition:transform .15s}
.prog-acc[open] .prog-acc-chev{transform:rotate(180deg)}
.prog-acc-body{display:flex;flex-direction:column;gap:12px;padding:2px 18px 16px}
.tod-time{background:var(--muted-bg);color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600}
.split{display:grid;grid-template-columns:300px 1fr;gap:var(--sp-lg)}
.sidebar{display:flex;flex-direction:column;gap:var(--sp-sm);position:sticky;top:calc(var(--topbar-h) + var(--sp-md));max-height:calc(100vh - var(--topbar-h) - var(--sp-xl))}
.sidebar .search{flex:0 0 auto}
.plist{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--sp-sm)}
.search{padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);font:inherit;width:100%}
.plist-item{display:flex;gap:var(--sp-sm);align-items:center;padding:var(--sp-sm);border-radius:var(--r-md);cursor:pointer;border:1px solid transparent}
.plist-item:hover{background:var(--muted-bg)} .plist-item.active{background:var(--selected);color:var(--selected-fg)}
.plist-item.active .muted{color:var(--selected-muted)}
.signal-bar{height:4px;background:var(--muted-bg);border-radius:var(--r-full);overflow:hidden;margin-top:3px}
.signal-bar>span{display:block;height:100%;background:var(--primary)}
.tabs{display:flex;gap:var(--sp-sm);margin:var(--sp-lg) 0 var(--sp-md);flex-wrap:wrap}
.tab{padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-full);cursor:pointer;font-size:.875rem;background:var(--card)}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.match-row{display:flex;align-items:center;gap:var(--sp-md);padding:var(--sp-md);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--sp-sm)}
.match-pct{margin-left:auto;font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:var(--primary)}
.rationale{background:var(--accent-soft);border-radius:var(--r-md);padding:10px 12px;font-size:.875rem;margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--sp-md)}
.tg-btn{display:inline-block;margin-top:var(--sp-sm);background:var(--muted-bg);border-radius:var(--r-md);padding:6px 12px;text-decoration:none;color:var(--fg);font-size:.875rem}
.clickable{cursor:pointer}
/* boats: 3-column widget grid */
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3{grid-template-columns:1fr}}
.boat-name{margin-bottom:12px}
.boat-captain{font-weight:700;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.boat-cap-badge{display:inline-block;background:var(--primary);color:var(--primary-fg);font-size:.6rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-full);padding:2px 8px;margin-right:6px;vertical-align:middle}
.boat-member{padding:3px 0;font-size:.9rem}
.cl-card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cl-card-head .cl-card-n{margin-left:auto;font-family:var(--font-head);font-weight:700;color:var(--muted)}
.cl-card-desc{font-size:.82rem;line-height:1.4;margin:0 0 10px}
/* clusters page: masonry — card height follows member count, not a fixed grid */
.cl-grid{column-count:3;column-gap:var(--sp-md)}
.cl-grid>.card{break-inside:avoid;width:100%;margin-bottom:var(--sp-md)}
@media(max-width:900px){.cl-grid{column-count:2}}
@media(max-width:600px){.cl-grid{column-count:1}}
/* home dashboard (bento) */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-md)}
.bento .col-full{grid-column:1 / -1}
.bento .col-2{grid-column:span 4}   /* 2/3 */
.bento .col-1{grid-column:span 2}   /* 1/3 */
.bento .col-half{grid-column:span 3} /* 1/2 */
.bento .card{display:flex;flex-direction:column;min-width:0}  /* stretch to equal row height; min-width:0 lets scroll-children (carousel) constrain instead of expanding the grid */
.zone-label{margin-top:var(--sp-md)}
.bento-head{display:flex;align-items:center;gap:var(--sp-sm);margin-bottom:var(--sp-sm)}
.bento-head h3{margin:0}
.bento-ic{width:38px;height:38px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bento-ic svg{width:20px;height:20px}
/* Пустое состояние карточки: иконка в мягкой плашке, строка-заголовок и одна
   поясняющая. flex:1 растягивает его на всю высоту — карточка, вытянутая
   соседом по ряду, перестаёт выглядеть недогруженной. */
.card-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;padding:var(--sp-lg) var(--sp-md) var(--sp-md)}
.card-empty-ic{width:44px;height:44px;border-radius:var(--r-full);background:var(--accent-soft);
  color:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.card-empty-ic svg{width:22px;height:22px}
.card-empty-t{font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--fg)}
.card-empty-s{font-size:.82rem;line-height:1.5;color:var(--muted);max-width:34ch}
/* нижняя строка-ссылка прижата к низу — она же держит высоту разреженной карточки */
.card-foot{margin-top:auto;padding-top:var(--sp-md);font-size:.82rem}
/* Тело карточки тянется на всю её высоту: только тогда работают и margin-top:auto
   у нижней строки, и flex:1 у пустого состояния. Карточка в ряду вытягивается по
   самому высокому соседу, и без этого содержимое висело в верхней трети. */
.bento-body{display:flex;flex-direction:column;flex:1;min-height:0}
.bento-arrow{margin-left:auto;color:var(--muted);font-size:1.1rem;transition:transform .12s,color .12s}
/* hover standard: flat tonal background on surfaces; --primary only on links/signals */
.card.clickable:not(:has(a)):hover{background:var(--hover-bg)}
.card.clickable:hover .bento-arrow{color:var(--primary)}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-lg)}
.hero-pairs{border-left:1px solid var(--border);padding-left:var(--sp-lg)}
.hero-pair{display:flex;align-items:center;gap:var(--sp-sm);padding:8px 0;text-decoration:none;color:var(--fg)}
.hero-pair+.hero-pair{border-top:1px solid var(--border)}
.mini-row{font-size:.875rem;padding:2px 0}
.mini-ava{display:inline-flex;width:30px;height:30px;border-radius:var(--r-full);overflow:hidden;vertical-align:middle;
  margin-right:-8px;border:2px solid var(--card);background:var(--primary);color:var(--primary-fg);
  align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.6rem}
.mini-ava img{width:100%;height:100%;object-fit:cover}
.mini-more{display:inline-flex;align-items:center;padding-left:14px;color:var(--muted);font-size:.8rem}
.me-change{font-size:.7rem}
@media(max-width:780px){.bento{grid-template-columns:1fr}.bento .col-full,.bento .col-2,.bento .col-1,.bento .col-half{grid-column:auto}
  .hero-grid{grid-template-columns:1fr}.hero-pairs{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:var(--sp-md)}}
/* cluster detail */
.cluster-selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.cluster-members{margin-top:var(--sp-xl)}
.cluster-head{font-family:var(--font-head);font-weight:700;font-size:1.5rem;margin-bottom:var(--sp-sm)}
.cluster-desc{color:var(--muted);max-width:760px;margin-bottom:var(--sp-lg)}
.member-card{display:flex;gap:var(--sp-sm);align-items:flex-start;padding:var(--sp-md);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card)}
.member-note{color:var(--muted);font-size:.8rem;font-style:italic;margin-top:4px}
/* content tabs (программа / лодки / материалы) */
.prose{max-width:760px}
.prose h1{font-size:2rem;margin-top:0}
.prose h2{font-size:1.4rem;margin-top:var(--sp-xl)}
.prose h3{font-size:1.1rem;margin-top:var(--sp-lg)}
.prose p{margin:0 0 var(--sp-md)}
.prose img{max-width:100%;height:auto;display:block;border-radius:var(--r-lg);border:1px solid var(--border);margin:var(--sp-md) 0}
.prose ul,.prose ol{margin:0 0 var(--sp-md);padding-left:1.4em}
.prose li{margin:4px 0}
.prose hr{border:0;border-top:1px solid var(--border);margin:var(--sp-lg) 0}
.placeholder-note{background:#fff8e6;border:1px solid #f0e0a8;border-radius:var(--r-md);
  padding:8px 12px;font-size:.8rem;color:#7a6312;margin-bottom:var(--sp-lg)}
.article-card{cursor:pointer;padding:0;overflow:hidden;transition:border-color .12s}
.article-card:hover{background:var(--hover-bg)}
.article-cover{aspect-ratio:16/9;background:var(--muted-bg)}
.article-cover img{width:100%;height:100%;object-fit:cover;display:block}
.article-body{padding:var(--sp-lg)}
.article-card h3{margin-bottom:6px}
@media(max-width:780px){.split{grid-template-columns:1fr}}

/* === mobile responsiveness (≤780px) === */
/* grid columns never wider than viewport → no horizontal scroll on narrow phones */
.grid{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
/* Меню перестаёт помещаться в строку раньше, чем начинается мобильная вёрстка:
   сначала поджимаем зазор, затем убираем меню в бургер. Граница 940px измерена
   скриншотами — на 1000px пять пунктов ещё стоят в ряд, на 940 уже нет. */
@media(max-width:1040px){.nav{gap:var(--sp-md)}}
@media(max-width:940px){.nav-burger{display:inline-flex}}

@media(max-width:780px){
  /* topbar: brand + account on row 1, nav on full-width row 2 — compact so all 5 items fit ≥360px */
  .topbar{height:auto;min-height:var(--topbar-h);padding:8px var(--sp-sm);row-gap:6px;gap:var(--sp-sm)}
  .account-name{display:none}                 /* avatar is enough on mobile */
  #app{padding:var(--sp-lg) var(--sp-md)}
  /* participants: list as a compact scroll box so the selected profile stays reachable */
  .sidebar{position:static;max-height:none}
  .plist{max-height:55vh}
  /* profile card: tighter padding + smaller heading on phones */
  .profile-card{padding:var(--sp-md)}
  .profile-card h1{font-size:1.3rem}
  .profile-cta{flex-wrap:wrap}
}
/* let flex text columns shrink & wrap instead of forcing the card wider than the viewport */
.profile-head{min-width:0}
.profile-head>div{min-width:0;overflow-wrap:anywhere}
.profile-card{overflow-wrap:anywhere}
/* mobile safety net: no horizontal pan from any stray overflow */
@media(max-width:780px){html{overflow-x:hidden}}

/* dashboard: identity bar + rich matches + boat (2026-05-21) */
.bento .idbar{flex-direction:row;align-items:center;gap:12px}
.idbar .avatar{width:34px;height:34px;font-size:.7rem;flex:0 0 auto}
.idbar-main{flex:1;min-width:0}
.idbar-name{font-size:.95rem}
.idbar-role{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idbar-actions{flex:0 0 auto;display:flex;align-items:center;gap:16px;font-size:.82rem}
.idbar-actions a,.idbar .me-change{text-decoration:none;color:var(--primary);white-space:nowrap;font-family:var(--font-body);font-size:.82rem;font-weight:500;line-height:1.2}
.card-head{font-family:var(--font-head);font-weight:700;font-size:1.05rem;margin-bottom:10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card-head .muted{font-weight:400;font-size:.78rem}
.m-row{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.m-row:last-of-type{border-bottom:none}
.m-row:hover{background:var(--hover-bg)}
.m-main{flex:1;min-width:0}
.m-name{font-weight:700;font-size:.95rem}
.m-name .m-role{font-weight:400;color:var(--muted);font-size:.82rem}
.m-why{font-size:.82rem;color:var(--fg);opacity:.72;margin:2px 0 6px;line-height:1.35}
.m-tags{display:flex;flex-wrap:wrap;gap:5px}
.m-tag{background:#eef0f3;color:var(--muted);border-radius:6px;padding:2px 7px;font-size:.68rem;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.m-tag-cl{background:rgba(0,72,178,.08);color:var(--primary)}
.m-tag-boat{background:#f4ede2;color:#9a6b1f}
.m-pct{font-weight:800;color:var(--primary);font-size:1rem;flex:0 0 auto}
.m-act{flex:0 0 auto;background:var(--primary);color:#fff;border-radius:7px;padding:5px 11px;font-size:.78rem;font-weight:600;white-space:nowrap}
.m-alllink{display:inline-block;margin-top:10px;font-size:.8rem;color:var(--primary);text-decoration:none}
.boat-crew{display:flex;gap:6px;align-items:center}
.bc-row{display:flex;align-items:center;gap:8px;padding:5px 0;text-decoration:none;color:inherit;font-size:.85rem}
.bc-row:hover{background:var(--hover-bg)}
.bc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.cl-row:last-child{border-bottom:none}
.cl-row:hover .cl-name{color:var(--primary)}
.cl-avas{display:flex;flex:0 0 auto}
.cl-ava{width:26px;height:26px;border-radius:var(--r-full);border:2px solid var(--card);margin-left:-8px}
.cl-ava:first-child{margin-left:0}
.cl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cl-name{font-weight:700;font-size:.9rem}
.cl-count{background:#eef0f3;color:var(--muted);border-radius:10px;padding:1px 7px;font-size:.7rem;font-weight:600;margin-left:6px}
.cl-desc{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-chips{display:flex;flex-wrap:wrap;gap:8px}
.bt-chip{background:rgba(0,72,178,.06);color:var(--fg);border-radius:var(--r-full);padding:6px 13px;font-size:.82rem;font-weight:600}
.route-mini{display:flex;flex-direction:column}
.route-stop{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;position:relative;padding-bottom:14px}
.route-stop:last-child{padding-bottom:0}
.route-dot{width:9px;height:9px;border-radius:50%;background:var(--primary);flex:0 0 auto;margin-top:4px}
.route-stop:not(:last-child)::after{content:"";position:absolute;left:4px;top:13px;bottom:0;width:2px;background:var(--primary);opacity:.3}
.route-stop-main{min-width:0}
.route-stop-name{font-weight:700;font-family:var(--font-head)}
.route-stop-date{font-weight:400;color:var(--muted);font-size:.78rem;margin-left:4px}
.route-stop-note{font-size:.78rem;color:var(--muted);margin-top:1px}
.mat-tiles{display:flex;flex-direction:column;gap:10px}
.mat-tile{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--border);border-radius:var(--r-md);text-decoration:none;color:inherit}
.mat-tile:hover{background:var(--hover-bg)}
.mat-tile-cover{flex:0 0 56px;width:56px;height:56px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg)}
.mat-tile-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mat-tile-body{min-width:0}
.mat-tile-h{font-family:var(--font-head);font-weight:700;font-size:.9rem}
.mat-tile-h .muted{font-weight:400;font-size:.78rem}
.mat-tile-desc{font-size:.78rem;color:var(--muted);margin-top:2px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.route-cta{display:flex;align-items:center;gap:16px;background:var(--muted-bg);border-radius:var(--r-md);padding:14px 16px;text-decoration:none;color:inherit}
.route-cta:hover .route-cta-h{color:var(--primary)}
.route-cta-side{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.route-cta-side .route-cta-img{width:100%;height:150px;border-radius:0}
.route-cta-side .route-cta-body{flex:none;padding:13px 15px}
.route-cta-link{color:var(--primary);font-size:.82rem;margin-top:10px}
.crew-row{display:flex;align-items:center;gap:9px;padding:6px 0;text-decoration:none;color:var(--fg)}
.crew-row .crew-ava{width:30px;height:30px;border-radius:var(--r-full);flex:0 0 auto;font-size:.65rem}
.crew-nm{font-weight:600;color:var(--fg)}
.crew-row:hover .crew-nm{color:var(--primary)}
.crew-cap{border-bottom:1px solid var(--border);padding-bottom:11px;margin-bottom:5px}
@media(max-width:560px){
  .mat-tiles{grid-template-columns:1fr}
  .m-row .m-act{display:none}
  .m-row{gap:9px}
  .m-row .avatar{width:38px;height:38px}
  .cl-slide{flex-basis:80vw}
  .idbar-role{display:none}
  .idbar{flex-wrap:wrap}
  .idbar-actions{flex-basis:100%;padding-left:46px}
}
.route-cta-img{flex:0 0 auto;width:128px;height:76px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg)}
.route-cta-img img{width:100%;height:100%;object-fit:cover;display:block}
.route-cta-body{flex:1;min-width:0}
.route-cta-h{font-family:var(--font-head);font-weight:700;font-size:1.05rem}
.route-cta-desc{font-size:.85rem;color:var(--muted);margin-top:3px;line-height:1.4}
.route-cta-arrow{flex:0 0 auto;color:var(--primary);font-size:1.3rem}
@media(max-width:560px){.route-cta-img{width:88px;height:60px}}
.cl-carousel-wrap{position:relative;min-width:0}
.cl-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin;min-width:0}
.cl-carousel::-webkit-scrollbar{height:6px}
.cl-carousel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.cl-slide{flex:0 0 230px;scroll-snap-align:start;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:9px}
.cl-slide:hover{background:var(--hover-bg)}
.cl-slide-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.cl-slide-name{font-weight:700;font-size:.92rem;line-height:1.25}
.cl-slide .cl-count{margin-left:0;flex:0 0 auto}
.cl-slide-desc{font-size:.78rem;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cl-more{display:inline-flex;align-items:center;font-size:.72rem;color:var(--muted);margin-left:2px}
.cl-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer;font-size:1.2rem;line-height:1;z-index:2;display:flex;align-items:center;justify-content:center;padding:0}
.cl-nav:hover{border-color:var(--primary);color:var(--primary)}
.cl-prev{left:-8px}
.cl-next{right:-8px}
.cl-slide-name,.m-name,.idbar-name,.bc-name,.bt-chip,.m-pct,.cl-count{font-family:var(--font-head)}
@media(max-width:780px){.cl-nav{display:none}}
.boat-ava{width:30px;height:30px;font-size:.65rem}
.idbar .avatar,.m-row .avatar,.boat-ava{border-radius:var(--r-full)}
@media(max-width:780px){.m-act{padding:5px 9px}}

/* ---- demo expansion: dashboard, subtabs, boards, profile, feed, regatta ---- */
.dash-search{margin:0 0 var(--sp-md);position:relative}
/* Строка «я + поиск»: раньше это были два ряда во всю ширину, и самое частое
   действие съедало верх экрана. Слева профиль, справа поиск; ниже 780px
   складывается — поиск уходит на свою строку. */
.bento .topbar-me{display:flex;flex-direction:row;align-items:center;gap:var(--sp-md);padding:12px var(--sp-md)}
.topbar-me .tm-id{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.topbar-me .avatar{width:40px;height:40px;font-size:.8rem;flex:0 0 auto}
.topbar-me .idbar-main{min-width:0}
.topbar-me .idbar-name{font-family:var(--font-head);font-weight:600;font-size:.98rem;line-height:1.2}
.topbar-me .idbar-actions{flex:none;gap:10px}
.tm-profile{font-size:.82rem;padding:6px 12px;text-decoration:none;display:inline-block}
.tm-search{flex:1 1 320px;min-width:170px;max-width:420px;margin-left:auto;position:relative}
.tm-ic{position:absolute;left:11px;top:19px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tm-ic svg{width:16px;height:16px;display:block}
/* поле ниже обычного: во всю высоту карточки оно выглядело крупнее строки */
.tm-input{padding:7px 12px 7px 34px;font-size:.9rem}
@media(max-width:780px){
  .bento .topbar-me{flex-wrap:wrap;gap:10px}
  .tm-search{flex:1 1 100%;max-width:none;margin-left:0;order:3}
  .topbar-me .idbar-actions{margin-left:auto}
}
.dash-search .search{width:100%;max-width:none}
.dash-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.08);padding:4px;display:none;z-index:30;max-height:340px;overflow-y:auto}
.dash-suggest.open{display:block}
.dash-sugg{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--fg)}
.dash-sugg:hover{background:var(--hover-bg)}
.dash-sugg-av{width:32px;height:32px;flex:0 0 auto}
.dash-sugg-txt{display:flex;flex-direction:column;min-width:0}
.dash-sugg-nm{font-weight:600}
.dash-sugg-sub{font-size:.78rem}
.useful-lanes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md)}
.useful-lane-h{font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--muted);margin:0 0 6px}
@media(max-width:780px){.useful-lanes{grid-template-columns:1fr}}
.dash-news-item{padding:6px 0;border-bottom:1px solid var(--border)}
.dash-news-item:last-child{border-bottom:0}
.dash-news-t{font-family:var(--font-head);font-weight:600;font-size:.9rem}
.dash-tour-leader{font-family:var(--font-head);font-weight:600}
.prog-day-list{display:flex;flex-direction:column;gap:12px}
.prog-day-ev{display:flex;flex-direction:column;gap:1px;font-size:.85rem;line-height:1.35}
.prog-day-tod{font-family:var(--font-head);font-weight:600;color:var(--muted);font-size:.8rem}

/* top-nav hover dropdowns (mirror canonical dropdown-menu: flat, hairline, subtle shadow) */
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-has-sub>a{display:inline-flex;align-items:center;gap:3px}
.nav-caret{width:15px;height:15px;flex:none;transition:transform .15s ease}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;display:none;z-index:40}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{display:block}
.nav-sub-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(0,0,0,.08);padding:4px;min-width:190px}
.nav-sub-card a{display:block;padding:8px 10px;border-radius:var(--r-sm);color:var(--fg);border-bottom:0;text-decoration:none;font-size:.875rem;white-space:nowrap}
.nav-sub-card a:hover{background:var(--muted-bg)}
@media(max-width:940px){
  /* mobile nav = slide-in drawer, opened by the burger */
  .nav-backdrop.open{display:block;position:fixed;inset:0;background:rgba(17,17,17,.4);z-index:55}
  .nav{position:fixed;top:0;right:0;bottom:0;width:min(84vw,300px);transform:translateX(100%);transition:transform .22s ease;background:var(--card);border-left:1px solid var(--border);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:64px 18px 24px;z-index:60;overflow-y:auto;flex:none}
  .nav.open{transform:translateX(0);box-shadow:-10px 0 30px rgba(0,0,0,.15)}
  .nav>a{padding:11px 0;font-size:1rem;border-bottom:1px solid var(--border)}
  .nav-item{display:block;border-bottom:1px solid var(--border)}
  .nav-item>a{display:block;padding:11px 0;font-size:1rem}
  .nav-caret{display:none}
  .nav-sub,.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{position:static;transform:none;padding-top:0;display:block}
  .nav-sub-card{position:static;background:none;border:0;box-shadow:none;padding:0 0 8px;min-width:0}
  .nav-sub-card a{padding:7px 0 7px 14px;font-size:.9rem;color:var(--muted)}
  .nav-sub-card a:hover{background:none;color:var(--fg)}
}

.boat-skipper{margin:2px 0 8px;font-size:.84rem;color:var(--muted)}
.boat-skipper-lbl{font-family:var(--font-head);font-weight:600;color:var(--fg);margin-right:4px}

.pblock-stub{opacity:.7}
/* Контакты: строка-ссылка с иконкой в мягкой плашке, подписью вида связи и
   значением. Голая ссылка «Telegram: @…» читалась как сноска в документе. */
.contacts-list{display:flex;flex-direction:column;gap:var(--sp-sm)}
.contact-row{display:flex;align-items:center;gap:12px;padding:10px 12px;text-decoration:none;
  color:var(--fg);border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);
  transition:background .12s,border-color .12s}
.contact-row:hover{background:var(--hover-bg);border-color:var(--accent-soft-border)}
.contact-ic{width:34px;height:34px;flex:none;border-radius:var(--r-md);background:var(--accent-soft);
  color:var(--primary);display:flex;align-items:center;justify-content:center}
.contact-ic svg{width:18px;height:18px}
.contact-txt{display:flex;flex-direction:column;min-width:0}
.contact-kind{font-family:var(--font-head);font-size:.68rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.contact-val{font-size:.95rem;overflow-wrap:anywhere}
.contact-go{margin-left:auto;color:var(--muted);flex:none}
.contact-row:hover .contact-go{color:var(--primary)}

.grid-2{grid-template-columns:1fr 1fr}
@media(max-width:780px){.grid-2{grid-template-columns:1fr}}

/* feed */
.feed{display:flex;flex-direction:column;gap:var(--sp-md)}
.feed-item{display:block;padding:var(--sp-md)}
/* Карточка поста ленты. Абзацы — отдельные <p> с отступом, а не переводы строк
   внутри одного: pre-wrap печатал пустую строку исходника буквально и давал
   провалы в пол-экрана. */
.post{padding:var(--sp-md) var(--sp-md) 10px}
.post-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.post-ava{width:36px;height:36px;flex:none;border-radius:var(--r-full);background:var(--accent-soft);
  color:var(--primary);display:flex;align-items:center;justify-content:center}
.post-ava svg{width:19px;height:19px}
.post-id{display:flex;flex-direction:column;min-width:0}
.post-src{font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--fg)}
.post-date{font-size:.78rem;color:var(--muted)}
.post-title{font-family:var(--font-head);font-weight:700;font-size:1.06rem;line-height:1.35;margin:0 0 8px}
.post-body{font-size:.95rem;line-height:1.62;position:relative;overflow-wrap:anywhere}
.post-body p{margin:0 0 12px}
.post-body p:last-of-type{margin-bottom:0}
.post-body .post-fade{display:none}
.post-body.is-clamped{max-height:13.5em;overflow:hidden}
.post-body.is-clamped .post-fade{display:block;position:absolute;left:0;right:0;bottom:0;height:4em;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--card));pointer-events:none}
.post-more{background:none;border:0;padding:6px 0;margin:0;color:var(--primary);font:inherit;
  font-size:.88rem;cursor:pointer}
.post-more:hover{text-decoration:underline}
.post .feed-hero,.post .feed-album-strip{margin-top:12px}
.post-foot{display:flex;align-items:center;gap:var(--sp-md);flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.post-foot .reactions{margin-top:0}
.post-src-link{margin-left:auto;font-size:.8rem;color:var(--muted);text-decoration:none}
.post-src-link:hover{color:var(--primary)}
.feed-item h3{margin:2px 0}
.feed-item>p{margin:6px 0 0;white-space:pre-wrap}
.feed-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.feed-type{font-family:var(--font-head);font-weight:600;font-size:.7rem;padding:2px 8px;border-radius:var(--r-full);background:var(--muted-bg);color:var(--muted)}
.feed-news{background:var(--accent-soft);color:var(--primary)}
.feed-announcement{background:#fdf3d8;color:#8a6d1a}
.feed-album{background:var(--accent-soft);color:var(--primary)}
.feed-cap{font-family:var(--font-head);font-weight:600}
.feed-more{display:block;margin:var(--sp-md) auto 0;padding:8px 20px;background:var(--muted-bg);border:1px solid var(--border);border-radius:var(--r-full);font-family:var(--font-head);font-weight:600;font-size:.85rem;color:var(--fg);cursor:pointer}
.feed-more:hover{background:var(--hover-bg)}
.feed-more:disabled{opacity:.6;cursor:default}
/* photo card */
.feed-hero{display:block;width:100%;border-radius:var(--r-md);overflow:hidden;margin:2px 0 10px;background:var(--bg);cursor:zoom-in}
.feed-hero img{width:100%;max-height:420px;object-fit:cover;display:block}
/* album card */
.feed-album-link{display:block;text-decoration:none;color:inherit;border-radius:var(--r-sm)}
.feed-album-link:hover{background:var(--hover-bg)}
.feed-album-strip{display:flex;gap:6px;margin:2px 0 10px}
.feed-album-thumb{flex:1;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--bg);position:relative}
.feed-album-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.feed-album-more{position:absolute;inset:0;background:rgba(17,17,17,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700}
.feed-album-foot{display:flex;align-items:center;gap:6px}
.feed-album-foot .arr{margin-left:auto;color:var(--muted)}
/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(17,17,17,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;padding:24px;cursor:zoom-out}
/* Просмотр альбома: стрелки, счётчик, крестик. Клик по самому снимку ничего не
   закрывает — закрывает только клик мимо и крестик. */
.lightbox-fig{cursor:default;display:flex;max-width:92vw;max-height:85vh}
.lb-nav,.lb-close{position:absolute;background:rgba(17,17,17,.55);border:0;color:#fff;cursor:pointer;
  border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;padding:0}
.lb-nav{width:46px;height:46px;top:50%;transform:translateY(-50%)}
.lb-nav svg{width:24px;height:24px}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-close{width:38px;height:38px;top:16px;right:16px}
.lb-close svg{width:20px;height:20px}
.lb-nav:hover,.lb-close:hover{background:rgba(17,17,17,.8)}
@media(max-width:560px){.lb-nav{width:40px;height:40px}.lb-prev{left:6px}.lb-next{right:6px}}
.lightbox-fig img{max-width:92vw;max-height:85vh;object-fit:contain;border-radius:var(--r-md);display:block}
.lightbox-cap{color:#fff;margin-top:12px;font-family:var(--font-head)}
/* reactions */
.reactions{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.rx{display:inline-flex;align-items:center;gap:5px;background:var(--muted-bg);border:1px solid var(--border);border-radius:var(--r-full);padding:4px 10px;font-size:.9rem;line-height:1;cursor:pointer;font-family:inherit;color:var(--fg)}
.rx:hover{background:var(--hover-bg)}
.rx-on{background:var(--accent-soft);border-color:var(--accent-soft-border);color:var(--primary)}
.rx-n{font-family:var(--font-head);font-weight:600;font-size:.78rem}
.feed-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:var(--sp-md)}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.chip-add{display:flex;gap:8px;margin-top:8px}.chip-add input{flex:1;min-width:0}
.feed-select{margin-left:auto;font-family:inherit;font-size:.875rem;padding:7px 34px 7px 12px;border:1px solid var(--input);border-radius:var(--r-md);background-color:var(--card);color:var(--fg);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.filter-selects{display:flex;flex-wrap:wrap;gap:10px;margin:var(--sp-md) 0}
.filter-selects .feed-select{margin-left:0;min-width:210px;background-color:var(--secondary);border-color:transparent}
@media(max-width:780px){.feed-select{margin-left:0;width:100%}}
@media(max-width:680px){.feed-item{flex-direction:column}.feed-photo{flex:none}}

/* regatta */
.regatta-tile{display:block;position:relative;text-decoration:none;color:inherit}
.regatta-tile h3{margin:0 0 4px}
.regatta-tile .arr{position:absolute;right:16px;top:16px;color:var(--muted)}
.tourney-wrap{overflow-x:auto;margin-top:var(--sp-md);border:1px solid var(--border);border-radius:var(--r-md)}
.tourney{width:100%;border-collapse:collapse;background:var(--card);font-size:.85rem}
.tourney th,.tourney td{padding:13px 12px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--border)}
.tourney th.t-left,.tourney td.t-left{text-align:left}
.tourney th{font-family:var(--font-head);font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
.tourney tbody tr:hover{background:var(--hover-bg)}
.tourney tbody tr:last-child td{border-bottom:0}
.tourney .rank{font-family:var(--font-head);font-weight:700}
.tourney .t-boat{font-weight:600}
.tourney .t-drop{color:var(--muted)}
.tourney .t-pts{font-family:var(--font-head);font-weight:700}
.tourney .t-link{color:var(--primary);text-decoration:none}
.tourney .t-link:hover{text-decoration:underline}
.org-block-h{font-family:var(--font-head);font-size:1.15rem;margin:var(--sp-lg) 0 var(--sp-sm)}
.org-member .org-nm{font-family:var(--font-head);font-weight:600}
.org-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.org-ava{width:48px;height:48px;border-radius:var(--r-full);object-fit:cover;flex:0 0 auto}
.org-meta{min-width:0}
.org-role{font-size:.82rem}
.org-contact{margin-top:6px;font-size:.85rem}
.org-contact a{color:var(--primary);text-decoration:none}
.crew-skipper .boat-skip-badge{background:var(--secondary);color:var(--muted)}
.btn-disabled{opacity:.5;cursor:not-allowed}
.partner-card{display:flex;flex-direction:column;gap:8px}
.partner-stub{border-style:dashed;opacity:.8}
.partner-head{display:flex;align-items:center;gap:12px}
.partner-logo{height:48px;width:auto;max-width:96px;border-radius:var(--r-md);object-fit:contain}
.partner-logo-ph{width:48px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--primary);font-family:var(--font-head);font-weight:800;font-size:1.4rem}
.partner-link{font-size:.85rem;color:var(--primary);text-decoration:none}
.partner-meta{min-width:0}
.partner-meta h3{margin:0}
.partner-role{font-size:.82rem}
.partner-lead{margin:0}
.partner-more summary{cursor:pointer;color:var(--primary);font-size:.85rem}
.partner-more p{font-size:.9rem;margin:8px 0 0}
.partner-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.partner-fact{padding:4px 10px;border-radius:var(--r-full);background:var(--muted-bg);font-size:.8rem}

/* feed side rail */
.side-prog{display:block;text-decoration:none;color:var(--fg);padding:8px 0}
.side-prog-day{font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--muted)}
.side-prog-item{font-size:.9rem;margin-top:2px}
.side-tour-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--fg)}
.side-tour-row:last-of-type{border-bottom:0}
.side-tour-rank{font-family:var(--font-head);font-weight:700;width:18px;color:var(--muted)}
.side-tour-boat{flex:1;font-size:.88rem}

/* soft-gate overlay */
.gate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: var(--bg, #fff); padding: 24px; }
.gate[hidden] { display: none; }
.gate-card { max-width: 420px; width: 100%; text-align: center; }
.gate-logo { color: var(--accent, #1a1a1a); margin-bottom: 16px; }
.gate-title { font-family: "Commissioner", sans-serif; font-weight: 800; font-size: 28px; margin: 0 0 8px; }
.gate-sub { color: var(--muted, #666); margin: 0 0 24px; }
#gate-login { display: flex; flex-direction: column; align-items: stretch; }
.gate-email-form { display: flex; flex-direction: column; gap: 8px; }
.gate-email-input { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--border, #d0d4dc); border-radius: 10px; background: var(--card, #fff); color: inherit; }
.gate-email-input:focus { outline: none; border-color: var(--accent, #0048B2); }
.gate-btn { display: block; width: 100%; text-align: center; padding: 14px 16px; border-radius: 10px; text-decoration: none; border: 0; cursor: pointer; font: 600 15px/1 inherit; font-family: inherit; }
.gate-btn-sec { border: 1px solid var(--border, #d0d4dc); color: inherit; }
/* Единственный primary на экране — всё остальное тише его по весу и размеру. */
#gate-alt { display: flex; flex-direction: column; align-items: center; }
#gate-alt[hidden] { display: none; }
/* Telegram узнают по фирменному голубому, а не по размеру: пилюля по контенту,
   40px против 48 у главной кнопки — рядом они не читаются как равные. */
.gate-tg { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
  border-radius: 20px; background: #229ED9; color: #fff; text-decoration: none;
  font: 600 14px/1 var(--font-body, inherit); }
.gate-tg:hover { background: #1b8dc4; }
.gate-tg svg { width: 16px; height: 16px; }
/* Код набирают группой цифр — моноширинный с разрядкой читается быстрее инпута. */
.gate-code-input { text-align: center; font-family: ui-monospace, "SF Mono", monospace;
  font-size: 20px; letter-spacing: .3em; text-indent: .3em; padding: 14px 15px; }
.gate-restart { margin: 4px 0 0; font-size: 13px; }
.gate-restart a { color: var(--muted, #7a8194); text-decoration: underline; text-underline-offset: 2px; }
.gate-foot { margin-top: 26px; }
.gate-foot a { font-size: 12px; color: var(--muted, #7a8194); text-decoration: underline; text-underline-offset: 2px; }
.gate-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 18px; width: 100%; font-size: 12px; color: var(--muted, #7a8194); }
.gate-divider span { flex: 1; height: 1px; background: var(--border, #d0d4dc); }
.gate-hint { font-size: 12px; color: var(--muted, #7a8194); margin-top: 8px; }
.gate-error { color: #b00020; margin-top: 16px; font-size: 13px; line-height: 1.5; }
.gate-notice { color: var(--muted, #7a8194); margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
.side-tour-pts{font-family:var(--font-head);font-weight:600}
.consent-row { display: flex; align-items: flex-start; gap: .5rem; text-align: left; margin: .6rem 0; font-size: .9rem; line-height: 1.35; }
.consent-row input { margin-top: .2rem; flex: 0 0 auto; }
#consent .btn-pri { margin-top: .4rem; width: 100%; }
#consent .btn-pri[disabled] { opacity: .5; cursor: not-allowed; }

/* admin view-as («Смотреть как…») */
.impersonate-badge{background:var(--warn, #b45309); color:#fff; position:sticky; top:0; z-index:1000; padding:6px 12px; font-size:.85rem; text-align:center}
.impersonate-badge a{color:#fff; text-decoration:underline; font-weight:600}
.impersonate-select{width:100%; margin:.2rem 0 1rem; padding:8px 10px; border-radius:var(--r-md); border:1px solid var(--border); font-size:.9rem; font-family:inherit}
.impersonate-actions{display:flex; gap:.5rem; justify-content:center}

/* интерактивная карта маршрута (Leaflet) */
.route-map{height:460px;border:1px solid var(--border);border-radius:var(--r-md);margin:16px 0;z-index:0}
@media (max-width:640px){.route-map{height:340px}}
.route-pin{width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--primary-fg);display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--font-head);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.leaflet-popup-content{font-family:var(--font-body);font-size:.85rem;line-height:1.45}
.route-day-lbl{background:#fff;border:1px solid var(--border);border-radius:999px;padding:2px 8px;font:500 11px/1.2 var(--font-body);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18);white-space:nowrap}
.route-day-lbl::before{display:none}

/* футер (spec: docs/specs/2026-08-11-compass-footer-design.md) */
body{display:flex;flex-direction:column;min-height:100svh}
#app{flex:1;width:100%}
.footer{border-top:1px solid var(--border);margin-top:var(--sp-xl)}
.footer-in{max-width:var(--container-max);margin:0 auto;padding:var(--sp-lg);display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-md);font-size:.78rem;color:var(--muted)}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{color:var(--primary)}
@media (max-width:640px){.footer-in{flex-direction:column;align-items:center;text-align:center;gap:6px}}
.gate-privacy{color:inherit;text-decoration:underline;text-underline-offset:2px}
.gate-privacy:hover{color:var(--primary)}
.footer-brand{display:flex;align-items:center;gap:8px}
.footer-name{font-family:var(--font-head);font-size:.85rem;font-weight:600;color:var(--fg)}
img.footer-logo{display:block;width:auto}
img.footer-logo-and{height:16px}
img.footer-logo-aist{height:18px}
.footer-privacy{opacity:.6}
.footer-privacy:hover{opacity:1}

/* страницы правовых документов (privacy.html, consent-*.html) */
.doc{max-width:720px;margin:2rem auto;padding:0 1.2rem 4rem;line-height:1.5}
.doc h1{margin-bottom:.4rem}
.doc h2{margin-top:1.6rem}
.doc h3{margin-top:1.2rem}
.doc .back-link{display:inline-block;margin-bottom:.5rem}
.doc p,.doc li{line-height:1.5}
.doc hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}
.doc blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:3px solid var(--border);background:var(--surface-2,#f7f7f8)}
.doc blockquote p{margin:.4rem 0}
.doc-nav{margin-top:2rem;font-size:.9rem}