/* /what-we-build/briefing: the fourth capability page. Layers on top of
   base.css.

   Section order matches src/views/what-we-build-briefing.ejs and the
   capability-page structure in SITE-ARCHITECTURE.md section 5.

   Deliberately close to build.buying-group.css, build.segments.css and
   build.ranking.css. The capability pages should read as the same page
   type, so the hero, the settles grid, the dark two-column split, the
   onward cards and the closing block are the same shapes at the same
   sizes. Where a rule here is identical to one there, that is on
   purpose rather than a copy-paste to be factored out: they are
   separate pages and any one can move without dragging the others.

   THE GENUINELY NEW COMPONENT is the brief itself, .br-doc. It is set
   as one bordered panel holding four blocks rather than as four more
   page sections, because the argument of the page is that this is a
   single short document somebody reads in two minutes. Four sections
   with their own headings would look like a page about a brief instead
   of a brief. The internal hairlines carry the structure.

   THE MOVED BLOCK is the only place on the page that uses blue. That is
   the site's "new or changed" signal, set the same way it is set on the
   account record at /example/an-account, where the same finding
   appears. A reader who has seen one should recognize the other. */

/* ── Hero ───────────────────────────────────────────────────────── */

.br-hero { padding: 70px 0 76px; }

.br-hero h1 .line { display: block; }
.br-hero h1 .line + .line { margin-top: 0.1em; }

.br-hero h1 {
  font-size: clamp(33px, 4.5vw, 57px);
  max-width: 21em;
}

.br-hero-lede { font-size: 19.5px; max-width: 38em; }

/* Shared measure for a paragraph sitting under a section headline. */
.br-measure { max-width: 40em; }

/* ── What this settles ──────────────────────────────────────────── */

.br-settles h2 { max-width: 16em; }
.br-settles-grid { margin-top: 42px; }

@media (min-width: 901px) {
  .br-settles-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── What it looks like ─────────────────────────────────────────── */

.br-looks h2 { max-width: 16em; }

.br-looks-list {
  margin-top: 40px;
  display: grid;
  gap: 30px;
  max-width: 46em;
}

.br-looks-item {
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.br-looks-item h3 { margin-bottom: 8px; }

.br-looks-item p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}

/* The panel separating this from asking an assistant to research an
   account, which is the nearest wrong box for this capability. */
.br-distinction {
  margin-top: 40px;
  max-width: 46em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px 26px;
}

.br-distinction p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--body);
}

/* ── A brief goes stale ─────────────────────────────────────────── */

.br-real { padding: 78px 0 84px; }
.br-real h2 { max-width: 13em; }
.br-real .lede + .lede { margin-top: 18px; }

.br-real-grid {
  margin-top: 44px;
  display: grid;
  gap: 34px;
  max-width: 52em;
}

@media (min-width: 761px) {
  .br-real-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
}

.br-real-col { padding-top: 18px; border-top: 1px solid var(--rule-dark); }

.br-real-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.br-real-col p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--dark-body);
}

.br-real-pointer {
  margin-top: 40px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
}

/* ── One company's brief ────────────────────────────────────────── */

.br-brief h2 { max-width: 15em; }

/* Run metadata. Instrument type: chrome reporting what the run was. */
.br-run {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.br-run span { margin: 0 6px; color: var(--rule); }

/* The document. */
.br-doc {
  margin-top: 30px;
  max-width: 54em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}

.br-doc-head {
  padding: 26px 28px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 22px;
}

@media (min-width: 841px) {
  .br-doc-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 40px;
  }
}

.br-doc-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.br-doc-who h3 { margin-bottom: 10px; text-wrap: balance; }

.br-doc-situation {
  font-size: 16px;
  line-height: 1.58;
  color: var(--body);
  max-width: 40em;
}

.br-doc-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 22px;
}

@media (min-width: 841px) {
  .br-doc-stats { gap: 30px; }
}

.br-stat dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  white-space: nowrap;
}

