/* =============================================================================
   auth-widget.css   (v3)
   -----------------------------------------------------------------------------
   Styling for:
     • The unified auth header widget — RED (anonymous) ↔ GREEN (signed-in)
       profile button with status dot, hover-glow, and animated KQG scan beam.
     • The Tenant+ "+" entry-point button that lives in the header BEFORE the
       translation icon (desktop) and as a list-row in the mobile drawer.
     • The dropdown menu that the profile button opens — sized and themed so
       it matches the existing .ikh-modal family and slots cleanly under the
       header on every viewport.

   Stacks AFTER site.css so the legacy .profile-btn-kqg and .signin-btn-kqg
   rules can be overridden where needed. We don't delete those rules so the
   transition is non-breaking if any cached page still ships the old widget.
   ============================================================================= */

/* ════════════════════════════════════════════════════════════════════════════
   1. AUTH WIDGET WRAPPER
   ════════════════════════════════════════════════════════════════════════════ */
.ikh-auth-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
    isolation: isolate;
    /* The page header (.header-strip) has z-index: 10 and a ::after gradient
       border at the bottom of the bar that paints over anything not lifted
       above it. We bump the widget's local stacking to 60 so the dropdown
       menu AND the Tenant+ tooltip render above the gradient bar. */
    z-index: 60;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. PROFILE BUTTON — the single unified control
   ════════════════════════════════════════════════════════════════════════════
   We render the same shape in both states; only the colour family changes.
   The wrapper carries [data-ikh-auth-state="anon"|"authed"] and CSS variables
   re-paint the entire button without re-layout.

   The button is intentionally NOT square — it's the same 44×44 rectangular
   chip used by every other header control, with a 14px radius so it visually
   belongs to the KQG family.
*/

.ikh-auth-widget {
    /* ── Default (anon) colour set — warm red ────────────────────────────
       We use a tomato-orange-red (#E03C31, the SA flag red) rather than a
       harsh fire-engine red, so it sits comfortably next to the orange
       brand mark without screaming "error". ── */
    --auth-tone: #E03C31;
    --auth-tone-soft: rgba(224, 60, 49, 0.08);
    --auth-tone-glow: rgba(224, 60, 49, 0.32);
    --auth-tone-border: rgba(224, 60, 49, 0.30);
    --auth-tone-deep: #B22A22;
    --auth-tone-tint: rgba(255, 235, 232, 0.95);
    --auth-tone-tint2: rgba(255, 215, 208, 0.78);
}

    .ikh-auth-widget[data-ikh-auth-state="authed"] {
        /* ── Authed colour set — calm verdant green ────────────────────────────
       Chosen against the SA flag green #007A4D and shifted slightly toward
       emerald (#10A65A) for higher legibility on the warm header gradient.
       The deep variant (#0A7B43) is for hover/active states. ── */
        --auth-tone: #10A65A;
        --auth-tone-soft: rgba(16, 166, 90, 0.08);
        --auth-tone-glow: rgba(16, 166, 90, 0.32);
        --auth-tone-border: rgba(16, 166, 90, 0.32);
        --auth-tone-deep: #0A7B43;
        --auth-tone-tint: rgba(228, 248, 238, 0.95);
        --auth-tone-tint2: rgba(196, 232, 213, 0.78);
    }

.ikh-auth-profile-btn {
    /*
     * STRICT ICON STYLE — no chip, no border, no background, no shadow.
     * Just the SVG silhouette + the corner status dot. We still keep
     * a generous click target (44×44 hit area) and a sane hover state
     * that lifts/glows the icon itself, not a chip around it.
     */
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    /* Colour token consumed by SVG via currentColor */
    color: var(--auth-tone);
    /* Animate only paint properties — never layout */
    transition: color 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), filter 0.25s ease;
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    will-change: transform;
    transform: translateZ(0);
    flex-shrink: 0;
    z-index: 21;
    isolation: isolate;
}

    /* Hit-area buffer — keeps the click target generous despite the
   small visual footprint of the bare icon. NOTE: we deliberately use
   `-4px` (not `-8px`) so this buffer does NOT overlap the Tenant+
   button sitting beside us in the same .gap-2 flex row. An 8px buffer
   plus a 8px flex gap means the cursor between the two icons would
   trigger BOTH :hover states, surfacing both tooltips at once — the
   tighter buffer prevents that visual bug. */
    .ikh-auth-profile-btn::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
    }

    .ikh-auth-profile-btn:hover,
    .ikh-auth-profile-btn:focus-visible {
        /* Lift + glow the icon itself rather than a chip */
        transform: scale(1.10);
        color: var(--auth-tone-deep);
        filter: drop-shadow(0 4px 10px var(--auth-tone-glow));
        outline: none;
    }

    .ikh-auth-profile-btn[aria-expanded="true"] {
        transform: scale(1.06);
        color: var(--auth-tone-deep);
        filter: drop-shadow(0 3px 8px var(--auth-tone-glow));
    }

/* SVG glyph — currentColor inherited from button color token */
.ikh-auth-profile-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    pointer-events: none;
}

    .ikh-auth-profile-svg svg {
        overflow: visible;
    }

/* Heartbeat pulse on the head core */
.ikh-auth-core-pulse {
    animation: ikh-auth-core-breathe 2.6s ease-in-out infinite alternate;
    transform-origin: 40px 25px;
}

@keyframes ikh-auth-core-breathe {
    0% {
        opacity: 0.55;
        transform: scale(0.85);
    }

    100% {
        opacity: 0.95;
        transform: scale(1.15);
    }
}

/* Scan-beam sweep — same easing as .profile-scan-beam */
.ikh-auth-scan-beam {
    stroke-dasharray: 28 18;
    animation: ikh-auth-scan-sweep 2.6s ease-in-out infinite;
}

@keyframes ikh-auth-scan-sweep {
    0% {
        stroke-dashoffset: 50;
        opacity: 0;
    }

    15% {
        opacity: 0.85;
    }

    85% {
        opacity: 0.85;
    }

    100% {
        stroke-dashoffset: -20;
        opacity: 0;
    }
}

/* ── Status dot ─────────────────────────────────────────────────────────
   Small chip in the bottom-right corner that reflects auth state at a
   glance. Pulses gently in the authed (green) state to signal "live".
   Without a chip wrapper, the dot tucks tighter to the bust silhouette
   so it reads as a "status badge" pinned to the shoulder.
*/
.ikh-auth-status-dot {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--auth-tone);
    box-shadow: 0 0 0 2px #fff, 0 0 6px var(--auth-tone-glow);
    pointer-events: none;
    z-index: 2;
}

.ikh-auth-status-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--auth-tone);
    opacity: 0.5;
    animation: ikh-auth-status-pulse 2.2s ease-out infinite;
}

