/* Shared Studio header (shared/header.js). Loaded by both pages after tokens.css and components.css.
   Tokens only. Desktop: brand, four sections, page content, search, account.
   Phone (under 760 px): brand mark, an Apps button that names the current section, search, account;
   /next adds the bottom tab bar. */

.sh { height: 48px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px; min-width: 0;
  background: var(--hull-1); border-bottom: 1px solid var(--rule); position: relative; }
/* lead and end only group markup: their children are the bar's own flex items (no extra gap when a slot is empty) */
.sh-lead, .sh-end { display: contents; }
.sh-mid { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--s2); }

/* brand */
.sh-brand { display: flex; align-items: center; gap: var(--s2); flex: none; white-space: nowrap; min-height: 32px;
  font: 700 14px var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.sh-brand svg { color: var(--accent); flex: none; }
.sh-brand:hover { text-decoration: none; }
.sh-brand .mark { width: 28px; height: 28px; flex: none; display: block; }
/* lockup, concept B "Dimensioned": Invictus in Plex Sans Condensed 600 + a mono CAD tag
   (spec 24 px type / 13 px tag, scaled to the 48 px bar; colours follow the theme tokens) */
.sh-brand .wm { display: inline-flex; align-items: center; font: 600 18px/1 "IBM Plex Sans Condensed", var(--sans);
  letter-spacing: 0; color: var(--ink); }
.sh-brand .wm b { font: 500 10px/1 "IBM Plex Mono", var(--mono); letter-spacing: .14em; margin-left: 5px; padding: 2px 3px 2px 5px;
  border: 1.25px solid currentColor; color: var(--accent); }

/* the four sections */
.sh-nav { display: flex; gap: 2px; align-items: center; flex: none; }
.sh-nav a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font: 550 var(--fs-ui) var(--sans); text-decoration: none; white-space: nowrap; }
.sh-nav a:hover { background: var(--hull-3); color: var(--ink); text-decoration: none; }
.sh-nav a.on { color: var(--ink); background: var(--hull-4); }

/* buttons and menus */
.sh-wrap { position: relative; flex: none; }
.sh-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--h-ctl); padding: 0 10px; max-width: 100%;
  border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--ink-2); font: 550 var(--fs-ui) var(--sans); cursor: pointer; }
.sh-btn:hover, .sh-btn[aria-expanded="true"] { background: var(--hull-3); color: var(--ink); }
.sh-btn svg { flex: none; }
.sh-apps { display: none; }
.sh-apps.has-ext { display: block; }
.sh-apps-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-me { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--hull-4); color: var(--ink); font: 650 var(--fs-meta) var(--sans); }
.sh-me:hover, .sh-me[aria-expanded="true"] { background: var(--rule-strong); }

.sh-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; max-width: calc(100vw - 16px); z-index: 95;
  display: grid; padding: 4px; border: 1px solid var(--rule-strong); border-radius: var(--r-xl); background: var(--hull-2); box-shadow: var(--elev-2); }
