/* =============================================================================
   SE Universal Header & Footer Styles
   Phase 1 UI Redesign — March 2026
   ============================================================================= */

/* Import Cinzel font */
@import url('/fonts/fonts.css');

/* =============================================================================
   UNIVERSAL HEADER
   ============================================================================= */

.se-universal-header {
    background: #000000;
    height: 60px;
    max-height: 60px;
    padding: 10px 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #1A1A1A;
    font-family: 'Cinzel', 'Georgia', serif;
}

.se-header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
}

/* SE Logo */
.se-logo {
    display: flex;
    align-items: center;
    margin-right: 10px;
    text-decoration: none;
}

.se-logo svg {
    width: 36px;
    height: 36px;
}

/* Navigation Links */
.se-nav-link {
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.se-nav-link:hover {
    opacity: 0.8;
}

.se-nav-talkse {
    color: #C9A84C;
}

/* .se-nav-safety lived here — the shared header's Safety link. Gone: Safety is
   footer-only, site-wide. Both of its rules (this one and the mobile display:none
   below) were exclusively tied to that one element. The .se-nav-link class it also
   carried is SHARED with .se-nav-talkse and is untouched. */

/* Shared Dropdown Base */
.se-get-everything-dropdown,
.se-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    background: #111111;
    border: 1px solid #222222;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 1001;
}

.se-get-everything-dropdown.active,
.se-user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.se-dropdown-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #222222;
}

.se-dropdown-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.se-dropdown-section h4 {
    margin: 0 0 6px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.se-dropdown-section p {
    margin: 0;
    font-size: 13px;
    color: #CCCCCC;
    line-height: 1.5;
}

.se-dropdown-top {
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(207, 170, 60, 0.25);
}

.se-dropdown-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 4px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.se-dropdown-row:hover {
    background: rgba(207, 170, 60, 0.08);
    padding-left: 8px;
}

.se-dropdown-row:last-of-type {
    border-bottom: none;
}

.se-dropdown-platform {
    min-width: 110px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.se-dropdown-purpose {
    color: #CCCCCC;
    font-size: 12px;
    line-height: 1.4;
    flex: 1;
}

.se-dropdown-bottom {
    background: #0A0A0A;
    margin: 12px -20px -20px -20px;
    padding: 14px 20px;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #C9A84C;
    text-align: center;
}

/* Login Button */
.se-login-btn {
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #333333;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
    margin-left: auto;
    display: inline-block;
}

/* Any sign-in affordance disappears once a member is signed in — the pill is
   their account entry. Generic (not .se-login-btn-scoped) so the LP's own
   #login-btn obeys it too; SEAvatar toggles the class on every surface. */
.logged-in-hide {
    display: none !important;
}

.se-login-btn:hover {
    background: #1A1A1A;
    border-color: #444444;
}

/* Get Everything Button */
.se-get-everything-container {
    position: relative;
}

.se-get-everything-btn {
    background: #C9A84C;
    color: #000000;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
}

.se-get-everything-btn:hover {
    background: #D4B65C;
    transform: scale(1.02);
}

/* Get Everything Dropdown - specific positioning */
.se-get-everything-dropdown {
    right: 0;
    padding: 0;
    min-width: 300px;
}

.se-get-everything-container:hover .se-get-everything-dropdown,
.se-get-everything-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.se-pricing-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #222222;
}

.se-pricing-header h3 {
    margin: 0 0 8px 0;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
}

.se-pricing-amount {
    color: #C9A84C;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.se-pricing-features {
    list-style: none;
    margin: 0;
    padding: 16px 20px;
}

.se-pricing-features li {
    padding: 8px 0;
    font-size: 13px;
    color: #CCCCCC;
    border-bottom: 1px solid #1A1A1A;
}

.se-pricing-features li:last-child {
    border-bottom: none;
}

.se-pricing-footer {
    padding: 16px 20px;
    text-align: center;
    background: #0A0A0A;
    border-radius: 0 0 8px 8px;
}

.se-pricing-footer p {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #666666;
}

.se-signup-cta {
    display: inline-block;
    background: #C9A84C;
    color: #000000;
    padding: 10px 24px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.2s;
}

.se-signup-cta:hover {
    background: #D4B65C;
}

/* Account entry — ALWAYS visible now. It used to be hidden until logged in; the
   pill is the dashboard entry on every page, and signed-out it is the "SE"
   monogram that sends you to login and back. .logged-in is kept because other
   chrome still keys off it, but it no longer gates visibility. */
.se-user-menu {
    position: relative;
    display: inline-flex !important;
    align-items: center;
}

.se-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #C9A84C;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.se-user-avatar:hover {
    transform: scale(1.05);
}

