/* ==========================================================================
   WeVisit shared header — issue #262 (WP2).
   One solid sticky bar on every public page (CEO decision, 2026-09-30: the
   transparent overlay on the home hero is retired), the account cluster that
   js/header.js renders into <wv-account>, its drawer, and the bell's
   notification panel. Linked on 46 pages (13 public, 4 auth, 29
   dashboards) — every page but the faq.html redirect stub (issue #268).
   On a dashboard it loads after dashboard.css; its page-level
   rules (scroll padding, skip link, bar, drawer) need .wv-header, .wv-skip
   or the public drawer, and none of the 29 dashboards carries them.

   Authoring rules (same as tokens.css):
   - Logical properties only; scripts/gen-ltr.py reads this file and mirrors
     any physical property it finds into ltr.css.
   - No @layer / @supports: gen-ltr.py skips every @ block but @media.
   - Layers come from tokens.css by name (--wv-z-*), no literals.
   - The one-row breakpoint is 1200px (D-1); js/header.js uses the same value.
   ========================================================================== */

:root {
    --wv-header-h: 64px;
}

@media (min-width: 1200px) {
    :root {
        --wv-header-h: 72px;
    }
}

/* Anchors and programmatic focus never land under the sticky bar. Only on
   a page that has the bar: this file also loads on the 4 auth pages. */
html:has(.wv-header) {
    scroll-padding-top: calc(var(--wv-header-h) + 8px);
}

html.wv-header-drawer-open {
    overflow: hidden;
}

/* Visually hidden, still read by assistive technology. */
.wv-vh {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Skip link (D-5): the first tab stop on the page ---- */
.wv-skip {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: var(--wv-z-skip);
    padding-block: 10px;
    padding-inline: 16px;
    border-radius: var(--wv-r-sm);
    background: var(--wv-primary);
    color: var(--wv-surface);
    font-size: var(--wv-fs-label);
    font-weight: var(--wv-fw-bold);
    transform: translateY(-200%);
}

.wv-skip:focus,
.wv-skip:focus-visible {
    transform: none;
}

/* ---- The bar ---- */
.wv-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--wv-z-sticky);
    background: var(--wv-surface);
    border-block-end: 1px solid var(--wv-border-subtle);
    box-shadow: var(--wv-sh-xs);
    font-family: var(--wv-ff);
}

.wv-header__bar {
    display: flex;
    align-items: center;
    gap: var(--wv-sp-4);
    /* the 1px bottom border is inside --wv-header-h, so the offsets that
       subtract it from the page (style.css) are exact */
    block-size: calc(var(--wv-header-h) - 1px);
}

.wv-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-block-size: 44px;
}

.wv-header__logo img {
    display: block;
    block-size: 40px;
    inline-size: auto;
    max-inline-size: none;
}

@media (min-width: 1200px) {
    .wv-header__logo img {
        block-size: 44px;
    }
}

/* ---- Main navigation (static HTML, data-wv-nav) ---- */
.wv-nav {
    display: none;
    flex: 1 1 auto;
    min-inline-size: 0;
}

@media (min-width: 1200px) {
    .wv-nav {
        display: block;
    }
}

.wv-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wv-nav li[hidden] {
    display: none;
}

.wv-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 10px;
    border-radius: var(--wv-r-pill);
    color: var(--wv-text);
    font-size: var(--wv-fs-label);
    font-weight: var(--wv-fw-regular);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--wv-t-fast) var(--wv-ease), color var(--wv-t-fast) var(--wv-ease);
}

.wv-nav a:hover {
    background: var(--wv-primary-50);
    color: var(--wv-primary);
}

.wv-nav a.is-active {
    background: var(--wv-primary-50);
    color: var(--wv-primary);
    font-weight: var(--wv-fw-bold);
}


/* ---- Account / utility cluster (<wv-account>) ---- */
wv-account {
    position: relative;
    display: flex;
    /* The inherited text properties the public page's body gives it, set
       here so the dashboards' cluster (dashboard.css body: another family,
       line-height normal, black) renders the same (issue #262 PR-B, measured
       by comparing computed styles on both surfaces). */
    color: var(--wv-text);
    font-family: var(--wv-ff);
    line-height: 1.6;
    align-items: center;
    gap: var(--wv-sp-2);
    flex: 0 0 auto;
    min-inline-size: 0;
    margin-inline-start: auto;
}

/* If header.js fails to load the element stays empty: a reserved 96x44 box.
   The guest buttons exist only when header.js renders them. */
wv-account:empty {
    min-block-size: 44px;
    min-inline-size: 96px;
}