@keyframes ikh-auth-status-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    70% {
        transform: scale(2.2);
        opacity: 0;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ── Initials overlay ──────────────────────────────────────────────────
   When the user has no avatar URL we want to surface their initials.
   Sit on top of the SVG so the head silhouette still reads as the
   "frame". Only renders when authed AND .is-initials class is present
   on the button (added by ikh-signin-modal.js).
*/
.ikh-auth-initials {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--auth-tone-deep);
    pointer-events: none;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ikh-auth-widget[data-ikh-auth-state="authed"] .ikh-auth-profile-btn.is-initials .ikh-auth-initials {
    display: flex;
}

/* Hide the head dot when initials are showing so the letters can breathe */
.ikh-auth-widget[data-ikh-auth-state="authed"] .ikh-auth-profile-btn.is-initials .ikh-auth-core-pulse {
    opacity: 0;
}

/* ── Inline tooltip ────────────────────────────────────────────────────
   INTENTIONALLY HIDDEN. The profile button is a dropdown trigger — it
   opens the auth menu on hover (desktop) and tap (touch). A hover
   tooltip on top of that would visually conflict with the menu, so
   we suppress it. We keep the markup in the partial in case a future
   variant needs it (just toggle this rule).
*/
.ikh-auth-tooltip {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. DROPDOWN MENU
   ════════════════════════════════════════════════════════════════════════════
   The menu is appended to .ikh-auth-widget by JS. It renders below the
   button on desktop and behaves like a refined glass card.

   We support two layouts via the [data-ikh-menu-variant] attribute:
     • "anon"    — Sign in + Register (no header card)
     • "authed"  — name/email header + nav items + sign out (existing)
*/
.ikh-auth-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    max-width: 300px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(14, 14, 17, 0.06);
    box-shadow: 0 24px 60px -16px rgba(14, 14, 17, 0.28), 0 4px 14px rgba(14, 14, 17, 0.06);
    padding: 8px;
    z-index: 10100;
    /* Subtle entry animation */
    animation: ikh-auth-menu-in 0.18s cubic-bezier(0.22, 0.86, 0.36, 1.04);
    transform-origin: top right;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    color: #0E0E11;
}

    .ikh-auth-menu[hidden] {
        display: none !important;
    }

@keyframes ikh-auth-menu-in {
    0% {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Menu top arrow */
.ikh-auth-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid rgba(14, 14, 17, 0.06);
    border-left: 1px solid rgba(14, 14, 17, 0.06);
    transform: rotate(45deg);
    border-top-left-radius: 3px;
}

/* ── Authed header card — name + email + role chip ── */
.ikh-auth-menu-header {
    padding: 12px 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.04), rgba(86, 196, 248, 0.05));
    margin-bottom: 6px;
    position: relative;
    overflow: hidden;
}

    .ikh-auth-menu-header::after {
        content: '';
        position: absolute;
        inset: auto -20% -80% auto;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(245, 130, 32, 0.10), transparent 60%);
        pointer-events: none;
    }

.ikh-auth-menu-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1A1D20;
    line-height: 1.2;
    margin-bottom: 2px;
    word-break: break-word;
}

.ikh-auth-menu-email {
    font-size: 0.78rem;
    color: #6B6F78;
    line-height: 1.2;
    word-break: break-all;
    margin-bottom: 8px;
}

.ikh-auth-menu-role {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #F58220;
    background: rgba(245, 130, 32, 0.10);
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Anon header — short intro line ── */
.ikh-auth-menu-anon-head {
    padding: 10px 12px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8B8F98;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Menu items ── */
.ikh-auth-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 500;
    color: #1A1D20;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
    font-family: inherit;
}

    .ikh-auth-menu-item:hover,
    .ikh-auth-menu-item:focus-visible {
        background: rgba(245, 130, 32, 0.08);
        color: #B6500F;
        outline: none;
        transform: translateX(2px);
    }

    .ikh-auth-menu-item.is-primary {
        background: linear-gradient(135deg, #F58220, #E66E0A);
        color: #fff;
        font-weight: 700;
        margin-top: 4px;
        box-shadow: 0 4px 12px rgba(245, 130, 32, 0.30);
    }

        .ikh-auth-menu-item.is-primary:hover {
            background: linear-gradient(135deg, #E66E0A, #C95D08);
            color: #fff;
            transform: translateX(0) translateY(-1px);
            box-shadow: 0 6px 18px rgba(245, 130, 32, 0.40);
        }

    .ikh-auth-menu-item.is-secondary {
        background: rgba(245, 130, 32, 0.06);
        color: #1A1D20;
        font-weight: 600;
    }

        .ikh-auth-menu-item.is-secondary:hover {
            background: rgba(245, 130, 32, 0.12);
            color: #B6500F;
            transform: translateX(0);
        }

    .ikh-auth-menu-item.is-danger {
        color: #C13C2C;
    }

        .ikh-auth-menu-item.is-danger:hover {
            background: rgba(193, 60, 44, 0.08);
            color: #A0291B;
        }

    .ikh-auth-menu-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        stroke-width: 1.6;
    }

/* Divider */
.ikh-auth-menu-divider {
    height: 1px;
    background: rgba(14, 14, 17, 0.06);
    margin: 6px 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   4. TENANT+ HEADER ENTRY-POINT (desktop)
   ════════════════════════════════════════════════════════════════════════════
   A small "+" icon that sits NEXT TO the profile icon at the right edge of
   the header. Clicking it scrolls/switches the homepage to the Tenant+ tab.

   Strict-icon style: NO chip, NO border, NO background — just the sky-blue
   glyph. Hover lifts/glows the icon itself, not a wrapper around it. The
   tooltip renders BELOW the icon (anchored inside the header band) so it
   stays in the same visual zone as the icon itself.
*/
.ikh-tenantplus-btn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    color: #56C4F8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), filter 0.25s ease;
    will-change: transform;
    flex-shrink: 0;
    text-decoration: none;
    /* The page header (.header-strip) has z-index: 10 and a ::after gradient
       border at the bottom of the bar. Without this, the tooltip we anchor
       under the icon would be painted UNDER that gradient bar. Lifting the
       button to 60 puts both the icon and its tooltip cleanly above the
       gradient. Same lift as .ikh-auth-widget so the two siblings are at
       parity. */
    z-index: 60;
    isolation: isolate;
}

    .ikh-tenantplus-btn::after {
        content: '';
        position: absolute;
        /* See comment on .ikh-auth-profile-btn::after — keep this at -4px so
       the two neighbouring icons' hover zones don't overlap. */
        inset: -4px;
        border-radius: 50%;
    }

    .ikh-tenantplus-btn:hover,
    .ikh-tenantplus-btn:focus-visible {
        color: #2B95CE;
        transform: scale(1.10);
        filter: drop-shadow(0 4px 10px rgba(86, 196, 248, 0.45));
        outline: none;
    }

    .ikh-tenantplus-btn:active {
        transform: scale(1.02);
    }

/* The "+" glyph — rendered as an INLINE SVG inside the button (not via
   CSS pseudo-elements) so the stroke weight matches the profile icon's
   stroke-width="2" exactly. Without a chip framing it, the icon needs
   to read at the same visual weight as the head silhouette next to it,
   which means matching its stroke geometry, not bulking up.

   The SVG uses the same viewBox dimensions (80×80) and stroke-width (2)
   as the profile icon, so the two icons render with identical line
   thickness side-by-side. */
.ikh-tenantplus-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* v3 — glyph size bumped by 15% (34→39) per design feedback. The 44×44
       button shell is unchanged; the bigger glyph just consumes more of
       the available padding. Profile icon next to it is sized via its
       own partial, so the visual parity comment below is now historical. */
    width: 39px;
    height: 39px;
    pointer-events: none;
    line-height: 0;
}

    .ikh-tenantplus-glyph svg {
        overflow: visible;
        /* v3 — fill the wrapper. The inline width="34" height="34" on the
           SVG in _Layout.cshtml would otherwise cap the visible size. Now
           the .ikh-tenantplus-glyph width drives the final rendered size,
           which makes future tweaks a one-line change. */
        width: 100%;
        height: 100%;
    }

/* The cross lines inherit currentColor from the button so hover state
   smoothly shifts both bars + the glow ring at once. */
.ikh-tenantplus-glyph-line {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Subtle scan-pulse — opacity flicker on the vertical bar so the icon
   doesn't feel static next to the animated profile + translation icons. */
.ikh-tenantplus-glyph-line--v {
    animation: ikh-tenantplus-bar-pulse 2.4s ease-in-out infinite;
    transform-origin: 40px 40px;
}

@keyframes ikh-tenantplus-bar-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Glow ring — a soft pulsing circle around the cross, picked up by the
   filter:drop-shadow on hover so the icon feels alive without needing
   any opaque wrapper. */
.ikh-tenantplus-glyph-glow {
    fill: currentColor;
    opacity: 0;
    transform-origin: 40px 40px;
    animation: ikh-tenantplus-glow-breathe 3s ease-in-out infinite;
}

@keyframes ikh-tenantplus-glow-breathe {
    0%, 100% {
        opacity: 0;
        transform: scale(0.7);
    }

    50% {
        opacity: 0.12;
        transform: scale(1);
    }
}

/* ── Tooltip — renders BELOW the icon ──────────────────────────────────
   Sits just under the icon, inside the header band so it visually
   stays in the header zone rather than dropping into page content.
   Note: the profile icon's hover-dropdown also opens below — but the
   profile dropdown only opens after a 140ms hover delay (or on click),
   so a quick hover-tooltip-then-dropdown sequence reads naturally.

   The two icons are siblings with `gap-2` between them — the tooltip
   is centered under the Tenant+ icon, well clear of the profile icon
   beside it. */
.ikh-tenantplus-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -4px);
    background: #1A1D20;
    color: #fff;
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    /* Lift well above the header's animated gradient border (which lives
       in the same stacking context as the header content at z-index 10).
       100 keeps a comfortable margin even if a future component adds
       another translucent overlay near the header band. */
    z-index: 100;
}

    /* Arrow pointing UP at the icon (tooltip is below) */
    .ikh-tenantplus-tooltip::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-bottom-color: #1A1D20;
    }