.se-avatar-initial {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
    font-family: 'Cinzel', 'Georgia', serif;
}

/* =============================================================================
   SEAuthPill — the signed-out auth cluster: [ Sign In ] [ Join Now ]
   =============================================================================
   The LinkedIn model: two adjacent standalone buttons, not one split pill.
   Replaces the LP's "Log In" link + "Get Verified" button, the shared header's
   .se-login-btn + .se-signup-cta, and the ARM header's .uah-login-pill. One
   component, three surfaces, rendered by SEAvatar (header-footer.js).

   Join Now is the primary (filled); Sign In is the quiet outline beside it.

   Colour is expressed only through --se-* tokens, in three roles:
     --se-authpill-ink    Join Now's fill + both borders
     --se-authpill-ghost  Sign In's text (the quiet one)
     --se-authpill-on     text ON the fill — must be the DARK token
   The tokens below are the LP/shared-header defaults; .uah-strip re-points them
   to that ARM's accent so the cluster matches whatever header it lands in.
   ========================================================================== */
:root {
    --se-gold:        #C9A84C;   /* SE gold — dark-mode default ink            */
    --se-ink-on-gold: #0A0A0F;   /* fallback dark ink for the filled button    */

    /* theme-light.css re-points --se-gold-ink to a readable dark gold (#8A6B22),
       and --se-bg to a light surface — so Join Now flips from black-on-gold
       (dark) to white-on-dark-gold (light) with no light-mode rule of its own. */
    --se-authpill-ink:   var(--se-gold-ink, var(--se-gold));
    --se-authpill-ghost: var(--se-authpill-ink);
    --se-authpill-on:    var(--se-bg, var(--se-ink-on-gold));

    --se-authpill-gap:   8px;    /* the one gap between Sign In and Join Now   */
}

/* Inside an ARM strip the cluster takes that arm's identity. bg/fg trade places
   between the JS varsDark/varsLight maps, so the dark token — the one Join Now
   needs behind its text — is --se-arm-bg in dark and --se-arm-fg in light. */
.uah-strip {
    --se-authpill-ink:   var(--se-arm-accent);
    --se-authpill-ghost: var(--se-arm-accent);
    --se-authpill-on:    var(--se-arm-bg);
}

.se-auth-cluster {
    display: inline-flex;
    align-items: center;
    gap: var(--se-authpill-gap);
    vertical-align: middle;
}

/* SPECIFICITY, deliberately: every rule below is scoped under .se-auth-cluster.
   The LP's chrome carries `.top-bar a, .top-bar button` (styles.css:154) at (0,1,1),
   which sets background:transparent, color:var(--text-gray) and border:none. A bare
   `.se-auth-join` is only (0,1,0), so on the LP it LOST — Join Now rendered with no
   gold fill and the same ink as Sign In, i.e. the primary/secondary split silently
   collapsed on the one surface that matters most. Scoping takes these to (0,2,0)
   (and (0,3,0) for :hover, which must clear `.top-bar a:hover` at (0,2,1)), so the
   component wins on its own terms — no !important, and no LP-specific fork.
   The ARM and shared headers are not inside .top-bar and were never affected. */
.se-auth-cluster .se-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    height: auto;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Sign In — the quiet one. Outline only, so Join Now is unmistakably primary. */
.se-auth-cluster .se-auth-signin {
    background: transparent;
    border-color: color-mix(in srgb, var(--se-authpill-ink) 55%, transparent);
    color: var(--se-authpill-ghost);
}

.se-auth-cluster .se-auth-signin:hover {
    background: color-mix(in srgb, var(--se-authpill-ink) 12%, transparent);
    border-color: var(--se-authpill-ink);
    color: var(--se-authpill-ghost);
}

