/* ==========================================================================
   NH Media Web - funnel lane
   --------------------------------------------------------------------------
   Loaded only by the funnel pages (/feedback, /review, /signup), after
   styles.css. /feedback carries the project intake form too since the two
   pages were merged, so the intake parts below live there now.

   Everything these pages could borrow from the main sheet
   is borrowed: bands, tiers, fields, buttons, check lists, the status box.
   What is left below is the handful of parts that exist nowhere else on the
   site: the note under a plan's checkout button, long help text under a
   field, the section rules inside a very long form, the upload drop area
   with its per-file status list, and the review page's section rows.

   Same rules as the main sheet: no images, no data: URIs, no inline styles,
   tokens only. Nothing here overrides a base rule, so deleting this file
   would leave both pages plain but still readable.
   ========================================================================== */

/* ---------- Plan cards: the line under the checkout button ---------- */

.tier__cta-note {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--stone);
}

.tier__cta-note a { color: var(--charcoal); }

/* Pushes the "full details" line to the bottom of every card so the three
   cards line up however uneven the feature lists are. */
.tier__foot { margin-top: auto; padding-top: 1.25rem; }

/* ---------- Long forms ---------- */

/* /feedback carries two forms since the intake page was folded into it, so
   their send buttons cannot share the main sheet's #form-submit id. This
   restates the spacing that rule gives them. */
#feedback-submit, #intake-submit { margin-top: 1.5rem; }

/* A confirmation is the whole page, so it gives the second column back and
   centers in the full width rather than sitting in the form column with an
   empty half page beside it. */
@media (min-width: 900px) {
  .form-grid--alone { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- /feedback: the lanes join the lead ----------
   "What do you think?" and the three answers to it are one question, so they
   sit together rather than a band apart. Only while the lanes are actually
   open: a visitor with no demo reference sees the locked message in the head
   band instead, and that keeps the band's full air under it. */
main:has(#feedback-live:not([hidden])) #feedback-head {
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

#feedback-live { padding-top: 0; }

#lane-grid { margin-top: clamp(1.25rem, 2.5vw, 1.5rem); }

/* The intake form lanes 1 and 2 open in place, joined to the lanes above it
   by the same hairline the form sections use. */
.lane-open {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}

/* On a successful send the lanes, the form, and that hairline are all gone,
   so the confirmation left behind takes the same air back as plain margin. */
#intake-section:not(.lane-open) { margin-top: clamp(2.25rem, 4vw, 3rem); }

/* Help that is too long to sit inside a label. Tied to its field with
   aria-describedby, so a screen reader hears it after the label. */
.field__help {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--stone);
  max-width: 52ch;
}

/* The lane 2 line that steers the project form below it. It sits above a
   block rather than under one, so it takes a stacked sibling's spacing, not
   the 0.4rem a help line gets. Declared after .field__help so it wins. */
.lane-steer { margin-top: 1.5rem; }

/* A twenty-five field form needs visible joints. One hairline between
   sections, the same rule the page bands use. */
.form-sec + .form-sec {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}

.form-sec h2 { font-size: 1.375rem; }
.form-sec__intro { margin-top: 0.5rem; color: var(--stone); font-size: 0.9375rem; }
.form-sec .field-row:first-of-type,
.form-sec > .field:first-of-type { margin-top: 1.25rem; }

/* The intake form is long enough that a fixed sidebar would be off screen for
   most of the scroll. Sticky keeps the four things a stuck visitor needs in
   view the whole way down. Only above the point where the grid is two columns;
   in one column it is a normal block. */
@media (min-width: 900px) {
  .side--sticky { position: sticky; top: 2rem; }
}

/* ---------- Launch page: the recommendation line ---------- */

.tier__rec {
  margin-bottom: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--green);
  line-height: 1.5;
}

/* ---------- Demo feedback lanes ---------- */

.lanes { border: 0; padding: 0; margin: 0; }

.lanes legend {
  padding: 0;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.lane {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.55;
  cursor: pointer;
}

.lane + .lane { margin-top: 0.75rem; }

.lane:hover { border-color: var(--stone); }

.lane:has(input:checked) { border-color: var(--green); }

.lane input {
  flex: none;
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--green);
}

.lane b { font-weight: 660; }

/* ---------- Payment method checkboxes (intake) ---------- */

.pm { border: 0; padding: 0; margin: 1.15rem 0 0; }

.pm legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.pm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1rem;
}

@media (min-width: 560px) { .pm__grid { grid-template-columns: 1fr 1fr 1fr; } }

.pm__opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.pm__opt input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--green);
}

.pm .field { margin-top: 1rem; }

/* The fieldset is not a .field, so the stacked-sibling spacing rule in the
   main sheet does not see it. These mirror that rule. */
.field + .pm, .pm + .field { margin-top: 1.15rem; }

/* ---------- Domain branching (intake) ---------- */

/* Wrappers the branching select shows and hides. Children spaced the same
   way the main sheet spaces direct siblings; the wrappers themselves join
   the stacked flow. */
.domain-branch > .field + .field,
.domain-branch > .field-row + .field,
.domain-branch > .field + .field-row,
.domain-branch > .field-row + .field-row { margin-top: 1.15rem; }

.field + .domain-branch,
.domain-branch + .domain-branch,
.domain-branch + .field { margin-top: 1.15rem; }

/* ---------- Uploads ---------- */

.up { margin-top: clamp(2.25rem, 4vw, 3rem); padding-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--hairline); }

