/* puppets.css — page layer for /christmas-finger-puppets/. The shell (header, controls, buttons,
   explainer, footer) is /assets/polyatic.css; this adds the cutting-mat stage with the worn
   puppets (a soft spotlight on the green mat, the same in both themes, like the printed sheet), the
   sheet preview, the pickers, the class list and the sizes table. */
.fp-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.fp-head h1{margin-bottom:.25rem}
.fp-head .sub{margin-bottom:.875rem}

/* ---------- the stage ---------- */
.duo.fp-duo>.pane-result{position:static}
.fp-stage{background:radial-gradient(120% 80% at 50% 0%,rgba(255,206,120,.14),transparent 60%),linear-gradient(180deg,var(--mat),var(--mat-2));
  color:var(--mat-ink);border-radius:var(--r);padding:.625rem .75rem .875rem;box-shadow:var(--shadow);min-width:0}
.fp-stage-h{font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--mat-muted);margin:0 0 .5rem;text-align:center}
.fp-worn{line-height:0;border-radius:.625rem;overflow:hidden;background:radial-gradient(90% 90% at 50% 30%,#fff7e6 0%,#f3e3c4 55%,#e2c99e 100%);box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.fp-worn svg{display:block;width:100%;height:auto}
.fp-row{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.75rem;align-items:center;margin-top:.75rem}
.fp-paper{line-height:0;display:flex;justify-content:center}
.fp-paper canvas{display:block;width:100%;height:auto;border-radius:2px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1),0 14px 30px -14px rgba(0,0,0,.6)}
.fp-side{min-width:0}
.fp-pager{display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mono);font-size:.8125rem;color:var(--mat-muted)}
.fp-pg{width:2.25rem;height:2rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--mat-ink);font:inherit;font-size:1rem;cursor:pointer}
.fp-pg:disabled{opacity:.35;cursor:default}
.fp-pg:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.fp-summary{margin:.375rem 0 .5rem;text-align:center;font-size:.8125rem;line-height:1.35;color:var(--mat-ink)}
.fp-dl{display:grid;grid-template-columns:minmax(0,1fr);gap:.375rem}
.fp-dl .btn{padding-left:.375rem;padding-right:.375rem;font-size:.875rem;min-width:0}
.fp-dl .btn:first-child{font-size:.9375rem}
.fp-dl .btn:disabled{opacity:.55;cursor:not-allowed}
.fp-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.fp-print{max-width:30rem;margin:.625rem auto 0;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--mat-ink)}
.fp-msg{margin:.375rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.fp-msg:empty{display:none}

/* ---------- the form ---------- */
.fp-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.fp-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.fp-hint:empty{display:none}
.fp-form [hidden]{display:none!important}
.fp-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem}
.fp-picks button{display:flex;flex-direction:column;gap:.125rem;align-items:flex-start;text-align:left;padding:.5rem;border:1px solid var(--line);border-radius:.5rem;
  background:var(--surface-2);color:var(--ink);font:inherit;font-size:.875rem;cursor:pointer;min-width:0}
.fp-picks b{font-size:.875rem}
.fp-picks span{font-size:.6875rem;color:var(--muted);line-height:1.3}
.fp-picks button:hover{border-color:var(--muted)}
.fp-picks button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.fp-picks button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fp-form textarea{width:100%;min-height:6.5rem;resize:vertical;font:inherit}
.fp-class{margin:.5rem 0 0;padding-left:1.25rem;font-size:.8125rem;color:var(--muted);columns:2 10rem;column-gap:1.25rem}
.fp-class:empty{display:none}

.fp-custom{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.875rem}
.fp-custom input{width:6.5rem;font:inherit}
.fp-form .head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.fp-all{border:0;background:none;color:var(--accent);font:inherit;font-size:.8125rem;cursor:pointer;padding:.125rem .25rem;text-decoration:underline}
.fp-all:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fp-chips{display:flex;flex-wrap:wrap;gap:.375rem}
.fp-chips button{border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:.8125rem;padding:.3125rem .625rem;cursor:pointer}
.fp-chips button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.fp-chips button[aria-pressed="true"]::before{content:"\2713\00a0"}
.fp-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fp-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.9375rem;cursor:pointer}
.fp-check input{margin-top:.2rem}
.fp-playsub{color:var(--muted)}
.fp-play{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.375rem 1rem;margin:.75rem 0;max-width:46rem}
.fp-play dt{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);padding-top:.2rem}
.fp-play dd{margin:0}

/* ---------- below the tool ---------- */
.fp-tablewrap{overflow-x:auto;margin:.75rem 0}
.fp-table{border-collapse:collapse;font-size:.875rem;min-width:28rem}
.fp-table th,.fp-table td{text-align:left;white-space:nowrap;padding:.4rem .6rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.fp-table thead th{white-space:normal;font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--muted)}

@media(min-width:920px){
  .duo.fp-duo{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:none}
  .duo.fp-duo>.pane-result,.duo.fp-duo>.pane-main{grid-area:auto}
  .fp-stage{position:sticky;top:1rem}
  .fp-row{grid-template-columns:minmax(0,10rem) minmax(0,1fr)}
}