/* 'Check your city or ZIP' (site/assets/search.js). Phone first, flat, the Hurricane Ready tokens of web/site.css.
   Base input styles sit in :where() so the landing page's own #q rules win. */
:where(#lookup) :where(input[type=search]){display:block;width:100%;height:52px;margin:0;padding:0 16px;border:1px solid var(--line-2,rgba(143,180,255,.26));border-radius:var(--r,10px);background:var(--panel,#060e20);color:var(--fg,#fff);font:500 17px/1.2 var(--f-body,'Barlow',sans-serif);-webkit-appearance:none;appearance:none}
:where(#lookup) :where(input[type=search]):focus{outline:none;border-color:var(--accent,#9fbcff)}

.lk-field{position:relative}
#lookup-suggest{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px 0;list-style:none;max-height:min(62vh,372px);overflow-y:auto;overscroll-behavior:contain;background:var(--panel-2,#0a1730);border:1px solid var(--line-2,rgba(143,180,255,.26));border-radius:var(--r,10px);box-shadow:0 14px 28px rgba(0,0,0,.42)}
#lookup-suggest:empty{display:none}
#lookup-suggest [role=option]{display:flex;align-items:baseline;gap:10px;min-height:52px;padding:15px 16px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#lookup-suggest [role=option] + [role=option]{border-top:1px solid var(--line,rgba(143,180,255,.13))}
#lookup-suggest b{flex:none;max-width:68%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 17.5px/1.2 var(--f-body,'Barlow',sans-serif);color:var(--fg,#fff)}
#lookup-suggest span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 15.5px/1.2 var(--f-body,'Barlow',sans-serif);color:var(--muted,#97a8ca)}
#lookup-suggest [aria-selected=true]{background:rgba(143,180,255,.12)}
@media (hover:hover){#lookup-suggest [role=option]:hover{background:rgba(143,180,255,.12)}}
#lookup-suggest [aria-selected=true] b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#lookup-suggest .lk-msg{padding:14px 16px;font:500 15.5px/1.4 var(--f-body,'Barlow',sans-serif);color:var(--muted,#97a8ca)}
#lookup-suggest [role=option] + .lk-msg{border-top:1px solid var(--line,rgba(143,180,255,.13))}

/* 'Use my location': the page ships it hidden with its space kept (nothing moves when search.js shows it). Phones: a square
   icon button beside the input, so the storms come up a row sooner; desktop: a text button under the input. */
.lk-geo{display:inline-flex;align-items:center;gap:8px;height:44px;margin:4px 0 0;padding:0 2px;font:600 14.5px/1 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2,#d5e0fb);background:none;border:0;cursor:pointer}
.lk-geo[hidden]{display:inline-flex;visibility:hidden}
.lk-geo svg{flex:none;width:18px;height:18px;color:var(--accent,#9fbcff)}
@media (hover:hover){.lk-geo:hover span{text-decoration:underline;text-underline-offset:4px}}
@media (max-width:899.98px){
  .lk-geo{position:absolute;top:0;right:0;justify-content:center;width:52px;height:52px;margin:0;padding:0;border:1px solid var(--line-2,rgba(143,180,255,.26));border-radius:var(--r,10px);background:var(--panel,#060e20)}
  .lk-geo svg{width:22px;height:22px}
  .lk-geo span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .lk-geo:focus-visible{outline:none;border-color:var(--accent,#9fbcff)}
  @media (hover:hover){.lk-geo:hover{border-color:var(--accent,#9fbcff)}}
  .lk-geo-on .lk-field{margin-right:60px}
  .lk-geo-on #lookup-suggest{right:-60px}
}

/* results */
#lookup-out{margin-top:10px}
#lookup-out:empty{display:none}
.lk-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:6px 0 12px;border-bottom:1px solid var(--line-2,rgba(143,180,255,.26))}
.lk-eyebrow{margin:0;font:600 12.5px/1.2 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#97a8ca)}
.lk-place{margin:4px 0 0;font:800 27px/1 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.01em;text-transform:uppercase;color:var(--fg,#fff);overflow-wrap:anywhere}
.lk-place span{margin-left:4px;color:var(--muted,#97a8ca);letter-spacing:.04em}
.lk-change{flex:none;height:40px;padding:0 2px;font:700 14px/1 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--fg,#fff);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--dim,#66779b)}
@media (hover:hover){.lk-change:hover{text-decoration-color:currentColor}}
/* a saved place with nothing near it, restored on a later visit: one line */
.lk-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.lk-mini p{min-width:0;margin:0;font:500 15.5px/1.3 var(--f-body,'Barlow',sans-serif);color:var(--fg-2,#d5e0fb)}
.lk-mini b{margin-right:6px;font:700 17px/1 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.04em;text-transform:uppercase;color:var(--fg,#fff)}
.lk-mini .lk-wait{margin:0;font-size:inherit}
.lk-wait{margin:14px 0 4px;font-size:16px;color:var(--muted,#97a8ca);animation:lk-pulse 1.2s ease-in-out infinite alternate}
@keyframes lk-pulse{from{opacity:.45}to{opacity:1}}
.lk-none{margin:14px 0 0;font:500 18px/1.45 var(--f-body,'Barlow',sans-serif);color:var(--fg,#fff);text-wrap:pretty}
.lk-list{list-style:none;margin:0;padding:0}
.lk-res{padding:16px 0 14px;border-bottom:1px solid var(--line,rgba(143,180,255,.13))}
.lk-head{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.lk-sym{position:relative;display:block;width:40px;height:40px}
.lk-sym i{position:absolute;left:3.53%;top:5.18%;width:94.12%;height:94.12%;background:var(--c);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.lk-sym .ts{-webkit-mask-image:url(../img/sym/ts.png);mask-image:url(../img/sym/ts.png)}
.lk-sym .hu{-webkit-mask-image:url(../img/sym/hu.png);mask-image:url(../img/sym/hu.png)}
.lk-sym.sh{transform:scaleX(-1)}
.lk-sym svg{display:block;width:100%;height:100%}
.lk-name h3{margin:0;font:800 24px/1 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.02em;text-transform:uppercase;color:var(--fg,#fff);overflow-wrap:anywhere}
.lk-name p{margin:4px 0 0;font:600 13px/1.2 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#97a8ca)}
.lk-dist{margin:0;text-align:right;font:700 32px/.9 var(--f-display,'Barlow Condensed',sans-serif);color:var(--fg,#fff);white-space:nowrap}
.lk-dist small{margin-left:2px;font-size:15px;letter-spacing:.04em;color:var(--muted,#97a8ca)}
.lk-dist span{display:block;margin-top:5px;font:600 11px/1 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--dim,#66779b)}
.lk-line{margin:12px 0 0;font-size:16.5px;line-height:1.5;color:var(--fg-2,#d5e0fb);text-wrap:pretty}
.lk-ai{margin:6px 0 0;font-size:15.5px;line-height:1.45;color:var(--muted,#97a8ca)}
.lk-ai b{font-weight:700;color:var(--ai,#57c8ff)}
.lk-cone{margin:10px 0 0;font:700 15.5px/1.2 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--fg,#fff)}
.lk-meta{margin:10px 0 0;font:600 12px/1.3 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--dim,#66779b)}
.lk-links{display:flex;flex-wrap:wrap;gap:0 24px;margin:4px 0 0}
.lk-links a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font:700 14px/1 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--fg,#fff);text-decoration:none}
.lk-links a svg{width:14px;height:14px}
@media (hover:hover){.lk-links a:hover{text-decoration:underline;text-underline-offset:4px}}
.lk-note{margin:14px 0 0;font-size:15px;line-height:1.45;color:var(--muted,#97a8ca)}
.lk-advice{margin:14px 0 0;font-size:15px;line-height:1.45;color:var(--fg-2,#d5e0fb)}
.lk-retry{display:inline-flex;align-items:center;height:44px;margin-top:12px;padding:0 16px;border:1px solid var(--line-2,rgba(143,180,255,.26));border-radius:8px;font:700 14px/1 var(--f-display,'Barlow Condensed',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--fg,#fff);background:none;cursor:pointer}
@media (min-width:900px){
  .lk-place{font-size:30px}
  .lk-name h3{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.lk-wait{animation:none}}
/* desktop landing intro (web/site.css puts #lookup in a column spanning the title rows): while results show, the extra
   height goes to an empty last row instead of pulling the title, time stamp and summary apart */
@media (min-width:900px){
  .lk-host-on{grid-template-rows:auto auto auto 1fr}
  .lk-host-on > #lookup.lk-on{grid-row:1 / span 4;align-self:start}
}