/* ============================================================================
   iDrive — shared site header (logo · language · theme · auth / profile menu)
   Rendered by /assets/site-header.js on the landing and /account; the static
   pages (legal.css) draw the same bar around their own controls. Every class
   is namespaced .sh-* so it cannot collide with a page's own styles. Colours
   come from /assets/tokens.css; each has a light fallback so the header also
   stands on a page without those tokens.

   Layout: a full-width sticky bar (frosted page colour + a hairline once the
   page scrolls under it). Its inner row is --site-maxw wide with the
   --site-gutter side padding — the same box as the landing's .container — so
   the logo and the page content start on one line, and the header is
   identical on every page.
   Full bar: logo · [the page's sections, opt-in] · language · theme · Log in ·
   Start free trial (signed out) or · avatar (signed in: language and dark
   mode live in the account menu). Compact (.sh-compact: ≤ 768px, or whenever
   the full bar does not fit): logo · Free trial · ☰ Menu (signed out) or ·
   avatar; the menus become a side drawer. One breakpoint for both.

   Also home of the shared RTL icon rule (.icon-dir) — see the end of the file.
   ============================================================================ */

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg, #EEF3F9) 78%, transparent);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.site-header.is-scrolled, .site-header.scrolled {
    border-bottom-color: var(--line, rgba(13, 30, 55, 0.08));
    box-shadow: 0 6px 20px -14px rgba(13, 30, 55, 0.35);
}
.sh-shell {
    max-width: var(--site-maxw, 1160px); margin: 0 auto; height: var(--site-header-h, 64px);
    padding: 0 var(--site-gutter, 16px);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.sh-brand { display: flex; align-items: center; flex: none; }
.sh-brand img { height: 26px; width: auto; display: block; }
/* The page's sections (opt-in: the `sections` mount option), > 768px: quiet text links in the bar. */
.sh-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sh-nav a {
    display: block; padding: 8px 12px; border-radius: var(--r-pill, 999px); white-space: nowrap;
    font-size: 0.94rem; font-weight: 600; color: var(--ink-soft, #52616F); text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}
.sh-nav a:hover { color: var(--ink, #0E1A2B); background: var(--chip-bg, rgba(13, 30, 55, 0.045)); text-decoration: none; }
.sh-nav a[aria-current] { color: var(--brand-700, #075CA6); }
.sh-nav a:focus-visible { outline: 3px solid var(--brand-glow, rgba(10, 124, 216, 0.28)); outline-offset: 2px; }
/* A section a link moved focus to (site-header.js goSection) shows no ring of its own. */
.sh-focus-target:focus { outline: none; }
/* In the account popover the bar already shows the sections; the "On this page" row is for the drawer. */
.sh-section-onpage { display: none; }
.sh-brand:focus-visible { outline: 3px solid var(--brand-glow, rgba(10, 124, 216, 0.28)); outline-offset: 4px; border-radius: 6px; }
.sh-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sh-auth { display: flex; align-items: center; gap: 8px; }
.sh-auth-pending { display: block; width: 40px; height: 40px; }

/* Chips: language + theme */
.sh-chip {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px;
    background: var(--chip-bg, rgba(13, 30, 55, 0.045)); border: none; cursor: pointer;
    font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink, #0E1A2B);
    padding: 0 14px; border-radius: var(--r-pill, 999px);
    transition: background 0.2s ease, color 0.2s ease;
}
.sh-chip:hover, .sh-pop.is-open > .sh-chip { background: var(--chip-bg-hover, rgba(13, 30, 55, 0.09)); }
.sh-chip svg { width: 17px; height: 17px; flex: none; }
.sh-icon-btn { width: 40px; padding: 0; }
.sh-theme svg { width: 18px; height: 18px; }
.sh-theme .sh-ic-moon, .sh-theme.is-dark .sh-ic-sun { display: none; }
.sh-theme.is-dark .sh-ic-moon { display: block; }

.sh-chip:focus-visible, .sh-btn:focus-visible, .sh-avatar-btn:focus-visible, .sh-close:focus-visible {
    outline: 3px solid var(--brand-glow, rgba(10, 124, 216, 0.28)); outline-offset: 2px;
}

/* Logged-out buttons */
.sh-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center; height: 40px;
    font: inherit; font-size: 0.92rem; font-weight: 700; line-height: 1; white-space: nowrap;
    padding: 0 16px; border-radius: var(--r-pill, 999px); cursor: pointer;
    border: 1.5px solid transparent; text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sh-btn:active { transform: translateY(1px); }
.sh-btn:disabled { opacity: 0.6; cursor: default; }
.sh-btn-ghost { background: transparent; color: var(--ink, #0E1A2B); border-color: var(--line-strong, rgba(13, 30, 55, 0.15)); }
.sh-btn-ghost:hover:not(:disabled) { border-color: var(--brand-400, #39A0EB); color: var(--brand-700, #075CA6); }
.sh-btn-primary {
    background: var(--brand-grad, linear-gradient(135deg, #2EA7F2 0%, #0A7CD8 48%, #0A5BBE 100%));
    color: #fff; box-shadow: var(--shadow-brand, 0 10px 24px -6px rgba(10, 124, 216, 0.28));
}
.sh-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 28px -6px var(--brand-glow, rgba(10, 124, 216, 0.28)); }
.sh-short { display: none; }

/* Avatar trigger */
.sh-avatar-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 44px;
    padding: 3px; padding-inline-end: 10px; border: none; cursor: pointer; font: inherit;
    background: var(--chip-bg, rgba(13, 30, 55, 0.045)); color: var(--ink-soft, #52616F);
    border-radius: var(--r-pill, 999px); transition: background 0.2s ease;
}
.sh-avatar-btn:hover, .sh-pop.is-open > .sh-avatar-btn { background: var(--chip-bg-hover, rgba(13, 30, 55, 0.09)); }
.sh-caret { width: 15px; height: 15px; transition: transform 0.2s ease; }
.sh-pop.is-open .sh-caret { transform: rotate(180deg); }
.sh-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--brand-grad, linear-gradient(135deg, #2EA7F2 0%, #0A7CD8 48%, #0A5BBE 100%));
    color: #fff; font-weight: 800; font-size: 1rem; line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 10px -3px var(--brand-glow, rgba(10, 124, 216, 0.28));
}
.sh-avatar-lg { width: 46px; height: 46px; font-size: 1.15rem; }

/* Menus: the language chip's list (a plain popover), and the panel — the account menu signed in, the phone
   Menu signed out (site-header.js panel()). The panel is a popover here and a side drawer ≤ 768px (below). */
.sh-pop { position: relative; }
.sh-menu {
    position: absolute; top: calc(100% + 12px); inset-inline-end: 0; z-index: 10;
    background: var(--surface, #fff); color: var(--ink, #0E1A2B);
    border: 1px solid var(--line, rgba(13, 30, 55, 0.08));
    border-radius: 20px; box-shadow: var(--shadow-lg, 0 20px 50px rgba(10, 60, 120, 0.18));
    padding: 6px; min-width: 230px;
    transform-origin: top right;
    animation: sh-menu-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .sh-menu { transform-origin: top left; }
@keyframes sh-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.sh-panel {
    width: 320px; padding: 8px;
    max-height: calc(100vh - var(--site-header-h, 64px) - 24px); overflow-y: auto; overscroll-behavior: contain;
}

/* The panel's head: who is signed in (or the logo), and the drawer's close button. */
.sh-panel-head {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px 14px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line, rgba(13, 30, 55, 0.08));
}
.sh-panel-logo { height: 24px; width: auto; display: block; }
.sh-who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.3; }
.sh-who small { font-size: 0.74rem; font-weight: 600; color: var(--ink-faint, #8A96A4); }
.sh-who b { max-width: 100%; font-size: 0.95rem; font-weight: 700; color: var(--ink, #0E1A2B); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-biz { max-width: 100%; font-size: 0.84rem; color: var(--ink-soft, #52616F); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-close {
    display: none; flex: none; margin-inline-start: auto; width: 40px; height: 40px; padding: 0;
    place-items: center; border: none; border-radius: 50%; cursor: pointer;
    background: var(--chip-bg, rgba(13, 30, 55, 0.045)); color: var(--ink-soft, #52616F);
    transition: background 0.14s;
}
.sh-close:hover { background: var(--chip-bg-hover, rgba(13, 30, 55, 0.09)); }
.sh-close svg { width: 18px; height: 18px; }

/* The views: the main one and the language list, side by side; .is-sub slides the row toward the inline
   start (the next view comes from the inline end: from the right in LTR, from the left in RTL). */
.sh-views {
    display: flex; align-items: flex-start; overflow: hidden; overflow: clip;
    transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.sh-view {
    flex: 0 0 100%; min-width: 0; visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.28s;
}
.sh-view.is-active { visibility: visible; transition-delay: 0s, 0s; }
.sh-views.is-sub > .sh-view { transform: translateX(calc(-100% * var(--icon-flip, 1))); }
.sh-views.no-anim, .sh-views.no-anim > .sh-view { transition: none; }

/* Sections: quiet hairlines between them in the popover; grouped cards in the drawer. */
.sh-section + .sh-section::before {
    content: ""; display: block; height: 1px; margin: 6px 10px; background: var(--line, rgba(13, 30, 55, 0.08));
}

/* The row — one anatomy everywhere: icon tile · label (+ sub-label) · trailing element. */
.sh-item {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
    padding: 6px 10px; border-radius: 12px; border: none; background: none; cursor: pointer;
    font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink, #0E1A2B);
    text-align: start; text-decoration: none; transition: background 0.14s;
}
a.sh-item:hover, button.sh-item:hover { background: var(--surface-2, #F7FAFD); text-decoration: none; }
.sh-item-ic {
    width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--brand-050, #EDF5FD); color: var(--brand-700, #075CA6);
    transition: background 0.14s, color 0.14s;
}
.sh-item-ic svg { width: 18px; height: 18px; }
.sh-glyph { font-size: 1rem; font-weight: 800; line-height: 1; }
.sh-item-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sh-item-txt small { font-size: 0.78rem; font-weight: 500; color: var(--ink-faint, #8A96A4); margin-top: 2px; }
.sh-item-end {
    margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 4px;
    color: var(--ink-faint, #8A96A4);
}
.sh-item-end svg { width: 16px; height: 16px; }
.sh-value { font-size: 0.88rem; font-weight: 500; color: var(--ink-soft, #52616F); }
/* Selected: the page / section on screen (aria-current) and the current language (aria-checked on a radio row). */
.sh-item[aria-current], .sh-item[role="menuitemradio"][aria-checked="true"] { background: var(--brand-050, #EDF5FD); }
.sh-item[aria-current] .sh-item-ic,
.sh-item[role="menuitemradio"][aria-checked="true"] .sh-item-ic { background: var(--brand-grad, #0A7CD8); color: #fff; }
.sh-item[aria-current] .sh-item-end,
.sh-item[role="menuitemradio"][aria-checked="true"] .sh-item-end { color: var(--brand-700, #075CA6); }
.sh-sec-mark { display: none; }
.sh-item[aria-current] .sh-sec-mark { display: inline-flex; }
.sh-back .sh-item-ic { background: var(--chip-bg, rgba(13, 30, 55, 0.045)); color: var(--ink, #0E1A2B); }
.sh-back .sh-item-label { font-weight: 700; }
.sh-item-logout { color: var(--danger, #C0392B); }
.sh-item-logout .sh-item-ic { background: color-mix(in srgb, var(--danger, #C0392B) 10%, transparent); color: var(--danger, #C0392B); }
.sh-menu [role^="menuitem"]:focus-visible { outline: 2px solid var(--brand, #0A7CD8); outline-offset: -2px; }

/* The dark-mode switch. */
.sh-switch {
    flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px;
    background: var(--line-strong, rgba(13, 30, 55, 0.15)); transition: background 0.2s ease;
}
.sh-switch::after {
    content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: inset-inline-start 0.2s ease;
}
[aria-checked="true"] .sh-switch { background: var(--brand, #0A7CD8); }
[aria-checked="true"] .sh-switch::after { inset-inline-start: 21px; }

.sh-vh {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The scrim behind an open drawer (site-header.js sets .sh-drawer-open / .sh-drawer-closing on the header). */
.sh-scrim { display: none; }

/* Store badges (also used on the /account welcome hub). Drawn, not images, so they localise;
   black with a hairline grey border, per the stores' badge guidelines. */
.sh-store {
    display: inline-flex; align-items: center; gap: 8px; direction: ltr;
    background: #000; color: #fff; text-decoration: none;
    border: 1px solid #A6A6A6; border-radius: 10px;
    padding: 0 12px 0 10px; height: 46px; line-height: 1;
    transition: transform 0.14s ease, box-shadow 0.2s ease;
}
.sh-store:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5); }
.sh-store:focus-visible { outline: 3px solid var(--brand-glow, rgba(10, 124, 216, 0.28)); outline-offset: 2px; }
.sh-store svg { width: 24px; height: 24px; flex: none; }
.sh-store-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sh-store-txt small { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; unicode-bidi: plaintext; }
.sh-store-txt b { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.sh-store-sm { height: 36px; padding: 0 9px 0 7px; gap: 6px; border-radius: 8px; }
.sh-store-sm svg { width: 18px; height: 18px; }
.sh-store-sm .sh-store-txt small { font-size: 0.56rem; }
.sh-store-sm .sh-store-txt b { font-size: 0.86rem; }

/* The Menu (☰, signed out, ≤ 768px — the same breakpoint as the account drawer). */
.sh-more { display: none; }
.sh-more-btn svg { width: 20px; height: 20px; }
.site-header:not([data-auth="out"]) .sh-more-login { display: none; }
/* Signed in, language and dark mode live in the account menu: the header drops its chip and theme button
   (shown again once the page knows the visitor is signed out). */
.site-header:not([data-auth="out"]) .sh-lang,
.site-header:not([data-auth="out"]) .sh-theme { display: none; }

@media (max-width: 960px) {
    .sh-long { display: none; }
    .sh-short { display: inline; }
}
/* The full bar's narrow end (signed out: links · language · theme · Log in · Start free trial): the language
   chip keeps only its globe, the links tighten. */
@media (max-width: 1100px) {
    .sh-lang-name { display: none; }
    .sh-lang-btn { width: 40px; padding: 0; }
    .sh-nav a { padding: 8px 9px; font-size: 0.92rem; }
}

/* Compact (.sh-compact on the header — site-header.js sets it ≤ 768px, and above that whenever the full bar does
   not fit, e.g. Russian at tablet widths): logo · primary action · ☰, and the panel is a side drawer from the edge
   its button sits on (the inline end), full height, over a scrim; the page behind holds still (html.sh-scroll-lock). */
html.sh-scroll-lock, html.sh-scroll-lock body { overflow: hidden; }
/* A filtered header would be the drawer's containing block; drop the filter while a drawer is up. */
.site-header.sh-compact.sh-drawer-open { -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.sh-compact.sh-drawer-open .sh-scrim {
    display: block; position: fixed; inset: 0; z-index: 5;
    background: rgba(4, 10, 20, 0.5);
    animation: sh-fade-in 0.28s ease;
}
.site-header.sh-compact.sh-drawer-closing .sh-scrim { animation: sh-fade-out 0.22s ease forwards; pointer-events: none; }
/* One breakpoint, signed in or out: logo · primary action (Free trial / the avatar) · the ☰ Menu (signed out). */
.sh-compact .sh-nav, .sh-compact .sh-lang, .sh-compact .sh-theme { display: none; }
.sh-compact .sh-auth [data-act="login"] { display: none; }
.sh-compact .sh-more { display: block; }
.site-header.sh-compact[data-auth="in"] .sh-more { display: none; }
.sh-compact .sh-long { display: none; }
.sh-compact .sh-short { display: inline; }
.sh-compact .sh-right, .sh-compact .sh-auth { gap: 10px; }
.sh-compact .sh-section-onpage { display: block; }
.sh-compact .sh-avatar-btn .sh-caret { display: none; }
.sh-compact .sh-avatar-btn { padding-inline-end: 3px; }

.sh-compact .sh-panel {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; height: 100vh; height: 100dvh; max-height: none;
    width: min(360px, calc(100vw - 44px)); min-width: 0;
    display: flex; flex-direction: column; overflow: hidden;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    /* The hairline keeps the drawer's edge visible on the dark ground, where the scrim barely shows. */
    background: var(--bg, #EEF3F9); border: none; border-inline-start: 1px solid var(--line, rgba(13, 30, 55, 0.08)); border-radius: 0;
    border-start-start-radius: 24px; border-end-start-radius: 24px;
    box-shadow: var(--shadow-lg, 0 20px 50px rgba(10, 60, 120, 0.18));
    animation: sh-drawer-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.sh-compact .sh-pop.is-closing .sh-panel { animation: sh-drawer-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
.sh-compact .sh-panel-head { flex: none; padding: 18px 16px 16px 20px; padding-inline: 20px 14px; margin: 0; border: none; }
.sh-compact .sh-close { display: grid; }
.sh-compact .sh-views { flex: 1; min-height: 0; align-items: stretch; }
.sh-compact .sh-view {
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px 20px;
}
/* Grouped cards, as in the app: a surface on the page ground, inset hairlines between rows. */
.sh-compact .sh-section {
    flex: none; background: var(--surface, #fff); border-radius: 16px; overflow: hidden;
    border: 1px solid var(--line, rgba(13, 30, 55, 0.08)); box-shadow: var(--shadow-xs, 0 1px 2px rgba(13, 30, 55, 0.05));
}
.sh-compact .sh-section + .sh-section::before { display: none; }
.sh-compact .sh-section-out { margin-top: auto; }
.sh-compact .sh-panel .sh-item { min-height: 56px; padding: 10px 14px; border-radius: 0; }
.sh-compact .sh-panel .sh-item + .sh-item::before {
    content: ""; position: absolute; top: 0; inset-inline-start: 60px; inset-inline-end: 0;
    height: 1px; background: var(--line, rgba(13, 30, 55, 0.08));
}
@keyframes sh-drawer-in { from { transform: translateX(calc(100% * var(--icon-flip, 1))); } to { transform: none; } }
@keyframes sh-drawer-out { from { transform: none; } to { transform: translateX(calc(100% * var(--icon-flip, 1))); } }
@keyframes sh-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Phones: calm at 360px, 44px targets. */
@media (max-width: 520px) {
    .sh-btn { height: 42px; padding: 0 18px; font-size: 0.92rem; }
    .sh-more-btn { width: 42px; height: 42px; }
    .sh-avatar-btn { height: 42px; }
    .sh-avatar { width: 36px; height: 36px; }
    .sh-brand img { height: 24px; }
}
@media (max-width: 340px) {
    .sh-right, .sh-auth { gap: 8px; }
    .sh-btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-menu, .sh-compact .sh-panel, .sh-compact .sh-pop.is-closing .sh-panel,
    .site-header.sh-compact.sh-drawer-open .sh-scrim, .site-header.sh-compact.sh-drawer-closing .sh-scrim { animation: none; }
    .sh-views, .sh-view { transition: none; }
}

/* ======================================================= RTL icon system ===
   Directional icons (arrows, chevrons, log-out, external-link) are drawn for
   LTR and carry .icon-dir; in RTL they mirror. --icon-flip is inherited, so a
   nested dir="ltr" island flips back, and a component that adds its own
   transform (e.g. a hover nudge) composes with it:
       transform: translateX(calc(3px * var(--icon-flip))) scaleX(var(--icon-flip));
   Never put .icon-dir on non-directional icons (check, lock, globe, sun …). */
:root, [dir="ltr"] { --icon-flip: 1; }
[dir="rtl"] { --icon-flip: -1; }
.icon-dir { transform: scaleX(var(--icon-flip, 1)); }