/* Briefing landing page (D208). New dev-scope sheet, not a carried transplant, so
   there is no verbatim block to append after (D168 applies to the carried sheets).

   Loaded AFTER legal-page.css, which supplies the `.page-hero` block and the
   measure-capped prose rules the lead reuses via `.legal`. This sheet adds only what
   is specific to a briefing: the topic visual, the lead/contents split, and the two
   actions. Keeping it separate means the legal pages are untouched by anything here.

   The page is a SUMMARY of the PDF, not a reproduction of it — see the route file for
   why. So the layout has to make three things obvious at a glance: what the briefing
   is about (visual + lead), how long it is (contents), and how to get it (actions). */

.brief {
  padding: 0 0 var(--section-y);
}
.brief .wrap {
  max-width: 1080px;
}

/* ---- topic visual ---------------------------------------------------------- */
.brief-cover {
  margin: 0 0 40px;
  border: 1px solid var(--hair);
  /* No fallback: the literal here was #1a1a1c, which is --surface, NOT --canvas-2
     (#161618). A fallback that paints a different token than the one it stands in
     for is worse than none, and base.css always loads before this sheet. */
  background: var(--canvas-2);
  overflow: hidden;
}
.brief-cover img {
  display: block;
  width: 100%;
  height: auto;
  /* A wide, shallow crop reads as a cover plate rather than a photograph, and keeps
     the lead above the fold on a laptop. */
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.brief .legal-meta {
  margin-bottom: 34px;
}

/* ---- lead + contents ------------------------------------------------------- */
.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}

/* `.brief-lead` also carries `.legal`, which supplies the prose typography. Only the
   things that differ from a legal page belong here. */
.brief-lead > article > *:first-child {
  margin-top: 0;
}

/* ⚠ D213 — `.legal` BRINGS SECTION PADDING WITH IT, and this element is not a section.
   `legal-page.css` sets `.legal { padding: 0 0 var(--section-y) }` because there it IS
   the page section. Here `.legal` was borrowed onto a grid COLUMN purely for its prose
   typography, so that padding landed inside the grid — on top of `.brief`'s own
   `var(--section-y)`. At 375px that is 96px + 96px of dead space stacked at the foot of
   the page, and a 96px hole between the download button and the contents list.
   Borrowing a class borrows all of it; this un-borrows the half that does not apply. */
.brief-lead.legal {
  padding-bottom: 0;
}

.brief-actions {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
/* The markdown link is deliberately quiet next to the download button: it serves
   agents and the occasional reader who wants plain text, and should not compete with
   the primary action. */
.brief-md {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms, border-color 160ms;
}
.brief-md:hover {
  color: var(--periwinkle);
  border-bottom-color: rgba(136, 156, 231, 0.4);
}

/* ---- contents -------------------------------------------------------------- */
.brief-toc {
  position: sticky;
  top: 92px;
  border-left: 1px solid var(--hair);
  padding-left: 26px;
}
.brief-toc .seclabel {
  margin-bottom: 16px;
}
.brief-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.brief-toc li {
  counter-increment: toc;
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.brief-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  /* 11px, not 10px: the D158/D162 type floor is a STANDING RULE (register §2 —
     "the floor is now a standing rule, no ruling needed"), and this counter was
     one of two dev-authored places that had slipped under it. */
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.brief-toc-note {
  margin: 22px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- narrow ---------------------------------------------------------------- */
@media (max-width: 900px) {
  /* The contents list stops being a rail and becomes a block under the lead. Sticky
     positioning is dropped with it: a sticky element in normal flow on a phone just
     hides content behind itself. */
  .brief-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .brief-toc {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--hair);
    padding-left: 0;
    padding-top: 30px;
  }
}

@media (max-width: 560px) {
  .brief-cover {
    margin-bottom: 30px;
  }
  .brief-cover img {
    /* A 21:9 crop is unreadable at phone width; give the visual more height. */
    aspect-ratio: 16 / 10;
  }
  .brief-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .brief-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* ---- ⚠ SPECIFICITY REPAIR (D208a) ------------------------------------------
   The actions sit INSIDE `.brief-lead.legal` so they share the prose column, and
   `legal-page.css` styles every link in that scope:

       .legal a { color: var(--periwinkle); border-bottom: 1px solid ... }

   `.legal a` is (0,1,1); `.btn` is (0,1,0). So the prose rule WON, and the download
   button rendered periwinkle-on-marigold — near-illegible — with a stray underline,
   while the markdown link lost its quiet treatment. `.btn` had it right at
   `color: #141416`; it was simply outranked.

   Fixed by raising specificity here rather than by loosening `.legal a`, which is
   shared with /privacy and /terms and correct for actual prose. Two class selectors
   (0,2,0) beat it decisively rather than relying on this sheet loading later. */
.brief-actions .btn,
.brief-actions .btn:hover,
.brief-actions .btn:active {
  /* the site's own button contrast pairing, restored */
  color: #141416;
  border-bottom: 0;
}

.brief-actions .brief-md {
  color: var(--text-tertiary);
  border-bottom: 1px solid transparent;
}
.brief-actions .brief-md:hover {
  color: var(--periwinkle);
  border-bottom-color: rgba(136, 156, 231, 0.4);
}

/* ---- what this briefing covers (D221, P1) ---------------------------------- */
/* The promissory list. Styled as a sibling of the prose, not of the contents rail:
   the rail is chrome at the page edge, this sits inside the reading column at the
   decision point above the download.
   Vocabulary check (D218): 14px body matches `.brief-toc li`, the marigold rule is
   a 1px hairline, radius stays 0, and every colour is a token. No new type step. */
.brief-covers {
  margin: 38px 0 0;
  padding: 26px 0 4px;
  border-top: 1px solid var(--hair);
}
.brief-covers .seclabel {
  margin-bottom: 18px;
}
.brief-covers ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.brief-covers li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* A 1px marigold tick rather than a bullet glyph: the accent marks a resolved point
   in this design system, and a disc would be the only round shape on the page. */
.brief-covers li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--marigold);
}
@media (max-width: 760px) {
  .brief-covers { margin-top: 30px; padding-top: 22px; }
  .brief-covers li { padding-left: 22px; }
}