/* SettingsModal Component Styles
   Tab strip / rail / pane / footer chrome lives in BaseModal (modal.css);
   only pane content styles remain here. */

.mint-settings-modal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Schema-driven content grid (used by both layouts)
 * Cols come from `--mint-settings-cols` set inline by the component;
 * keeps the data binding minimal and the styling in one place.
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__group-grid {
  display: grid;
  gap: 0 1.5rem;
  grid-template-columns: repeat(var(--mint-settings-cols, 1), minmax(0, 1fr));
}

/* ─────────────────────────────────────────────────────────────────────
 * Setting rows (5d): label + hint on the left, control on the right.
 * Numbers get a 120px right-aligned mono field, selects 220px; booleans
 * already render as row toggles; text-like fields stay full width.
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-light);
}

/* Dark --border-light equals the modal surface; the row hairline needs --border-color there. */
:where(html.dark) .mint-settings-modal__row {
  border-bottom-color: var(--border-color);
}

/* The field cell anchors the ↺ reset, which sits just left of the control (5d).
   --_settings-control-w is the control's width; stacked fields (text, custom slots)
   keep 0 and put the reset at the right end of their label line. */
.mint-settings-modal__row-field {
  --_settings-control-w: 0px;
  --_settings-reset-room: 1.875rem; /* 24px button + 6px gap */
  position: relative;
  min-width: 0;
}

.mint-settings-modal__row-field:has(> .mint-form-field > .mint-number-input) {
  --_settings-control-w: 7.5rem;
}

.mint-settings-modal__row-field:has(> .mint-form-field > .mint-select) {
  --_settings-control-w: 13.75rem;
}

.mint-settings-modal__row-field:has(.mint-toggle__track--md) {
  --_settings-control-w: 2rem;
}

/* Toggle rows: label + hint on the left, the switch centred on that block (as number / select rows). */
.mint-settings-modal__row-field:has(.mint-toggle--row) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
}

.mint-settings-modal__row-field:has(.mint-toggle--row) > .mint-form-field,
.mint-settings-modal__row-field .mint-toggle--row {
  display: contents;
}

.mint-settings-modal__row-field .mint-toggle--row .mint-toggle__copy {
  position: relative;
  grid-column: 1;
  grid-row: 1;
}

.mint-settings-modal__row-field .mint-toggle--row .mint-toggle__track {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.mint-settings-modal__row-hint {
  grid-column: 1;
  grid-row: 2;
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Search results name their group above the label. */
.mint-settings-modal__row-group {
  position: relative;
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

/* Modified from default: 6px primary dot in the pane gutter, on the row's first text line. */
.mint-settings-modal__row--modified > .mint-settings-modal__row-group::before,
.mint-settings-modal__row--modified:not(:has(> .mint-settings-modal__row-group)) .mint-form-field__label-row::before,
.mint-settings-modal__row--modified:not(:has(> .mint-settings-modal__row-group)) .mint-toggle__copy::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.75rem;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 9999px;
  background-color: var(--color-primary);
}

.mint-settings-modal__row-field .mint-form-field__label-row {
  position: relative;
}

/* Keep label and hint clear of the reset. */
.mint-settings-modal__row--modified .mint-settings-modal__row-field:has(.mint-toggle--row),
.mint-settings-modal__row--modified .mint-form-field:has(> .mint-number-input, > .mint-select) {
  column-gap: calc(1rem + var(--_settings-reset-room));
}

.mint-settings-modal__row--modified .mint-form-field:not(:has(> .mint-number-input, > .mint-select)) > .mint-form-field__label-row {
  padding-right: var(--_settings-reset-room);
}

.mint-settings-modal__reset {
  position: absolute;
  top: 50%;
  right: calc(var(--_settings-control-w) + 0.375rem);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--mint-transition), color var(--mint-transition);
}

/* Stacked field: the reset ends the label line. */
.mint-settings-modal__row-field:not(:has(> .mint-form-field > .mint-number-input, > .mint-form-field > .mint-select, .mint-toggle--row)) > .mint-settings-modal__reset {
  top: -0.25rem;
  right: 0;
  transform: none;
}

.mint-settings-modal__reset:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-settings-modal__reset:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-settings-modal__reset svg {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-settings-modal__group-grid .mint-form-field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mint-settings-modal__group-grid .mint-form-field__hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.125rem;
  align-items: center;
}

.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__label-row {
  grid-column: 1;
  grid-row: 1;
}

.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__hint,
.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__error {
  grid-column: 1;
  grid-row: 2;
}

.mint-settings-modal__group-grid .mint-form-field > .mint-number-input,
.mint-settings-modal__group-grid .mint-form-field > .mint-select {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.mint-settings-modal__group-grid .mint-form-field > .mint-number-input {
  width: 7.5rem;
}

.mint-settings-modal__group-grid .mint-form-field > .mint-number-input .mint-number-input__input {
  text-align: right;
}

/* Settings rows show the plain 120px value field (no steppers, no range fill); arrow keys still step it. */
.mint-settings-modal__group-grid .mint-form-field > .mint-number-input :is(.mint-number-input__steppers, .mint-number-input__wash, .mint-number-input__rule) {
  display: none;
}

.mint-settings-modal__group-grid .mint-form-field > .mint-select {
  width: 13.75rem;
}

/* No hint or error: the label shares the control's centre line instead of sitting on top of an empty row. */
.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select):not(:has(> .mint-form-field__hint, > .mint-form-field__error)) > .mint-form-field__label-row {
  grid-row: 1 / span 2;
}

.mint-settings-modal__group-grid .mint-toggle__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* The pane header already shows the active group's description; the rail keeps icon + name (5d).
   BaseModal's Teleport root drops class fallthrough, so scope through :has(). */
.mint-modal__split:has(.mint-settings-modal) .mint-modal__rail-item-description {
  display: none;
}

/* Modified count in the rail: 5px primary dot + mono number (schema mode only). */
.mint-modal__split:has(.mint-settings-modal--schema) .mint-modal__rail-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-secondary);
}

