/* BAND-002353 (UI-11): the application shell. A sticky header (the top bar over the station tabs,
   css/navigation-shell.css) keeps every station reachable without scrolling; the project card and
   list live in the project panel; the language, the theme and the utilities live in the account
   menu, which the one account button on the right of the header opens at every width
   (Velanum.Brand APPLICATIONS.md, "Header", "Account menu"). Breakpoints: css/tokens.css
   (--breakpoint-*). */
html { scroll-padding-top: calc(var(--size-shell-header) + var(--space-4)); }

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: var(--shadow-xs);
}
/* A spotlighted tab or utility sits in the header; the header rises above the wizard's scrim. */
body.productionstudio-wizard-active .app-header:has(.productionstudio-spotlight-target) { z-index: var(--z-spotlight); }
/* The open account menu drops below the header, where the sticky session banner (which follows the
   header in the page) would cover it: the header rises above the banner while the menu is open. */
.app-header:has(.account-menu.is-open) { z-index: var(--z-menu); }

.app-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--size-content-max);
  height: var(--size-topbar);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.brand { display: flex; flex: none; align-items: center; min-width: 0; }
/* Brand 1.0: the product's small lockup (Velanum.Brand MARK-SYSTEM.md, "Product lockups"): its
   box is 1.2 times its tile, so the 36px box carries a 30px tile, 48px and below being the small
   drawing's, and the name as large as 25px text. It stands on the header's raised surface, which
   carries a mark in both themes (the lifted tile has 1.51:1 there). The h1's text is the name; it
   is read out, not shown, while the lockup draws it. */
