/* ==========================================================================
   brief-form.css — the conversion path: the brief form inside the closer.
   Loaded by index.html, tools.html and newsletter.html, which share it verbatim
   rather than each carrying a copy, so they cannot drift.

   tools.html uses .brief-row, .chips, .brief-err, .brief-actions and
   .brief-sent for its tool request, and adds one control this sheet has no
   component for - a select - in tools.css, built from this sheet's own
   text-field values rather than a new look. newsletter.html uses .chips for its
   market picker and .brief-err / .brief-sent in its action bar.

   Loaded AFTER base.css, which stays the single source for the page's
   tokens and every shared component. Nothing here redefines a token and
   nothing here restyles an existing class, which is also what lets it sit
   alongside immersive-hero.css, hero-map.css and the two network sheets on v6
   without colliding.
   ========================================================================== */

/* The closer is centred, which is right for a headline and a single button and
   wrong for a form: a centred label sits an unpredictable distance from the
   field it names. The box keeps its centred heading, the form inside it goes
   back to a normal reading axis. */
.brief-form{
  margin:var(--s8) auto 0;
  max-width:34rem;
  text-align:left;
  display:flex;flex-direction:column;gap:var(--s6);
}

/* Context line, written when the form is opened from a member or a city. It is
   the one piece of the page that says "we know where you came from", so it
   reads as a statement and not as a form label. */
.brief-context{
  margin:var(--s5) auto 0;
  max-width:48ch;
  color:var(--purple-deep);
  font-size:15px;line-height:23px;font-weight:500;
}

/* ---------- chip sets ----------
   Real checkboxes, visually replaced. The input keeps focus, keyboard and
   announcement behaviour; the label is the hit area. No ARIA is needed because
   nothing here is pretending to be a control it is not. */
.brief-fs{border:0;padding:0;margin:0}
.brief-legend{
  padding:0;
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ash);
}
.brief-hint{margin:var(--s2) 0 0;color:var(--gray);font-size:14px;line-height:21px}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

.chip{position:relative;display:inline-flex}
/* Not display:none — a hidden input is not focusable, and the focus ring is the
   only thing telling a keyboard user where they are in the set. It is sized to
   the chip and painted out instead, so :focus-visible can be drawn on the label. */
.chip input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
/* Borderless and FLAT, matching .tag and .tag-btn in base.css. No pill on
   this site carries a shadow; elevation belongs to cards, where .member-card
   uses it as a hover state. A raised pill was a third treatment competing with
   the two the system already has.

   The fill alone separates these, and that is the house convention rather than
   a compromise: .tag sits at 1.05:1 against its card, and --mist on white is
   1.15:1 - slightly MORE separation than the shipped precedent.

   --mist, AND IT USED TO BE --white. That was correct for exactly as long as
   the premise under it held: every page this component shipped on put it inside
   the closer's --mist box, so white WAS the separation. On 2026-08-28 both of
   those boxes went - index.html's closer form and tools.html's request form
   moved to contact.html - and contact.html puts the chips on the page's own
   white. White on white is 1:1. The markets row rendered as nine words of bare
   text with no controls anywhere in it.

   newsletter.css had already hit this and patched it locally, and said in its
   own comment that the component was still right elsewhere. It is not any more,
   because there is no elsewhere: contact.html is the only page with a .chip on
   it. So the fix moves into the component and that override is deleted rather
   than left as a second sheet compensating for this one.

   --mist is base.css's own token for this, commented "neutral chip fill", and
   it is what .tag and .tag-btn use for a pill on a white surface. No new value,
   and the hover and checked states below already matched .tag-btn - only the
   resting state was out of the vocabulary. --slate on --mist is 12.78:1.

   KNOWN TRADE-OFF: base.css uses the outline on .tag-btn to mark a pill as
   interactive ("an outline is what says so"). Dropping it here costs that
   signal, which is acceptable ONLY because these sit inside a form, under a
   legend, with "Pick as many as apply" above them - the context does the work
   the outline does on a card. Do not copy this borderless variant back onto a
   .tag-btn floating on a card, where nothing else says it is a control. */
