/* Brace For It V2 · /flood (wave V2-B). "Am I at risk?" (address on five maps, one verdict first), then "Am I covered?"
   (the 30-day wait, cover options, policy gaps). Tokens from v2.css only. Map answers are word + shape + text, never colour
   alone, and no status colour appears here: nothing on this page is a status. */
.fl { display: grid; gap: var(--s5); padding-top: var(--s4); }
.fl > * { min-width: 0; }
.fl [hidden] { display: none !important; }
.fl-head { display: grid; gap: 2px; }
.fl-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fl-steps a { min-height: var(--tap); display: inline-flex; align-items: center; font: 700 15px var(--f-display); }
.fl-steps .data { color: var(--muted); margin-right: 6px; }

.fl-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .fl-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .fl-side { position: sticky; top: 76px; } }
.fl-side { display: grid; gap: var(--s4); min-width: 0; }
.fl .panel.hero { padding: var(--s4); display: grid; gap: var(--s4); }
@media (min-width: 600px) { .fl .panel.hero { padding: var(--s5); } }
.fl h2 { font-size: var(--t-h3); }
.fl-sec { display: grid; gap: var(--s4); }
.fl-sec > .lead { margin: 0; font-size: var(--t-md); }
.fl p { margin: 0; }
.fl-k { font: 700 var(--t-sm)/1.4 var(--f-display); color: var(--muted); }

/* address form */
.fl-form { display: grid; gap: var(--s2); }
.fl-form label { font-weight: 700; }
.fl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.fl-row .btn { min-height: 48px; min-width: 96px; }
.fl-form .link-btn { justify-self: start; }
.fl-row2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s3); }
.priv { font-size: var(--t-sm); color: var(--muted); }
.fl-out { font-size: var(--t-sm); color: var(--ink-2); }
.fl-out:empty { display: none; }
.fl-out[data-err] { color: var(--ink); border-left: 3px solid var(--ink); padding-left: 10px; }

