/**
 * MCB Productions — Request flow (/quote and /request-quote)
 *
 * "The Bench." The request is laid out on a bench: the list (or the event
 * form) on the left, and a graphite rail seated beside it carrying the
 * running total and the way onward. The rail is the readout panel from
 * DESIGN.md §5 doing a third job, and it sticks as the page is worked
 * through, so on a long list the count and the commit never scroll away.
 *
 * ONE STYLESHEET, TWO PAGES. /quote is the list, /request-quote is the
 * event form; they are one continuous flow that shares the head, the grid,
 * and the rail, so they share this file rather than forking the rail into
 * two. Layout only — every component it arranges (the request row, the
 * stepper, the inline confirm, the form controls) is defined in base.css.
 *
 * Chosen 2026-07-23 over "The Order Form" (a single printed sheet) and
 * "One Pass" (list and form merged onto one page). See
 * docs/briefs/2026-07-23-request-path.md.
 *
 * PROMOTION CANDIDATE: the rail (.rq-rail-*) is a summary-panel-beside-a-
 * list, and the customer portal wants exactly this shape on nearly every
 * screen. When the portal work starts, lift it into base.css and document
 * it in DESIGN.md §5 rather than re-deriving it there.
 */

/* =====================================================================
   HEAD
   ===================================================================== */

.rq-head {
  padding-block: var(--space-4xl) var(--space-2xl);
}

.rq-eyebrow {
  color: var(--ink-muted);
}

.rq-display {
  margin-top: var(--space-md);
  max-width: 16ch;
}

.rq-lede {
  margin-top: var(--space-xl);
  max-width: var(--measure-lede);
  color: var(--ink-muted);
}

/* =====================================================================
   BODY AND GRID
   ===================================================================== */

.rq-body {
  padding-bottom: var(--space-5xl);
}

.rq-alert {
  margin-bottom: var(--space-2xl);
}

.rq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
}

@media (min-width: 1024px) {
  .rq-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-4xl);
    /* THE STICKY TRAP, RECORDED IN CLAUDE.md AND HIT AGAIN HERE.
       `align-items: start` would keep the list column from stretching,
       which is what we want — but it also collapses the RAIL's column to
       the rail's own height, leaving a sticky child zero travel. It then
       behaves exactly like a static block, silently. The list/form column
       is pinned to start individually and the rail column is stretched, so
       the sticky element has a containing block to move inside. */
    align-items: stretch;
  }

  .rq-list,
  .rq-form {
    align-self: start;
  }

  .rq-rail {
    align-self: stretch;
  }

  .rq-rail-inner {
    position: sticky;
    top: var(--space-xl);
  }
}

/* =====================================================================
   THE RAIL
   A seated graphite object: bevel on the top edge, contact shadow
   underneath, bounded on all four sides with paper visible around it.
   Divisions are engraved as rules, never raised as nested boxes.
   ===================================================================== */

.rq-rail-panel {
  background: var(--graphite-900);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-seated);
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  color: var(--paper-200);
}

.rq-rail-title {
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--graphite-700);
  color: var(--graphite-300);
}

.rq-rail-figures {
  display: grid;
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
}

.rq-rail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
}

.rq-rail-row dt {
  color: var(--graphite-300);
  font-family: var(--font-sans);
  font-size: var(--type-data-size);
  line-height: var(--type-data-leading);
}

.rq-rail-row dd {
  margin: 0;
  color: var(--paper-000);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
}

.rq-rail-note {
  margin: 0 0 var(--space-lg);
  color: var(--graphite-300);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.55;
}

.rq-rail-note--last {
  margin: var(--space-lg) 0 0;
}

/* Signal-ink dies on graphite, so the in-rail link takes the bright step
   of the accent, the same as every other link on a dark ground. */
.rq-rail-link {
  color: var(--signal-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.rq-rail-link:hover {
  color: var(--paper-000);
}

/* The held-commit notice, inside the rail directly above the control it
   is holding back. Engraved into the faceplate as a ruled division rather
   than raised as a panel — a card inside the rail would be a card inside
   a card. */
.rq-rail-blocked {
  display: grid;
  gap: var(--space-xs);
  margin: 0 0 var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--graphite-700);
  color: var(--paper-200);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.55;
}

.rq-rail-blocked-title {
  color: var(--alert);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}

.rq-commit {
  width: 100%;
  margin-top: var(--space-sm);
}

/* =====================================================================
   THE LIST (/quote)
   Sections are headed and ruled. Lighter than a heavy sheet would be,
   because the rail is already carrying structural weight and two strong
   devices on one screen compete.
   ===================================================================== */

.rq-list .request-section + .request-section {
  margin-top: var(--space-3xl);
}

.rq-list .request-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--paper-300);
}

.rq-list .request-section-heading {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-leading);
  letter-spacing: var(--type-title-tracking);
  color: var(--ink);
}

.rq-list .request-section-count {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--type-data-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}

.rq-list .request-section-note {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  max-width: 54ch;
  color: var(--ink-muted);
  font-family: var(--font-serif);
  font-size: var(--type-body-size);
  line-height: 1.5;
}

.rq-list .request-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =====================================================================
   THE FORM (/request-quote)
   ===================================================================== */

.rq-form-section + .rq-form-section {
  margin-top: var(--space-4xl);
}

.rq-form-heading {
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--paper-300);
}

.rq-field-grid {
  display: grid;
  gap: var(--space-xl);
}

/* DIRECT CHILDREN ONLY. Without the child combinator these rules also
   match the two `.field`s sitting side by side inside a field grid — they
   are adjacent siblings too — and push the right-hand one of every pair
   24px below its partner. */
.rq-form-section > .field + .field,
.rq-form-section > .field + .rq-field-grid,
.rq-form-section > .rq-field-grid + .field,
.rq-form-section > .rq-field-grid + .rq-field-grid,
.rq-form-section > .choice-set + .field,
.rq-form-section > .field + .choice-set,
.rq-form-section > .rq-field-grid + .choice-set {
  margin-top: var(--space-xl);
}

/* The form column shares the page with the rail, so fields pair later
   than a full-width sheet would: below 900px of column width a two-up row
   would put the city and the state in half a phone each. */
@media (min-width: 900px) {
  .rq-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rq-field-grid--address {
    grid-template-columns: minmax(0, 1fr) 7rem 9rem;
  }
}

.rq-rental-fields {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--paper-200);
}

.rq-rental-fields > * + * {
  margin-top: var(--space-xl);
}

/* =====================================================================
   EMPTY AND ERROR
   ===================================================================== */

.rq-empty,
.rq-load-error {
  padding-block: var(--space-4xl);
}

.rq-empty-heading,
.rq-load-error-heading {
  margin: 0;
}

.rq-empty-note,
.rq-load-error-message {
  max-width: 46ch;
  margin: var(--space-lg) 0 var(--space-2xl);
  color: var(--ink-muted);
}