/* ─────────────────────────────────────────────────────────────────────────
   TOOLTIP TRIGGER RULES — 2026-05 rewrite
   ─────────────────────────────────────────────────────────────────────────
   Previous behaviour: tooltip showed on :hover AND :focus-visible. That
   produced three bugs reported on the live site:

     1. After clicking the "+" to open the dropdown menu, the button kept
        focus → :focus-visible kept the tooltip glued to the icon, so the
        user saw the tooltip overlapping the open menu.

     2. On touch devices, tapping the icon fires a synthetic :hover that
        sticks until another element is tapped — so "Tenant+ Portal" stayed
        on screen indefinitely after the user dismissed the menu.

     3. Tab-focusing the button (keyboard nav) also opened the tooltip even
        when the menu was open via prior click — double-rendering.

   New rules:

     · Show ONLY on real hover (pointer:fine — i.e. mice & precision
       trackpads). Touch devices never see the tooltip. The dropdown menu
       itself communicates everything the tooltip would have said.

     · Never show while the menu is open. The wrapper gets .is-open from
       tenant-plus-header.js. The :where(:not(.is-open)) guard on the
       parent selector means a hovered button inside an open widget gets
       no tooltip — eliminating overlap.

     · :focus-visible removed entirely. Keyboard focus on the button
       still works (it's a button) but does not surface the tooltip,
       because the menu opens on Enter/Space and the tooltip would just
       duplicate that. Accessibility tree still exposes the aria-label.
   ───────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .ikh-tenantplus:where(:not(.is-open)) .ikh-tenantplus-btn:hover .ikh-tenantplus-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}

/* Force-hide override — wins against any in-flight transition or
   hover state once the menu is open. Without this, a tooltip that
   was mid-fade-in when the user clicked would briefly render at
   partial opacity on top of the open menu. */
.ikh-tenantplus.is-open .ikh-tenantplus-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -4px) !important;
    transition: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SIBLING-AWARE TOOLTIP SUPPRESSION  (2026-05)
   ─────────────────────────────────────────────────────────────────────────
   The Tenant+ "+" and the profile icon are siblings inside
   .ikh-header-rightset. When the profile dropdown is open the user
   often mouses over the "+" — without this rule the Tenant+ tooltip
   would render behind the open profile menu.

   The popover-bus in JS (showProfileMenu dispatches ikh:popover:opening
   → Tenant+ closes its own menu) handles the menu-vs-menu conflict, but
   the TOOLTIP is a hover-only CSS layer that doesn't participate in
   that bus. This rule plugs that gap.

   How it works: `.ikh-header-rightset:has([aria-expanded="true"])`
   matches the container whenever ANY descendant button is expanded.
   That covers:
     · Profile button open  →  Tenant+ tooltip hidden
     · Future header widgets that follow the aria-expanded pattern
     · (Tenant+ button itself open is already covered by .is-open above)

   :has() has been baseline in all modern browsers since late 2023.
   If you need to support Firefox < 121 / Safari < 15.4 for some reason,
   the fallback is to also dispatch a CSS-readable class on the parent
   from ikh-signin-modal.js — but I deliberately didn't do that here
   because :has() coverage is now 95%+ and that's our supported floor.
   ───────────────────────────────────────────────────────────────────── */
.ikh-header-rightset:has([aria-expanded="true"]) .ikh-tenantplus-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -4px) !important;
    transition: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE BEHAVIOUR
   ════════════════════════════════════════════════════════════════════════════ */

