/*
The request-a-call form. Every value comes from tokens.css, spec:
docs/blocks/section-request-call.md.

The heading is the shared two-tone component and the submit is the shared button; the rest is this
form's own, because nothing else on the site is a form.

THE PILLS ARE REAL CHECKBOXES. The design draws a row of buttons and the markup is a fieldset of
checkboxes wearing them: several answers are allowed, the keyboard reaches every one, and the
group is announced with its question. Everything below styles a control that already works rather
than building one that has to be taught to.
*/

.request-call {
  padding-block: var(--request-top) var(--request-bottom);
  background: var(--request-bg);
}

.request-call__inner {
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
}

.request-call__title {
  --heading-fs: var(--fs-request-title);
  --heading-ls: var(--ls-request-title);
  --heading-lh: var(--lh-request-title);
}

.request-call__intro {
  max-width: var(--request-intro-w);
  margin: var(--request-intro-gap) 0 0;
  color: var(--request-intro-color);
  font-size: var(--fs-request-intro);
  font-weight: var(--fw-regular);
  line-height: var(--lh-request-intro);
}

/*
What happened to the last submission. It is a line of type rather than a coloured box: the form is
the page's centre of gravity and a banner over it would be louder than the answer deserves.
*/
.request-call__state {
  margin: var(--request-state-gap) 0 0;
  color: var(--request-state-color);
  font-size: var(--fs-request-legal);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-request-legal);
}

.request-call__state--sent {
  color: var(--request-state-ok-color);
}

/*
The trap. Off the page rather than display: none, because a headless browser can be told to ignore
what is not displayed but has to lay out what merely sits somewhere odd. aria-hidden on the wrapper
keeps it away from anyone using a screen reader — see the markup.
*/
.request-call__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
The rule above the fields is the group's own top border, so the two cannot come apart, and the
padding under it is the design's 41.
*/
.request-call__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--request-row-gap) var(--request-col-gap);
  margin-top: var(--request-fields-gap);
  padding-top: var(--request-fields-pad);
  border-top: var(--rule-w) solid var(--request-rule-color);
}

.request-call__field {
  margin: 0;
}

/*
Labels and the legend of the symptom group are one thing typographically, so they are one rule. The
capitals are the design's rather than the client's — the field list carries "First name" and the
stylesheet shouts it.
*/
.request-call__label {
  display: block;
  padding: 0;
  color: var(--request-label-color);
  font-size: var(--fs-request-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-request-label);
  line-height: var(--lh-request-label);
  text-transform: uppercase;
}

/*
An underline, not a box. The node puts a stroke on all four sides of the input; the render shows
only the bottom one, and the render is what this project trusts for anything the bridge cannot
carry properly.

background: transparent rather than none — the section sits on a tint and a white field would be a
box after all.
*/
.request-call__input {
  width: 100%;
  height: var(--request-input-h);
  padding: 0;
  border: 0;
  border-bottom: var(--rule-w) solid var(--request-input-rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-request-input);
  line-height: var(--lh-request-input);
  transition: border-color var(--dur) var(--ease);
}

.request-call__input::placeholder {
  color: var(--request-placeholder-color);
  opacity: 1;
}

.request-call__input:focus-visible {
  border-bottom-color: var(--accent);
}

/*
A field the server rejected. The colour is on the rule and on the label together — a red line under
an unlabelled box says something is wrong without saying which thing.
*/
.request-call__field--invalid .request-call__input {
  border-bottom-color: var(--request-invalid-color);
}

.request-call__field--invalid .request-call__label {
  color: var(--request-invalid-color);
}

.request-call__symptoms {
  margin: var(--request-symptoms-gap) 0 0;
  padding: 0;
  border: 0;
}

.request-call__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--request-pill-gap);
  margin-top: var(--request-pills-gap);
}

.request-call__pill {
  display: inline-flex;
}

/*
The checkbox itself is taken out of sight but not out of the tab order: it is still the thing that
is focused, checked and announced, and the label beside it is what the visitor sees and clicks.
Hiding it with display: none would have taken it off the keyboard as well.
*/
.request-call__check {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.request-call__check + label {
  display: inline-flex;
  align-items: center;
  gap: var(--request-pill-dot-gap);
  min-height: var(--request-pill-h);
  padding-inline: var(--request-pill-px);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--rule-w) var(--request-pill-ring);
  color: var(--ink);
  font-size: var(--fs-request-pill);
  line-height: var(--lh-request-pill);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/*
The mark inside a pill. Unchecked it is a ring and not a disc: the node gives it a white fill, which
on a white pill is nothing at all — the first diff had six pills with no mark in them. What the
render shows is a hollow circle, i.e. the fill plus an edge, and the edge is the part the node
cannot carry. Checked, it fills with ink.
*/
.request-call__dot {
  flex: 0 0 auto;
  width: var(--request-pill-dot);
  height: var(--request-pill-dot);
  border-radius: var(--request-pill-dot-radius);
  background: var(--request-pill-dot-bg);
  box-shadow: inset 0 0 0 var(--rule-w) var(--request-pill-dot-ring);
  transition:
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.request-call__check:checked + label {
  box-shadow: none;
  background: var(--request-pill-on-bg);
  color: var(--request-pill-on-fg);
}

.request-call__check:checked + label .request-call__dot {
  box-shadow: none;
  background: var(--request-pill-on-dot);
}

/*
The focus ring goes on the label, because the input it belongs to is the invisible one. Without
this the pill can be reached by keyboard and gives no sign of it.
*/
.request-call__check:focus-visible + label {
  outline: var(--focus-ring-w) solid var(--accent);
  outline-offset: var(--focus-ring-offset);
}

.request-call__legal {
  margin-top: var(--request-legal-gap);
  padding-top: var(--request-legal-pad);
  border-top: var(--rule-w) solid var(--request-rule-color);
}

.request-call__note {
  max-width: var(--request-note-w);
  margin: 0;
  color: var(--request-legal-color);
  font-size: var(--fs-request-legal);
  font-weight: var(--fw-regular);
  line-height: var(--lh-request-legal);
}

.request-call__consent {
  max-width: var(--request-consent-w);
  margin: var(--request-consent-gap) 0 0;
  color: var(--request-legal-color);
  font-size: var(--fs-request-legal);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-request-legal);
}

.request-call__consent a {
  color: var(--accent);
  text-decoration: underline;
}

.request-call__submit {
  margin-top: var(--request-submit-gap);

  --btn-w: min(var(--request-submit-w), 100%);
}

/* --bp-sm: the two columns of fields become one. */
@media (max-width: 700px) {
  .request-call__fields {
    grid-template-columns: 1fr;
  }
}