/* ============================================================================
   MusicWire Portal — Component Layer (Portal-owned, token-driven)
   ----------------------------------------------------------------------------
   The single home for reusable component styling. Every value here references a
   token from tokens.css (docs/ui/STYLEGUIDE.md §4); no raw hex/px, no Webflow
   residue. Each React primitive in components/ui/ owns exactly one contract
   below. Change a component's look HERE and it cascades to every usage.

   Naming: `mw-<component>` / `mw-<component>--<variant>` / `is-<state>`.
   The `mw-` prefix is deliberately distinct from the Webflow export's
   page-named classes (release_card_wrap, roster_sort_pill, …) and from the
   `u-*` utilities, so this clean layer never collides with the legacy monolith
   during the gradual migration.

   Load order (index.css): tokens.css → components.css → app-overrides.css.
   app-overrides can still win where a route hasn't migrated yet; new work
   builds on the mw-* contracts and drains the overrides over time.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Button — mw-btn
   Tones map to the --_theme---button-*--* families, so light/dark inversion
   (brand fill in light, accent fill in dark) is automatic. Owns: <Button>.
   --------------------------------------------------------------------------- */
.mw-btn {
  --_btn-border: var(--_theme---button-primary--border);
  --_btn-bg: var(--_theme---button-primary--background);
  --_btn-text: var(--_theme---button-primary--text);
  --_btn-border-hover: var(--_theme---button-primary--border-hover);
  --_btn-bg-hover: var(--_theme---button-primary--background-hover);
  --_btn-text-hover: var(--_theme---button-primary--text-hover);
  --_btn-border-focus: var(--field-focus-border);
  --_btn-bg-focus: var(--_btn-bg);
  --_btn-text-focus: var(--_btn-text);

  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  height: var(--control-height--compact);
  align-items: center;
  justify-content: center;
  gap: var(--size--0-5rem);
  padding: var(--size--0rem) var(--size--0-75rem);
  border: var(--border-width--main) solid var(--_btn-border);
  border-radius: var(--radius--main);
  background-color: var(--_btn-bg);
  color: var(--_btn-text);
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--_typography---font-size--text-small);
  font-weight: var(--_typography---font--secondary-regular);
  letter-spacing: var(--_typography---letter-spacing--0em);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.mw-btn:not(:disabled):not(.is-disabled):hover {
  border-color: var(--_btn-border-hover);
  background-color: var(--_btn-bg-hover);
  color: var(--_btn-text-hover);
}

.mw-btn:focus-visible {
  border-color: var(--_btn-border-focus);
  background-color: var(--_btn-bg-focus);
  color: var(--_btn-text-focus);
  outline: 0;
}

.mw-btn--secondary {
  --_btn-border: var(--_theme---button-secondary--border);
  --_btn-bg: var(--_theme---button-secondary--background);
  --_btn-text: var(--_theme---button-secondary--text);
  --_btn-border-hover: var(--_theme---button-secondary--border-hover);
  --_btn-bg-hover: var(--_theme---button-secondary--background-hover);
  --_btn-text-hover: var(--_theme---button-secondary--text-hover);
}

.mw-btn--ghost {
  --_btn-border: var(--field-rest-border);
  --_btn-bg: var(--swatch--transparent);
  --_btn-text: var(--_theme---text);
  --_btn-border-hover: var(--field-hover-border);
  --_btn-bg-hover: var(--swatch--transparent);
  --_btn-text-hover: var(--_theme---text);
  --_btn-bg-focus: var(--swatch--transparent);
  --_btn-text-focus: var(--_theme---text);
}

.mw-btn--text,
.mw-btn--transparent {
  --_btn-border: var(--_theme---button-transparent--border);
  --_btn-bg: var(--_theme---button-transparent--background);
  --_btn-text: var(--_theme---button-transparent--text);
  --_btn-border-hover: var(--_theme---button-transparent--border-hover);
  --_btn-bg-hover: var(--_theme---button-transparent--background-hover);
  --_btn-text-hover: var(--_theme---button-transparent--text-hover);
  --_btn-border-focus: var(--swatch--transparent);

  padding-right: var(--size--0-5rem);
  padding-left: var(--size--0-5rem);
}

