/* Studio.Ui structural styles (ADR-0028).
   THEME CONTRACT: this file consumes SEMANTIC design tokens only (--color-*, --font-*,
   --space-*, --radius-*, --elevation-*, --motion-*) as emitted by Studio.Content's
   CompileTokens into the product's tokens.css. Zero hardcoded colors or brand values —
   the product's compiled tokens.css IS the theme. Link tokens.css before this file. */

/* ---------- utilities ---------- */

.studio-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- button ---------- */

.studio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.studio-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.studio-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.studio-button--sm { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-3); }
.studio-button--md { font-size: var(--font-size-base); padding: var(--space-2) var(--space-4); }
.studio-button--lg { font-size: var(--font-size-lg); padding: var(--space-3) var(--space-6); }

.studio-button--primary {
  background: var(--color-action-primary);
  color: var(--color-action-primaryText);
}

.studio-button--primary:not(:disabled):hover { background: var(--color-action-primaryHover); }

.studio-button--secondary {
  background: var(--color-action-secondary);
  color: var(--color-action-secondaryText);
  border-color: var(--color-border-default);
}

.studio-button--ghost {
  background: transparent;
  color: var(--color-text-primary);
}

.studio-button--ghost:not(:disabled):hover { background: var(--color-surface-sunken); }

.studio-button--destructive {
  background: var(--color-action-destructive);
  color: var(--color-action-destructiveText);
}

/* ---------- spinner ---------- */

.studio-spinner {
  display: inline-block;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-action-primary);
  border-radius: var(--radius-full);
  animation: studio-spin 0.8s linear infinite;
}

.studio-spinner--sm { width: var(--space-4); height: var(--space-4); }
.studio-spinner--md { width: var(--space-6); height: var(--space-6); }
.studio-spinner--lg { width: var(--space-8); height: var(--space-8); }

@keyframes studio-spin { to { transform: rotate(360deg); } }

/* ---------- fields (input / select) ---------- */

.studio-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-family-body);
}

.studio-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.studio-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.studio-input,
.studio-select {
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.studio-input:focus-visible,
.studio-select:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

.studio-field--error .studio-input,
.studio-field--error .studio-select {
  border-color: var(--color-status-danger-base);
}

.studio-field__error {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-status-danger-text);
}

.studio-field__helper {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Prefix/suffix adornments (e.g. a "+1" phone-country prefix). Sit inline with the input inside
   .studio-field__control; the prefix can be toggled off (via [hidden]) by progressive enhancement
   when a field switches to an international value that carries its own "+cc". */
.studio-field__prefix,
.studio-field__suffix {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  white-space: nowrap;
}

.studio-field__prefix[hidden],
.studio-field__suffix[hidden] {
  display: none;
}

/* A .studio-field sets display:flex, which would otherwise beat the [hidden] UA rule -- restore it so
   progressive enhancement (data-studio-show-when) can hide a whole field wrapper. */
.studio-field[hidden] {
  display: none;
}

/* ---------- checkbox ---------- */

.studio-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  cursor: pointer;
}

.studio-checkbox__input { accent-color: var(--color-action-primary); }

/* ---------- badge ---------- */

.studio-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: calc(var(--space-1) / 2) var(--space-2);
  border-radius: var(--radius-full);
}

.studio-badge--neutral { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.studio-badge--success { background: var(--color-status-success-subtle); color: var(--color-status-success-text); }
.studio-badge--warning { background: var(--color-status-warning-subtle); color: var(--color-status-warning-text); }
.studio-badge--danger  { background: var(--color-status-danger-subtle);  color: var(--color-status-danger-text); }
.studio-badge--info    { background: var(--color-status-info-subtle);    color: var(--color-status-info-text); }

/* ---------- card ---------- */

.studio-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-low);
}

.studio-card--interactive { cursor: pointer; }

.studio-card--interactive:hover { box-shadow: var(--elevation-medium); }

.studio-card--interactive:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.studio-card__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
  font-weight: var(--font-weight-semibold);
}

.studio-card__body { padding: var(--space-6); }

.studio-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-default);
}

/* ---------- table ---------- */

.studio-table__scroll { overflow-x: auto; }

.studio-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
}

.studio-table__head th {
  position: sticky;
  top: 0;
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-strong);
}

.studio-table__row td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
}

/* STUDIO-175: numeric/currency columns are right-aligned with tabular figures (Table contract).
   Callers feeding raw <th>/<td> add this modifier to the numeric header + body cells so alignment is
   a shared, tokenized behavior — not per-product inline styles. Scoped to win over the default
   header left-alignment. */
.studio-table__head th.studio-table__cell--numeric,
.studio-table__row td.studio-table__cell--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.studio-table__empty { padding: var(--space-8); }

/* STUDIO-287: sortable column headers (StudioSortableHeader/StudioClientSortHeader). The link fills
   the whole <th> so the entire header cell is the click/tap target, not just the label text. */
.studio-table__sort-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.studio-table__sort-link:hover { text-decoration: underline; }

.studio-table__sort-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.studio-table__head th[aria-sort="ascending"],
.studio-table__head th[aria-sort="descending"] {
  color: var(--color-text-primary);
}

.studio-table__sort-indicator {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ---------- bulk-actions bar (STUDIO-178) ---------- */
/* Sits ABOVE a selectable table: a selection summary + the bulk-action controls the caller composes.
   Presentational and SSR-friendly (a plain reset link, no interactivity required). */
.studio-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-body);
}

.studio-bulk-bar__summary { display: flex; align-items: center; gap: var(--space-3); }
.studio-bulk-bar__count { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.studio-bulk-bar__clear { font-size: var(--font-size-sm); color: var(--color-text-link); }
.studio-bulk-bar__actions { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- empty state ---------- */

.studio-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-10);
  font-family: var(--font-family-body);
}

.studio-empty-state__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.studio-empty-state__description {
  margin: 0;
  color: var(--color-text-muted);
}