.mint-modal__split:has(.mint-settings-modal--schema) .mint-modal__rail-item-meta::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background-color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────
 * Header: title + built-in search
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.mint-settings-modal__search {
  position: relative;
  flex: 0 1 15rem;
  min-width: 0;
  margin-left: auto;
}

.mint-settings-modal__search-icon {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
  transform: translateY(-50%);
  pointer-events: none;
}

.mint-settings-modal__search .mint-input {
  box-sizing: border-box;
  width: 100%;
  padding-left: 2rem;
}

/* Native clear button drawn as the SDK's × in --text-secondary. */
.mint-settings-modal__search .mint-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────
 * Pane / group header: title + description, "Restore group defaults"
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.mint-settings-modal__head-text {
  flex: 1;
  min-width: 0;
}

.mint-settings-modal__head-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.mint-settings-modal__head-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.mint-settings-modal__head-description {
  margin: 0.125rem 0 0 !important;
  padding: 0 !important;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.mint-settings-modal__restore-group {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text-secondary-strong);
  cursor: pointer;
  transition: background-color var(--mint-transition);
}

.mint-settings-modal__restore-group:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.mint-settings-modal__restore-group:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-settings-modal__restore-group:disabled {
  color: var(--text-muted);
  cursor: default;
}

.mint-settings-modal__restore-group svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* In the body (stacked / tab layouts) the header sits above its group's rows. */
.mint-settings-modal > .mint-settings-modal__head,
.mint-settings-modal__group > .mint-settings-modal__head {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

:where(html.dark) .mint-settings-modal > .mint-settings-modal__head,
:where(html.dark) .mint-settings-modal__group > .mint-settings-modal__head {
  border-bottom-color: var(--border-color);
}

.mint-settings-modal__empty {
  margin: 0;
  padding: 3rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────
 * Appearance: theme preview cards, palette swatch strips, density preview
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__setting {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border-light);
}

:where(html.dark) .mint-settings-modal__setting {
  border-bottom-color: var(--border-color);
}

.mint-settings-modal__setting:last-of-type {
  border-bottom: none;
}

/* Label left, control right, preview underneath. */
.mint-settings-modal__setting--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.625rem 1rem;
  align-items: start;
}

.mint-settings-modal__setting-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mint-settings-modal__setting-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mint-settings-modal__setting-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mint-settings-modal__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.mint-settings-modal__theme {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* Fixed light / dark sample colours for the previews, built from the active
   theme's tokens: the opposite theme borrows the ink tokens, which are that
   theme's surfaces (dark ink #1E293B / light ink #F8FAFC). */
.mint-settings-modal__theme-preview {
  --_pv-light-bg: var(--bg-primary);
  --_pv-light-card: var(--bg-card);
  --_pv-light-line: var(--_control-border-strong);
  --_pv-light-border: var(--border-color);
  --_pv-dark-bg: var(--text-primary);
  --_pv-dark-card: color-mix(in srgb, var(--text-primary) 80%, var(--text-secondary-strong));
  --_pv-dark-line: var(--text-secondary-strong);
  --_pv-dark-border: var(--text-secondary-strong);

  display: flex;
  width: 8.25rem;
  height: 5rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--border-color);
  transition: box-shadow var(--mint-transition);
}

