/*
 * Library print components — the guide inset with its speech bubble, the Wow!
 * box, fold-badge placement, figure captions and diagram labels. Linked by the print engine's
 * document shell (engine/src/books/print/html.mjs) right after tokens.css, so every fold's
 * layout.mjs can emit this markup and only restyle what its fold needs in fold.css. The site
 * links it too. Ported from the POC's books/brand/components.css unchanged apart from this header.
 *
 * Why here and not per fold: the guides, the wow box and the badge are the library's furniture:
 * a reader moving from Fold 2 to Fold 3 meets the same guide in the same frame. Everything is
 * sized from the fold scope's tokens (--guide-size, --type-*, --fold) in points and inches, so the
 * same markup is right at 8.5 × 8.5 for a four-year-old and at 6 × 9 for an adult.
 *
 * Markup (block kinds from the manuscript contract, spec §5.3):
 *
 *   guide {who, pose, say} →
 *     <figure class="guide guide--<who>">                   (+ guide--host-1 | guide--host-2; + guide--flip | guide--below; + guide--speaking)
 *       <div class="guide__inset"><img src="…/guide-<who>-point.jpg" alt=""></div>
 *       <figcaption class="guide__bubble"><b class="guide__name">Name</b> Can you count to three?</figcaption>
 *     </figure>
 *   The name's colour (--_accent) is ink here; the series brand's tokens.css (hostAccents, keyed
 *   by host id) or the fold template's guide--host-1|2 role rules colour it.
 *
 *   wow {title, text} →
 *     <aside class="wow"><p class="wow__kicker">Wow!</p><h3 class="wow__title">…</h3><p class="wow__text">…</p></aside>
 *
 *   badge → <div class="fold-badge fold-badge--top-right">${badgeSvg(3)}</div>   (brand.mjs)
 *   ladder → <div class="fold-ladder">${ladderSvg(3)}</div>
 *
 *   figure caption → <figcaption class="caption"><b>Lead.</b> The rest.</figcaption>
 *   narration over art → <div class="picture-caption" data-fit data-safe>…</div>
 *     The fold owns placement, padding, type size and a measured maximum height.
 *
 *   labels over a picture →
 *     <div class="labelled"><img …><span class="label label--pin" style="left:62%;top:30%">mantle</span></div>
 *   labels in an inline SVG diagram →
 *     <text class="label" x="…" y="…">mantle</text> <path class="label-leader" d="…"/> <circle class="label-dot" r="…"/>
 *
 * What bites:
 *  - Never styles the print engine's geometry classes (.page, .recto, .verso, .page-bleed,
 *    .page-trim, .page-safe, .spread-half); components are placed inside them.
 *  - Print may carry no live transparency (KDP wants it flattened; PodSpecs) and no line under
 *    0.75pt or text under 7pt. So: no box-shadow, rgba/opacity, blend modes or gradients with a
 *    transparent stop; shapes that need a triangle use clip-path, colours that need a tint use
 *    color-mix() of two opaque colours. No CSS filter either: Chromium's PDF backend rasterises
 *    a filtered element, text and all.
 *  - .label sizes in pt. Inside an SVG, CSS pt resolve in the SVG's user units and then scale
 *    with its viewBox, so a diagram drawn with viewBox width = its placed width in pt (1 unit =
 *    1pt) gets true-size labels; any other viewBox scales them with the drawing.
 *  - .fold-badge--top-right etc. are absolutely positioned against the nearest positioned
 *    ancestor, and --badge-inset (0.5in, the safe margin) assumes that ancestor's edges are the
 *    TRIM. Inside a bleed box, add the bleed to --badge-inset.
 *  - The guide inset's proportions are the video's (evolve/config.mjs INSET: radius 64 and
 *    border 6 on a 300 box), so book and show frames match. Change them together or not at all.
 */

/* Narration cards share a solid print-safe surface; a tail is reserved for an actual speaker. */
.picture-caption {
  box-sizing: border-box;
  background: var(--paper);
  color: var(--ink);
  border: 2pt solid var(--fold);
  border-radius: 0.18in;
}

/* ---- Guide: a host in the video's rounded picture-in-picture inset, with a bubble. ---- */
.guide {
  --_size: var(--guide-size);
  --_radius: calc(var(--_size) * 0.2133);
  --_border: max(calc(var(--_size) * 0.024), 1.5pt);
  --_accent: var(--ink);
  --_tail: calc(var(--type-bubble) * 0.95);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--_size) * 0.14 + var(--_tail) * 0.5);
  margin: 0;
  break-inside: avoid;
}
.guide--flip { flex-direction: row-reverse; }
.guide--below { flex-direction: column; gap: calc(var(--_tail) * 0.5 + var(--_size) * 0.08); }

/* Paper-white frame inside a hairline, as the video's inset sits in its paper border. */
.guide__inset {
  flex: none;
  box-sizing: border-box;
  width: var(--_size);
  height: var(--_size);
  padding: var(--_border);
  border: var(--hair) solid var(--line);
  border-radius: var(--_radius);
  background: var(--foam);
}
.guide__inset > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: calc(var(--_radius) - var(--_border) - var(--hair));
}
/* The video rings whoever is talking in amber; a spread with both guides can do the same. */
.guide--speaking .guide__inset {
  outline: max(calc(var(--_size) * 0.03), 1.5pt) solid var(--amber);
  outline-offset: max(calc(var(--_size) * 0.02), 1pt);
}