/* Join Now — the primary. Filled SE gold, text is the DARK token. */
.se-auth-cluster .se-auth-join {
    background: var(--se-authpill-ink);
    border-color: var(--se-authpill-ink);
    color: var(--se-authpill-on);
}

.se-auth-cluster .se-auth-join:hover {
    background: color-mix(in srgb, var(--se-authpill-ink) 86%, var(--se-authpill-on));
    color: var(--se-authpill-on);
}

.se-auth-cluster .se-auth-btn:focus-visible {
    outline: 2px solid var(--se-authpill-ink);
    outline-offset: 2px;
}

.uah-authpill-slot {
    display: inline-flex;
    align-items: center;
}

/* User dropdown - specific positioning (base styles in shared dropdown) */
.se-user-dropdown {
    right: 0;
    min-width: 180px;
    overflow: hidden;
}

.se-user-dropdown a,
.se-user-dropdown button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    color: #CCCCCC;
    text-decoration: none;
    font-size: 14px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Cinzel', 'Georgia', serif;
    transition: background 0.2s;
}

.se-user-dropdown a:hover,
.se-user-dropdown button:hover {
    background: #1A1A1A;
    color: #FFFFFF;
}

.se-user-dropdown hr {
    margin: 0;
    border: none;
    border-top: 1px solid #222222;
}

/* TTS & Mic Buttons */
.se-tts-btn,
.se-mic-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #C9A84C;
    color: #C9A84C;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.se-tts-btn:hover,
.se-mic-btn:hover {
    background: #C9A84C;
    color: #000000;
}

.se-tts-btn svg,
.se-mic-btn svg {
    width: 20px;
    height: 20px;
}

/* MVV Substrate buttons — Slice 1 (Message / Video / Voice) */
.se-mvv-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.se-mvv-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--platform-accent, #C9A84C);
    color: var(--platform-accent, #C9A84C);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.se-mvv-btn:hover {
    background: var(--platform-accent, #C9A84C);
    color: #000000;
}

.se-mvv-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #000000, 0 0 0 4px var(--platform-accent, #C9A84C);
}

.se-mvv-btn svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .se-mvv-group {
        gap: 4px;
    }
    .se-mvv-btn {
        width: 32px;
        height: 32px;
    }
    .se-mvv-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* =============================================================================
   UNIVERSAL FOOTER
   ============================================================================= */

.se-universal-footer {
    background: #000000;
    border-top: 1px solid #1A1A1A;
    padding: 40px 20px;
    text-align: center;
    font-family: 'Cinzel', 'Georgia', serif;
}

.se-footer-links {
    margin-bottom: 20px;
}

.se-footer-links a {
    color: #C9A84C;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.2s;
}

.se-footer-links a:hover {
    text-decoration: underline;
}

/* "Cookie Settings" is a <button>, not an <a> — it has no destination, it reopens the
   consent banner in place. It must still read as one of the row's links, so it inherits
   the same colour, size and hover as .se-footer-links a, with the button chrome stripped. */
