/* BonBonBot Console: one submission, below the masthead.
   ===================================================================
   THE IDEA. The masthead is a card because it is one object: a company,
   a verdict and a score, lifted off the page as the thing the screen is
   about. Everything under it is a document, and a document is set with
   type, space and rules rather than assembled out of boxes.

   What this replaced: a chapter held a card, the card carried a heading
   that repeated the chapter's, and every group inside it was another
   card holding another card. Four rounded borders deep in places. A box
   says "this is separate from what is around it", so a page where
   everything is in a box has said nothing, and the eye has no way to
   tell the report from the plumbing.

   The things that still get a surface, and why:
     the masthead   one object: a company, a verdict and a score
     a picture      a screenshot, a map or a share card needs a frame
     a control      the advisor's field needs somewhere to sit
     the run        the machine's half is a different register and
                    should look like one
   Each of those draws its own. There is no generic box helper on this
   screen, so nothing can reach for one out of habit.

   MOTION. Every animation in here is held until the chapter around it
   is scrolled to: console-theme.css pauses animations inside a
   .cbc-reveal that has not arrived, so a bar fills and a figure rolls
   where somebody is looking at it rather than to an empty room. The
   stagger is off --i and is capped, so a list of thirty rows is a wave
   and not a queue.

   THE STAGGER IS --cbc-inside, NOT A FORMULA TYPED OUT AGAIN. Seven
   rules in here had the min(calc(...)) written out by hand, in three
   different divisors, and two more (.cb-gain-step and .cb-vs-mark) had
   no cap at all: nine plan steps put the last bar at nine hundred
   milliseconds, by which point the eye has stopped reading it as
   sequence and started reading it as the page being slow. Worse, the
   hand-written ones counted from page load rather than from the moment
   their own chapter arrived, which is what --cbc-inside adds and is the
   whole reason it exists (console-theme.css says why at length). One
   name, one decision, one place to change it. */

/* THE ODOMETER lives in console-theme.css now. It is one of the console's
   global motions rather than something this screen owns, and the dashboard
   uses it too. */

/* ==================================================================
   THE METER (views/meter.ts)
   A track and a fill that grows into it. Empty at rest, so the row
   reads as a measurement being taken rather than as a coloured rule.
   ================================================================== */
.cb-meter {
  display: block;
  inline-size: 100%;
  block-size: var(--cb-space-sm);
  border-radius: var(--cb-radius-full);
  /* The hairline colour rather than the sunken surface. A track painted a
     step lighter than the page reads on a card and disappears on the page
     itself, which is where most of these now sit. */
  background: var(--cbc-line);
  overflow: hidden;
}
.cb-meter[data-size="fine"] {
  block-size: var(--cb-space-xxs);
}
.cb-meter-fill {
  display: block;
  inline-size: var(--w, 0%);
  block-size: 100%;
  border-radius: inherit;
  background: var(--cbc-ink-faint);
  transform-origin: left center;
  animation: cbc-grow-x var(--cb-motion-slow) var(--cbc-spring) backwards;
  animation-delay: var(--cbc-inside);
  /* No will-change. A submission draws dozens of these and each one grows once,
     on arrival, so a permanent promotion is dozens of permanent layers bought
     for one four-hundred-millisecond animation apiece. The browser promotes an
     element with a running transform animation on its own. Same argument as
     .cbc-reveal in console-theme.css, which releases its promotion the moment
     the card has landed. */
}
.cb-meter[data-tone="good"] .cb-meter-fill {
  background: var(--cbc-good);
}
.cb-meter[data-tone="warn"] .cb-meter-fill {
  background: var(--cbc-warn);
}
.cb-meter[data-tone="poor"] .cb-meter-fill {
  background: var(--cbc-poor);
}
/* A BAR DRAWN IN ITS CATEGORY'S COLOUR, HANDED DOWN BY THE BAR AS --tint.
   This was eight rules, one per category id, which is a stylesheet keeping a
   second copy of a list that belongs to the token set, and it is the same
   copy console-dossier.css was keeping beside it for the swatch. It stopped
   being true the moment the focused audit kinds added eight more ids
   (docs/14-audit-kinds.md): a meter for crawlability, aiReadiness or security
   set data-cat, matched none of the eight, and fell back to the plain fill,
   so a set of bars that is supposed to read as a set of subjects read as one
   grey bar among the colours. views/meter.ts builds the name from the id
   instead, the way the category rows and weight-bar.ts already do, so the set
   can grow again and this rule needs nothing.
   The fallback covers the one case left, a bar carrying a category with no
   tint behind it, which is a fault rather than a state: grey says so quietly
   instead of leaving a hole. It matches the attribute rather than the value,
   so a bar with a category still beats its own tone. */
