/* ====================================================================
   Blackbird audit set — feedback intake (DEMO / CLIENT-SIDE ONLY)
   Shared styling for the inline reaction chips and the roll-up panel.
   Loaded by all three artefacts (website-audit, business-audit, proposal).
   Uses each artefact's own :root tokens, with literal fallbacks so it
   still renders if a token is missing.

   SCOPE NOTE: this is the client-side demo only. No server, no Supabase,
   no prod keys (Posture-1). The real-client path (a `feedback` table plus
   a Resend notify via a serverless endpoint) is deliberately out of scope
   here and tracked separately by the steward. See feedback.js.
   ==================================================================== */

/* ---- Slim banner text (folded intro + how-to line) ---------------
   The old hero band is dissolved into a slim titled banner: each file's
   .band still carries the artefact title and the "prepared for / by"
   line; these two classes fold in the condensed intro (.band-what) and
   the single light "how to use" line (.band-how). They render on the
   dark band, so they use on-dark tokens. */
.band-what {
  margin: var(--space-3, 12px) 0 0;
  font-size: var(--type-small-size, 13.5px);
  line-height: 1.6;
  color: var(--color-neutral, #9AA8C2);
}
.band-what strong { color: var(--color-on-dark, #F4F5F7); font-weight: var(--fw-bold, 700); }
.band-what a { color: var(--color-amber, #D9954A); font-weight: var(--fw-semibold, 600); text-decoration: none; }
.band-what a:hover { text-decoration: underline; }
.band-how {
  margin: var(--space-3, 12px) 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-neutral, #9AA8C2);
}
.band-how::before {
  content: "Optional";
  display: inline-block;
  margin-right: var(--space-2, 8px);
  vertical-align: baseline;
  font-size: 10px;
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-ink, #1B2130);
  background: var(--color-amber, #D9954A);
  border-radius: var(--radius-pill, 50px);
  padding: 2px 9px;
}
.band-how strong { color: var(--color-on-dark, #F4F5F7); font-weight: var(--fw-semibold, 600); }

/* ---- Journey rail, now inside the sticky header -------------------
   Moved out of the page body into the dark sticky header so orientation
   is always visible. Active / navigable nodes are the four documents
   (current site, website audit, business audit, proposal). The dimmed
   nodes after the "then" gap are the delivery stages that have not
   started (Design, Build, Review, Live) — copy is folded into Build, so
   there is no Copy node. The demo is no longer a node: it is reachable
   as an example of the Build stage from the proposal. On-dark treatment
   to sit on the ink header; the rebuild (index.html) mirrors this in its
   own aubergine palette. Desktop shows the full track; a phone shows a
   compact "Step N of M" indicator that taps to expand. */
.jrail {
  max-width: var(--container-max, 1080px);
  margin: 0 auto;
  padding: 7px var(--space-6, 24px);
  border-top: 1px solid rgba(244, 245, 247, .12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px) var(--space-3, 12px);
}
.jrail-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 4px) 6px;
}
.jr-node { display: inline-flex; align-items: center; }
.jr-node > a,
.jr-node > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border-radius: var(--radius-pill, 50px);
  font-size: 12.5px;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-amber, #D9954A);
  text-decoration: none;
  white-space: nowrap;
}
.jr-node > a:hover { background: rgba(217, 149, 74, .18); }
.jr-node > a:focus-visible { outline: 2px solid var(--color-amber, #D9954A); outline-offset: 2px; }
.jr-n {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: var(--fw-heavy, 800);
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--color-amber, #D9954A);
  border: 1px solid var(--color-amber, #D9954A);
}
/* the step this page is (and the "example" annotation on the rebuild) */
.jr-node.is-current > span,
.jr-node.is-example > span {
  color: var(--color-on-dark, #F4F5F7);
  font-weight: var(--fw-bold, 700);
  background: rgba(244, 245, 247, .10);
}
.jr-node.is-current .jr-n,
.jr-node.is-example .jr-n {
  background: var(--color-amber, #D9954A);
  color: var(--color-ink, #1B2130);
  border-color: var(--color-amber, #D9954A);
}
.jr-ex {
  font-size: 9.5px;
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-ink, #1B2130);
  background: var(--color-amber, #D9954A);
  border-radius: var(--radius-pill, 50px);
  padding: 1px 7px;
  margin-left: 2px;
}
/* the "then" divider before the not-started stages */
.jr-gap {
  display: inline-flex;
  align-items: center;
  padding-left: var(--space-1, 4px);
  font-size: 10px;
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-neutral, #9AA8C2);
  opacity: .8;
}
/* future stages: shown, but visibly not started yet */
.jr-node.is-future > span { color: var(--color-neutral, #9AA8C2); opacity: .6; cursor: default; }
.jr-node.is-future .jr-n {
  background: transparent;
  color: var(--color-neutral, #9AA8C2);
  border: 1px dashed var(--color-neutral, #9AA8C2);
  opacity: .85;
}
/* the Review node's "peek at the built example" affordance: a live link,
   but visibly an EXAMPLE, not the solid "you are here" highlight and not a
   reached stage. Amber link + dashed-amber number (not-yet-reached) + a
   small "see the version we've built" pill, so Design/Build before it stay
   plainly dimmed while this one invites a look ahead. */
.jr-node.is-demo > a { color: var(--color-amber, #D9954A); }
.jr-node.is-demo > a:hover { background: rgba(217, 149, 74, .18); }
.jr-node.is-demo > a:focus-visible { outline: 2px solid var(--color-amber, #D9954A); outline-offset: 2px; }
.jr-node.is-demo .jr-n {
  background: transparent;
  color: var(--color-amber, #D9954A);
  border: 1px dashed var(--color-amber, #D9954A);
}
.jr-demo-tag {
  font-size: 10.5px;
  font-weight: var(--fw-bold, 700);
  color: var(--color-amber-ink, #B9762E);
  background: var(--color-warning-tint, #FCF1E2);
  border: 1px solid var(--color-amber, #D9954A);
  border-radius: var(--radius-pill, 50px);
  padding: 1px 8px;
  margin-left: 4px;
  white-space: nowrap;
}
/* compact mobile indicator (a phone header can't fit the full track) */
.jrail-compact {
  display: none;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-bold, 700);
  color: var(--color-on-dark, #F4F5F7);
  padding: 2px 0;
  text-align: left;
}
.jrc-step { color: var(--color-amber, #D9954A); }
.jrc-sep { color: var(--color-neutral, #9AA8C2); }
.jrc-now { color: var(--color-on-dark, #F4F5F7); }
.jrc-caret { color: var(--color-neutral, #9AA8C2); font-size: 10px; transition: transform .15s ease; }
.jrail.open .jrc-caret { transform: rotate(180deg); }
.jrail-compact:focus-visible { outline: 2px solid var(--color-amber, #D9954A); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 600px) {
  .jrail { gap: 6px; padding: 7px var(--space-5, 20px); }
  .jrail-compact { display: inline-flex; }
  .jrail-track { display: none; flex-basis: 100%; margin-top: 6px; }
  .jrail.open .jrail-track { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .jrc-caret { transition: none; } }

/* ---- Inline reaction block, sits inside each actionable line item --
   Deliberately quiet: it reads as an optional margin note, not a form to
   fill in. Everything works with zero marks. */
/* The wrap carries no box of its own: collapsed it contributes nothing to
   the finding's height, so the resting state stays a single line. Its host
   is the positioning context for the far-end reveal chevron. */
.fb { position: static; margin: 0; padding: 0; border: 0; }
.fb-host { position: relative; }
/* strengths get a lighter treatment still */
.fb--note { opacity: .95; }

/* Resting affordance: one small, muted-but-clearly-tappable reveal that
   reads as "click to open". Reusable class so other rows can adopt the cue. */
.fb-reveal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-muted, #6E7480);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 50px);
  padding: 3px 12px 3px 6px;
  margin-left: calc(0px - var(--space-1, 4px));
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.fb-reveal:hover {
  color: var(--color-amber-ink, #B9762E);
  background: rgba(217, 149, 74, .10);
  border-color: var(--color-sand-border, #E6DFCC);
}
.fb-reveal:focus-visible { outline: 2px solid var(--color-amber-ink, #B9762E); outline-offset: 2px; }
.fb-reveal-chev {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.fb.open .fb-reveal-chev { transform: translateY(1px) rotate(-135deg); }
/* Collapsed summary of an existing mark, shown on the resting reveal. */
.fb-reveal-mark { display: none; }
.fb-reveal-mark.on {
  display: inline-block;
  font-size: 10.5px;
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 50px);
}
.fb-reveal-mark.on.do    { background: var(--color-success, #2E7D46); }
.fb-reveal-mark.on.discuss { background: var(--color-info, #3B5570); }
.fb-reveal-mark.on.not   { background: var(--color-text-muted, #6E7480); }
.fb-reveal-mark.on.doing { background: var(--color-amber-ink, #B9762E); }
.fb.is-marked .fb-reveal { color: var(--color-text-body, #3E4553); }

/* ---- Feedback reveal as a compact far-end chevron -----------------
   Scoped to the button INSIDE .fb, so the drow summary's decorative
   .di-reveal.fb-reveal (which reuses the base look, above) is untouched.
   The control is pinned as a small, quiet chevron at the finding's
   top-right corner instead of a labelled line of its own; it strengthens
   on hover/focus (and whenever the finding is marked). It sits inside the
   host's existing right-hand padding gutter, so it never overlaps the
   finding's own content. Tapping it drops the chips + why-line + note
   below the finding (unchanged reveal content and cross-view sync). */
.fb > .fb-reveal {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  gap: 0;
  padding: 4px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 50px);
  background: none;
  color: var(--color-text-muted, #6E7480);
  opacity: .5;
  transition: opacity .12s ease, color .12s ease, background-color .12s ease, border-color .12s ease;
}
/* the accessible name ("Mark your take" / "Your take") stays for screen
   readers but leaves the visual surface: only the chevron shows */
.fb > .fb-reveal .fb-reveal-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* no separate mark badge on the resting chevron: a marked finding is shown
   by tinting the chevron itself (constant footprint, no overlap) */
.fb > .fb-reveal .fb-reveal-mark { display: none; }
/* emphasise on hover of the finding, or hover/focus of the control itself */
.fb-host:hover > .fb > .fb-reveal,
.fb > .fb-reveal:hover,
.fb > .fb-reveal:focus-visible {
  opacity: 1;
  color: var(--color-amber-ink, #B9762E);
  background: rgba(217, 149, 74, .10);
  border-color: var(--color-sand-border, #E6DFCC);
}
.fb > .fb-reveal:focus-visible { outline: 2px solid var(--color-amber-ink, #B9762E); outline-offset: 2px; }
/* a marked finding keeps its chevron visible and coloured to its mark */
.fb.is-marked > .fb-reveal { opacity: 1; background: rgba(217, 149, 74, .10); border-color: var(--color-sand-border, #E6DFCC); }
.fb > .fb-reveal:has(.fb-reveal-mark.on.do)      { color: var(--color-success, #2E7D46); }
.fb > .fb-reveal:has(.fb-reveal-mark.on.discuss) { color: var(--color-info, #3B5570); }
.fb > .fb-reveal:has(.fb-reveal-mark.on.not)     { color: var(--color-text-muted, #6E7480); }
.fb > .fb-reveal:has(.fb-reveal-mark.on.doing)   { color: var(--color-amber-ink, #B9762E); }

/* Revealed body: why-line, chips, note. Hidden until the reveal is tapped. */
.fb-body { display: none; }
.fb.open .fb-body {
  display: block;
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--color-border, #DEE1E7);
}
.fb-why {
  margin: 0 0 var(--space-3, 12px);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-muted, #6E7480);
}
.fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}
.fb-chip {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: var(--fw-semibold, 600);
  line-height: 1;
  color: var(--color-text-body, #3E4553);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #DEE1E7);
  border-radius: var(--radius-pill, 50px);
  padding: 7px 13px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.fb-chip:hover { border-color: var(--color-amber, #D9954A); }
.fb-chip:focus-visible { outline: 2px solid var(--color-amber-ink, #B9762E); outline-offset: 2px; }

/* Selected states, mapped to the action vocabulary. */
.fb-chip[aria-pressed="true"] { color: #fff; }
.fb-chip[data-v="do"][aria-pressed="true"]      { background: var(--color-success, #2E7D46); border-color: var(--color-success, #2E7D46); }
.fb-chip[data-v="discuss"][aria-pressed="true"]  { background: var(--color-info, #3B5570);    border-color: var(--color-info, #3B5570); }
.fb-chip[data-v="not"][aria-pressed="true"]      { background: var(--color-text-muted, #6E7480); border-color: var(--color-text-muted, #6E7480); }
.fb-chip[data-v="doing"][aria-pressed="true"]    { background: var(--color-amber-ink, #B9762E); border-color: var(--color-amber-ink, #B9762E); }

.fb-note-toggle {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-amber-ink, #B9762E);
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fb-note-toggle:focus-visible { outline: 2px solid var(--color-amber-ink, #B9762E); outline-offset: 2px; border-radius: 3px; }
.fb-note {
  flex: 1 1 100%;
  display: none;
  margin-top: var(--space-1, 4px);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--type-small-size, 13.5px);
  line-height: 1.5;
  color: var(--color-text-body, #3E4553);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #DEE1E7);
  border-radius: var(--radius-sm, 4px);
  padding: 8px 10px;
  resize: vertical;
  min-height: 2.4rem;
}
.fb-note.show { display: block; }
.fb-note:focus-visible { outline: 2px solid var(--color-amber-ink, #B9762E); outline-offset: 1px; }

/* ---- Floating "Your feedback" launcher (bottom-right) ------------- */
.fb-fab {
  position: fixed;
  right: var(--space-5, 20px);
  bottom: var(--space-5, 20px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--type-small-size, 13.5px);
  font-weight: var(--fw-bold, 700);
  color: var(--color-on-dark, #F4F5F7);
  background: var(--color-ink, #1B2130);
  border: 1px solid rgba(244,245,247,.18);
  border-radius: var(--radius-pill, 50px);
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-elevated, 0 10px 30px rgba(27,33,48,0.18));
  transition: transform .14s ease;
}
.fb-fab:hover { transform: translateY(-2px); }
.fb-fab:focus-visible { outline: 2px solid var(--color-amber, #D9954A); outline-offset: 2px; }
.fb-fab .fb-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: var(--fw-heavy, 800);
  color: var(--color-ink, #1B2130);
  background: var(--color-amber, #D9954A);
  border-radius: var(--radius-pill, 50px);
}
.fb-fab[data-count="0"] .fb-count { display: none; }

/* ---- Roll-up panel ------------------------------------------------ */
.fb-panel {
  position: fixed;
  right: var(--space-5, 20px);
  bottom: calc(var(--space-5, 20px) + 52px);
  z-index: 41;
  width: min(92vw, 25rem);
  max-height: min(72vh, 34rem);
  display: none;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-card, #E4E7EC);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-elevated, 0 10px 30px rgba(27,33,48,0.18));
  overflow: hidden;
}
.fb-panel.open { display: flex; }
.fb-p-head {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  background: var(--color-ink, #1B2130);
  color: var(--color-on-dark, #F4F5F7);
  padding: var(--space-4, 16px) var(--space-5, 20px);
}
.fb-p-head strong { font-size: 15px; font-weight: var(--fw-bold, 700); }
.fb-p-head button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-on-dark, #F4F5F7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.fb-p-head button:focus-visible { outline: 2px solid var(--color-amber, #D9954A); outline-offset: 2px; border-radius: 3px; }
.fb-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-5, 20px);
  background: var(--color-sand, #EFE9DD);
  border-bottom: 1px solid var(--color-sand-border, #E6DFCC);
  font-size: 12.5px;
  color: var(--color-text-body, #3E4553);
}
.fb-tally span { white-space: nowrap; font-weight: var(--fw-semibold, 600); }
.fb-tally .t-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
.t-do    { background: var(--color-success, #2E7D46); }
.t-discuss { background: var(--color-info, #3B5570); }
.t-not   { background: var(--color-text-muted, #6E7480); }
.t-doing { background: var(--color-amber-ink, #B9762E); }

.fb-list {
  margin: 0;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  overflow-y: auto;
  flex: 1 1 auto;
  list-style: none;
}
.fb-empty { color: var(--color-text-muted, #6E7480); font-size: var(--type-small-size, 13.5px); line-height: 1.6; margin: var(--space-2, 8px) 0; }
.fb-li { padding: var(--space-3, 12px) 0; border-bottom: 1px solid var(--color-border, #DEE1E7); }
.fb-li:last-child { border-bottom: none; }
.fb-li-top { display: flex; align-items: baseline; gap: var(--space-2, 8px); }
.fb-li-v {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 50px);
}
.fb-li-v.do    { background: var(--color-success, #2E7D46); }
.fb-li-v.discuss { background: var(--color-info, #3B5570); }
.fb-li-v.not   { background: var(--color-text-muted, #6E7480); }
.fb-li-v.doing { background: var(--color-amber-ink, #B9762E); }
.fb-li-label { font-size: var(--type-small-size, 13.5px); line-height: 1.45; color: var(--color-ink, #1B2130); font-weight: var(--fw-semibold, 600); }
.fb-li-note { margin-top: var(--space-1, 4px); font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted, #6E7480); font-style: italic; }

.fb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-top: 1px solid var(--color-border-card, #E4E7EC);
  background: var(--color-paper, #F4F5F7);
}
.fb-btn {
  flex: 1 1 auto;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: var(--fw-bold, 700);
  text-align: center;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  border: 1px solid var(--color-border, #DEE1E7);
  background: var(--color-surface, #fff);
  color: var(--color-ink, #1B2130);
  transition: border-color .12s ease, background-color .12s ease;
}
.fb-btn:hover { border-color: var(--color-amber, #D9954A); }
.fb-btn:focus-visible { outline: 2px solid var(--color-amber-ink, #B9762E); outline-offset: 2px; }
.fb-btn.primary { background: var(--color-amber, #D9954A); border-color: var(--color-amber, #D9954A); color: var(--color-ink, #1B2130); }
.fb-note-msg { flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-text-muted, #6E7480); }
.fb-clear {
  flex: 1 1 100%;
  background: none;
  border: none;
  color: var(--color-text-muted, #6E7480);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 2px;
}
.fb-clear:hover { color: var(--color-danger, #B23B2E); }

/* ---- Per-section roll-up badge (tally of a section's marks) -------- */
.fb-rollup { display: none; }
.fb-rollup.on {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: var(--space-3, 12px);
  vertical-align: middle;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 50px);
  background: var(--color-sand, #EFE9DD);
  border: 1px solid var(--color-sand-border, #E6DFCC);
  font-size: 11.5px;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-body, #3E4553);
  white-space: nowrap;
}
.fb-rollup .fb-rl-lead { text-transform: uppercase; letter-spacing: .05em; font-size: 10px; font-weight: var(--fw-bold, 700); color: var(--color-text-muted, #6E7480); }
.fb-rollup .fb-rl-part { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.fb-rollup .t-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---- Layout guards for chip rows inside host grids ----------------- */
.roadmap li > .fb { grid-column: 1 / -1; }

/* ---- One consolidated closing: derived selected-items summary ------
   Rendered by feedback.js into #bbClosing. Works with zero marks (offers
   "book a call to talk it through"); with marks it summarises the "Do it"
   items as a walkthrough agenda. Booking lives here and in the panel only. */
.bb-closing { margin: var(--space-14, 56px) 0 0; }
.bbc-inner {
  background: var(--color-ink, #1B2130);
  color: var(--color-on-dark, #F4F5F7);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-8, 32px);
  box-shadow: var(--shadow-elevated, 0 10px 30px rgba(27,33,48,0.18));
}
.bbc-eyebrow {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--type-eyebrow-size, 11.5px);
  letter-spacing: var(--type-eyebrow-ls, .1em);
  text-transform: uppercase;
  font-weight: var(--fw-bold, 700);
  color: var(--color-amber, #D9954A);
}
.bbc-h { margin: 0 0 var(--space-3, 12px); color: var(--color-on-dark, #F4F5F7); font-size: var(--type-h2-size, 24px); line-height: 1.2; font-weight: var(--fw-heavy, 800); }
.bbc-sub { margin: 0 0 var(--space-5, 20px); color: var(--color-neutral, #9AA8C2); font-size: var(--type-small-size, 13.5px); line-height: 1.6; }
.bbc-sub strong { color: var(--color-on-dark, #F4F5F7); font-weight: var(--fw-bold, 700); }
.bbc-list { list-style: none; margin: 0 0 var(--space-6, 24px); padding: 0; display: grid; gap: var(--space-2, 8px); }
.bbc-list li { display: flex; align-items: flex-start; gap: var(--space-3, 12px); font-size: var(--type-small-size, 13.5px); line-height: 1.5; color: var(--color-on-dark, #F4F5F7); }
.bbc-tick { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--color-success, #2E7D46); color: #fff; font-size: 11px; font-weight: var(--fw-heavy, 800); }
.bbc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); }
.bbc-primary { border: none; cursor: pointer; font-family: var(--font-sans, system-ui, sans-serif); }
.bbc-deep {
  display: inline-block;
  background: transparent;
  color: var(--color-amber, #D9954A);
  border: 1px solid var(--color-amber, #D9954A);
  font-weight: var(--fw-bold, 700);
  text-decoration: none;
  padding: 10px 21px;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--type-small-size, 13.5px);
  white-space: nowrap;
}
.bbc-deep:hover { background: rgba(217, 149, 74, .14); }
.bbc-deep-note { margin: var(--space-4, 16px) 0 0; color: var(--color-neutral, #9AA8C2); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 600px) {
  .fb-fab { right: var(--space-4, 16px); bottom: var(--space-4, 16px); }
  .fb-panel { right: 3vw; left: 3vw; width: auto; bottom: calc(var(--space-4, 16px) + 52px); }
  .fb { gap: var(--space-2, 8px); }
  .fb-rollup.on { margin-left: 0; margin-top: var(--space-2, 8px); }
  .bbc-inner { padding: var(--space-6, 24px); }
  .bbc-actions { flex-direction: column; align-items: stretch; }
  .bbc-primary, .bbc-deep { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-fab, .fb-chip { transition: none; }
  .fb-fab:hover { transform: none; }
}