/* 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:10px;min-height:44px;direction:ltr;
  font-family:var(--brand,'Bodoni Moda',Georgia,serif);font-size:22px;letter-spacing:.01em;white-space:nowrap;
  font-variation-settings:'opsz' 9}
/* S440 — THE SMALL LOCKUPS AT BODONI'S OPTICAL SIZE 9, his pick at the design sitting
   (5 Oct, from 24 / 14 / 9 drawn side by side at 22 px): the heaviest cut, so the A's thin
   legs hold at header size. Header and menu here, the footer's .logo in site.css. The home's
   big lockup keeps his 24 of 22 Sep. The name is --brand, never --serif: see type.css. */
/* S408 — the logo: the rainbow infinity beside the name, fixed left-to-right on
   every page (a logo does not mirror in Hebrew or Arabic) */
.sh-mark .sh-inf{display:block;width:36px;height:26px;flex-shrink:0}
@media (max-width:640px){.sh-mark .sh-inf{width:32px;height:23px}}
/* S466 — the header's COMBINED LOGO (his "Ultra" of 6 Oct, after counsel): the expansion beneath the name, in the gold
   small capitals the footer, the gate and the link card draw it in; hidden on a phone, where it would not read */
.sh-w{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;gap:5px}
.sh-x{font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace);font-size:8.5px;line-height:1;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold,#E9B872);font-variation-settings:normal}
@media (max-width:767px){.sh-x{display:none}}
.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 ---------- */
/* ---------- S411 · TWO BUTTONS, TWO PANELS ----------
 * His verdict on the single panel they used to share, 2026-09-23: "its too big,
 * not designed enough, unclear, not serving its purpose, too long ... both
 * buttons does the same."
 *
 * So each one is its own thing now. THE ACCOUNT is a small panel that hangs
 * under its own button: who you are, what is yours, and the way out — a menu,
 * not a room, so it is not modal and a press anywhere else puts it away. THE
 * MAP is the sheet: where a visitor can go, one line each, no paragraphs; the
 * page descriptions that made it long live on the pages themselves.
 *
 * On a phone the account panel becomes a card at the bottom of the screen,
 * where a thumb is, rather than a 320px box pinned under a 44px button. */

