/* c.brief.css: the structured blocks of a monthly brief.
   Loaded only by writing/briefs/<slug>.html, through the head_extra
   block in templates/article.html, because no other page emits this
   markup. The blocks are built in the BLOG repo by
   tools/briefs/components.py; the class names here are that file's
   output, not a naming scheme of this repo's own.

   This sheet loads after article.css, which styles p, h3 and lists
   inside .c-art-body. A component that needs
   something else restates the property here rather than trusting
   the cascade to have left it alone. article.css itself is not
   touched: it styles every article on the site.

   Colours come from the palette declared on .c-root in c.css. The
   role hues, the inverted amber and the pill tints below are the
   only additions, each declared once and commented where no
   existing token covers it. No motion anywhere, which is how this
   file honours prefers-reduced-motion: nothing to switch off. */

.c-art-body {
  --brief-strong: var(--blue);
  /* Three hues that separate from the house crimson and stay
     legible as label text on white. c.css declares one accent
     only, so no token covers them. */
  --brief-fast: #1F6F5C;      /* deep teal */
  --brief-open: #2B5C9B;      /* slate blue */
  --brief-hard: #6A4D9C;      /* muted violet */
  /* Amber means inverted and is used nowhere else. The fill only
     has to carry a bar, the ink has to carry 10px text, so the
     second is the darker step of the same hue. */
  --brief-inv: #B8730C;       /* bar fill */
  --brief-inv-ink: #7A4A06;   /* same amber, dark enough as text */
}

/* ── Verdict cards ──────────────────────────────────────── */
/* The four calls that open the article. Each card carries a top
   border in its own hue, so the roles separate at a glance. */
.brief-verdict { display: grid; gap: 12px; margin-bottom: 44px;
  grid-template-columns: repeat(4, 1fr); }
.brief-verdict__card { display: flex; flex-direction: column;
  padding: 16px 16px 14px; border: 1px solid var(--line);
  border-top: 3px solid var(--brief-role, var(--blue));
  background: var(--paper); }
.brief-verdict__card--strongest { --brief-role: var(--brief-strong); }
.brief-verdict__card--fastest { --brief-role: var(--brief-fast); }
.brief-verdict__card--least_crowded { --brief-role: var(--brief-open); }
.brief-verdict__card--hardest { --brief-role: var(--brief-hard); }
.brief-verdict__role { font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brief-role, var(--blue)); }
.brief-verdict__name { display: block; margin-top: 8px;
  font-family: "Space Grotesk", sans-serif; font-size: 16px;
  font-weight: 600; line-height: 1.2; color: var(--ink); }
/* text-align: article.css justifies body paragraphs. A card column
   is about 115px of text, so a justified 13.5px line would carry
   some fifteen characters and open rivers down the block. */
.brief-verdict__card p { margin: 8px 0 0; font-size: 13.5px;
  line-height: 1.5; text-align: left; color: var(--ink-2); }
.brief-verdict__score { margin-top: auto; padding-top: 12px;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  color: var(--muted); }

/* ── Window line ────────────────────────────────────────── */
/* Replaces the four-box strip. Set like .c-art-meta in article.css.
   article.css puts 48px under the article head; this line is the
   same kind of metadata as the date line there, so it pulls itself
   up to sit 10px under it rather than a paragraph away. */
p.brief-window { margin: -38px 0 24px; font-size: 12.5px;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .04em;
  color: var(--muted); text-align: left; }

/* ── Ranking list ───────────────────────────────────────── */
/* Rank, name, score, grade on one line each. The six axes live on
   the cards. padding-left and the li margin restate what article.css
   gives every list: ol.brief-rank ties .c-art-body ol on specificity
   and wins on source order only. */
ol.brief-rank { list-style: none; margin-bottom: 44px;
  padding-left: 0; }
