/* ── Forms ───────────────────────────────────────────────────────────────
   Every fieldset/legend/label/input/select rule in the app, in one place.
   Buttons stay in base.css — they're used all over the shell (nav, table
   rows, the stepper), not just inside forms. */
select,
input {
  font: inherit;
  color: inherit;
  background: var(--bg);
}
select,
input:not([type=checkbox]) {
  border: 1px solid var(--border);
  padding: var(--space-xsmall) var(--space-small);
}
fieldset {
  border: 1px solid var(--faint);
  padding: 10px var(--space-regular);
  margin: 0;
}
legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Sidebar: comparison basis ──────────────────────────────────────────── */
#sidebar fieldset {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: var(--space-small) var(--space-regular);
  align-items: center;
}
#sidebar fieldset > label {
  font-size: var(--fs-regular);
}
/* Anything that isn't one half of a label/control pair (the rival list, the
   summary line) spans both columns and stacks on its own row instead. */
#sidebar fieldset > :not(label):not(input):not(select) {
  grid-column: 1 / -1;
}
#sidebar select {
  width: 100%;
  min-width: 0;
}

/* ── Settings form ───────────────────────────────────────────────────────── */
#settings-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
}
#settings-form fieldset {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: var(--space-small) var(--space-regular);
  align-items: center;
}
#settings-form fieldset > label {
  color: var(--muted);
  font-size: var(--fs-regular);
}
/* Anything that isn't one half of a label/control pair (hints, the tier
   list, the checkbox row) spans both columns and stacks on its own row. */
#settings-form fieldset > :not(label):not(input):not(select) {
  grid-column: 1 / -1;
}
#settings-form input[type=number] {
  width: 4.5em;
  text-align: right;
}
/* Each tier row is its own label, so it doesn't inherit the fieldset's grid —
   give it the same 9em column instead of the generic flex label, or every
   row's input starts wherever that row's own label text happens to end. */
.interval {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: var(--space-small) var(--space-regular);
  align-items: center;
}
.interval > span:last-child {
  display: flex;
  align-items: center;
  gap: var(--space-xsmall);
}
#settings-form input[type=text],
#settings-form input[type=url] {
  width: 100%;
  min-width: 0;
}
/* Same specificity as the input[type=text]/[type=url] rule above (id + one
   attribute + one type selector each) — this must stay physically after it,
   or the currency field regains full width and loses its fixed width. */
#settings-form input[name=currency] {
  width: 5.5em;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Add-hotel form ──────────────────────────────────────────────────────── */
#add-hotel {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: var(--space-small) var(--space-regular);
  align-items: center;
  margin-top: var(--space-xsmall);
  padding-top: var(--space-regular);
  border-top: 1px dashed var(--faint);
}
#add-hotel > label { color: var(--muted); font-size: var(--fs-regular); }
#add-hotel > :not(label):not(input) { grid-column: 1 / -1; }
#add-hotel input[type=text],
#add-hotel input[type=url] { width: 100%; min-width: 0; }