/* Tighten the desktop icons at ≤1200px so they don't crowd the brand */
@media (max-width: 1199px) {
    .ikh-auth-profile-btn,
    .ikh-tenantplus-btn {
        width: 40px;
        height: 40px;
    }

    .ikh-tenantplus-glyph {
        width: 24px;
        height: 24px;
    }

        .ikh-tenantplus-glyph::before {
            width: 3px;
            height: 20px;
        }

        .ikh-tenantplus-glyph::after {
            height: 3px;
            width: 20px;
        }
}

/* On mobile the desktop trio is hidden by .d-none.d-lg-flex utility classes
   on the wrappers themselves — we therefore don't need extra media rules
   for the buttons below 992px. The drawer takes over there. */

/* Reduced motion — kill all decorative loops */
@media (prefers-reduced-motion: reduce) {
    .ikh-auth-core-pulse,
    .ikh-auth-scan-beam,
    .ikh-auth-status-pulse,
    .ikh-tenantplus-glyph::before {
        animation: none !important;
    }

    .ikh-auth-menu {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   6. BURGER DRAWER — Tenant+ section + auth refinements
   ════════════════════════════════════════════════════════════════════════════
   The drawer now hosts a dedicated Tenant+ block with its own Sign In /
   Register CTAs — separate from the general site auth. These rules style
   that block so it reads as a peer of the existing list rows but visually
   "different" enough that users understand it's its own portal.
*/
.ikh-burger-tenantplus {
    margin-top: 4px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(232, 247, 255, 0.7), rgba(255, 251, 245, 0.4));
    border: 1px solid rgba(86, 196, 248, 0.18);
    position: relative;
    overflow: hidden;
}

    .ikh-burger-tenantplus::before {
        /* Decorative corner glow */
        content: '';
        position: absolute;
        right: -30px;
        top: -30px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(86, 196, 248, 0.18), transparent 60%);
        pointer-events: none;
    }

.ikh-burger-tenantplus-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.ikh-burger-tenantplus-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #56C4F8, #2B95CE);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(86, 196, 248, 0.32);
    flex-shrink: 0;
}

.ikh-burger-tenantplus-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.ikh-burger-tenantplus-title {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1A1D20;
    line-height: 1.15;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.ikh-burger-tenantplus-title-plus {
    color: #56C4F8;
    font-weight: 800;
}

.ikh-burger-tenantplus-sub {
    font-size: 0.74rem;
    color: #6B6F78;
    margin-top: 2px;
    line-height: 1.3;
}

.ikh-burger-tenantplus-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.ikh-burger-tenantplus-cta {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ikh-burger-tenantplus-cta--secondary {
    background: rgba(255, 255, 255, 0.85);
    color: #2B95CE;
    border: 1px solid rgba(86, 196, 248, 0.32);
}

    .ikh-burger-tenantplus-cta--secondary:hover {
        background: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(86, 196, 248, 0.20);
        color: #1F7DAD;
    }

.ikh-burger-tenantplus-cta--primary {
    background: linear-gradient(135deg, #56C4F8, #2B95CE);
    color: #fff;
    box-shadow: 0 4px 14px rgba(86, 196, 248, 0.36);
}

    .ikh-burger-tenantplus-cta--primary:hover {
        background: linear-gradient(135deg, #2B95CE, #1F7DAD);
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(86, 196, 248, 0.46);
        color: #fff;
    }

.ikh-burger-tenantplus-cta i {
    font-size: 0.85rem;
}

/* The Tenant+ section sits inside the scrollable body of the drawer.
   We give it a section title row that matches the existing "My Account"
   title pattern, so the visual hierarchy is consistent. */
.ikh-burger-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px 6px;
}

    .ikh-burger-section-title-row .ikh-burger-section-title {
        margin: 0;
    }

/* ════════════════════════════════════════════════════════════════════════════
   7. FLOATING SETTINGS TRIO — strict-icon, black base, brand-colour accents
   ════════════════════════════════════════════════════════════════════════════
   The trio (Privacy Policy, Preferences/Settings, Terms of Use) plus the
   Accessibility button (sibling, lives in a different positional anchor) all
   render as bare glyphs — NO chip, NO border, NO background, NO shadow.

   Each icon is repainted by CSS so:
     • Base geometry (shield/gear/doc/figure outlines + structural detail)
       → charcoal black  #1A1A1F  (brand wordmark/silhouette colour)
     • One key accent inside each → a brand-pop colour:
         · Privacy core jewel   → sky blue   #56C4F8
         · Settings hub jewel   → sunset orange #F58220
         · Terms seal jewel     → sunset orange #F58220
         · Terms top mini-jewel → sky blue   #56C4F8 (for variety)
         · Accessibility head   → sunset orange #F58220 (matches "sun" theme)

   We use attribute selectors on the hex codes already in the SVG markup so
   we don't have to rewrite the partials. Sizing bumps the buttons to match
   the visual weight of the Khatsong! robot at right of the screen.

   Sized-by-design notes:
     • Buttons: 72×72 desktop / 60×60 mobile  (was 56 / 50)
     • Inner SVG: 56×56 desktop / 44×44 mobile (was 40 / 36)
     • Gap between buttons: 14px (was 12px) so the larger icons breathe
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper: pull the trio gap up a touch ────────────────────────────── */
.floating-settings-wrapper {
    gap: 14px !important;
}

    /* ── Button shell: strip the chip, bump the size ──────────────────────── */
    .floating-settings-wrapper .settings-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        width: 72px !important;
        height: 60px !important;
        border-radius: 14px !important;
        padding: 0 !important;
        transition: color 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), filter 0.25s ease !important;
    }

        /* ── Inner SVG sizing ─────────────────────────────────────────────────── */
        /* v3 — glyph reduced by 20% per design feedback. Desktop: 56→45px.
           The 72×72 button shell stays unchanged so the hit-area / tap-target
           is preserved; only the visible glyph shrinks. */
        .floating-settings-wrapper .settings-btn .fab-icon-svg {
            width: 45px;
            height: 45px;
            transition: filter 0.25s ease, transform 0.25s ease;
        }

            /* ── BLACK BASE: recolour every default orange stroke/fill to charcoal ──
   The SVGs ship with stroke="#F58220" and fill="rgba(245,130,32,*)" on
   structural elements. Attribute selectors target them directly so we
   don't have to rewrite a single line of the markup. */
            .floating-settings-wrapper .settings-btn .fab-icon-svg [stroke="#F58220"] {
                stroke: #1A1A1F;
            }

            .floating-settings-wrapper .settings-btn .fab-icon-svg [fill="#F58220"] {
                fill: #1A1A1F;
            }

            /* Translucent orange-tinted fills (used as soft inner washes in the
   shield/gear/doc bodies) re-cast in a soft charcoal tint at the same
   alpha so the icons keep their internal depth. */
            .floating-settings-wrapper .settings-btn .fab-icon-svg [fill="rgba(245,130,32,0.07)"] {
                fill: rgba(26, 26, 31, 0.05);
            }

            .floating-settings-wrapper .settings-btn .fab-icon-svg [fill="rgba(245,130,32,0.12)"] {
                fill: rgba(26, 26, 31, 0.08);
            }

            .floating-settings-wrapper .settings-btn .fab-icon-svg [fill="rgba(245,130,32,0.18)"] {
                fill: rgba(26, 26, 31, 0.10);
            }

    /* ── BRAND-POP ACCENTS — re-colour specific elements after the black wash ──
   The animated pulse class .sj-anim-pulse-fast marks the "core jewel" in
   every icon. We give each icon's core a different brand colour so the
   trio reads as a coordinated palette rather than three monochrome
   silhouettes. Specificity tip: these rules come AFTER the universal
   [fill="#F58220"] rule above, so they win without needing !important.
   ──────────────────────────────────────────────────────────────────────── */

    /* PRIVACY SHIELD — sky-blue core jewel ("the dot on the I" cyan accent) */
    .floating-settings-wrapper a[rel="privacy-policy"] .fab-icon-svg .sj-anim-pulse-fast {
        fill: #56C4F8;
    }
    /* Privacy top mini-jewel (the polygon at top of the shield) — orange pop */
    .floating-settings-wrapper a[rel="privacy-policy"] .fab-icon-svg polygon {
        fill: #F58220;
    }

    /* SETTINGS GEAR — sunset-orange core hub (warm centre on a black gear) */
    .floating-settings-wrapper button[aria-label="Preferences and settings"] .fab-icon-svg .sj-anim-pulse-fast {
        fill: #F58220;
    }

    /* TERMS DOC — sunset-orange seal jewel + sky-blue corner jewel */
    .floating-settings-wrapper a[rel="terms-of-service"] .fab-icon-svg .sj-anim-pulse-fast {
        fill: #F58220;
    }

    .floating-settings-wrapper a[rel="terms-of-service"] .fab-icon-svg polygon {
        fill: #56C4F8;
    }

    /* ── HOVER STATE ─────────────────────────────────────────────────────── */
    .floating-settings-wrapper .settings-btn:hover,
    .floating-settings-wrapper .settings-btn:focus-visible {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: scale(1.10) !important;
        outline: none;
    }

        .floating-settings-wrapper .settings-btn:hover .fab-icon-svg,
        .floating-settings-wrapper .settings-btn:focus-visible .fab-icon-svg {
            filter: drop-shadow(0 4px 10px rgba(26, 29, 32, 0.28));
        }

    /* Tighter hit-area buffer so neighbouring icons don't share hover zones */
    .floating-settings-wrapper .settings-btn::after {
        inset: -4px !important;
        border-radius: inherit !important;
    }

/* ── Mobile sizing ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .floating-settings-wrapper {
        gap: 10px !important;
    }

        .floating-settings-wrapper .settings-btn {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            width: 60px !important;
            height: 60px !important;
            border-radius: 14px !important;
        }

            .floating-settings-wrapper .settings-btn .fab-icon-svg {
                /* v3 — mobile glyph reduced by 20% (44→35). The 60×60 button
                   shell stays unchanged so the tap target is preserved. */
                width: 35px;
                height: 35px;
            }
}