.brief-rank li { display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.brief-rank li + li { margin-top: 0; }
.brief-rank li:last-child { border-bottom: 0; }
.brief-rank__rank { width: 22px; font-family: "IBM Plex Mono",
  monospace; font-size: 12px; color: var(--muted); }
.brief-rank__name { flex: 1; min-width: 0; font-size: 15px;
  line-height: 1.35; color: var(--ink); }
.brief-rank__score { font-family: "IBM Plex Mono", monospace;
  font-size: 15px; font-variant-numeric: tabular-nums;
  color: var(--ink); }
.brief-rank__grade { padding: 1px 8px; border: 1px solid var(--blue);
  background: var(--blue-t); font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 500; color: var(--blue-d); }

/* ── Sources ────────────────────────────────────────────── */
/* One item per source, never justified: a URL cannot break. */
ul.brief-sources { padding-left: 0; list-style: none; font-size: 14px;
  color: var(--ink-2); }
.brief-sources li { text-align: left; overflow-wrap: anywhere; }

/* ── Opportunity card ───────────────────────────────────── */
.brief-card { margin-bottom: 36px; border: 1px solid var(--line);
  background: var(--paper); }
.brief-card__head { display: flex; align-items: baseline; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
/* margin: article.css gives an h3 a 1.6em top margin, which on this
   baseline row would drop the title below the rank, score and
   grade beside it. */
.brief-card__head h3 { flex: 1; min-width: 0; margin: 0;
  font-size: 19px; line-height: 1.15; }
.brief-card__rank { font-family: "IBM Plex Mono", monospace;
  font-size: 13px; color: var(--blue); }
.brief-card__score { font-family: "IBM Plex Mono", monospace;
  font-size: 17px; font-weight: 500; color: var(--ink); }
.brief-card__score span { font-size: 12px; color: var(--muted); }
.brief-card__grade { padding: 2px 9px; border: 1px solid var(--blue);
  background: var(--blue-t); font-family: "IBM Plex Mono", monospace;
  font-size: 13px; font-weight: 500; color: var(--blue-d); }

/* One prose column. The five fields the owner kept read top to
   bottom; alignment follows article.css, justified above 640px and
   left below it, like every paragraph on the page. */
.brief-card__grid { display: grid; grid-template-columns: 1fr;
  gap: 16px; padding: 16px 18px 20px; }
.brief-field { min-width: 0; }
.brief-field h4 { margin: 0 0 4px; font-size: 10.5px;
  font-family: "IBM Plex Mono", monospace; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); }
.brief-field p { margin: 0; font-size: 15px; line-height: 1.55;
  color: var(--ink-2); }

/* ── Pills ──────────────────────────────────────────────── */
/* Three facts a reader triages on before any prose. Quiet chips:
   tinted ground, coloured text, no fill that competes with the
   card heading. Each pair below is the lightest wash of its own
   hue and a hairline a step darker, every one within a degree of
   the ink it sits under. c.css carries one tint token, --blue-t,
   and it is crimson, so none of the three fits. */
.brief-pills { display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 18px 0; }
.brief-pill { padding: 3px 10px; border: 1px solid var(--line);
  border-radius: 999px; font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; color: var(--ink-2); background: var(--bg); }
.brief-pill--evidence { border-color: #C3DFD8; background: #EFF8F6;
  color: var(--brief-fast); }
.brief-pill--crowding { border-color: #E8D6B8; background: #FBF4E8;
  color: var(--brief-inv-ink); }
.brief-pill--mvp { border-color: #CFDAE9; background: #F1F5FA;
  color: var(--brief-open); }

/* ── Score axes ─────────────────────────────────────────── */
/* Six axes per card. The number is always printed beside the bar,
   so the bar reinforces a value it never has to carry alone. Sits
   first under the head, so the six numbers explain the total above
   them. Value and bar come before the label in the markup, so the
   row lines up whatever the label does. */
.brief-scores { display: grid; gap: 12px; padding: 14px 18px 18px;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--line-2); }
.brief-axis { min-width: 0; }
.brief-axis__label { display: block; margin-top: 6px; font-size: 10px;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .04em;
  line-height: 1.35; color: var(--muted); }
.brief-axis__note { display: block; margin-top: 2px;
  font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  color: var(--brief-inv-ink); }
.brief-axis__value { display: block;
  font-family: "IBM Plex Mono", monospace; font-size: 15px;
  color: var(--ink); }
.brief-axis__value span { font-size: 11px; color: var(--muted); }
.brief-axis__bar { display: flex; height: 6px; margin-top: 5px;
  background: var(--line-2); border: 1px solid var(--line); }
.brief-axis__bar i { flex: none; height: 100%;
  background: var(--blue); }

/* An inverted axis is scored the other way round: a low number is
   the good number. Three cues say so without the legend. The fill
   is amber, not crimson. It grows from the right, so the two
   scales never look like one. The label carries "low is good". */
.brief-axis--inverted .brief-axis__bar { justify-content: flex-end; }
.brief-axis--inverted .brief-axis__bar i {
  background: var(--brief-inv); }
.brief-axis--inverted .brief-axis__value {
  color: var(--brief-inv-ink); }

/* ── Narrow screens ─────────────────────────────────────── */
/* .c-art caps the column at 720px, so the column width is the same
   at every viewport above it. The column starts shrinking at 720,
   and above it the four column verdict and six axis strip are the
   layout the owner chose. */
@media (max-width: 720px) {
  .brief-verdict { grid-template-columns: 1fr 1fr; }
  .brief-scores { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .brief-verdict { grid-template-columns: 1fr; }
  .brief-scores { padding: 14px; }
  .brief-card__head { flex-wrap: wrap; padding: 14px; }
  .brief-card__head h3 { flex: 1 1 100%; order: 3; }
  .brief-card__grid, .brief-pills { padding-inline: 14px; }
}