/* Moved from websites/templates/websites/website_settings.html (redesign
   checklist: local CSS out of the templates). Its two blocks style
   distinct classes, so one file at the first block's place keeps them. */

/* The next-step band: the step's name and description on the left,
   its one action on the right, wrapping on a narrow screen. */
.setup-next { display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; justify-content: space-between; }
.setup-next p { margin: 0; }
/* The checklist and connection rows: a state badge, then the link and
   its one-line explanation, one hairline between rows. */
.setup-links { list-style: none; margin: 0; padding: 0; }
.setup-links li { display: flex; gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); }
.setup-links li:first-child { border-top: 0; }
.setup-links .badge { flex: none; }
.setup-links .helptext { margin: 0; }
/* Every setting on the Analysis and Google Ads tabs is one .field of
   the UI kit: the label above, the control below, the helptext under it.
   Here the label is the heading of its setting, so it reads larger and
   darker than the helptext (the kit's 12px muted label under a 13.6px
   helptext read backwards), and a blank line separates one setting from
   the next. The three one-value settings put their Save button in a row
   with the control, at the control's height — a 36px input beside a
   31px button is what the page looked like until 2026-09-25. */
.setting-form { margin: var(--space-4) 0 0; }
.setting-form .field { margin-bottom: var(--space-6); }
.setting-form .field > label { font-size: 15px; font-weight: 600;
  color: var(--color-text); margin-bottom: 6px; }
.setting-form .field .helptext { font-size: 12.5px; }
.setting-form .control-row { display: flex; gap: var(--space-2); max-width: 32rem; }
.setting-form .control-row .input { flex: 1 1 auto; min-width: 0; }
.setting-form .control-row .input,
.setting-form input.input,
.setting-form .btn { height: 36px; min-height: 36px; margin: 0; }
.setting-form textarea.input { height: auto; min-height: 5.5rem; max-width: 48rem; }
.setting-form select.input[multiple] { height: auto; min-height: 9rem; max-width: 32rem;
  padding: 4px 0; }
.setting-form select.input[multiple] option { padding: 3px 10px; }
.setting-form input.input[type="number"] { max-width: 32rem; }
.setting-form .field-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.setting-form .field-row .field { flex: 1 1 18rem; }
.setting-form .form-actions { margin-top: var(--space-2); }
/* The sections' own sub-heads inside the Evidence column (the black
   bar is the section's head). */
.settings-sub { font-size: 17px; margin: var(--space-6) 0 var(--space-2); }
.settings-sub:first-child { margin-top: 0; }
/* Two one-number settings that belong together (the two page caps, the
   two competitor caps) side by side, one under the other on a phone. */
.setting-pair { display: grid; gap: 0 var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.setting-pair .setting-form { margin-top: var(--space-4); }
/* The margin above the products table is one short number. */
.profile-margin .input { max-width: 12rem; }
/* The live cost estimate: last on the Settings panel, in normal flow.
   Each cell is a figure over a one-line detail. */
.cost-estimate { background: var(--color-bg); border: 1px solid var(--color-divider);
  padding: var(--space-3) var(--space-4); margin-top: var(--space-2); }
.cost-estimate table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cost-estimate th, .cost-estimate td { text-align: left; vertical-align: top;
  padding: 4px var(--space-3) 4px 0; }
.cost-estimate thead th { font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.cost-estimate tbody th { font-weight: 600; white-space: nowrap; }
.cost-estimate td strong { display: block; font-size: 16px; }
.cost-estimate td .helptext { display: block; font-size: 12px; margin: 0; }
.cost-estimate > .helptext { font-size: 12px; margin: var(--space-2) 0 0; }
.cost-estimate.is-draft { border-color: var(--color-accent); }
@media (max-width: 720px) {
  .cost-estimate { position: static; }
  .cost-estimate th, .cost-estimate td { padding-right: var(--space-2); }
}


.settings-regenerate-list { margin: var(--space-2) 0; padding-left: var(--space-4); }
.settings-regenerate-list li { margin: 2px 0; }