.studio-empty-state__action { margin-top: var(--space-2); }

/* ---------- stat card ---------- */

.studio-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  font-family: var(--font-family-body);
}

.studio-stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.studio-stat-card__value {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.studio-stat-card__delta { font-size: var(--font-size-sm); }

.studio-stat-card__delta--up   { color: var(--color-status-success-text); }
.studio-stat-card__delta--down { color: var(--color-status-danger-text); }
.studio-stat-card__delta--flat { color: var(--color-text-muted); }

/* ---------- app shell ---------- */

.studio-app-shell {
  min-height: 100vh;
  background: var(--color-surface-page);
  display: grid;
}

.studio-app-shell--topbar { grid-template: "topbar" auto "main" 1fr / 1fr; }

.studio-app-shell--sidebar { grid-template: "sidebar main" 1fr / auto 1fr; }

.studio-app-shell--topbar-sidebar {
  grid-template: "topbar topbar" auto "sidebar main" 1fr / auto 1fr;
}

.studio-app-shell__topbar {
  grid-area: topbar;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border-default);
}

.studio-app-shell__sidebar {
  grid-area: sidebar;
  width: 16rem;
  background: var(--color-surface-raised);
  border-right: 1px solid var(--color-border-default);
}

.studio-app-shell__main {
  grid-area: main;
  padding: var(--space-8);
}

/* ---------- side nav ---------- */

.studio-side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  font-family: var(--font-family-body);
}

.studio-side-nav__section { display: flex; flex-direction: column; gap: var(--space-1); }

.studio-side-nav__section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
}

.studio-side-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.studio-side-nav__item:hover { background: var(--color-surface-sunken); }

.studio-side-nav__item.active {
  background: var(--color-surface-sunken);
  color: var(--color-text-link);
  font-weight: var(--font-weight-medium);
}

.studio-side-nav__item-badge { margin-left: auto; }

/* Collapsible section (STUDIO-181) — native <details>/<summary>, no :has() selector, no JS. The
   marker (default disclosure triangle) is suppressed since the chevron icon is the visible
   affordance instead. */
.studio-side-nav__section--collapsible { display: block; }
.studio-side-nav__section--collapsible > .studio-side-nav__section-items {
  display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1);
}
.studio-side-nav__section-trigger {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  cursor: pointer; list-style: none; user-select: none;
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.studio-side-nav__section-trigger::-webkit-details-marker { display: none; }
.studio-side-nav__section-trigger:hover { background: var(--color-surface-sunken); }
.studio-side-nav__section-trigger:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-side-nav__section-trigger .studio-side-nav__section-title {
  padding: 0; flex: 1;
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium); text-transform: none;
}
.studio-side-nav__section-icon { flex: none; display: inline-flex; }
.studio-side-nav__section-chevron {
  flex: none; display: inline-flex;
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.studio-side-nav__section--collapsible[open] > .studio-side-nav__section-trigger .studio-side-nav__section-chevron {
  transform: rotate(180deg);
}

/* SideNavSubPanel — just a separator under the Back item; the panel itself is plain StudioSideNav
   content, no positioning/overlay CSS since it's in-flow, not a popover. */
.studio-side-nav__sub-panel-back { padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-default); }

/* ---------- topbar ---------- */

.studio-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family-body);
}

.studio-topbar__nav { display: flex; gap: var(--space-4); }

.studio-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Far-right app affordance (STUDIO-221): renders after the actions cluster, so the waffle is pinned
   to the topbar's trailing edge in every product rather than wherever a consumer dropped it. */
.studio-topbar__app-switcher {
  display: flex;
  align-items: center;
  margin-left: var(--space-3);
}

/* ---------- reduced motion (STUDIO-119) ----------
   Honor the OS "reduce motion" setting: near-instant transitions and a single
   static spinner frame rather than the infinite spin. Component-level, so every
   product inherits it. Focus outlines are unaffected (they carry no motion). */
@media (prefers-reduced-motion: reduce) {
  .studio-button,
  .studio-input,
  .studio-select,
  .studio-card--interactive,
  .studio-app-switcher__app {
    transition-duration: 0.01ms;
  }

  .studio-spinner {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* Banner — inline page-level status */
.studio-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.studio-banner__content { flex: 1; }
.studio-banner__dismiss {
  flex: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: 0 var(--space-1);
}
.studio-banner__dismiss:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-banner--neutral { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.studio-banner--info    { background: var(--color-status-info-subtle);    color: var(--color-status-info-text); }
.studio-banner--success { background: var(--color-status-success-subtle); color: var(--color-status-success-text); }
.studio-banner--warning { background: var(--color-status-warning-subtle); color: var(--color-status-warning-text); }
.studio-banner--danger  { background: var(--color-status-danger-subtle);  color: var(--color-status-danger-text); }

/* Divider — border.default only */
.studio-divider--horizontal { border-top: 1px solid var(--color-border-default); width: 100%; height: 0; margin: var(--space-4) 0; }
.studio-divider--vertical   { border-left: 1px solid var(--color-border-default); align-self: stretch; width: 0; margin: 0 var(--space-4); }

/* PageStack (STUDIO-247) — governs the gap BETWEEN top-level page sections/composed components;
   every component already has correct internal padding, this is the piece nothing previously owned.
   Semantic token first, numeric primitive fallback (STUDIO-248) — works whether or not a product has
   adopted space.semantic.* yet. */
/* spacing-lint-ok: gap lives in the --section/--cluster/--tight modifier rules below, by design. */
.studio-page-stack { display: flex; flex-direction: column; }
.studio-page-stack--section { gap: var(--space-semantic-sectionGap, var(--space-12)); }
.studio-page-stack--cluster { gap: var(--space-semantic-clusterGap, var(--space-4)); }
.studio-page-stack--tight   { gap: var(--space-semantic-tightGap, var(--space-2)); }

/* Link — inline vs standalone; external indicator */
.studio-link { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }
.studio-link:hover { color: var(--color-action-primaryHover); }
.studio-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-md); }
.studio-link--standalone { text-decoration: none; font-weight: var(--font-weight-medium); }
.studio-link--standalone:hover { text-decoration: underline; }
.studio-link__external { font-size: 0.85em; margin-left: 0.15em; }

/* Textarea */
.studio-textarea { resize: vertical; min-height: calc(var(--space-8) * 1.5); font-family: var(--font-family-body); }
.studio-textarea__counter { text-align: right; }

/* NumberInput */
.studio-number { align-items: stretch; }
.studio-number__input { text-align: right; font-variant-numeric: tabular-nums; }
.studio-number__step {
  flex: none;
  width: var(--space-8);
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
}
.studio-number__step:not(:disabled):hover { background: var(--color-surface-page); }
.studio-number__step:disabled { opacity: 0.55; cursor: not-allowed; }
.studio-number__step:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }

/* Avatar */
.studio-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
}
.studio-avatar--sm { width: var(--space-6); height: var(--space-6); font-size: var(--font-size-xs); }
.studio-avatar--md { width: var(--space-8); height: var(--space-8); font-size: var(--font-size-sm); }
.studio-avatar--lg { width: var(--space-10); height: var(--space-10); font-size: var(--font-size-base); }
.studio-avatar__image { width: 100%; height: 100%; object-fit: cover; }

/* IconButton */
.studio-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.studio-icon-button:not(:disabled):hover { background: var(--color-surface-sunken); }
.studio-icon-button:disabled { opacity: 0.55; cursor: not-allowed; }
.studio-icon-button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-icon-button--sm { width: var(--space-6); height: var(--space-6); }
.studio-icon-button--md { width: var(--space-8); height: var(--space-8); }
.studio-icon-button--lg { width: var(--space-10); height: var(--space-10); }

/* ProgressBar */
.studio-progress { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-family-body); }
.studio-progress__label { display: flex; justify-content: space-between; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.studio-progress__track { width: 100%; height: var(--space-2); background: var(--color-surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.studio-progress__fill {
  height: 100%;
  background: var(--color-action-primary);
  border-radius: var(--radius-full);
  transition: width var(--motion-duration-fast) var(--motion-easing-standard);
}
.studio-progress__fill--indeterminate { width: 40%; animation: studio-progress-indeterminate 1.2s ease-in-out infinite; }
@keyframes studio-progress-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
/* STUDIO-235: discrete width classes, not an inline style="width:N%" -- a strict style-src 'self'
   CSP (no unsafe-inline, every product's posture) silently drops inline style attributes, which
   collapsed this fill to zero width in a real browser even though bUnit's in-memory render (which
   never enforces CSP) made the old inline-style approach look correct in tests. Mirrors
   Studio.Ui.Charts' ChartFormat.Bucket5 discrete-bucket technique. */
.studio-progress__fill--w0 { width: 0%; }
.studio-progress__fill--w5 { width: 5%; }
.studio-progress__fill--w10 { width: 10%; }
.studio-progress__fill--w15 { width: 15%; }
.studio-progress__fill--w20 { width: 20%; }
.studio-progress__fill--w25 { width: 25%; }
.studio-progress__fill--w30 { width: 30%; }
.studio-progress__fill--w35 { width: 35%; }
.studio-progress__fill--w40 { width: 40%; }
.studio-progress__fill--w45 { width: 45%; }
.studio-progress__fill--w50 { width: 50%; }
.studio-progress__fill--w55 { width: 55%; }
.studio-progress__fill--w60 { width: 60%; }
.studio-progress__fill--w65 { width: 65%; }
.studio-progress__fill--w70 { width: 70%; }
.studio-progress__fill--w75 { width: 75%; }
.studio-progress__fill--w80 { width: 80%; }
.studio-progress__fill--w85 { width: 85%; }
.studio-progress__fill--w90 { width: 90%; }
.studio-progress__fill--w95 { width: 95%; }
.studio-progress__fill--w100 { width: 100%; }

/* Pagination */
.studio-pagination { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-family-body); }
.studio-pagination__status { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* PageHeader */
.studio-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-family-body);
}
.studio-page-header__breadcrumbs { margin-bottom: var(--space-1); }
.studio-page-header__title {
  margin: 0;
  font-size: var(--font-size-xl, var(--font-size-lg));
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.studio-page-header__description { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.studio-page-header__actions { display: flex; gap: var(--space-2); align-items: center; }

/* Modal */
.studio-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-overlay, rgba(0, 0, 0, 0.5));
}
/* spacing-lint-ok: header/body/footer each carry their own padding (STUDIO-249) — separation comes
   from that, not a parent gap, same as any bordered/padded stack of independently-boxed regions. */
.studio-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - var(--space-8));
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-high, var(--elevation-medium));
  outline: none;
}
.studio-modal--sm { max-width: 24rem; }
.studio-modal--md { max-width: 32rem; }
.studio-modal--lg { max-width: 48rem; }
.studio-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
}
.studio-modal__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.studio-modal__body { padding: var(--space-6); overflow-y: auto; }
.studio-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-default);
}

/* StudioSsrModal (STUDIO-316): a native <dialog> shares the .studio-modal visual classes above with
   the interactive StudioModal's plain <div> -- same look, different open/close mechanism. This block
   only resets the UA default dialog box (padding/border/background) and supplies ::backdrop, since
   .studio-modal-overlay above is that OTHER component's own hand-rolled backdrop div and does not
   apply here -- a shown <dialog> gets its dimming from the platform instead. */
dialog.studio-modal {
  padding: 0;
  border: 0;
  margin: auto;
  width: min(92vw, 100%);
  color: inherit;
}
dialog.studio-modal::backdrop {
  background: var(--color-overlay, rgba(0, 0, 0, 0.5));
}