.sh-menu[hidden] { display: none; }
.sh-menu button, .sh-menu a { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: var(--fs-ui) var(--sans); text-decoration: none; cursor: pointer; }
.sh-menu button:hover, .sh-menu a:hover, .sh-menu button:focus-visible, .sh-menu a:focus-visible { background: var(--hull-3); text-decoration: none; }
.sh-menu a svg { flex: none; color: var(--ink-3); }
.sh-menu a[aria-current="page"] { font-weight: 650; }
.sh-menu a[aria-current="page"] svg { color: var(--accent); }
.sh-menu-h { display: grid; padding: 8px 10px 6px; font-size: var(--fs-ui); font-weight: 650; overflow-wrap: anywhere; }
.sh-menu-h span { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-3); }
.sh-menu-l { padding: 8px 10px 2px; font-size: var(--fs-meta); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sh-menu [role=group] { display: grid; }
.sh-menu [role=menuitemradio] { justify-content: space-between; gap: 12px; }
.sh-menu [role=menuitemradio][aria-checked="true"] { font-weight: 600; }
.sh-menu [role=menuitemradio][aria-checked="true"]::after { content: ""; width: 5px; height: 9px; margin-right: 3px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.sh-menu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }

/* the page's own controls in the end slot share one control height */
.sh .topbar-search { width: 240px; flex: none; background: var(--hull-0); }
.sh .top-btn { height: var(--h-ctl); }

/* bottom tab bar: only on a phone, only where a page mounts it (/next) */
.sh-tabbar { display: none; }
html.sh-kb .sh-tabbar { display: none !important; }

/* narrower windows: the wordmark goes first (the mark still links to Jobs) */
@media (max-width: 899px) {
  .sh { gap: 8px; padding: 0 8px; }
  .sh-brand { min-height: 40px; }
  .sh-brand span, .sh-brand .wm { display: none; }
  .sh .topbar-search { width: 40px; justify-content: center; padding: 0; }
  .sh .topbar-search .ts-l { display: none; }
  /* ALA-62 #6: the key badge goes with the word (it was clipped under the account button at ~800 px on Jobs) */
  .sh .topbar-search kbd { display: none; }
}

/* phone: the sections fold into the Apps menu, the account is a 40 px target */
@media (max-width: 760px) {
  .sh-nav { display: none; }
  /* the menu is positioned against the bar, not the button, so it can never run off the right edge */
  .sh-apps { display: block; flex: 0 1 auto; min-width: 0; position: static; }
  .sh-apps .sh-btn { min-height: 40px; }
  .sh-apps-btn { padding: 0 8px; }
  .sh-apps .sh-menu { left: auto; right: 8px; max-width: calc(100vw - 16px); }
  .sh-menu a span, .sh-menu button { min-width: 0; overflow-wrap: anywhere; }
  .sh-me { width: 40px; height: 40px; }
  .sh-menu button, .sh-menu a { min-height: 44px; }
  .sh-tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none;
    border-top: 1px solid var(--rule); background: var(--hull-1);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .sh-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 2px;
    color: var(--ink-3); font: 550 var(--fs-meta) var(--sans); text-decoration: none; white-space: nowrap; }
  .sh-tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .sh-tabbar a:hover { color: var(--ink-2); text-decoration: none; }
  .sh-tabbar a.on { color: var(--accent); font-weight: 650; }
  .sh-tabbar a:focus-visible { outline-offset: -3px; }
}
@media (pointer: coarse) {
  .sh-nav a { min-height: 40px; }
  .sh-menu button, .sh-menu a { min-height: 40px; }
}

/* ── STUDIO_LAYOUT_V2: one left rail (shared/header.js mountShell / mountRail) ──
   Every rule is scoped html[data-layout="v2"]: flag off, nothing here applies. The page places the rail in its grid
   (next.css #app, styles.css #app); the rail's own look is here. Rail 232 px; section rows 36 px / 13.5 px; context headers
   12 px mono uppercase (never under 12 px). Phones (≤ 760 px): the rail is a drawer from the left with a scrim. */
html[data-layout="v2"] { --rail-w: 232px; }
html[data-layout="v2"] .sh-rail { width: var(--rail-w); min-width: 0; flex: none; display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto; overflow-x: hidden; background: var(--hull-1); border-right: 1px solid var(--rule); position: relative; }
html[data-layout="v2"] .sh-rail .sh-brand { padding: 12px 16px 8px; min-height: 48px; }
html[data-layout="v2"] .sh-rail .sh-brand .wm { display: inline-flex; }
html[data-layout="v2"] .sh-rail .sh-nav { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 2px 10px 8px;
  border-bottom: 1px solid var(--rule); flex: none; }
html[data-layout="v2"] .sh-rail .sh-nav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-md);
  color: var(--ink-2); font: 500 var(--fs-body) var(--sans); text-decoration: none; white-space: nowrap; }
