/* System, preferences, and translation review */
.system-layout { display: grid; gap: var(--space-4); }
.page-header--settings { margin-bottom: var(--space-4); }
.form-section--system .form-section__title { padding-bottom: .65rem; }
/* Paired with an inline help icon, the title box must stay symmetric so the ⓘ centers on the text. */
.form-section--system .field-heading .form-section__title { padding-bottom: 0; }
.system-card--preferences { width: min(100%, 52rem); }
.system-editor-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1.15rem; align-items: start; padding: .72rem var(--space-4) var(--space-4);
}
.system-editor-grid--preferences {
  grid-template-columns: minmax(0, 1fr) minmax(15.5rem, .64fr);
  gap: 1rem 1.35rem;
}
.system-editor-grid .field { grid-column: auto; margin-bottom: 0; }
.system-editor-grid .field-label-row { margin-bottom: .48rem; }
.system-toggle-field .toggle-switch { min-height: var(--control-height); align-items: center; }
.system-editor-grid--preferences .system-toggle-field,
.system-editor-grid--preferences .toggle-switch { min-width: 0; max-width: 100%; }
.system-editor-grid--preferences .toggle-switch__label { overflow-wrap: anywhere; }
/* Footer layout comes from .cms-card__actions; the mobile rule below makes the button full-width. */
.system-panel { display: grid; gap: var(--space-3); padding: .9rem var(--space-4) var(--space-4); }
.system-panel h2 { margin-bottom: .35rem; font-size: var(--cms-font-size-lg); line-height: 1.1; }
.system-panel p { max-width: 48rem; margin-bottom: .3rem; color: var(--color-muted); font-size: var(--cms-font-size-sm); }
/* Collapsible settings sections. Closed, the page is a short list of headings. */
.system-section > summary { align-items: flex-start; }
.system-section__heading { min-width: 0; }
.system-section__heading small {
  display: block; margin-top: .18rem; color: var(--color-muted);
  font-size: var(--cms-font-size-xs); font-weight: 500; letter-spacing: 0; text-transform: none;
  overflow-wrap: anywhere;
}
.system-section__heading h2 { margin: 0; padding-bottom: 0; }
.system-section__body { display: grid; gap: var(--space-3); padding: .9rem var(--space-4) var(--space-4); }
.system-section__intro { max-width: 48rem; margin: 0; color: var(--color-muted); font-size: var(--cms-font-size-sm); }
.system-block { display: grid; gap: .55rem; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.system-section__body > .system-block:first-child { padding-top: 0; border-top: 0; }
.system-block__head { display: flex; align-items: center; gap: .4rem; }
/* h3: a block sits under its section title, so it must not repeat that weight. */
.system-block__title { margin: 0; font-size: var(--cms-font-size-sm); font-weight: 700; }
/* Read-only facts. A label/value row per line reads long values -- a URL, a
   list of paths -- without the wrapping that fixed tiles forced. */
.system-facts { display: grid; margin: 0; border-top: 1px solid var(--color-border); }
.system-fact {
  display: grid; grid-template-columns: minmax(9rem, .38fr) minmax(0, 1fr); gap: .4rem 1rem;
  padding: .42rem 0; border-bottom: 1px solid var(--color-border);
}
.system-fact dt { margin: 0; color: var(--color-faint); font-size: var(--cms-font-size-xs); }
.system-fact dd {
  margin: 0; color: var(--color-text); font-size: var(--cms-font-size-sm);
  overflow-wrap: anywhere;
}
.system-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
/* Diagnostic output. Monospaced and wrapping, because these reports are lists
   of paths and messages that must stay readable without a horizontal scrollbar,
   and capped in height so a long one cannot bury the rest of the page. */
.system-console__command { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--color-muted); font-size: var(--cms-font-size-xs); }
.system-console__command code { color: var(--color-text); font-family: var(--font-mono); overflow-wrap: anywhere; }
.system-console {
  max-height: 22rem; margin: 0; padding: var(--space-3); overflow-y: auto;
  border: 1px solid var(--color-border); border-radius: var(--cms-radius-sm); background: var(--color-surface-alt);
  color: var(--color-text); font-family: var(--font-mono); font-size: var(--cms-font-size-xs); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.system-inline-details { border-top: 1px solid var(--color-border); }
.system-inline-details > summary { width: fit-content; padding: .55rem 0; color: var(--color-muted); font-size: var(--cms-font-size-sm); font-weight: 650; }
.system-inline-details__body { display: grid; gap: var(--space-3); padding-top: var(--space-2); }
.system-toggle-line { display: flex; align-items: center; gap: .45rem; }
.system-breakdown { display: flex; flex-wrap: wrap; gap: .4rem; }
.system-breakdown__item {
  display: inline-flex; align-items: baseline; gap: .32rem; padding: .25rem .48rem; border: 1px solid var(--color-border);
  color: var(--color-muted); font-size: var(--cms-font-size-xs);
}
.system-breakdown__item strong { color: var(--color-accent); font-weight: 800; }
.system-breakdown--large { margin-bottom: var(--space-4); }
.translation-review { overflow: hidden; }
.translation-table td strong { color: var(--color-text); font-weight: 650; }
.translation-chip-list { display: flex; flex-wrap: wrap; gap: .28rem; }
.translation-chip {
  display: inline-flex; align-items: center; min-height: 1.32rem; padding: .08rem .4rem;
  border: 1px solid var(--color-border); color: var(--color-accent);
  font-size: var(--cms-font-size-3xs); font-weight: 800; letter-spacing: .1em;
}

@container (max-width: 42rem) {
  .system-editor-grid,
  .system-editor-grid--preferences {
    grid-template-columns: 1fr;
  }

  .system-editor-grid { gap: .8rem; padding: .65rem .85rem .9rem; }
  .system-editor-actions .button { width: 100%; }
  .system-panel { padding: .8rem .85rem .95rem; }
  .system-actions { align-items: stretch; flex-direction: column; }
  .system-actions .button,
  .system-actions form { width: 100%; }
  .system-actions form .button { justify-content: center; }
  .system-section__body { padding: .8rem .85rem .95rem; }
  .system-section > summary { padding: .85rem; }
  /* Stacked, the label reads as a caption above its value. */
  .system-fact { grid-template-columns: 1fr; gap: .1rem; }
  .system-breakdown { gap: .32rem; }
}

@container (max-width: 42rem) {
  .translation-review { overflow: visible; }
  .translation-table td strong { overflow-wrap: anywhere; }
}