.guide__bubble {
  position: relative;
  box-sizing: border-box;
  max-width: calc(var(--type-bubble) * 16);
  margin: calc(var(--_size) * 0.18) 0 0;
  padding: 0.5em 0.8em 0.6em;
  border: var(--hair) solid var(--line);
  border-radius: 0.75em;
  background: var(--foam);
  color: var(--ink);
  font: 400 var(--type-bubble) / 1.3 var(--font-text);
  word-spacing: var(--type-word-spacing);
}
/* The tail: a hairline-coloured triangle, and over it a foam one nudged inward that also covers
   the bubble's border where the tail joins. */
.guide__bubble::before,
.guide__bubble::after {
  content: "";
  position: absolute;
  top: 0.6em;
  width: var(--_tail);
  height: calc(var(--_tail) * 1.1);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.guide__bubble::before { left: calc(-1 * var(--_tail) - var(--hair)); background: var(--line); }
.guide__bubble::after { left: calc(-1 * var(--_tail) + var(--hair)); background: var(--foam); }
.guide--flip .guide__bubble::before,
.guide--flip .guide__bubble::after { left: auto; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.guide--flip .guide__bubble::before { right: calc(-1 * var(--_tail) - var(--hair)); }
.guide--flip .guide__bubble::after { right: calc(-1 * var(--_tail) + var(--hair)); }
.guide--below .guide__bubble { margin: 0; }
.guide--below .guide__bubble::before,
.guide--below .guide__bubble::after {
  left: calc(var(--_size) * 0.5 - var(--_tail) * 0.55);
  width: calc(var(--_tail) * 1.1);
  height: var(--_tail);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.guide--below .guide__bubble::before { top: calc(-1 * var(--_tail) - var(--hair)); }
.guide--below .guide__bubble::after { top: calc(-1 * var(--_tail) + var(--hair)); }
.guide__name {
  display: block;
  margin: 0 0 0.3em;
  color: var(--_accent);
  font: 800 max(calc(var(--type-bubble) * 0.62), 7pt) / 1.1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Wow! box: a sheet of the fold's tint with its corner folded over to show the fold colour. ---- */
.wow {
  --_dog: calc(var(--type-aside) * 2.1);
  position: relative;
  margin: 0;
  padding: 0.85em 1.1em 1em;
  background: var(--fold-tint);
  color: var(--ink);
  font: 400 var(--type-aside) / 1.4 var(--font-text);
  word-spacing: var(--type-word-spacing);
  clip-path: polygon(0 0, calc(100% - var(--_dog)) 0, 100% var(--_dog), 100% 100%, 0 100%);
  break-inside: avoid;
}
/* The shadow the flap casts, then the flap itself: the lower-left half of the corner square. */
.wow::before,
.wow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--_dog);
  height: var(--_dog);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.wow::before {
  transform: translate(-0.6pt, 1.6pt);
  background: color-mix(in srgb, var(--ink) 18%, var(--fold-tint));
}
.wow::after { background: var(--fold); }
.wow__kicker {
  margin: 0 0 0.2em;
  color: var(--fold-text);
  font: italic var(--display-weight) calc(var(--type-aside) * 1.45) / 1 var(--font-display);
}
.wow__title {
  margin: 0 0 0.35em;
  color: var(--ink);
  font: 700 calc(var(--type-aside) * 1.12) / 1.2 var(--font-text);
}
.wow__text { margin: 0; }
.wow__text + .wow__text { margin-top: 0.5em; }

/* ---- Fold badge and ladder placement. The SVGs come from brand.mjs. ---- */
.fold-badge {
  width: var(--badge-size);
  line-height: 0;
}
.fold-badge > svg,
.fold-ladder > svg {
  display: block;
  width: 100%;
  height: auto;
}
.fold-badge--top-right,
.fold-badge--top-left,
.fold-badge--bottom-right,
.fold-badge--bottom-left { position: absolute; }
.fold-badge--top-right { top: var(--badge-inset, 0.5in); right: var(--badge-inset, 0.5in); }
.fold-badge--top-left { top: var(--badge-inset, 0.5in); left: var(--badge-inset, 0.5in); }
.fold-badge--bottom-right { bottom: var(--badge-inset, 0.5in); right: var(--badge-inset, 0.5in); }
.fold-badge--bottom-left { bottom: var(--badge-inset, 0.5in); left: var(--badge-inset, 0.5in); }
.fold-ladder { width: var(--ladder-width, 100%); line-height: 0; }

/* ---- Captions. Folds 1–4 caption in the reading face: the child reads these too. ---- */
.caption {
  margin: 0.55em 0 0;
  padding-left: 0.75em;
  border-left: 1.5pt solid var(--fold);
  color: var(--ink-soft);
  font: 400 var(--type-caption) / 1.38 var(--font-caption);
}
.caption b,
.caption strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---- Diagram labels: HTML pins over a picture, or <text> inside an inline SVG. ---- */
.labelled { position: relative; }
.labelled > img { display: block; width: 100%; height: auto; }
.label {
  color: var(--ink);
  fill: var(--ink);
  font: 700 var(--type-label) / 1.15 var(--font-label);
  letter-spacing: 0.01em;
}
.label--pin {
  position: absolute;
  padding: 0.22em 0.6em 0.26em;
  border: var(--hair) solid var(--line);
  border-radius: 1em;
  background: var(--foam);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.label--on-dark { color: var(--paper); fill: var(--paper); }
.label-leader {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--hair);
  stroke-linecap: round;
  /* A hairline stays a hairline however the diagram's viewBox scales. */
  vector-effect: non-scaling-stroke;
}
.label-dot { fill: var(--ink); }