.se-footer-links .se-footer-cookie-btn {
    color: #C9A84C;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 14px;
    line-height: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.se-footer-links .se-footer-cookie-btn:hover {
    text-decoration: underline;
}

.se-footer-links .se-footer-cookie-btn:focus-visible {
    outline: 2px solid #C9A84C;
    outline-offset: 2px;
}

.se-footer-links .separator {
    color: #333333;
    margin: 0 10px;
}

/* .se-footer-versions lived here — the "Terms v5.0 · Privacy v1.0 · AUP v1.0" stamp,
   removed from the footer by founder ruling. Its rules were exclusively tied to that
   one element. NOTE: js/legal-versions.js still owns SE_LEGAL_VERSIONS and still
   stamps signup.html's consent label — that is a DIFFERENT consumer and is untouched;
   only the footer's [data-se-legal-versions] slot is gone, so SEStampLegalVersions()
   simply finds no footer slot to fill and returns. */

.se-footer-tagline {
    color: #C9A84C;
    font-size: 16px;
    letter-spacing: 2px;
    margin-top: 20px;
}

.se-footer-philosophy {
    color: #FFFFFF;
    font-size: 12px;
    letter-spacing: 3px;
    margin-top: 8px;
}

.se-footer-copyright {
    color: #666666;
    font-size: 12px;
    margin-top: 20px;
}

.se-footer-promise {
    color: #333333;
    font-size: 11px;
    font-style: italic;
    margin-top: 4px;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
    .se-universal-header {
        padding: 10px 15px;
    }

    .se-header-nav {
        gap: 8px;
    }

    .se-login-btn,
    .se-get-everything-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .se-nav-link {
        padding: 6px 8px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .se-universal-header {
        padding: 8px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* (the mobile .se-nav-safety { display:none } rule lived here — the shared header's
       Safety link was already hidden on mobile. Removed with the element itself.) */

    .se-get-everything-dropdown {
        position: fixed;
        top: 60px;
        left: 10px;
        right: 10px;
        max-width: none;
        min-width: auto;
    }

    .se-user-dropdown {
        position: fixed;
        top: 60px;
        right: 10px;
        left: auto;
    }
}


@media (max-width: 480px) {
    .se-logo svg {
        width: 30px;
        height: 30px;
    }

    .se-logo {
        margin-right: 8px;
    }

    .se-get-everything-btn {
        font-size: 11px;
        padding: 6px 10px;
    }

    .se-tts-btn,
    .se-mic-btn {
        width: 32px;
        height: 32px;
    }

    .se-tts-btn svg,
    .se-mic-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* The ABOUT SE FOOTER DROPDOWN (S105) lived here — the "About SE" button and the
   six-arm directory it opened upward. Both are gone (footer row is now exactly
   Safety | Privacy | Terms | Acceptable Use | Contact | Cookie Settings), and every
   .about-se-footer-* class was used ONLY by that component, so the whole family goes
   with it — including its mobile media query. Its six taglines are banked verbatim in
   the card report for future below-the-fold copy. */

/* ============================================================================
   S140 — UNIFIED ARM HEADER (Phase 1)
   One topbar across all ARMs, per-ARM identity. Ported from the canonical
   professional/header.css chrome (locked Apr 15, 2026), namespaced .uah-* so
   it CANNOT collide with the shared .se-* header or the legacy .ph-* P header.
   Every colour flows from CSS custom properties set on the .uah-strip root by
   includes/header-footer.js (zero per-ARM CSS duplication). Fallbacks default
   to the Professional (DRAVID) palette.
   These rules are purely additive — no existing .se-* rule above is touched —
   so the 174 pages on the shared header render pixel-identical (they never
   match a .uah-* selector). Only ARM-path pages get a .uah-strip injected.
   ============================================================================ */

.uah-strip {
  /* Per-ARM identity — JS overrides these inline on the root element.
     Defaults below are the Professional palette (safe fallback). */
  --se-arm-accent: #CFAA3C;   /* icons, text, borders                       */
  --se-arm-muted:  #8AA0C4;   /* secondary text, search placeholder/icon    */
  --se-arm-bg:     #0B1F42;   /* strip + panel background                   */
  --se-arm-fg:     #E5E9F0;   /* panel/body text                            */
  --se-arm-elev:   #15315E;   /* input + raised surfaces                    */

  background: var(--se-arm-bg);
  color: var(--se-arm-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--se-arm-accent) 15%, transparent);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.uah-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  min-height: 48px;
}

.uah-left, .uah-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---- SE STAR / HOME ---- */
.uah-star {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 2px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.uah-star:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }

/* ---- BACK ARROW ---- */
.uah-back {
  background: transparent;
  border: 0;
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  color: var(--se-arm-accent);
}
.uah-back:hover { background: color-mix(in srgb, var(--se-arm-accent) 8%, transparent); }
.uah-back:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }

/* ---- NAVIGATOR PILL ---- */
.uah-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  color: var(--se-arm-accent);
  border: 1px solid var(--se-arm-accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.uah-nav-pill:hover { background: color-mix(in srgb, var(--se-arm-accent) 8%, transparent); }
.uah-nav-pill:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }
.uah-nav-pill-label { font-size: 12px; line-height: 1; }
[data-uah-nav-trigger][aria-expanded="true"] { background: color-mix(in srgb, var(--se-arm-accent) 12%, transparent); }

/* ---- VERB BUTTONS (Message / Video / Voice) + Safety + Privacy ---- */
.uah-verb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--se-arm-accent);
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  border: 0;
  font: inherit;
}
.uah-verb:hover { background: color-mix(in srgb, var(--se-arm-accent) 8%, transparent); }
.uah-verb:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }
.uah-verb-label { font-size: 10px; line-height: 1; letter-spacing: 0.02em; }

