/* The print options panel on printable detail pages (js/print-options.js; added by
   includes/printable-actions.php). Blake's picks from the mockup
   mockups/redesign/site-a-hub/live/print-options.html (2026-10-16): a words summary, the gold key
   tile (g1) that jiggles when the key is switched on, the printables' printer picture in violet on
   light violet, no shadows on the choices, and on phones a sheet from the bottom. Everything is
   under .po-back, so it looks the same in both themes. */
.po-back { --po-plum: #341e60; --po-violet: #634bf5; --po-violet-d: #4b35d6; --po-violet-l: #ece8ff; --po-cream: #fefdfa; --po-ink: #241a3a; --po-muted: #6b6386; --po-line: #e6e1f2;
  position: fixed; inset: 0; background: rgba(36, 18, 70, .55); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 10000;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--po-ink); text-align: left; line-height: 1.35; }
.po-back.on { display: flex; animation: poFade .18s ease-out; }
.po-back *, .po-back *::before, .po-back *::after { box-sizing: border-box; }
@keyframes poFade { from { opacity: 0; } }
.po-back .po { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(30, 10, 70, .35); animation: poRise .22s ease-out; }
@keyframes poRise { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.po-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 6px; }
/* the printables' printer picture (js/purple-kinds.js), in violet on light violet: the circle pops in
   and the page feeds out as the panel opens */
.po-head .po-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--po-violet-l); color: var(--po-violet); --ibg: var(--po-violet-l); display: grid; place-items: center; flex: none; overflow: hidden; }
.po-ic svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.po-ic .fl { fill: var(--ibg, #fff); }
.po-ic svg * { transform-box: fill-box; transform-origin: center; }
.po-back.on .po-head .po-ic { animation: poIcPop .5s .12s cubic-bezier(.2,1.6,.4,1) both; }
.po-back.on .po-ic .pg { animation: poFeed 1.6s .3s cubic-bezier(.3,.7,.3,1) both; }
.po-back.on .po-ic .bd { animation: poShake 1.6s .3s ease both; }
@keyframes poIcPop { from { transform: scale(0); } }
@keyframes poFeed { 0%, 12% { transform: translateY(-7px); } 30%, 45% { transform: translateY(-4px); } 70% { transform: translateY(1px); } 100% { transform: none; } }
@keyframes poShake { 12%, 36% { transform: translateY(.6px); } 24%, 48% { transform: translateY(-.6px); } 60%, 100% { transform: none; } }
.po-head h2 { margin: 0; font: 600 21px/1.2 'Fredoka', 'DM Sans', sans-serif; color: var(--po-ink); }
.po-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--po-muted); }
.po-x { margin-left: auto; align-self: flex-start; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f3f0fa; color: var(--po-muted); font-size: 20px; line-height: 1; cursor: pointer; flex: none; padding: 0; }
.po-x:hover { background: #e9e4f6; }

.po-body { padding: 10px 22px 6px; }
.po-label { font: 600 13px 'DM Sans', system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--po-muted); margin: 14px 0 9px; }