wv-account [hidden] {
    display: none !important;
}

wv-account .wv-btn {
    min-block-size: 44px;
    padding-inline: var(--wv-sp-4);
    white-space: nowrap;
}

/* 1200-1407: the page .container is 1200px wide (1120px inside, 1105px at
   a 1200px viewport with a scrollbar) up to a 1400px viewport. At 15px
   links the one-row bar needed 1123-1176px inside (8 links + the cluster,
   Arabic and English, guest and each role; measured at Stage 3). 14px text
   (the H-8 floor), 6px link padding, a 12px bar gap and 8px padding on the
   14px guest buttons make every case fit at 1200px. The first name beside
   the avatar returns from 1408px: above 1400px the container is no longer
   capped at 1200px (at a 1408px viewport it is 1393px wide, 1313px inside;
   its cap there is 1600px). */
@media (min-width: 1200px) and (max-width: 1407px) {
    .wv-header__bar {
        gap: var(--wv-sp-3);
    }

    .wv-nav a {
        padding-inline: 6px;
        font-size: var(--wv-fs-sm);
    }

    wv-account .wv-btn {
        padding-inline: var(--wv-sp-2);
        font-size: var(--wv-fs-sm);
    }
}

/* Guest: Create account lives in the drawer below 1200px; the language
   switch below 768px. */
@media (max-width: 1199px) {
    wv-account .wv-acc__signup {
        display: none;
    }
}

@media (max-width: 767px) {
    wv-account .wv-acc__login {
        padding-inline: var(--wv-sp-3);
    }

    wv-account[data-variant="public"] > .wv-lang {
        display: none;
    }
}

/* Language switch: its own class, so the setup page's bare `button` rule
   (full-width, orange) cannot restyle it; every box property is set here. */
.wv-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    inline-size: auto;
    min-block-size: 44px;
    min-inline-size: 44px;
    margin: 0;
    padding-block: 0;
    padding-inline: 14px;
    border: 1.5px solid var(--wv-primary);
    border-radius: var(--wv-r-pill);
    background: var(--wv-surface);
    color: var(--wv-primary);
    font-family: inherit;
    font-size: var(--wv-fs-sm);
    font-weight: var(--wv-fw-bold);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    opacity: 1;
    transition: background-color var(--wv-t-fast) var(--wv-ease), color var(--wv-t-fast) var(--wv-ease);
}

.wv-lang:hover {
    background: var(--wv-primary);
    color: var(--wv-surface);
    opacity: 1;
}

/* Icon-only buttons: bell, hamburger, drawer close. */
.wv-bell,
.wv-burger,
.wv-drawer__close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 44px;
    block-size: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--wv-r-circle);
    background: transparent;
    color: var(--wv-primary);
    font-size: 20px;
    cursor: pointer;
}

.wv-bell:hover,
.wv-burger:hover,
.wv-drawer__close:hover,
.wv-bell[aria-expanded="true"] {
    background: var(--wv-primary-50);
}

@media (min-width: 1200px) {
    .wv-burger {
        display: none;
    }
}

.wv-bell__badge {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 2px;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 4px;
    border-radius: var(--wv-r-pill);
    background: var(--wv-danger);
    color: var(--wv-surface);
    font-size: 11px;
    font-weight: var(--wv-fw-bold);
    font-variant-numeric: var(--wv-num);
    line-height: 18px;
    text-align: center;
}

/* Avatar: an image or the initials. */
.wv-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 36px;
    block-size: 36px;
    overflow: hidden;
    border-radius: var(--wv-r-circle);
    background: var(--wv-primary);
    color: var(--wv-surface);
    font-size: var(--wv-fs-sm);
    font-weight: var(--wv-fw-bold);
    font-variant-numeric: var(--wv-num);
}

.wv-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.wv-avatar__init {
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
}

.wv-avatar--lg {
    inline-size: 48px;
    block-size: 48px;
    font-size: var(--wv-fs-body);
}

.wv-avatar--skeleton {
    inline-size: 36px;
    block-size: 36px;
    margin-inline: 4px;
    background: var(--wv-border);
}

/* Avatar trigger: >= 44x44; the first name (ellipsis) only at >= 1408. */
.wv-acc__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--wv-sp-2);
    min-block-size: 44px;
    min-inline-size: 44px;
    max-inline-size: 220px;
    margin: 0;
    padding-block: 4px;
    padding-inline: 4px;
    border: 1px solid transparent;
    border-radius: var(--wv-r-pill);
    background: transparent;
    color: var(--wv-primary);
    font-family: inherit;
    font-size: var(--wv-fs-label);
    font-weight: var(--wv-fw-bold);
    cursor: pointer;
}