/* ════════════════════════════════════════════════════════════════════════════
   8. ACCESSIBILITY BUTTON — same strict-icon treatment
   ════════════════════════════════════════════════════════════════════════════
   .a11y-btn lives bottom-left of the hero (separate anchor from the trio).
   We strip its white tile chip and recolour the figure to match the trio's
   palette: charcoal body + an orange head-dot as the brand-pop accent.

   Like the trio rules above, every override has the same !important weight
   the original site.css rule used.
   ════════════════════════════════════════════════════════════════════════════ */
.a11y-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 72px !important;
    height: 65px !important;
    border-radius: 14px !important;
    /* Lift above the trio wrapper's ::before veil. site.css sets both
       .a11y-btn and .floating-settings-wrapper to z-index: 50, and since
       the wrapper appears LATER in the DOM (line 960 vs line 915 in
       _Layout.cshtml), at equal z-index the wrapper paints on top —
       which means the wrapper's ::before veil ends up covering the a11y
       icon. z-index: 51 lifts the a11y above the wrapper cleanly. */
    z-index: 51 !important;
    transition: color 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), filter 0.25s ease !important;
    /* v3 — tab-aware visibility.
       Hidden by default; only painted on Buy / Rent tabs (where the
       hero search section is in scope). This matches the existing
       floating-settings-wrapper pattern: List and Tenant+ tabs are
       full-bleed forms and the floating-rail icons would otherwise
       overlap user-input fields and CTAs.
       The display: none toggles to display: inline-flex via the
       .a11y-btn--visible modifier class — tabs.js controls the toggle. */
    display: none !important;
}

    /* When tabs.js adds .a11y-btn--visible (Buy or Rent tab active),
       the button paints normally. We use inline-flex to honour the
       existing flex-centring used for the inner SVG and tooltip. */
    .a11y-btn.a11y-btn--visible {
        display: inline-flex !important;
    }

    /* Hover: lose the blue-tile background, keep the lift + add a soft halo
   around the figure silhouette rather than around a chip. */
    .a11y-btn:hover,
    .a11y-btn:focus-visible {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: scale(1.10) !important;
        outline: none;
    }

        .a11y-btn:hover .fab-icon-svg,
        .a11y-btn:focus-visible .fab-icon-svg {
            filter: drop-shadow(0 4px 10px rgba(86, 196, 248, 0.42));
        }

    /* The figure strokes stay charcoal (site.css default is #1A1D20 — close
   enough to the wordmark colour we don't need to override). What we DO
   change is the head fill: from the same charcoal to a sunset-orange
   pop so the icon has a brand accent like the trio. */
    .a11y-btn circle.a11y-figure-stroke {
        fill: rgba(245, 130, 32, 0.14) !important; /* warm head halo */
        stroke: #1A1A1F !important;
    }

    .a11y-btn .a11y-figure-stroke {
        stroke: #1A1A1F !important;
    }

    .a11y-btn .a11y-figure-fill {
        fill: #F58220 !important;
    }

    /* On hover, swap the figure-fill from orange to sky-blue so there's a
   small interactive payoff. The figure strokes stay black. */
    .a11y-btn:hover .a11y-figure-fill,
    .a11y-btn:focus-visible .a11y-figure-fill {
        fill: #56C4F8 !important;
    }

    .a11y-btn:hover circle.a11y-figure-stroke,
    .a11y-btn:focus-visible circle.a11y-figure-stroke {
        fill: rgba(86, 196, 248, 0.14) !important;
        stroke: #1A1A1F !important;
    }

    /* Bump the inner SVG to match the trio's enlarged glyph size.
       v3 — reduced by 20% (56→45) alongside the trio for the new compact look. */
    .a11y-btn .fab-icon-svg {
        width: 45px;
        height: 45px;
        transition: filter 0.25s ease;
    }

    .a11y-btn::after {
        inset: -4px !important;
        border-radius: inherit !important;
    }