.br-stat-num {
  font-family: var(--mono);
  font-size: 19px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── The tab strip ──────────────────────────────────────────────
   Hidden until brief-tabs.js adds `is-tabbed`, and every rule that
   hides a panel hangs off that class too. Without the script all three
   panels render stacked under their own headings, which is what a
   reader with no JS and a crawler both get. */

.br-tablist { display: none; }

.br-doc.is-tabbed .br-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 28px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}

.br-tab {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--muted);
  padding: 14px 16px;
  /* The selected tab is marked with a rule in the accent, so the strip
     reads as tabs rather than as three links. 2px of transparent here
     keeps the others on the same baseline. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.br-tab:hover { color: var(--ink); }

.br-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--teal);
}

.br-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 5px;
}

/* The per-panel heading carries the no-JS reading. Once the strip is
   there it says the same word twice, so it goes. */
.br-doc.is-tabbed .br-panel-head { display: none; }

.br-panel-head {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  padding: 24px 28px 0;
}

.br-panel + .br-panel { border-top: 1px solid var(--rule); }
.br-doc.is-tabbed .br-panel + .br-panel { border-top: 0; }

/* ── The lens tab ───────────────────────────────────────────────── */

.br-lens-count { margin-top: 0; margin-bottom: 18px; }

.br-lens { margin: 0; padding: 0; list-style: none; }

/* No wrapping: a long trait wraps inside its own column and the
   verdict stays on the first line at the right. Left to wrap, the pill
   dropped to a line of its own on narrow screens and the column of
   verdicts stopped reading as a column. */
.br-lens-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}

.br-lens-label { flex: 1 1 auto; min-width: 0; }

.br-lens-row:first-child { border-top: 0; }

.br-lens-label {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
}

/* Same verdict palette as the account record, where these same twelve
   rows appear in full: teal confirmed, blue changed, muted for a trait
   that came back with nothing. A gate is a precondition rather than
   evidence of need, so it stays neutral. */
.br-lens-verdict {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}

.br-lens-yes     { background: var(--pill-yes-bg); color: var(--teal-deep); }
.br-lens-changed { background: var(--pill-new-bg); color: var(--blue-deep); }
.br-lens-none    { background: var(--pill-none-bg); color: var(--muted); }
.br-lens-gate    { background: var(--pill-none-bg); color: var(--muted); }

.br-lens-link {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--teal-deep);
  text-decoration: none;
}

.br-lens-link span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 160ms ease;
}

.br-lens-link:hover span { transform: translateX(3px); }

/* The four blocks inside the document. */
.br-block { padding: 26px 28px; }
.br-block + .br-block { border-top: 1px solid var(--rule); }

.br-block-head {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 6px;
}

.br-block-lede {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42em;
  margin-bottom: 20px;
}

/* Open with. Numbered, because the order is the order somebody would
   use them in. */
.br-facts { margin: 0; padding: 0; list-style: none; }

.br-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

.br-fact:first-child { border-top: 0; padding-top: 0; }

.br-fact-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

/* The trait a line was found under. Instrument type, so it reads as a
   label on the evidence rather than as another voice in the copy. It
   carries the page's argument, so it appears above every fact and every
   ruled-out opening, and nowhere else. */
.br-trait {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}

.br-trait-kind {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--pill-none-bg);
  color: var(--muted);
}

.br-trait-name {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}

.br-trait-verdict {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--teal-deep);
}

/* Teal is the palette's confirmed signal, so it cannot carry a verdict
   of "Not found". Inside the ruled-out block every verdict is a
   negative, and the site sets those in muted grey everywhere else. */
.br-block-avoid .br-trait-verdict { color: var(--muted); }

/* What a person would actually say. Set at reading size and in the
   display face, so the sentence leads and the record underneath
   supports it rather than competing. */
.br-fact-line {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 34em;
}

/* The recorded text. Never reworded, so it is set apart from the
   sentence above it the same way the account record sets it apart. */
.br-fact-quote {
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44em;
}

/* Source line. Teal-deep rather than teal: teal is a mark color and
   does not clear AA as text. */
