/* key.css — page layer for /santa-magic-key/. The shell (header, controls, buttons,
   explainer, footer) is /assets/polyatic.css; this file adds the warm stage with the
   tag and key on it, and the key and design pickers. The tag and the sheet keep their
   own printed colours in both themes: they are objects on the mat. */
@font-face{font-family:"MK Classic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/classic.woff2) format("woff2")}
@font-face{font-family:"MK Script";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/handwritten.woff2) format("woff2")}

.mk-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.mk-head h1{margin-bottom:.25rem}
.mk-head .sub{margin-bottom:.75rem}

/* ---------- the stage ---------- */
.duo.mk-duo>.pane-result{position:static}
.mk-stage{background:radial-gradient(110% 70% at 50% 0%,rgba(255,190,110,.22),transparent 62%),linear-gradient(180deg,var(--mat),var(--mat-2));
  color:var(--mat-ink);border-radius:var(--r);padding:.75rem .75rem .875rem;box-shadow:var(--shadow);min-width:0}
.mk-stage-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .5rem}
.mk-stage-h{font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--mat-muted);margin:0}
.mk-view{display:flex;gap:.25rem}
.mk-view button{border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--mat-ink);border-radius:.4375rem;padding:.25rem .5rem;min-height:2rem;font:inherit;font-size:.75rem;font-weight:600;cursor:pointer}
.mk-view button.active{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
.mk-view button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mk-paper{max-width:32rem;margin:0 auto;line-height:0;display:flex;justify-content:center}
.mk-paper canvas{display:block;max-width:100%;height:auto}
.mk-paper canvas.sheet{width:100%;background:#fff;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 40px -16px rgba(0,0,0,.6)}
.mk-summary{margin:.5rem 0;text-align:center;font-size:.8125rem;color:var(--mat-ink)}
.mk-dl{display:flex;flex-wrap:wrap;gap:.5rem;max-width:32rem;margin:0 auto}
.mk-dl .btn{flex:1 1 9rem}
.mk-dl .btn.main{flex-basis:100%}
.mk-dl .btn:disabled{opacity:.6;cursor:progress}
.mk-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.mk-msg,.mk-fit{margin:.5rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.mk-fit{color:#ffd58a}
.mk-msg:empty,.mk-fit:empty{display:none}
.mk-svgopt{display:flex;gap:.5rem;align-items:flex-start;max-width:32rem;margin:.5rem auto 0;font-size:.75rem;color:var(--mat-muted);line-height:1.4}
.mk-svgopt input{flex:none;width:1rem;height:1rem;margin:.1rem 0 0;accent-color:var(--signal)}

/* ---------- the form ---------- */
.mk-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.mk-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.mk-form textarea{min-height:8.5rem;resize:vertical;line-height:1.45}
.mk-form .modes{flex-wrap:wrap}
.mk-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4375rem}
.mk-picks.designs{grid-template-columns:repeat(4,minmax(0,1fr))}
.mk-pick{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.375rem .25rem .3125rem;border:1px solid var(--line);border-radius:.5rem;
  background:var(--surface-2);color:var(--ink);font:inherit;font-size:.6875rem;font-weight:600;cursor:pointer;min-width:0}
.mk-pick canvas{display:block;width:auto;height:3.5rem;max-width:100%}
.mk-picks.designs .mk-pick canvas{height:4.25rem}
.mk-pick span{line-height:1.2;text-align:center}
.mk-pick:hover{border-color:var(--muted)}
.mk-pick.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.mk-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mk-draft{margin:.5rem 0 0;font-size:.8125rem;color:var(--muted)}
.mk-linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
#ownField[hidden]{display:none}

.explainer .mk-poems{display:grid;gap:.75rem;margin:.75rem 0 1rem}
.explainer .mk-poems blockquote{margin:0;padding:.625rem .875rem;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 .5rem .5rem 0;font-size:.9375rem;line-height:1.5}
.explainer .mk-poems b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.25rem}

@media(min-width:920px){
  .duo.mk-duo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:none}
  .duo.mk-duo>.pane-result,.duo.mk-duo>.pane-main{grid-area:auto}
  .mk-stage{position:sticky;top:1rem}
  .mk-pick canvas{height:4.5rem}
  .mk-picks.designs .mk-pick canvas{height:5.5rem}
  .explainer .mk-poems{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
}
@media(max-width:380px){.mk-picks{grid-template-columns:repeat(3,minmax(0,1fr))}}