/* Models settings section, in the settings-panel design language: 14/22 body,
 * 12/18 caption, capsule controls (h36 r18; h28 r14 where a row is dense),
 * 32px fields, and `border-l2` hairlines — the vocabulary GeneralSection and
 * the Button/Input primitives already use.
 *
 * Every color resolves through a `--dsw-alias-*` token. The section used to
 * name `--border` / `--surface` / `--text-*`, which nothing in this app
 * defines, so it always rendered the light-mode literals written as their
 * fallbacks and stayed light under the dark theme. */

.section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  color: var(--dsw-alias-label-primary);
}

.title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--dsw-alias-label-primary);
}

.intro {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--dsw-alias-label-tertiary);
}

.notice {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-alias-state-warn-label);
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A configured provider: outlined on the panel fill, so the filled editor
   card it expands into reads as the nested object. */
.rowCard {
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rowHead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rowName {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--dsw-alias-label-primary);
}

.rowActions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* `box-sizing` on every control here: the app has no global border-box reset,
   so without it the outlined variants stand 2px taller than the filled ones
   they sit beside (Cancel next to Apply, Edit next to Delete). */
.primaryButton,
.secondaryButton,
.addButton {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 18px;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
}

.primaryButton {
  background: var(--dsw-alias-button-primary-fill);
  color: var(--dsw-alias-label-primary-foreground);
}

.primaryButton:hover:not(:disabled) {
  background: var(--dsw-alias-button-primary-hover);
}

.secondaryButton,
.addButton {
  border: 1px solid var(--dsw-alias-border-l2);
  background: transparent;
  color: var(--dsw-alias-label-primary);
}

.secondaryButton:hover:not(:disabled),
.addButton:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover);
}

.dangerButton {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 18px;
  background: transparent;
  color: var(--dsw-alias-state-error-primary);
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
}

.dangerButton:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover-danger);
}

/* Provider-row controls take the dense capsule (Button `.sm`). */
.rowActions .secondaryButton,
.rowActions .dangerButton {
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 18px;
}

.primaryButton:disabled,
.secondaryButton:disabled,
.dangerButton:disabled,
.addButton:disabled,
.linkButton:disabled,
.addModelButton:disabled,
.rowDelete:disabled {
  opacity: 0.4;
  cursor: default;
}

.primaryButton:focus-visible,
.secondaryButton:focus-visible,
.dangerButton:focus-visible,
.addButton:focus-visible,
.linkButton:focus-visible,
.addModelButton:focus-visible,
.rowDelete:focus-visible,
.customizedSummary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
}

/* Editing surface: a filled module on the panel, matching the settings
   selector fill rather than adding another outline inside the row. */
.editor {
  border-radius: 12px;
  background: var(--dsw-alias-bg-module-platform);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.editorHeader {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.editorTitle {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--dsw-alias-label-primary);
}

.editorRoute {
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-alias-label-tertiary);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fieldLabel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--dsw-alias-label-secondary);
}

.linkButton {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--dsw-alias-label-tertiary);
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.linkButton:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover);
  color: var(--dsw-alias-label-secondary);
}

.advancedHint {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-alias-label-tertiary);
}

.editorActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.addBlock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.addButton {
  align-self: flex-start;
}

.addCard,
.setupCard {
  border-radius: 12px;
  background: var(--dsw-alias-bg-module-platform);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}

/* Nested in a card that already carries the module chrome. */
.addCard .editor,
.setupCard .editor {
  background: none;
  padding: 0;
}

.customized {
  border-top: 1px solid var(--dsw-alias-border-l2);
  padding-top: 10px;
}

/* Native disclosure marker replaced by a rotating chevron: the built-in
   triangle differs per engine and cannot take the label color. */
.customizedSummary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px 4px;
  margin-left: -4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--dsw-alias-label-secondary);
  list-style: none;
}

.customizedSummary::-webkit-details-marker {
  display: none;
}

.customizedSummary::before {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform 120ms ease;
}

.customized[open] > .customizedSummary::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.customizedSummary:hover {
  color: var(--dsw-alias-label-primary);
}

.customizedBody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}

/* Model catalog: a table, not a stack of cards. The column captions are
   written once above the rows, so a row is one line of fields plus its
   delete control; each field still carries the indexed `aria-label` that
   names it, and the caption strip is hidden from assistive tech to keep
   that name from being announced twice. */
.modelCatalog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--dsw-alias-border-l2);
}

.modelCatalogHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modelCatalogHeading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modelCatalogTitle {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--dsw-alias-label-secondary);
}

.modelCatalogMeta,
.modelEmpty {
  margin: 0;
  color: var(--dsw-alias-label-tertiary);
  font-size: 12px;
  line-height: 18px;
}

.modelTable {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Captions and rows share one track list so the columns line up. */
.modelColumns,
.modelRow {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(88px, 0.75fr) 28px;
  align-items: center;
  gap: 8px;
}

.modelColumns {
  color: var(--dsw-alias-label-tertiary);
  font-size: 12px;
  line-height: 18px;
}

/* The inset belongs on the caption cell, not the strip: padding on the grid
   container would narrow its tracks against the rows' and walk the captions
   left column by column. 1px border + 10px padding is the field text inset. */
.modelColumns > span {
  padding-left: 11px;
}

.rowDelete {
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--dsw-alias-label-tertiary);
  cursor: pointer;
}

.rowDelete:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover-danger);
  color: var(--dsw-alias-state-error-primary);
}

.modelEmpty {
  padding: 12px;
  border: 1px dashed var(--dsw-alias-border-l3);
  border-radius: 8px;
  text-align: center;
}

.addModelButton {
  box-sizing: border-box;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 14px;
  background: transparent;
  color: var(--dsw-alias-label-primary);
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.addModelButton:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover);
}

.input {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  background: var(--dsw-alias-bg-layer-1);
  color: var(--dsw-alias-label-primary);
}

/* Enum pickers hold a handful of short options; a field-width dropdown reads
   as a text field the user is expected to fill. */
select.input {
  max-width: 240px;
  cursor: pointer;
}

.input:focus {
  outline: none;
  border-color: var(--dsw-alias-brand-primary);
}

.input::placeholder {
  color: var(--dsw-alias-label-dimmed);
}

.input:disabled {
  opacity: 0.6;
  cursor: default;
}

.error {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-alias-state-error-primary);
}

.deleteDialog {
  width: min(480px, 100%);
}

.deleteConfirm:not(:disabled) {
  border-color: var(--dsw-alias-state-error-primary);
  color: var(--dsw-alias-state-error-primary);
}

.deleteConfirm:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover-danger);
}

/* Icon-button label seat: named for assistive tech and for the tests that
   query these controls by their text. */
.hiddenLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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