/* the account */
.sha{position:fixed;inset-block-start:64px;inset-inline-end:clamp(10px,3vw,34px);z-index:320;
  font-family:var(--ui,'Space Grotesk',system-ui,sans-serif);color:var(--ink,#EEF0F7)}
.sha[hidden]{display:none}
/* S621 — WHAT A SCRIPT HIDES STAYS HIDDEN (his look at 11:40, 12 Oct, a never-approved address: Admin, Open the web app and
   "Downloads 0" on his menu). site-nav.js keeps those rows `hidden` until the server says yes, but `.sha-rows a{display:flex}`
   below outranks the browser's own [hidden]{display:none}, so every signed-in account saw all of them; `.sha-panel form
   {display:flex}` did the same to the email form entry.js hides once a code is sent. One rule closes the class for the
   header, the account panel and the menu sheet; tools/check-menu.mjs renders it. */
.sh [hidden],.sh-mini [hidden],.sha [hidden],.shs [hidden]{display:none!important}
.sha a{color:inherit;text-decoration:none}
.sha-panel{width:min(320px,calc(100vw - 20px));max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--hair2,rgba(237,239,246,.22));border-radius:16px;padding:16px;
  background:var(--void2,#071F50);box-shadow:0 18px 50px rgba(2,10,30,.55)}
.sha-k{margin:0 0 12px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--filament,#E9B872)}
.sha-panel form{display:flex;gap:8px}
.sha-panel input{flex:1 1 auto;min-width:0;min-height:44px;padding:0 12px;border-radius:10px;
  border:1px solid var(--hair2,rgba(237,239,246,.22));background:rgba(4,26,75,.6);color:var(--ink,#EEF0F7);
  font:14px var(--ui,'Space Grotesk',system-ui,sans-serif)}
.sha-panel input[data-code]{font-family:var(--mono,'JetBrains Mono',monospace);letter-spacing:.26em}
.sha-fine{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink2,#A7ADC4)}
.sha-who{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:4px;
  border-bottom:1px solid var(--hair,rgba(237,239,246,.11))}
.sha-who .sh-av{display:inline-flex;width:34px;height:34px;font-size:15px;flex:none}
.sha-who b{display:block;font-weight:500;font-size:13.5px;word-break:break-all;line-height:1.3}
.sha-who span{font-size:11.5px;color:var(--ink2,#A7ADC4)}
.sha-rows{display:flex;flex-direction:column}
.sha-rows a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;
  font-size:14px;border-bottom:1px solid var(--hair,rgba(237,239,246,.11))}
.sha-rows a:hover{color:var(--filament,#E9B872)}
.sha-rows em{font-style:normal;font-family:var(--mono,'JetBrains Mono',monospace);font-size:12.5px;color:var(--filament,#E9B872)}
.sha-out{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;margin-top:6px;
  border:0;background:none;color:var(--ink2,#A7ADC4);font:13px var(--ui,'Space Grotesk',system-ui,sans-serif);
  text-align:start;padding:0;cursor:pointer}
.sha-out:hover{color:var(--ink,#EEF0F7)}

/* the map */
.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(380px,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,26px) 28px;display:flex;flex-direction:column}
.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,26px));padding:0 clamp(18px,4vw,26px)}
.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-nav{display:block;position:static;inset:auto;z-index:auto;width:auto;max-width:none;background:none;
  border:0;padding:0;margin:0}   /* site.css pins every <nav> to the top of the page; this one is a list inside a panel */
.shs-k{margin:22px 0 2px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink3,#858AA3)}
.shs-links{display:flex;flex-direction:column}
.shs-links a{padding:11px 0;border-bottom:1px solid var(--hair,rgba(237,239,246,.11));
  font-family:var(--serif,'Bodoni Moda',Georgia,serif);font-size:22px;line-height:1.2}
.shs-links a:hover,.shs-links a[aria-current="page"]{color:var(--filament,#E9B872)}
.shs-links.small{flex-direction:row;flex-wrap:wrap;gap:0 18px;margin-top:4px}
.shs-links.small a{border:0;padding:7px 0;font-family:var(--ui,'Space Grotesk',system-ui,sans-serif);
  font-size:13.5px;color:var(--ink2,#A7ADC4)}
.shs-links.small a:hover{color:var(--ink,#EEF0F7)}
.shs-foot{margin:22px 0 0;font-size:13px;color:var(--ink2,#A7ADC4)}
.shs-foot a{color:var(--filament,#E9B872)}
/* the sign-in bits the account panel borrows */
.shs-go{min-height:44px;padding:0 16px;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;flex:none}
.shs-go:disabled{opacity:.6;cursor:default}
.shs-link{background:none;border:0;padding:8px 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;font-size:13px}
.shs-fine{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink3,#858AA3)}
.shs-fine a{color:var(--ink2,#A7ADC4);text-decoration:underline;text-underline-offset:2px}
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}}
  .sha:not([hidden]) .sha-panel{animation:shaIn .16s ease-out}
  @keyframes shaIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
}
@media(max-width:520px){
  .shs-panel{width:100vw;border:0}
  .sha{inset-block-start:auto;inset-block-end:10px;inset-inline:10px}
  .sha-panel{width:100%;max-height:78dvh}
}

/* ---------- 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}

/* S422b — SKIP TO CONTENT: the first thing a keyboard reaches on every page, out of sight until then */
.skip{position:absolute;inset-inline-start:12px;top:-64px;z-index:1000;padding:11px 16px;border-radius:10px;background:var(--gold,#E9B872);color:#041A4B;font:600 14px/1 var(--sans,'Space Grotesk',system-ui,sans-serif);text-decoration:none}
.skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px}