/* gh.css — page layer for /gingerbread-house-template/. The shell (header, controls, buttons,
   explainer, footer) is /assets/polyatic.css; this adds the cutting-mat stage with the printed
   sheet and the built house on it, the size pickers, the tray helper and the assembly sheet.
   The sheet is the printed object and the house is gingerbread, so both keep their own
   colours in both themes. */
.gh-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.gh-head h1{margin-bottom:.25rem}
.gh-head .sub{margin-bottom:.875rem}

/* ---------- the stage ---------- */
.duo.gh-duo>.pane-result{position:static}
.gh-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}
.gh-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}
.gh-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.75rem;align-items:center}
.gh-paper{line-height:0;display:flex;justify-content:center}
.gh-paper canvas{display:block;width:100%;max-width:24rem;height:auto;border-radius:2px;background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 40px -16px rgba(0,0,0,.6)}
.gh-house{margin:0;display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:0}
.gh-house-svg{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.gh-house-svg svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.gh-house-svg svg *{vector-effect:non-scaling-stroke}
.gh-house figcaption{font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mat-muted)}
.gh-wall{fill:#c98a4b;stroke:#6e3d17;stroke-width:1.2}
.gh-wall-side{fill:#a86c34;stroke:#6e3d17;stroke-width:1.2}
.gh-roof{fill:#8a4f22;stroke:#5a2f10;stroke-width:1.2}
.gh-roof-back{fill:#9c5c2a;stroke:#5a2f10;stroke-width:1.2}
.gh-door{fill:#5a2f10;stroke:#fff7ea;stroke-width:1.5}
.gh-window{fill:#ffd57a;stroke:#fff7ea;stroke-width:1.5}
.gh-chim{fill:#b5783c;stroke:#5a2f10;stroke-width:1.2}
.gh-chim-side{fill:#94592a;stroke:#5a2f10;stroke-width:1.2}
.gh-chim-top{fill:#fff7ea;stroke:#5a2f10;stroke-width:1}
.gh-icing{stroke:#fff7ea;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.1 6;fill:none}
.gh-icing-thin{stroke:#fff7ea;stroke-width:1.4}
.gh-dim text{fill:var(--mat-ink);font-family:var(--mono)}
.gh-pager{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:.625rem 0 0;font-family:var(--mono);font-size:.8125rem;color:var(--mat-muted)}
.gh-pg{width:2.5rem;height:2.25rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--mat-ink);font:inherit;font-size:1rem;cursor:pointer}
.gh-pg:disabled{opacity:.35;cursor:default}
.gh-pg:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.gh-summary{margin:.5rem 0;text-align:center;font-size:.875rem;color:var(--mat-ink)}
.gh-err{margin:.5rem auto;max-width:30rem;padding:.5rem .75rem;border-radius:.625rem;background:rgba(255,236,190,.14);border:1px solid rgba(255,220,150,.45);font-size:.875rem}
.gh-err[hidden]{display:none}
.gh-dl{display:flex;flex-wrap:wrap;gap:.5rem;max-width:30rem;margin:0 auto}
.gh-dl .btn{flex:1 1 9rem}
.gh-dl .btn:disabled{opacity:.55;cursor:not-allowed}
.gh-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.gh-print{max-width:30rem;margin:.5rem auto 0;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--mat-ink)}
.gh-msg{margin:.5rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.gh-msg:empty{display:none}

/* ---------- the form ---------- */
.gh-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.gh-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.gh-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem}
.gh-presets button{display:flex;flex-direction:column;gap:.125rem;align-items:flex-start;text-align:left;padding:.5rem .5rem;border:1px solid var(--line);border-radius:.5rem;
  background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.gh-presets b{font-size:.875rem}
.gh-presets span{font-size:.6875rem;color:var(--muted);line-height:1.3}
.gh-presets button:hover{border-color:var(--muted)}
.gh-presets button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.gh-presets button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field .head .gh-unit{margin:0 0 0 auto;padding:.1875rem;width:9rem}
.gh-unit button{padding:.25rem .375rem;font-size:.8125rem}
.gh-dims{display:flex;flex-wrap:wrap;align-items:end;gap:.375rem}
.gh-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}
.gh-dims input{width:100%}
.gh-dims>span{padding-bottom:.6rem;color:var(--muted)}
.gh-u{font-family:var(--mono);font-size:.8125rem}
.gh-form input[type=number]{min-width:0}
.gh-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .75rem}
.gh-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.9375rem;font-weight:600;line-height:1.4;cursor:pointer}
.gh-check input{margin-top:.2rem;flex:none;width:1.05rem;height:1.05rem;accent-color:var(--accent)}
.gh-ov{font-weight:400;color:var(--muted);font-size:.8125rem}
.gh-tray{margin:0;padding:.75rem;border:1px solid var(--line);border-radius:.625rem;min-width:0}
.gh-tray legend{padding:0 .375rem;font-weight:600;font-size:.9375rem}
.gh-trayout{margin:.5rem 0 0;font-weight:600;font-size:.9375rem}
.gh-trayout:empty{display:none}

/* ---------- below the tool ---------- */
.gh-note{max-width:46rem;margin:1.25rem auto 0;padding:.75rem 1rem;border-left:.25rem solid var(--accent);background:var(--surface);border-radius:.5rem;font-size:.9375rem;line-height:1.5}
.gh-note:empty{display:none}
.gh-asm{margin-top:1.25rem}
.gh-asm h2{margin:0 0 .25rem;font-size:1.1875rem}
.gh-asm ol{margin:.75rem 0 0;padding-left:1.375rem;display:grid;gap:.5rem;line-height:1.5;max-width:75ch}
.gh-tablewrap{overflow-x:auto;margin:.75rem 0}
.gh-table{border-collapse:collapse;font-size:.875rem;min-width:32rem}
.gh-table th,.gh-table td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.gh-table thead th{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--muted)}

@media(min-width:920px){
  .duo.gh-duo{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:none}
  .duo.gh-duo>.pane-result,.duo.gh-duo>.pane-main{grid-area:auto}
  .gh-stage{position:sticky;top:1rem}
}
@media(max-width:400px){.gh-presets span{display:none}}