/* ==========================================================================
   GreekCloud — intake form
   ========================================================================== */

.intake { max-width: 62ch; display: flex; flex-direction: column; gap: 26px; }

.intake fieldset {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface); padding: 22px 24px 24px; margin: 0;
}
.intake legend {
  font-family: var(--f-anchor); font-size: 18px; color: var(--ink);
  padding-inline: 10px; margin-inline-start: -10px;
}
.fs-help { font-size: 15px; color: var(--ink-soft); margin: 4px 0 16px; }

.fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.f { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.f label { font-weight: 700; font-size: 15px; color: var(--ink); }
.f small { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

.intake input[type=text], .intake input[type=email], .intake input[type=tel],
.intake input[type=number], .intake input[type=date], .intake select, .intake textarea {
  font: inherit; font-size: 16px;             /* 16px stops iOS zooming on focus */
  padding: 11px 13px; width: 100%;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.intake textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.intake input:focus-visible, .intake select:focus-visible, .intake textarea:focus-visible {
  outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage);
}
.intake input[type=file] { font: inherit; font-size: 15px; color: var(--ink-soft); }
.intake input[aria-invalid="true"], .intake textarea[aria-invalid="true"], .intake select[aria-invalid="true"] {
  border-color: var(--stop);
}
.err { color: var(--stop); font-size: 13.5px; font-weight: 700; }

/* plan chooser */
.choices { display: grid; gap: 10px; }
.choice { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice > span {
  display: block; padding: 14px 17px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); transition: border-color .16s ease, background-color .16s ease;
}
.choice b { display: block; font-weight: 700; color: var(--ink); font-size: 16.5px; }
.choice small { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.choice input:checked + span { border-color: var(--sage); border-width: 2px; padding: 13px 16px; background: var(--sage-wash); }
.choice input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .choice > span { transition: none; } }

/* consents */
.consents { display: flex; flex-direction: column; gap: 13px; }
.cbx { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 15.5px; line-height: 1.55; }
.cbx input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--sage); }
.cbx a { color: var(--sage); }

/* honeypot — offset upward only. A negative inline-start value is real
   scrollable overflow in an RTL document and stretches the viewport. */
.hp { position: absolute; top: -9999px; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; }

.intake .submit { width: 100%; padding-block: 16px; font-size: 17.5px; }
.intake .submit:disabled { opacity: .55; cursor: not-allowed; }
.form-status { text-align: center; font-weight: 700; margin: 0; min-height: 1.5em; }
.form-status.is-error { color: var(--stop); }

/* The final declaration carries real consequences for the person signing it,
   so it is visually separated from the routine confirmations above rather
   than reading as one more box to tick. */
.intake fieldset.declare {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--rule));
  background: var(--warn-wash);
}
.intake fieldset.declare legend { color: var(--warn); }
.intake fieldset.declare .cbx { align-items: flex-start; }
.intake fieldset.declare .cbx span { line-height: 1.6; }
.intake fieldset.declare input[type=checkbox] { accent-color: var(--warn); }
/* ==========================================================================
   INTAKE — one page, five named sections
   The form reads top to bottom in a single scroll. The sections are numbered
   so the sequence stays legible without a stepper. Everything below consumes
   tokens already defined in base.css; nothing here introduces a new colour.
   ========================================================================== */

/* ---- the ground ----
   Same cream-plus-grain surface the pricing band uses, so the questionnaire
   reads as the same product rather than a bare form page. The dots are a
   background-image on a pseudo-element, not an asset, so they cost nothing
   and inherit --sage in both themes. */
/* No overflow:hidden here — it silently kills position:sticky on the rail.
   The grain pseudo-element is inset:0, so it never overflows anyway. */
.intake-band { position: relative; background: var(--band-cream); }
.intake-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--sage) 17%, transparent) 1px, transparent 1px);
  background-size: 5px 5px;
}
.intake-band > .wrap { position: relative; z-index: 1; }

/* ---- sections ----
   Sized as section headings, not hero headings. The step version ran to 56px,
   which is right when one fills the screen alone and a wall when five stack. */
/* These are <section> elements nested inside a band, so they inherit the
   global section padding meant for full-width page bands. Reset it: the
   separation between them is the border rule below, not 100px of air. */
.step { display: flex; flex-direction: column; gap: 20px; padding-block: 0; }
.step + .step { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--rule); }
.step > h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--f-anchor); font-size: clamp(25px, 3.1vw, 31px);
  line-height: 1.2; letter-spacing: -.005em; margin: 0;
}
.step > h2 .n {
  flex: none; font-size: .62em; font-weight: 400; color: var(--sage);
  font-variant-numeric: tabular-nums;
}
.step > .intro { font-size: 17px; color: var(--ink-body); margin: -10px 0 0; max-width: 54ch; }

/* ---- autosave state ---- */
.saved { font-size: 13px; font-weight: 700; color: var(--ink-faint); min-height: 1.4em; }
.saved.is-ok { color: var(--sage); }

/* ---- symptom tags ---- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags button {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--sage-wash); color: var(--sage-deep);
  transition: background-color .16s ease, color .16s ease;
}
.tags button[aria-pressed="true"] { background: var(--sage-solid); color: var(--on-solid); }
.tags button[aria-pressed="true"]::after { content: " ✓"; }

/* ---- segmented control ---- */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 9px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.seg button[aria-pressed="true"] { background: var(--sage-solid); border-color: var(--sage-solid); color: var(--on-solid); }

