/* sleigh.css — page layer for /santa-sleigh-template/. The shell (header, controls, buttons, explainer,
   footer) is /assets/polyatic.css; this adds the night stage with the made sleigh (it keeps its own colours in
   both themes, like the printed sheet), the sheet preview, the pickers and the tables below the tool. */
.sl-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.sl-head h1{margin-bottom:.25rem}
.sl-head .sub{margin-bottom:.875rem}

/* ---------- the stage ---------- */
.duo.sl-duo>.pane-result{position:static}
.sl-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}
.sl-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}
.sl-scene{line-height:0;border-radius:.625rem;overflow:hidden;box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.sl-scene svg{display:block;width:100%;height:auto}
.sl-row{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.75rem;align-items:center;margin-top:.75rem}
.sl-paper{line-height:0;display:flex;justify-content:center}
.sl-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)}
.sl-side{min-width:0}
.sl-pager{display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mono);font-size:.8125rem;color:var(--mat-muted)}
.sl-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}
.sl-pg:disabled{opacity:.35;cursor:default}
.sl-pg:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.sl-summary{margin:.375rem 0 .5rem;text-align:center;font-size:.8125rem;line-height:1.35;color:var(--mat-ink)}
.sl-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem}
.sl-dl .btn{padding-left:.375rem;padding-right:.375rem;font-size:.8125rem;min-width:0}
.sl-dl .btn:first-child{grid-column:1 / -1;font-size:.9375rem}
.sl-dl .btn:disabled{opacity:.55;cursor:not-allowed}
.sl-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.sl-print{max-width:30rem;margin:.625rem auto 0;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--mat-ink)}
.sl-msg{margin:.375rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.sl-msg:empty{display:none}

/* ---------- the form ---------- */
.sl-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.sl-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.sl-hint:empty{display:none}
.sl-form [hidden]{display:none!important}
.sl-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}
.sl-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}
.sl-picks b{font-size:.875rem}
.sl-picks span{font-size:.6875rem;color:var(--muted);line-height:1.3}
.sl-picks button:hover{border-color:var(--muted)}
.sl-picks button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.sl-picks button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sl-form input[type=text]{width:100%}

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

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

.sl-picks button[hidden]{display:none}

/* ---------- reindeer additions ---------- */
.sl-designs{grid-template-columns:repeat(2,minmax(0,1fr))}
.sl-designs button{flex-direction:row;align-items:center;gap:.5rem}
.sl-sw{display:inline-flex;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;overflow:hidden;border:1px solid var(--line-2);flex-direction:column}
.sl-sw i{display:block;flex:1}
.sl-makes{grid-template-columns:repeat(2,minmax(0,1fr))}
.sl-num{display:flex;align-items:center;gap:.5rem}
.sl-num input{width:6.5rem}
.sl-num span{color:var(--muted);font-size:.875rem}
@media(min-width:560px){.sl-designs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sl-form input[type=text]{width:100%}
.sl-note{border-left:.25rem solid var(--accent);padding:.5rem .875rem;background:var(--surface);border-radius:.375rem}