/* ConfirmDialog */
.studio-confirm__consequence { margin: 0; color: var(--color-text-secondary); }

/* Toast */
.studio-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 24rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-medium);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
}
.studio-toast__content { flex: 1; }
.studio-toast--neutral { border-left-color: var(--color-border-strong); }
.studio-toast--info { border-left-color: var(--color-status-info-text); }
.studio-toast--success { border-left-color: var(--color-status-success-text); }
.studio-toast--warning { border-left-color: var(--color-status-warning-text); }
.studio-toast--danger { border-left-color: var(--color-status-danger-text); }

/* Tooltip */
.studio-tooltip { position: relative; display: inline-flex; }
.studio-tooltip__tip {
  position: absolute;
  bottom: calc(100% + var(--space-1));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  padding: var(--space-1) var(--space-2);
  background: var(--color-text-primary);
  color: var(--color-surface-raised);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}
.studio-tooltip:hover .studio-tooltip__tip,
.studio-tooltip:focus-within .studio-tooltip__tip { opacity: 1; visibility: visible; }

/* Tabs */
.studio-tabs__list { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border-default); }
.studio-tabs__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.studio-tabs__tab:hover { color: var(--color-text-primary); }
.studio-tabs__tab.is-active {
  color: var(--color-action-primary);
  border-bottom-color: var(--color-action-primary);
  font-weight: var(--font-weight-medium);
}
.studio-tabs__tab:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.studio-tabs__panel { padding: var(--space-4) 0; }

/* Accordion */
.studio-accordion__section { border-bottom: 1px solid var(--color-border-default); }
.studio-accordion__heading { margin: 0; }
.studio-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--space-3) 0;
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.studio-accordion__trigger:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-accordion__indicator { color: var(--color-text-muted); font-size: var(--font-size-lg); }
.studio-accordion__panel { padding: 0 0 var(--space-3); color: var(--color-text-secondary); }

/* Stepper */
.studio-stepper { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; font-family: var(--font-family-body); }
.studio-stepper__step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.studio-stepper__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.studio-stepper__step--current { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.studio-stepper__step--current .studio-stepper__marker { background: var(--color-action-primary); color: var(--color-action-primaryText); }
.studio-stepper__step--complete .studio-stepper__marker { background: var(--color-status-success-subtle); color: var(--color-status-success-text); }
.studio-stepper__step--error .studio-stepper__marker { background: var(--color-status-danger-subtle); color: var(--color-status-danger-text); }

/* DescriptionList */
.studio-description-list { margin: 0; display: grid; gap: var(--space-2); font-family: var(--font-family-body); }
.studio-description-list__row { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--space-4); }
.studio-description-list__term { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.studio-description-list__value { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-sm); }

/* List */
.studio-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-family-body); }
.studio-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-default);
}
.studio-list__item--selectable { cursor: pointer; }
.studio-list__item--selectable:hover { background: var(--color-surface-sunken); }
.studio-list__item.is-selected { background: var(--color-surface-sunken); }
.studio-list__leading { flex: none; display: inline-flex; }
.studio-list__text { flex: 1; display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.studio-list__primary { color: var(--color-text-primary); font-size: var(--font-size-sm); }
.studio-list__secondary { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.studio-list__trailing { flex: none; }

/* Radio group */
.studio-radio-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-family-body); }
.studio-radio-group__legend { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); padding: 0; }
.studio-radio { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-primary); cursor: pointer; }
.studio-radio__input { accent-color: var(--color-action-primary); }

/* Switch */
.studio-switch { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-family-body); color: var(--color-text-primary); }
.studio-switch__control { position: relative; width: calc(var(--space-8) + var(--space-1)); height: var(--space-5, var(--space-4)); border-radius: var(--radius-full); border: 0; background: var(--color-border-strong); cursor: pointer; padding: 0; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard); }
.studio-switch__control.is-on { background: var(--color-action-primary); }
.studio-switch__control:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-switch__control:disabled { opacity: 0.55; cursor: not-allowed; }
.studio-switch__thumb { position: absolute; top: 50%; left: 2px; transform: translateY(-50%); width: calc(var(--space-4) - 2px); height: calc(var(--space-4) - 2px); border-radius: var(--radius-full); background: var(--color-surface-raised); transition: left var(--motion-duration-fast) var(--motion-easing-standard); }
.studio-switch__control.is-on .studio-switch__thumb { left: calc(100% - var(--space-4)); }

/* CopyField */
.studio-copy-field { display: flex; align-items: center; gap: var(--space-2); }
.studio-copy-field__value { flex: 1; font-family: var(--font-family-mono, monospace); }

/* ButtonGroup */
.studio-button-group { display: inline-flex; align-items: center; gap: var(--space-2); }
.studio-button-group--segmented { gap: 0; }
.studio-button-group--segmented > * + * { margin-left: -1px; }

/* ColorPicker */
.studio-color-picker__swatch { width: var(--space-8); height: var(--space-8); padding: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: none; cursor: pointer; }
.studio-color-picker__hex { flex: 1; font-family: var(--font-family-mono, monospace); }

/* Breadcrumbs */
.studio-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-family: var(--font-family-body); font-size: var(--font-size-sm); }
.studio-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.studio-breadcrumbs__sep { color: var(--color-text-muted); }

