/* The header on every page (owner, 2 Oct 2026: Explore mock 3a/3b, "the same header design globally"; docs/explore-redesign.md
 * E1). Chevereto's own header, its items and their behaviour are kept; only their places change, plus three new pieces
 * built by header.js from Chevereto's own links: the restyled Explore menu (desktop), the account sheet's layout
 * (phones) and the Explore sheet (phones). Loaded in <head> by head.php, so nothing moves after the page shows.
 * The header overlay itself is generated and pinned: these rules move into it at the next re-publication
 * (runtime-change-runbook.md, "Pending for the next re-publication").
 *
 * Desktop: logo, Explore ▾ (admins) on the left; bell, Upload, avatar + @name on the right.
 * Phones:  logo on the left; bell, Upload, avatar on the right. Explore lives in the avatar's menu. No header Search. */

#top-bar.top-bar--main > .content-width { display: flex; align-items: center; }
#top-bar.top-bar--main .top-bar-logo { position: static !important; left: auto !important; right: auto !important; width: auto !important; height: auto;
    margin: 13px 22px 0 0 !important; padding: 0 !important; transform: none !important; flex: none; order: 0; text-align: left; line-height: 0;
    align-self: flex-start; } /* 13px down on every page (owner, 3 Oct 2026): pages whose bar has a bottom border centred it 0.5px higher */
#top-bar.top-bar--main .top-bar-logo > a { display: inline-flex; align-items: center; top: auto; transform: none; } /* it centred itself in the old full-width box */
/* A larger logo (owner, 3 Oct 2026): 24px tall in the 50px bar (Peafowl's 20px), on every screen. */
#top-bar.top-bar--main .top-bar-logo img { height: 24px; width: auto; }
/* Its place is kept before the picture arrives (owner, 3 Oct 2026: Explore slid left as the logo loaded): the logo is
   145 x 24 at this height. */
#top-bar.top-bar--main .top-bar-logo > a { min-width: 145px; min-height: 24px; }
#top-bar.top-bar--main .top-bar-left { float: none !important; order: 1; display: flex; align-items: center; flex: none; }
#top-bar.top-bar--main .top-bar-right { float: none !important; order: 2; display: flex; align-items: center; margin-left: auto; flex: none; }
#top-bar.top-bar--main .top-bar-right > .top-bar-notifications { order: 1; }
#top-bar.top-bar--main .top-bar-right > [data-nav="upload"] { order: 2; }
#top-bar.top-bar--main .top-bar-right > #top-bar-user { order: 3; }
#top-bar.top-bar--main .top-bar-right > li:not(.top-bar-notifications):not([data-nav="upload"]):not(#top-bar-user) { order: 4; }

/* Explore ▾: the same white as the other header icons; green only while open or focused. */
#top-bar #top-bar-explore > .top-btn-text, #top-bar #top-bar-explore > .top-btn-text .icon { color: #fff !important; }
#top-bar #top-bar-explore > .top-btn-text { display: inline-flex; align-items: center; gap: 2px; border-radius: 8px; }
#top-bar #top-bar-explore > .top-btn-text .btn-text { font-weight: 600; }
/* No "current page" line under Explore (owner, 3 Oct 2026): it behaves as the avatar does. Chevereto marks the current
   item with a 3px green bottom border; transparent keeps the bar's height. */
#top-bar #top-bar-explore.current { border-bottom-color: transparent !important; }
#top-bar #top-bar-explore > .top-btn-text::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 9px; border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .7; }
#top-bar #top-bar-explore.opened > .top-btn-text, #top-bar #top-bar-explore.pop-btn-active > .top-btn-text { background: rgba(255, 255, 255, .08); }
#top-bar #top-bar-explore > .top-btn-text:focus-visible { outline: 2px solid #0ee59b; outline-offset: 1px; }

/* The Explore menu (desktop): Discovery and Content as two columns of icon + label, then the top 10 tags and
 * "See all tags ›" (mock 3a). header.js writes the content from Chevereto's own items; the box is Chevereto's. */
html:not(.phone) #top-bar-explore .pop-box.ld-explore-box { width: 492px; padding: 0; margin-top: 8px !important; border-radius: 14px; background: #10131a;
    border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
