/* ─────────────────────────────────────────────────────────────────
   /showcase/build-scroll: "One market, one scroll".

   A candidate treatment of /what-we-build. Stylesheet for this page only.

   The recorded world, extended rather than replaced: Paper ground, one
   hairline edge, no shadows, Outfit sets and Plex reads, and teal only
   where a trait was confirmed (plus the capability mark and ordinals,
   DESIGN.md clauses 2 and 3). The new thing is one sticky figure, the
   canvas, which the whole story scrolls past.

   LAYOUT. From 1000px up the story is the site's 12 column grid: the
   steps take columns 1 to 5, and the figure sits in an absolutely placed
   column over 6 to 12 whose inner frame is sticky, so it holds still for
   the whole story and leaves with the last step. Each step spans all
   twelve columns on a subgrid, so a step's card (the record, the buying
   group, the brief) can sit over the figure in exactly its columns and
   stick while its step is read. Below 1000px the figure sticks to the
   top of the screen and the steps scroll beneath it, cards inline.

   Without JavaScript nothing here is hidden: .ws-live is only added by
   wwb-scroll.js, and every rule that fades or moves a card is scoped to it.
   ───────────────────────────────────────────────────────────────── */

.ws {
  /* Step spacing is set in --vh, which wwb-scroll.js fixes at load (and
     on a width change) so that a height change, a toolbar or a capture
     does not reflow the whole story. Without JavaScript it is 1vh. */
  --vh: 1vh;
  --ws-gap: 32px;
  /* The frame fits under the bar and the breadcrumb in the first viewport
     (60 + 96 + 20px above it, 16px clear of the fold), and is centred in the
     space below the bar once it sticks. On a page without a breadcrumb,
     192px can drop to 96px. */
  --ws-frame-h: min(calc(100vh - 192px), 820px);
  --ws-top: calc(60px + (100vh - 60px - var(--ws-frame-h)) / 2);
  --ws-head: 40px;
  --ws-foot: 38px;
  --ws-mh: clamp(280px, 46vh, 420px);                /* figure height on a phone */
  padding: 20px 0 0;
}

::selection { background: var(--pill-new-bg); color: var(--ink); }

/* ── the grid ─────────────────────────────────────────────────── */

.ws-grid { position: relative; }

@media (min-width: 1000px) {
  .ws-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ws-gap);
  }
  .ws-hero { grid-column: 1 / span 5; }
  .ws-step {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    /* The step's box spans the figure's columns too; only its own
       content may take the pointer, or the canvas under it goes dead. */
    pointer-events: none;
  }
  .ws-step > .ws-text { grid-column: 1 / span 5; pointer-events: auto; }
  .ws-step > .ws-card { pointer-events: auto; }

  .ws-stage {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* Exactly columns 6 to 12 of the grid above. */
    width: calc((100% - 11 * var(--ws-gap)) * 7 / 12 + 6 * var(--ws-gap));
    z-index: 1;
  }
  .ws-frame {
    position: sticky;
    top: var(--ws-top);
    height: var(--ws-frame-h);
  }
  .ws-step { position: relative; z-index: 2; }
}

/* ── first viewport ───────────────────────────────────────────── */

.ws-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--ws-frame-h) + 8px);
  padding: 20px 0 48px;
}
/* The headline role (DESIGN.md), not Display section: the hero owns five
   columns rather than the full width, and 57px there runs to six lines. */
.ws-hero h1 {
  font-size: clamp(28px, 3.9vw, 52px);
  max-width: 11em;
}
.ws-hero h1 .line { display: block; }
.ws-hero h1 .line + .line { margin-top: 0.12em; }
.ws-lede {
  margin-top: 26px;
  max-width: 30em;
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--body);
}
.ws-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 32px;
}
.ws-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}
.ws-cue svg { transition: transform 180ms ease; }
.ws-cue:hover { color: var(--teal-deep); }
.ws-cue:hover svg { transform: translateY(2px); }

/* ── the figure ───────────────────────────────────────────────── */