.br-src {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.br-src a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.br-src a:hover { text-decoration: underline; }

/* Raise it with. Rows rather than cards: three cards here would read as
   a buying group, which is the neighboring capability and not this
   one. */
.br-people { margin: 0; padding: 0; list-style: none; }

.br-person {
  display: grid;
  gap: 6px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

.br-person:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 701px) {
  .br-person { grid-template-columns: 220px minmax(0, 1fr); }
}

.br-person-who h5 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* Quoted as the bank words it on its own team page. */
.br-person-title {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.br-person-owns p {
  font-size: 16px;
  line-height: 1.58;
  color: var(--body);
  max-width: 40em;
}

.br-person-note {
  margin-top: 8px;
  color: var(--ink) !important;
}

/* The absence of an operations chief. A finding, not a gap, so it takes
   a tinted panel rather than a footnote. */
.br-noowner {
  margin-top: 22px;
  background: var(--tint);
  border-radius: 8px;
  padding: 20px 22px;
  max-width: 46em;
}

.br-noowner-finding {
  font-family: var(--display);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 8px;
}

.br-noowner p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}

/* Leave alone. */
.br-avoids { margin: 0; padding: 0; list-style: none; }

.br-avoid {
  padding: 16px 0 16px 16px;
  border-left: 2px solid var(--slate);
}

.br-avoid + .br-avoid { margin-top: 14px; }

.br-avoid h5 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: 6px;
}

.br-avoid p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 42em;
}

/* And the one that moved. The page's payoff, and the only blue on it. */
.br-block-moved { background: var(--pill-new-bg); }

.br-block-moved .br-block-head { color: var(--blue-deep); }

.br-moved-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.br-moved-top h5 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.016em;
  color: var(--ink);
}

.br-moved-pill {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--blue-deep);
}

.br-moved-meaning {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  max-width: 44em;
}

.br-block-moved .br-fact-quote { border-left-color: rgba(47, 99, 218, 0.28); }

/* The eleven-days-later re-read. Set in the display face so it reads as
   the annotation it is rather than as more of the record above it. */
.br-moved-note {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--blue-deep);
  max-width: 42em;
}

/* The closer, and the way out to the full record. Inside the blue
   block because it is about the fact above it, not about the page. */
.br-moved-closer {
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 40em;
}

.br-moved-out {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--blue-deep);
  text-decoration: none;
}

.br-moved-out span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 160ms ease;
}

.br-moved-out:hover span { transform: translateX(3px); }

.br-provisional {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44em;
}

/* ── What the brief shows ───────────────────────────────────────── */

/* Quiet by design, matching the other capability pages: one measure of
   text on the tint, no panel, no figure and no rule. */
.br-read-inner { max-width: 44em; }
.br-read h2 { max-width: 14em; }
.br-read .lede { margin-top: 16px; }

.br-read-link {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--teal-deep);
  text-decoration: none;
}

.br-read-link span,
.br-onward-link span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 160ms ease;
}

.br-read-link:hover span,
.br-onward-link:hover span { transform: translateX(3px); }

/* ── Two that work with it ──────────────────────────────────────── */

.br-onward h2 { max-width: 14em; }
.br-onward-grid { margin-top: 38px; }

@media (min-width: 901px) {
  .br-onward-grid { grid-template-columns: repeat(2, 1fr); }
}

.br-onward-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--teal-deep);
  text-decoration: none;
}

/* ── Closing ────────────────────────────────────────────────────── */

.br-cta-inner { text-align: center; }
.br-cta h2 { max-width: 18em; margin: 0 auto; }

.br-cta .lede {
  max-width: 40em;
  margin: 18px auto 0;
}

.br-cta .actions { justify-content: center; }

/* ── Narrow ─────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .br-doc-head { padding: 22px 20px; }
  .br-doc.is-tabbed .br-tablist { padding: 0 8px; }
  .br-tab { padding: 13px 10px; font-size: 13.5px; }
  .br-panel-head { padding: 20px 20px 0; }
  .br-block { padding: 22px 20px; }
  .br-doc-stats { grid-template-columns: repeat(3, auto); gap: 16px; }
  .br-noowner { padding: 18px 18px; }
  .br-fact { gap: 12px; }
}

/* ── Motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .br-read-link span,
  .br-moved-out span,
  .br-lens-link span,
  .br-onward-link span { transition: none; }
}