.ui-styleguide {
  width: min(var(--ui-content-max-width), calc(100% - (2 * var(--ui-content-gutter))));
  margin-inline: auto;
  padding-block: var(--ui-space-7) var(--ui-space-8);
}

.ui-styleguide__intro,
.ui-styleguide__section,
.ui-styleguide__specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--ui-space-4);
}

.ui-styleguide__intro {
  max-width: 70ch;
  margin-bottom: var(--ui-space-7);
}

.ui-styleguide__intro h1,
.ui-styleguide__intro p,
.ui-styleguide__section > h2,
.ui-styleguide__section > p,
.ui-styleguide__specimen > h3,
.ui-styleguide__specimen > p {
  margin: 0;
}

.ui-styleguide__intro p,
.ui-styleguide__section > p,
.ui-styleguide__specimen > p {
  color: var(--ui-text-muted);
}

.ui-styleguide__section {
  margin-top: var(--ui-space-8);
  scroll-margin-top: var(--ui-space-6);
}

.ui-styleguide__section > h2 {
  padding-bottom: var(--ui-space-2);
  border-bottom: 1px solid var(--ui-surface-border);
}

.ui-styleguide__grid,
.ui-styleguide__swatches {
  display: grid;
  gap: var(--ui-space-4);
}

.ui-styleguide__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.ui-styleguide__visual-character-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.ui-styleguide__visual-character-card {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--ui-space-3);
}

.ui-styleguide__visual-character-card > h3,
.ui-styleguide__visual-character-card > p {
  margin: 0;
}

.ui-styleguide__visual-character-stage {
  display: grid;
  min-width: 0;
  min-height: 7rem;
  align-content: start;
  overflow: visible;
  background: var(--ui-surface-raised);
}

.ui-styleguide__visual-character-stage--open {
  min-height: 17rem;
}

.ui-styleguide__visual-character-stage--team-navigation {
  padding-inline-start: 4rem;
}

.ui-styleguide__swatches {
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}

.ui-styleguide__button-row,
.ui-styleguide__badge-row {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  flex-wrap: wrap;
}

.ui-styleguide__button-row > *,
.ui-styleguide__badge-row > * {
  flex: 0 0 auto;
}

.ui-styleguide__swatch {
  display: grid;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-m, 0.375rem);
  background: var(--ui-surface-background);
}

.ui-styleguide__swatch::before {
  content: "";
  display: block;
  min-height: 3rem;
  border-radius: var(--wa-border-radius-s, 0.25rem);
  background: var(--ui-styleguide-swatch);
}

.ui-styleguide__annotation {
  color: var(--ui-text-muted);
  font-size: 0.9rem;
}

.ui-styleguide__control-stack,
.ui-styleguide__error-field {
  display: grid;
  gap: var(--ui-space-2);
}

.ui-styleguide__control-stack {
  max-width: var(--ui-form-width);
}

.ui-styleguide__control-stack label {
  font-weight: 600;
}

.ui-styleguide__field-label {
  display: inline-block;
  align-self: start;
  inline-size: max-content;
  max-inline-size: 100%;
  white-space: nowrap;
}

.ui-styleguide__required-mark {
  display: inline;
  margin-inline-start: var(--ui-space-1);
  color: var(--ui-text);
  font-weight: 700;
}

.ui-styleguide__control-stack small {
  color: var(--ui-text-muted);
}

.ui-styleguide__choice-group {
  display: grid;
  gap: var(--ui-space-2);
  max-width: var(--ui-form-width);
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-styleguide__choice-group legend {
  display: inline-block;
  align-self: start;
  inline-size: max-content;
  max-inline-size: 100%;
  margin-bottom: var(--ui-space-1);
  font-weight: 600;
}

.ui-styleguide__shell-frame {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-l, 0.75rem);
  background: var(--ui-surface-background);
  box-shadow: var(--ui-shadow-surface);
}

.ui-styleguide__shell-frame .rails-layout-shell {
  width: calc(100% - (2 * var(--ui-space-4)));
  min-width: 0;
}

.ui-styleguide__shell-frame .rails-layout-actions {
  min-width: 0;
  max-width: 100%;
}

