/* =============================================================================
   04 Blueprint · css/contact.css · Sheet 05, Request for proposal (contact.html)
   Page styles only. Shared tokens and components live in css/base.css; read
   COMPONENTS.md before adding anything here. Sections (DESIGN.md 6.5):
   #start-a-project (hero), #rfp-form (the form as a ruled title block, side panel).
   Order: layout, components, sections, motion, media queries (min-width).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Hero (#start-a-project): status row under the lede
   ----------------------------------------------------------------------------- */
.hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}

.hero-response {
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.3;
}

/* -----------------------------------------------------------------------------
   2. Layout (#rfp-form): form sheet, then the side panel
   ----------------------------------------------------------------------------- */
.rfp-layout {
  display: grid;
  row-gap: var(--s-8);
}

.rfp-sheet {
  position: relative;
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   3. The form: a title block. Cells are ruled by a 1px gap on a rule ground.
   ----------------------------------------------------------------------------- */
.rfp {
  display: grid;
  gap: 1px;
  border: 2px solid var(--ink);
  background: var(--rule);
}

.rfp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-4);
  background: var(--paper-2);
}

.rfp-title {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  letter-spacing: 0.01em;
  line-height: 1;
}

.rfp-form-no {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.rfp-cells {
  display: grid;
  gap: 1px;
}

.field-label span:first-child {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.field-error .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.rfp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-5);
  padding: var(--s-4);
  background: var(--paper-2);
}

.rfp-messages {
  display: grid;
  flex: 1 1 16rem;
  gap: var(--s-2);
}

.rfp-status {
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.rfp-status:empty {
  display: none;
}

.rfp-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--accent);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.rfp-error[hidden] {
  display: none;
}

.rfp-error .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.2em;
}

.rfp-error a {
  color: var(--ink);
}

.rfp-send {
  flex: 1 1 100%;
}

/* The form grid: title row, cells, foot row. The RECEIVED panel takes the place of the cells and
   the foot row (same grid area), so it is exactly as large as the part of the form it replaces. */
.rfp-head,
.rfp-cells,
.rfp-foot {
  grid-column: 1;
}

.rfp-cells {
  grid-row: 2;
  transition: opacity var(--dur-2) linear;
}

.rfp-foot {
  grid-row: 3;
  transition: opacity var(--dur-2) linear;
}

/* Sent: the cells and the foot row fade out and take no input; the title row stays. The ground
   goes dark too, or the rule colour would show where the cells were. */
.rfp.is-sent {
  background: var(--paper-2);
}

.rfp.is-sent :is(.rfp-cells, .rfp-foot) {
  opacity: 0;
}

/* The polite region still announces the success text; the panel shows it */
.rfp.is-sent .rfp-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rfp.is-sent .btn {
  cursor: default;
}

.rfp-success {
  position: relative;
  z-index: 1;
  grid-row: 2 / 4;
  grid-column: 1;
  display: grid;
  align-content: center;
  gap: var(--s-3);
  margin: var(--s-4);
  padding: var(--s-6) var(--s-5);
  border: 2px solid var(--focus);
  background: var(--paper-2);
}

.rfp-success[hidden] {
  display: none;
}

.rfp-success-title {
  padding-right: 6.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-stretch: 62.5%;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.rfp-success p {
  color: var(--ink-2);
}

/* The stamp lands in the top right corner of the panel */
.rfp-success .stamp {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 7rem;
  height: 7rem;
  rotate: 9deg;
}

/* -----------------------------------------------------------------------------
   4. Side panel: next steps (flow process chart), other channels, receipt
   ----------------------------------------------------------------------------- */
.rfp-side {
  display: grid;
  align-content: start;
  gap: var(--s-7);
  min-width: 0;
}

.side-title {
  margin-bottom: var(--s-5);
  padding-top: var(--s-3);
  border-top: 2px solid var(--ink);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

/* ASME flow process chart: one symbol per operation on a vertical flow line */
.op-chart {
  display: grid;
  gap: var(--s-5);
}

.op {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--s-3);
}

.op-symbol {
  grid-row: 1 / span 3;
  width: 2rem;
  height: 2rem;
  color: var(--ink);
}

/* The flow line runs from one symbol to the next */
.op:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: calc(-1 * var(--s-5));
  left: calc(1rem - 0.5px);
  width: 1px;
  background: var(--ink-3);
}

.op-no {
  color: var(--accent);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

.op-name {
  margin-top: var(--s-1);
  font-weight: 700;
  line-height: 1.3;
}

.op-text {
  margin-top: var(--s-1);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* Channels: ruled rows, the whole row is the link */
.channels {
  border-top: 1px solid var(--rule);
}

.channel {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-4);
  min-height: 3.5rem;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color var(--dur-1) linear, color var(--dur-1) linear;
}

.channel-icon {
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
}

.channel-name {
  grid-column: 2;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
}

.channel-note {
  grid-column: 2;
  color: var(--ink-3);
  font-size: var(--fs-small);
  line-height: 1.3;
}

.channel > .icon {
  grid-row: 1 / span 2;
  grid-column: 3;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--dur-2) var(--ease-snap);
}

/* -----------------------------------------------------------------------------
   5. Motion (motion allowed only)
   ----------------------------------------------------------------------------- */
html.motion-ok .rfp-success {
  animation: received-in var(--dur-2) var(--ease-settle) both;
}

@keyframes received-in {
  from {
    opacity: 0;
  }
}

/* -----------------------------------------------------------------------------
   6. Media queries
   ----------------------------------------------------------------------------- */
@media (hover: hover) {
  .channel:hover {
    background: var(--paper-3);
    color: var(--ink);
  }

  .channel:hover > .icon {
    transform: translate(0.125rem, -0.125rem);
  }
}

@media (min-width: 30rem) {
  .hero-response {
    padding-left: var(--s-5);
    border-left: 1px solid var(--ink-3);
  }

  .rfp-send {
    flex: 0 0 auto;
  }
}

@media (min-width: 48rem) {
  .rfp-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--wide {
    grid-column: 1 / -1;
  }

  .rfp-head,
  .rfp-foot {
    padding-inline: var(--s-5);
  }

  .rfp-success {
    margin: var(--s-5);
    padding: var(--s-7);
  }

  .rfp-success .stamp {
    top: var(--s-6);
    right: var(--s-6);
    width: 10rem;
    height: 10rem;
  }

  .field {
    padding-inline: var(--s-5);
  }
}

@media (min-width: 64rem) {
  .rfp-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .rfp-sheet {
    grid-column: 1 / span 7;
  }

  .rfp-side {
    grid-column: 9 / span 4;
  }
}