/* problem scene (step 2): the copy swaps from part 1 to part 2 in one place; the callouts of the four sides are HTML
   placed by problem.js over the drawing (design units scaled to the free part of the stage).
   Type follows the design review of 20.10.2026: both headings take the h2 size of every section heading, body text
   16 px on phones and 17 px on desktops, labels 12 px at least; no ornament bars over the headings. */
.pb { position: absolute; inset: 0; overflow: hidden; }
.pb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.pb-copy { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--header) + 40px); width: min(440px, 30vw); }
.pb-part { position: absolute; left: 0; right: 0; top: 0; }
.pb-h, .pb-h3, .pb.is-m .pb-h, .pb.is-m .pb-h3 { font: 800 var(--fs-h2, clamp(1.5rem, 1.05rem + 2.1vw, 2.75rem))/1.08 var(--sans); letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
:lang(ka) .pb-h, :lang(th) .pb-h { line-height: 1.25; letter-spacing: 0; }
.pb-t { margin-top: var(--sp-head, 16px); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); text-wrap: pretty; }

/* callout of one side (a sheet of the drawing: ink hairline, soft penumbra): role in mono caps, the question typed in
   over an invisible full copy (no jumps) */
.pb-bub { position: absolute; z-index: 4; left: 0; top: 0; width: 190px; padding: .78em .9em .85em; background: var(--sheet); border: 1px solid var(--ink); font-size: 14.5px; transform-origin: 50% 0; visibility: hidden; opacity: 0;
  box-shadow: var(--sh-2, 0 1px 2px rgba(38, 41, 47, .10), 0 6px 14px -6px rgba(60, 50, 30, .18), 0 24px 44px -20px rgba(60, 50, 30, .30)); }
.pb-role { display: block; margin-bottom: .45em; font: 600 max(12px, .8em)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.pb-q { position: relative; display: block; font-weight: 600; line-height: 1.38; color: var(--ink); }
.pb-q-ghost { visibility: hidden; }
.pb-q-live { position: absolute; left: 0; top: 0; right: 0; }
.pb-tail { position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; background: var(--sheet); border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); transform: rotate(45deg); }

/* phone */
.pb.is-m .pb-copy { width: auto; right: 16px; }
.pb.is-m .pb-h, .pb.is-m .pb-h3 { line-height: 1.1; }
.pb.is-m .pb-t { margin-top: 12px; font-size: 1rem; line-height: 1.55; }
.pb.is-m .pb-bub { padding: .6em .75em .7em; transform-origin: 0 0; }
.pb.is-m .pb-tail { left: -7px; top: 22px; margin-left: 0; border-top: 0; border-bottom: 1px solid var(--ink); }

/* drawn once: the section grows to hold both parts of the copy (and on a phone the drawing under them) */
.scene.v2-grow { height: auto !important; min-height: 100vh; min-height: 100svh; }
.scene.v2-grow > .scene-stage { position: relative; }
.scene.v2-grow .pb { position: relative; }