.wv-acc__trigger:hover,
.wv-acc__trigger[aria-expanded="true"] {
    background: var(--wv-primary-50);
}

.wv-acc__first,
.wv-acc__chev {
    display: none;
}

@media (min-width: 1408px) {
    .wv-acc__trigger {
        padding-inline-end: 12px;
    }

    .wv-acc__first {
        display: block;
        min-inline-size: 0;
        max-inline-size: 14ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wv-acc__chev {
        display: inline;
        font-size: 11px;
    }
}

/* ---- Popovers: account menu and notification panel ----
   Inside the sticky header's stacking context, so --wv-z-dropdown orders
   them only against the bar's own content. */
.wv-pop {
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: var(--wv-z-dropdown);
    inline-size: min(340px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--wv-border-subtle);
    border-radius: var(--wv-r-md);
    background: var(--wv-surface);
    box-shadow: var(--wv-sh-md);
    text-align: start;
}

.wv-acc__menu {
    inline-size: min(300px, calc(100vw - 32px));
}

.wv-acc__head {
    display: flex;
    align-items: center;
    gap: var(--wv-sp-3);
    padding: var(--wv-sp-4);
    border-block-end: 1px solid var(--wv-border-subtle);
}

.wv-acc__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.wv-acc__name {
    color: var(--wv-primary);
    font-size: var(--wv-fs-label);
    font-weight: var(--wv-fw-bold);
    line-height: var(--wv-lh-tight);
    overflow-wrap: anywhere;
}

.wv-acc__email {
    color: var(--wv-text-muted);
    font-size: var(--wv-fs-sm);
    line-height: var(--wv-lh-sm);
    text-align: start;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}

.wv-acc__role {
    align-self: flex-start;
    margin-block-start: 4px;
    padding-block: 2px;
    padding-inline: 10px;
    border-radius: var(--wv-r-pill);
    background: var(--wv-primary-50);
    color: var(--wv-primary);
    font-size: var(--wv-fs-sm);
    font-weight: var(--wv-fw-bold);
}

.wv-acc__list {
    margin: 0;
    padding-block: 6px;
    padding-inline: 0;
    list-style: none;
}

.wv-acc__item {
    display: flex;
    align-items: center;
    gap: var(--wv-sp-3);
    inline-size: 100%;
    min-block-size: 44px;
    margin: 0;
    padding-block: 0;
    padding-inline: var(--wv-sp-4);
    border: 0;
    background: transparent;
    color: var(--wv-text);
    font-family: inherit;
    font-size: var(--wv-fs-label);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.wv-acc__item i {
    inline-size: 20px;
    color: var(--wv-primary);
    text-align: center;
}

.wv-acc__item:hover,
.wv-acc__item:focus-visible {
    background: var(--wv-primary-50);
}

.wv-acc__item--danger,
.wv-acc__item--danger i {
    color: var(--wv-danger-ink);
}

.wv-acc__sep {
    block-size: 1px;
    margin-block: 6px;
    background: var(--wv-border-subtle);
}

/* ---- Notification panel (public and dashboard bell) ----
   Positioned by .wv-pop: anchored at the cluster's inline end, at most
   100vw - 32px wide, so it stays on-screen at 375px without the old
   dashboard pin (measured, issue #262 PR-B). */
wv-account .wv-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wv-sp-2);
    padding-block: 13px;
    padding-inline: 16px;
    border-block-end: 1px solid var(--wv-border-subtle);
}

wv-account .wv-notif-title {
    margin: 0;
    color: var(--wv-primary);
    font-size: var(--wv-fs-label);
    font-weight: var(--wv-fw-bold);
}

wv-account .wv-notif-head button {
    min-block-size: 36px;
    border: 0;
    background: none;
    color: var(--wv-accent-ink);
    font-family: inherit;
    font-size: var(--wv-fs-sm);
    cursor: pointer;
}

wv-account .wv-notif-list {
    max-block-size: min(380px, 60vh);
    overflow-y: auto;
}