.po-versions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.po-ver { position: relative; border: 2px solid var(--po-line); border-radius: 16px; padding: 10px 10px 12px; background: var(--po-cream); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; display: block; width: 100%; margin: 0; }
.po-ver:hover { border-color: #cfc6f3; }
.po-ver.on { border-color: var(--po-violet); box-shadow: 0 0 0 4px var(--po-violet-l); }
.po-ver .po-pic { height: 138px; border-radius: 10px; background: #fff; border: 1px solid var(--po-line); overflow: hidden; display: flex; justify-content: center; }
.po-ver .po-pic img { height: 100%; width: auto; max-width: none; }
.po-ver.bw .po-pic img { filter: grayscale(1) contrast(1.05); }
.po-ver b { display: block; margin-top: 9px; font: 600 16px 'Fredoka', 'DM Sans', sans-serif; }
.po-ver .po-sub { display: block; font-size: 12.5px; color: var(--po-muted); margin-top: 1px; }
.po-ver .po-tick { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--po-violet); color: #fff; display: none; place-items: center; }
.po-ver .po-tick path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.po-ver.on .po-tick { display: grid; animation: poTick .4s cubic-bezier(.2,1.4,.4,1) both; }
.po-ver.on .po-tick path { animation: poDraw .32s .16s ease-out forwards; }
@keyframes poTick { from { transform: scale(.3); opacity: 0; } }
@keyframes poDraw { to { stroke-dashoffset: 0; } }

.po-key { display: flex; align-items: center; gap: 14px; border: 2px solid var(--po-line); border-radius: 16px; padding: 12px 14px; cursor: pointer; background: var(--po-cream); }
/* the gold key tile (g1: soft gold, brown key); off, the key goes quiet gray */
.po-key .po-keyic { position: relative; overflow: hidden; width: 38px; height: 38px; border-radius: 10px; background: #fcefc7; color: #8a5a12; transition: background .25s, color .25s; display: grid; place-items: center; flex: none; }
.po-key:not(.on) .po-keyic { background: #f1eff5; color: #aaa3bd; }
.po-key .po-keyic svg { transform-origin: 32% 64%; }
.po-key.just .po-keyic svg { animation: poJiggle .6s ease-in-out; }
@keyframes poJiggle { 0%, 100% { transform: none; } 15% { transform: rotate(-16deg); } 35% { transform: rotate(13deg); } 55% { transform: rotate(-9deg); } 75% { transform: rotate(5deg); } }
.po-key b { display: block; font: 600 16px 'Fredoka', 'DM Sans', sans-serif; }
.po-key .po-sub { font-size: 12.5px; color: var(--po-muted); }
.po-sw { margin-left: auto; position: relative; width: 50px; height: 30px; border-radius: 15px; background: #d9d4e8; flex: none; transition: background .15s; }
.po-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.po-key.on .po-sw { background: var(--po-violet); }
.po-key.on .po-sw::after { transform: translateX(20px); }
.po-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--po-muted); margin: 14px 2px 0; cursor: pointer; }
.po-remember input { accent-color: var(--po-violet); width: 16px; height: 16px; margin: 0; }
/* only what the pack's PDF has: one version hides the choice of version, no key hides the key */
.po-back.no-versions .po-vers, .po-back.no-key .po-keys { display: none; }

.po-foot { display: flex; align-items: center; gap: 12px; padding: 18px 22px 20px; margin-top: 14px; border-top: 1px solid var(--po-line); background: #fbfaff; }
.po-sum { font-size: 14px; color: var(--po-muted); }
.po-sum b { color: var(--po-ink); }
.po-go { margin-left: auto; border: 0; border-radius: 999px; background: var(--po-violet); color: #fff; font: 600 16px 'Fredoka', 'DM Sans', sans-serif; padding: 12px 22px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.po-go:hover { background: var(--po-violet-d); }
.po-go[aria-busy="true"] { opacity: .75; cursor: progress; }
.po-go svg { flex: none; }

.po-ver:focus-visible, .po-key:focus-visible, .po-go:focus-visible, .po-x:focus-visible { outline: 3px solid var(--po-violet); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .po-back, .po-back * { animation: none !important; } .po-ver .po-tick path { stroke-dashoffset: 0; } }

/* phones: a sheet from the bottom */
@media (max-width: 600px) {
  .po-back { align-items: flex-end; padding: 0; }
  .po-back .po { border-radius: 22px 22px 0 0; max-width: none; max-height: 92vh; animation-name: poSheet; }
  @keyframes poSheet { from { transform: translateY(40%); } }
  .po-ver .po-pic { height: 112px; }
  .po-foot { flex-wrap: wrap; }
  .po-sum { width: 100%; text-align: center; }
  .po-go { margin: 0; width: 100%; justify-content: center; }
}