/* kravlenisser.css - sidelaget for /kravlenisser/. Skallen er /assets/polyatic.css, scenen med arket
   på skærematten er /letter-from-santa/santa.css; her er kun arkvælgeren, nisse-knapperne og
   ansigts-editoren. Arket beholder sine egne farver i begge temaer: det er en ting på måtten. */
.kn-head .sub a{white-space:nowrap}
.kn-paper{max-width:18.5rem}
.kn-paper canvas{background:#fff}
.kn-nav{display:flex;align-items:center;justify-content:center;gap:.5rem;max-width:20rem;margin:.5rem auto 0}
.kn-nav[hidden]{display:none}
.kn-label{flex:1;text-align:center;font-weight:650;font-size:.9375rem;color:var(--mat-ink)}
.kn-arrow{width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--mat-ink);font:inherit;font-size:1.375rem;line-height:1;cursor:pointer}
.kn-arrow:disabled{opacity:.35;cursor:default}
.kn-arrow:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.kn-stage .ls-dl{margin-top:.75rem}

/* billedet */
.kn-file{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.kn-hidden-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.kn-hidden-input:focus-visible+.kn-private,.kn-file:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.kn-private{margin:.625rem 0 0;padding:.5rem .625rem;border-left:.1875rem solid var(--accent);background:var(--surface-2);border-radius:.375rem;font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.kn-editor{margin-top:.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.kn-editor[hidden]{display:none}
.kn-editor canvas{width:15rem;height:15rem;max-width:100%;border-radius:.625rem;touch-action:none;cursor:grab;background:#2a2d2b}
.kn-editor canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kn-zoom{display:flex;flex-wrap:wrap;gap:.5rem}
.kn-zoom .btn{min-width:2.75rem;font-size:1.0625rem}
.kn-zoom #dropPhoto{font-size:.875rem}

/* størrelser og nisser */
.kn-sizes button small{display:block;font-weight:500;font-size:.6875rem;opacity:.8}
.kn-poseshint{margin:0 0 .5rem}
.kn-poses{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.75rem,1fr));gap:.375rem}
.kn-poses[hidden]{display:none}
.kn-pose{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.375rem .25rem;font-size:.6875rem;line-height:1.2;text-align:center;opacity:.55}
.kn-pose.on{opacity:1}
.kn-pose svg{width:100%;height:3.5rem}
.kn-pose.kn-small svg{height:2.75rem}
.kn-poses+.kn-poses,.modes+.kn-poses{margin-top:.5rem}
.kn-faq h3{margin-top:1.25rem}
@media(min-width:920px){.kn-paper{max-width:24rem}}