/* julehjerter.css - sidelaget for /julehjerter/. Skallen er /assets/polyatic.css, scenen (skærematten)
   er /letter-from-santa/santa.css; her er kun hjertet på måtten, mønsterknapperne og farvefelterne.
   Hjertet og arket beholder deres egne farver i begge temaer: de er ting på måtten. */
.jh-head .sub a{white-space:nowrap}
.jh-view{max-width:22rem;margin:0 auto;line-height:0}
.jh-view canvas{display:block;width:100%;height:auto}
.jh-view.sheet{max-width:19rem}
.jh-view.sheet canvas{background:#fff;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 40px -16px rgba(0,0,0,.6)}
.jh-stage .ls-tabs{margin-bottom:.25rem}
.jh-stage .ls-dl{margin-top:.625rem}
.jh-warn{max-width:30rem;margin:.5rem auto 0;padding:.5rem .75rem;border-radius:.5rem;font-size:.8125rem;line-height:1.45;background:rgba(255,190,90,.14);border-left:.1875rem solid #f2c94c;color:var(--mat-ink)}
.jh-warn[hidden]{display:none}

/* mønstre med et lille hjerte på hver knap */
.jh-pats{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:.375rem}
.jh-pats button{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.375rem .25rem .5rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);color:var(--ink);font:inherit;font-size:.75rem;font-weight:600;line-height:1.2;text-align:center;cursor:pointer}
.jh-pats button canvas{width:3.25rem;height:3rem}
.jh-pats button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);background:var(--surface-2)}
.jh-pats button:focus-visible,.jh-swatches button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* farver */
.jh-swatches{display:flex;flex-wrap:wrap;gap:.375rem}
.jh-swatches button{width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid var(--line-2);cursor:pointer;padding:0;position:relative}
.jh-swatches button.active{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.jh-swatches button.active::after{content:"";position:absolute;inset:.8rem;border-radius:999px;background:currentColor;opacity:.85}
.jh-colrow+.jh-colrow{margin-top:.625rem}
.jh-colrow .k2{display:block;font-size:.8125rem;color:var(--muted);margin-bottom:.3125rem}
.modes button small{display:block;font-weight:500;font-size:.6875rem;opacity:.8}
.jh-faq h3{margin-top:1.25rem}
.jh-howart{display:block;width:100%;max-width:40rem;height:auto;margin:.5rem 0 1rem;border-radius:.5rem;background:#f4f1ea}
@media(min-width:920px){.jh-view{max-width:26rem}.jh-view.sheet{max-width:23rem}}