/* Intake: three ways to hand documents to the firm, and the seven questions.
   Tokens only, no hex. Everything here is complete without a script: the file
   field is the browser's own until assets/intake.js says it can do better, and
   the seven questions are a stacked list of radios until it collapses them to
   one at a time. */

.intake-top { padding-top: var(--space-12); }
.intake-panel { margin-top: var(--space-12); }
.intake-panel h2 { font: var(--type-h2-xl); letter-spacing: var(--track-display); text-wrap: balance; margin: 0 0 var(--space-3); }
.intake-lead { font: var(--type-lead-xl); color: var(--fg-3); margin: 0 0 var(--space-8); max-width: 38ch; }

/* ── the form, as one card ────────────────────────────────────────────── */
.intake-form {
  position: relative; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6);
}
@media (min-width: 720px) { .intake-form { padding: var(--space-12); } }
.intake-form.is-narrow { max-width: 56rem; }
.intake-form.is-narrow .intake-lead { max-width: 52ch; }
.intake-cols { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .intake-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); } }
.intake-pair { display: grid; gap: 0 var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .intake-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.intake-form label { font-size: 1rem; }
.intake-form .opt { font-weight: 400; color: var(--fg-3); margin-left: var(--space-2); font-size: 0.875rem; }
.intake-form .hint { font: 400 0.875rem/1.5 var(--font-body); }
.intake-form textarea { min-height: 6rem; }

/* ── the drop zone ────────────────────────────────────────────────────────
   The input covers the whole zone, invisibly, so a click anywhere opens the
   picker and a file dragged onto the zone lands in the input: both are the
   browser's own behaviour and need no script. Until the script runs the input
   is shown as it is, under the zone, so a visitor can still see what they
   chose. */
.drop { position: relative; margin: 0 0 var(--space-5); }
.drop-face {
  display: grid; justify-items: center; align-content: center; gap: var(--space-3); text-align: center;
  min-height: 15rem; margin: 0; padding: var(--space-8) var(--space-6); cursor: pointer;
  border: 2px dashed var(--meta); border-radius: var(--radius-lg);
  background: var(--grad-wash), var(--bg);
  transition: border-color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard);
}
.drop-title { font: var(--type-h3-xl); color: var(--fg-2); }
.drop-hint { font: 400 0.9375rem/1.5 var(--font-body); color: var(--fg-3); max-width: 34ch; }
.drop-input { display: block; width: 100%; margin-top: var(--space-3); font: inherit; color: var(--fg-3); }
.js-intake .drop-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.drop:hover .drop-face, .drop.is-over .drop-face { border-color: var(--accent); }
.drop.is-over .drop-face { background: var(--accent-tint); }
.drop-input:focus-visible + .drop-face { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── the files chosen ─────────────────────────────────────────────────── */
.file-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; border-top: 1px solid var(--border); }
.file-list li {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center;
  margin: 0; max-width: none; min-height: 3.25rem; padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border); color: var(--fg-2); font-size: 1rem;
}
.file-list .ico { width: 1.25rem; height: 1.25rem; color: var(--fg-3); }
.file-list .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .sz { font: var(--type-caption); font-weight: 400; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.file-list li.is-bad { color: var(--fg-3); }
.file-list li.is-bad .nm { text-decoration: line-through; }
.file-rm {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--fg-3);
}
.file-rm:hover { background: var(--surface); color: var(--fg-2); }
.file-rm .ico { color: inherit; }
.file-problem { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); font-size: 1rem; }

/* ── the foot of the form ─────────────────────────────────────────────── */
.intake-send { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.intake-plain {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start;
  margin: 0 0 var(--space-5); max-width: 62ch; font-size: 1rem; line-height: 1.5; color: var(--fg-3);
}
.intake-plain .ico { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--fg-2); }
.intake-form .notice { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); font-size: 1rem; }
.intake-form .row { margin-top: var(--space-6); }
.intake-form .fine { margin-top: var(--space-5); }
.pick-group { border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; }
.pick-group > legend { font-size: 1rem; margin-bottom: var(--space-3); padding: 0; }

/* Sending: the bar is how far the upload has got, and nothing else. */
.progress { height: 6px; margin-top: var(--space-5); border-radius: var(--radius-pill); background: var(--surface-tint); overflow: hidden; }
.progress span { display: block; height: 100%; width: calc(var(--sent, 0) * 100%); background: var(--accent); transition: width var(--motion-base) linear; }
.intake-form.is-sending .drop, .intake-form.is-sending .file-rm { pointer-events: none; opacity: 0.6; }

/* ── received ─────────────────────────────────────────────────────────── */
.intake-done {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8);
  background: var(--grad-wash), var(--bg);
}
@media (min-width: 720px) { .intake-done { padding: var(--space-16); } }
.intake-done .ico-tile { margin-bottom: var(--space-6); }
.intake-done .file-list { max-width: 40rem; }
/* It is focused by the script so a screen reader hears it; it is not a control,
   so it takes no ring, and it lands clear of the header that stays on screen. */