/* ---- review card (step 5) ---- */
.review { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.review h3 { font-family: var(--f-anchor); font-size: 17px; margin: 0 0 14px; color: var(--ink); }
.review dl { display: grid; gap: 12px; margin: 0; }
.review .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px dashed var(--rule-strong); padding-bottom: 10px; }
.review dt { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.review dd { margin: 0; font-family: var(--f-anchor); font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.review .edit { font-size: 13.5px; font-weight: 700; color: var(--sage); background: none; border: 0; cursor: pointer; font-family: var(--f-work); }

.pay-note { font-size: 14px; color: var(--ink-soft); text-align: center; margin: 10px 0 0; }

@media (max-width: 640px) {
  .step > h2 { font-size: 23px; line-height: 1.24; }
  .step + .step { margin-top: 32px; padding-top: 28px; }
}

/* ---- two-column shell ----
   The spec's tablet rail carried the step list. On a one-page form there are
   no steps to carry, so the rail keeps the half that still earns its space:
   an index that tracks where you are, and the two reassurances that stop the
   "am I about to be charged" question from forming. */
.intake-shell { display: block; }
.intake-rail { display: none; }

@media (min-width: 900px) {
  .intake-shell {
    display: grid; grid-template-columns: minmax(0, 1fr) 272px;
    gap: clamp(28px, 4vw, 56px); align-items: start;
  }
  .intake-shell .intake { max-width: none; }
  .intake-rail {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 96px; align-self: start;
  }
  .rail-index ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .rail-index a {
    display: block; padding: 7px 12px; border-radius: var(--radius);
    font-size: 14.5px; font-weight: 700; color: var(--ink-soft); text-decoration: none;
    border-inline-start: 2px solid transparent;
  }
  .rail-index a:hover { color: var(--ink); background: var(--surface); text-decoration: none; }
  .rail-index a[aria-current="true"] {
    color: var(--sage); background: var(--sage-wash); border-inline-start-color: var(--sage);
  }
  .rail-card {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius-lg); padding: 15px 17px;
    font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
  }
  .rail-card b { display: block; font-family: var(--f-anchor); font-size: 16px; color: var(--ink); margin-bottom: 5px; }
  .rail-card ul.clean { margin-top: 8px; gap: 6px; }
  .rail-card ul.clean > li { font-size: 14px; }
  .rail-pay { background: var(--sage-wash); border-color: transparent; }
  .rail-pay b { color: var(--sage-deep); }
}

/* ---- file uploads ----
   The native control gives a filename and nothing else, which on a form whose
   whole point is "does this match your passport" is the wrong amount of
   feedback. JS wraps it: thumbnail, name, size, and a way back out.
   The input itself stays in the DOM and keeps its label, so with JS off this
   degrades to exactly what it was. */
.upload { display: flex; flex-direction: column; gap: 10px; }
.upload.is-optional .upload-drop { border-style: dashed; }
.upload-drop {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg); background: var(--paper);
  cursor: pointer; transition: border-color .16s ease, background-color .16s ease;
}
.upload-drop:hover { border-color: var(--sage); }
.upload input[type=file]:focus-visible + .upload-drop { outline: 2px solid var(--sage); outline-offset: 2px; }
.upload-plus {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 21px; line-height: 1;
  background: var(--sage-wash); color: var(--sage-deep);
}
.upload-thumb {
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--surface-sunk); display: block;
}
.upload-txt { min-width: 0; }
.upload-txt b { display: block; font-size: 15px; color: var(--ink); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-txt small { display: block; font-size: 13.5px; color: var(--ink-soft); }
.upload-txt .ok { color: var(--sage); font-weight: 700; }
.upload-swap {
  margin-inline-start: auto; flex: none; font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--sage); background: none; border: 0; cursor: pointer; padding: 4px 6px;
}

/* ---- intake page header ----
   The questionnaire header shares one section with the form, so the grain runs
   unbroken and the seam no longer costs two lots of section padding.

   h1 is capped well below the global clamp(50px, 8.2vw, 86px). That size is a
   landing-page hero; on a form the title is a label for the work below it, and
   at 86px it pushed the first field off the first screen. */
.intake-top { padding-block: clamp(30px, 4vw, 46px) clamp(34px, 4.5vw, 52px); }
.intake-top h1 { font-size: clamp(33px, 4.4vw, 46px); margin-bottom: 14px; }
.intake-top .lede { font-size: 17px; max-width: 60ch; }
.intake-top .crumbs { margin-bottom: 14px; }
.intake-top .city-facts { margin-top: 22px !important; }
.intake-top .city-facts > div { padding: 14px 17px; }
.intake-top .city-facts .v { font-size: 16.5px; }
.intake-top .saved { margin: 26px 0 0; }

/* One element, three outcomes: maintenance-closed, sent, and a genuine send
   failure. It replaces the thin .form-status line once the whole
   questionnaire validates -- by then a one-line status is not proportionate
   to "here is what happened to everything you just filled in". */
.form-down { margin-top: 18px; }
.form-down .nt { margin-bottom: 6px; }
.form-down .body { display: block; }
.form-down--warn { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.form-down--warn .nt { color: var(--warn); font-weight: 700; }
.form-down--ok { background: var(--sage-wash); border-color: color-mix(in srgb, var(--sage) 32%, transparent); }
.form-down--ok .nt { color: var(--sage-deep); font-weight: 700; }