/* ==========================================================================
   Временная панель выбора цветовой схемы (для согласования с клиентом).
   Собственные цвета панели не зависят от темы сайта, поэтому она читается
   одинаково на всех вариантах. Удаляется одной строкой из HTML.
   ========================================================================== */
.theme-bar{
    position:fixed; left:0; right:0; top:0; z-index:200;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:9px 18px; min-height:48px;
    background:#14171a; color:#f2f4f5;
    border-bottom:1px solid rgba(255,255,255,.14);
    font:500 13px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    box-shadow:0 8px 24px -18px rgba(0,0,0,.9);
}
.theme-bar__lbl{
    font:700 11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    letter-spacing:.14em; text-transform:uppercase; color:#9aa3ab; white-space:nowrap;
}
.theme-bar__list{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.theme-bar__b{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 13px 7px 9px; cursor:pointer;
    background:#1e2226; color:#e9edf0; border:1.5px solid #333a40; border-radius:4px;
    font:600 13px/1 inherit; transition:border-color .15s,background .15s,color .15s;
}
.theme-bar__b:hover{ border-color:#5c676f; background:#252a2f; }
.theme-bar__b[aria-pressed="true"]{ border-color:#e8eef2; background:#2c3238; color:#ffffff; }
.theme-bar__sw{
    width:20px; height:20px; border-radius:3px; flex:0 0 auto;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
    background:linear-gradient(135deg,var(--sw-a) 0 50%,var(--sw-b) 50% 100%);
}
.theme-bar__note{ margin-left:auto; color:#9aa3ab; font-size:12px; white-space:nowrap; }
@media (max-width:900px){ .theme-bar__note{ display:none; } }
@media (max-width:560px){
    .theme-bar{ gap:8px; padding:8px 12px; }
    .theme-bar__lbl{ width:100%; }
    .theme-bar__b{ padding:6px 10px 6px 7px; font-size:12px; }
}

/* сайт опускается ниже панели: шапка у него зафиксирована */
html.theme-bar-on body{ padding-top:48px; }
html.theme-bar-on .site-header{ top:64px; }
html.theme-bar-on .mobile-nav{ top:48px; }
@media (max-width:560px){
    html.theme-bar-on body{ padding-top:76px; }
    html.theme-bar-on .site-header{ top:92px; }
    html.theme-bar-on .mobile-nav{ top:76px; }
}