/* BAND-002353 (UI-11): the station tabs under the top bar and the views they show. The header
   around them (top bar, project panel, menu) is css/app-shell.css. */
.productionstudio-station-nav {
  display: flex;
  align-items: stretch;
  max-width: var(--size-content-max);
  height: var(--size-station-nav);
  min-width: 0;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.productionstudio-nav-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.productionstudio-nav-row::-webkit-scrollbar { display: none; }
.productionstudio-nav-row [role="tab"]:enabled {
  position: relative;
  flex: none;
  min-height: 0;
  gap: var(--space-1-5);
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: var(--border-width-indicator) solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.productionstudio-nav-row [role="tab"]:enabled:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
/* The current station (Velanum.Brand APPLICATIONS.md, "Primary navigation", brand D-17): an
   indicator bar border-width-2 wide in the accent and a heavier weight, never a primary fill and
   never colour alone. Under the pointer it sits on the brand's selected fill. */
.productionstudio-nav-row [role="tab"][aria-selected="true"]:enabled {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}
.productionstudio-nav-row [role="tab"][aria-selected="true"]:enabled:hover { background: var(--color-selected); }
/* The row clips its overflow, so the focus ring is drawn inside the tab. */
.productionstudio-nav-row [role="tab"]:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
/* The stage of the open project: a dot before the name (read out through aria-describedby). */
.productionstudio-nav-row [role="tab"][data-project-stage="current"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-0-5);
  translate: 0 -50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
/* Tabs scrolled out of sight: the row fades out on that side. */
.productionstudio-nav-row[data-overflow="end"] { mask-image: linear-gradient(to right, black calc(100% - var(--space-10)), transparent); }
.productionstudio-nav-row[data-overflow="start"] { mask-image: linear-gradient(to left, black calc(100% - var(--space-10)), transparent); }
.productionstudio-nav-row[data-overflow="both"] { mask-image: linear-gradient(to right, transparent, black var(--space-10), black calc(100% - var(--space-10)), transparent); }
/* How many listed projects are at this stage. */
.productionstudio-nav-row [role="tab"][data-count]::after {
  content: attr(data-count);
  min-width: 20px;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-normal);
  text-align: center;
}
.productionstudio-nav-row [role="tab"][aria-selected="true"][data-count]::after {
  background: var(--color-selected);
  color: var(--color-accent);
}

.productionstudio-stage,
.productionstudio-view.is-active { min-width: 0; }
.productionstudio-stage { display: grid; gap: var(--space-4); align-content: start; }
.productionstudio-view { display: none; }
.productionstudio-view.is-active { display: grid; gap: var(--space-5); }
/* The wizard never lays out a station that is not the active one: js/navigation-shell.js shows the
   view that holds a step's target before the step is measured. */
body.productionstudio-wizard-active .productionstudio-view:not(.is-active) { display: none; }
.productionstudio-view-heading h2 { margin: 0; }
.productionstudio-station-home { margin: var(--space-1) 0 0; }

@media (width < 600px) {
  .productionstudio-station-nav { padding: 0 var(--space-2); }
  .productionstudio-nav-row { gap: 0; }
  .productionstudio-nav-row [role="tab"]:enabled { padding: 0 var(--space-2-5); }
}