@media (max-width: 768px) {
    .a11y-btn {
        width: 60px !important;
        height: 60px !important;
        border-radius: 14px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

        .a11y-btn .fab-icon-svg {
            /* v3 — reduced 20% (44→35) matching the trio's mobile size. */
            width: 35px;
            height: 35px;
        }
}

/* ════════════════════════════════════════════════════════════════════════════
   9. BOTTOM ICON ALIGNMENT — drop the trio + a11y to baseline with the
                              Melikhaya (Avuxeni!) robot
   ════════════════════════════════════════════════════════════════════════════
   The Melikhaya robot bubble sits flush at the page floor — visually its
   bottom edge is essentially at bottom: 0–4px. site.css originally placed
   the floating settings + a11y at bottom: 20px and the 56×56 icons looked
   correct against the previous chat-btn. Now that we bumped both clusters
   to 72×72 AND the Melikhaya partial has a fuller bubble, the trio sits
   noticeably higher than the robot's centreline.

   Fix: drop the trio + a11y all the way to a near-floor anchor so their
   72×72 boxes occupy the same vertical band as the robot bubble. Using
   a CSS variable so all bottom-anchored chrome stays in lockstep.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Near-floor anchor — pulls the 72×72 floating clusters flush with the
       Melikhaya robot bubble. Tuned by visual match against the live page;
       if the robot partial ever moves, this is the one variable to retune.

       v4 — dropped from 0px to -14px after the 20% glyph reduction made the
       icons appear to "float" inside the 72px shells.

       v5 — lifted back up by ~7% (-14→-9 desktop, -10→-5 mobile). v4 went
       too far: on desktop the veil's top edge ended up cutting across the
       top of the glyphs, and on mobile the Melikhaya robot to the right
       was sitting visibly above the icon row instead of in-line with it.
       v5 splits the difference: icons sit clearly inside the veil with a
       small breathing margin above, and the mobile icons' vertical centre
       now lines up cleanly with the robot's bubble. The veil height was
       trimmed in lockstep below so it still hugs the icon band rather than
       leaving a tall empty white strip above them. */
    --ikh-floating-bottom: -9px;
    --ikh-floating-bottom-mobile: -5px;
}

.floating-settings-wrapper {
    bottom: var(--ikh-floating-bottom) !important;
}

.a11y-btn {
    bottom: var(--ikh-floating-bottom) !important;
}

@media (max-width: 768px) {
    .floating-settings-wrapper {
        bottom: var(--ikh-floating-bottom-mobile) !important;
    }

    .a11y-btn {
        bottom: var(--ikh-floating-bottom-mobile) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   10. TRIO FOOTER VEIL — atmospheric haze around the settings trio
   ════════════════════════════════════════════════════════════════════════════
   The veil scrim sits behind the Privacy/Settings/Terms trio so the icons
   stay readable against the looping video background.

   IMPORTANT LAYOUT NOTE — why this attaches to .floating-settings-wrapper,
   not .search-section:
     Earlier iterations placed the veil on .search-section::before (the
     hero container in Index.cshtml). That looked right until we realised
     .floating-settings-wrapper is rendered at BODY level in _Layout.cshtml
     — a SIBLING of .search-section, not a descendant. A
     .search-section:has(.floating-settings-wrapper--visible) selector
     could therefore never match, and the veil never appeared.

     Attaching the veil directly to the trio wrapper solves this cleanly:
       • The veil naturally appears when the wrapper is visible
         (.floating-settings-wrapper--visible toggles display: inline-flex,
         which makes the ::before pseudo render).
       • The veil naturally disappears on List / Tenant+ tabs because the
         wrapper itself is display: none — its pseudo-elements never paint.
       • No :has() needed. No JS changes needed. Pure CSS state binding.

   The veil is sized to span the full viewport width via left:-50vw /
   width:100vw (the wrapper itself is centred via translateX(-50%) at
   left:50%, so the wrapper's local origin sits at the page midline —
   we expand outwards from there). The trio's icons paint above the veil
   because they have z-index: 50 (site.css), while the veil sits at z:-1
   relative to the wrapper's local stacking context.
   ════════════════════════════════════════════════════════════════════════════ */

.floating-settings-wrapper::before {
    content: '';
    /* The wrapper is positioned at left: 50% + transform: translateX(-50%),
       so its horizontal midline coincides with the viewport midline. We
       use the classic break-out pattern on the ::before:
         • left: 50%       → align left edge to wrapper midline (= viewport midline)
         • margin-left: -50vw → pull back half a viewport
         • width: 100vw    → fill to the viewport's right edge

       Result: the veil spans the viewport edge-to-edge regardless of how
       narrow the wrapper is or what transform it carries. */
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    /* Drop slightly below the wrapper so the veil floor aligns with the
       page floor (the wrapper itself sits at bottom: var(--ikh-floating-bottom)
       which is -9px after the v5 alignment tweak).

       v4 — height dropped from 76px to 54px so the veil's TOP edge sits
       just above the icon band rather than leaving a tall empty white
       strip above the glyphs.

       v5 — trimmed again (54→48) so the veil's TOP edge now sits clearly
       BELOW the glyph tops. v4's 54px left the veil rim landing right at
       the glyph silhouettes, which read as "the veil is cropping the icons
       from above" in production.

       v6 — LIFTED so the veil top now meets the very tip of the icon
       glyphs. v5's 48px left the veil reading as a low band sitting under
       the icons; the user wanted the icons to sit fully INSIDE the veil
       rather than peek out above it.

       Math (desktop):
         • wrapper height            = 72px
         • wrapper sits at bottom    = -9px  (--ikh-floating-bottom, v5)
         • veil sits at bottom       = -8px  (1px below the wrapper floor)
         • icon top from wrapper-bot ≈ 72 - ((72-45)/2) ≈ 58px
         • desired veil top          ≈ icon top + 4px breathing room
         ⇒ height = 58 + 4 + 8 ≈ 70px

       The gradient stops below were also re-balanced in v6 so the extra
       height ramps in earlier (~22% rather than 35%) — without that, the
       taller veil leaves a long, faint upper smear instead of feeling
       cleanly anchored. Peak opacity stays at 18%: premium = restraint,
       not more white. */
    bottom: -8px;
    height: 70px;
    pointer-events: none;
    /* z-index: -1 within the wrapper's stacking context — paints BEHIND
       the trio's icon children (which are at z-index auto = 0). */
    z-index: -1;
    /* Visible-but-soft middle ground — 28% peak settles between the
       previous "too opaque" (60%) and "too transparent" (14%) extremes.
       Combined with backdrop-blur this clearly anchors the icons on
       every video frame without ever reading as chrome.
       Latest tune: another ~20% drop on top of the previous ~20% drop
       (22% → 18% peak). At this point the white tint is barely
       perceptible; the backdrop-blur is doing essentially all the
       legibility work.

       v6 — stops re-balanced for the taller (70px) veil. The deeper
       band now starts contributing tint earlier (22% rather than 35%)
       so the extra height feels cleanly anchored rather than leaving
       a long, faint upper smear. Peak opacity unchanged. */
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.025) 22%, rgba(255, 255, 255, 0.085) 55%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.18) 100% );
    /* Backdrop-blur softens the video noise behind the veil — this does
       the bulk of the legibility work. Even at 30% white opacity, the
       blur radius removes high-frequency contrast that would make icons
       look noisy. */
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    /* Horizontal mask — feathers asymmetrically so the a11y icon (far
       left) AND the Melikhaya robot (far right) both fall OUTSIDE the
       veil, sitting on the clean page background rather than embedded
       inside the milky band:
         •  0%–10%  : transparent feather (a11y zone)
         • 10%–70%  : full veil (covers the trio)
         • 70%–100% : transparent feather (robot zone) */
    -webkit-mask-image: linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100% );
    mask-image: linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100% );
    /* Soft fade-in when the trio reveals — matches the .35s tab
       transition rhythm. */
    animation: ikh-trio-veil-in 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes ikh-trio-veil-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Make sure the trio icons themselves paint ABOVE the veil. They already
   have z-index: 50 from site.css, but we restate it locally for defence
   against any future rule that might drop their stacking. */