.ws-frame {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.ws-frame-head,
.ws-frame-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--surface-2);
}
.ws-frame-head { height: var(--ws-head); border-bottom: 1px solid var(--rule); justify-content: space-between; }
.ws-frame-foot { height: var(--ws-foot); border-top: 1px solid var(--rule); flex-wrap: nowrap; overflow: hidden; }
.ws-frame-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.ws-frame-count {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.ws-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.ws-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ws-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ws-fail {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}

.ws-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--body);
}
.ws-key i { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.sw-ink { background: var(--ink); }
.sw-faint { background: var(--ink); opacity: 0.18; }
.sw-teal { background: var(--teal); }
.sw-teal-1 { background: var(--teal); opacity: 0.42; }
.sw-tick { width: 2px !important; height: 13px !important; border-radius: 0 !important; background: var(--ink); }
.sw-ring { border: 2px solid var(--ink); background: transparent; }
.sw-ring-blue { border: 2px solid var(--blue); background: transparent; }

.ws-tip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  line-height: 1.4;
  transform: translate(-50%, calc(-100% - 14px));
  opacity: 0;
  transition: opacity 120ms ease;
}
.ws-tip.on { opacity: 1; }
.ws-tip b { display: block; font-weight: 600; }
.ws-tip span { font-family: var(--mono); font-size: 11.5px; color: var(--dark-body); }

.ws-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── the steps ────────────────────────────────────────────────── */

.ws-text { padding: calc(var(--vh) * 8) 0 calc(var(--vh) * 9); min-height: calc(var(--vh) * 50); }
.ws-step-last .ws-text { min-height: calc(var(--vh) * 64); }

/* The capability mark (DESIGN.md, Confirmed Teal clause 2): the same 9px
   square the homepage and the live hub carry, so a reader who clicked a
   capability arrives at the same mark. The two steps that are not
   capabilities, the standard and the record, go without it. */
.ws-mark {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--teal);
  margin-bottom: 16px;
}
.ws-text h2 {
  font-size: clamp(28px, 2.6vw, 38px);
  max-width: 14em;
}
.ws-say {
  margin-top: 16px;
  max-width: 30em;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--ink);
}
.ws-say b,
.ws-finding b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-note {
  margin-top: 14px;
  max-width: 32em;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}
.ws-finding {
  margin-top: 18px;
  max-width: 30em;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}
.ws-caption {
  margin-top: 16px;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.ws-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 22px;
}
.ws-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.ws-link:hover { color: var(--teal-deep); text-decoration-color: currentColor; }
.ws-open { font-size: 15px; }

/* The standard: the five traits as the legend of one teal wave. While the
   step is read, each square takes teal as its trait's banks do, in the
   same order and on the same delay as the canvas. */