.mw-btn--text:not(:disabled):not(.is-disabled):hover,
.mw-btn--text:focus-visible,
.mw-btn--transparent:not(:disabled):not(.is-disabled):hover,
.mw-btn--transparent:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--size--0-25rem);
}

.mw-btn--danger {
  --_btn-border: var(--sem-error--border);
  --_btn-bg: var(--sem-error--fill);
  --_btn-text: var(--sem-error--text);
  --_btn-border-hover: var(--sem-error--text);
  --_btn-bg-hover: color-mix(in srgb, var(--sem-error--fill) 84%, var(--sem-error--text));
  --_btn-text-hover: var(--sem-error--text);
  --_btn-border-focus: var(--sem-error--text);
}

.mw-btn--rect {
  border-radius: var(--radius--small);
}

.mw-btn--round {
  width: var(--control-height--compact);
  min-width: var(--control-height--compact);
  padding: var(--size--0rem);
  border-radius: var(--radius--round);
  flex: none;
}

.mw-btn--round .mw-btn__icon svg {
  width: var(--icon-size--main);
  height: var(--icon-size--main);
}

.mw-btn--topbar {
  font-family: var(--_typography---font--primary-family);
  font-weight: var(--_typography---font--primary-regular);
}

.mw-btn.is-full {
  width: 100%;
}

.mw-btn:disabled,
.mw-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mw-btn.is-loading {
  cursor: progress;
}

.mw-btn__spinner {
  width: var(--size--1rem);
  height: var(--size--1rem);
  border-radius: var(--radius--round);
  border: var(--border-width--main) solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  animation: mw-spin 0.7s linear infinite;
}

.mw-btn__icon {
  display: inline-flex;
  align-items: center;
}

.mw-btn__icon svg {
  width: var(--_btn-icon-size, var(--icon-size--main));
  height: var(--_btn-icon-size, var(--icon-size--main));
}

@keyframes mw-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mw-btn {
    transition: none;
  }
  .mw-btn__spinner {
    animation-duration: 1.6s;
  }
}

/* ---------------------------------------------------------------------------
   Mode toggle — mw-mode-toggle
   A one-of-N field choice. It deliberately keeps separate option boundaries
   instead of adopting the filled rail used by sort groups and steppers.
   Owns: <ModeToggle>.
   --------------------------------------------------------------------------- */
.mw-mode-toggle {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--_typography---font-size--text-small);
  letter-spacing: var(--_typography---letter-spacing--0em);
}

.mw-mode-toggle__options {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size--0-25rem);
}

.mw-mode-toggle__option {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--_theme---text);
  cursor: pointer;
}

.mw-mode-toggle__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.mw-mode-toggle__label {
  display: flex;
  min-height: var(--size--2-5rem);
  align-items: center;
  justify-content: center;
  padding: var(--size--0-5rem) var(--size--1rem);
  border: var(--border-width--main) solid var(--field-rest-border);
  border-radius: var(--radius--small);
  background: var(--_theme---background);
  color: inherit;
  line-height: var(--_typography---line-height--1-3);
  text-align: center;
}

.mw-mode-toggle__option:hover
  .mw-mode-toggle__input:not(:disabled)
  + .mw-mode-toggle__label {
  border-color: var(--field-hover-border);
}

.mw-mode-toggle__input:focus-visible + .mw-mode-toggle__label {
  outline: var(--focus--width) solid var(--focus--ring);
  outline-offset: var(--focus--offset-inner);
}

.mw-mode-toggle__input:checked + .mw-mode-toggle__label {
  border-color: var(--sem-primary--text);
}

.mw-mode-toggle__option.is-disabled {
  color: var(--field-disabled-text);
  cursor: not-allowed;
}

.mw-mode-toggle__input:disabled + .mw-mode-toggle__label {
  border-color: var(--field-rest-border);
  background: var(--_theme---background);
}