.cb-meter[data-cat] .cb-meter-fill {
  background: var(--tint, var(--cbc-ink-faint));
}

/* ==================================================================
   THE DOCUMENT
   Chapters separated by air and a rule, not by walls.
   ================================================================== */
.cb-paper {
  display: grid;
  gap: var(--cb-space-9xl);
}
.cb-paper .cb-chapter {
  display: grid;
  gap: var(--cb-space-4xl);
}
/* The head is a title, a line under it, and nothing else. It was carrying the
   same words the card underneath it carried, at almost the same size. */
.cb-paper .cb-chapter-head {
  align-items: baseline;
  gap: var(--cb-space-2xl);
  padding-block-end: var(--cb-space-2xl);
  border-block-end: 1px solid var(--cbc-line);
}
.cb-paper .cb-chapter-title h2 {
  font-size: var(--cb-type-2xl-size);
  line-height: var(--cb-type-2xl-line-height);
  letter-spacing: var(--cb-type-3xl-letter-spacing);
  font-weight: var(--cb-font-weight-semibold);
}
.cb-paper .cb-chapter-title p {
  margin-block-start: var(--cb-space-xs);
  max-inline-size: var(--cb-layout-paragraph-max-width);
}

/* ---- A part ----
   A group inside a chapter: small caps, a hairline, its contents. */
.cb-paper .cb-part {
  display: grid;
  gap: var(--cb-space-2xl);
}
.cb-paper .cb-part + .cb-part {
  margin-block-start: var(--cb-space-6xl);
}
.cb-part-head {
  display: flex;
  align-items: baseline;
  gap: var(--cb-space-2xl);
  flex-wrap: wrap;
}
.cb-part-words {
  min-inline-size: 0;
  flex: 1 1 var(--cb-width-xxs);
}
.cb-part-label {
  font-size: var(--cb-type-xs-size);
  line-height: var(--cb-type-xs-line-height);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-xxs);
  font-weight: var(--cb-font-weight-semibold);
  color: var(--cbc-ink-faint);
}
.cb-part-note {
  margin-block-start: var(--cb-space-xs);
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
  color: var(--cbc-ink-muted);
  max-inline-size: var(--cb-layout-paragraph-max-width);
}
.cb-part-actions {
  margin-inline-start: auto;
  display: flex;
  gap: var(--cb-space-md);
}
.cb-part-body {
  display: grid;
  gap: var(--cb-space-2xl);
}

/* ---- Rows ----
   A line, a rule under it, and room to breathe. The hover tint bleeds
   past the text on both sides so a row reads as a band rather than as a
   rectangle that stops where the words do. */
.cb-items {
  display: grid;
}
.cb-item {
  display: grid;
  align-items: center;
  gap: var(--cb-space-lg) var(--cb-space-2xl);
  padding: var(--cb-space-2xl) var(--cb-space-lg);
  margin-inline: calc(var(--cb-space-lg) * -1);
  border-radius: var(--cb-radius-lg);
  border-block-end: 1px solid var(--cbc-line);
  transition: background var(--cb-motion-fast) var(--cb-motion-ease);
  animation: cbc-rise var(--cb-motion-slow) var(--cbc-spring) backwards;
  animation-delay: var(--cbc-inside);
}
.cb-items > .cb-item:last-child {
  border-block-end: none;
}
/* The border is on the row and the radius is on the row, so the rule would
   curve away from the text at both ends. Squared, because a rule is a rule. */