.ui-styleguide__shell-frame .rails-layout-brand {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ui-styleguide__mobile-shell .rails-layout-bar {
  align-items: flex-start;
}

.ui-styleguide__mobile-shell .rails-layout-actions {
  justify-content: flex-end;
}

.ui-styleguide__long-label-fixture {
  max-width: 32rem;
  overflow-wrap: anywhere;
  padding: var(--ui-space-4);
  border: 1px dashed var(--ui-surface-border);
  border-radius: var(--wa-border-radius-m, 0.375rem);
  background: var(--ui-surface-raised);
}

.ui-styleguide__long-label-fixture p {
  margin-block: 0 var(--ui-space-3);
}

.ui-styleguide__long-label-fixture .wa-button {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: start;
  white-space: normal;
}

.ui-styleguide__icon-button {
  width: var(--ui-touch-target);
  padding: 0;
}

.ui-styleguide__decorative-icon {
  color: var(--ui-text-muted);
}

.ui-styleguide__zoom-note {
  padding: var(--ui-space-3);
  border-left: 0.25rem solid var(--wa-color-brand-border-normal, currentColor);
  background: var(--ui-info-background);
}

.ui-styleguide__spacing-scale,
.ui-styleguide__layout-columns,
.ui-styleguide__card-list,
.ui-styleguide__workflow-card-grid,
.ui-styleguide__feedback-grid,
.ui-styleguide__flash-grid,
.ui-styleguide__field-grid,
.ui-styleguide__auth-inventory,
.ui-styleguide__context-grid,
.ui-styleguide__resilience-grid {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-4);
}

.ui-styleguide__spacing-scale {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.ui-styleguide__spacing-scale span {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.ui-styleguide__spacing-scale i {
  display: inline-block;
  inline-size: var(--ui-spacing-demo);
  block-size: var(--ui-spacing-demo);
  min-inline-size: 0.25rem;
  min-block-size: 0.25rem;
  background: var(--ui-link);
}

.ui-styleguide__layout-columns,
.ui-styleguide__card-list,
.ui-styleguide__feedback-grid,
.ui-styleguide__auth-inventory,
.ui-styleguide__context-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.ui-styleguide__workflow-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-styleguide__workflow-card {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  gap: var(--ui-space-4);
  padding: var(--ui-space-4);
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-l, 0.75rem);
  background: var(--ui-surface-background);
  box-shadow: var(--ui-shadow-surface);
}

.ui-styleguide__workflow-card-header,
.ui-styleguide__workflow-card-content,
.ui-styleguide__workflow-card-actions {
  min-width: 0;
}

.ui-styleguide__workflow-card-header {
  display: grid;
  gap: var(--ui-space-4);
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-surface-border);
}

.ui-styleguide__workflow-card-title-row {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-3);
}

.ui-styleguide__workflow-card h4,
.ui-styleguide__workflow-card p {
  margin: 0;
}

.ui-styleguide__workflow-card h4 {
  overflow-wrap: anywhere;
  font-size: 1.08rem;
  line-height: 1.3;
}

.ui-styleguide__workflow-card-badges,
.ui-styleguide__workflow-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.ui-styleguide__workflow-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-4);
  margin: 0;
  color: var(--ui-text-muted);
}

.ui-styleguide__workflow-card-meta div {
  display: grid;
  min-width: min(9rem, 100%);
  gap: var(--ui-space-1);
}

.ui-styleguide__workflow-card-meta dt,
.ui-styleguide__workflow-card-assignee span {
  color: var(--ui-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-styleguide__workflow-card-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ui-styleguide__workflow-card-content {
  display: grid;
  align-content: start;
  gap: var(--ui-space-3);
  line-height: 1.5;
}

.ui-styleguide__workflow-card-assignee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ui-space-2);
  color: var(--ui-text-muted);
}

.ui-styleguide__workflow-card-actions {
  padding-top: var(--ui-space-4);
  border-top: 1px solid var(--ui-surface-border);
}