@media (max-width: 48rem) {
  .mw-mode-toggle__options {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Control pill — mw-control-pill
   A content-fit segmented rail whose route keeps its native behavior. The
   group owns the only perimeter; children may be disclosure buttons or real
   router links. Owns: <ControlPillGroup>, <ControlPill>, <CountBadge>.
   --------------------------------------------------------------------------- */
.mw-control-pill-group {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  padding: var(--size--0-125rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: var(--border-width--main) solid var(--_theme---control-border);
  border-radius: var(--radius--round);
  background-color: var(--_theme---background);
  scrollbar-width: thin;
}

.mw-control-pill {
  appearance: none;
  display: inline-flex;
  min-height: var(--size--2rem);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--size--0-5rem);
  padding: var(--size--0-5rem) var(--size--0-75rem);
  border: 0;
  border-radius: var(--radius--round);
  outline: var(--focus--width) solid transparent;
  outline-offset: var(--focus--offset-inner);
  background-color: transparent;
  color: color-mix(in srgb, var(--_theme---text) 68%, transparent);
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--_typography---font-size--text-small);
  font-style: normal;
  font-weight: var(--_typography---font--secondary-regular);
  letter-spacing: var(--_typography---letter-spacing--0em);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mw-control-pill:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--_theme---surface-hover);
  color: var(--_theme---text);
}

.mw-control-pill:focus-visible {
  outline-color: currentColor;
}

.mw-control-pill.is-selected,
.mw-control-pill[aria-expanded="true"] {
  background-color: var(--sem-secondary--fill);
  color: var(--sem-secondary--text);
}

.mw-control-pill.is-danger {
  color: var(--sem-error--text);
}

.mw-control-pill.is-danger:hover:not(:disabled):not([aria-disabled="true"]),
.mw-control-pill.is-danger.is-selected,
.mw-control-pill.is-danger[aria-expanded="true"] {
  background-color: var(--sem-error--fill);
  color: var(--sem-error--text);
}

.mw-control-pill.is-success {
  background-color: var(--sem-success--fill);
  color: var(--sem-success--text);
}

.mw-control-pill.is-success:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(
    in srgb,
    var(--sem-success--fill) 84%,
    var(--sem-success--text)
  );
  color: var(--sem-success--text);
}

.mw-control-pill:disabled,
.mw-control-pill[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.mw-control-pill__icon {
  display: inline-flex;
  width: calc(var(--size--0-75rem) + var(--size--0-125rem));
  height: calc(var(--size--0-75rem) + var(--size--0-125rem));
  flex: none;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.mw-control-pill__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mw-control-pill__label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.mw-count-badge {
  display: inline-flex;
  min-width: var(--size--1-25rem);
  min-height: var(--size--1-25rem);
  align-items: center;
  justify-content: center;
  padding: 0 var(--size--0-25rem);
  border-radius: var(--radius--round);
  background-color: color-mix(in srgb, currentColor 9%, transparent);
  color: inherit;
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--size--0-75rem);
  font-weight: var(--_typography---font--secondary-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Tab head — mw-tab-head
   A full-width switcher only inside its bounded peer-panel workspace. Two to
   four short labels share equal columns; the local scroller absorbs narrow
   widths without wrapping or creating page-level overflow. Owns: <TabHead>.
   --------------------------------------------------------------------------- */
.mw-tab-head-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--size--0-125rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.mw-tab-head {
  display: grid;
  width: 100%;
  min-width: max-content;
  grid-auto-flow: column;
  grid-auto-columns: minmax(5.25rem, 1fr);
  align-items: stretch;
  gap: 0;
  padding: var(--size--0-125rem);
  border: var(--border-width--main) solid var(--_theme---control-border);
  border-radius: var(--radius--round);
  background-color: var(--_theme---background);
}

.mw-tab-head__tab {
  appearance: none;
  display: inline-flex;
  width: 100%;
  min-height: var(--size--2rem);
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: var(--size--0-5rem) var(--size--0-75rem);
  border: 0;
  border-radius: var(--radius--round);
  outline: var(--focus--width) solid transparent;
  outline-offset: var(--focus--offset-inner);
  background-color: transparent;
  color: color-mix(in srgb, var(--_theme---text) 68%, transparent);
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--_typography---font-size--text-small);
  font-style: normal;
  font-weight: var(--_typography---font--secondary-regular);
  letter-spacing: var(--_typography---letter-spacing--0em);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.mw-tab-head__tab:hover:not(:disabled) {
  background-color: var(--_theme---surface-hover);
  color: var(--_theme---text);
}

.mw-tab-head__tab:focus-visible {
  outline-color: currentColor;
}

.mw-tab-head__tab[aria-selected="true"] {
  background-color: var(--sem-secondary--fill);
  color: var(--sem-secondary--text);
}

.mw-tab-head__tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mw-tab-head__label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--size--0-25rem);
}

.mw-tab-panel[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Callout — mw-callout
   A page- or section-level message strip. Tone and fill mode are independent;
   field validation remains inline and does not use this primitive.
   Owns: <Callout>.
   --------------------------------------------------------------------------- */
.mw-callout {
  --_fill: var(--sem-secondary--fill);
  --_text: var(--sem-secondary--text);
  --_border: var(--sem-secondary--border);
  display: flex;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-items: flex-start;
  gap: var(--_spacing---space--2);
  padding-block: var(--_spacing---space--2);
  padding-inline: var(--_spacing---space--3);
  border: 0;
  border-inline-start: var(--border-width--bar) solid var(--_border);
  border-start-end-radius: var(--radius--small);
  border-end-end-radius: var(--radius--small);
  background-color: var(--_fill);
  color: var(--_text);
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--_typography---font-size--text-small);
  font-weight: var(--_typography---font--secondary-regular);
  letter-spacing: var(--_typography---letter-spacing--0em);
  line-height: var(--_typography---line-height--1-5);
}

.mw-callout--primary {
  --_fill: var(--sem-primary--fill);
  --_text: var(--sem-primary--text);
  --_border: var(--sem-primary--border);
}

.mw-callout--success {
  --_fill: var(--sem-success--fill);
  --_text: var(--sem-success--text);
  --_border: var(--sem-success--border);
}

.mw-callout--warning {
  --_fill: var(--sem-warning--fill);
  --_text: var(--sem-warning--text);
  --_border: var(--sem-warning--border);
}

.mw-callout--error {
  --_fill: var(--sem-error--fill);
  --_text: var(--sem-error--text);
  --_border: var(--sem-error--border);
}

.mw-callout--ghost {
  --_fill: var(--swatch--transparent);
}

.mw-callout__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-block-start: var(--size--0-125rem);
  font-size: var(--size--1-25rem);
}