.cb-item {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.cb-item:hover {
  background: var(--cbc-hover);
}

/* ---- Figures ----
   The numbers, set large enough to be read across a desk, with the
   words under them as the caption. This replaced a row of badges: six
   pills at caption size, each a whole sentence, with the measurement
   inside them at the same size as the words around it. */
.cb-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cb-space-10xl), 1fr));
  gap: var(--cb-space-4xl) var(--cb-space-2xl);
  padding-block: var(--cb-space-lg);
}
.cb-fig {
  display: grid;
  gap: var(--cb-space-xs);
  align-content: start;
  min-inline-size: 0;
  animation: cbc-rise var(--cb-motion-slow) var(--cbc-spring) backwards;
  animation-delay: var(--cbc-inside);
}
.cb-fig-value {
  font-size: var(--cb-type-3xl-size);
  line-height: 1em;
  letter-spacing: var(--cb-type-3xl-letter-spacing);
  font-weight: var(--cb-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--cbc-ink);
}
.cb-fig[data-tone="good"] .cb-fig-value {
  color: var(--cbc-good-text);
}
.cb-fig[data-tone="warn"] .cb-fig-value {
  color: var(--cbc-warn-text);
}
.cb-fig[data-tone="poor"] .cb-fig-value {
  color: var(--cbc-poor-text);
}
.cb-fig-label {
  margin-block-start: var(--cb-space-sm);
  font-size: var(--cb-type-xs-size);
  line-height: var(--cb-type-xs-line-height);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-xxs);
  font-weight: var(--cb-font-weight-semibold);
  color: var(--cbc-ink-muted);
}
.cb-fig-note {
  font-size: var(--cb-type-xs-size);
  line-height: var(--cb-type-xs-line-height);
  color: var(--cbc-ink-faint);
}

/* ---- Tables ----
   Rows arrive in sequence, same as everything else on the page. */
.cb-paper .cb-table tbody tr {
  animation: cbc-rise var(--cb-motion-slow) var(--cbc-spring) backwards;
  animation-delay: var(--cbc-inside);
}

/* ---- Reading ----
   Prose is capped at a measure. A report summary set across a 1440
   monitor is a hundred and forty characters a line, which is a wall. */
.cb-read {
  max-inline-size: var(--cb-layout-paragraph-max-width);
  font-size: var(--cb-type-md-size);
  line-height: var(--cb-type-md-line-height);
  color: var(--cbc-ink-muted);
}
.cb-read strong {
  color: var(--cbc-ink);
  font-weight: var(--cb-font-weight-medium);
}

/* 768px mirrors tokens.breakpoint.md */
@media (max-width: 768px) {
  .cb-paper {
    gap: var(--cb-space-7xl);
  }
  /* The hover band bleeds past the text by a step on either side, which is
     right on a desk and is twenty-four pixels of horizontal scroll on a
     phone. The band goes; the rule and the rhythm stay. */
  .cb-item,
  .cb-paper .cb-weak-row > summary {
    margin-inline: 0;
    padding-inline: 0;
  }
  .cb-paper .cb-chapter-title h2 {
    font-size: var(--cb-type-xl-size);
    line-height: var(--cb-type-xl-line-height);
  }
  .cb-fig-value {
    font-size: var(--cb-type-2xl-size);
  }
  .cb-figs {
    grid-template-columns: repeat(auto-fit, minmax(var(--cb-space-10xl), 1fr));
  }
}

/* ==================================================================
   THE PARTS THAT USED TO BE BOXES
   Each block below is a component that was drawn as a bordered card and
   is now drawn as itself. Nothing about the content changed.
   ================================================================== */

/* ---- A measurement, on a row ----
   Was .cb-list-item: a bordered, padded surface per check, inside a
   card, inside a chapter. The row it sits in already has the rule and
   the room; this only has to lay the words out. */
.cb-measure {
  display: grid;
  gap: var(--cb-space-lg);
  min-inline-size: 0;
}
.cb-measure-head {
  display: flex;
  align-items: center;
  gap: var(--cb-space-xl);
  flex-wrap: wrap;
}
.cb-measure-head .cb-row-title {
  margin-inline-end: auto;
}
/* A row that opens is still a row: block flow, so the summary and the
   body stack rather than becoming two grid columns. */