/* ---- LOG IN PILL (rendered logged-out; auth gate is out of Phase-1 scope) ---- */
.uah-login-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--se-arm-accent);
  background: transparent;
  color: var(--se-arm-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease;
}
.uah-login-pill:hover { background: color-mix(in srgb, var(--se-arm-accent) 12%, transparent); }
.uah-login-pill:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }

/* ---- LIGHT / DARK TOGGLE ----------------------------------------------------
   Sits in .uah-right, between the Log In pill and the speaker. Same pill
   geometry and accent outline as .uah-login-pill so it reads as one family.
   Both glyphs are in the DOM; exactly one shows, chosen by the theme on <html>.
   Dark theme offers the sun (click = go light); light theme offers the moon. */
.uah-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 4px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--se-arm-accent);
  background: transparent;
  color: var(--se-arm-accent);
  cursor: pointer;
  transition: background 120ms ease;
}
.uah-theme-toggle:hover { background: color-mix(in srgb, var(--se-arm-accent) 12%, transparent); }
.uah-theme-toggle:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }
.uah-theme-ico { display: none; line-height: 0; }
.uah-theme-sun { display: inline-flex; }                     /* default = dark */
html[data-theme="light"] .uah-theme-sun  { display: none; }
html[data-theme="light"] .uah-theme-moon { display: inline-flex; }

/* ---- LIGHT / DARK TOGGLE — root LP variant ---------------------------------
   The LP's chrome is gold-on-black and its buttons are .se-tts-btn / .se-mic-btn,
   so the LP's pill borrows THAT treatment rather than the ARM accent (which does
   not exist on the LP). Geometry matches the speaker/mic circles beside it.
   Light-mode gold-ink recolouring for this button lives in css/theme-light.css
   alongside the other .se-* chrome. */
.se-theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #C9A84C;
  color: #C9A84C;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 120ms ease;
}
.se-theme-btn:hover { background: #C9A84C; color: #000000; }
.se-theme-btn:focus-visible { outline: 2px solid #C9A84C; outline-offset: 2px; }
.se-theme-btn svg { width: 20px; height: 20px; }
.se-theme-ico { display: none; line-height: 0; }
.se-theme-sun { display: inline-flex; }                      /* default = dark */
html[data-theme="light"] .se-theme-sun  { display: none; }
html[data-theme="light"] .se-theme-moon { display: inline-flex; }

@media (max-width: 768px) {
  .se-theme-btn { width: 32px; height: 32px; }
  .se-theme-btn svg { width: 16px; height: 16px; }
}

/* ---- TTS SPEAKER (mic insertion point lives in the JS markup; see s124) ---- */
.uah-voice-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--se-arm-accent);
  border-radius: 50%;
  color: var(--se-arm-accent);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.uah-voice-toggle:hover,
.uah-voice-toggle.is-active { background: var(--se-arm-accent); color: var(--se-arm-bg); }
.uah-voice-toggle:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }

/* ---- SEARCH ---- */
.uah-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 200px;
  background: var(--se-arm-elev);
  border: 1px solid color-mix(in srgb, var(--se-arm-accent) 15%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
}
.uah-search input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--se-arm-fg);
  font-size: 12px;
  min-width: 0;
}
.uah-search input[type="search"]::placeholder { color: var(--se-arm-muted); }
.uah-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---- BELL ---- */
.uah-bell {
  position: relative;
  background: transparent;
  border: 0;
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  color: var(--se-arm-accent);
}
.uah-bell:hover { background: color-mix(in srgb, var(--se-arm-accent) 8%, transparent); }
.uah-bell:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }
.uah-bell-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E24B4A;
  border: 2px solid var(--se-arm-bg);
}
.uah-bell-dot[hidden] { display: none !important; }