.ui-styleguide__workflow-card-actions .wa-button {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ui-styleguide__field-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.ui-styleguide__resilience-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.ui-styleguide__compact-list {
  display: grid;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-styleguide__compact-list > li,
.ui-styleguide__linked-row,
.ui-styleguide__repeatable-row {
  display: flex;
  min-width: 0;
  min-height: var(--ui-touch-target);
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-m, 0.375rem);
  background: var(--ui-surface-background);
}

.ui-styleguide__compact-list a,
.ui-styleguide__linked-row > *:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-styleguide__pagination,
.ui-styleguide__repeatable,
.ui-styleguide__repeatable-list {
  display: grid;
  gap: var(--ui-space-3);
}

.ui-styleguide__pagination {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.ui-styleguide__pagination-pages {
  grid-column: 1 / -1;
}

.ui-styleguide__pagination-foundation-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--ui-space-4);
}

.ui-styleguide__pagination-foundation-state {
  min-width: 0;
  padding: var(--ui-space-4);
  border: 1px dashed var(--ui-surface-border);
  border-radius: var(--wa-border-radius-m, 0.375rem);
  background: var(--ui-surface-raised);
}

.ui-styleguide__pagination-foundation-state > h4,
.ui-styleguide__pagination-foundation-state > p {
  margin-block: 0 var(--ui-space-3);
}

.ui-styleguide__pagination-foundation-state > :last-child {
  margin-bottom: 0;
}

.ui-styleguide__disclosure-panel {
  position: absolute;
  z-index: 2;
  min-width: 12rem;
  padding: var(--ui-space-3);
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-m, 0.375rem);
  background: var(--ui-surface-background);
  box-shadow: var(--ui-shadow-surface);
}

.ui-styleguide__disclosure-panel a,
.ui-styleguide__disclosure-panel button {
  display: block;
  width: 100%;
  text-align: start;
}

.ui-styleguide__interactive-shell .rails-layout-account {
  position: relative;
}

.ui-styleguide__interactive-shell .rails-layout-nav {
  min-width: 0;
}

.ui-styleguide [hidden] {
  display: none !important;
}

.ui-styleguide__repeatable-row [data-ui-repeatable-label] {
  overflow-wrap: anywhere;
}

dialog {
  max-width: min(32rem, calc(100% - 2rem));
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-l, 0.75rem);
  background: var(--ui-surface-background);
  color: var(--ui-text);
}

dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.ui-styleguide__archetype-list,
.ui-styleguide__archetype,
.ui-styleguide__archetype-heading-copy,
.ui-styleguide__archetype-primary,
.ui-styleguide__archetype-controls,
.ui-styleguide__archetype-form-shell {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-4);
}

.ui-styleguide__archetype-list {
  gap: var(--ui-space-7);
}

.ui-styleguide__archetype {
  overflow-wrap: anywhere;
  padding: clamp(var(--ui-space-4), 3vw, var(--ui-space-6));
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-l, 0.75rem);
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-shadow-surface);
}

.ui-styleguide__archetype-label,
.ui-styleguide__archetype-heading-copy > h3,
.ui-styleguide__archetype-heading-copy > p,
.ui-styleguide__archetype-facts,
.ui-styleguide__archetype-danger > h4,
.ui-styleguide__archetype-danger > p {
  margin: 0;
}

.ui-styleguide__archetype-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-5);
}

.ui-styleguide__archetype-heading-copy {
  flex: 1 1 34rem;
}

.ui-styleguide__archetype-action-row,
.ui-styleguide__archetype-status-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.ui-styleguide__archetype-action-row {
  flex: 0 1 auto;
}

.ui-styleguide__archetype-action-row > * {
  max-width: 100%;
  white-space: normal;
}

.ui-styleguide__archetype-primary,
.ui-styleguide__archetype-controls,
.ui-styleguide__archetype-danger {
  min-width: 0;
}

.ui-styleguide__archetype-pagination {
  min-width: 0;
}