/* ActivityFeed */
.studio-activity-feed { list-style: none; margin: 0; padding: 0; font-family: var(--font-family-body); }
.studio-activity-feed__item { position: relative; display: flex; gap: var(--space-3); padding: 0 0 var(--space-4) var(--space-1); }
.studio-activity-feed__dot { flex: none; width: var(--space-2); height: var(--space-2); margin-top: calc(var(--space-1) / 2); border-radius: var(--radius-full); background: var(--color-action-primary); }
.studio-activity-feed__body { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.studio-activity-feed__summary { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.studio-activity-feed__actor { font-weight: var(--font-weight-medium); }
.studio-activity-feed__time { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* CardGrid */
.studio-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }
.studio-card-grid--min-8rem { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.studio-card-grid--min-10rem { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.studio-card-grid--min-12rem { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.studio-card-grid--min-14rem { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.studio-card-grid--min-16rem { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.studio-card-grid--min-18rem { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.studio-card-grid--min-20rem { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.studio-card-grid--min-24rem { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }

/* SearchInput */
.studio-search { display: flex; align-items: center; gap: var(--space-2); }
.studio-search__icon { color: var(--color-text-muted); display: inline-flex; }
.studio-search__input { flex: 1; }

/* Menu / dropdown / popover shared */
.studio-dropdown, .studio-popover, .studio-user-menu, .studio-combobox { position: relative; }
.studio-menu-backdrop { position: fixed; inset: 0; z-index: 1150; }
.studio-menu-panel {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 1200;
  min-width: 12rem; margin: 0; padding: var(--space-1); list-style: none;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); box-shadow: var(--elevation-medium);
}
.studio-menu-item {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer;
  padding: var(--space-2) var(--space-3); text-decoration: none;
  font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-primary);
}
.studio-menu-item:hover, .studio-menu-item.is-selected { background: var(--color-surface-sunken); }
.studio-menu-item--destructive { color: var(--color-status-danger-text); }

/* SSR dropdown menu (STUDIO-180) -- no-JS-safe: .studio-menu-ssr__list is a plain static stacked
   column by default (every item flows normally, always visible). studio-dropdown-menu.js adds
   [data-dropdown-enhanced] once it has hidden the list and taken over toggling, at which point it
   becomes an absolutely-positioned floating panel -- the same visual shape as .studio-menu-panel,
   mirrored rather than shared since the two classes must not start in the same (always-absolute)
   state. Items reuse .studio-menu-item directly, so visuals match StudioDropdownMenu's own items. */
.studio-menu-ssr { position: relative; display: inline-flex; }
.studio-menu-ssr__toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
.studio-menu-ssr__list { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1); }
.studio-menu-ssr__list[data-dropdown-enhanced] {
  position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: 1200;
  min-width: 12rem; background: var(--color-surface-raised); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); box-shadow: var(--elevation-medium);
}
.studio-menu-ssr__list[hidden] { display: none; }

.studio-popover__panel {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 1200;
  min-width: 14rem; padding: var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); box-shadow: var(--elevation-medium);
}

/* UserMenu — rebuilt on the native popover pattern (matching AppSwitcher/ADR-0057): position: fixed
   (not absolute), same reasoning as the app switcher's own panel — a top-layer popover is positioned
   against the viewport, not its DOM ancestor. */
.studio-user-menu { position: relative; display: inline-flex; font-family: var(--font-family-body); }
.studio-user-menu__trigger { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 0; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-md); color: var(--color-text-primary); font-family: var(--font-family-body); }
.studio-user-menu__trigger:hover { background: var(--color-surface-sunken); }
.studio-user-menu__trigger:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-user-menu__name { font-size: var(--font-size-sm); }
.studio-user-menu__panel {
  position: fixed; top: var(--space-10); right: var(--space-4); z-index: 1200;
  margin: 0; inset-inline-start: auto; inset-block-end: auto;
  min-width: 12rem; padding: var(--space-1);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg, var(--radius-md));
  box-shadow: var(--elevation-high, var(--elevation-medium));
  color: var(--color-text-primary);
}

/* NotificationBell (STUDIO-213) — a plain <a>, no popover/interactivity: static-SSR by
   construction, generalized from atlasafe's FAC-042 local link-style fork. */
.studio-notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.studio-notification-bell:hover { background: var(--color-surface-sunken); }
.studio-notification-bell:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-notification-bell__icon { display: inline-flex; line-height: 1; }
.studio-notification-bell__badge {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-status-danger-strong);
  color: var(--color-text-inverse);
  font-size: 0.6rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border: 1.5px solid var(--color-surface-raised);
}

/* MobileNav */
.studio-mobile-nav__toggle { background: transparent; border: 0; cursor: pointer; font-size: var(--font-size-lg); color: var(--color-text-primary); padding: var(--space-1); }
.studio-mobile-nav__overlay { justify-content: flex-start; align-items: stretch; padding: 0; }
.studio-mobile-nav__panel { background: var(--color-surface-raised); width: min(20rem, 80vw); height: 100%; padding: var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.studio-mobile-nav__header { display: flex; justify-content: flex-end; }

/* TagInput */
.studio-tag-input__box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.studio-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: calc(var(--space-1) / 2) var(--space-2); background: var(--color-surface-sunken); border-radius: var(--radius-full); font-size: var(--font-size-xs); color: var(--color-text-primary); font-family: var(--font-family-body); }
.studio-tag__remove { background: transparent; border: 0; cursor: pointer; color: var(--color-text-muted); line-height: 1; padding: 0; }
.studio-tag-input__field { flex: 1; min-width: 6rem; border: 0; outline: none; background: transparent; font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-primary); padding: var(--space-1) 0; }

/* DateRangePicker */
.studio-date-range { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-family-body); }
.studio-date-range__inputs { display: flex; align-items: center; gap: var(--space-2); }
.studio-date-range__to { color: var(--color-text-muted); }
.studio-date-range__presets { display: flex; gap: var(--space-1); flex-wrap: wrap; }

