/* gl.css — page layer for /christmas-gift-list/. The shell (header, controls, buttons,
   explainer, footer) is /assets/polyatic.css; this adds the cutting-mat stage with the printed
   list lying on it, the person cards of the editor, the design swatches and the keep/clear
   box. The sheet is paper-white in both themes: it is an object on the mat. */
.gl-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.gl-head h1{margin-bottom:.25rem}
.gl-head .sub{margin-bottom:.875rem}

/* ---------- the stage ---------- */
.duo.gl-duo>.pane-result{position:static}
.gl-stage{background:radial-gradient(120% 80% at 50% 0%,rgba(255,196,120,.16),transparent 60%),linear-gradient(180deg,var(--mat),var(--mat-2));
  color:var(--mat-ink);border-radius:var(--r);padding:.625rem .75rem 1rem;box-shadow:var(--shadow);min-width:0}
.gl-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}
.gl-stage .modes.gl-view{max-width:24rem;margin:0 auto .625rem;background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.18)}
.gl-stage .gl-view button{color:var(--mat-ink);font-size:.8125rem;padding:.4375rem .5rem}
.gl-stage .gl-view button.active{background:var(--mat-ink);color:var(--mat)}
.gl-view button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gl-paper{margin:0 auto;line-height:0;max-width:min(100%,19.5rem)}
.gl-paper canvas{display:block;width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 40px -16px rgba(0,0,0,.6)}
.gl-pager{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:.5rem 0 0;font-family:var(--mono);font-size:.8125rem;color:var(--mat-muted)}
.gl-pager[hidden]{display:none}
.gl-pager button{min-width:2.75rem;min-height:2.25rem;border:1px solid rgba(255,255,255,.4);border-radius:.5rem;background:transparent;color:var(--mat-ink);font:inherit;font-size:1rem;cursor:pointer}
.gl-pager button:disabled{opacity:.4;cursor:default}
.gl-pager button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gl-dl{display:flex;flex-wrap:wrap;gap:.5rem;max-width:30rem;margin:.625rem auto 0}
.gl-dl .btn{flex:1 1 9rem}
.gl-dl .btn:disabled{opacity:.6;cursor:progress}
.gl-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.gl-msg{margin:.5rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.gl-msg:empty{display:none}

/* ---------- the editor ---------- */
.gl-form-h{margin:0 0 .5rem;font-size:1.1875rem}
.gl-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.gl-total{display:flex;flex-wrap:wrap;gap:.25rem .875rem;margin:0 0 .75rem;padding:.625rem .75rem;border-radius:.625rem;background:var(--surface-2);border:1px solid var(--line);font-size:.875rem;font-variant-numeric:tabular-nums}
.gl-total b{font-weight:700}
.gl-total .gl-over{color:var(--bad);font-weight:700}
.gl-people{display:grid;gap:.625rem}
.gl-person{border:1px solid var(--line);border-radius:.75rem;padding:.625rem .75rem .75rem;background:var(--surface);min-width:0}
.gl-person.is-over{border-color:var(--bad);box-shadow:inset .25rem 0 0 var(--bad)}
.gl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;align-items:start;margin-top:.5rem}
.gl-ideas{margin-top:.5rem}
.gl-person label{display:block;font-family:var(--mono);font-size:.6875rem;color:var(--muted);margin:0 0 .1875rem;text-transform:uppercase;letter-spacing:.04em}
.gl-person input[type=text],.gl-person select,.gl-person textarea{width:100%;min-width:0}
.gl-person textarea{resize:vertical;min-height:3.25rem;line-height:1.4;font:inherit}
.gl-person .gl-name{font-weight:700}
.gl-status{margin:.5rem 0 0;font-size:.875rem;font-variant-numeric:tabular-nums}
.gl-status.is-over{color:var(--bad);font-weight:700}
.gl-items{display:grid;gap:.375rem;margin-top:.5rem}
.gl-item{display:grid;grid-template-columns:minmax(0,1fr) 5rem 2.25rem;gap:.375rem;align-items:center}
.gl-item input{min-width:0}
.gl-x{width:2.25rem;height:2.25rem;border:1px solid var(--line);border-radius:.5rem;background:transparent;color:var(--muted);font:inherit;font-size:1.125rem;line-height:1;cursor:pointer}
.gl-x:hover{color:var(--bad);border-color:var(--bad)}
.gl-x:focus-visible,.gl-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gl-bad{display:block;font-size:.75rem;color:var(--bad);margin-top:.125rem}
.gl-bad:empty{display:none}
input[aria-invalid=true]{border-color:var(--bad)}
.gl-ticks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;margin-top:.625rem}
.gl-ticks label{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin:0;padding:.375rem .125rem;border:1px solid var(--line);border-radius:.5rem;font-family:var(--sans);font-size:.75rem;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;text-align:center;line-height:1.2}
.gl-ticks input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}
.gl-ticks label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.gl-foot{display:flex;justify-content:space-between;gap:.5rem;margin-top:.5rem}
.gl-link{border:0;background:none;color:var(--ink-2);font:inherit;font-size:.8125rem;text-decoration:underline;padding:.25rem 0;cursor:pointer}
.gl-link.gl-del{color:var(--muted)}
.gl-add{width:100%;margin-top:.625rem}
.gl-settings{margin-top:1rem;border-top:1px solid var(--line);padding-top:.75rem}
.gl-settings summary{cursor:pointer;font-weight:700;margin-bottom:.75rem}
.gl-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem}
.gl-two .field{margin:0}
.gl-designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr));gap:.375rem}
.gl-design{display:flex;align-items:center;gap:.4rem;padding:.4375rem .5rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface-2);color:var(--ink);font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;min-width:0;text-align:left}
.gl-design:hover{border-color:var(--muted)}
.gl-design.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.gl-design:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gl-sw{flex:none;width:1.125rem;height:1.125rem;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.gl-d-holly .gl-sw{background:linear-gradient(135deg,#9e1b28 50%,#1f5b3a 50%)}
.gl-d-kraft .gl-sw{background:linear-gradient(135deg,#c9a273 55%,#5b3a1e 55%)}
.gl-d-nordic .gl-sw{background:linear-gradient(135deg,#1d3557 55%,#eef4f9 55%)}
.gl-d-candy .gl-sw{background:repeating-linear-gradient(135deg,#c1121f 0 3px,#fff 3px 6px)}
.gl-d-gold .gl-sw{background:linear-gradient(135deg,#fbf7ec 50%,#a8843a 50%)}
.gl-d-ink .gl-sw{background:#fff;border:1.5px dashed #000}
.gl-keep{margin-top:1rem;padding:.75rem;border:1px dashed var(--line-2);border-radius:.75rem;font-size:.875rem;line-height:1.5}
.gl-keep p{margin:0}
.gl-keep-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.625rem}
.gl-keep-btns .btn{flex:1 1 9rem;font-size:.875rem}
.gl-import{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.gl-import input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.gl-import:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.btn.gl-clear{color:var(--bad);border-color:var(--bad)}
.gl-keep-msg{text-align:left;color:var(--muted)}
.gl-sheet{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--line-2);display:grid;gap:.5rem}
.gl-sheet>label:not(.btn){font-weight:600;margin-top:.25rem}
.gl-sheet textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;tab-size:12}
.gl-sheet .gl-keep-btns{margin-top:0}
.gl-sheet[hidden],.gl-sheet-out:empty{display:none}
.gl-sheet-out{display:grid;gap:.375rem}
.gl-sheet-out ul{margin:0;padding-left:1.125rem}
.gl-sheet-out li{margin:.125rem 0}
.gl-sheet-out .gl-sum{font-weight:600}
.gl-sheet-out .gl-bad-rows{color:var(--bad)}
.gl-sheet-out .gl-warn{color:var(--muted)}
.gl-also{max-width:75ch;margin:1.5rem 0 0;padding:.75rem 1rem;border-left:.25rem solid var(--accent);background:var(--surface);border-radius:.5rem;font-size:.9375rem;line-height:1.5}
.gl-also p{margin:0}

@media(min-width:920px){
  .duo.gl-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:none;align-items:start}
  .duo.gl-duo>.pane-result,.duo.gl-duo>.pane-main{grid-area:auto}
  .gl-stage{position:sticky;top:1rem}
  .gl-paper{max-width:min(100%,24rem)}
}
@media(max-width:360px){.gl-two{grid-template-columns:minmax(0,1fr)}.gl-ticks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.gl-person{transition:none}}