.cb-paper details.cb-item {
  display: block;
}
.cb-paper .cb-item > .cb-fold,
.cb-paper .cb-fold.cb-item {
  padding-inline: 0;
}
.cb-paper .cb-fold > summary {
  padding-inline: 0;
  padding-block: 0;
  font-size: var(--cb-type-sm-size);
}
.cb-paper .cb-fold > summary > span:first-child {
  color: var(--cbc-ink);
}
.cb-paper .cb-fold > .cb-stack,
.cb-paper .cb-fold > .cb-table-wrap {
  margin-block-start: var(--cb-space-2xl);
  animation: cbc-emerge var(--cb-motion-slow) var(--cbc-spring) backwards;
}

/* ---- The scoreboard ----
   Eight categories on the page rather than in a panel. The rows are a
   step larger here than on the business dossier because on this screen
   they are the centrepiece rather than one card among nine. */
.cb-paper .cb-weak {
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
  border-block-start: 1px solid var(--cbc-line);
}
.cb-paper .cb-weak-row {
  border-block-end: 1px solid var(--cbc-line);
  animation: cbc-rise var(--cb-motion-slow) var(--cbc-spring) backwards;
  animation-delay: var(--cbc-inside);
}
.cb-paper .cb-weak-row + .cb-weak-row {
  border-block-start: none;
}
.cb-paper .cb-weak-row > summary {
  padding-block: var(--cb-space-2xl);
  padding-inline: var(--cb-space-lg);
  margin-inline: calc(var(--cb-space-lg) * -1);
  border-radius: var(--cb-radius-lg);
}
.cb-paper .cb-weak-name {
  font-size: var(--cb-type-base-size);
  font-weight: var(--cb-font-weight-medium);
}
.cb-paper .cb-weak-score {
  font-size: var(--cb-type-xl-size);
  line-height: 1em;
  min-inline-size: var(--cb-space-6xl);
  display: flex;
  justify-content: flex-end;
}
/* What is inside an open category, without a panel around it.
   The open row already marks itself: the summary takes the hover tint
   the moment it opens. A sunken panel under that, holding a bordered
   card per finding, was two more containers to say the same thing. The
   indent says "inside" and the rules separate the findings. */
.cb-paper .cb-weak-body {
  border-block-start: none;
  background: none;
  padding: var(--cb-space-md) 0 var(--cb-space-4xl) var(--cb-space-4xl);
}
.cb-paper .cb-finds {
  gap: 0;
}
.cb-paper .cb-find {
  padding: var(--cb-space-2xl) 0;
  border: none;
  border-block-start: 1px solid var(--cbc-line);
  border-radius: 0;
  background: none;
}
.cb-paper .cb-finds > .cb-find:first-child {
  border-block-start: none;
}
/* The cost sits above the findings it explains, not beside them. */
.cb-paper .cb-weak-cost {
  margin-block-end: var(--cb-space-lg);
}

/* ==================================================================
   THE REPORT
   Five moves, each with its own shape: the read, where it loses, where
   it holds up, against the field, the ninety days, and what to carry
   into the call. It was one column of full-width blocks in the order
   the schema declares them, which is the order the pipeline thinks in.
   ================================================================== */

/* ---- The read ----
   The summary and the strengths are two halves of one paragraph, so
   they sit beside each other. Stacked, three strengths under a summary
   read as a separate section about a different subject. */