.chip span{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 var(--s4);          /* 44px touch target */
  border:0;border-radius:var(--r-pill);
  background:var(--mist);
  color:var(--slate);font-size:15px;line-height:20px;
  transition:background-color 200ms ease-in-out,color 200ms ease-in-out;
}
/* Same hover pair .tag-btn uses, so there is one pill vocabulary rather than
   two. --plum on --pale is 11.5:1. */
.chip input:hover + span{background:var(--pale);color:var(--plum)}
/* --purple-deep, NOT the --purple that .tag-btn:active uses. White on --purple
   is 4.42:1, which fails 4.5:1 for 15px text; --purple-deep is 7.26:1. A
   momentary :active flash can live with 4.42, a persistent selected state that
   the visitor has to read back cannot. */
.chip input:checked + span{
  background:var(--purple-deep);
  color:var(--white);font-weight:500;
}
/* The ring sits OUTSIDE the pill: a chip has no border of its own for an
   inset ring to paint over. --focus-w at 3:1 against both the white ground and
   the --mist pill it now sits on. */
.chip input:focus-visible + span{
  outline:var(--focus-w) solid var(--focus-c);outline-offset:var(--focus-off);
}

/* ---------- text fields ---------- */
.brief-row{display:flex;flex-direction:column;gap:var(--s2)}
.brief-row label{
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ash);
}
.brief-row input,
.brief-row textarea{
  width:100%;
  padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);
  color:var(--slate);font-family:var(--font);font-size:16px;line-height:24px;
  /* 16px is the floor that stops iOS Safari zooming the viewport on focus. */
}
.brief-row textarea{resize:vertical;min-height:84px}
.brief-row input:focus-visible,
.brief-row textarea:focus-visible{
  outline:var(--focus-w) solid var(--focus-c);outline-offset:var(--focus-in);border-color:var(--focus-c);
}
/* Never colour alone: the invalid state carries a border, and the message in
   .brief-err names the field in words. */
.brief-row input[aria-invalid="true"],
.brief-row textarea[aria-invalid="true"]{border-color:var(--red);border-width:2px}

.brief-err{
  margin:0;padding:var(--s3) var(--s4);
  border-radius:var(--r-sm);
  background:var(--red-bg);color:var(--red-ink);
  font-size:15px;line-height:22px;font-weight:500;
}

/* ---------- actions ----------
   The closer's own rule gives .btn a 28px top margin, which the form's flex gap
   already supplies. Reset it rather than letting the two stack. */
.brief-actions{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.closer .brief-actions .btn{margin-top:0}
.brief-next{
  margin:0;max-width:46ch;
  color:var(--gray);font-size:14px;line-height:21px;
}

/* ---------- sent state ----------
   Replaces the form rather than sitting under it. A form still on screen after
   a successful submit invites a second identical submit. */
.brief-sent{
  margin:var(--s8) auto 0;max-width:34rem;
  padding:var(--s6);
  border-radius:var(--r-md);
  background:var(--pale);
  text-align:left;
}
.brief-sent h3{
  margin:0;color:var(--plum);
  font-size:19px;line-height:27px;font-weight:600;
}
.brief-sent p{margin:var(--s3) 0 0;color:var(--gray);font-size:15px;line-height:23px}
.brief-sent .btn{margin-top:var(--s5)}

@media (max-width:640px){
  .brief-form{gap:var(--s5)}
  .brief-actions{align-self:stretch}
  .brief-actions .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   THE NEWSLETTER BAND IS GONE (2026-08-28, client direction)

   .signup, .signup-wrap, .signup-copy, .signup-h, .signup-p, .signup-act and
   .signup-note were all declared here and were removed with the markup. Their
   dark-ground counterparts went from footer.css at the same time.

   The band had three lives in this file and it is worth knowing the shape of
   them before anyone proposes a fourth: a one-field capture with four
   near-copies of one handler behind it, then one shared handler, then a link to
   newsletter.html, then nothing. What survives it is newsletter.html, which is
   reached from the "Newsletter" nav item on the five light pages and from "The
   market notes" in every footer's Network column.

   What this sheet still owns is the BRIEF FORM: .brief-form, .brief-row,
   .chips, .brief-err, .brief-actions and .brief-sent, used by the brief on
   index.html, the tool request on tools.html and the market picker on
   newsletter.html.
   ========================================================================== */