/* box.css — page layer for /gift-box-template/. The shell (header, controls, buttons, explainer,
   footer) is /assets/polyatic.css; this adds the cutting-mat stage with the printed sheet and the
   folded box on it, the style and design pickers and the size row.
   The sheet is the printed object, so it keeps its own colours in both themes. */
@font-face{font-family:"GBT Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/classic.woff2) format("woff2")}
@font-face{font-family:"GBT Script";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/handwritten.woff2) format("woff2")}

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

/* ---------- the stage ---------- */
.duo.gb-duo>.pane-result{position:static}
.gb-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:.75rem .875rem 1rem;box-shadow:var(--shadow);min-width:0}
.gb-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}
.gb-view{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.75rem;align-items:center}
.gb-paper{line-height:0;display:flex;justify-content:center}
.gb-paper canvas{display:block;width:100%;max-width:26rem;height:auto;border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 40px -16px rgba(0,0,0,.6)}
.gb-iso{margin:0;display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:0}
.gb-iso-svg{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.gb-iso-svg svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.gb-iso figcaption{font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mat-muted)}
.gb-pages{max-width:14rem;margin:.625rem auto 0;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.gb-pages button{color:var(--mat-muted)}
.gb-pages button.active{background:var(--mat-ink);color:var(--mat)}
.gb-pages[hidden]{display:none}
.gb-summary{margin:.5rem 0;text-align:center;font-size:.875rem;color:var(--mat-ink)}
.gb-fit{margin:.5rem auto .75rem;max-width:30rem;padding:.625rem .75rem;border-radius:.625rem;background:rgba(255,236,190,.14);border:1px solid rgba(255,220,150,.45);font-size:.875rem;line-height:1.45}
.gb-fit p{margin:0 0 .5rem}
.gb-fit .btn{width:100%}
.gb-fit[hidden],.gb-fit [hidden]{display:none}
.gb-dl{display:flex;flex-wrap:wrap;gap:.5rem;max-width:30rem;margin:0 auto}
.gb-dl .btn{flex:1 1 9rem}
.gb-dl .btn:disabled{opacity:.55;cursor:not-allowed}
.gb-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.gb-msg{margin:.5rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.gb-msg:empty{display:none}

/* ---------- the form ---------- */
.gb-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.gb-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.gb-styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem}
.gb-styles button{display:flex;flex-direction:column;gap:.125rem;align-items:flex-start;text-align:left;padding:.5rem .5625rem;border:1px solid var(--line);border-radius:.5rem;
  background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.gb-styles b{font-size:.875rem}
.gb-styles span{font-size:.6875rem;color:var(--muted);line-height:1.3}
.gb-styles button:hover,.gb-decor:hover{border-color:var(--muted)}
.gb-styles button.active,.gb-decor.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.gb-styles button:focus-visible,.gb-decor:focus-visible,.gb-linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field .head .gb-unit{margin:0 0 0 auto;padding:.1875rem;width:9rem}
.gb-unit button{padding:.25rem .375rem;font-size:.8125rem}
.gb-dims{display:flex;flex-wrap:wrap;align-items:end;gap:.375rem}
.gb-dims label{display:flex;flex-direction:column;gap:.25rem;font-family:var(--mono);font-size:.75rem;color:var(--muted);flex:1 1 4.5rem;max-width:7rem}
.gb-dims input{width:100%}
.gb-dims>span{padding-bottom:.6rem;color:var(--muted)}
#lidField .gb-dims input{max-width:7rem}
.gb-u{font-family:var(--mono);font-size:.8125rem}
.gb-form input[type=number]{min-width:0}
#inT{max-width:8rem}
.gb-decors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.375rem}
.gb-decor{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;padding:.25rem;border:1px solid var(--line);border-radius:.5rem;
  background:var(--surface-2);color:var(--ink);font:inherit;font-size:.6875rem;font-weight:600;line-height:1.15;cursor:pointer;min-width:0}
.gb-decor canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.gb-decor span{text-align:center}
.gb-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.9375rem;font-weight:600;line-height:1.4;cursor:pointer}
.gb-check input{margin-top:.2rem;flex:none;width:1.05rem;height:1.05rem;accent-color:var(--accent)}
.gb-labelf{margin-top:.5rem}
.gb-labelf[hidden]{display:none}
.gb-in{display:flex;flex-direction:column;gap:.25rem;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.gb-linkbtn{border:0;background:none;padding:0;margin-left:auto;font:inherit;font-size:.8125rem;color:var(--accent);text-decoration:underline;cursor:pointer}
.gb-linkbtn[hidden]{display:none}
#lidField[hidden]{display:none}

@media(min-width:920px){
  .duo.gb-duo{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:none}
  .duo.gb-duo>.pane-result,.duo.gb-duo>.pane-main{grid-area:auto}
  .gb-stage{position:sticky;top:1rem}
}
@media(max-width:600px){.gb-decors{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:400px){.gb-decors{grid-template-columns:repeat(3,minmax(0,1fr))}.gb-styles span{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.gb-svgopt{max-width:30rem;margin:.625rem auto 0;font-size:.8125rem;font-weight:500;color:var(--mat-muted)}
.gb-svgopt input{accent-color:var(--mat-ink)}
.gb-mat{color:var(--mat-ink)}
.gb-mat.gb-mat-warn{font-weight:600}
.gb-dl #svgBtn{flex-basis:100%}

/* ---------- Christmas Eve box ---------- */
.gb-stage [hidden],.gb-form [hidden]{display:none!important}
.gb-eve-link{display:inline-block;margin-top:.25rem;font-weight:600;color:var(--accent);text-underline-offset:.2em}
.gb-eve-out{max-width:26rem;margin:0 auto .625rem;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.gb-eve-out button{color:var(--mat-muted);font-size:.8125rem;padding-left:.25rem;padding-right:.25rem}
.gb-eve-out button.active{background:var(--mat-ink);color:var(--mat)}
.gb-eve-view{display:flex;justify-content:center;line-height:0}
.gb-eve-view canvas{display:block;width:100%;max-width:30rem;height:auto;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 40px -16px rgba(0,0,0,.6)}
.gb-eve-view.gb-eve-tall canvas{max-width:15rem}
.gb-eve-view.gb-eve-round canvas{max-width:16rem;border-radius:50%}
.gb-eve-name{max-width:30rem;margin:.75rem auto .25rem;display:flex;flex-direction:column;gap:.25rem}
.gb-eve-name label{font-family:var(--mono);font-size:.75rem;color:var(--mat-muted)}
.gb-eve-name input{width:100%;font-size:1rem}
.gb-eve-note{margin:0;font-size:.8125rem;color:var(--mat-ink)}
.gb-eve-note:empty{display:none}
.gb-eve-fields{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}
.gb-eve-fields .field{margin:0}
.gb-eve-size button{font-size:.8125rem;padding-left:.25rem;padding-right:.25rem}
.gb-eve-designs{grid-template-columns:repeat(4,minmax(0,1fr))}
.gb-eve-card{margin:0;padding:.75rem;border:1px solid var(--line);border-radius:.625rem;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.gb-eve-card legend{padding:0 .375rem;font-weight:600;font-size:.9375rem}
.gb-eve-card textarea{min-height:4.5rem;font-family:var(--sans);font-size:.9375rem}
.gb-eve-card .gb-hint{margin:0}
.gb-eve-sugg{display:flex;flex-wrap:wrap;gap:.375rem}
.gb-chip{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:.3125rem .625rem;font:inherit;font-size:.8125rem;line-height:1.25;cursor:pointer;text-align:left}
.gb-chip:hover{border-color:var(--muted)}
.gb-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gb-eve-lines{margin:0;padding-left:1.5rem;display:grid;gap:.375rem;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.gb-eve-lines input{font-family:var(--sans);font-size:.9375rem;padding:.5rem .625rem}
.gb-eve-sign{display:flex;flex-direction:column;gap:.375rem}
.gb-eve-sign .gb-check{font-weight:500}
@media(max-width:400px){.gb-eve-designs{grid-template-columns:repeat(3,minmax(0,1fr))}}