.cb-lede {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--cb-space-3xl) var(--cb-space-8xl);
  align-items: start;
}
.cb-lede-read {
  font-size: var(--cb-type-md-size);
  line-height: var(--cb-type-md-line-height);
  color: var(--cbc-ink);
  text-wrap: pretty;
}
.cb-lede-good {
  display: grid;
  gap: var(--cb-space-lg);
}
/* One column in the sidebar, whatever the shared list does elsewhere. */
.cb-lede-good .cb-talk-good {
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Where it loses, and where it holds up ----
   The same rows the business dossier draws, in two groups. The lead
   group carries the report's own sentence about the category on the
   closed row: it was only reachable by opening, so learning what was
   wrong with a site meant opening five things and shutting them again. */
.cb-weak-head {
  display: grid;
  gap: var(--cb-space-xxs);
  min-inline-size: 0;
}
.cb-weak-line {
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
  color: var(--cbc-ink-muted);
  /* Two lines, then it stops. The whole sentence is one press away and a
     five-line row is a paragraph pretending to be a row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cb-paper .cb-weak-row[data-weight="lead"] > summary {
  grid-template-columns: auto minmax(0, 1fr) minmax(var(--cb-space-10xl), 0.5fr) auto auto auto;
  align-items: center;
  padding-block: var(--cb-space-2xl);
}
/* The name sets the line the swatch sits on. Centred in a row whose
   height comes from a two-line sentence, the dot landed beside the
   sentence rather than beside the thing it names. */
.cb-paper .cb-weak-name {
  line-height: var(--cb-type-base-line-height);
}
.cb-paper .cb-weak-row[data-weight="lead"] .cb-weak-swatch {
  align-self: start;
  margin-block-start: var(--cb-space-md);
}
/* The strong group at half the weight: tighter, smaller, no sentence.
   Still a details, so nothing the report said is out of reach. */
.cb-paper .cb-weak-row[data-weight="quiet"] > summary {
  grid-template-columns: auto minmax(0, 1fr) minmax(var(--cb-space-10xl), 0.5fr) auto auto auto;
  padding-block: var(--cb-space-lg);
}
.cb-paper .cb-weak-row[data-weight="quiet"] .cb-weak-name {
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-muted);
}
.cb-paper .cb-weak-row[data-weight="quiet"] .cb-weak-score {
  font-size: var(--cb-type-md-size);
}
.cb-paper .cb-weak-row[data-weight="quiet"] .cb-weak-track {
  block-size: var(--cb-space-xs);
}
.cb-paper .cb-weak-row[data-weight="quiet"] .cb-weak-count {
  color: var(--cbc-ink-faint);
}

/* ---- Against the field ----
   One axis with everybody on it. Four bars is four pictures of the same
   scale and answers "how did each one score"; the question is "where do
   they sit", which is a position, so it is drawn as one. */
.cb-vs {
  display: grid;
  gap: var(--cb-space-md);
}
.cb-vs-axis {
  position: relative;
  block-size: var(--cb-space-8xl);
}
/* A second row of marks under the line, for a field where two rivals
   would otherwise sit on top of each other. */
.cb-vs-axis[data-tiers="2"] {
  block-size: var(--cb-space-10xl);
}
.cb-vs-line {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 45%;
  block-size: var(--cb-space-xxs);
  border-radius: var(--cb-radius-full);
  background: var(--cbc-line);
  transform-origin: left center;
  animation: cbc-grow-x var(--cb-motion-slow) var(--cbc-spring) backwards;
}
/* The mark is the site's own icon: twenty pixels wide however long the
   business is called, and the same icon names the same business in the
   rows underneath. Names on the axis printed through each other. */
.cb-vs-mark {
  position: absolute;
  inset-inline-start: var(--at, 50%);
  inset-block-start: 45%;
  translate: -50% -50%;
  animation: cbc-ring-in var(--cb-motion-base) var(--cbc-spring) backwards;
  animation-delay: var(--cbc-inside);
}
/* The ring is the page ground, so a mark sits on the line rather than
   being crossed by it. */
.cb-vs-mark .cb-site-icon {
  box-shadow: 0 0 0 var(--cb-space-xs) var(--cbc-base);
}
.cb-vs-mark[data-side="you"] {
  z-index: 1;
}
.cb-vs-mark[data-side="you"] .cb-site-icon {
  inline-size: var(--cb-space-4xl);
  block-size: var(--cb-space-4xl);
  box-shadow:
    0 0 0 var(--cb-space-xxs) var(--cbc-accent),
    0 0 0 var(--cb-space-sm) var(--cbc-base);
}
.cb-vs-label {
  position: absolute;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  white-space: nowrap;
}
.cb-vs-mark[data-side="you"] .cb-vs-label {
  inset-block-end: calc(100% + var(--cb-space-md));
}
.cb-vs-mark[data-side="them"] .cb-vs-label {
  inset-block-start: calc(100% + var(--cb-space-md));
}
.cb-vs-mark[data-side="them"][data-tier="1"] .cb-vs-label {
  inset-block-start: calc(100% + var(--cb-space-6xl));
}
/* A mark near an end aligns its label to that end. Centred, a 96 runs
   off the right edge of the axis it is describing. */
.cb-vs-mark[data-edge="start"] .cb-vs-label {
  inset-inline-start: 0;
  translate: 0 0;
  justify-items: start;
}
.cb-vs-mark[data-edge="end"] .cb-vs-label {
  inset-inline-start: auto;
  inset-inline-end: 0;
  translate: 0 0;
  justify-items: end;
}
.cb-vs-score {
  font-size: var(--cb-type-md-size);
  font-weight: var(--cb-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--cbc-ink-muted);
}
.cb-vs-mark[data-side="you"] .cb-vs-score {
  font-size: var(--cb-type-xl-size);
  color: var(--cbc-accent);
}
.cb-vs-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--cb-type-xs-size);
  font-variant-numeric: tabular-nums;
  color: var(--cbc-ink-faint);
}

