/* JSOOR unified app shell — one top bar shared by every surface. Tokens from brand/jsoor-tech.css. Theme classes (.acc-gold/.dark) live on + page root. Pattern A: one fixed 60px bar with a center slot. A page NEVER draws its own top bar; it offsets by --jshell-h and fills .jshell-center through JsoorShell.claimCenter(). */ :root{--jshell-h:60px} .jshell{position:fixed;inset-block-start:0;inset-inline:0;height:var(--jshell-h);z-index:500;display:flex;align-items:center;gap:14px;padding-inline:18px;background:var(--card);border-block-end:1px solid var(--border);font-family:var(--font-sans);color:var(--ink-2);box-sizing:border-box} .jshell *{box-sizing:border-box} .jshell button{font-family:inherit;cursor:pointer} .jshell button,.jshell a.jshell-app{transition:transform var(--dur-press) var(--ease-out)} .jshell button:active,.jshell a.jshell-app:active{transform:scale(0.96)} .jshell-brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;flex:none;height:44px} .jshell-brand:hover{color:var(--ink)} .jshell-brand .hmark{flex:none} .jshell-brand .wm{font-weight:600;font-size:1.02rem;letter-spacing:.13em;line-height:1} .jshell-brand .sub{font-size:8px;letter-spacing:.22em;color:var(--accent-fg);text-transform:uppercase;font-weight:600;margin-top:3px} .jshell[dir="rtl"] .jshell-brand .wm{letter-spacing:0;font-weight:700} .jshell-apps{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--sunken);border:1px solid var(--border);flex:none;margin-inline-start:4px} .jshell-app{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:var(--r-pill);color:var(--muted);font-size:var(--t-meta);font-weight:500;text-decoration:none;white-space:nowrap;border:0;background:transparent;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)} @media (hover:hover) and (pointer:fine){.jshell-app:hover{color:var(--ink)}} .jshell-app svg{flex:none} .jshell-app.cur{background:var(--card);color:var(--ink);box-shadow:var(--sh-1);font-weight:600} .jshell-app.cur svg{color:var(--accent-fg)} .jshell-app.soon{opacity:.45;cursor:default} .jshell-app.soon:hover{color:var(--muted)} .jshell-center{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden} .jshell-slot{display:contents} .jshell-right{display:inline-flex;align-items:center;gap:8px;flex:none} .jshell-actions{display:contents} .jshell-ibtn{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);color:var(--ink-2);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)} @media (hover:hover) and (pointer:fine){.jshell-ibtn:hover{border-color:var(--accent);color:var(--ink)}} .jshell-ibtn .ping{position:absolute;top:8px;inset-inline-end:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)} .jshell-theme{display:inline-flex;align-items:center;gap:5px;height:40px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-pill);padding:0 6px} .jshell-theme .tdot{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:transparent;border:1.5px solid transparent;padding:0} .jshell-theme .tdot span{width:11px;height:11px;border-radius:50%;display:block} .jshell-theme .tdot[aria-pressed="true"]{border-color:var(--ink)} .jshell-theme .tsep{width:1px;height:16px;background:var(--border-strong)} .jshell-theme .tmode{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:transparent;border:none;color:var(--muted)} .jshell-theme .tmode:hover{color:var(--ink)} .jshell-theme .tmode[aria-pressed="true"]{color:var(--accent-fg)} .jshell-user{display:inline-flex;align-items:center;gap:9px;padding-inline-start:4px;height:44px} .jshell-user .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--primary-fg);font-weight:600;font-size:var(--t-meta);flex:none} .jshell-user .who{line-height:1.2;white-space:nowrap} .jshell-user .who b{display:block;font-size:var(--t-meta);color:var(--ink);font-weight:600} .jshell-user .who span{font-size:var(--t-micro);color:var(--muted)} .jshell :focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)} @media (max-width:1500px){.jshell-app:not(.cur) span{display:none}.jshell-app:not(.cur){padding:0 10px}} @media (max-width:1240px){.jshell-app span{display:none}.jshell-app{padding:0 10px}} @media (max-width:1000px){.jshell-user .who,.jshell-brand .sub{display:none}} @media (prefers-reduced-motion:reduce){.jshell *{transition-property:color,background-color,border-color,box-shadow}} @media print{.jshell{display:none}}