.ws-traits { list-style: none; margin: 18px 0 0; padding: 0; max-width: 30em; }
.ws-traits li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0 7px 22px;
  position: relative;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  color: var(--ink);
}
.ws-traits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--teal);
}
.ws-trait-name { flex: 1 1 auto; }
.ws-trait-fig { flex: none; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-live .ws-traits li::before { background: var(--track); }
.ws-live .ws-text.is-active .ws-traits li::before {
  background: var(--teal);
  animation: ws-teal 360ms ease backwards;
  animation-delay: calc(var(--i) * 420ms + 260ms);
}
@keyframes ws-teal { from { background: var(--track); } }

/* Ask the data. Toggle buttons, one pressed at a time. */
.ws-asks { display: grid; gap: 10px; margin-top: 22px; max-width: 30em; }
.ws-ask {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 13px 16px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--body);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.ws-ask:hover { border-color: var(--muted); background: var(--surface); }
.ws-ask[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.ws-ask-q { font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.ws-ask-a { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-ask-a b { color: var(--ink); font-weight: 600; }

/* The slot the CRM screen capture will fill. Dashed like the site's other
   not-yet-built destinations (.hub-card-soon), and it says what it is. */
.ws-crm-slot {
  margin-top: 24px;
  max-width: 30em;
  padding: 16px 18px 18px;
  border: 1px dashed var(--slate);
  border-radius: 8px;
}
.ws-crm-slot p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.ws-micro {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── the cards ────────────────────────────────────────────────── */

.ws-card {
  margin: 0 0 calc(var(--vh) * 12);
  padding: 18px 22px 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  color: var(--body);
}
.ws-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.ws-card-id { min-width: 0; }
.ws-card h3 { font-size: 20px; color: var(--ink); }
.ws-card-meta { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ws-scores { display: flex; gap: 18px; margin: 0; flex: none; }
.ws-scores div { text-align: right; }
.ws-scores dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-scores dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ws-card-sec { padding: 12px 0 10px; }
.ws-card-sec + .ws-card-sec { border-top: 1px solid var(--rule); }
.ws-card-sec > .ws-micro { margin-bottom: 4px; }

/* The evidence row, stacked form (DESIGN.md): rows divided by hairlines
   inside one card, the verdict color in the pill alone. */
.ws-row { padding: 8px 0; }
.ws-row + .ws-row { border-top: 1px solid var(--rule); }
.ws-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ws-claim { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.ws-src { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ws-line { font-size: 15px; line-height: 1.5; color: var(--ink); }
.ws-pill {
  flex: none;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.ws-pill.is-yes { background: var(--pill-yes-bg); color: var(--teal-deep); }
.ws-pill.is-new { background: var(--pill-new-bg); color: var(--blue-deep); }
.ws-pill.is-none { background: var(--pill-none-bg); color: var(--muted); }

/* What moved between the two reads. */
.ws-diff { margin-top: 8px; display: grid; gap: 8px; }
.ws-diff p { font-size: 13.5px; line-height: 1.5; }
.ws-diff-then { color: var(--muted); }
.ws-diff-then s { text-decoration-thickness: 1px; }
.ws-diff-now { color: var(--ink); }
.ws-when {
  display: block;
  margin-bottom: 2px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.ws-diff-now .ws-when { color: var(--blue-deep); }

/* The people to raise it with. The numeral is an ordinal (Teal Deep,
   clause 3); nothing else here is teal. */
.ws-ppl { list-style: none; margin: 6px 0 4px; padding: 0; }
.ws-ppl li {
  display: grid;
  gap: 2px;
  padding: 7px 0;
}
.ws-ppl li + li { border-top: 1px solid var(--rule); }
.ws-ppl-who { min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.ws-ppl-who b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.ws-ppl-owns { font-size: 13.5px; line-height: 1.4; color: var(--body); }
.ws-row-none .ws-claim { color: var(--body); font-weight: 400; font-size: 14.5px; }

/* The brief. */
.ws-raise { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ws-raise li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13.5px; color: var(--muted); }
.ws-raise b { font-size: 15px; font-weight: 600; color: var(--ink); }
.ws-dont ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
/* Slate for what not to open with: ruled out, styled as carefully as
   the confirmed case (the Negative Is Styled rule). */
.ws-dont li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.ws-dont li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--slate);
}

/* ── cards over the figure, desktop, live ───────────────────────── */

@media (min-width: 1000px) {
  .ws-card {
    grid-column: 6 / -1;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--ws-top) + var(--ws-head) + 14px);
    margin: 0 0 0 14px;
    width: 62%;
  }
  /* Live, the card sits over the figure, so it is held inside it. */
  .ws-live .ws-card {
    max-height: calc(var(--ws-frame-h) - var(--ws-head) - var(--ws-foot) - 28px);
    overflow: hidden;
  }
  /* Pulled up so it is already at its sticky line when its step
     starts, rather than riding up across the figure. */
  .ws-live .ws-card {
    margin-top: calc(var(--vh) * -40);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.965);
    transform-origin: 100% 12%;
    transition: opacity 260ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 260ms;
  }
  .ws-live .ws-card.is-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 320ms ease 120ms, transform 520ms cubic-bezier(0.16, 1, 0.3, 1) 80ms, visibility 0s;
  }

  /* The record, first read: the change is not shown yet. Re-read: the
     rest of the record steps back and the moved fact opens. */
  .ws-live .ws-rec .ws-diff { display: none; }
  .ws-live .ws-rec.is-monitor .ws-diff { display: grid; }
  .ws-live .ws-rec.is-monitor .ws-row:not(.ws-row-moved) { opacity: 0.4; }
  .ws-live .ws-rec.is-monitor .ws-row:not(.ws-row-moved) .ws-src { display: none; }

  /* A sticky card cannot outrun its step: at 50vh the people card, now
     carrying each person's reason, hit the step's bottom and was pushed up
     over the frame head. The step runs long enough to hold it at its line. */
  #capability-5 .ws-text { min-height: calc(var(--vh) * 64); }
}

/* Short laptop screens: give the cards back the height they need. */
@media (min-width: 1000px) and (max-height: 800px) {
  .ws-card { padding-top: 14px; }
  .ws-card-head { padding-bottom: 10px; }
  .ws-card-sec { padding: 8px 0 6px; }
  .ws-rec .ws-card-meta { display: none; }
  .ws-ppl li { padding: 4px 0; }
  .ws-brief .ws-row:nth-child(n + 3) { display: none; }
}

/* ── phones and narrow tablets ─────────────────────────────────── */

@media (max-width: 999px) {
  .ws { --ws-gx: var(--gutter); padding-top: 8px; }
  .ws-hero { min-height: 0; padding: 14px 0 18px; }
  .ws-hero h1 { font-size: clamp(33px, 7.4vw, 52px); }
  .ws-lede { font-size: 16.5px; line-height: 1.58; margin-top: 14px; }
  .ws-actions { margin-top: 22px; gap: 10px 18px; }

  .ws-stage {
    position: sticky;
    top: 60px;
    z-index: 5;
    height: var(--ws-mh);
    margin: 0 calc(-1 * var(--ws-gx));
    padding: 6px var(--ws-gx) 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
  }
  .ws-frame { height: 100%; border-radius: 12px; }
  .ws-frame-head { --ws-head: 34px; padding: 0 12px; }
  .ws-frame-foot { --ws-foot: 30px; padding: 0 12px; gap: 12px; }
  .ws-key { font-size: 12px; }

  .ws-step, .ws-beat, .ws-text { scroll-margin-top: calc(var(--ws-mh) + 12px); }
  .ws-text { min-height: calc(var(--vh) * 44); padding: 24px 0 calc(var(--vh) * 7); }
  .ws-step-last .ws-text { min-height: 0; }
  .ws-text h2 { font-size: 28px; }
  .ws-say { font-size: 17px; }
  .ws-card { padding: 16px 16px 6px; }
  .ws-step-card .ws-text { min-height: 0; padding-bottom: 26px; }
  .ws-step-card .ws-text-2 { padding-top: calc(var(--vh) * 6); }
  .ws:not(.ws-live) .ws-stage { position: relative; top: auto; }
  .ws-step-last .ws-card { margin-bottom: 64px; }
}
@media (max-width: 700px) {
  .ws { --ws-gx: 20px; }
  /* The button and the cue share one line on a phone. */
  .ws-actions .btn-lg { font-size: 16px; padding: 13px 20px; }
  .ws-card-head { flex-direction: column; gap: 10px; }
  .ws-scores div { text-align: left; }
}

/* ── the close ────────────────────────────────────────────────── */

.ws-close h2 { max-width: 16em; }
.ws-close .lede { max-width: 34em; }

/* ── the full analysis slide-in ────────────────────────────────────
   The shared panel (partials/showcase-panel.ejs, showcase-panel.js),
   restyled here because this page does not load showcase.css. Same
   geometry, and no shadow: the panel separates by its hairline and the
   scrim, as everything else in this system does. */
.sc-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80vw;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}
.sc-panel.on { transform: translateX(0); visibility: visible; transition: transform 220ms ease, visibility 0s; }
.sc-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(17, 22, 27, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.sc-scrim.on { opacity: 1; pointer-events: auto; }
html.sc-panel-open, html.sc-panel-open body { overflow: hidden; }
.sc-panel-head { position: relative; padding: 26px 34px 20px; border-bottom: 1px solid var(--rule); }
.sc-panel-head h2 { margin: 0 0 4px; font-size: 22px; }
.sc-panel-head .dom { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sc-panel-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}
.sc-panel-close:hover { color: var(--ink); border-color: var(--ink); }
.sc-scores { display: flex; gap: 26px; margin-top: 14px; }
.sc-score .k { font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.sc-score .v { font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.sc-panel-body { overflow-y: auto; padding: 10px 34px 40px; }
.sc-panel-why { margin: 18px 0 8px; font-size: 16.5px; line-height: 1.6; color: var(--ink); max-width: 80ch; }
.sc-findings-grid { display: grid; gap: 0 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-finding { padding: 15px 0; border-bottom: 1px solid var(--rule); }
.sc-finding-top { display: flex; align-items: baseline; gap: 10px; }
.sc-finding-top h3 { margin: 0; font-size: 14.5px; flex: 1 1 auto; }
.sc-pill {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 5px;
  background: var(--pill-yes-bg);
  color: var(--teal-deep);
  white-space: nowrap;
}
.sc-finding-meaning { margin: 7px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.sc-finding blockquote {
  margin: 9px 0 0;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.55;
}
.sc-finding .src { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.sc-finding .src a { color: var(--teal-deep); }
.sc-empty { padding: 28px 0; color: var(--muted); font-size: 14px; }
.sc-panel.is-er2 .sc-panel-head { display: none; }
.sc-panel.is-er2 .sc-panel-body { padding: 0; flex: 1 1 auto; min-height: 0; }
.sc-er2-host { display: block; min-height: 100%; }
.sc-er2-loading { margin: 0; padding: 48px 34px; color: var(--muted); font-family: var(--mono); font-size: 13px; }
@media (max-width: 1100px) { .sc-findings-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .sc-panel { width: 100vw; } }

/* ── reduced motion ───────────────────────────────────────────────
   base.css already stops every transition; the canvas stops tweening in
   wwb-scroll.js. Cards swap without scaling. */
@media (prefers-reduced-motion: reduce) {
  .ws-live .ws-card, .ws-live .ws-card.is-on { transform: none; }
}