.floating-settings-wrapper > .settings-btn {
    position: relative;
    z-index: 1;
}

/* Mobile: trim band height and slightly bump opacity since the smaller
   icons need a touch more anchoring on narrow viewports. */
@media (max-width: 768px) {
    .floating-settings-wrapper::before {
        /* v4 — mobile veil tightened (60→42) to track the lower icon anchor.
           v5 — trimmed again (42→38) so the veil top sits clearly below
           the icon tops after v5's mobile icon lift.
           v6 — LIFTED (38→56) so the veil top now reaches the very tip of
           the icon glyphs. Same rationale as the desktop rule above,
           scaled to the 60×60 mobile shells with 35px glyphs. */
        height: 56px;
        bottom: -8px;
        /* Mobile peak now 18% (down from 22%, prior 27%). At this point
           the veil is almost purely backdrop-blur with the slightest
           white wash — the a11y icon on the far left and the robot on
           the far right both sit firmly outside the veil via the mask,
           and the trio in the middle stays legible thanks to the blur.
           v6 — stops re-balanced for the taller band (22% / 55% / 85%
           / 100%) so the deeper tint anchors near the floor instead of
           leaving a faint upper smear. */
        background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.025) 22%, rgba(255, 255, 255, 0.085) 55%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.18) 100% );
    }
}

/* Reduced motion — keep the veil but skip the fade-in animation. */
@media (prefers-reduced-motion: reduce) {
    .floating-settings-wrapper::before {
        animation: none;
    }
}

/* Make sure the floating-icon clusters paint ABOVE the veil. They already
   have z-index: 50 from site.css, but we restate it locally for defence. */
.floating-settings-wrapper,
.a11y-btn,
.floating-engagement {
    z-index: 50;
}

    /* ════════════════════════════════════════════════════════════════════════════
   10.5  LEFT-RAIL FLOATING ENGAGEMENT TRIO — GLYPH RESTYLE
   ════════════════════════════════════════════════════════════════════════════
   The left rail has three buttons: AI Location (.loc-btn), Email (.email-btn)
   and YouTube Walkthroughs (.yt-btn). The SVG markup in _Layout.cshtml ships
   with branded line-art colours (green pin, orange envelope, red play screen)
   on a white tile, which read as "three different things" against the page.

   v3 unifies them with the bottom-row trio (privacy / settings / terms) by
   recolouring all strokes and structural fills to the same charcoal #1A1A1F
   used by .floating-settings-wrapper, while preserving each icon's "core
   jewel" — the .sj-anim-pulse-fast element at its centre — in the original
   brand hue. The button's white background and overall size are intentionally
   left untouched (user request: "keeping same size and in the white
   background").

   Implementation: the SVGs hardcode their stroke / fill colours as inline
   attributes. We target them via attribute selectors so no markup needs to
   change. Each icon's brand colour gets its own block because they differ
   (green / orange / red).
   ════════════════════════════════════════════════════════════════════════════ */

    /* ── AI LOCATION (.loc-btn) — green → charcoal, keep green core jewel ───── */
    .floating-engagement .loc-btn .fab-icon-svg [stroke="#22c55e"] {
        stroke: #1A1A1F;
    }

    .floating-engagement .loc-btn .fab-icon-svg [fill="#22c55e"] {
        fill: #1A1A1F;
    }

    .floating-engagement .loc-btn .fab-icon-svg [fill="rgba(34,197,94,0.08)"] {
        fill: rgba(26, 26, 31, 0.05);
    }

    .floating-engagement .loc-btn .fab-icon-svg [fill="rgba(34,197,94,0.12)"] {
        fill: rgba(26, 26, 31, 0.08);
    }

    /* Restore the green hue on the core pulse so the icon reads as
       "location" (green is a near-universal map-pin colour) — same
       brand-pop pattern the trio uses (sky-blue jewel on the shield, etc.) */
    .floating-engagement .loc-btn .fab-icon-svg .sj-anim-pulse-fast {
        fill: #22c55e;
    }

    /* ── EMAIL (.email-btn) — orange → charcoal, keep orange core jewel ────── */
    .floating-engagement .email-btn .fab-icon-svg [stroke="#F58220"] {
        stroke: #1A1A1F;
    }

    .floating-engagement .email-btn .fab-icon-svg [fill="#F58220"] {
        fill: #1A1A1F;
    }

    .floating-engagement .email-btn .fab-icon-svg [fill="rgba(245,130,32,0.07)"] {
        fill: rgba(26, 26, 31, 0.05);
    }

    .floating-engagement .email-btn .fab-icon-svg .sj-anim-pulse-fast {
        fill: #F58220;
    }

    /* ── YOUTUBE (.yt-btn) — red → charcoal, keep red core jewel + triangle ── */
    .floating-engagement .yt-btn .fab-icon-svg [stroke="#ef4444"] {
        stroke: #1A1A1F;
    }

    .floating-engagement .yt-btn .fab-icon-svg [fill="#ef4444"] {
        fill: #1A1A1F;
    }

    .floating-engagement .yt-btn .fab-icon-svg [fill="rgba(239,68,68,0.07)"] {
        fill: rgba(26, 26, 31, 0.05);
    }

    .floating-engagement .yt-btn .fab-icon-svg [fill="rgba(239,68,68,0.12)"] {
        fill: rgba(26, 26, 31, 0.08);
    }

    .floating-engagement .yt-btn .fab-icon-svg .sj-anim-pulse-fast {
        fill: #ef4444;
    }