html:not(.phone) #top-bar-explore .pop-box.ld-explore-box.arrow-box::before,
html:not(.phone) #top-bar-explore .pop-box.ld-explore-box.arrow-box::after { display: none !important; }
#top-bar-explore .ld-explore-box > .pop-box-inner { padding: 14px 16px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ld-xmenu-label { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px 6px; font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .14em; text-transform: uppercase; color: #8b929a; }
.ld-xmenu-label a { font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; color: #0ee59b !important; }
.ld-xmenu-grid, #top-bar-explore .pop-box-menu ul.ld-xmenu-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin: 0; padding: 0; list-style: none; }
.ld-xmenu-grid > li, #top-bar-explore .pop-box-menu ul.ld-xmenu-grid > li { display: block; float: none !important; width: auto !important; margin: 0; padding: 0; }
.ld-xmenu-grid a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: 8px; color: #e6e8ea !important; font-size: 13.5px;
    text-decoration: none; }
.ld-xmenu-grid a:hover, .ld-xmenu-grid a:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.ld-xmenu-grid a.is-current { background: rgba(255, 255, 255, .07); }
.ld-xmenu-grid .ld-ico { width: 17px; height: 17px; flex: none; opacity: .85; }
.ld-xmenu-sep { height: 1px; margin: 12px 0; background: rgba(255, 255, 255, .08); }
.ld-xmenu-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.ld-xmenu-tags a { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; padding: 0 11px; border-radius: 999px; background: #1a1e26; color: #d6dade !important;
    font-size: 12px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-xmenu-tags a:hover, .ld-xmenu-tags a:focus-visible { background: #232833; outline: none; }

/* Phones: logo left; bell, Upload, avatar right; Explore moves into the avatar's menu. */
html.phone #top-bar.top-bar--main .top-bar-logo { margin-right: 0 !important; }
html.phone #top-bar.top-bar--main .top-bar-left { margin-left: auto; }
html.phone #top-bar.top-bar--main .top-bar-right { margin-left: 0; }
html.phone #top-bar #top-bar-explore { display: none !important; }
/* The bell sits in the row now (it was pinned to the left while the logo was centred). */
html.phone body[data-ld-tier] #top-bar .top-bar-notifications.phone-hide { position: static; left: auto; top: auto; }
html.phone #top-bar .top-bar-right > li > .top-btn-text, html.phone #top-bar .top-bar-right > li > a.top-btn-text { min-width: 40px; }
/* No Search in the header (owner, 3 Oct 2026): Chevereto's site search is for admins only, and Explore has its own search
   in every tab, so the header's button and field go, on every screen. */
#top-bar [data-action="top-bar-search"], #top-bar [data-action="top-bar-search-input"] { display: none !important; }

/* The account menu on phones (Part 2, #2): Chevereto's own sheet, with the member on top (avatar on its tier ring,
 * the name, "<Tier> · Administrator") and the items in the brief's order. header.js adds both; desktop keeps
 * Chevereto's list as it is. */
#top-bar-user .ld-acc-head, #top-bar-user .ld-acc-phone { display: none; }
html.phone #top-bar-user .pop-box { display: flex !important; flex-direction: column; }
html.phone #top-bar-user .pop-box:not([style*="display: block"]):not([style*="display:block"]) { display: none !important; }
html.phone #top-bar-user .pop-box > .ld-acc-head { display: flex; order: -1; align-items: center; gap: 12px; margin: 4px 16px 0; padding: 12px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08); }
html.phone #top-bar-user .pop-box > .pop-box-header { order: 0; font-size: 0 !important; }
html.phone #top-bar-user .pop-box > .pop-box-header > .icon:not(.icon--close) { display: none; }
html.phone #top-bar-user .pop-box > .pop-box-header::before { content: attr(data-ld-title); font-size: 16px; font-weight: 600; }
html.phone #top-bar-user .pop-box > .pop-box-header .icon--close { font-size: 18px; }
html.phone #top-bar-user .pop-box > .pop-box-inner { order: 1; }
html.phone #top-bar-user .pop-box-menu > :not(.ld-acc-phone) { display: none !important; }
html.phone #top-bar-user .pop-box-menu > .ld-acc-phone { display: block; }
.ld-acc-head .ld-acc-avatar { position: relative; flex: none; width: 44px; height: 44px; }
.ld-acc-head .ld-avatar { --ld-avatar: 44px; } /* the copied avatar's size, which places its emblem on the ring (gallery.css) */
.ld-acc-head .ld-acc-avatar img, .ld-acc-head .ld-acc-avatar .ld-acc-initial, .ld-acc-head .ld-acc-avatar .user-image { display: flex; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important; margin: 0 !important; border-radius: 50%; object-fit: cover; }
a.ld-acc-head { text-decoration: none; color: inherit; }
.ld-acc-head .ld-acc-name { display: flex; flex-direction: column; min-width: 0; }
.ld-acc-head .ld-acc-name strong { overflow: hidden; color: #f2f4f6; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ld-acc-head .ld-acc-name span { color: #9aa1a9; font-size: 12.5px; }
.ld-acc-phone ul li > a { display: flex !important; align-items: center; gap: 12px; }
.ld-acc-phone ul li > a .ld-ico { width: 19px; height: 19px; flex: none; opacity: .9; }
.ld-acc-phone ul li.is-current > a { background: rgba(255, 255, 255, .07); border-radius: 10px; }

/* The Explore sheet (phones, Part 2 #3): the desktop menu as a sheet, opened from the account menu. Its own sheet, in
 * the shared sheet's look; it scrolls inside itself, the page behind never does. */
.ld-xsheet-mask { position: fixed; inset: 0; z-index: 1600; background: rgba(0, 0, 0, .55); }
.ld-xsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1601; display: flex; flex-direction: column; max-height: 88vh; border-radius: 18px 18px 0 0;
    background: #0e1117; border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 -16px 40px rgba(0, 0, 0, .5); color: #e6e8ea;
    padding-bottom: env(safe-area-inset-bottom); }
.ld-xsheet-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 2px; }
.ld-xsheet-head h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.ld-xsheet-head button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
    background: none; color: #e6e8ea; cursor: pointer; }
.ld-xsheet-head button:focus-visible { outline: 2px solid #0ee59b; }
.ld-xsheet-head .ld-ico { width: 20px; height: 20px; }
.ld-xsheet-body { overflow: auto; overscroll-behavior: contain; padding: 4px 14px 16px; }
.ld-xsheet .ld-xmenu-grid a { min-height: 44px; font-size: 15px; }
.ld-xsheet .ld-xmenu-tags a { min-height: 36px; padding: 0 14px; font-size: 13px; }
html.ld-xsheet-open, html.ld-xsheet-open body { overflow: hidden !important; }

/* The header's hover green on /signup too (owner, 3 Oct 2026: it was blue). Chevereto gives /login, /signup and /account its
   light palette whatever the site's, and the header's hover reads that palette's accent; registration.css already sets
   the header's own colours there. */
body:has(#registration) #top-bar.top-bar--main { --colorAccent: #00e59b; }

/* The header's avatar inside its tier wrapper (badges.js, or head.php's early copy of it before the first paint; owner,
   3 Oct 2026): placed as Chevereto places the bare avatar (float left, centred in the 50px bar), the same whichever made
   it, so nothing moves when the scripts run. A hidden avatar (the empty picture beside the default one) hides its wrapper. */
#top-bar-user .top-btn-text > .ld-avatar { float: left !important; margin: -13px 0 0 !important; top: 50% !important; right: auto !important;
    bottom: auto !important; left: auto !important; position: relative !important; display: block !important; vertical-align: baseline; --ld-avatar: 26px; }
#top-bar-user .top-btn-text > .ld-avatar:has(> .user-image.hidden) { display: none !important; }
#top-bar-user .top-btn-text > .ld-avatar > .user-image { float: none !important; margin: 0 !important; position: relative !important; inset: auto !important; }

/* The desktop account menu's Membership gem (header.js membershipIcon): sized and placed like the menu's Font Awesome icons. */
#top-bar-user .pop-box-menu .btn-icon.ld-menu-gem { display: inline-flex; align-items: center; justify-content: center; }
#top-bar-user .pop-box-menu .btn-icon.ld-menu-gem .ld-ico { width: 1.05em; height: 1.05em; }