/* One rival, and what the report says they are better at. */
.cb-rival {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--cb-space-xl);
}
.cb-rival-what {
  display: grid;
  gap: var(--cb-space-md);
  min-inline-size: 0;
}
.cb-rival-name {
  font-size: var(--cb-type-base-size);
  font-weight: var(--cb-font-weight-semibold);
  color: var(--cbc-ink);
  text-decoration: none;
  justify-self: start;
}
.cb-rival-name:hover {
  color: var(--cbc-accent);
  text-decoration: underline;
}
.cb-rival-wins {
  list-style: none;
  display: grid;
  gap: var(--cb-space-md);
}
.cb-rival-wins li {
  position: relative;
  padding-inline-start: var(--cb-space-2xl);
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
  color: var(--cbc-ink-muted);
}
/* Warm, not green. These are the things a rival beats them at. */
.cb-rival-wins li::before {
  content: "";
  position: absolute;
  inset-block-start: var(--cb-space-md);
  inset-inline-start: 0;
  inline-size: var(--cb-space-sm);
  block-size: var(--cb-space-sm);
  border-radius: var(--cb-radius-full);
  background: var(--cbc-warn);
}
.cb-rival-none {
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-faint);
}
.cb-rival-score {
  font-size: var(--cb-type-xl-size);
  line-height: 1em;
  font-weight: var(--cb-font-weight-semibold);
  color: var(--cbc-ink-muted);
}

/* ---- The climb ----
   The report's one arithmetic promise, drawn: what they hold today, then
   a segment per step sized to what that step is worth. Every part of it
   was already on the screen and none of it was visible. */
.cb-gain {
  display: grid;
  gap: var(--cb-space-lg);
}
.cb-gain-track {
  display: flex;
  gap: var(--cb-space-xxs);
  block-size: var(--cb-space-lg);
  border-radius: var(--cb-radius-full);
  background: var(--cbc-line);
  overflow: hidden;
}
.cb-gain-now,
.cb-gain-step {
  flex: 0 0 var(--w, 0%);
  min-inline-size: var(--cb-space-xxs);
  transform-origin: left center;
  animation: cbc-grow-x var(--cb-motion-slow) var(--cbc-spring) backwards;
  transition: filter var(--cb-motion-fast) var(--cb-motion-ease);
}
/* Today is neutral and the plan is green, because the question this
   picture answers is how much of the promise is still to be earned. */
.cb-gain-now {
  background: var(--cbc-ink-faint);
}
.cb-gain-step {
  animation-delay: var(--cbc-inside);
}
.cb-gain-step[data-effort="quick win"] {
  background: var(--cbc-good);
}
.cb-gain-step[data-effort="project"] {
  background: color-mix(in srgb, var(--cbc-good) 45%, var(--cbc-line));
}
/* Pointing at one holds the rest back rather than shouting the one in
   front. Dimmed with a filter rather than opacity: the entrance
   animation fills opacity, and a filled animation beats a transition. */
.cb-gain-track[data-lit] .cb-gain-step:not([data-on]),
.cb-gain-track[data-lit] .cb-gain-now {
  filter: opacity(0.28);
}
.cb-gain-ends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cb-space-lg);
  font-size: var(--cb-type-sm-size);
  color: var(--cbc-ink-faint);
  font-variant-numeric: tabular-nums;
}
.cb-gain-end[data-to] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--cb-space-xs);
  color: var(--cbc-good-text);
  font-weight: var(--cb-font-weight-semibold);
}
.cb-gain-end[data-to] .cb-odo {
  font-size: var(--cb-type-lg-size);
}
.cb-paper .cb-steps .cb-step {
  transition: filter var(--cb-motion-fast) var(--cb-motion-ease);
}
.cb-paper .cb-steps[data-lit] .cb-step:not([data-on]) {
  filter: opacity(0.4);
}

