/* /granny-square-planner/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts); the only
   colours not from the tokens are the visitor's own yarn colours, set on the swatches and the blanket. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.gs-head .sub{margin-bottom:0.75rem}
@media(max-width:519px){.gs-head h1{margin-bottom:0.25rem}.gs-head .sub{font-size:0.9375rem;line-height:1.4}}
@media(min-width:920px){.gs-duo{grid-template-columns:minmax(0,1.15fr) minmax(22rem,.85fr)}}
.duo>.pane-result.gs-result{position:static}
.gs-result{display:grid;gap:1rem;align-content:start}
.gs-plan{padding:0.75rem}
@media(min-width:520px){.gs-plan{padding:1.25rem}}
.gs-shared{margin:0 0 1rem;padding:0.75rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);font-size:0.9375rem}

.gs-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:1.375rem 0 0.5rem}
.gs-card .gs-sec{margin-top:0}
.gs-k{display:block;font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-in{display:block;min-width:0}
.gs-in input,.gs-in select{width:100%;min-height:2.5rem;padding:0.4375rem 0.5rem;font-variant-numeric:tabular-nums}
.gs-in input{font-family:var(--mono);font-size:0.875rem}
.gs-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;margin-bottom:0.5rem}
@media(min-width:600px){.gs-set{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gs-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:flex-end;margin:0.5rem 0}
.gs-small{height:2.375rem;font-size:0.875rem;padding:0 0.875rem}
.gs-full{width:100%}
.gs-mini{margin:0}
.gs-mini button{padding:0.375rem 0.5rem;font-size:0.8125rem}
.gs-check{display:flex;gap:0.5rem;align-items:center;font-size:0.9375rem;margin:0.25rem 0}

.gs-bar{display:grid;grid-template-columns:4.75rem 4.75rem minmax(0,1fr);gap:0.5rem;align-items:end}
.gs-shuffle{width:100%}
.gs-stage{margin-top:0.625rem;display:flex;justify-content:center;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:0.5rem;padding:0.5rem;min-height:12rem}
.gs-blanket{display:inline-block;max-width:100%}
.gs-bd{padding:var(--gs-bw,4px);border-radius:2px}
.gs-grid{display:grid;gap:var(--gs-gap,2px);padding:var(--gs-gap,2px)}
.gs-sq{position:relative;display:block;width:var(--gs-cell,40px);height:var(--gs-cell,40px);padding:0;margin:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation}
.gs-sq svg{display:block;width:100%;height:100%}
.gs-sq:focus-visible{outline:2px solid var(--accent);outline-offset:1px;z-index:2}
.gs-sq .gs-l{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-weight:700;font-size:max(9px,calc(var(--gs-cell,40px) * .28));line-height:1;padding:1px 3px;border-radius:3px;background:var(--surface);color:var(--ink);pointer-events:none}
.gs-sq.sel{outline:3px solid var(--accent);outline-offset:-1px;z-index:2}
.gs-sq.clash{outline:2px dashed var(--signal);outline-offset:-2px}
.gs-sq .gs-lock,.gs-sq .gs-made{position:absolute;font-size:max(9px,calc(var(--gs-cell,40px) * .26));line-height:1;padding:1px 2px;border-radius:3px;background:var(--ink);color:var(--bg);pointer-events:none}
.gs-sq .gs-lock{left:1px;top:1px}
.gs-sq .gs-made{right:1px;bottom:1px}
.gs-sq.is-made svg{opacity:.45}
.gs-sq.slide{transition:transform .38s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.gs-sq.slide{transition:none}}
.gs-under{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem;gap:0.5rem;align-items:end;margin-top:0.625rem}
.gs-tap{margin:0}
.gs-lnote{min-height:1.2em;margin:0.5rem 0 0.25rem;color:var(--ink)}
.gs-lnote.bad{color:var(--signal-ink,var(--ink));border-left:3px solid var(--signal);padding-left:0.5rem}

.gs-palette{display:grid;gap:0.375rem}
.gs-pc{display:grid;grid-template-columns:2.5rem minmax(0,1fr) 2.375rem;gap:0.375rem;align-items:center}
.gs-pc input[type=color]{width:2.5rem;height:2.375rem;padding:0.125rem;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface)}
.gs-pc input[type=text]{min-height:2.375rem;padding:0.375rem 0.5rem;width:100%}
.gs-x{height:2.375rem;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface);color:var(--muted);cursor:pointer;font:inherit}
.gs-x:hover{color:var(--ink);border-color:var(--ink)}
.gs-x:disabled{opacity:.4;cursor:default}

.gs-cwmode{margin:0.625rem 0 0.5rem}
.gs-cwlist{list-style:none;margin:0.25rem 0;padding:0;display:grid;gap:0.375rem}
.gs-cw{display:grid;grid-template-columns:1.75rem 2.25rem minmax(0,1fr) auto;gap:0.5rem;align-items:center;padding:0.375rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface)}
.gs-cw b{font-family:var(--mono);font-size:1rem;text-align:center}
.gs-cw svg{width:2.25rem;height:2.25rem;display:block}
.gs-cw .gs-names{font-size:0.875rem;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.gs-cw .gs-n{font-family:var(--mono);font-size:0.8125rem;color:var(--muted);white-space:nowrap}
.gs-cw .gs-sels{display:flex;flex-wrap:wrap;gap:0.25rem}
.gs-cw .gs-sels select{flex:1 1 calc(50% - 0.25rem);min-width:0;min-height:2.125rem;padding:0.25rem;font-size:0.8125rem}
@media(min-width:600px){.gs-cw .gs-sels select{flex:0 1 8.5rem}}
.gs-border{list-style:none;margin:0.25rem 0;padding-left:0;display:grid;gap:0.375rem}
.gs-border li{display:flex;gap:0.375rem;align-items:center}
.gs-border .gs-bn{margin:0;width:4.5rem;flex:none}
.gs-border select{min-height:2.375rem;padding:0.375rem;flex:1;max-width:14rem}

.gs-summary{font-size:1.0625rem;line-height:1.5;margin:0 0 0.5rem}
.gs-summary b{font-variant-numeric:tabular-nums}
.gs-counts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem}
.gs-counts li{font-family:var(--mono);font-size:0.8125rem;padding:0.25rem 0.5rem;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface-2)}
.gs-yarn{display:grid;gap:0.375rem;margin:0.5rem 0}
.gs-yc{display:grid;grid-template-columns:1rem minmax(0,1fr);gap:0.5rem;align-items:start;font-size:0.9375rem;line-height:1.45}
.gs-yc .gs-dot{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--line-2);margin-top:0.2rem}
.gs-yc .gs-yn{font-weight:650;overflow-wrap:anywhere}
.gs-yc .gs-ym{font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2)}
.gs-rounds{margin:0.5rem 0;padding-left:0;list-style:none;display:grid;gap:0.375rem}
.gs-rounds li{font-size:0.875rem;line-height:1.5;padding-left:0.625rem;border-left:4px solid var(--rc,var(--line-2))}
.gs-cwpick{max-width:12rem}
.gs-meas>.gs-in:first-child{grid-column:span 2}
.gs-meas .modes{flex-wrap:nowrap}
.gs-track{font-size:0.9375rem;margin:0 0 0.25rem}
.gs-actions{align-items:flex-end}
.gs-paper{width:6.5rem}
.gs-share{width:100%;margin-top:0.5rem;font-family:var(--mono);font-size:0.75rem;min-height:2.25rem;padding:0.375rem}
.gs-steps li,.gs-formulas li,.gs-cannot li{margin-bottom:0.5rem}