/* Interactive diagrams. Uses the booklet's colour variables when present. */
.pwi{--pwi-ink:var(--ink,#25211c);--pwi-paper:var(--paper,#fbf6ea);--pwi-card:var(--card,#fffdf7);--pwi-teal:var(--teal,#17707a);--pwi-line:var(--line,#d8cdb6);
  margin:12px 0;color:var(--pwi-ink);font:16px/1.4 "Segoe UI",system-ui,sans-serif}
.pwi-predict{background:#fff6d8;color:#25211c;border-radius:6px 10px 6px 9px;padding:8px 14px;margin-bottom:8px;box-shadow:0 2px 2px #3a2a1040}
.pwi-stage{border:2.5px solid var(--pwi-ink);border-radius:10px;overflow:hidden;background:var(--pwi-paper)}
.pwi canvas{display:block;width:100%;height:auto}
.pwi-controls{display:grid;gap:12px;margin:12px 0}
.pwi-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:0;padding:0;margin:0}
.pwi-row>span,.pwi-holes legend{font-weight:700;min-width:8.5em;padding:0}
.pwi-tip{flex:1;min-width:180px;height:44px;accent-color:var(--pwi-teal)}
.pwi-tipout{min-width:3.2em;font-weight:700;text-align:right}
.pwi-holes label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:2px solid var(--pwi-line);border-radius:12px;background:var(--pwi-card);cursor:pointer}
.pwi-holes label:has(input:checked){border-color:var(--pwi-teal);box-shadow:0 0 0 2px var(--pwi-teal) inset}
.pwi-holes input{width:22px;height:22px;accent-color:var(--pwi-teal)}
.pwi-btn{min-height:46px;padding:8px 20px;border-radius:14px;border:2.5px solid var(--pwi-ink);background:var(--pwi-card);color:var(--pwi-ink);font:700 16px "Segoe UI",system-ui,sans-serif;cursor:pointer;justify-self:start}
.pwi input:focus-visible,.pwi-btn:focus-visible{outline:3px solid var(--pwi-teal);outline-offset:3px}
.pwi-live{min-height:1.5em;font-weight:600}
.pwi-notice{background:var(--pwi-card);border:2px solid var(--pwi-line);border-radius:10px;padding:8px 14px;margin:6px 0}
@media (prefers-reduced-motion:reduce){.pwi *{transition:none!important;animation:none!important}}
@media print{.pwi{display:none!important}}