/* FileUpload */
.studio-file-upload__zone { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; text-align: center; font-family: var(--font-family-body); }
.studio-file-upload__zone:hover { background: var(--color-surface-sunken); }
.studio-file-upload__prompt { color: var(--color-text-primary); font-size: var(--font-size-sm); }
.studio-file-upload__hint { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* EntityStatusSelect */
.studio-entity-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.studio-entity-status__select { width: auto; }

/* FilterBar */
/* FilterBar (STUDIO-179) -- progressive disclosure: an "Add filter" menu reveals one filter
   control at a time; applied filters render as removable chips. Row 1: optional Search (spans the
   row) + Add filter + Apply, inline. Row 2: whichever single filter control is currently being
   added. studio-filter-bar.js reveals one control at a time via the "Add filter" menu and allows
   only one in-progress at once; without JS every inactive control is visible in row 2 and Apply
   submits them all. Generalized from atlasafe's own local FAC-042 filter bar. */
.studio-filter-bar { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.studio-filter-bar__form { display: flex; flex-direction: column; gap: var(--space-3); }

/* Row 1: Search (spans the row, when present) + "Add filter" + Apply, all inline. Row 2
   (.studio-filter-bar__controls, below) holds only whichever single filter control is currently
   being added -- kept out of row 1 so a revealed control always appears BELOW row 1, never crowded
   next to it. */
.studio-filter-bar__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.studio-filter-bar__search { flex: 1 1 auto; min-width: 14rem; }

/* Add-filter button + its popover menu. */
.studio-filter-bar__add { position: relative; display: flex; align-items: flex-end; }
.studio-filter-bar__menu {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 20;
  min-width: 12rem; display: flex; flex-direction: column; padding: var(--space-1);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); box-shadow: var(--elevation-medium);
}
.studio-filter-bar__menu[hidden] { display: none; }
.studio-filter-bar__menu-item {
  appearance: none; border: none; background: none; text-align: left;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-family: var(--font-family-body); font-size: var(--font-size-base);
  color: var(--color-text-primary); cursor: pointer;
}
.studio-filter-bar__menu-item:hover, .studio-filter-bar__menu-item:focus-visible { background: var(--color-surface-sunken); outline: none; }

.studio-filter-bar__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.studio-filter-bar__control { flex: 0 1 14rem; }
.studio-filter-bar__control[hidden] { display: none; }

/* A control revealing more than one input (e.g. a date range's from/to) lays them out side by side
   within its own control slot. */
.studio-filter-bar__control-group { display: flex; gap: var(--space-2); }

/* Applied-filter chips row. */
.studio-filter-bar__applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.studio-filter-bar__applied-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.studio-filter-bar__chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  background: var(--color-surface-sunken); border: 1px solid var(--color-border-default);
  border-radius: 999px; font-size: var(--font-size-sm); color: var(--color-text-primary);
}
.studio-filter-bar__chip-label { color: var(--color-text-secondary); }

/* Chip-remove and clear-all render as <a> on GET-form pages -- both share this reset so a <button>
   (an interactive-render-mode caller re-querying without navigation) matches the <a> styling below. */
.studio-filter-bar__chip-remove, .studio-filter-bar__clear { appearance: none; border: none; background: none; padding: 0; font-family: inherit; cursor: pointer; }
.studio-filter-bar__chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 999px; text-decoration: none;
  font-size: var(--font-size-base); line-height: 1; color: var(--color-text-muted);
}
.studio-filter-bar__chip-remove:hover, .studio-filter-bar__chip-remove:focus-visible { background: var(--color-border-default); color: var(--color-text-primary); outline: none; }
.studio-filter-bar__clear { margin-left: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-link); }

/* Account form (STUDIO-168) */
.studio-account-form { display: flex; flex-direction: column; gap: var(--space-6); }
.studio-account-form__section { display: flex; flex-direction: column; gap: var(--space-4); }
.studio-account-form__heading { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.studio-account-form__readonly { margin: 0; font-size: var(--font-size-base); color: var(--color-text-secondary); }
.studio-account-form__preference-group { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; border: 0; margin: 0; }
.studio-account-form__preference-legend { padding: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.studio-account-form__preference-toggle { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-base); color: var(--color-text-primary); }

/* Sheet */
.studio-sheet__overlay { justify-content: flex-end; align-items: stretch; padding: 0; }
/* spacing-lint-ok: same reasoning as .studio-modal -- its own header/body/footer children carry padding. */
.studio-sheet { display: flex; flex-direction: column; width: min(32rem, 100vw); height: 100%; background: var(--color-surface-raised); box-shadow: var(--elevation-high, var(--elevation-medium)); outline: none; }
.studio-sheet__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-default); }
.studio-sheet__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.studio-sheet__body { flex: 1; overflow-y: auto; padding: var(--space-6); }
.studio-sheet__footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border-default); background: var(--color-surface-raised); }

