:root {
  --settings-page-inset: var(--space-6);
  --settings-layout-width: var(--size-600);
  --settings-layout-min-height: var(--size-760);
  --settings-layout-inset: var(--space-6);
  --settings-layout-content-padding: var(--space-10) 0;
  --settings-layout-gap: var(--space-6);
  --settings-layout-field-gap: var(--space-4);
  --settings-layout-copy-gap: var(--space-2);
  --settings-layout-font: var(--font-type-body);
  --settings-layout-title-font: var(--font-type-heading);
  --settings-layout-heading-font: var(--font-type-heading-small);
  --settings-layout-note-font: var(--font-type-caption);
  --settings-layout-focus-outline: var(--focus-width) solid var(--color-focus-ring);
}

.application-shell:has(.settings-page) { background: var(--color-surface); }
.application-shell:has(.settings-page) .shell-header { background: var(--color-surface); }
#page-content:has(> .settings-page) { padding: 0; }
.settings-page { padding: var(--settings-page-inset); min-inline-size: 0; background: var(--color-surface); }

.settings-layout {
  display: block;
  margin: 0;
  box-sizing: border-box;
  min-inline-size: 0;
  min-block-size: var(--settings-layout-min-height);
  padding: var(--settings-layout-inset);
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-surface-foreground);
  font: var(--settings-layout-font);
  overflow-wrap: anywhere;
}

.settings-layout__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--settings-layout-gap);
  max-inline-size: var(--settings-layout-width);
  margin-inline: auto;
  padding: var(--settings-layout-content-padding);
}

.settings-layout__content > * { min-inline-size: 0; }

.settings-layout__navigation { container-type: inline-size; }

/* Only composition changes: the navigation keeps its own control styling. */
@container (max-width: 380px) {
  .settings-layout__navigation > .segmented-navigation { flex-direction: column; }
}

.settings-layout__header,
.settings-layout__section {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--settings-layout-copy-gap);
}

.settings-layout__fields {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--settings-layout-field-gap);
}

.settings-layout__title { margin: 0; font: var(--settings-layout-title-font); }
.settings-layout__heading { margin: 0; font: var(--settings-layout-heading-font); }
.settings-layout__description { margin: 0; color: var(--color-muted-foreground); }
.settings-layout__note { margin: 0; color: var(--color-muted-foreground); font: var(--settings-layout-note-font); }

.settings-layout__back:hover { text-decoration: underline; }

.settings-layout__back {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: var(--settings-layout-copy-gap);
  min-block-size: var(--control-target-size);
  color: var(--color-link);
  text-decoration: none;
}

.settings-layout__back svg { flex-shrink: 0; }
.settings-layout__back:dir(rtl) svg { rotate: var(--rotate-half); }
.settings-layout__back:hover { text-decoration: underline; }
.settings-layout__back:focus-visible { outline: var(--settings-layout-focus-outline); outline-offset: var(--focus-offset); }

.settings-layout__meta,
.settings-layout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--settings-layout-copy-gap);
}

.settings-layout__meta { justify-content: space-between; }
.settings-layout__actions--end { justify-content: flex-end; }
.settings-layout__actions > * { min-inline-size: 0; max-inline-size: 100%; }