/* ---- ACTING / PERSONA SELECTOR (logged-out: hidden, exactly as P renders it) ---- */
.uah-acting { position: relative; }
.uah-acting[hidden] { display: none !important; }
.uah-acting-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--se-arm-accent) 35%, transparent);
  color: var(--se-arm-accent); font-size: 0.85rem;
  border-radius: 6px; cursor: pointer; max-width: 180px;
}

/* ---- AVATAR ----
   The ARM header no longer owns an avatar of its own; it mounts the shared
   SEAvatar pill (.se-user-avatar.se-dashboard-entry, styled below). This slot
   is just the flex box it sits in. */
.uah-avatar-slot {
  display: inline-flex;
  align-items: center;
}

/* ---- HAMBURGER ---- */
.uah-hamburger {
  background: transparent;
  border: 0;
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  color: var(--se-arm-accent);
}
.uah-hamburger:hover { background: color-mix(in srgb, var(--se-arm-accent) 8%, transparent); }
.uah-hamburger:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }

/* ---- MOBILE DRAWER ---- */
.uah-drawer {
  background: var(--se-arm-bg);
  border-top: 1px solid color-mix(in srgb, var(--se-arm-accent) 15%, transparent);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uah-drawer[hidden] { display: none !important; }
.uah-drawer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--se-arm-elev);
  border-radius: 8px;
  padding: 8px 12px;
}
.uah-drawer-search input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--se-arm-fg);
  font-size: 14px;
}
.uah-drawer-search input[type="search"]::placeholder { color: var(--se-arm-muted); }
.uah-drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  color: var(--se-arm-accent);
  text-decoration: none;
  background: transparent;
  border: 0;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
}
.uah-drawer-item:hover { background: color-mix(in srgb, var(--se-arm-accent) 8%, transparent); }

/* ---- RESPONSIVE VISIBILITY ---- */
.uah-desktop-only { display: inline-flex; }
.uah-mobile-only { display: none; }
@media (max-width: 768px) {
  .uah-desktop-only { display: none !important; }
  .uah-mobile-only { display: inline-flex; }
  .uah-drawer.uah-mobile-only { display: flex; }
  .uah-drawer.uah-mobile-only[hidden] { display: none !important; }
  .uah-inner { gap: 8px; padding: 6px 12px; }
  .uah-left, .uah-right { gap: 8px; }
  .uah-verb .uah-verb-label { display: none; }
  .uah-nav-pill { padding: 4px 10px; }
}

/* ---- NAVIGATOR (DRAVID-class) COMMAND PALETTE ---- */
.uah-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.uah-nav-panel {
  position: absolute;
  top: 56px;
  left: 16px;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100vh - 96px));
  background: var(--se-arm-bg);
  border: 1px solid color-mix(in srgb, var(--se-arm-accent) 30%, transparent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 1000;
  color: var(--se-arm-fg);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}
