/* Brace For It V2 · /plan. Tokens from v2.css only. The readiness level is word + mark + a bar drawn by points (the
   household's share secured, each level's mark where it falls): never colour alone, and no status colour on this page. */
.plan { padding-top: var(--s4); }
.plan .view { display: grid; gap: var(--s5); }
.plan [hidden] { display: none !important; }
.plan h2.h3, .plan h1.h3 { font-size: var(--t-h3); }
.plan-head { display: grid; gap: 4px; }
.plan-head .back { min-height: var(--tap); display: inline-flex; align-items: center; font-weight: 700; width: max-content; }
.plan-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .plan-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } .plan-side { position: sticky; top: 76px; } }
#tool { padding: var(--s4); }
/* room for the questions and the side panel before plan.js draws them (no layout jump, gate 03) */
#tool:empty, #tool:has(> noscript:only-child) { min-height: 448px; } #side:empty { min-height: 383px; }
@media (min-width: 900px) { #tool:empty, #tool:has(> noscript:only-child) { min-height: 331px; } #side:empty { min-height: 363px; } }
@media (min-width: 600px) { #tool { padding: var(--s5); } }
.plan-side { display: grid; gap: var(--s4); min-width: 0; }
/* the intro: three short steps, numbered, right under the title (intro rule, Oct 25) */
.plan-intro { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 6px; counter-reset: pi; max-width: 76ch; }
.plan-intro li { position: relative; padding: 2px 0 2px 34px; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.plan-intro li::before { counter-increment: pi; content: counter(pi); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--f-data); color: var(--on-signal); background: var(--signal); }
.plan-intro b { color: var(--ink); }
/* phones: the tool stays above the fold once the page has done its introducing */
@media (max-width: 720px) { #v-plan.pi-off .plan-intro { display: none; } #v-check .plan-intro li:nth-child(n+2) { display: none; } }
@media (min-width: 900px) { .plan-intro { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }
/* the household's ZIP */
.pzip-line { margin: 0; font-size: var(--t-sm); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; }
.pzip-line b { color: var(--ink); }
.pzip-form { display: grid; gap: 6px; max-width: 460px; margin-top: 4px; }
.pzip-form label { font-size: var(--t-sm); font-weight: 700; }
.pzip-form .row { flex-wrap: nowrap; }
.pzip-form input { flex: 1 1 auto; min-width: 0; max-width: 12ch; }
.pzip-form .err { margin: 0; font-size: var(--t-sm); color: var(--ink); border-left: 3px solid var(--ink); padding-left: 8px; font-weight: 700; }
.pzip-form .err::before { content: 'Error: '; }
.pzip-form input[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
#getout:focus:not(:focus-visible), #block:focus:not(:focus-visible) { outline: none; }
.planned { display: inline-block; margin-left: 4px; padding: 1px 5px; border: 1px dashed var(--edge); border-radius: var(--r-sm); font: 600 12px/1.4 var(--f-data); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); vertical-align: 1px; }
.q-nav .q-skip { min-width: var(--tap); padding: 0 8px; }

/* questions */
.q { display: grid; gap: var(--s3); }
.q-h { font-size: clamp(21px, 4.4vw, 26px); }
.prog { display: flex; gap: 4px; }
.prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.prog i.on { background: var(--ink-2); }
.opts { display: grid; gap: 8px; }
@media (min-width: 600px) { .opts { grid-template-columns: 1fr 1fr; } }
.choice .box { border-radius: 50%; }
.priv { font-size: var(--t-sm); color: var(--muted); border-left: 3px solid var(--edge); padding-left: 10px; margin: 0; }
.q-nav { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.q-nav [data-qnav="next"] { margin-left: auto; min-width: 140px; }
.q .small { margin: 0; }
.areas { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: 6px; }
.areas li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; font-size: var(--t-sm); }
.areas .num { color: var(--muted); }

/* people */
.pset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s3); min-width: 0; }
.pset legend { padding: 0; margin-bottom: var(--s2); }
.prow { display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.prow .field:has(select) { grid-column: 1 / -1; }
.prow .link-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 700px) { .prow { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; } .prow .field:has(select) { grid-column: auto; } .prow .link-btn { grid-column: auto; } }
.grid-2.tight { gap: var(--s3); }
.v2 textarea { resize: vertical; }
#acctstrip:empty { display: none; }
/* Home setup (owner, Nov 1): the line over the questions, and the storm line above it for a live ZIP */
.q .setup-note { margin: 0 0 var(--s3); }
.q .setup-storm { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--s3); border-left: 4px solid var(--ink); color: var(--ink); }
.q .setup-storm .ico { width: 24px; height: 24px; flex: none; }
.plan-grid:has(> #side[hidden]) { grid-template-columns: minmax(0, 1fr); }