.ui-styleguide__archetype-facts {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.ui-styleguide__archetype-facts > div {
  min-width: 0;
}

.ui-styleguide__archetype-facts dt {
  color: var(--ui-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-styleguide__archetype-facts dd {
  margin: var(--ui-space-1) 0 0;
}

.ui-styleguide__archetype-secondary-grid,
.ui-styleguide__archetype-field-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.ui-styleguide__archetype-danger {
  display: grid;
  justify-items: start;
  gap: var(--ui-space-3);
}

.ui-styleguide__archetype-error-summary {
  min-width: 0;
}

.ui-styleguide__archetype-report-context,
.ui-styleguide__archetype-report-primary,
.ui-styleguide__archetype-auth-shell,
.ui-styleguide__archetype-auth-heading,
.ui-styleguide__archetype-auth-fields,
.ui-styleguide__archetype-auth-recovery,
.ui-styleguide__archetype-boundaries {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-4);
}

.ui-styleguide__archetype-report-context {
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
  align-items: end;
}

.ui-styleguide__archetype-report-context h4,
.ui-styleguide__archetype-report-context p,
.ui-styleguide__archetype-report-status,
.ui-styleguide__archetype-kpis,
.ui-styleguide__archetype-kpis dd,
.ui-styleguide__archetype-kpis small,
.ui-styleguide__archetype-auth-heading p,
.ui-styleguide__archetype-auth-heading h3,
.ui-styleguide__archetype-auth-fields h4,
.ui-styleguide__archetype-auth-recovery h4,
.ui-styleguide__archetype-auth-recovery p,
.ui-styleguide__archetype-boundary-grid h5,
.ui-styleguide__archetype-boundary-grid p {
  margin: 0;
}

.ui-styleguide__archetype-report-filters {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(9rem, auto);
  align-items: end;
  gap: var(--ui-space-3);
}

.ui-styleguide__archetype-report-status {
  display: grid;
  justify-items: start;
  gap: var(--ui-space-1);
  padding-block: var(--ui-space-2);
}

.ui-styleguide__archetype-kpis {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ui-space-3);
}

.ui-styleguide__archetype-kpis > div {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-1);
  padding: var(--ui-space-4);
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-m, 0.5rem);
  background: var(--ui-surface-background);
}

.ui-styleguide__archetype-kpis dt {
  color: var(--ui-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-styleguide__archetype-kpis dd {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
}

.ui-styleguide__archetype-kpis small {
  color: var(--ui-text-muted);
}

.ui-styleguide__archetype-report-supporting,
.ui-styleguide__archetype-report-guidance {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.ui-styleguide__archetype-report-supporting > *,
.ui-styleguide__archetype-report-guidance > * {
  min-width: 0;
}

.ui-styleguide__archetype-auth-shell {
  inline-size: min(100%, var(--ui-auth-max-width));
  justify-self: center;
}

.ui-styleguide__archetype-auth-heading {
  text-align: center;
}

.ui-styleguide__archetype-auth-notice {
  min-width: 0;
}

.ui-styleguide__archetype-auth-fields,
.ui-styleguide__archetype-auth-recovery {
  inline-size: 100%;
}

.ui-styleguide__archetype-boundary-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.ui-styleguide__archetype-boundary-grid > article {
  display: grid;
  min-width: 0;
  align-content: start;
  justify-items: start;
  gap: var(--ui-space-3);
}

.ui-styleguide__golden-list,
.ui-styleguide__golden-page,
.ui-styleguide__golden-primary,
.ui-styleguide__golden-aside,
.ui-styleguide__golden-form-layout {
  display: grid;
  min-width: 0;
}

.ui-styleguide__golden-list {
  gap: var(--ui-space-7);
}

.ui-styleguide__golden-page {
  gap: var(--ui-space-5);
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: clamp(var(--ui-space-4), 3vw, var(--ui-space-6));
  border: 1px solid var(--ui-surface-border);
  border-radius: var(--wa-border-radius-l, 0.75rem);
  background: var(--ui-surface-background);
  box-shadow: var(--ui-shadow-surface);
}

.ui-styleguide__golden-kicker,
.ui-styleguide__golden-page h3,
.ui-styleguide__golden-page h4,
.ui-styleguide__golden-page p,
.ui-styleguide__golden-page dl,
.ui-styleguide__golden-page ol {
  margin-block: 0;
}

.ui-styleguide__golden-kicker {
  color: var(--ui-text-muted);
}

.ui-styleguide__golden-header {
  margin: 0;
  padding: 0 0 var(--ui-space-4);
  border-bottom: 1px solid var(--ui-surface-border);
  background: transparent;
}

.ui-styleguide__golden-header > div:first-child {
  min-width: 0;
}

.ui-styleguide__golden-status-line,
.ui-styleguide__golden-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.ui-styleguide__golden-control-strip {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) auto;
  align-items: end;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border-radius: var(--wa-border-radius-m, 0.375rem);
  background: var(--ui-surface-raised);
}

.ui-styleguide__golden-result-count {
  justify-self: end;
  padding-block: 0.65rem;
}

.ui-styleguide__golden-rows {
  display: grid;
  border-block: 1px solid var(--ui-surface-border);
}

.ui-styleguide__golden-row {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-2);
  color: var(--ui-text);
  text-decoration: none;
}

.ui-styleguide__golden-row + .ui-styleguide__golden-row {
  border-top: 1px solid var(--ui-surface-border);
}

.ui-styleguide__golden-row:hover {
  background: var(--ui-surface-raised);
}

.ui-styleguide__golden-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-1);
}

