/* site-head.css — THE ONE MENU (S390, 2026-09-19).
 *
 * Gilad, 2026-09-19: "we need a ballance and a better menu the navigate
 * between the pages and gates", then "Account doesn't work it's just a text
 * with nothing to press on, we need a real account button, options to log in
 * and etc", then "this site needs a serious upgrade for what its going to
 * bring to the world, it should be clear and easy to understand and well
 * designed and structured".
 *
 * Before this, nine pages each carried their own copy of a four-link bar
 * (phones kept one link), the room and the Imaginarium had no menu at all,
 * and "Account" was a drawer label whose body held a link to a form further
 * down the page. Now: one header, written by tools/build-nav.mjs into every
 * page between markers and held there by its --check, and one panel — the
 * menu and the account in the same sheet, so there is one place to look.
 *
 * NOT a <nav>: site.css still carries a bare nav{position:fixed} rule for the
 * pages that have not moved yet, and it would pin any <nav> inside the panel
 * to the top of the screen (paid for once already, S388v). The landmarks are
 * role="navigation" on plain elements instead — the same thing to a screen
 * reader. Colours are the house tokens from site.css, with fallbacks so the
 * header survives on a page that does not load site.css. */

.sh{position:fixed;inset-block-start:0;inset-inline:0;z-index:90;height:64px;
  display:flex;align-items:center;gap:18px;padding:0 clamp(16px,4vw,40px);
  background:rgba(4,26,75,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair,rgba(237,239,246,.11));
  font-family:var(--ui,'Space Grotesk',system-ui,sans-serif);color:var(--ink,#EEF0F7)}
.sh a{color:inherit;text-decoration:none}
.sh-mark{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-family:var(--serif,'Bodoni Moda',Georgia,serif);font-size:22px;letter-spacing:.01em;white-space:nowrap}
.sh-mark .spark{width:7px;height:7px;border-radius:50%;background:var(--filament,#E9B872);
  box-shadow:0 0 10px var(--filament,#E9B872)}
.sh-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);margin-inline:auto}
.sh-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:13px;letter-spacing:.03em;color:var(--ink2,#A7ADC4);transition:color .2s}
.sh-links a:hover,.sh-links a[aria-current="page"]{color:var(--ink,#EEF0F7)}
.sh-links a[aria-current="page"]::after{content:'';position:absolute;inset-inline:0;bottom:8px;height:1px;
  background:var(--filament,#E9B872)}
.sh-tools{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.sh-links + .sh-tools{margin-inline-start:0}
.sh button{font:inherit;color:inherit;cursor:pointer}
.sh-acct,.sh-menu,.sh #langBtn{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px;
  border-radius:999px;border:1px solid var(--hair2,rgba(237,239,246,.22));background:transparent;
  font-size:12.5px;letter-spacing:.04em;transition:border-color .2s,background .2s}
/* .sh .sh-acct, not .sh-acct: `.sh button{color:inherit}` above outranks a
   lone class, and the one gold control on the bar came out white */
.sh .sh-acct{color:var(--filament,#E9B872);border-color:rgba(233,184,114,.45)}
.sh .sh-acct:hover{background:rgba(233,184,114,.12);border-color:var(--filament,#E9B872)}
.sh-menu:hover,.sh #langBtn:hover{border-color:var(--ink2,#A7ADC4)}
.sh #langBtn{min-width:44px;justify-content:center;padding:0 10px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px}
.sh-av{display:none;width:24px;height:24px;border-radius:50%;background:var(--filament,#E9B872);color:#041A4B;
  font-size:12px;font-weight:600;align-items:center;justify-content:center;text-transform:uppercase}
.sh-acct.in .sh-av{display:inline-flex}
.sh-acct.in{padding-inline-start:6px}
.sh-burger{position:relative;width:16px;height:10px;border-block:1.5px solid currentColor}
.sh-burger::after{content:'';position:absolute;inset-inline:0;top:3px;border-top:1.5px solid currentColor}
.sh button:focus-visible,.sh a:focus-visible,.shs button:focus-visible,.shs a:focus-visible,.shs input:focus-visible{
  outline:2px solid var(--focus,#8FA0FF);outline-offset:2px}

/* the page's own content starts below the bar */
body.has-sh{padding-top:0}
.sh-spacer{height:64px}

/* a desk with room keeps all five; a narrow desk keeps three; a phone keeps
   none and says Menu — every door is one press away, and the thumb target is
   44px wherever a finger is the pointer */
@media(max-width:1180px){.sh-links a.sh-wide{display:none}}
/* the tools keep to the far edge once the links fold away — the sibling
   selector is what `.sh-links + .sh-tools` above set to 0, so it is the one
   that has to say auto here, or the bar bunches up against the wordmark */
@media(max-width:820px),(max-height:500px){.sh-links{display:none}.sh-links + .sh-tools{margin-inline-start:auto}}
@media(max-width:420px){.sh-menu .sh-ml,.sh-acct.in .sh-al{display:none}.sh-menu{padding:0 12px}.sh{gap:10px}}
@media(pointer:coarse){.sh-acct,.sh-menu,.sh #langBtn{min-height:44px}}

/* ---------- the sheet: the menu and the account, one dialog ---------- */
.shs{position:fixed;inset:0;z-index:300;display:flex;justify-content:flex-end;
  background:rgba(2,10,30,.62);font-family:var(--ui,'Space Grotesk',system-ui,sans-serif);color:var(--ink,#EEF0F7)}
.shs[hidden]{display:none}
.shs a{color:inherit;text-decoration:none}
.shs-panel{width:min(460px,100vw);height:100%;overflow-y:auto;overscroll-behavior:contain;
  background:var(--void2,#071F50);border-inline-start:1px solid var(--hair,rgba(237,239,246,.11));
  padding:0 clamp(18px,4vw,30px) 40px;display:flex;flex-direction:column;gap:26px}
.shs-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
  height:64px;background:var(--void2,#071F50);border-bottom:1px solid var(--hair,rgba(237,239,246,.11));margin:0 calc(-1 * clamp(18px,4vw,30px));padding:0 clamp(18px,4vw,30px)}
.shs-top .sh-mark{font-size:20px}
.shs-x{min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--hair2,rgba(237,239,246,.22));
  background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.shs-k{margin:0 0 8px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--filament,#E9B872)}
.shs-acct{border:1px solid rgba(233,184,114,.35);border-radius:14px;padding:18px;
  background:linear-gradient(155deg,rgba(10,43,102,.7),rgba(4,26,75,.7))}
.shs-acct p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink2,#A7ADC4)}
.shs-acct form{display:flex;gap:8px;flex-wrap:wrap}
.shs-acct input{flex:1 1 180px;min-height:46px;padding:0 14px;border-radius:10px;
  border:1px solid var(--hair2,rgba(237,239,246,.22));background:rgba(4,26,75,.6);color:var(--ink,#EEF0F7);
  font:15px var(--ui,'Space Grotesk',system-ui,sans-serif)}
.shs-acct input[data-code]{font-family:var(--mono,'JetBrains Mono',monospace);letter-spacing:.3em;font-size:18px}
.shs-go{min-height:46px;padding:0 18px;border-radius:10px;border:0;background:var(--filament,#E9B872);color:#041A4B;
  font:600 13px var(--ui,'Space Grotesk',system-ui,sans-serif);letter-spacing:.04em;cursor:pointer}
.shs-go:disabled{opacity:.6;cursor:default}
.shs-link{background:none;border:0;padding:10px 0 0;color:var(--klein-lift,#8FA0FF);font:13px var(--ui,'Space Grotesk',system-ui,sans-serif);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.shs-msg{margin:10px 0 0 !important;color:var(--filament,#E9B872) !important}
.shs-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.shs-who .sh-av{display:inline-flex;width:40px;height:40px;font-size:17px}
.shs-who b{display:block;font-weight:500;color:var(--ink,#EEF0F7);font-size:15px;word-break:break-all}
.shs-who span{font-size:12.5px;color:var(--ink2,#A7ADC4)}
.shs-rows{display:flex;flex-direction:column;border-top:1px solid var(--hair,rgba(237,239,246,.11))}
.shs-rows a,.shs-rows button{display:flex;align-items:center;justify-content:space-between;min-height:48px;
  border:0;border-bottom:1px solid var(--hair,rgba(237,239,246,.11));background:none;color:inherit;
  font:14px var(--ui,'Space Grotesk',system-ui,sans-serif);text-align:start;padding:0;cursor:pointer}
.shs-rows em{font-style:normal;font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;color:var(--filament,#E9B872)}
.shs-grp h3{margin:0 0 6px;font-family:var(--mono,'JetBrains Mono',monospace);font-weight:400;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink3,#858AA3)}
.shs-grp a{display:block;padding:12px 0;border-bottom:1px solid var(--hair,rgba(237,239,246,.11))}
.shs-grp a b{display:block;font-weight:400;font-family:var(--serif,'Bodoni Moda',Georgia,serif);font-size:21px;line-height:1.25}
.shs-grp a span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink2,#A7ADC4)}
.shs-grp a:hover b,.shs-grp a[aria-current="page"] b{color:var(--filament,#E9B872)}
.shs-grp.small a{display:inline-block;border:0;padding:8px 18px 8px 0;font-size:14px;color:var(--ink2,#A7ADC4)}
.shs-grp.small a:hover{color:var(--ink,#EEF0F7)}
body.shs-open{overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .shs:not([hidden]) .shs-panel{animation:shsIn .22s ease-out}
  @keyframes shsIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
  [dir="rtl"] .shs:not([hidden]) .shs-panel{animation-name:shsInR}
  @keyframes shsInR{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
}
@media(max-width:520px){.shs-panel{width:100vw;border:0}}

/* ---------- THE COMPACT FORM, for the two app rooms (S393) ----------
 * The engine room (/os) and the Imaginarium keep their own chrome — the room's
 * five-step spine and the Imaginarium's File/Edit/View bar are tools, and a
 * 64px site bar on top of either would take the 3D's height and collide with
 * a layout that has paid for every pixel. So there they carry only the two
 * things every page must have — the account and the way to every other page —
 * as a compact pair (.sh-mini) that opens the same sheet. Same buttons, same
 * sheet, same sign-in; only the frame differs. */
.sh-mini{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui,'Space Grotesk',system-ui,sans-serif)}
.sh-mini button{font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;
  border-radius:999px;border:1px solid rgba(191,208,255,.28);background:rgba(7,31,80,.72);color:#EEF0F7;
  font-size:12px;letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sh-mini .sh-acct{color:#E9B872;border-color:rgba(233,184,114,.45)}
.sh-mini .sh-acct.in{padding-inline-start:5px}
.sh-mini .sh-acct.in .sh-av{display:inline-flex}
.sh-mini button:hover{border-color:#E9B872}
.sh-mini button:focus-visible{outline:2px solid var(--focus,#8FA0FF);outline-offset:2px}
.sh-mini.bar button{min-height:26px;padding:0 10px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.sh-mini.bar .sh-av{width:18px;height:18px;font-size:10px}
/* a phone keeps the Menu alone — the sheet opens on the account first */
@media(max-width:820px){.sh-mini:not(.bar) .sh-acct{display:none}.sh-mini:not(.bar) .sh-ml{display:none}.sh-mini:not(.bar) .sh-menu{width:44px;height:44px;padding:0;justify-content:center}}
/* a phone keeps the Menu alone in the bar too — signed out, the account
   button has no initial to show and would be an empty pill; the sheet opens
   on the account first */
@media(max-width:640px){.sh-mini.bar .sh-acct,.sh-mini.bar .sh-ml{display:none}}
@media(pointer:coarse){.sh-mini:not(.bar) button{min-height:44px}.sh-mini.bar button{min-height:30px}}

/* ---------- S394 · sign in with a provider ---------- */
.shs-oauth{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.shs-oauth[hidden]{display:none}
.shs-prov{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;padding:0 16px;
  border-radius:10px;border:1px solid rgba(255,255,255,.9);background:#fff;color:#1f1f1f;cursor:pointer;
  font:500 14px var(--ui,'Space Grotesk',system-ui,sans-serif);letter-spacing:.01em}
.shs-prov svg{width:18px;height:18px;flex:none}
.shs-prov[data-p="apple"]{background:#000;color:#fff;border-color:#000}
.shs-prov:disabled{opacity:.6;cursor:default}
.shs-prov:hover:not(:disabled){filter:brightness(.96)}
.shs-or{display:flex;align-items:center;gap:10px;margin:0 0 10px !important;font-size:12px !important;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3,#858AA3) !important}
.shs-or::before,.shs-or::after{content:'';flex:1;border-top:1px solid var(--hair,rgba(237,239,246,.11))}
.shs-or[hidden]{display:none}
.shs-fine{margin:12px 0 0 !important;font-size:12px !important;line-height:1.55;color:var(--ink3,#858AA3) !important}
.shs-fine a{color:var(--ink2,#A7ADC4);text-decoration:underline;text-underline-offset:2px}