/* stocking.css — page layer for /christmas-stocking-template/. The shell (header, controls, buttons,
   explainer, footer) is /assets/polyatic.css; this adds the cutting-mat stage with the finished
   stocking (it keeps its felt colours in both themes, like the printed picture), the shape chips,
   the name and size row, the downloads and the form hints. */
.cs-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.cs-head h1{margin-bottom:.25rem}
.cs-head .sub{margin-bottom:.75rem}

/* ---------- the stage ---------- */
.duo.cs-duo>.pane-result{position:static}
.cs-stage{background:radial-gradient(120% 70% at 50% 10%,rgba(255,226,160,.12),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}
.cs-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 .25rem;text-align:center}
.cs-view{position:relative}
.cs-art{height:clamp(13.5rem,58vw,22rem);display:flex;justify-content:center}
.cs-art svg{height:100%;width:auto;max-width:100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.cs-size-tag{margin:.25rem 0 0;text-align:center;font-family:var(--mono);font-size:.6875rem;color:var(--mat-muted)}
.cs-shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;margin:.5rem 0}
.cs-shapes 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}
.cs-shapes button.active{background:var(--mat-ink);color:var(--mat);border-color:var(--mat-ink)}
.cs-shapes button:focus-visible,.cs-quick input:focus-visible,.cs-sheet select:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.cs-quick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.5rem;margin:0 0 .5rem}
.cs-quick label{display:flex;flex-direction:column;gap:.1875rem;font-size:.75rem;color:var(--mat-muted);min-width:0}
.cs-quick output{color:var(--mat-ink);font-family:var(--mono)}
.cs-name input{width:100%;font:inherit;font-size:1rem;padding:.375rem .5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.18);color:var(--mat-ink)}
.cs-sz input{width:100%;accent-color:var(--mat-ink);margin:.375rem 0 0}
.cs-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}
.cs-dl .btn{padding-left:.375rem;padding-right:.375rem;font-size:.8125rem;min-width:0}
.cs-dl .btn:first-child{grid-column:1 / -1;font-size:.9375rem}
.cs-dl .btn:disabled{opacity:.55;cursor:not-allowed}
.cs-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.cs-summary{margin:.5rem 0 .375rem;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--mat-ink)}
.cs-sheet{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;color:var(--mat-muted)}
.cs-sheet select{max-width:65%;font:inherit;font-size:.8125rem;padding:.25rem .375rem;border-radius:.375rem;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.18);color:var(--mat-ink)}
.cs-sheet option{color:#1f2a36;background:#fff}
.cs-msg{margin:.375rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.cs-msg:empty{display:none}

/* ---------- the form ---------- */
.cs-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.cs-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.cs-hint:empty{display:none}
.cs-form input[type=number]{width:8rem}
.cs-presets{margin-top:.5rem;flex-wrap:wrap}

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