.mw-callout__icon svg {
  width: 1em;
  height: 1em;
}

.mw-callout__content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--size--0-25rem);
}

.mw-callout__title {
  font-weight: var(--_typography---font--secondary-medium);
  line-height: var(--_typography---line-height--1-3);
}

.mw-callout__body {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Status pill — mw-status
   One tone system replacing dash_status_chip / history_status_pill /
   ecomm_orders_status / ecomm_discount_status_pill. Each tone carries explicit
   fill/text tokens (tokens.css §Status-pill surfaces) — solid + contrast-correct
   in both themes. Lifecycle status is tint-only; borders and dots belong to
   other primitive contracts.
   Owns: <StatusPill>.
   --------------------------------------------------------------------------- */
.mw-status {
  /* Each tone carries explicit fill/text (tokens.css §semantic) and defaults to secondary. */
  --_fill: var(--sem-secondary--fill);
  --_text: var(--sem-secondary--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0.2rem 0.65rem;
  border: 0;
  border-radius: var(--radius--round);
  background-color: var(--_fill);
  color: var(--_text);
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--_typography---font-size--text-small);
  line-height: 1;
  white-space: nowrap;
}

.mw-status--success {
  --_fill: var(--sem-success--fill);
  --_text: var(--sem-success--text);
}

.mw-status--warning {
  --_fill: var(--sem-warning--fill);
  --_text: var(--sem-warning--text);
}

.mw-status--error {
  --_fill: var(--sem-error--fill);
  --_text: var(--sem-error--text);
}

/* ---------------------------------------------------------------------------
   Tag — mw-tag
   Passive descriptive metadata for identity, assignment, authorization, and
   planning priority. Tags share the semantic tone set without adopting the
   round, borderless lifecycle anatomy owned by StatusPill.
   Owns: <Tag>.
   --------------------------------------------------------------------------- */
.mw-tag {
  --_fill: var(--sem-secondary--fill);
  --_text: var(--sem-secondary--text);
  --_border: var(--sem-secondary--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size--1-5rem);
  padding: var(--size--0-25rem) var(--size--0-5rem);
  border: var(--border-width--main) solid var(--_border);
  border-radius: var(--radius--x-small);
  background-color: var(--_fill);
  color: var(--_text);
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--_typography---font-size--text-small);
  line-height: 1;
  white-space: nowrap;
}

