/* ============================================================
   COMPONENTS — шапка, кнопки, схема селектора, поля, футер
   Источник: САЙТ-ДИЗАЙН.md §3 (шапка — W1). Остальные компоненты —
   общие строительные блоки для секций W2/W3, без творческих решений.
   ============================================================ */

/* ================= ШАПКА (§3) ================= */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:64px;
  border-bottom:1px solid transparent;
  transition:background var(--dur-standard) var(--ease-enter),
             border-color var(--dur-standard) var(--ease-enter);
}
header.is-scrolled{
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--divider);
}
.bar{
  display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px;
  min-width:0;
  /* не ставить max-width:100% — на .wrap.bar это перебивает --container-max и шапка разъезжается по монитору */
}
.bar-brand{display:flex;align-items:center;gap:12px;min-width:0}

.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--text);min-width:0}
.logo-mark{
  width:40px;height:40px;flex-shrink:0;object-fit:cover;
  border-radius:22%;overflow:hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.42),
    inset 0 -2px 3px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.12),
    0 4px 10px rgba(0,0,0,.42),
    0 8px 18px rgba(0,0,0,.22);
  filter:saturate(1.08) contrast(1.06);
}
.logo .my{color:var(--accent)}
.logo .txt{white-space:nowrap}

.head-actions{display:flex;align-items:center;gap:22px;flex-shrink:0}

/* ---- Схема селектора: активный — акцентная пилюля, неактивный — призрачный текст. ---- */
.seg{display:flex;align-items:center;gap:2px}
.seg button{
  font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1;
  padding:8px 14px;border:none;background:transparent;outline:none;
  border-radius:var(--r-pill);color:var(--text-3);
  transition:color var(--dur-quick) var(--ease-enter),background var(--dur-quick) var(--ease-enter),
              transform 160ms cubic-bezier(.34,1.56,.64,1);
}
.seg button.on{background:var(--accent);color:var(--on-accent);box-shadow:none}
html[data-mode="day"] .seg button.on{
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 20%,transparent);
}
.seg button:not(.on):hover{color:var(--text)}
.seg button:active{transform:scale(.94)}
.seg-group{display:flex;align-items:center;gap:16px}

.btn-head{
  font-family:var(--font-body);font-weight:600;font-size:14px;white-space:nowrap;
  padding:10px 18px;border:none;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text);
  transition:background var(--dur-quick) var(--ease-enter),transform 160ms cubic-bezier(.34,1.56,.64,1);
}
.btn-head:hover{background:var(--divider)}
.btn-head-vol{
  background:var(--accent);color:var(--on-accent);border:none;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.38),
    inset 0 -2px 4px rgba(0,0,0,.22),
    0 4px 14px color-mix(in srgb,var(--accent) 45%,transparent);
}
.btn-head-vol:hover{filter:brightness(1.06);background:var(--accent)}
.btn-head-vol:active{transform:scale(.96)}
/* День: без тёмного inset — иначе «чёрная обводка»; ночь не трогаем */
html[data-mode="day"] .btn-head-vol{
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 28%,transparent);
}
html[data-mode="day"] .logo-mark{
  /* день: без inset/contrast; лёгкий клип — прячет остаточный тёмный лип */
  box-shadow:0 2px 8px rgba(28,20,36,.10);
  filter:saturate(1.04);
  clip-path:inset(1.2% round 22%);
}

/* Десктоп: лого слева · селекторы · объёмная «Скачать» справа */
@media(min-width:768px){
  .bar-brand{display:contents}
  .logo{order:1;margin-right:auto}
  .head-actions{order:2}
  .btn-head-vol{order:3}
}

/* Мобила: одна линия — лого + компактные Он/Она/Ночь/День (без «Скачать» в шапке) */
@media(max-width:767px){
  header{height:56px}
  header .wrap{padding-left:12px;padding-right:12px}
  .bar{
    flex-direction:row;align-items:center;justify-content:space-between;
    height:56px;gap:6px;padding:0;
  }
  .bar-brand{flex:1;min-width:0;gap:6px}
  .logo{gap:6px;flex:1;min-width:0}
  .logo .txt{display:inline;font-size:13px;letter-spacing:-.02em}
  html[data-gender="he"] .logo .txt{letter-spacing:0}
  .logo-mark{width:30px;height:30px}
  .btn-head-vol{display:none!important}
  .head-actions{flex-shrink:0;gap:0}
  .seg-group{gap:4px;flex-wrap:nowrap}
  .seg button{
    padding:5px 8px;font-size:11px;min-height:30px;line-height:1;
  }
}

/* ================= КНОПКИ ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;
  border:none;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font-family:var(--font-body);font-weight:600;font-size:15px;letter-spacing:.01em;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:filter var(--dur-instant) linear,transform 160ms cubic-bezier(.34,1.56,.64,1),box-shadow var(--dur-quick);
}
html[data-mode="day"] .btn,
html[data-mode="day"] a.btn{
  border:0 solid transparent;
  outline:none;
  /* только цветная мягкая тень — без тёмного «кольца» */
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 20%,transparent);
  -webkit-appearance:none;appearance:none;
  background-clip:padding-box;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
html[data-mode="day"] .btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.96)}
.btn-link{
  display:inline-flex;align-items:center;gap:6px;color:var(--text-2);
  font-family:var(--font-body);font-weight:600;font-size:15px;
  transition:color var(--dur-quick) var(--ease-enter),transform var(--dur-quick) var(--ease-enter);
}
.btn-link:hover{color:var(--text);text-decoration:underline;transform:translateX(2px)}

/* ================= ПОЛЕ ФОРМЫ ================= */
.field{
  height:52px;width:100%;background:var(--surface-2);border:none;border-radius:var(--r-sm);
  padding:0 18px;color:var(--text);font-family:var(--font-body);font-size:16px;
}
.field::placeholder{color:var(--text-3)}
.field:focus{outline:2px solid var(--accent);outline-offset:2px}
.field.err{outline:2px solid var(--error)}
.field-err-msg{display:none;color:var(--error)}
.field-err-msg.show{display:block}

.check{display:flex;gap:10px;align-items:flex-start;color:var(--text-2)}
.check input{margin-top:3px;width:18px;height:18px;border-radius:6px;accent-color:var(--accent);flex-shrink:0}
.check a{color:var(--text-2);text-decoration:underline}
.check a:hover{color:var(--accent)}

/* ================= ПАНЕЛЬ (переходный слой L1, до W2/W3-редизайна секций) ================= */
.panel{background:var(--surface);border-radius:var(--r-lg)}
.tile{background:var(--surface);border-radius:var(--r-md)}

/* Футер — см. site-chrome.css (.site-footer). Старые .f-line оставлены как fallback. */
footer:not(.site-footer){padding:40px 0;border-top:1px solid var(--divider);background:var(--surface)}
footer:not(.site-footer) .f-line{color:var(--text-2);margin:0 0 10px}
footer:not(.site-footer) .f-line a{text-decoration:none}
footer:not(.site-footer) .f-line a:hover{color:var(--accent);text-decoration:underline}