.ui-styleguide__golden-row small,
.ui-styleguide__golden-attention-list small,
.ui-styleguide__golden-timeline small {
  color: var(--ui-text-muted);
}

.ui-styleguide__golden-row-caret {
  color: var(--ui-text-muted);
  font-size: 1.5rem;
  line-height: 1;
}

.ui-styleguide__golden-avatar {
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-neutral-background);
  color: var(--ui-text);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.ui-styleguide__golden-split {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.8fr) minmax(15rem, 0.8fr);
  gap: var(--ui-space-5);
}

.ui-styleguide__golden-primary,
.ui-styleguide__golden-aside {
  align-content: start;
  gap: var(--ui-space-4);
}

.ui-styleguide__golden-primary > .rails-section-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.ui-styleguide__golden-primary > .rails-section-heading > .pill {
  justify-self: end;
}

.ui-styleguide__golden-aside {
  padding: var(--ui-space-4);
  border-left: 0.25rem solid var(--wa-color-brand-border-normal, var(--ui-surface-border));
  border-radius: 0 var(--wa-border-radius-m, 0.375rem) var(--wa-border-radius-m, 0.375rem) 0;
  background: var(--ui-surface-raised);
}

.ui-styleguide__golden-aside dl {
  display: grid;
  gap: var(--ui-space-3);
}

.ui-styleguide__golden-aside dl > div {
  display: grid;
  gap: var(--ui-space-1);
}

.ui-styleguide__golden-aside dt,
.ui-styleguide__golden-summary dt,
.ui-styleguide__golden-facts dt {
  color: var(--ui-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-styleguide__golden-aside dd,
.ui-styleguide__golden-summary dd,
.ui-styleguide__golden-facts dd {
  margin: 0;
}

.ui-styleguide__golden-meter {
  block-size: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-neutral-background);
}

.ui-styleguide__golden-meter > span {
  display: block;
  inline-size: var(--golden-progress);
  block-size: 100%;
  border-radius: inherit;
  background: var(--wa-color-brand-fill-loud, currentColor);
}

.ui-styleguide__golden-facts,
.ui-styleguide__golden-summary {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-styleguide__golden-facts > div,
.ui-styleguide__golden-summary > div {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-1);
}

.ui-styleguide__golden-facts dd,
.ui-styleguide__golden-summary dd {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 750;
}

.ui-styleguide__golden-form-layout {
  grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 0.75fr);
  align-items: start;
  gap: var(--ui-space-5);
}

.ui-styleguide__golden-field-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.ui-styleguide__golden-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--ui-surface-border);
}

.ui-styleguide__golden-summary > div {
  padding: var(--ui-space-4);
}

.ui-styleguide__golden-summary > div + div {
  border-left: 1px solid var(--ui-surface-border);
}

.ui-styleguide__golden-attention-list,
.ui-styleguide__golden-timeline {
  padding: 0;
  list-style: none;
}

.ui-styleguide__golden-attention-list {
  display: grid;
  border-top: 1px solid var(--ui-surface-border);
}

.ui-styleguide__golden-attention-list li {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-3);
  padding-block: var(--ui-space-3);
  border-bottom: 1px solid var(--ui-surface-border);
}

