/* Pinterest Save Button & Widget Code Generator (ROADMAP-Calcs-PinPin.md PP18) — the choices, the code, what each part does and
   the live preview frame. Nothing here draws Pinterest's badge (PP55): the preview is Pinterest's own script in a frame. */
.sb-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.sb-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 4px; }
.sb-checks label { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 16px; cursor: pointer; }
.sb-checks input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; font-size: 16px; accent-color: var(--chqt-ink, #191320); }
.sb-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.sb-error { margin: .5rem 0; padding: .6rem .7rem; border-radius: 10px; background: #fdf0ef; color: #8a1c12; font-weight: 600; }
.sb-code { margin: .6rem 0; padding: .7rem .8rem; background: #191320; color: #f6f2fa; border-radius: 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; font-size: 14px; line-height: 1.5; }
.sb-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sb-preview iframe { width: 100%; height: 360px; border: 1px solid var(--chqt-line, #ddd5e6); border-radius: 10px; background: #fff; margin-top: .6rem; }
.chqt .sb-k { margin-top: .9rem; }
.sb-notes { margin: .3rem 0 0; padding-left: 1.1rem; }
.sb-notes li { margin: .35rem 0; overflow-wrap: anywhere; }
.sb-notes code { font-weight: 700; }
.chqt .sb-src { font-size: .85rem; color: var(--chqt-muted, #4c4658); }
/* The article quotes the whole script line; on a 390 px phone it would push the page sideways (WebKit, 2026-10-02). */
.chqt-content code { overflow-wrap: anywhere; }