.uah-nav-panel[hidden] { display: none !important; }
.uah-nav-search-wrap { display: block; padding: 14px 18px 10px; }
.uah-nav-search {
  width: 100%;
  height: 40px;
  background: var(--se-arm-elev);
  border: 1px solid color-mix(in srgb, var(--se-arm-accent) 15%, transparent);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--se-arm-fg);
  font-size: 16px;
  outline: 0;
  box-sizing: border-box;
}
.uah-nav-search::placeholder { color: var(--se-arm-muted); }
.uah-nav-search:focus-visible {
  border-color: var(--se-arm-accent);
  outline: 2px solid color-mix(in srgb, var(--se-arm-accent) 40%, transparent);
  outline-offset: 0;
}
.uah-nav-body { flex: 1; overflow-y: auto; padding: 0 18px; }
.uah-nav-section { margin-bottom: 8px; }
.uah-nav-section[hidden] { display: none !important; }
.uah-nav-section-title {
  margin: 0; padding: 8px 0 4px;
  font-size: 11px; font-weight: 600; color: var(--se-arm-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.uah-nav-list { list-style: none; margin: 0; padding: 0; }
.uah-nav-hint {
  margin: 0; padding: 16px 0; font-size: 13px;
  color: var(--se-arm-muted); font-style: italic;
}
.uah-nav-row {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 8px;
  border-radius: 6px; cursor: pointer;
  background: transparent; border: 0; border-left: 2px solid transparent;
  width: 100%; text-align: left; font: inherit;
  color: var(--se-arm-fg); box-sizing: border-box;
}
.uah-nav-row:hover,
.uah-nav-row.uah-nav-row--selected {
  background: color-mix(in srgb, var(--se-arm-accent) 15%, transparent);
  border-left-color: var(--se-arm-accent);
}
.uah-nav-row:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: -2px; }
.uah-nav-row-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--se-arm-muted); flex-shrink: 0;
}
.uah-nav-row-primary {
  flex: 1; min-width: 0; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uah-nav-row-secondary {
  flex-shrink: 0; font-size: 11px; color: var(--se-arm-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.uah-nav-footer {
  background: var(--se-arm-bg);
  border-top: 1px solid color-mix(in srgb, var(--se-arm-accent) 12%, transparent);
  padding: 8px 18px;
}
.uah-nav-footer-text { font-size: 11px; font-style: italic; color: var(--se-arm-muted); }
.uah-nav-close,
.uah-popover-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: 0; color: var(--se-arm-muted);
  font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; border-radius: 4px;
}
.uah-nav-close:hover,
.uah-popover-close:hover { color: var(--se-arm-accent); background: color-mix(in srgb, var(--se-arm-accent) 8%, transparent); }
.uah-nav-close:focus-visible,
.uah-popover-close:focus-visible { outline: 2px solid var(--se-arm-accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .uah-nav-panel { top: 56px; left: 16px; right: 16px; width: auto; max-width: 420px; }
}

/* ---- PRIVACY POPOVER ---- */
.uah-popover {
  position: absolute;
  top: 56px;
  right: 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--se-arm-bg);
  border: 1px solid color-mix(in srgb, var(--se-arm-accent) 30%, transparent);
  border-radius: 10px;
  padding: 16px 18px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 1000;
  color: var(--se-arm-fg);
  font-size: 13px;
  line-height: 1.5;
}
.uah-popover[hidden] { display: none !important; }
.uah-popover-arrow {
  position: absolute; top: -7px; right: 24px; width: 12px; height: 12px;
  background: var(--se-arm-bg);
  border-top: 1px solid color-mix(in srgb, var(--se-arm-accent) 30%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--se-arm-accent) 30%, transparent);
  transform: rotate(45deg);
}
.uah-popover-title {
  margin: 0 0 10px; padding: 0; font-size: 14px; font-weight: 600;
  color: var(--se-arm-accent); letter-spacing: 0.02em;
}
.uah-popover-list { margin: 0 0 12px; padding: 0; list-style: none; }
.uah-popover-list li { position: relative; padding: 4px 0 4px 16px; color: var(--se-arm-fg); }
.uah-popover-list li::before {
  content: "·"; position: absolute; left: 4px; top: 4px;
  color: var(--se-arm-accent); font-weight: 700;
}
.uah-popover-link {
  display: inline-block; margin-top: 4px; color: var(--se-arm-accent);
  font-size: 13px; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--se-arm-accent) 40%, transparent);
  padding-bottom: 1px;
}
.uah-popover-link:hover { border-bottom-color: var(--se-arm-accent); }
[data-uah-privacy-trigger][aria-expanded="true"] {
  background: color-mix(in srgb, var(--se-arm-accent) 12%, transparent); border-radius: 6px;
}
@media (max-width: 768px) {
  .uah-popover { top: 56px; right: 8px; left: 8px; width: auto; max-width: none; }
  .uah-popover-arrow { right: 24px; }
}
/* ============================== end S140 ================================= */

/* ----------------------------------------------------------------------------
   S140 addendum — mic "coming soon" voice toast.
   Self-contained mirror of the voice-ui.css .voice-toast look so the root (and
   every shared-header page) shows a consistent placeholder until s124's
   on-device STT lands. Namespaced .se-voice-toast — no collision with the
   page-level .voice-toast from voice-ui.css.
   ---------------------------------------------------------------------------- */
