/* Grid Builder (printables/grid-builder). Builds on style.css tokens and the pr-* printable layout. */
/* Tool layout: wider page and slimmer gutters than the rest of the site, preview takes all space left of a fixed-width settings column */
.gg-page { padding-top: 20px; gap: 18px; }
.gg-layout { grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 460px); gap: 14px; }
.gg-layout .pr-preview { top: 84px; padding: 14px; gap: 10px; min-width: 0; }
.gg-layout .pr-info { padding: clamp(20px, 2vw, 30px); gap: 18px; }
.gg-layout .pr-info h1 { font-size: clamp(22px, 2vw, 28px); }
.gg-layout .pr-lead { font-size: 14px !important; }

/* The stage fills the viewport height; the sheet fits inside it in both directions (container units) */
.gg-stage { container-type: size; height: calc(100svh - 334px); min-height: 360px; min-width: 0; padding: clamp(10px, 1.6vw, 24px); }
.gg-sheet { --ar: 0.773; width: min(100cqw, 100cqh * var(--ar)); aspect-ratio: var(--ar); margin: auto; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.14); }
.gg-sheet svg { display: block; width: 100%; height: 100%; }
.gg-stage.is-actual { overflow: auto; place-items: start; }
.gg-stage.is-actual .gg-sheet { width: var(--w); max-width: none; }
.gg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.gg-caption { margin: 0; font-size: 12.5px; color: var(--graphite); }
.gg-bar .gg-chip { flex: none; }

.gg-form { display: grid; gap: 20px; }
.gg-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.gg-label { display: block; padding: 0; margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.gg-group { display: grid; gap: 12px; padding-top: 18px !important; border-top: 1px solid var(--rule) !important; }
.gg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.gg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-chip { font: inherit; font-size: 12.5px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.gg-chip:hover { border-color: var(--ink); background: var(--sheet); }

/* Grid type picker sits on top of the preview card: choose the grid first, then fine-tune it in the panel */
.gg-layout .gg-types { margin: 0; padding: 0; border: 0; min-width: 0; }
.gg-layout .gg-types .gg-label { margin-bottom: 8px; font-size: 14px; }
.gg-cats { display: flex; gap: 22px; margin: 0 0 10px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.gg-cats button { appearance: none; background: none; border: 0; padding: 2px 0 9px; margin-bottom: -1px; font: inherit; font-size: 14px; font-weight: 500; color: var(--graphite); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; }
.gg-cats button:hover { color: var(--ink); }
.gg-cats button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--amber); }
.gg-cats button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.gg-layout .gg-types label > span { padding: 8px 4px 6px; gap: 4px; }
.gg-layout .gg-types svg { width: 22px; height: 22px; }
.gg-type-list { display: grid; grid-template-columns: repeat(10, minmax(0, 92px)); gap: 8px; }
.gg-types label { position: relative; cursor: pointer; }
.gg-types input, .gg-swatches input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.gg-types label > span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border: 1.5px solid var(--rule); border-radius: 8px; font-size: 12.5px; font-weight: 500; text-align: center; transition: border-color .2s, background .2s; }
.gg-types svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
.gg-types svg .d { stroke-width: 2.6; }
.gg-types svg .g { stroke-dasharray: 1.6 1.4; }
.gg-types svg .b { stroke-width: 2.4; stroke-linejoin: round; }
.gg-tip { margin: 8px 0 0; font-size: 12.5px; color: var(--graphite); }
.gg-types label:hover > span { border-color: var(--graphite); }
.gg-types input:checked + span { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 -3px 0 var(--amber); }
.gg-types input:focus-visible + span, .gg-swatches input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }

.gg-field { display: grid; gap: 5px; font-size: 13px; color: var(--graphite); }
.gg-field > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.gg-field output { color: var(--ink); font-weight: 500; }
.gg-field select, .gg-field input[type=number] { width: 100%; min-height: 38px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 14px; }
.gg-field select:hover, .gg-field input[type=number]:hover { border-color: var(--graphite); }
.gg-num { position: relative; display: block; }
.gg-num input { padding-right: 46px !important; }
.gg-num [data-unit] { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--graphite); pointer-events: none; }
.gg-field input[type=range] { width: 100%; accent-color: var(--ink); }
.gg-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.gg-check input { width: 16px; height: 16px; accent-color: var(--ink); }

.gg-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gg-swatches label { position: relative; cursor: pointer; }
.gg-swatches label > span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.gg-swatches input:checked + span { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--ink); }
.gg-custom { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: conic-gradient(#f5a54a, #e9e36c, #9dbf9d, #a4c8f0, #b49be0, #f5a54a); }
.gg-custom input { width: 44px; height: 44px; border: 0; padding: 0; opacity: 0; cursor: pointer; }
.gg-custom.is-active { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--ink); }

.gg-modes { display: grid; grid-template-columns: repeat(2, 1fr); padding: 4px !important; background: var(--paper); border-radius: 999px !important; }
.gg-modes label { position: relative; cursor: pointer; }
.gg-modes input { position: absolute; opacity: 0; pointer-events: none; }
.gg-modes span { display: block; padding: 8px 4px; white-space: nowrap; border-radius: 999px; text-align: center; font-size: 13px; font-weight: 500; transition: background .2s, box-shadow .2s; }
.gg-modes input:checked + span { background: var(--sheet); box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; }
.gg-modes input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 1px; }
.gg-info { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 4px 0 0; padding: 12px 14px; background: var(--paper); border-radius: 8px; font-size: 12.5px; }
.gg-info dt { color: var(--graphite); }
.gg-info dd { margin: 0; }
.gg-info dd.is-warn { color: #a35a00; }
.gg-bar { flex-wrap: wrap; }
.gg-bar .gg-caption { flex: 1 1 200px; }
.pr-dl .btn { font-family: inherit; cursor: pointer; }
.pr-dl .btn:disabled { opacity: .5; cursor: progress; }

@media (max-width: 1100px) {
  .gg-layout { grid-template-columns: 1fr; }
  .gg-layout .pr-preview { position: static; }
  .gg-stage { height: min(78svh, 900px); }
}
@media (max-width: 1400px) {
  .gg-type-list { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gg-type-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .gg-cats { gap: 14px; }
  .gg-cats button { font-size: 13px; }
  .gg-types label > span { font-size: 11px; padding: 8px 2px 6px; }
}