/* settings tab styles — owned by the settings builder.
 *
 * A three-column card grid that collapses to two and then one. Every class is
 * scoped to the settings pane so nothing here can reach another tab's markup.
 *
 * The one rule this sheet exists to hold: .st-total-bad and .st-total-ok are
 * the visible half of the weights guard. A total that is not 100 is red, its
 * save button is disabled, and no write is attempted.
 */

.pane[data-view="settings"] .settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  align-items: start;
}

@media (max-width: 1400px) {
  .pane[data-view="settings"] .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .pane[data-view="settings"] .settings-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ card */

.pane[data-view="settings"] .st-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s4);
}

.pane[data-view="settings"] .st-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.pane[data-view="settings"] .st-head-text { flex: 1 1 auto; min-width: 0; }

.pane[data-view="settings"] .st-icon {
  font-size: var(--fs-section);
  line-height: 1;
  flex: 0 0 auto;
}

.pane[data-view="settings"] .st-title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}

.pane[data-view="settings"] .st-sub,
.pane[data-view="settings"] .st-caption,
.pane[data-view="settings"] .st-sublabel {
  margin: var(--s1) 0 0;
  font-size: var(--fs-caption);
  color: var(--c-muted);
  line-height: var(--lh-base);
}

.pane[data-view="settings"] .st-head-btn { flex: 0 0 auto; }

.pane[data-view="settings"] .st-body > * + * { margin-top: var(--s3); }

/* ----------------------------------------------------------------- forms */

.pane[data-view="settings"] .st-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.pane[data-view="settings"] .st-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.pane[data-view="settings"] .st-field { display: block; }

.pane[data-view="settings"] .st-label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--c-body);
  margin-bottom: var(--s1);
}

.pane[data-view="settings"] .st-sublabel {
  display: block;
  font-weight: var(--fw-regular);
}

.pane[data-view="settings"] .st-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-body);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-ctl);
}

.pane[data-view="settings"] .st-input:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: -1px;
}

.pane[data-view="settings"] .st-toggle-row { padding: var(--s2) 0; }

/* ------------------------------------------------------------------ ICP */

.pane[data-view="settings"] .st-icp-row + .st-icp-row { margin-top: var(--s3); }

.pane[data-view="settings"] .st-chipbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-ctl);
}

.pane[data-view="settings"] .st-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  font-size: var(--fs-pill);
  color: var(--c-heading);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
}

.pane[data-view="settings"] .st-chip-x {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--c-muted);
  font-size: var(--fs-pill);
  padding: 0;
  line-height: 1;
}

.pane[data-view="settings"] .st-chip-input {
  flex: 1 1 120px;
  min-width: 100px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-body);
}

.pane[data-view="settings"] .st-chip-input:focus { outline: none; }

/* ------------------------------------------------------------- services */

.pane[data-view="settings"] .st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.pane[data-view="settings"] .st-table th {
  text-align: left;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  padding: var(--s2) var(--s2);
  border-bottom: 1px solid var(--c-border);
}

.pane[data-view="settings"] .st-table td {
  padding: var(--s2);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

.pane[data-view="settings"] .st-srv-name {
  display: block;
  color: var(--c-heading);
}

.pane[data-view="settings"] .st-srv-meta {
  display: block;
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

.pane[data-view="settings"] .st-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--c-heading);
}

.pane[data-view="settings"] .st-srv-actions {
  text-align: right;
  white-space: nowrap;
}

.pane[data-view="settings"] .st-icon-btn {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--c-muted);
  padding: var(--s1);
  font-size: var(--fs-body);
}

.pane[data-view="settings"] .st-inactive { opacity: 0.6; }

/* -------------------------------------------------------------- weights */

.pane[data-view="settings"] .st-weight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 1.2fr) 64px;
  align-items: center;
  gap: var(--s3);
}

.pane[data-view="settings"] .st-weight + .st-weight { margin-top: var(--s3); }

.pane[data-view="settings"] .st-range { width: 100%; accent-color: var(--c-primary); }

.pane[data-view="settings"] .st-num {
  width: 100%;
  box-sizing: border-box;
  padding: var(--s1) var(--s2);
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--c-body);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-ctl);
}

.pane[data-view="settings"] .st-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-ctl);
  font-size: var(--fs-caption);
}

.pane[data-view="settings"] .st-total-n {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: var(--c-card);
}

.pane[data-view="settings"] .st-total-ok {
  color: var(--c-green);
  background: var(--c-green-tint);
}

.pane[data-view="settings"] .st-total-bad {
  color: var(--c-red);
  background: var(--c-red-tint);
}

/* --------------------------------------------------------- call windows */

.pane[data-view="settings"] .st-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: var(--s2);
}

.pane[data-view="settings"] .st-day + .st-day { margin-top: var(--s2); }

.pane[data-view="settings"] .st-day .st-label { margin-bottom: 0; }

.pane[data-view="settings"] .st-dash { color: var(--c-muted); }

/* ------------------------------------------------------------- doctrine */

.pane[data-view="settings"] .st-locked {
  background: var(--c-primary-tint);
  border-color: var(--c-primary-tint);
}

.pane[data-view="settings"] .st-locked .st-title { font-size: var(--fs-section); }

.pane[data-view="settings"] .st-doctrine {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--c-body);
  line-height: var(--lh-base);
}

/* ----------------------------------------------------------- job health */

.pane[data-view="settings"] .st-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s2);
  padding: var(--s2) 0;
  font-size: var(--fs-body);
}

.pane[data-view="settings"] .st-job + .st-job { border-top: 1px solid var(--c-border); }

.pane[data-view="settings"] .st-job-label { color: var(--c-heading); }

.pane[data-view="settings"] .st-job-state {
  color: var(--c-body);
  text-align: right;
}

.pane[data-view="settings"] .st-job-state .st-sublabel { text-align: right; }

.pane[data-view="settings"] .st-dot {
  width: 8px;
  height: 8px;
  margin-top: var(--s1);
  border-radius: var(--r-pill);
  background: var(--c-slate);
}

.pane[data-view="settings"] .st-dot.dot-ok { background: var(--c-green); }
.pane[data-view="settings"] .st-dot.dot-fail { background: var(--c-red); }
.pane[data-view="settings"] .st-dot.dot-never { background: var(--c-slate); }
.pane[data-view="settings"] .st-dot.dot-unknown { background: var(--c-slate); }

/* ---------------------------------------------------------------- tests */

.pane[data-view="settings"] .st-tests-counts {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}

.pane[data-view="settings"] .st-count {
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

.pane[data-view="settings"] .st-count-pass {
  color: var(--c-green);
  background: var(--c-green-tint);
}

.pane[data-view="settings"] .st-count-fail {
  color: var(--c-red);
  background: var(--c-red-tint);
}

.pane[data-view="settings"] .st-code {
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-ctl);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-caption);
  color: var(--c-body);
  overflow-x: auto;
}

/* ---------------------------------------------------------------- guide */

.pane[data-view="settings"] .st-guide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s2);
  border: 0;
  border-radius: var(--r-ctl);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-heading);
  text-align: left;
}

.pane[data-view="settings"] .st-guide-row + .st-guide-row { border-top: 1px solid var(--c-border); }

.pane[data-view="settings"] .st-guide-row:hover { background: var(--c-primary-tint); }

.pane[data-view="settings"] .st-guide-caret { color: var(--c-muted); }

.pane[data-view="settings"] .st-guide-body p {
  margin: 0 0 var(--s3);
  color: var(--c-body);
  line-height: var(--lh-base);
}