.se-voice-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10001;
  background: #1D1F23;
  color: #E7E9EA;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid #2F3336;
  border-left: 3px solid #1DA1F2;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.se-voice-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* S140 addendum-2 — root LP .top-bar control cluster (M/V/V + speaker + mic).
   Lays the group out horizontally; the inner .se-mvv-group / .se-tts-btn /
   .se-mic-btn keep their existing chrome styling. */
.se-chrome-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}

/* S140 addendum-3 — the root .top-bar rule `.top-bar a, .top-bar button`
   (height:32px; padding:0 1rem; border:none; specificity 0,1,1) outranks the
   chrome button styling (0,1,0). With global box-sizing:border-box the 1rem
   padding collapses each button's content box, shrinking the flex-item SVG to
   ~0 width so nothing paints. Re-assert button geometry + icon size, scoped to
   the inserted cluster, with winning specificity, and pin the icons with an
   explicit size + flex-shrink:0 so the .top-bar context can never collapse them.
   Scoped to .se-chrome-controls only — no locked .top-bar rule is touched. */
.se-chrome-controls .se-mvv-btn,
.se-chrome-controls .se-tts-btn,
.se-chrome-controls .se-mic-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--platform-accent, #C9A84C);
  border-radius: 50%;
  color: var(--platform-accent, #C9A84C);
  flex-shrink: 0;
}
.se-chrome-controls svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* S140 addendum-3 — root LP .top-bar "bar mode". The page's own .top-bar rule
   paints a fade-to-transparent gradient (no bottom edge), so the items look like
   they float over black. wireStaticChrome() tags the root .top-bar with
   .se-bar-mode; here we replace that gradient with a solid full-width strip and
   add a subtle gold bottom border — the unified-chrome bar treatment in the star
   page's own black/gold brand (NOT navy). Geometry (position:fixed, height 60px,
   full width, blur) stays inherited from the page's .top-bar rule. Specificity
   (0,2,0) beats the base .top-bar (0,1,0); scoped to .se-bar-mode so nothing
   leaks to other pages that may carry a .top-bar. */
.top-bar.se-bar-mode {
  background: rgba(10, 10, 15, 0.96);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

/* =============================================================================
   SEDASH Slice A — Dashboard entry (the upgraded user avatar)
   The shared-header avatar is now THE entry point to the Member Dashboard: a
   slightly larger/wider gold pill that opens /dashboard.html. Shows the member's
   photo (if se_user_info carries one), else their name, else their initial.
   Specificity (0,2,0) via .se-user-avatar.se-dashboard-entry beats the base
   .se-user-avatar circle (0,1,0), regardless of source order.
   ============================================================================= */
.se-user-avatar.se-dashboard-entry {
  width: auto;
  min-width: 44px;
  height: 40px;
  border-radius: 20px;
  background: #C9A84C;
  padding: 0 14px 0 4px;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.se-user-avatar.se-dashboard-entry:hover,
.se-user-avatar.se-dashboard-entry:focus-visible {
  transform: scale(1.04);
  background: #D4B65C;
  outline: none;
}
.se-user-avatar.se-dashboard-entry:focus-visible {
  box-shadow: 0 0 0 2px #0B1F42, 0 0 0 4px #C9A84C;
}

/* Circular badge holding the photo or initial */
.se-dashboard-entry .se-avatar-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0B1F42;      /* SEP blue behind a transparent initial */
}
.se-dashboard-entry .se-avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* [hidden] must win over display:block so the empty <img> never shows a broken icon. */
.se-dashboard-entry .se-avatar-photo[hidden] { display: none; }
.se-dashboard-entry .se-avatar-name[hidden] { display: none; }
.se-dashboard-entry .se-avatar-initial {
  color: #C9A84C;           /* gold initial on blue badge */
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  font-family: 'Cinzel', 'Georgia', serif;
}
/* Member name label — hidden on narrow screens so the header never overflows */
.se-dashboard-entry .se-avatar-name {
  color: #0B1F42;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Raleway', sans-serif;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .se-dashboard-entry .se-avatar-name { display: none; }
  .se-user-avatar.se-dashboard-entry { padding: 0; min-width: 40px; width: 40px; border-radius: 50%; }
}