/* ==========================================================================
   brief-page.css - brief.html, and nothing else loads it.

   THE FORM IS NOT STYLED HERE. It is .brief-form / .brief-fs / .chips /
   .brief-row / .brief-err / .brief-actions / .brief-sent from brief-form.css,
   the same component index.html's closer uses. This sheet declares the page
   AROUND it: the two-column body, the aside, and the three questions. If a rule
   in here starts describing a field, it belongs in brief-form.css instead and
   the two forms have started to drift.

   TOKENS, NOT VALUES. Everything is base.css's own scale, including the section
   tier - --sec on the body, and the panels take --haze because they sit on
   --surface, which is the rule stated at base.css's surface pair.
   ========================================================================== */

.bp-main{padding-bottom:0}

/* THE MASTHEAD TAKES THE BODY'S MEASURE. .ins-mast rides the site's 1400 wrap
   and .bp-grid below it is capped at 1180, so the H1 sat 86px left of the form
   it introduces - the same wobble daily-brief.css records fixing between its
   fold and its tinted band.

   1228 rather than 1180, and the arithmetic is the point: .wrap carries its two
   24px side paddings INSIDE its own cap, so a cap of 1180 would put the CONTENT
   edge at 1180 minus the padding. 1180 + 48 lands the text at exactly the x the
   grid starts at. Measured, not derived - see the note in daily-brief.css that
   was written after getting this wrong the other way round. */
.bp-main .ins-mast > .wrap{max-width:1228px}


/* ==========================================================================
   01. The body: form beside the answers
   THE ASIDE IS THE REASON THIS IS A PAGE. index.html's closer is a box at the
   foot of a directory and has no room to answer the questions a considered
   brief raises, so it does not try. Here they sit BESIDE the fields while the
   fields are being filled, which is the placement rule for objection handling -
   proof goes where the doubt is, not in a section underneath it.

   1180, the measure daily-brief.html's fold uses, so the two pages that were
   built in the same week share one. The form column caps at 640 for a 60-75
   character line on the hint text and the labels.
   ========================================================================== */
.bp-body{padding:0 0 var(--sec);background:var(--surface)}

.bp-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:var(--s14);align-items:start;
  max-width:1180px;margin-inline:auto;
}
.bp-form-col{max-width:640px;min-width:0}
.bp-form-h{margin-bottom:var(--s6)}

/* STICKY, and it is the one place on this site where that is worth the cost.
   The market chips are at the top of a form that runs about nine hundred pixels;
   "who reads it" answers a question raised by the chips and would otherwise
   scroll away from the fields whose answer it is changing. The offset clears
   the site header, which is 72px at desktop. */
.bp-aside{position:sticky;top:104px;display:grid;gap:var(--s5);min-width:0}

.bp-panel{
  background:var(--haze);border-radius:var(--r-md);
  padding:var(--s6);
}
.bp-panel > .eyebrow{margin-bottom:var(--s4)}

.bp-reach{display:grid;gap:var(--s4)}
.bp-reach-t{margin:0;color:var(--gray);font-size:14px;line-height:22px}
/* The line sits UNDER the names when there are names, and is the whole panel
   when there are not, so it takes a rule above it only in the first case. */
.bp-reach-row + .bp-reach-t{
  margin-top:var(--s2);padding-top:var(--s4);
  border-top:1px solid var(--line);
}

.bp-reach-row{display:flex;align-items:center;gap:var(--s3);min-width:0}
.bp-reach-id{display:grid;gap:1px;min-width:0}
.bp-reach-id b{color:var(--plum);font-size:15px;line-height:22px;font-weight:600}
.bp-reach-id span{color:var(--gray);font-size:13px;line-height:20px}

.bp-steps{margin:0;padding-left:var(--s5);display:grid;gap:var(--s4)}
.bp-steps li{color:var(--gray);font-size:15px;line-height:23px}
.bp-steps li::marker{color:var(--purple);font-weight:600}
.bp-steps b{color:var(--slate);font-weight:600}

.bp-aside-note{margin:0;color:var(--ash);font-size:14px;line-height:22px}


/* ==========================================================================
   02. The three questions
   Tinted, because it is the alternating half against the white body above it -
   the site's own separator, which is why there is no rule across the top.
   ========================================================================== */
.bp-faq{padding:var(--sec) 0;background:var(--surface-alt)}
/* Capped on the CONTENT, not on .wrap: the wrap carries its 24px side padding
   INSIDE its cap, so capping the wrap would land this heading 24px right of the
   H1 above it. Same inner box daily-brief.css uses, and for the same reason. */
.bp-faq-box{max-width:1180px;margin-inline:auto}
.bp-faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8);margin-top:var(--s8)}
.bp-faq h3{font-size:20px;line-height:28px;margin-bottom:var(--s2)}
.bp-faq p{margin:0;color:var(--gray);font-size:16px;line-height:25px}


/* ==========================================================================
   03. Responsive
   ========================================================================== */
/* COLLAPSES AT 1024, NOT THE SITE'S 900, for daily-brief.css's reason: held to
   900, the last tablet step squeezes the column carrying two chip sets and five
   fields while the 360px aside keeps its full width. Once stacked the aside
   stops being sticky - pinned above a form it no longer sits beside, it is a
   banner that follows you. */
@media (max-width:1024px){
  .bp-grid{grid-template-columns:minmax(0,1fr);gap:var(--s10)}
  .bp-form-col{max-width:none}
  .bp-aside{position:static;max-width:560px}
}
@media (max-width:900px){
  .bp-faq-grid{grid-template-columns:1fr;gap:var(--s6)}
}
@media (max-width:600px){
  .bp-panel{padding:var(--s5)}
}