/* ---- Into the call ----
   What to sell and what to open with. They were two lists at opposite
   ends of a long chapter and they are one job. */
.cb-take {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cb-width-xs), 1fr));
  gap: var(--cb-space-3xl) var(--cb-space-8xl);
  align-items: start;
}
.cb-take-half {
  display: grid;
  gap: var(--cb-space-xl);
  align-content: start;
}
.cb-sell {
  display: grid;
  gap: var(--cb-space-xs);
}
.cb-sell-name {
  justify-self: start;
  font-size: var(--cb-type-base-size);
  font-weight: var(--cb-font-weight-semibold);
  color: var(--cbc-ink);
  text-decoration: none;
}
a.cb-sell-name:hover {
  color: var(--cbc-accent);
  text-decoration: underline;
}
.cb-sell-why {
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
  color: var(--cbc-ink-muted);
}
.cb-hook {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cb-space-xl);
  align-items: baseline;
}
.cb-hook-order {
  font-size: var(--cb-type-xs-size);
  font-weight: var(--cb-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--cbc-ink-faint);
}
.cb-hook-line {
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-base-line-height);
  text-wrap: pretty;
}

/* 1024px mirrors tokens.breakpoint.lg */
@media (max-width: 1024px) {
  .cb-lede {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- The two assistants ----
   Two columns, separated by the gap between them. They were two cards
   inside a card, which is a border to say what a gap already says. */
.cb-paper .cb-engines {
  /* Two columns from a fairly narrow window on purpose. Side by side is
     the whole point of the part: the two answers are being compared, and
     stacked they are two long reads with a screen between them. */
  grid-template-columns: repeat(auto-fit, minmax(var(--cb-width-xs), 1fr));
  gap: var(--cb-space-6xl);
}
.cb-paper .cb-engine {
  padding: 0;
  border: none;
  background: none;
  gap: var(--cb-space-3xl);
}
.cb-paper .cb-engine-head {
  padding-block-end: var(--cb-space-lg);
  border-block-end: 1px solid var(--cbc-line);
}
/* A dot and a word rather than a pill. Two pills on two headings, in a
   part that already carries four figures, is four coloured capsules
   competing to be the thing you look at first. */
.cb-engine-verdict {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-sm);
  font-size: var(--cb-type-xs-size);
  color: var(--cbc-ink-muted);
  white-space: nowrap;
}
.cb-engine-verdict::before {
  content: "";
  inline-size: var(--cb-space-md);
  block-size: var(--cb-space-md);
  border-radius: var(--cb-radius-full);
  background: var(--cbc-ink-faint);
}
.cb-engine-verdict[data-tone="good"]::before {
  background: var(--cbc-good);
}
.cb-engine-verdict[data-tone="poor"]::before {
  background: var(--cbc-poor);
}

/* ---- What it is built on ----
   The three facts that decide how a redesign is quoted, as facts. */
.cb-paper .cb-facet {
  padding: 0;
  border: none;
  background: none;
}
.cb-paper .cb-facets {
  gap: var(--cb-space-4xl);
}

/* ---- The run ----
   The one surface below the masthead that is sunk rather than lifted. */
.cb-paper .cb-run {
  background: var(--cbc-sunken);
}
.cb-paper .cb-run-body {
  background: none;
}
.cb-paper .cb-run-body > .cb-part + .cb-part {
  margin-block-start: var(--cb-space-4xl);
}
/* Steps on rules rather than in twelve bordered capsules. */
.cb-paper .cb-timeline {
  display: grid;
}
.cb-paper .cb-stage {
  border: none;
  border-radius: var(--cb-radius-lg);
  border-block-end: 1px solid var(--cbc-line);
  animation: cbc-rise var(--cb-motion-slow) var(--cbc-spring) backwards;
  animation-delay: var(--cbc-inside);
}
.cb-paper .cb-timeline > .cb-stage:last-of-type {
  border-block-end: none;
}
/* ---- The step in hand ----
   A solid accent border and the word "Running" is a claim; the console's
   four-bar wave is a sign. It is the same .cb-live-bars the running-now rail
   and the assistant draw, so "something is happening" looks the same wherever
   it is said, and console.css already stills it under reduced motion for all
   three at once.

   Grouped with the badge it qualifies rather than dropped into the row: the
   row's own gap is the distance between a state and a step name, which left
   the wave stranded halfway between the two. */
.cb-stage-work {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-sm);
  flex: none;
}
.cb-paper .cb-stage > summary {
  padding-inline: var(--cb-space-lg);
}
.cb-paper .cb-stage > summary:hover {
  background: var(--cbc-hover);
}
.cb-paper .cb-stage-body {
  padding-inline: var(--cb-space-lg);
}
/* How long it took, and what share of the run that was. The durations
   were a column of numbers, which answers "how long did this step take"
   and never "where did the two minutes go". */