/* ════════════════════════════════════════════════════════════════════════════
   11. (RESERVED — Melikhaya dome removed)
   ════════════════════════════════════════════════════════════════════════════
   A prior iteration added a circular `.ikh-melikhaya-dome` halo behind the
   Sakikhaya robot. Feedback: it read as a separate UI ring around the
   launcher rather than letting the robot sit naturally outside the veil
   (the way the a11y icon sits outside the veil's leftmost taper).

   Fix shipped in §10's mask-image instead: the veil's right-edge taper now
   ENDS EARLIER (at ~70% of width rather than 92%) so the robot's column at
   the far right falls outside the veil entirely. The robot is no longer
   "part of the rail" — same treatment as the a11y icon on the left, which
   sits outside the leftmost 8% mask taper.

   This block is left as a marker so future maintainers don't reintroduce
   a dome unless explicitly asked.
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   12. HEADER VEIL — frosted-glass replacement for the solid white header
   ════════════════════════════════════════════════════════════════════════════
   The header was a flat #fff bar. The brief: turn it into a translucent
   "premium" veil that matches the page floor's atmospheric language,
   while keeping THREE hard constraints intact:

     1. THE LOGO IS A JPG WITH A SOLID WHITE BACKGROUND
        If the entire header goes translucent, the logo's hard-edged white
        rectangle would suddenly become visible against the page video —
        which looks awful. Solution: keep an opaque white "logo card" zone
        that the logo sits inside, then fade that opaque zone outwards via
        a soft gradient so the transition into the veil is feathered.

     2. RIGHT-SIDE ICONS STAY CLEARLY VISIBLE
        Translation (EN), Tenant+ "+", profile silhouette. These are
        strict-icon glyphs with no chip backing of their own. Against a
        veiled header they'd lose contrast on bright video frames. We
        layer a backdrop-blur (10px) on the header so the area behind the
        icons is calmed even when the white tint is light.

     3. PREMIUM FEEL
        Glass-frost (translucent white + backdrop-blur + subtle saturate)
        rather than just "transparent". Same backdrop-filter recipe used
        on the bottom veil so the top and bottom of the page share a
        coordinated atmospheric language. The existing animated gradient
        bottom border (.header-gradient-border::after) is preserved —
        it provides the only chromatic accent on the otherwise neutral
        veil.

   Cascade strategy:
     • site.css's .header-strip { background: var(--surface-white); }
       has zero !important on the rule, but it ships early in the cascade,
       so we override here with a plain rule (no !important needed).
     • The .brand-section / .brand-logo container gets a contained
       opaque-white "card" pseudo-element behind the logo only —
       sized to wrap the 58px-tall logo with a soft horizontal fade.
   ════════════════════════════════════════════════════════════════════════════ */

.header-strip {
    /* Frosted-glass veil: translucent white + saturate-up + blur.
       The white opacity is intentionally subtle (~70%) so the page below
       can hint through, but high enough that text and icons stay legible
       on every video frame the hero cycles through. */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    /* The header now sits OVER the hero video instead of being a solid
       slab above it. That requires positioning above the video's
       z-index (-2) AND any other layers. site.css already sets z-index 10
       on .header-strip; we keep that. We do need overflow visible so the
       logo-card pseudo and gradient border can paint beyond the strip's
       padding — site.css already had this. */
}

/* ── Brand section "logo card" ────────────────────────────────────────
   The logo is a JPG with a solid white background. Sitting it directly
   on the veil would expose a sharp white rectangle against the page.
   We give .brand-section a contained opaque-white card via a ::before
   pseudo that's larger than the logo (covers all the way to the header
   edges vertically) and fades on its right edge so the transition into
   the veil reads as a soft halo rather than a hard chip. */
.brand-section {
    position: relative;
    /* Keep the brand section ABOVE its own ::before so the logo paints
       in front of its own white halo. */
    isolation: isolate;
}

    .brand-section::before {
        content: '';
        position: absolute;
        /* Anchor to the left edge of the header (negative left pulls past the
       header's padding so the card reaches the actual viewport edge). */
        top: -10px;
        bottom: -10px;
        left: -40px;
        /* Extend ~140px past the logo's right edge so the fade has room to
       feather without overlapping the search bar / tabs row below. */
        right: -140px;
        z-index: -1;
        pointer-events: none;
        /* Solid white at the logo's centre, fading to fully transparent in
       the rightmost portion of the card. This is the "veil starts AFTER
       the logo" effect — the logo sits on solid white, the area to its
       right transitions through soft white to the veiled header. */
        background: linear-gradient( to right, #ffffff 0%, #ffffff 50%, rgba(255, 255, 255, 0.95) 70%, rgba(255, 255, 255, 0.50) 88%, rgba(255, 255, 255, 0) 100% );
    }

/* ── Brand logo polish ────────────────────────────────────────────────
   Keep the logo above its own halo card. The img itself stays
   untouched — we don't want to filter or recolour the brand mark. */
.brand-logo {
    position: relative;
    z-index: 1;
}

/* ── Right-side icons against the veil ────────────────────────────────
   The translation, Tenant+ "+", and profile icons live in .header-actions.
   They're strict-icon glyphs with no chip backing. Against the veil they
   stay legible because:
     • The backdrop-blur on the header softens the video noise behind them
       (the single biggest legibility win — same logic as the bottom veil).
     • The veil's white tint (~72% opacity) provides the base luminosity.

   We intentionally do NOT add drop-shadow filters to the icons here —
   they already carry their own hover-state drop-shadows (.ikh-tenantplus-btn,
   .ikh-auth-profile-btn) and layering a second filter would either
   accumulate or fight with the hover transitions. The header's veil +
   backdrop-blur is sufficient on its own. */

/* ── Mobile sizing ────────────────────────────────────────────────────
   On mobile (≤768px) the header is narrower so the logo card needs to
   feather sooner — otherwise the white "spill" from behind the logo
   would reach the burger button. */
@media (max-width: 768px) {
    .brand-section::before {
        left: -20px;
        right: -70px;
        top: -8px;
        bottom: -8px;
        background: linear-gradient( to right, #ffffff 0%, #ffffff 55%, rgba(255, 255, 255, 0.92) 75%, rgba(255, 255, 255, 0.45) 90%, rgba(255, 255, 255, 0) 100% );
    }

    .header-strip {
        /* Slightly stronger tint on mobile for legibility — burger button
           strokes and any future header content need that bit more
           contrast against bright video frames. */
        background: rgba(255, 255, 255, 0.78);
    }
}

/* ── Reduced motion / fallback for browsers without backdrop-filter ───
   If backdrop-filter isn't supported, fall back to a slightly more
   opaque tint so legibility is preserved without the blur effect. */
@supports not (backdrop-filter: blur(1px)) {
    .header-strip {
        background: rgba(255, 255, 255, 0.92);
    }
}