wv-account .wv-notif-item {
    display: block;
    inline-size: 100%;
    padding-block: 12px;
    padding-inline: 16px;
    border: 0;
    border-block-end: 1px solid var(--wv-border-subtle);
    background: none;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

wv-account .wv-notif-item:hover {
    background: var(--wv-surface-soft);
}

wv-account .wv-notif-item.unread {
    background: var(--wv-primary-50);
}

wv-account .wv-notif-item .t {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-block: 0 3px;
    margin-inline: 0;
    color: var(--wv-primary);
    font-size: var(--wv-fs-sm);
    font-weight: var(--wv-fw-bold);
}

wv-account .wv-notif-item .t .dot {
    flex: none;
    inline-size: 7px;
    block-size: 7px;
    border-radius: var(--wv-r-circle);
    background: var(--wv-accent);
}

wv-account .wv-notif-item .b {
    margin-block: 0 4px;
    margin-inline: 0;
    color: var(--wv-text-2);
    font-size: var(--wv-fs-sm);
    line-height: 1.5;
}

wv-account .wv-notif-item .m {
    margin: 0;
    color: var(--wv-text-muted);
    font-size: var(--wv-fs-meta);
}

wv-account .wv-notif-empty {
    padding-block: 34px;
    padding-inline: 16px;
    color: var(--wv-text-muted);
    font-size: var(--wv-fs-sm);
    text-align: center;
}

/* ---- Drawer (below 1200px) ----
   One fixed layer; inside it the panel follows the backdrop in source
   order, so it paints above it with no second token. The layer is
   --wv-z-modal, not --wv-z-drawer: this drawer is aria-modal and makes the
   rest of the page inert, and on --wv-z-drawer (910) the chatbot launcher
   (--wv-z-chatbot, 950) was painted over it — measured at 375px on
   index.html, covering the drawer's logout item. */
.wv-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--wv-z-modal);
}

.wv-drawer[hidden] {
    display: none;
}

.wv-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: var(--wv-scrim);
}

.wv-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    inline-size: min(420px, 100vw);
    block-size: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--wv-surface);
    box-shadow: var(--wv-sh-lg);
    font-family: var(--wv-ff);
}

.wv-drawer__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--wv-sp-2);
    border-block-end: 1px solid var(--wv-border-subtle);
}

.wv-drawer__body {
    display: flex;
    flex-direction: column;
    gap: var(--wv-sp-4);
    padding: var(--wv-sp-4);
}

.wv-drawer__nav ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wv-drawer__nav a {
    display: flex;
    align-items: center;
    min-block-size: 48px;
    padding-inline: var(--wv-sp-3);
    border-radius: var(--wv-r-sm);
    color: var(--wv-text);
    font-size: var(--wv-fs-body);
    text-decoration: none;
}

.wv-drawer__nav a:hover,
.wv-drawer__nav a.is-active {
    background: var(--wv-primary-50);
    color: var(--wv-primary);
}

.wv-drawer__nav a.is-active {
    font-weight: var(--wv-fw-bold);
}

.wv-drawer__account {
    border: 1px solid var(--wv-border-subtle);
    border-radius: var(--wv-r-md);
}

.wv-drawer__auth {
    display: flex;
    flex-direction: column;
    gap: var(--wv-sp-2);
    padding-block-start: var(--wv-sp-4);
    border-block-start: 1px solid var(--wv-border-subtle);
}

.wv-drawer__foot {
    display: flex;
    padding-block-start: var(--wv-sp-4);
    border-block-start: 1px solid var(--wv-border-subtle);
}

/* ---- Auth pages: an in-flow language switch, no nav ---- */
wv-account[data-variant="auth"] {
    justify-content: flex-end;
    margin-block-end: var(--wv-sp-4);
}

/* ---- Skip-link target (issue #269) ----
   The skip link moves focus to <main id="wv-main" tabindex="-1">. A
   container that is a programmatic target, not a control, must not draw the
   browser's focus ring around the whole page body. */
main[tabindex="-1"]:focus {
    outline: none;
}

/* ---- Password-visibility button (issue #269, WCAG 2.5.8) ----
   js/api.js builds it with an inline style (position, inset-inline-end:16px,
   padding 0) and no size, so it was only its 17x15 icon. It is now a 44x44
   target centred where the icon was (the !important beats that inline
   inset-inline-end). */
[data-eye-btn] {
    inline-size: 44px;
    block-size: 44px;
    justify-content: center;
    inset-inline-end: 2px !important;
}

/* ---- Header below 360px (issue #269) ----
   In Arabic the logo, the guest button and the menu button together were
   wider than the bar, so the account cluster and the menu button were
   measured starting off-screen at 280, 300 and 320px viewport widths. The
   menu button keeps its 44px target size; the logo, the gaps and the guest
   button's padding shrink. */
@media (max-width: 359px) {
    .wv-header__bar {
        gap: var(--wv-sp-2);
    }

    .wv-header__logo img {
        block-size: 32px;
    }

    wv-account {
        gap: 4px;
    }

    wv-account .wv-acc__login {
        padding-inline: 8px;
        font-size: var(--wv-fs-sm);
    }
}