.cb-stage-took {
  margin-inline-start: auto;
  flex: none;
  display: grid;
  gap: var(--cb-space-xs);
  inline-size: var(--cb-space-9xl);
  justify-items: end;
}
.cb-stage-took .cb-stage-time {
  margin-inline-start: 0;
}

/* ---- The ledger ---- */
.cb-paper .cb-spend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cb-space-xl);
}
.cb-paper .cb-spend-what {
  gap: var(--cb-space-sm);
}

/* ---- Folds that carry the paperwork ---- */
.cb-fold-wide > summary {
  padding-inline: 0;
}
.cb-fold-wide > summary .cb-icon {
  margin-inline-start: var(--cb-space-md);
  color: var(--cbc-ink-faint);
  transition: rotate var(--cb-motion-base) var(--cbc-spring);
}
.cb-fold-wide[open] > summary .cb-icon {
  rotate: 180deg;
}
.cb-fold-wide > :not(summary) {
  margin-block-start: var(--cb-space-2xl);
}

/* ---- Nothing to show ---- */
.cb-quiet {
  display: grid;
  gap: var(--cb-space-xs);
}

/* ---- Who they are ----
   The card came off. The map and the homepage capture are pictures and
   keep their frames; everything else here is a name or an address. */
.cb-paper .cb-who {
  display: grid;
  gap: var(--cb-space-4xl);
}

/* ---- Corrections that have to come after the shared sheets ----
   .cb-item is a single class and so are the components it wraps, so the
   two are tied on specificity and load order decides. These say what the
   component wanted rather than relying on which file was linked last. */
.cb-paper .cb-fired {
  align-items: start;
}
/* The rank sits on the first line of the name rather than in the middle
   of a row whose height comes from however many clauses fired. */
.cb-paper .cb-fired-rank {
  margin-block-start: var(--cb-space-xxs);
}
/* .cb-fired-weight lives in console-dossier.css with the rest of its family;
   these two declarations moved there. */

/* The bar takes the column it was given. A grid that end-aligns its
   items shrinks a block to its content, which for an empty track is
   nothing at all. */
.cb-stage-took {
  justify-items: stretch;
  text-align: end;
}
.cb-stage-took .cb-meter {
  inline-size: 100%;
}

/* ---- The signals under the lead ----
   What they already run, and what was looked for and not found. Two
   small bordered panels at the bottom of a chapter that has otherwise
   stopped using them read as leftovers, so they are two columns under a
   rule instead. */
.cb-paper .cb-who-blocks {
  gap: var(--cb-space-5xl);
  padding-block-start: var(--cb-space-3xl);
  border-block-start: 1px solid var(--cbc-line);
}
.cb-paper .cb-who-block {
  padding: 0;
  border: none;
  background: none;
  gap: var(--cb-space-lg);
}

/* ---- The two lists that were still arriving all at once ----
   The plan's steps and the gallery's pages both already carry --i;
   nothing was reading it. Everything else on this page comes in in
   sequence, and two blocks that snap in as a block read as the page
   finishing loading rather than as the page being read out. */
.cb-paper .cb-step,
.cb-paper .cb-page-row {
  animation: cbc-rise var(--cb-motion-slow) var(--cbc-spring) backwards;
  animation-delay: var(--cbc-inside);
}