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

/* ---------- the stage ---------- */
.duo.us-duo>.pane-result{position:static}
.us-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}
.us-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}
.us-art{height:clamp(13rem,58vw,23rem);display:flex;justify-content:center}
.us-art svg{height:100%;width:auto;max-width:100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.us-presets{display:flex;gap:.3125rem;overflow-x:auto;padding:.125rem .125rem .375rem;margin:.375rem 0 .25rem;scrollbar-width:thin}
.us-presets button{flex:none;display:flex;align-items:center;gap:.3125rem;padding:.3125rem .5rem .3125rem .3125rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--mat-ink);font:inherit;font-size:.75rem;font-weight:600;cursor:pointer;white-space:nowrap}
.us-presets button.active{background:var(--mat-ink);color:var(--mat);border-color:var(--mat-ink)}
.us-sw{display:inline-block;width:1.125rem;height:1.125rem;border-radius:50%;border:1px solid rgba(0,0,0,.25);flex:none}
.us-presets button:focus-visible,.us-quick input:focus-visible,.us-quick select:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.us-quick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;margin:0 0 .5rem}
.us-quick label{display:flex;flex-direction:column;gap:.1875rem;font-size:.75rem;color:var(--mat-muted);min-width:0}
.us-quick input,.us-quick select{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);min-width:0}
.us-quick option{color:#1f2a36;background:#fff}
.us-dl{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:.375rem}
.us-dl .btn{padding-left:.375rem;padding-right:.375rem;min-width:0}
.us-dl .btn:disabled,.us-panel .btn:disabled{opacity:.55;cursor:not-allowed}
.us-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.us-msg{margin:.375rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.us-msg:empty{display:none}

/* ---------- the form ---------- */
.us-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.us-hint{margin:.375rem 0 .75rem;font-size:.8125rem;color:var(--muted);line-height:1.45}
.us-bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .75rem}
.us-bands label,.us-party-top label,.us-party-dl label,.us-area{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.us-bands select,.us-panel input,.us-panel select,.us-panel textarea{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);min-width:0;box-sizing:border-box}
.us-panel textarea{resize:vertical;line-height:1.4}

/* ---------- class set and contest ---------- */
.us-more-tools{display:grid;gap:1rem;margin-top:1rem}
.us-panel h2{font-size:1.1875rem;margin:0 0 .25rem}
.us-count{margin:.5rem 0;font-size:.8125rem;color:var(--muted)}
.us-count:empty{display:none}
.us-party-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:.5rem;margin-bottom:.75rem}
.us-cats{display:grid;gap:.375rem}
.us-cat-h,.us-cat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 2rem;gap:.375rem;align-items:center}
.us-cat-h{font-size:.75rem;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.us-cat button{height:2.25rem;border:1px solid var(--line-2);border-radius:.5rem;background:var(--surface);color:var(--muted);font:inherit;cursor:pointer}
.us-add{margin:.5rem 0 .75rem}
.us-party-dl{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.375rem;align-items:end}
.us-party-dl .btn:last-child{grid-column:1 / -1}
@media(min-width:560px){.us-party-dl{grid-template-columns:5rem minmax(0,1fr) minmax(0,1.4fr)}.us-party-dl .btn:last-child{grid-column:auto}}
.us-party-dl .btn{min-width:0;padding-left:.375rem;padding-right:.375rem}

@media(min-width:920px){
  .duo.us-duo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:none}
  .duo.us-duo>.pane-result,.duo.us-duo>.pane-main{grid-area:auto}
  .us-stage{position:sticky;top:1rem}
  .us-art{height:25rem}
  .us-presets{flex-wrap:wrap;justify-content:center;overflow:visible}
  .us-more-tools{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start}
}
.us-form label .k,.us-panel .k{font-family:var(--mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}