.ui-styleguide__golden-attention-list li > span:nth-child(2),
.ui-styleguide__golden-timeline li {
  display: grid;
  gap: var(--ui-space-1);
}

.ui-styleguide__golden-attention-icon {
  display: grid;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-warning-background);
  font-weight: 800;
}

.ui-styleguide__golden-attention-icon.is-danger {
  background: var(--ui-danger-background);
}

.ui-styleguide__golden-timeline {
  display: grid;
  gap: var(--ui-space-4);
}

.ui-styleguide__golden-timeline time {
  color: var(--ui-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ui-styleguide__golden-page--boundary {
  background: var(--ui-surface-raised);
}

.ui-styleguide__golden-boundary-state {
  display: grid;
  max-width: 42rem;
  justify-items: start;
  gap: var(--ui-space-4);
  padding-block: var(--ui-space-5);
}

.ui-styleguide__golden-boundary-icon {
  display: grid;
  inline-size: 3rem;
  block-size: 3rem;
  place-items: center;
  border: 1px solid var(--ui-surface-border);
  border-radius: 50%;
  background: var(--ui-surface-background);
  color: var(--ui-text-muted);
  font-weight: 800;
}

@media (min-width: 1025px) {
  .ui-styleguide__interactive-shell [data-ui-responsive-disclosure].rails-nav-menu-trigger {
    display: none;
  }

  .ui-styleguide__interactive-shell .rails-layout-nav[hidden] {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .ui-styleguide {
    width: min(100% - 1rem, var(--ui-content-max-width));
    padding-block: var(--ui-space-5) var(--ui-space-7);
  }

  .ui-styleguide__section {
    margin-top: var(--ui-space-7);
  }

  .ui-styleguide__pagination {
    grid-template-columns: 1fr 1fr;
  }

  .ui-styleguide__pagination [data-ui-current-page] {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }
}

@media (max-width: 48rem) {
  .ui-styleguide__archetype-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-styleguide__archetype-action-row {
    inline-size: 100%;
  }

  .ui-styleguide__archetype-action-row > * {
    inline-size: 100%;
  }

  .ui-styleguide__archetype-facts,
  .ui-styleguide__archetype-secondary-grid,
  .ui-styleguide__archetype-field-grid,
  .ui-styleguide__archetype-report-context,
  .ui-styleguide__archetype-report-filters,
  .ui-styleguide__archetype-report-supporting,
  .ui-styleguide__archetype-report-guidance,
  .ui-styleguide__archetype-boundary-grid,
  .ui-styleguide__golden-control-strip,
  .ui-styleguide__golden-split,
  .ui-styleguide__golden-form-layout,
  .ui-styleguide__golden-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-styleguide__archetype-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-styleguide__golden-result-count {
    justify-self: start;
    padding-block: 0;
  }

  .ui-styleguide__golden-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .ui-styleguide__golden-row .pill {
    grid-column: 2;
    justify-self: start;
  }

  .ui-styleguide__golden-row-caret {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .ui-styleguide__golden-aside {
    border-top: 0.25rem solid var(--wa-color-brand-border-normal, var(--ui-surface-border));
    border-left: 0;
    border-radius: 0 0 var(--wa-border-radius-m, 0.375rem) var(--wa-border-radius-m, 0.375rem);
  }

  .ui-styleguide__golden-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-styleguide__golden-summary > div + div {
    border-left: 0;
  }

  .ui-styleguide__golden-summary > div:nth-child(even) {
    border-left: 1px solid var(--ui-surface-border);
  }

  .ui-styleguide__golden-summary > div:nth-child(n + 3) {
    border-top: 1px solid var(--ui-surface-border);
  }

  .ui-styleguide__golden-attention-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ui-styleguide__golden-attention-list a {
    grid-column: 2;
    justify-self: start;
  }

  .ui-styleguide__golden-actions,
  .ui-styleguide__golden-actions > * {
    inline-size: 100%;
  }

  .ui-styleguide__visual-character-stage--team-navigation {
    padding-inline-start: 0;
  }

  .ui-styleguide__visual-character-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-styleguide__workflow-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}