:where(html.dark) .mint-settings-modal__theme-preview {
  --_pv-light-bg: color-mix(in srgb, var(--text-primary) 90%, var(--text-secondary-strong));
  --_pv-light-card: var(--text-primary);
  --_pv-light-line: var(--text-secondary-strong);
  --_pv-light-border: var(--text-secondary-strong);
  --_pv-dark-bg: var(--bg-primary);
  --_pv-dark-card: var(--bg-card);
  --_pv-dark-line: var(--_control-border-strong);
  --_pv-dark-border: var(--border-color);
}

.mint-settings-modal__theme--active .mint-settings-modal__theme-preview {
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--color-primary);
}

.mint-settings-modal__theme:focus-visible {
  outline: none;
}

.mint-settings-modal__theme:focus-visible .mint-settings-modal__theme-preview {
  box-shadow: var(--focus-ring-offset);
}

.mint-settings-modal__theme-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding: 0.5rem;
}

.mint-settings-modal__theme-half + .mint-settings-modal__theme-half {
  padding-left: 0;
}

.mint-settings-modal__theme-half--light {
  --_pv-bg: var(--_pv-light-bg);
  --_pv-card: var(--_pv-light-card);
  --_pv-line: var(--_pv-light-line);
  --_pv-border: var(--_pv-light-border);
}

.mint-settings-modal__theme-half--dark {
  --_pv-bg: var(--_pv-dark-bg);
  --_pv-card: var(--_pv-dark-card);
  --_pv-line: var(--_pv-dark-line);
  --_pv-border: var(--_pv-dark-border);
}

.mint-settings-modal__theme-half {
  background-color: var(--_pv-bg);
}

.mint-settings-modal__theme-line {
  width: 60%;
  height: 6px;
  border-radius: 2px;
  background-color: var(--_pv-line);
}

.mint-settings-modal__theme-card {
  flex: 1;
  border: 1px solid var(--_pv-border);
  border-radius: var(--radius-sm);
  background-color: var(--_pv-card);
}

.mint-settings-modal__theme-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary-strong);
}

.mint-settings-modal__theme--active .mint-settings-modal__theme-label {
  font-weight: 600;
  color: var(--text-primary);
}

.mint-settings-modal__theme-radio {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
}

.mint-settings-modal__theme--active .mint-settings-modal__theme-radio {
  box-shadow: inset 0 0 0 4px var(--color-primary);
}

.mint-settings-modal__palettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.mint-settings-modal__palette {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-color);
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mint-transition);
}

.mint-settings-modal__palette:hover {
  background-color: var(--bg-hover);
}

.mint-settings-modal__palette:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-settings-modal__palette--active,
.mint-settings-modal__palette--active:hover {
  background-color: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.mint-settings-modal__swatches {
  display: flex;
  flex-shrink: 0;
  gap: 3px;
}

.mint-settings-modal__swatch {
  width: 0.75rem;
  height: 1.25rem;
  border-radius: 3px;
}

.mint-settings-modal__palette-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-settings-modal__palette--active .mint-settings-modal__palette-name {
  font-weight: 600;
}

.mint-settings-modal__palette-check {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-primary);
  visibility: hidden;
}

.mint-settings-modal__palette--active .mint-settings-modal__palette-check {
  visibility: visible;
}

.mint-settings-modal__density-preview {
  --_density-row: 2.125rem;

  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
}

.mint-settings-modal__density-preview--compact {
  --_density-row: 1.75rem;
}

.mint-settings-modal__density-preview--comfortable {
  --_density-row: 2.625rem;
}

.mint-settings-modal__density-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 5rem;
  align-items: center;
  height: var(--_density-row);
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  transition: height 160ms ease;
}

.mint-settings-modal__density-row:last-child {
  border-bottom: none;
}

.mint-settings-modal__density-row > span + span {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mint-settings-modal__density-row--head {
  height: 1.875rem;
  background-color: var(--bg-primary);
  font-weight: 500;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────
 * Footer: applied status + Done
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: auto;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mint-settings-modal__status-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--mint-success-hover);
}

@media (prefers-reduced-motion: reduce) {
  .mint-settings-modal__density-row,
  .mint-settings-modal__theme-preview {
    transition: none;
  }
}