/* =====================================================================
   OSC ADDRESS AUTOCOMPLETE — styles
   ---------------------------------------------------------------------
   THIS IS THE ONE COPY. These rules used to be pasted into six different
   pages. Change them here and every page changes with them.

   Its partner is js/osc-address.js. A page needs only these two lines:

     <link rel="stylesheet" href="css/osc-address.css">
     <script defer src="js/osc-address.js"></script>

   and then any input carrying data-osc-address (street) or data-osc-city
   picks up suggestions automatically.
   ===================================================================== */

.osc-ac-wrap{position:relative}
.osc-ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:90;
  background:#fff;border:1.5px solid var(--line,#e5e1d6);border-radius:10px;
  box-shadow:0 10px 30px rgba(15,27,45,.16);overflow:hidden;max-height:260px;overflow-y:auto}
.osc-ac-list[hidden]{display:none}
/* TAP TARGET (2026-08-23). A suggestion with a second line measured 57px tall, but
   the city field's suggestions carry no second line and measured exactly 40px --
   under the 44px floor, on a dropdown a 65+ visitor is picking from with a thumb,
   for the one field the guaranteed price rests on. min-height, not more padding,
   so the two-line rows are unchanged. */
.osc-ac-item{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:11px 14px;min-height:44px;font-family:var(--font-body,"Inter",sans-serif);font-size:.92rem;color:var(--ink,#0f1b2d);
  border-bottom:1px solid var(--line,#e5e1d6)}
/* The list is overflow:hidden, so an outward focus ring would be clipped off the
   row it belongs to. Drawn inside instead, and gold rather than steel because the
   highlighted row is filled solid steel and a steel-on-steel ring is no ring. */
.osc-ac-item:focus-visible{outline:3px solid var(--steel,#2c4a75);outline-offset:-3px}
.osc-ac-item:last-child{border-bottom:0}
/* The highlight has to be VISIBLE, and this rule is the whole of it.
   A tinted row against a white list can measure barely over 1:1, which
   means nothing on screen changes as the visitor arrows through - on the
   one field the guaranteed price rests on (quote.html Step 3, "Project
   address"), where they need to know which address Enter will pick.
   Solid --steel FILLS the row instead of tinting it, which clears WCAG's
   3:1 non-text-contrast minimum against the white list by a wide margin
   (and the white label text on it clears 4.5:1 for normal text). A left
   border is layered on top so the highlight is never color-only -- it
   survives grayscale, and anyone who cannot tell steel-blue from white.
   Deliberately identical for :hover and [aria-selected="true"]: a mouse
   user and a keyboard user should see the same thing highlighted the
   same way.
   THE OTHER HALF lives in js/osc-address.js: the input carries
   role=combobox/aria-expanded/aria-controls, the list is role=listbox
   with stable option ids, and aria-activedescendant on the input tracks
   the highlighted option as ArrowDown/ArrowUp move the selection -- so a
   screen-reader user hears the same row a sighted user sees. */
.osc-ac-item:hover,.osc-ac-item[aria-selected="true"]{
  background:var(--steel,#2c4a75);color:#fff;
  border-left:4px solid var(--gold,#e3b422);padding-left:10px}
/* .875rem (14px), not .78rem (12.48px): this line is the town and ZIP that tell
   the visitor which of two similar streets they are about to pick. */
.osc-ac-item .osc-ac-sub{display:block;font-size:.875rem;color:var(--muted,#566079);margin-top:1px}
.osc-ac-item:hover .osc-ac-sub,.osc-ac-item[aria-selected="true"] .osc-ac-sub{color:var(--steel-soft,#edf2f9)}
/* .875rem (14px), not .74rem (11.84px) - the smallest text anywhere in this
   file, sitting under a list of addresses. */
.osc-ac-note{padding:8px 14px;font-size:.875rem;color:var(--muted,#566079);background:#fcfbf8}
.osc-ac-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
/* .875rem (14px), not .76rem (12.16px): this is the confirmation that the
   address was recognized, and it is the only thing that says so. */
.osc-ac-ok{display:block;font-size:.875rem;color:#2e7d46;font-weight:600;margin-top:5px}
.osc-ac-ok[hidden]{display:none}