html[data-layout="v2"] .sh-rail .sh-nav a svg { flex: none; color: var(--ink-3); }
html[data-layout="v2"] .sh-rail .sh-nav a:hover { background: var(--hull-3); color: var(--ink); text-decoration: none; }
html[data-layout="v2"] .sh-rail .sh-nav a.on { background: var(--wash); color: var(--ink); font-weight: 650; }
html[data-layout="v2"] .sh-rail .sh-nav a.on svg { color: var(--accent); }
html[data-layout="v2"] .sh-rail .sh-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the page's context: its own markup; headers, rows and the skeleton share these */
html[data-layout="v2"] .sh-ctx { flex: 1 0 auto; padding: 4px 10px 16px; min-width: 0; display: flex; flex-direction: column; }
html[data-layout="v2"] .sh-ctx > .sk { display: block; height: 12px; margin: 14px 10px 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--hull-2), var(--hull-3), var(--hull-2)); background-size: 200% 100%; }
html[data-layout="v2"] .sh-ctx > .sk:nth-child(2) { width: 70%; } html[data-layout="v2"] .sh-ctx > .sk:nth-child(3) { width: 50%; }
html[data-layout="v2"] .sh-ctx .rc-h { font: 500 var(--fs-meta) var(--mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3);
  padding: 14px 10px 4px; display: flex; align-items: center; gap: 8px; }
html[data-layout="v2"] .sh-ctx .rc-h:first-child { padding-top: 8px; }
html[data-layout="v2"] .sh-ctx .rc-empty { padding: 4px 10px; font-size: var(--fs-ui); color: var(--ink-3); }
html[data-layout="v2"] .sh-ctx .rc-row { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 5px 10px; border-radius: 7px;
  color: var(--ink-2); font: var(--fs-ui) var(--sans); text-align: left; text-decoration: none; background: none; border: 0; cursor: pointer; }
html[data-layout="v2"] .sh-ctx .rc-row:hover { background: var(--hull-3); color: var(--ink); text-decoration: none; }
html[data-layout="v2"] .sh-ctx .rc-row.on, html[data-layout="v2"] .sh-ctx .rc-row[aria-current="page"] { background: var(--wash); color: var(--ink); font-weight: 600; }
html[data-layout="v2"] .sh-ctx .rc-row b { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="v2"] .sh-ctx .rc-row .s { display: block; font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="v2"] .sh-ctx .rc-row .rc-n { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }
html[data-layout="v2"] .sh-ctx .rc-body { min-width: 0; flex: 1; }
/* a job chip (THIS JOB): ref, title, the way back */
html[data-layout="v2"] .sh-ctx .rc-chip { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 8px 10px; border: 1px solid var(--rule);
  border-radius: var(--r-md); background: var(--hull-0); min-width: 0; }
html[data-layout="v2"] .sh-ctx .rc-chip .r { display: block; font: 600 var(--fs-meta) var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="v2"] .sh-ctx .rc-chip .t { display: block; font-size: var(--fs-ui); color: var(--ink-2); overflow-wrap: anywhere; }
html[data-layout="v2"] .sh-ctx .rc-chip .back { margin-left: auto; flex: none; font-size: var(--fs-meta); white-space: nowrap; color: var(--accent); }
/* the account, at the foot of the rail */
html[data-layout="v2"] .sh-foot { margin-top: auto; flex: none; border-top: 1px solid var(--rule); padding: 8px 10px; position: sticky; bottom: 0; background: var(--hull-1); }
html[data-layout="v2"] .sh-foot:empty { display: none; }
html[data-layout="v2"] .sh-foot .sh-acct { position: relative; }
html[data-layout="v2"] .sh-foot .sh-me { width: 100%; height: auto; min-height: 44px; border-radius: var(--r-md); display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; background: transparent; text-align: left; font: var(--fs-ui) var(--sans); }
html[data-layout="v2"] .sh-foot .sh-me:hover, html[data-layout="v2"] .sh-foot .sh-me[aria-expanded="true"] { background: var(--hull-3); }
html[data-layout="v2"] .sh-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--hull-4);
  color: var(--ink); font: 650 var(--fs-meta) var(--sans); }
html[data-layout="v2"] .sh-who { min-width: 0; display: grid; }
html[data-layout="v2"] .sh-who b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="v2"] .sh-who span { font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="v2"] .sh-foot .sh-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }   /* opens upward */
/* RC22.3 #29: at 100 % zoom on a 1440 px screen the job outline ran under the account at the foot (it is sticky) and "Pricing"
   sat hidden behind the name. On a desktop rail with room for it, the page's context scrolls on its own between the sections
   and the account, which never covers it; a soft shade at the top / bottom edge says there is more. A short window keeps the
   whole rail scrolling as before. */
