/* elf.css — page layer for /elf-photo-template/. The shell (header, controls, buttons, explainer, footer) is
   /assets/polyatic.css; this adds the cutting-mat stage with the finished figure (its print colours are the
   same in both themes), the three output chips, the photo picker and downloads, the figure and skin swatches
   and the pupil list. */
.ep-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.ep-head h1{margin-bottom:.25rem}
.ep-head .sub{margin-bottom:.75rem}

/* ---------- the stage ---------- */
.duo.ep-duo>.pane-result{position:static}
.ep-stage{background:radial-gradient(120% 70% at 50% 10%,rgba(255,214,150,.13),transparent 60%),linear-gradient(180deg,var(--mat),var(--mat-2));
  color:var(--mat-ink);border-radius:var(--r);padding:.5rem .625rem .75rem;box-shadow:var(--shadow);min-width:0}
.ep-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 .375rem;text-align:center}
.ep-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem;margin:0 0 .5rem}
.ep-modes button{padding:.4375rem .125rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--mat-ink);font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-modes button.active{background:var(--mat-ink);color:var(--mat);border-color:var(--mat-ink)}
.ep-view{position:relative;height:clamp(15rem,64vw,23rem);display:flex;justify-content:center;align-items:center}
.ep-art{display:block;max-width:100%;max-height:100%;border-radius:.375rem;background:#fff;box-shadow:0 12px 22px -10px rgba(0,0,0,.55);touch-action:none}
.ep-art.grab{cursor:grab}
.ep-art.grabbing{cursor:grabbing}
.ep-tip{position:absolute;left:50%;top:.375rem;transform:translateX(-50%);margin:0;padding:.1875rem .5rem;border-radius:1rem;background:rgba(0,0,0,.6);color:#fff;font-size:.75rem;white-space:nowrap;pointer-events:none}
.ep-zoom{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;align-items:center;margin:.375rem 0 0;font-size:.8125rem}
.ep-zoom input{width:100%;accent-color:var(--mat-ink)}
.ep-zoom .btn{padding:.25rem .625rem;font-size:.8125rem}
.ep-pupilnav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;align-items:center;margin:.375rem 0 0;text-align:center;font-size:.875rem}
.ep-pupilnav .btn{padding:.25rem .75rem}
.ep-pupilnav span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-private{margin:.5rem 0 .375rem;font-size:.8125rem;line-height:1.4;color:var(--mat-ink);text-align:center}
.ep-dl,.ep-dl2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.375rem}
.ep-dl2{margin-top:.375rem}
.ep-dl .btn,.ep-dl2 .btn{padding-left:.375rem;padding-right:.375rem;min-width:0}
.ep-dl .btn:disabled{opacity:.55;cursor:not-allowed}
.ep-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.ep-stage .btn:focus-visible,.ep-stage button:focus-visible,.ep-art:focus-visible,.ep-pick:focus-within{outline:2px solid var(--mat-ink);outline-offset:2px}
.ep-pick{position:relative;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center}
.ep-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.ep-dl2 .btn{font-size:.875rem}
.ep-summary{margin:.5rem 0 .25rem;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--mat-ink)}
.ep-msg{margin:.25rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.ep-msg:empty{display:none}

/* ---------- the form ---------- */
.ep-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.ep-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.ep-hint:empty{display:none}
.ep-form .modes{flex-wrap:wrap}
.ep-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem}
.ep-figs button{display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.25rem .125rem .375rem;border-radius:.5rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:.75rem;cursor:pointer;min-width:0}
.ep-figs canvas{width:2.5rem;height:3.5rem;display:block}
.ep-figs button.active,.ep-skins button.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.ep-figs button:focus-visible,.ep-skins button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ep-skins{display:flex;flex-wrap:wrap;gap:.375rem}
.ep-skins button{display:flex;align-items:center;gap:.375rem;padding:.3125rem .5rem;border-radius:.5rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:.8125rem;cursor:pointer}
.ep-sw{width:1.125rem;height:1.125rem;border-radius:50%;border:1px solid rgba(0,0,0,.3);background:var(--sw)}
.ep-text{width:100%;font:inherit;font-size:1rem;padding:.4375rem .5rem;border-radius:.5rem;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.ep-check{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 .25rem;font-size:.875rem}
.ep-check input{accent-color:var(--accent);width:1rem;height:1rem}
.ep-check[hidden]{display:none}
.ep-pupils{list-style:none;margin:.5rem 0;padding:0;display:flex;flex-direction:column;gap:.375rem;max-height:26rem;overflow:auto}
.ep-pupils li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.375rem;align-items:center;padding:.25rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface)}
.ep-pupils li.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ep-pupils canvas{width:2.25rem;height:2.875rem;border-radius:50%/42%;background:var(--surface-2);display:block}
.ep-pupils input{min-width:0;width:100%;font:inherit;font-size:.9375rem;padding:.3125rem .4375rem;border-radius:.375rem;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.ep-pupils .btn{padding:.25rem .5rem;font-size:.8125rem}
.ep-addrow{display:flex;flex-wrap:wrap;gap:.375rem}
.ep-addrow .btn{font-size:.875rem}
.ep-page{display:flex;flex-direction:column;gap:.25rem}
.ep-page select{width:100%;font:inherit;padding:.4375rem .5rem;border-radius:.5rem;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}

@media(min-width:920px){
  .duo.ep-duo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:none}
  .duo.ep-duo>.pane-result,.duo.ep-duo>.pane-main{grid-area:auto}
  .ep-stage{position:sticky;top:1rem}
  .ep-view{height:30rem}
}
@media(prefers-reduced-motion:reduce){.ep-art{transition:none}}
.ep-dl.solo{grid-template-columns:minmax(0,1fr)}
.ep-pick[hidden],.ep-private[hidden],.ep-zoom[hidden],.ep-pupilnav[hidden],.ep-tip[hidden]{display:none}