/* ===========================================================================
   6.1 · What gets through the membrane wall (15 Oct 2026, proposal 2,
   "Containment you can watch"; simplified 17 Oct 2026). The figure keeps its
   old id, #fig-pore.
   ---------------------------------------------------------------------------
   An .xp card from ../css/explore.css. js/xp-pore.js draws the to-scale scene on
   the canvas, builds the three pore-size buttons (.xpp-pick), the two counts
   (.xpp-tally) and the one-sentence result (.xpp-result), and adds .is-live to
   the figure; until it does (no script), the still drawing that stood here
   before shows instead and the controls stay hidden. Everything is scoped to
   #fig-pore. Culture is the page's amber, protectant its green (bv-purpose.css);
   red is only a cell that got through.

   One local guard stays, logged in NEED-SHARED.md: before the record turns
   light, polish.css moves a section figure's caption into the margin at 1360 px
   and wider, where the card's overflow would clip it.
   =========================================================================== */

body:not(.doc-light) .doc #fig-pore > figcaption { position: static; width: auto; padding: .7rem 1.15rem 1rem; border-left: 0; font-size: .8rem; }
body:not(.doc-light) .doc #fig-pore > figcaption b { display: inline; margin: 0; color: var(--xp-ink); }

#fig-pore { --xpp-cul: #b8650f; --xpp-cul-l: #f8dcb4; --xpp-pro: #23864f; --xpp-bad: #b3261e; }

/* "Try this:" — what to press and what to watch, set apart from the title */
#fig-pore .xp-sub.xp-try {
  margin: .15rem 1.15rem .8rem; padding: .55rem .8rem; max-width: none;
  border-radius: 10px; background: #f4f9f6; border: 1px solid #dcebe2;
  font-size: .92rem; line-height: 1.5; color: var(--xp-ink);
}
#fig-pore .xp-try b { color: var(--xp-leaf-d); font-weight: 700; }

/* the stage: the live canvas, or the still drawing without script */
#fig-pore .xpp-canvas { display: block; width: 100%; touch-action: pan-y; }
#fig-pore .xpp-still { display: block; width: 100%; max-width: 440px; height: auto; margin: .9rem auto .6rem; }
/* the still drawing sits on the white card in either theme (without script the record never turns light), so it
   takes the card's colours: culture amber, harvest green */
#fig-pore .xpp-still text { fill: var(--xp-ink); }
#fig-pore .xpp-still .sz-dim { fill: var(--xp-ink-2); }
#fig-pore .xpp-still .sz-side.lumen { fill: var(--xpp-cul); }
#fig-pore .xpp-still .sz-side.shell, #fig-pore .xpp-still .sz-prot-l { fill: #1b6b3f; }
#fig-pore .xpp-still .sz-cell { fill: var(--xpp-cul-l); stroke: var(--xpp-cul); }
#fig-pore .xpp-still .sz-wall { fill: #d9dfe5; stroke: #a3aeb9; }
#fig-pore .xpp-still .sz-prot { fill: var(--xpp-pro); }
#fig-pore .xpp-still .sz-dimline, #fig-pore .xpp-still .sz-scale { stroke: var(--xp-ink); }
#fig-pore.is-live .xpp-still { display: none; }
#fig-pore:not(.is-live) .xpp-canvas,
#fig-pore:not(.is-live) .xpp-live { display: none !important; }

/* ---- the pore sizes: three big buttons, then pause and start over ---- */
/* a label row that also holds pause and Start over, then the three sizes */
#fig-pore .xpp-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px;
  padding: 0 1.15rem .9rem;
}
#fig-pore .xpp-pick-k { grid-column: 1; grid-row: 1; font: 700 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--xp-ink-2); }
#fig-pore .xpp-opts { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px; }
#fig-pore .xpp-opt {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  min-height: 52px; padding: 8px 16px 9px; margin: 0;
  border-radius: 12px; border: 1.5px solid #cbd7d0; background: #fff; color: var(--xp-leaf-d);
  text-align: left; cursor: pointer;
  box-shadow: 0 1px 0 rgba(20, 64, 43, .06), 0 3px 8px -6px rgba(20, 64, 43, .35);
  transition: background-color .18s, border-color .18s, color .18s, transform .12s;
}
#fig-pore .xpp-opt b { font: 750 1rem/1.1 var(--sans); letter-spacing: -.01em; }
#fig-pore .xpp-opt small { font: 500 .78rem/1.2 var(--sans); color: var(--xp-ink-2); }
#fig-pore .xpp-opt:hover { background: #f4f9f6; border-color: #8fbfa3; }
#fig-pore .xpp-opt:active { transform: translateY(1px); }
#fig-pore .xpp-opt:focus-visible { outline: 2px solid var(--xp-leaf); outline-offset: 2px; }
#fig-pore .xpp-opt[aria-pressed="true"] { background: var(--xp-leaf-d); border-color: var(--xp-leaf-d); color: #fff; }
#fig-pore .xpp-opt[aria-pressed="true"] small { color: #cfe5d8; }
#fig-pore .xpp-tools { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
#fig-pore .xpp-tools .xp-btn { min-height: 40px; }
#fig-pore .xpp-play { width: 40px; padding: 0; justify-content: center; }
#fig-pore .xpp-play[hidden] { display: none; }
#fig-pore .xpp-play svg, #fig-pore .xpp-reset svg { flex: none; }
#fig-pore .xpp-play .i-play, #fig-pore .xpp-play.is-paused .i-pause { display: none; }
#fig-pore .xpp-play.is-paused .i-play { display: block; }

