/* Revised size-guide page template (§221). Loaded ONLY by pages on NEW_SIZE_TEMPLATE, so the
 * size pages still on the old template stay byte-identical — the CSS in size-guides.css is
 * INLINED into every size page, so appending there would have added dead weight to all 15.
 */
/* ── §221: revised size-page template (pilot 2T) ─────────────────────────────────────── */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* count-forward grouping: the number is the point, the table is the roster */
.buckets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.bucket .cnt{font-size:26px;font-weight:700;line-height:1;margin-right:4px}
.bucket .plain{margin:6px 0 10px;color:var(--ink-2);font-size:14.5px}
.bktfilter{background:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;
  font:inherit;font-size:13px;color:var(--olive);cursor:pointer}
.bktfilter:hover{border-color:var(--olive)}
.bktfilter.on{background:var(--olive);border-color:var(--olive);color:#fff}
.bktfilter:focus-visible{outline:2px solid var(--olive);outline-offset:2px}

/* table controls */
.tctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 8px}
.tsearch input{font:inherit;font-size:14px;padding:7px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--ink);min-width:200px}
.tsearch input:focus-visible{outline:2px solid var(--olive);outline-offset:1px}
#tclear{background:none;border:0;font:inherit;font-size:13px;color:var(--olive);cursor:pointer;text-decoration:underline}
.tcount{margin:0 0 8px;font-size:13px;color:var(--muted);min-height:1.2em}
.gtoggle{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gtoggle button{background:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;
  font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.gtoggle button.on{background:var(--surface-2);border-color:var(--olive);color:var(--ink);font-weight:600}
.gtoggle button:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.gnote{font-size:12.5px;color:var(--muted)}

/* honest ranges + per-row provenance */
td.sp{white-space:normal}
.gbadge{display:inline-block;margin-left:7px;font-size:11px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px;vertical-align:1px}
.provtog{margin-left:9px;background:none;border:0;padding:0;font:inherit;font-size:12px;
  color:var(--muted);cursor:pointer;text-decoration:underline}
.provtog:hover{color:var(--olive)}
.provtog:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.prov{font-size:12.5px;color:var(--ink-2);padding:2px 0 6px;line-height:1.6;word-break:break-word}
tr.brow.hit{background:var(--typ-soft)}
tr.brow.hit td.b{font-weight:600}

/* "2T, 24 months, or size 2?" */
.nbcols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.nbcol{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px}
.nblabel{font-weight:700;font-size:17px}
.nbn{font-size:12.5px;color:var(--muted);margin-top:2px}
.nbrange{font-size:20px;font-weight:600;margin-top:8px}
.nbblurb{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.nbnote{margin-top:12px}

/* on-page finder — mirrors the brand-page component, incl. the §220 fixes */
.sfinder{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px 18px 16px}
.sfinder h2{margin-top:0}
.sfinder .frow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:10px}
.sfinder .fld{flex:1 1 118px}
.sfinder label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.sfinder .req{color:var(--long)}
.inp-affix{position:relative;display:flex;align-items:center}
.inp-affix input{width:100%;font:inherit;font-size:15px;padding:9px 38px 9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink)}
.inp-affix input:focus-visible{outline:2px solid var(--olive);outline-offset:1px}
.unit-affix{position:absolute;right:11px;font-size:12.5px;color:var(--muted);pointer-events:none}
.sfinder .fmore{font-size:12.5px;color:var(--olive);margin:11px 0 0;font-weight:600;background:none;
  border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.sfinder .fmore:hover{text-decoration:underline}
.sfinder .fmore:focus-visible{outline:2px solid var(--olive);outline-offset:2px;border-radius:3px}
/* .frow is display:flex, which beats a bare [hidden] on its own */
.sfinder .fmore-fields{margin-top:10px}
.sfinder .fmore-fields[hidden]{display:none}
.sfans{margin:12px 0 0;font-size:14.5px;color:var(--ink);min-height:1.2em}
.sfinder .fgo{margin-top:14px}

/* axis labels: keep the first/last tick from clipping at the edges */
.scale span:first-child{transform:translateX(0)}
.scale span:last-child{transform:translateX(-100%)}

@media (max-width:640px){
  .buckets,.nbcols{grid-template-columns:1fr}
  .tsearch input{min-width:0;width:100%}
  .tsearch{flex:1 1 100%}
}

/* Primary button on a LIGHT surface (§228).
 *
 * The inlined size-guides.css defines button styling only as `.cta a.btn` — scoped to the dark olive
 * banner, where white-on-olive is right. The finder CTA (#sf-go, inside .fgo) sits on a light card and
 * matched no rule at all, so it fell back to a default underlined link. The mockup had an unscoped
 * base .btn that was dropped when its CSS was ported.
 *
 * This lives here rather than in size-guides.css because .fgo only exists on new-template pages, and
 * that file is inlined into EVERY size page (§221). The cascade is unaffected either way: `.cta a.btn`
 * is (0,2,1) and still beats this (0,1,1), so the dark banner keeps its inverted treatment.
 */
a.btn{display:inline-block;background:var(--olive);color:#fff;font-weight:700;text-decoration:none;
  padding:12px 24px;border-radius:10px;line-height:1.1}
a.btn:hover{background:var(--olive-d);color:#fff}
a.btn:focus-visible{outline:2px solid var(--olive-d);outline-offset:3px}

/* §309: prev/next size navigation. Deliberately looks like navigation a parent uses — two or three
   tappable cards plus a plain list of the rest — rather than a block of links. Sizes were the thin
   end of the internal link graph: one inbound link each and nothing lateral. */
#size-nav { margin-top: 2rem; }
.sn-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; }
.sn-step {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; min-width: 9.5rem;
  border: 1px solid var(--line, #d8d6cf); border-radius: 10px;
  background: var(--surface, #fff); text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s;
}
.sn-step:hover { border-color: var(--accent-warm, #8a7c6b); transform: translateY(-1px); }
.sn-dir { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute, #8e8d86); }
.sn-lbl { font-size: 1.02rem; font-weight: 500; }
.sn-all { font-size: .92rem; color: var(--ink-soft, #6b6a64); line-height: 1.7; }
.sn-all-lbl { color: var(--ink-mute, #8e8d86); }
.sn-all a { color: var(--accent, #5a5b52); }
@media (max-width: 520px) { .sn-step { flex: 1 1 100%; min-width: 0; } }