.mw-tag--primary {
  --_fill: var(--sem-primary--fill);
  --_text: var(--sem-primary--text);
  --_border: var(--sem-primary--border);
}

.mw-tag--success {
  --_fill: var(--sem-success--fill);
  --_text: var(--sem-success--text);
  --_border: var(--sem-success--border);
}

.mw-tag--warning {
  --_fill: var(--sem-warning--fill);
  --_text: var(--sem-warning--text);
  --_border: var(--sem-warning--border);
}

.mw-tag--error {
  --_fill: var(--sem-error--fill);
  --_text: var(--sem-error--text);
  --_border: var(--sem-error--border);
}

/* ---------------------------------------------------------------------------
   Search field — mw-search
   Clean controlled search input. Semantic twin of search_compnt_wrap without
   the w-form/w-input/w-button Webflow scaffolding. Owns: <SearchField>.
   --------------------------------------------------------------------------- */
.mw-search {
  display: inline-flex;
  align-items: center;
  gap: var(--size--0-5rem);
  /* One size — matched to the live search_compnt_wrap control-bar box (12rem × 2.2rem),
     locked 2026-07-09 so adoption is pixel-for-pixel behavior-neutral. The former
     default/sm pair was speculative and matched nothing shipped. */
  width: 12rem;
  height: 2.2rem;
  padding: 0 var(--size--1rem);
  border: var(--border-width--main) solid var(--_theme---control-border);
  border-radius: var(--radius--round);
  background-color: var(--_theme---background);
  color: color-mix(in srgb, var(--_theme---text) 60%, transparent);
}

/* The table-search focus contract is intentionally flat: typing and the caret
   provide the state cue without changing chrome or geometry. */

.mw-search__icon {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.mw-search__icon svg {
  width: 1rem;
  height: 1rem;
}

.mw-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--_theme---text);
  font-family: var(--_typography---font--secondary-family);
  font-size: var(--_typography---font-size--text-small);
  line-height: 1.2;
}

.mw-search__input::placeholder {
  color: color-mix(in srgb, var(--_theme---text) 45%, transparent);
}

.mw-search__input:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------
   Dialog — mw-dialog
   Portaled modal shell with one header/body/footer anatomy. Behavior (focus
   trap/restore, Escape, outside dismissal, scroll lock) lives in PortalDialog.
   --------------------------------------------------------------------------- */
.mw-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-index--dialog);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: var(--site--gutter);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--_theme---background) 52%, transparent);
  -webkit-backdrop-filter: blur(var(--size--0-125rem));
  backdrop-filter: blur(var(--size--0-125rem));
}

.mw-dialog__panel {
  --_dialog-width: 28rem;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--size--1rem);
  width: min(var(--_dialog-width), calc(100vw - (var(--site--gutter) * 2)));
  max-height: calc(100dvh - (var(--site--gutter) * 2));
  min-height: 0;
  padding: var(--size--1rem);
  overflow: hidden;
  border: var(--border-width--main) solid var(--_theme---border);
  border-radius: var(--radius--main);
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  box-shadow: var(--shadow--3);
}

.mw-dialog__panel--md {
  --_dialog-width: 40rem;
}

.mw-dialog__panel--lg {
  --_dialog-width: 52rem;
}

.mw-dialog__panel--xl {
  --_dialog-width: 74rem;
}

.mw-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size--1rem);
  width: 100%;
  flex: none;
}

.mw-dialog__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mw-dialog__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--mw-row-h);
  width: var(--mw-row-h);
  height: var(--mw-row-h);
  padding: 0;
  border: 0;
  border-radius: var(--radius--small);
  background-color: transparent;
  color: color-mix(in srgb, var(--_theme---text) 60%, transparent);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mw-dialog__close:hover,
.mw-dialog__close:focus-visible {
  background-color: var(--swatch--dark-faded);
}

.mw-dialog__close:focus-visible {
  outline: var(--focus--width) solid currentColor;
  outline-offset: var(--focus--offset-inner);
}

.mw-dialog__close:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mw-dialog__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