.up__cols { display: grid; gap: clamp(1.75rem, 4vw, 3rem); margin-top: clamp(1.25rem, 3vw, 2rem); }

@media (min-width: 900px) {
  .up__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

.up-drop {
  background: var(--paper);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Dragging a file over the area is the one moment this page changes color. */
.up-drop.is-drag { border-color: var(--green); border-style: solid; }

.up-drop__title { font-size: 1.0625rem; font-weight: 720; letter-spacing: -0.015em; }
.up-drop__text { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--stone); }

.up-drop input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 1rem;
  font-size: 0.9375rem;
}

.up-rules { margin-top: 0.85rem; font-size: 0.8125rem; line-height: 1.6; color: var(--stone); }

/* Per-file status. Never says "stored" until the server said ok. */
.up-list { margin-top: 1.25rem; }

/* Before the first file is chosen the list is empty, and an empty list would
   still hold its margin open under the chooser. */
.up-list:empty { margin-top: 0; }

.up-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
}

.up-item__name {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 560;
}

.up-item__state { flex: none; color: var(--stone); font-size: 0.875rem; }
.up-item--busy .up-item__state { color: var(--charcoal); }
.up-item--ok .up-item__state { color: var(--green); font-weight: 620; }
.up-item--err .up-item__state { color: var(--charcoal); font-weight: 620; }

/* Taking a file back out is housekeeping, not a next step, so it borrows the
   quiet button and then goes quieter still: stone until it is reached. The
   row aligns on the baseline, which a padded button would drag the text
   around with, so this one centers itself instead. The auto margin keeps it
   on the right of the row whether it shares the line with the file name or,
   on a narrow screen, wraps to its own. */
.up-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  margin-left: auto;
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--stone);
}

/* A finger needs more of it than a cursor does. */
@media (max-width: 899px) {
  .up-item__remove { min-height: 2.75rem; padding-left: 1.1rem; padding-right: 1.1rem; }
}

.up-item__remove:hover { color: var(--charcoal); border-color: var(--charcoal); }

/* Why the row is still there. Takes the whole width so it sits under the
   name rather than squeezing it. */
.up-item__note {
  flex: 1 0 100%;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--charcoal);
}

.up-shots { margin-top: 0.75rem; }
.up-shots li { max-width: 46ch; }

/* The catch-all box sits at the foot of the chooser column, so it takes that
   column's width and nothing wider. It is a plain block in the flow after the
   file list, which is what lets a long list of file names push it down the
   page rather than crowd it. */
.up__note { margin-top: 1.25rem; }
.up-rights { margin-top: 1.1rem; }
.up-rights__help { margin: 0.35rem 0 0 1.55rem; }

/* The approval moment on /signup: the tick that unlocks the launch buttons. */
.approve { margin-bottom: 2rem; }
.approve__row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}
.approve__row input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--green);
}
.approve__note { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--stone); }
.btn--locked { opacity: 0.55; cursor: not-allowed; }

/* Full width on a phone, a normal button on a desktop. A green bar the width
   of the page reads as a banner rather than a control. */
.form-send { max-width: 24rem; }

/* ---------- Success panel: the edit-and-resend line ---------- */

.form-success__edit { margin-top: 1.25rem; }

/* A second paragraph inside the panel. The main sheet zeroes the margin on
   every paragraph in there to center them, so the space is restated here. */
.form-success .form-success__note { margin-top: 1rem; }

/* A button that reads as a link, so resending is offered without competing
   with the confirmation itself. The .link class supplies color + underline. */
.form-success__edit .link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 560;
  cursor: pointer;
}

/* ---------- Review rows (/review) ---------- */

/* One row is one part of the site: which part, whether it is perfect or
   needs a change, and the change box the second answer opens. Rows are
   cloned from the first, so nothing here may depend on a row's index. */

.srows { margin-top: 1.25rem; }

.srow { border: 0; padding: 0; margin: 0; min-width: 0; }

.srow + .srow {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.srow__legend {
  padding: 0;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  color: var(--stone);
}

/* Ships visible and un-required; review.js hides it until the row asks for
   a change. Spaced like any stacked field. */
.srow__text { margin-top: 1.15rem; }

.rows-add { margin-top: 1.5rem; }

.rows-add__note {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--stone);
  max-width: 52ch;
}

/* A quieter heading than a form section's, for a block most people skip. */
.form-sub {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  font-size: 1.0625rem;
  font-weight: 720;
  letter-spacing: -0.015em;
}

.form-sub__intro {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--stone);
  max-width: 52ch;
}

/* The main sheet only styles .hint inside a .field. A legend can carry one
   too, and it has to read the same. */
.ask legend .hint { font-weight: 440; color: var(--stone); }

/* ---------- Quiet reference line ---------- */

.ref-line {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--stone);
}

.ref-line b { font-weight: 620; color: var(--charcoal); }

/* /domain (2026-08-11): the registration steps keep real numbers; the
   global ol reset would otherwise strip them into a jumble. */
.domain-steps { list-style: decimal; padding-left: 1.5em; }
.domain-steps li { list-style: decimal; margin-bottom: 0.7em; }
.domain-steps li::marker { font-weight: 700; }

/* /domain breathing room (2026-08-11, Nathan's read): air between the lead
   and the ticks, between the ticks, and before the steps section. */
#domain-form .form-sec { margin-top: 1.75rem; }
#domain-form .pm__opt { margin-bottom: 1rem; }
#domain-form .form-send { margin-top: 1.5rem; }
#domain-live > .form-sec { margin-top: 2.75rem; }