/* the counts: over the stage's top-right corner on wide screens, a row under it on phones */
#fig-pore .xpp-tally {
  position: absolute; top: .55rem; right: .7rem;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem .45rem;
  font: 600 .8rem/1.2 var(--sans); color: var(--xp-ink-2);
  pointer-events: none;
}
#fig-pore .xpp-count {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .32rem .62rem; border-radius: 999px; border: 1px solid var(--xp-line);
  background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(20, 64, 43, .06);
}
#fig-pore .xpp-count b { font: 750 .92rem/1 var(--mono); color: var(--xp-ink); min-width: 2ch; text-align: right; }
#fig-pore .xpp-count i { width: .62rem; height: .62rem; border-radius: 50%; align-self: center; }
#fig-pore .xpp-count.cells i { width: .9rem; height: .5rem; border-radius: 999px; background: var(--xpp-cul-l); border: 1.5px solid var(--xpp-cul); }
#fig-pore .xpp-count.prot i { background: var(--xpp-pro); }
/* a cell on the shell side is the one thing that should never happen: the count says so in red */
#fig-pore .xpp-count.cells.is-crossed { border-color: #f1b5b5; background: #fdf1f1; }
#fig-pore .xpp-count.cells.is-crossed b { color: var(--xpp-bad); }
#fig-pore .xpp-count.cells.is-crossed i { border-color: var(--xpp-bad); background: #fbe4e2; }
#fig-pore .xpp-when { flex-basis: 100%; text-align: right; font: 500 .74rem/1.2 var(--sans); color: var(--xp-ink-2); }
#fig-pore .xpp-when[hidden] { display: none; }

/* ---- what just happened, in one sentence (aria-live) ---- */
#fig-pore .xpp-result {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 0; padding: .85rem 1.15rem .9rem; max-width: none;
  background: #f4f9f6; border-bottom: 1px solid var(--xp-line);
  font-size: .95rem; line-height: 1.5; color: var(--xp-ink);
}
#fig-pore .xpp-result b { font-weight: 700; }
#fig-pore .xpp-result .xpp-ico {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px;
  border-radius: 50%; background: #d6eadf; color: #1b6b3f;
}
#fig-pore .xpp-result.is-bad { background: #fdf4f3; }
#fig-pore .xpp-result.is-bad .xpp-ico { background: #f8d7d4; color: var(--xpp-bad); }
#fig-pore .xpp-result.is-bad b { color: #8c1d16; }

/* the hand-off to the real evidence: the plates photo below the card */
#fig-pore .xpp-proof {
  display: flex; align-items: center; gap: .7rem;
  margin: 0; padding: .75rem 1.15rem; border-top: 0;
  background: var(--xp-leaf-l); color: var(--xp-leaf-d);
  font: 600 .88rem/1.4 var(--sans); text-decoration: none; border-bottom: 0;
  transition: background .18s;
}
#fig-pore .xpp-proof:hover { background: #d6eadf; }
#fig-pore .xpp-proof:focus-visible { outline: 2px solid var(--xp-leaf); outline-offset: -2px; }
#fig-pore .xpp-proof span { flex: 1; }
#fig-pore .xpp-proof span em { font-style: normal; font-weight: 500; color: #2c5a43; }
#fig-pore .xpp-proof svg { flex: none; width: 1.6rem; height: 1.6rem; }

@media (max-width: 560px) {
  #fig-pore .xp-sub.xp-try { margin-left: .85rem; margin-right: .85rem; }
  #fig-pore .xpp-pick { padding: 0 .85rem .8rem; gap: 8px; }
  #fig-pore .xpp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #fig-pore .xpp-opt { min-height: 56px; padding: 8px 9px 9px; }
  #fig-pore .xpp-opt b { font-size: .95rem; }
  #fig-pore .xpp-opt small { font-size: .72rem; }
  #fig-pore .xpp-result { padding-left: .85rem; padding-right: .85rem; }
  #fig-pore .xpp-proof { padding-left: .85rem; padding-right: .85rem; }
  #fig-pore .xpp-tally {
    position: static; justify-content: flex-start; padding: .55rem .85rem;
    border-top: 1px solid var(--xp-line); background: #fff;
  }
  #fig-pore .xpp-when { text-align: left; }
  #fig-pore .xpp-count { padding: .28rem .52rem; gap: .32rem; font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  #fig-pore .xpp-proof, #fig-pore .xpp-opt { transition: none; }
}