/* star.css — page layer for /paper-star-template/. The shell (header, controls, buttons, explainer,
   footer) is /assets/polyatic.css; this adds the cutting-mat stage with the finished star on white
   paper (it keeps its print colours in both themes), the "What to make" row, the size row, the
   downloads, the colour swatches and the step drawings in the how-to. Built from the site tokens. */
.ps-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.ps-head h1{margin-bottom:.25rem}
.ps-head .sub{margin-bottom:.75rem}
.ps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the stage ---------- */
.duo.ps-duo>.pane-result{position:static}
.ps-stage{background:radial-gradient(120% 70% at 50% 10%,rgba(255,236,170,.10),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}
.ps-stage-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .375rem}
.ps-stage-h{font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--mat-muted);margin:0}
.ps-view-toggle{display:flex;gap:.125rem;border:1px solid rgba(255,255,255,.25);border-radius:.5rem;padding:.125rem}
.ps-view-toggle button{border:0;background:transparent;color:var(--mat-muted);font:inherit;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer}
.ps-view-toggle button.active{background:var(--mat-ink);color:var(--mat)}
.ps-view{height:clamp(14rem,62vw,22rem);display:flex;justify-content:center;align-items:center}
.ps-art{display:block;max-width:100%;max-height:100%;border-radius:.25rem;box-shadow:0 12px 22px -10px rgba(0,0,0,.55);background:#fff}
.ps-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;margin:.5rem 0}
.ps-modes button,.ps-points 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;line-height:1.2}
.ps-modes button.active,.ps-points button.active{background:var(--mat-ink);color:var(--mat);border-color:var(--mat-ink)}
.ps-stage button:focus-visible,.ps-stage input:focus-visible,.ps-stage select:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.ps-quick{margin:0 0 .375rem}
.ps-q{display:flex;gap:.375rem;align-items:stretch}
.ps-q[hidden]{display:none}
.ps-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;flex:1.2;min-width:0}
.ps-size{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.ps-size input,.ps-sel select{width:100%;font:inherit;font-size:1rem;padding:.375rem 2.25rem .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}
.ps-unit{position:absolute;right:.5rem;font-size:.8125rem;color:var(--mat-muted);pointer-events:none}
.ps-sel{display:flex;align-items:center;gap:.5rem;flex:1;font-size:.8125rem;color:var(--mat-muted)}
.ps-sel select{padding-right:.5rem}
.ps-sel select option{color:#111}
.ps-jump{flex:1;font-size:.875rem}
.ps-dl{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:.375rem;margin-top:.375rem}
.ps-dl.ps-cut{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ps-dl.ps-cut[hidden]{display:none}
.ps-dl .btn{padding-left:.375rem;padding-right:.375rem;min-width:0}
.ps-dl .btn:disabled{opacity:.55;cursor:not-allowed}
.ps-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.ps-summary{margin:.5rem 0 .25rem;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--mat-ink)}
.ps-msg{margin:.25rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.ps-msg:empty{display:none}

/* ---------- the form ---------- */
.ps-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.ps-form .field[hidden]{display:none}
.ps-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.ps-hint:empty{display:none}
.ps-sub{margin-top:.75rem}
.ps-form .modes{flex-wrap:wrap}
.ps-form textarea{width:100%;font:inherit;font-size:.9375rem;padding:.5rem .625rem;border-radius:.5rem;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);resize:vertical}
.ps-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.25rem,1fr));gap:.375rem}
.ps-swatches button{display:flex;align-items:center;gap:.4375rem;padding:.375rem .5rem;border-radius:.5rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:.8125rem;cursor:pointer;text-align:left;min-width:0}
.ps-swatches button.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.ps-swatches button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ps-sw{flex:none;width:1.125rem;height:1.125rem;border-radius:50%;border:1px solid rgba(0,0,0,.25);background:var(--sw-b);box-shadow:inset 0 -.4rem 0 var(--sw-a)}
.ps-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.625rem}
.ps-two .modes{margin-bottom:0}
.ps-inline{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;font-size:.875rem}
.ps-inline input{width:5.5rem;font:inherit;padding:.375rem .5rem;border-radius:.5rem;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.ps-unit-t{color:var(--muted)}
.ps-check{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;margin:.25rem 0 .75rem}
.ps-check input{width:1.125rem;height:1.125rem;accent-color:var(--accent)}
.ps-page{display:flex;flex-direction:column;gap:.25rem}
.ps-page select{width:100%;font:inherit;padding:.4375rem .5rem;border-radius:.5rem;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}

/* ---------- step drawings in the how-to ---------- */
.ps-steps{margin:0 0 1.25rem}
.ps-steps-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;max-width:44rem}
.ps-step{min-width:0}
.ps-step-pic{background:#fff;border:1px solid var(--line);border-radius:.5rem;aspect-ratio:1}
.ps-step-pic svg{display:block;width:100%;height:100%}
.ps-step p{margin:.375rem 0 0;font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.ps-steps figcaption{font-size:.8125rem;color:var(--muted);margin-top:.375rem}

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