/* healthcare-mockup.css — shared styles for BLUE MOCKUP figures (2026-09-13).
 *
 * These are DESIGN MOCKUPS of AI features that are not built — not real product
 * screenshots. See docs/design/BLUE_ASSISTANT_AND_WEB_SECTION_20260913.md §2.3.
 * The honesty mark itself is drawn INSIDE each mockup's own <svg> (see the
 * hc-mock-bar / hc-mock-stamp symbols defined once in healthcare/ai.html), so it
 * survives the image being cropped from this page's CSS entirely. This file only
 * styles the surrounding figure chrome — losing it does not remove the mark.
 *
 * HOW TO ADD THE NEXT MOCKUP (do not copy-paste a whole new figure by hand):
 *   1. Reuse the one shared sprite (<svg id="hc-mock-defs" ...) already on the
 *      page — do not add a second copy of it. It defines the honesty bar, the
 *      corner stamp, and the accept/reject/undecided icons as <symbol>s.
 *   2. Build the new mockup's own <svg viewBox="0 0 1000 H"> at whatever height H
 *      the content needs — width is fixed at 1000 units so the shared symbols
 *      (drawn at that same scale) drop in with no distortion.
 *   3. Every mockup <svg> needs, in this order: the top <use href="#hc-mock-bar">,
 *      a header row with a panel title (".hc-mock-title" positioning, mono,
 *      uppercase) and a disclosure-badge pill — THIS PILL MUST APPEAR ON EVERY
 *      MOCKUP, not once per page — then the candidate rows, each with a
 *      <use href="#hc-mock-accept-icon|reject-icon|undecided-icon">, then the
 *      bottom <use href="#hc-mock-bar"> at y = H-50.
 *   4. Every candidate row must show WHERE it came from (an anchor: the exact
 *      quoted words from a source note, or the real code/field from a real
 *      terminology entry) — never a bare suggestion with no visible origin.
 *   5. Show at least one accepted AND one rejected candidate in every mockup.
 *      An all-accepted mockup teaches the wrong habit (see the design doc §3).
 *   6. Wrap the finished <svg> in <figure class="hc-mock-figure"> with a
 *      <figcaption> that (a) explains what is happening in plain language and
 *      (b) restates, in text, that this is a mockup and not a screenshot.
 */

.hc-mock-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 18px 0 10px;
}

.hc-mock-figure {
  border: 1px solid var(--hc-edge);
  border-radius: 14px;
  overflow: hidden;
  background: var(--hc-card);
  margin: 0;
}

.hc-mock-figure svg,
.hc-mock-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* AI-MOCK-1 (2026-09-14): some "what it looks like in use" mockups are now a real, synthetic
   screenshot of blueHealthcare's own shell (top bar + rail) with a mocked AI candidate panel
   composed inside it, captured via Playwright from a dev-only harness -- not a hand-drawn SVG.
   `width`/`height` attributes stay on the <img> itself (reserves layout space before load); this
   rule only ever overrides them visually to fill the figure responsively, same as the svg rule
   above. */

.hc-mock-figure figcaption {
  padding: 16px 20px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--hc-ink-soft);
  border-top: 1px solid var(--hc-edge);
}

/* Second-order, textual reinforcement of the mark, distinct from the site's
 * existing .hc-shot-tag (amber, used for "Synthetic demo data" on REAL
 * captures). This one is violet, on purpose, and always paired with the
 * baked-in mark inside the image itself — this pill is a caption-level
 * echo, not the primary mark. */
.hc-mock-tag {
  display: inline-block;
  font-family: var(--hc-mono);
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #6B0F86;
  background: #F7E9FB;
  border: 1px solid #E3B7EF;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  font-weight: 700;
}