/* ==========================================================================
   contact.css — the three-route switch on contact.html, and nothing else.

   Loaded by that page alone. Everything the page LOOKS like is already in
   base.css, insights.css, brief-form.css and brief-page.css: the masthead, the
   two-column grid, the panels, the chips, the fields, the error line and the
   sent state are all components those four already own. This sheet adds one
   behaviour they do not have — showing the fields the chosen route needs and
   hiding the ones it does not — plus the two small pieces of copy that only
   exist here.

   IT IS ~60 LINES AND THAT IS THE POINT. A page that needed a stylesheet of its
   own to look right would mean the form component had been rebuilt rather than
   reused, which is the drift docs/brief.md records twice.

   No modules, no imports, no CDN. The page runs from file://.
   ========================================================================== */


/* ==========================================================================
   01. The route switch
   THREE RADIOS AND :has(), NO JAVASCRIPT. The contract on this site is that
   nothing is hidden behind a control that cannot work, and a route switch built
   in script fails that twice over: with the script blocked the chips would do
   nothing, and the fields they were hiding would already be hidden.

   Real radios instead, and CSS reads which one is checked. Keyboard behaviour,
   arrow-key traversal of the group and the announcement are the platform's.

   THE SELECTOR HANGS OFF .bp-grid, NOT THE FORM, because two of the things that
   switch are not in the form: the "Who reads it" panel and the aside's closing
   note both change with the route, and they are the form's siblings. .bp-grid
   is the nearest element containing all of it.

   data-route TAKES A LIST — data-route="brief tool" — and ~= matches one word
   in it. That is how the markets fieldset belongs to two routes without being
   written twice.

   WHAT HAPPENS WITHOUT :has(). Nothing matches, no rule applies, and every
   group is visible: the form becomes long rather than broken. That is the right
   way round. A visitor seeing three fields they do not need can skip them; a
   visitor seeing none of the fields they do need has no page.
   ========================================================================== */

.bp-grid:has(#ctRoute input[value="brief"]:checked) [data-route]:not([data-route~="brief"]),
.bp-grid:has(#ctRoute input[value="tool"]:checked)  [data-route]:not([data-route~="tool"]),
.bp-grid:has(#ctRoute input[value="ask"]:checked)   [data-route]:not([data-route~="ask"]){
  display:none;
}

/* THE ROUTE FIELDSET IS THE ONE CONTROL ON THE PAGE THAT CHANGES THE PAGE, and
   it reads as just another chip set. A hairline under it separates the question
   "what is this about" from the answer's fields, the same way .closer-note's
   rule separates a closer's terms from its ask. Nothing else is added: making
   the chips themselves louder would put a second visual weight on a page whose
   heaviest element should be the send button. */
.ct-routes{
  padding-bottom:var(--s6);
  border-bottom:1px solid var(--line);
}

/* ==========================================================================
   02. The two lines that exist only here
   ========================================================================== */

/* Written by js/contact.js when the chosen tool is one of the seven still in
   build, and hidden otherwise. It borrows .brief-context's colour and weight
   from brief-form.css rather than declaring a third purple: it is the same kind
   of line, saying what the choice above it means. */
.ct-picked{
  margin:var(--s3) 0 0;
  color:var(--purple-deep);font-size:15px;line-height:23px;font-weight:500;
}

/* The question route's replacement for the live "Who reads it" list. Same
   values .bp-steps uses inside the same panel, so the two panels read as one
   pair rather than as a panel and an exception. */
.ct-ask-note{
  margin:var(--s3) 0 0;
  color:var(--gray);font-size:15px;line-height:23px;
}