/* Phase G (decision 105): the homepage "Already have a Snapshot?" box: business name + the 4-character code in four boxes.
   From the Snapshot Access preview (state 4), on top of the Homepage V2 reference styles. */
.snap-acc{max-width:1120px}
@media (min-width:761px){.snap-acc{grid-template-columns:minmax(0,.62fr) minmax(0,1.5fr)}}
/* Founder 2026-10-24: on wide screens the text column gets room for the heading on one line and an easy-to-read description. */
@media (min-width:1100px){.snap-acc{grid-template-columns:minmax(300px,.85fr) minmax(0,1.6fr)}.snap-acc .sa-t h3{white-space:nowrap}}
.snap-acc .sa-f.sa-g{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:10px;align-items:end;flex-wrap:nowrap}
.sa-g .fld label{display:block;margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c7}
.sa-g .fld input.nm{width:100%;height:52px;padding:0 15px;border-radius:12px;border:1px solid rgba(238,243,249,.18);background:rgba(7,20,36,.6);color:#EEF3F9;font:inherit;font-size:15px;flex:none;max-width:none}
.sa-g .fld input.nm:focus{outline:none;border-color:#8fb3ff}
/* The reference stylesheet already has a .code panel elsewhere on the page; inside this box the four boxes stand alone. */
.sa-g .code{display:flex;justify-content:center;gap:6px;margin:0;padding:0;border:0;border-radius:0;background:none;max-width:none}
.sa-g .code input{font-size:22px;min-height:0}
.sa-g .code input:focus{outline:none}
.sa-g .code input{flex:none;width:44px;min-width:0;max-width:none;height:52px;padding:0;border-radius:11px;border:1.5px solid rgba(238,243,249,.2);background:rgba(7,20,36,.55);color:#fff;text-align:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:22px;font-weight:700;caret-color:#8FB3FF;text-transform:uppercase;transition:border-color .15s,box-shadow .15s,transform .15s}
.sa-g .code input:focus{outline:none;border-color:#8FB3FF;box-shadow:0 0 0 4px rgba(53,115,234,.25)}
.sa-g .code input.f{border-color:rgba(143,179,255,.55)}
.sa-g .code.shake{animation:sh .32s}
@keyframes sh{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.sa-g button{height:52px}
.sa-g button[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.snap-acc .msg{color:#f3c977;font-size:14px;font-weight:600}
@media (max-width:760px){.snap-acc .sa-f.sa-g{grid-template-columns:1fr}.sa-g .code{justify-content:flex-start}.sa-g button{width:100%}}
/* P-149 follow-up (founder, 2026-11-06): on small tablets (761-899px) the name, the code and the button don't fit one row; the button
   takes its own row under them, so the page never scrolls sideways. */
@media (min-width:761px) and (max-width:899px){.snap-acc .sa-f.sa-g{grid-template-columns:minmax(0,1fr) auto}.sa-g button{grid-column:1 / -1;width:100%}}
@media (prefers-reduced-motion:reduce){.sa-g .code.shake{animation:none}}

/* P-159: 16 px so phones never zoom into the field. */
.sa-g .fld input.nm{font-size:16px}