/* the answer: one big card, then a pill per map (word + shape, never colour alone) */
.fl-verdict { border: 1.5px solid var(--edge); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 6px; background: var(--panel-2); }
.fl-verdict .vw { font: 700 clamp(21px, 5vw, 26px)/1.2 var(--f-display); display: flex; gap: 10px; align-items: baseline; }
.fl-verdict .vw .g { font-size: .85em; flex: none; }
.fl-verdict p { color: var(--ink-2); font-size: var(--t-sm); }
.fl-verdict[data-tone="none"] .vw { color: var(--ink-2); }
.fl-verdict[data-tone="flag"] { border-color: var(--ink); border-width: 2px; border-left-width: 6px; }
.fl-verdict[data-tone="moderate"] { border-color: var(--ink-2); border-left-width: 4px; }
.pills { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pills li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; font: 700 13px/1 var(--f-display); color: var(--muted); }
.pills i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--edge); font: 700 12px/1 var(--f-display); font-style: normal; color: var(--muted); }
.pills li[data-v] { color: var(--ink); border-color: var(--edge); }
.pills li[data-v="flag"] i { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pills li[data-v="moderate"] i { border-color: var(--ink); color: var(--ink); }
.pills li[data-v="clear"] i { border-color: var(--ink-2); color: var(--ink-2); }

/* map rows */
.maps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.map { display: grid; gap: 6px; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.map-h { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; justify-content: space-between; }
.map-h a { font: 700 var(--t-md)/1.3 var(--f-display); min-height: 32px; display: inline-flex; align-items: center; }
.map-what, .map-res { font-size: var(--t-sm); color: var(--ink-2); }
.badge { font: 700 var(--t-sm)/1.3 var(--f-display); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px 10px; }
.badge[data-v="flag"], .badge[data-v="moderate"], .badge[data-v="clear"] { color: var(--ink); border-color: var(--edge); background: var(--panel-2); }
.setown > summary { min-height: var(--tap); display: inline-flex; align-items: center; cursor: pointer; font-size: var(--t-sm); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.setown[open] > summary { margin-bottom: 6px; }
.map-res b { color: var(--ink); }
.opts3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 600px) { .opts3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.opt { min-height: var(--tap); padding: 8px 10px; border: 1.5px solid var(--edge); border-radius: var(--r-md); background: transparent; color: var(--ink); font: 400 15px/1.25 var(--f-text); text-align: left; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.opt::before { content: ""; width: 16px; height: 16px; flex: none; border: 2px solid var(--edge); border-radius: 50%; }
.opt[aria-pressed="true"] { border-color: var(--ink); background: var(--panel-2); font-weight: 700; }
.opt[aria-pressed="true"]::before { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4px, transparent 5px); }
.hand, .maps-d { border-top: 1px solid var(--line); }   /* cycle 5: the map cards fold too */
.hand > summary, .maps-d > summary { min-height: var(--tap); display: flex; align-items: center; gap: 10px; padding: var(--s3) 0; cursor: pointer; font: 700 var(--t-md) var(--f-display); list-style: none; }
.hand > summary::-webkit-details-marker, .maps-d > summary::-webkit-details-marker { display: none; }
.hand > summary::before, .maps-d > summary::before { content: "+"; font: 700 18px/1 var(--f-data); width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--edge); border-radius: var(--r-sm); flex: none; }
.hand[open] > summary::before, .maps-d[open] > summary::before { content: "−"; }
.hand > summary .data { margin-left: auto; font-size: var(--t-sm); color: var(--muted); font-weight: 500; }
.fl-tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* step 2: the coverage clock */
.seg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seg .fl-k { margin-right: 4px; }
.seg button { min-height: var(--tap); padding: 0 14px; border: 1.5px solid var(--edge); border-radius: var(--r-md); background: transparent; color: var(--ink); font: 700 15px var(--f-display); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* the calendar strip (cycle 2): wait hatched, cover solid, the NFIP date a dashed line, the wet months a band, months below */
.tlfig { margin: 0; display: grid; gap: 8px; }
.tl { position: relative; height: 96px; margin: 0 2px; }
.tl .bar { position: absolute; top: 22px; left: 0; right: 0; height: 34px; border-radius: 4px; background: var(--line); }
.tl .wait, .tl .cover { position: absolute; top: 22px; height: 34px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.tl .wait span, .tl .cover span { padding: 0 8px; font: 700 13px/1 var(--f-display); }
.tl .wait { background: repeating-linear-gradient(135deg, var(--panel-2) 0 5px, var(--edge) 5px 8px); border: 1.5px solid var(--ink-2); border-radius: 4px 0 0 4px; color: var(--ink); }
.tl .wait span { background: var(--panel-2); border-radius: 3px; margin-left: 4px; padding: 3px 6px; }
.tl .cover { background: var(--ink-2); border-radius: 0 4px 4px 0; color: var(--bg); }
.tl .cover.iffy { background: none; border: 2px dashed var(--ink-2); color: var(--ink-2); }   /* cycle 5: past the NFIP date, cover only if Congress extends it */
.tl .mk.limit { position: absolute; top: 0; height: 62px; width: 0; border-left: 2px dashed var(--ink); }
.tl .mk.limit b { position: absolute; top: 0; left: 4px; font: 700 12px/16px var(--f-data); color: var(--ink); white-space: nowrap; }
.tl .peak { position: absolute; top: 60px; height: 14px; border: 1.5px dashed var(--m-water-hi); border-radius: 3px; background: color-mix(in srgb, var(--m-water) 35%, transparent);
  font: 700 10px/11px var(--f-display); color: var(--ink); padding: 0 4px; white-space: nowrap; overflow: hidden; }
.tl .ticks { position: absolute; top: 78px; left: 0; right: 0; height: 18px; }
.tl .ticks span { position: absolute; top: 0; padding-left: 4px; border-left: 1px solid var(--edge); font: 500 12px/18px var(--f-data); color: var(--muted); }
@media (max-width: 599px) { .fl #cover-v:not([hidden]) { min-height: 0; } }
.buy-r { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; }
.buy-r .fl-k { font-size: var(--t-md); }
.buy-r output { font: 700 var(--t-lg)/1.2 var(--f-display); }
.buy-r input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: var(--tap); accent-color: var(--ink); margin: 0; }
.buy-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--muted); margin-top: -6px; }
.fl .note { font-size: var(--t-sm); color: var(--muted); }

/* cover options: two stacked cards */
.cmp { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cmp-c { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); background: var(--panel-2); }
.cmp-c h4 { margin: 0 0 6px; font: 700 var(--t-md)/1.3 var(--f-display); }
.cmp-c dl { margin: 0; display: grid; gap: 2px; font-size: var(--t-sm); }
.cmp-c dt { color: var(--muted); margin-top: 6px; }
.cmp-c dd { margin: 0; color: var(--ink); }

/* policy gap check */
.gq { display: grid; gap: 8px; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.gq .qt { font-weight: 700; }
.gq .opts3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gq .opt { justify-content: center; text-align: center; }
.gq .opt::before { display: none; }
.gq .gap { font-size: var(--t-sm); color: var(--ink-2); border-left: 3px solid var(--ink); padding-left: 10px; display: grid; gap: 2px; }
.gq .gap .ask { color: var(--ink); }

.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { min-height: var(--tap); display: flex; align-items: center; padding: 10px 0; cursor: pointer; font-weight: 700; }
.faq details p { padding: 0 0 var(--s3); color: var(--ink-2); font-size: var(--t-sm); }


/* local maps + sources */
.leveefig { width: 100%; height: auto; display: block; max-width: 560px; }
.leveefig text { font: 500 11px var(--f-data); fill: var(--ink-2); }
.leveefig .lv-river { fill: var(--m-water); fill-opacity: .6; }
.leveefig .lv-ground { fill: var(--panel-2); stroke: var(--edge); }
.leveefig .lv-high { stroke: var(--ink); stroke-width: 2; }
.leveefig .lv-spill { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; }
.leveefig .lv-homes path { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.links a { min-height: var(--tap); display: inline-flex; align-items: center; }

@media print {
  .fl-form, .fl-tools, .nextstep, .buy-r { display: none !important; }
  .hand > summary::before { display: none; }
}

/* tools revamp (Oct 28): the one date that matters beside the wet months, and the call-your-agent action */
.buy-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--edge); border-radius: var(--r-md); background: var(--panel-2); }
.buy-strip .bs-a, .buy-strip .bs-b { font: 700 clamp(18px, 4.4vw, 24px)/1.2 var(--f-display); }
.buy-strip .bs-arrow { font: 700 22px/1 var(--f-data); color: var(--ink-2); }
.buy-strip .bs-w { width: 100%; font: 700 var(--t-sm)/1.4 var(--f-display); color: var(--ink-2); }
.fl #cover-v .vw { font-size: var(--t-md); line-height: 1.35; }
.agent { display: grid; gap: var(--s3); }
.agent .small { margin: 0; }
.aq { margin: 0; padding-left: 24px; display: grid; gap: 8px; font-size: var(--t-md); }
.fl-head .t-intro { margin-top: var(--s2); }
.fl .more-b > section { gap: var(--s3); }
.fl .more .gq:first-of-type { border-top: 0; }

/* cycle 3 (Oct 28): the location button sits inside the address box; "Checked <address>" and the two-map note sit in the
   result card; the 30-day wait label moves above the bar when the block is too narrow; the why meter sits in the clock. */
.fl-in { position: relative; min-width: 0; }
.fl .fl-in input { width: 100%; padding-right: 52px; }
.fl-geo { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: var(--tap); height: var(--tap); display: grid; place-items: center;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-2); cursor: pointer; }
.fl-geo svg { width: 22px; height: 22px; }
.fl-geo:hover, .fl-geo:focus-visible { color: var(--ink); }
.fl-geo:disabled { opacity: .5; }
.fl-form .priv { margin-top: -2px; }
.fl-chk { font: 500 var(--t-xs)/1.4 var(--f-text); color: var(--muted); }
.fl-verdict .fl-note { font-size: var(--t-sm); color: var(--ink); border-left: 3px solid var(--ink-2); padding-left: 10px; }
.tl:has(.wait-k) { height: 112px; }
.tl:has(.wait-k) .bar, .tl:has(.wait-k) .wait, .tl:has(.wait-k) .cover { top: 38px; }
.tl:has(.wait-k) .mk.limit { height: 78px; }
.tl:has(.wait-k) .peak { top: 76px; }
.tl:has(.wait-k) .ticks { top: 94px; }
.tl .wait-k { position: absolute; top: 18px; z-index: 3; padding: 0 4px; margin-left: -4px; background: var(--panel); font: 700 12px/16px var(--f-display); color: var(--ink); white-space: nowrap; }
#clock .fm { margin: 0; }
#clock .fm[data-ok="false"] .fm-say { color: var(--ink); }

/* address suggestions (Oct 29; addr.mjs): the list opens in the flow right under the address row, so nothing covers it and
   the phone keyboard can't hide it (addr.mjs scrolls it into the visible area); each row is a 44 px+ target. */
.ac { margin-top: calc(var(--s1) * -1); border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--panel-2); overflow: hidden; }
.ac[hidden] { display: none; }
.ac-list { list-style: none; margin: 0; padding: var(--s1) 0; }
.ac-o { display: grid; gap: 0; min-height: var(--tap); padding: 7px var(--s3); align-content: center; cursor: pointer; border-left: 3px solid transparent; }
.ac-o + .ac-o { border-top: 1px solid var(--line); }
.ac-m { font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.ac-r { font-size: var(--t-sm); line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.ac-o:hover, .ac-o[aria-selected="true"] { background: var(--panel); border-left-color: var(--signal); }
.ac-by { margin: 0; padding: 0 var(--s3); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--muted); text-align: right; }
.ac-by:empty { display: none; }
.ac-by a { color: inherit; display: inline-flex; align-items: center; min-height: var(--tap); }
@media print { .ac { display: none !important; } }
/* the plan's flood-cover step (flow-tools, Oct 29): the same row the other tools use (tool.css .planbox/.kp) */
.planbox { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s4); }
.planbox ul { list-style: none; margin: 0; padding: 0; }
.kp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: var(--tap); padding: 6px 0; }
.kp-t { font-weight: 700; }
.kp.done .kp-t { color: var(--ink-2); font-weight: 400; }