/* --- Tables ------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
thead th {
  background: var(--teal);
  color: var(--white);
  font-weight: 600;
}
tbody tr:nth-child(even) {
  background: var(--off-white);
}
td.numeric,
th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Forms -------------------------------------------------------------- */

.field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.field label {
  font-weight: 600;
}
.field .hint {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
/* Text-entry controls only. A radio or a checkbox stretched to the full width
   of its container draws its glyph centred in that box, which put the dot on
   its own line above the option text on the booking form (BOOT-146). They are
   sized by the browser and styled in the choice-list block below. */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  font: inherit;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
textarea {
  min-height: 6rem;
  resize: vertical;
}

/* A required field that is empty is MARKED, not merely unfilled. On the review
 * screen an unknown category renders exactly like this, and that visibility is
 * the whole safety property — see docs/architecture/bookkeeping-queue.md §6. */
.field-required-empty input,
.field-required-empty select {
  border-color: var(--pink-text);
  background: #fff8fb;
}

.form-grid {
  display: grid;
  gap: 0 var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .form-grid.two-up {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Notices ------------------------------------------------------------ */

.notice {
  padding: var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
}
.notice-error {
  background: var(--error-bg);
  color: var(--error-ink);
}
.notice-warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.notice-ok {
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.notice ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-6);
}

.badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge-confident {
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.badge-weak {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.badge-none {
  background: var(--error-bg);
  color: var(--error-ink);
}

/* --- Choice lists (radios and checkboxes on the booking form) ------------- */

.label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
/* One option: the control in a fixed first track, everything that describes it
   in the second. A wrapping option stays aligned to the control instead of
   re-flowing under it, and the hint lines up with the text it qualifies rather
   than being pushed across by a guessed margin. */
.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  align-items: start;
  padding: var(--space-2) 0;
  /* `.field label` bolds the question above these; an option is not a
     question, so only the name inside it is emphasised. */
  font-weight: 400;
  /* Centres a control one em tall on the first line of text, which is
     `line-height` ems tall: (1.65 - 1) / 2. The derivation is Bootstrap 5.3's
     `.form-check-input` margin-top in scss/forms/_form-check.scss. */
  --choice-control-offset: 0.325em;
}
.choice input {
  margin: var(--choice-control-offset) 0 0;
  justify-self: start;
}
.choice .choice-text strong {
  font-weight: 600;
}
/* Second row, still in the text column. */
.choice .hint {
  grid-column: 2;
}
.addon-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.addon-group legend {
  font-weight: 700;
  padding: 0 var(--space-2);
}

/* --- The booking form's running total ------------------------------------- */

/* The quote panel sits in the flow of the form, between what is being priced
   and when it should happen, so the price is visible while the boxes above it
   are still being ticked (BOOT-146). */
.quote-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--off-white);
}
.quote-panel h2 {
  margin-top: 0;
}
/* Narrower than the page default: two columns of text and money, not a data
   table that needs a scroller. */
.quote-lines {
  min-width: 0;
}
.quote-lines tfoot th,
.quote-lines tfoot td {
  font-weight: 700;
  border-bottom: none;
}
.quote-lines th,
.quote-lines td {
  padding: var(--space-2) 0;
}
.quote-lines thead th {
  background: transparent;
  color: inherit;
}