@media (min-width: 761px) and (min-height: 520px) {
  html[data-layout="v2"] .sh-rail { overflow: hidden; }
  html[data-layout="v2"] .sh-ctx { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    background:
      linear-gradient(var(--hull-1) 30%, transparent) top / 100% 24px no-repeat local,
      linear-gradient(transparent, var(--hull-1) 70%) bottom / 100% 24px no-repeat local,
      linear-gradient(color-mix(in srgb, var(--ink) 12%, transparent), transparent) top / 100% 8px no-repeat scroll,
      linear-gradient(transparent, color-mix(in srgb, var(--ink) 12%, transparent)) bottom / 100% 8px no-repeat scroll,
      var(--hull-1); }
  html[data-layout="v2"] .sh-foot { position: static; }
}
/* the bar: no section links and no brand text; the mark and ☰ are phone-only */
html[data-layout="v2"] .sh .sh-mark, html[data-layout="v2"] .sh .sh-menu-btn { display: none; }
html[data-layout="v2"] .sh .sh-mark .mark { width: 28px; height: 28px; display: block; }
html[data-layout="v2"] .sh .sh-acct .sh-who { display: none; }
html[data-layout="v2"] .sh .sh-acct .sh-me { width: 40px; height: 40px; padding: 0; background: transparent; display: grid; place-items: center; }
html[data-layout="v2"] .sh-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-body); color: var(--ink-3); white-space: nowrap; overflow: hidden; }
html[data-layout="v2"] .sh-crumb a { color: var(--ink-3); text-decoration: none; }
html[data-layout="v2"] .sh-crumb a:hover { color: var(--ink); text-decoration: underline; }
html[data-layout="v2"] .sh-crumb b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="v2"] .sh-crumb .sep { color: var(--ink-4); }
html[data-layout="v2"] .sh-apps { display: none !important; }
html[data-layout="v2"] .sh-status { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: var(--fs-ui); color: var(--ink-3); white-space: nowrap; }
html[data-layout="v2"] .sh-status .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
html[data-layout="v2"] .sh-scrim { display: none; }
@media (max-width: 760px) {
  html[data-layout="v2"] .sh .sh-mark { display: grid; flex: none; }
  html[data-layout="v2"] .sh .sh-menu-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; }
  html[data-layout="v2"] .sh-rail { position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 320px) !important; max-width: 320px; z-index: 120;
    transform: translateX(-102%); transition: transform .18s ease; visibility: hidden; }
  html[data-layout="v2"] body.rail-open .sh-rail { transform: none; box-shadow: var(--shadow); visibility: visible; }
  html[data-layout="v2"] body.rail-open .sh-scrim { display: block; position: fixed; inset: 0; z-index: 110; background: var(--scrim); }
  html[data-layout="v2"] .sh-rail .sh-nav a { min-height: 44px; }
  html[data-layout="v2"] .sh-crumb { font-size: var(--fs-ui); }
  html[data-layout="v2"] .sh-status { display: none; }
  html[data-layout="v2"] .sh-tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html[data-layout="v2"] .sh-tabbar a { min-height: 50px; font-size: var(--fs-meta); }
}
@media (prefers-reduced-motion: reduce) { html[data-layout="v2"] .sh-rail { transition: none; } }
/* v2: one link past the rail, shown when it has the focus */
html[data-layout="v2"] .sh-skip { position: fixed; left: 8px; top: 8px; z-index: 200; padding: 8px 12px; border-radius: var(--r-md); background: var(--hull-1);
  color: var(--accent); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); transform: translateY(-200%); }
html[data-layout="v2"] .sh-skip:focus { transform: none; }
@media (max-width: 760px) {
  html[data-layout="v2"] .sh .sh-menu-btn, html[data-layout="v2"] .sh .sh-acct .sh-me { width: 44px; height: 44px; min-height: 44px; }
  html[data-layout="v2"] .sh-ctx .rc-row { min-height: 44px; }
}
@media (max-width: 760px) {
  html[data-layout="v2"] .sh-ctx .rc-chip .back { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
  html[data-layout="v2"] .sh .sh-mark { min-width: 44px; min-height: 44px; place-items: center; }
}