.mw-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--size--0-75rem);
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mw-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--size--0-5rem);
  width: 100%;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .mw-dialog__close {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   PortalShell / PortalSidebar / PortalCanvas
   Owns the authenticated viewport, two-column frame, derived content width,
   and the one route scroll region. Navigation internals retain their compatible
   portal_* classes until their separate visual-system pass.
   --------------------------------------------------------------------------- */
.mw-portal-shell {
  --portal-sidebar-expanded: 15rem;
  --portal-sidebar-collapsed: 3.125rem;
  --portal-sidebar-w: var(--portal-sidebar-expanded);
  --portal-sidebar-pad-x: var(--size--0-5rem);
  --portal-sidebar-item-pad-y: calc(var(--size--0-5rem) + var(--size--0-125rem));
  --portal-sidebar-item-pad-x: var(--size--0-5rem);
  --portal-nav-icon-size: 1.125rem;
  --portal-nav-row-gap: var(--size--0-25rem);
  --portal-account-menu-width: 16.5rem;
  --container--dash: min(var(--container--main), calc(100% - var(--site--margin) * 2));
  --mw-page-topbar-control-height: 2rem;
  --portal-topbar-h: calc(var(--mw-page-topbar-control-height) + 2 * var(--size--1rem));

  position: relative;
  display: grid;
  grid-template-columns: var(--portal-sidebar-w) minmax(0, 1fr);
  column-gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  transition: grid-template-columns 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.mw-portal-shell.is-sidebar-collapsed {
  --portal-sidebar-w: var(--portal-sidebar-collapsed);
  --portal-sidebar-pad-x: var(--size--0-5rem);
}

.mw-portal-sidebar {
  position: sticky;
  top: 0;
  align-self: stretch;
  min-width: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.mw-portal-canvas {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.mw-portal-canvas__content {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

html.wf-design-mode .mw-portal-shell {
  grid-template-columns: 16rem minmax(0, 1fr);
  height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  .mw-portal-shell {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   PageTopbar - mw-page-topbar
   Owns the authenticated page chrome above PageContent. Surface class names
   express route ownership only; the reviewed workspace/admin visual contract
   remains shared.
   --------------------------------------------------------------------------- */
.mw-page-topbar {
  --mw-page-topbar-gap: var(--size--0-5rem);

  position: sticky;
  top: 0;
  z-index: 999;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  padding: var(--size--1rem) var(--size--1-5rem) var(--size--1rem) var(--size--1-25rem);
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  font-size: var(--_typography---font-size--text-small);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .mw-page-topbar {
    background-color: color-mix(in srgb, var(--_theme---background) 88%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
  }
}

.mw-page-topbar__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--container--main);
  min-height: var(--mw-page-topbar-control-height);
  margin-inline: auto;
}

.mw-page-topbar__layout {
  display: flex;
  flex-flow: row;
  place-content: center space-between;
  align-items: center;
  gap: var(--mw-page-topbar-gap);
  min-height: var(--mw-page-topbar-control-height);
}

.mw-page-topbar__identity {
  min-width: 0;
}

.mw-page-topbar__utility,
.mw-page-topbar__tools,
.mw-page-topbar__actions {
  flex-flow: row;
  place-content: center flex-start;
  align-items: center;
  gap: var(--mw-page-topbar-gap);
}

.mw-page-topbar__utility {
  display: flex;
  min-width: 0;
}

.mw-page-topbar__tools,
.mw-page-topbar__actions {
  display: inline-flex;
}

.mw-page-topbar__divider.global_divider_vertical {
  align-self: center;
  flex: none;
  height: var(--size--1-25rem);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   PageContent - mw-page-content
   Owns the one authenticated route body below PageTopbar. The default contract
   has one spacing and width treatment; --fill changes only available-height
   behavior for lists and workspaces with bottom-aligned content.
   --------------------------------------------------------------------------- */
.mw-page-content {
  box-sizing: border-box;
  width: 100%;
  padding-block: var(--page-content--space-top) var(--page-content--space-bottom);
}

.mw-page-content__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container--dash);
  margin-inline: auto;
}

.mw-page-content--fill {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--portal-topbar-h));
  min-height: calc(100svh - var(--portal-topbar-h));
}

.mw-page-content--fill > .mw-page-content__inner {
  flex: 1 1 auto;
  min-height: 0;
}