.intake-done { scroll-margin-top: calc(var(--head-h, 73px) + var(--space-6)); }
.intake-done:focus, .intake-done:focus-visible { outline: none; box-shadow: none; }

/* ── the email way ────────────────────────────────────────────────────── */
.intake-address { margin: 0 0 var(--space-8); max-width: none; }
.intake-address a {
  font: 600 clamp(1.375rem, 2.6vw, 2rem)/1.2 var(--font-display); letter-spacing: var(--track-display);
  color: var(--accent); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
  overflow-wrap: anywhere;
}
#email .ticks { margin-bottom: var(--space-8); }

/* ── what to send ─────────────────────────────────────────────────────── */
.doc-sector { font: var(--type-h3-xl); color: var(--fg-2); margin: var(--space-12) 0 var(--space-5); }

/* ── the seven questions ──────────────────────────────────────────────────
   There is no score. Nothing here is, or may be mistaken for, a gauge: no
   ring, no meter, no total. The one bar on screen counts how far through the
   questions a reader is, and says so. */
.rq { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 961px) { .rq { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); } }
.rq-ask { min-width: 0; }

.rq-progress { display: none; margin-bottom: var(--space-8); }
.js-rq .rq-progress { display: block; }
.rq-count { display: block; font: var(--type-caption); font-variant-numeric: tabular-nums; color: var(--fg-3); margin-bottom: var(--space-3); }
.rq-bar { height: 4px; border-radius: var(--radius-pill); background: var(--border); position: relative; overflow: hidden; }
.rq-bar span {
  position: absolute; inset: 0 auto 0 0; background: var(--fg-2); border-radius: inherit;
  width: calc(var(--asked, 0) * 100%); transition: width var(--motion-base) var(--ease-standard);
}

.rq-set { border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--space-12); min-width: 0; }
.rq-set:last-of-type { margin-bottom: var(--space-6); }
.js-rq .rq-set { display: none; margin-bottom: var(--space-6); }
.js-rq .rq-set.is-on { display: block; }
.rq-dim { display: block; font: var(--type-caption); color: var(--fg-3); margin-bottom: var(--space-3); }
.rq-set legend { font: var(--type-h2-xl); font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: var(--track-display); color: var(--fg-2); margin: 0 0 var(--space-6); padding: 0; max-width: 26ch; text-wrap: balance; }

.rq-opt { position: relative; margin-bottom: var(--space-3); }
/* The input is the control and keeps every behaviour a radio has. It is laid
   behind the label, invisible, never display:none, which would take it out of
   the tab order in several browsers. */
.rq-opt input { position: absolute; left: var(--space-5); top: 50%; width: 16px; height: 16px; margin: 0; transform: translateY(-50%); opacity: 0; z-index: 1; }
.rq-opt label {
  display: flex; align-items: center; gap: var(--space-4); margin: 0; min-height: 64px; cursor: pointer;
  padding: var(--space-4) var(--space-5); background: var(--bg);
  border: 1px solid var(--meta); border-radius: var(--radius-lg);
  font-weight: 400; font-size: 1.0625rem; line-height: 1.4; color: var(--fg-3);
  transition: border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard);
}
.rq-opt label::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid var(--meta); border-radius: var(--radius-pill);
  transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.rq-opt label:hover { border-color: var(--fg-2); color: var(--fg-2); }
.rq-opt input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.rq-opt input:checked + label { border-color: var(--accent); background: color-mix(in srgb, var(--accent-tint) 38%, var(--bg)); color: var(--fg-2); }
.rq-opt input:checked + label::before { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent); }

.rq-back {
  display: none; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0;
  font: 500 1rem/1 var(--font-body); color: var(--fg-3);
}
.js-rq .rq-back { display: inline-flex; }
.rq-back[disabled] { opacity: 0.72; cursor: default; border-bottom-color: var(--border-soft); }
.rq-back:not([disabled]):hover { color: var(--accent); border-bottom-color: var(--accent); }

.rq-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); background: var(--bg); }
.rq-panel h3 { font: var(--type-h3-xl); color: var(--fg-2); margin: 0 0 var(--space-4); }
.rq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.rq-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
  margin: 0; max-width: none; padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
  font-size: 1rem; color: var(--fg-3);
}
.rq-list li.is-set .w { color: var(--fg-2); font-weight: 500; }
.rq-status {
  font: 500 0.875rem/1 var(--font-supporting); white-space: nowrap; color: var(--fg-3);
  padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface);
}
/* Three words, told apart by fill and by a hairline, never by colour. There
   is no red, amber or green anywhere on this site. */
.rq-list li.is-set .rq-status { color: var(--fg-2); }
.rq-list li.is-set[data-level="0"] .rq-status { background: var(--fg-2); border-color: var(--fg-2); color: var(--bg); }
.rq-list li.is-set[data-level="2"] .rq-status { background: var(--bg); border-style: dashed; border-color: var(--meta); }
.rq-panel .fine { margin-top: var(--space-5); }
.rq-panel .row { margin-top: var(--space-6); }