/* Calendar */
.studio-calendar { font-family: var(--font-family-body); }
.studio-calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.studio-calendar__title { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.studio-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.studio-calendar__weekday { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-muted); padding: var(--space-1) 0; }
.studio-calendar__cell { min-height: 4rem; padding: var(--space-1); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.studio-calendar__cell.is-empty { border-color: transparent; }
.studio-calendar__daynum { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.studio-calendar__event { font-size: var(--font-size-xs); text-decoration: none; }

/* Kanban */
.studio-kanban { display: flex; gap: var(--space-4); overflow-x: auto; font-family: var(--font-family-body); }
.studio-kanban__column { flex: 0 0 16rem; display: flex; flex-direction: column; gap: var(--space-2); }
.studio-kanban__column-header { display: flex; align-items: center; justify-content: space-between; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.studio-kanban__count { font-size: var(--font-size-xs); color: var(--color-text-muted); background: var(--color-surface-sunken); border-radius: var(--radius-full); padding: 0 var(--space-2); }
.studio-kanban__cards { display: flex; flex-direction: column; gap: var(--space-2); }
.studio-kanban__card { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); align-items: flex-start; text-align: left; width: 100%; padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); cursor: pointer; }
.studio-kanban__card:hover { box-shadow: var(--elevation-low); }
.studio-kanban__card-title { color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.studio-kanban__card-subtitle { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.studio-kanban__empty { color: var(--color-text-muted); font-size: var(--font-size-xs); padding: var(--space-2); }

/* CommentThread */
.studio-comment-thread { display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-family-body); }
.studio-comment-thread__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.studio-comment__meta { display: flex; align-items: baseline; gap: var(--space-2); }
.studio-comment__author { font-weight: var(--font-weight-medium); color: var(--color-text-primary); font-size: var(--font-size-sm); }
.studio-comment__when { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.studio-comment__body { margin: calc(var(--space-1) / 2) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.studio-comment-thread__composer { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; }
.studio-comment-thread__composer textarea { width: 100%; }

/* FileList */
.studio-file-list__type { margin-left: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.studio-file-list__actions { display: flex; gap: var(--space-1); justify-content: flex-end; }

/* ImportWizard */
.studio-import-wizard { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-family-body); }
.studio-import-wizard__nav { display: flex; justify-content: space-between; gap: var(--space-2); }

/* SignaturePad */
.studio-signature-pad { display: inline-flex; flex-direction: column; gap: var(--space-2); }
.studio-signature-pad__canvas { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-raised); color: var(--color-text-primary); touch-action: none; }
.studio-signature-pad__actions { display: flex; justify-content: flex-end; }

/* Icon */
.studio-icon { flex: none; display: inline-block; }
.studio-icon--sm { width: var(--space-4); height: var(--space-4); }
.studio-icon--md { width: var(--space-5, var(--space-4)); height: var(--space-5, var(--space-4)); }
.studio-icon--lg { width: var(--space-6); height: var(--space-6); }

/* Skeleton */
.studio-skeleton { background: var(--color-surface-sunken); border-radius: var(--radius-md); animation: studio-skeleton-pulse 1.4s ease-in-out infinite; }
.studio-skeleton--text { width: 100%; height: 0.9em; border-radius: var(--radius-sm, var(--radius-md)); }
.studio-skeleton--circle { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); }
.studio-skeleton--block { width: 100%; height: var(--space-10); }
@keyframes studio-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* STUDIO-235: fixed override palette for StudioSkeleton's Width/Height parameters -- not an inline
   style="width:...;height:..." (silently dropped by this platform's strict style-src 'self' CSP,
   same bug class as the bar/segment/fill fixes above; a custom-property inline style is equally
   blocked here, confirmed via StudioCardGrid's own identical fix, so there is no inline-style
   escape hatch to fall back to). */
.studio-skeleton--w-25p { width: 25%; }
.studio-skeleton--w-33p { width: 33%; }
.studio-skeleton--w-50p { width: 50%; }
.studio-skeleton--w-66p { width: 66%; }
.studio-skeleton--w-75p { width: 75%; }
.studio-skeleton--w-100p { width: 100%; }
.studio-skeleton--w-1-5r { width: 1.5rem; }
.studio-skeleton--w-2r { width: 2rem; }
.studio-skeleton--w-2-5r { width: 2.5rem; }
.studio-skeleton--w-3r { width: 3rem; }
.studio-skeleton--w-4r { width: 4rem; }
.studio-skeleton--h-1r { height: 1rem; }
.studio-skeleton--h-1-25r { height: 1.25rem; }
.studio-skeleton--h-1-5r { height: 1.5rem; }
.studio-skeleton--h-2r { height: 2rem; }
.studio-skeleton--h-2-5r { height: 2.5rem; }
.studio-skeleton--h-3r { height: 3rem; }
.studio-skeleton--h-4r { height: 4rem; }
.studio-skeleton--h-6r { height: 6rem; }
.studio-skeleton--h-8r { height: 8rem; }

/* ---------- AppSwitcher (waffle) — STUDIO-221 / ADR-0057 ----------
   Native `popover`, so the user agent owns show/hide, Escape, light dismiss and top-layer
   rendering. No JS and no Blazor circuit is involved, which is what makes this work under static
   SSR. `position: fixed` (not absolute) because a top-layer popover is positioned against the
   viewport, not its DOM ancestor — that is also why the panel escapes the topbar's stacking
   context without a z-index war. */

.studio-app-switcher { position: relative; display: inline-flex; font-family: var(--font-family-body); }

.studio-app-switcher__trigger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2); background: transparent; border: 0; border-radius: var(--radius-md);
  cursor: pointer; color: var(--color-text-primary);
}
.studio-app-switcher__trigger:hover { background: var(--color-surface-sunken); }
.studio-app-switcher__trigger:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.studio-app-switcher__waffle {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space-1) / 2);
  width: var(--space-5, var(--space-4)); height: var(--space-5, var(--space-4));
}
.studio-app-switcher__waffle-dot { background: currentColor; border-radius: var(--radius-sm, var(--radius-md)); }

.studio-app-switcher__panel {
  position: fixed; top: var(--space-10); right: var(--space-4); z-index: 1200;
  margin: 0; inset-inline-start: auto; inset-block-end: auto;
  width: min(24rem, calc(100vw - var(--space-8)));
  /* Many apps: the grid wraps to a second column when there is room, then the panel itself
     scrolls. Decided, not accidental — the trigger stays put and the topbar never grows. */
  max-height: min(28rem, calc(100vh - var(--space-10) - var(--space-8)));
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg, var(--radius-md));
  box-shadow: var(--elevation-high, var(--elevation-medium));
  color: var(--color-text-primary);
}

.studio-app-switcher__heading {
  margin: 0 0 var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary);
}
.studio-app-switcher__empty { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.studio-app-switcher__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-2); list-style: none; margin: 0; padding: 0;
}

.studio-app-switcher__app {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text-primary);
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.studio-app-switcher__app:hover { background: var(--color-surface-sunken); }
.studio-app-switcher__app:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.studio-app-switcher__app-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-8); height: var(--space-8); border-radius: var(--radius-md);
  background: var(--color-surface-sunken); color: var(--color-text-primary);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
}
.studio-app-switcher__app-logo { width: var(--space-5, var(--space-4)); height: var(--space-5, var(--space-4)); }
.studio-app-switcher__app-text { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); min-width: 0; }
.studio-app-switcher__app-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.studio-app-switcher__app-note {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
}