.brand-title { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.brand-lockup { display: block; flex: none; width: auto; height: var(--size-control); }
.brand-sign { display: none; flex: none; width: var(--size-control); height: var(--size-control); }
.brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon { flex: none; width: var(--size-icon); height: var(--size-icon); }

/* ---- The compact project context. ---------------------------------------------------------- */
.context-bar { display: flex; flex: 1 1 auto; min-width: 0; }
button.context-switcher:enabled {
  justify-content: flex-start;
  gap: var(--space-2-5);
  min-width: 0;
  width: 100%;
  max-width: 420px;
  height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-weight: var(--font-weight-regular);
  text-align: left;
}
button.context-switcher:enabled:hover { background: var(--color-surface-3); border-color: var(--color-border); }
/* Open: the brand's selected fill, with the accent edge, so it never rests on the fill alone. */
button.context-switcher[aria-expanded="true"]:enabled { background: var(--color-selected); border-color: var(--color-accent); }
.context-switcher > .icon { color: var(--color-text-muted); }
.context-switcher-text { display: grid; flex: 1 1 auto; min-width: 0; line-height: var(--line-height-tight); }
.context-switcher-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
/* The open project's state: a dot in the badge's tone before the words. */
.context-switcher-kicker[data-tone]::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
}
.context-switcher-kicker[data-tone="success"]::before { border-color: var(--color-success-border); background: var(--color-success); }
.context-switcher-kicker[data-tone="info"]::before { border-color: var(--color-info-border); background: var(--color-info); }
.context-switcher-kicker[data-tone="warning"]::before { border-color: var(--color-warning-border); background: var(--color-warning); }
.context-switcher-kicker[data-tone="danger"]::before { border-color: var(--color-danger-border); background: var(--color-danger); }
.context-switcher-title {
  overflow: hidden;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-switcher > .icon:last-child { margin-left: auto; }

/* ---- The account button and the account menu (every width). ----------------------------------- */
/* The button and the menu's rows are the brand's touch target, 44px (Velanum.Brand TOKENS.md,
   size-touch-target). */
button.account-button:enabled {
  flex: none;
  width: var(--size-touch-target);
  min-height: var(--size-touch-target);
  margin-left: auto;
  padding: 0;
  border-color: var(--color-divider-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
}
button.account-button:enabled:hover { background: var(--color-surface-3); border-color: var(--color-border); }
button.account-button[aria-expanded="true"]:enabled { background: var(--color-selected); border-color: var(--color-accent); }
.account-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: var(--space-6);
  z-index: var(--z-dropdown);
  display: none;
  gap: var(--space-3);
  width: min(320px, calc(100vw - 2 * var(--space-4)));
  /* The menu never runs past the bottom of the window: on a short window (a phone held sideways)
     it scrolls inside itself, so its last row stays reachable by scrolling and by focus
     (WCAG 1.4.10, 2.4.11), and the page behind it does not scroll along. */
  max-height: calc(100dvh - var(--size-topbar) - var(--space-2));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  /* A menu takes the brand's menu radius and layer (Velanum.Brand TOKENS.md, UI-THEMES.md). */
  border-radius: var(--radius-md);
  background: var(--color-overlay);
  box-shadow: var(--shadow-lg);
}
.account-menu.is-open { display: grid; }
.account-menu-owner { display: grid; gap: var(--space-0-5); padding: var(--space-1) var(--space-2-5) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.account-menu-role { font-weight: var(--font-weight-semibold); }
.local-label { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.local-label > span { flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-success); }
.account-menu-group { display: grid; gap: var(--space-0-5); }
.account-menu-group + .account-menu-group { padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.account-menu-label { padding: 0 var(--space-2-5) var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
/* The rows of the menu: a language, a theme, a utility. Quiet until chosen; the chosen one (the
   language and theme in use, the utility on screen) takes the brand's selected fill, its indicator
   bar in the accent and a heavier weight, never a primary fill and never the fill alone: in the
   dark theme the selected fill barely differs from the menu's layer (brand D-11, D-17). */
.account-menu button.menu-option:enabled,
.account-menu button.utility-button:enabled {
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--size-touch-target);
  padding: 0 var(--space-2-5);
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  text-align: left;
  white-space: nowrap;
}
.account-menu button.menu-option:enabled:hover,
.account-menu button.utility-button:enabled:hover { background: var(--color-surface-3); color: var(--color-text); }
.account-menu button.menu-option[aria-pressed="true"]:enabled,
.account-menu button.utility-button[aria-current="page"]:enabled {
  background: var(--color-selected);
  box-shadow: var(--shadow-indicator);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}
.account-menu .menu-option > svg,
.account-menu .utility-button > svg { color: var(--color-text-muted); }
.account-menu .menu-option[aria-pressed="true"] > svg,
.account-menu .utility-button[aria-current="page"] > svg { color: var(--color-accent); }
/* Forced colours (a Windows contrast theme) drop the selected fill and the inset bar, which is a
   shadow; borders stay, so the chosen row draws its indicator bar as a wider start border in its
   text colour, which forced colours keep legible. */
@media (forced-colors: active) {
  .account-menu button.menu-option[aria-pressed="true"]:enabled,
  .account-menu button.utility-button[aria-current="page"]:enabled {
    border-inline-start: calc(2 * var(--border-width-indicator)) solid currentColor;
  }
}

/* ---- The shell below the header: the project panel beside (or over) the stage. ----------------- */
.productionstudio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  max-width: var(--size-content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-10);
}
.productionstudio-context {
  position: fixed;
  top: var(--size-shell-header);
  bottom: 0;
  left: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(var(--size-project-panel), 100vw);
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--color-divider);
  background: var(--color-page);
  box-shadow: var(--shadow-lg);
}
.project-panel-scrim {
  position: fixed;
  inset: var(--size-shell-header) 0 0 0;
  z-index: var(--z-dropdown);
  background: var(--color-scrim);
}
.productionstudio-context > * { flex: none; }
.productionstudio-context:focus { outline: none; }
.productionstudio-context:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-ring-width)); }
body.productionstudio-wizard-active .productionstudio-context:has(.productionstudio-spotlight-target) { z-index: var(--z-spotlight); }
.productionstudio-context-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
button.icon-button:enabled { width: var(--size-control); min-height: var(--size-control); padding: 0; color: var(--color-text-muted); }
button.icon-button:enabled:hover { color: var(--color-text); }
.productionstudio-context-summary:not(:has(> :not([hidden]))) { display: none; }
.productionstudio-context-summary > * { margin: 0; }
.productionstudio-context .card { padding: var(--space-4); box-shadow: none; }
.productionstudio-context .section-heading { margin-bottom: var(--space-4); }
.productionstudio-context .workspace-empty { min-height: 0; padding: var(--space-5); }
.productionstudio-context .workspace-empty h2 { margin-top: 0; }
.productionstudio-context .workspace-empty p { margin-bottom: 0; font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.productionstudio-context:has(#statusCard:not(.hidden)) .workspace-empty { display: none; }
#projectLibraryHeading:focus { outline: none; }
#projectLibraryHeading:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

@media (width >= 1280px) {
  .project-panel-scrim { display: none; }
  .productionstudio-shell:has(> .productionstudio-context:not([hidden])) {
    grid-template-columns: var(--size-project-panel) minmax(0, 1fr);
  }
  .productionstudio-context {
    position: sticky;
    top: calc(var(--size-shell-header) + var(--space-6));
    bottom: auto;
    left: auto;
    z-index: var(--z-base);
    width: auto;
    max-height: calc(100vh - var(--size-shell-header) - var(--space-12));
    padding: 0;
    border-right: 0;
    background: transparent;
    box-shadow: none;
  }
  .productionstudio-context .card { box-shadow: var(--shadow-sm); }
}
@media (width < 600px) {
  .app-topbar { gap: var(--space-2); padding: 0 var(--space-3); }
  .account-menu { right: var(--space-3); }
  /* Brand 1.0: the lockup's one line does not fit beside the project context on a phone, and a
     lockup is never scaled below its minimum, so the sign stands alone, the small drawing at
     36px (on the dark header the lifted tile of mark-inverse.svg, which has no small drawing yet),
     beside the name as text (Velanum.Brand MARK-SYSTEM.md, "Small sizes", "Product lockups").
     BAND-002859: the name stays visible beside the sign; it breaks onto two lines instead of
     shrinking, since the heading scale keeps every h1 above every h2. BAND-002877: the two lines
     are set solid, so they fit inside the 56px top bar (48px, not 57.6px), and the bar's gaps and
     the switcher's padding each take a smaller step, which gives the switcher back the width the
     larger name takes. */
  .brand-lockup { display: none; }
  .brand-sign { display: block; }
  .brand-name {
    position: static;
    width: min-content;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    line-height: var(--line-height-none);
  }
  .context-switcher-kicker { display: none; }
  button.context-switcher:enabled { gap: var(--space-2); padding: 0 var(--space-2); }
  /* BAND-002877: beside the two-line product name the switcher is a dense control; its title takes
     the scale's next step down, so more of the project's name shows before the ellipsis. */
  .context-switcher-title { font-size: var(--font-size-sm); }
  .productionstudio-shell { gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-8); }
  .productionstudio-context { width: 100vw; border-right: 0; }
}
/* The panel scrolls, so a spotlighted card in it is outlined inside its own edge. */
body.productionstudio-wizard-active .productionstudio-context .productionstudio-spotlight-target { outline-offset: calc(-1 * var(--focus-ring-width)); }