/* Not entitled: shown, distinguished, still clickable, never disabled. The distinction is a muted
   TEXT token + a lock icon + the words "No access" — NOT `opacity`, which multiplies against the
   panel background and silently breaks the 4.5:1 ratio the A-gate battery checks (STUDIO-119); that
   is the single easiest way to fail this state. Colour is never the only cue. */
.studio-app-switcher__app--locked .studio-app-switcher__app-name { color: var(--color-text-secondary); }
.studio-app-switcher__app--locked .studio-app-switcher__app-mark {
  background: var(--color-surface-sunken); color: var(--color-text-secondary);
  border: 1px dashed var(--color-border-default);
}

/* Graceful degradation: a user agent without the popover API ignores the `popover` attribute
   entirely, so the panel is simply always rendered. Drop it back into normal flow there so the app
   list stays reachable inline instead of floating over the page — the waffle button does nothing in
   that browser, but nothing is ever hidden behind it. */
@supports not selector(:popover-open) {
  .studio-app-switcher__panel {
    position: static; max-height: none; width: auto; overflow: visible;
    border: 0; box-shadow: none; padding: 0;
  }
  .studio-app-switcher__trigger { display: none; }
  .studio-user-menu__panel {
    position: static; min-width: auto; overflow: visible;
    border: 0; box-shadow: none; padding: 0;
  }
  .studio-user-menu__trigger { display: none; }
  .studio-org-switcher__panel {
    position: static; max-height: none; width: auto; overflow: visible;
    border: 0; box-shadow: none; padding: 0;
  }
  .studio-org-switcher__trigger { display: none; }
}

/* ---------- OrgSwitcher — ATRIUM-017 ----------
   Same native-popover reasoning as AppSwitcher/UserMenu above. */

.studio-org-switcher { position: relative; display: inline-flex; font-family: var(--font-family-body); }

.studio-org-switcher__trigger {
  display: inline-flex; align-items: center; gap: var(--space-1);
  max-width: 12rem; padding: var(--space-1) var(--space-2);
  background: transparent; border: 0; border-radius: var(--radius-md);
  cursor: pointer; color: var(--color-text-primary); font-family: var(--font-family-body);
}
.studio-org-switcher__trigger:hover { background: var(--color-surface-sunken); }
.studio-org-switcher__trigger:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-org-switcher__current {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm);
}
.studio-org-switcher__chevron { flex: none; display: inline-flex; color: var(--color-text-secondary); }

.studio-org-switcher__panel {
  position: fixed; top: var(--space-10); z-index: 1200;
  margin: 0; inset-inline-end: auto; inset-block-end: auto;
  min-width: 14rem; max-width: min(20rem, calc(100vw - var(--space-8)));
  max-height: min(24rem, calc(100vh - var(--space-10) - var(--space-8)));
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg, var(--radius-md));
  box-shadow: var(--elevation-high, var(--elevation-medium));
  color: var(--color-text-primary);
}
.studio-org-switcher__heading {
  margin: 0 0 var(--space-2) var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary);
}
.studio-org-switcher__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.studio-org-switcher__org {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text-primary); font-size: var(--font-size-sm);
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.studio-org-switcher__org:hover { background: var(--color-surface-sunken); }
.studio-org-switcher__org:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.studio-org-switcher__org--current { font-weight: var(--font-weight-semibold); }
.studio-org-switcher__org-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-org-switcher__org-check { flex: none; display: inline-flex; color: var(--color-status-success-text, var(--color-text-primary)); }

/* ---------- ConsentEditor / ConsentPrompt — STUDIO-343 ----------
   Static-SSR by construction: no @onclick, no client JS. Both are plain <form method="post">
   submissions to a product-local endpoint (Studio.Consent's MapStudioConsentEndpoints()), the same
   posture studioatrium's own AnalyticsConsentPromptEndpoints established (ATRIUM-044). */

.studio-consent-editor {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
}
.studio-consent-editor__status { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.studio-consent-editor__form { display: flex; flex-direction: column; gap: var(--space-2); }
.studio-consent-editor__actions { display: flex; gap: var(--space-2); }

.studio-consent-prompt {
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: 32rem;
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
}
.studio-consent-prompt__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.studio-consent-prompt__body { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.studio-consent-prompt__form { display: flex; flex-direction: column; gap: var(--space-2); }
.studio-consent-prompt__actions { display: flex; gap: var(--space-2); }
.studio-consent-prompt__footnote { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.studio-consent-prompt__footnote a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- CrossAppHint — STUDIO-294 ----------
   Quiet, entity-contextual inline cross-sell hint. Deliberately the MUTED surface/text tokens, not a
   status color — this is not a status message (contrast Banner, which is). Dismissal is progressive
   enhancement (studio-cross-app-hint.js); `hint.hidden = true` is what the script toggles, so no CSS
   rule needs to know about the dismissed state. */

.studio-cross-app-hint {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.studio-cross-app-hint__icon { flex: none; display: inline-flex; margin-top: calc(var(--space-1) / 2); color: var(--color-text-secondary); }
.studio-cross-app-hint__text { flex: 1; margin: 0; }
.studio-cross-app-hint__action { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; margin-left: var(--space-1); }
.studio-cross-app-hint__action:hover { color: var(--color-action-primaryHover); }
.studio-cross-app-hint__action:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-sm, var(--radius-md)); }
.studio-cross-app-hint__dismiss {
  flex: none;
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg); line-height: 1;
  padding: 0 var(--space-1);
}
.studio-cross-app-hint__dismiss:hover { color: var(--color-text-primary); }
.studio-cross-app-hint__dismiss:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }