/* ============================================================================
   Free hail alerts -- the ONE sign-up form, on every page that offers it
   (home, /hail-map, the state and county hubs, the hail-history tool,
   /tools/hail-alerts). Drawn by alert-signup.js; posts to the one endpoint,
   POST /api/alerts/subscribe.

   Night Ops, nothing new: the tokens below are the ones landing.html and
   seo.css already define (each var() carries the same fallback). Copy sits
   on the night ground; the form is the home search recipe -- s2 beds on an
   s1 slab, no outlines, signal-yellow focus, 16px inputs, bone button.
   Loaded by pages that use either landing.html's inline tokens or seo.css,
   so every rule is scoped under .as and never relies on page classes.
   ========================================================================== */

.as{container-type:inline-size;color:var(--ink1,#F0F1EB)}
.as *,.as *::before,.as *::after{box-sizing:border-box}

/* The band a hub or tool page wraps the form in: room above and below. */
.as-band{margin:72px 0}
.as-band-top{margin-top:28px}

/* ---- Panel: copy on the ground, form in a lifted slab ---- */
.as-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@container (min-width:760px){
  .as-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .as-panel > .as-slab:only-child{grid-column:1 / -1}
  /* Beside a long form (the alerts page), the list stays in view. */
  .as-copy{position:sticky;top:24px}
}
.as-title{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(32px,3.4vw,44px);line-height:.95;letter-spacing:-.01em;color:var(--ink1,#F0F1EB);text-wrap:balance}
/* On the home page it is a section title: the home page's display-2 size. */
.sec .as-title{font-size:clamp(40px,4.6vw,64px)}
.as-lede{margin:16px 0 0;max-width:46ch;font:430 18px/1.55 var(--f-ui);color:var(--ink2,#C2CCC8)}
.as-gets{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.as-gets-top{margin-top:4px}
.as-gets li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;font:430 16px/1.5 var(--f-ui);color:var(--ink2,#C2CCC8)}
.as-gets b{display:block;font-weight:650;color:var(--ink1,#F0F1EB)}
.as .i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.as-gets .i{margin-top:1px;color:var(--h200,#CA93E3)}

.as-slab{padding:28px;border-radius:var(--r-slab,20px);background:var(--s1,#152222);
  box-shadow:var(--e2,inset 0 1px 0 rgba(240,241,235,.07),0 4px 12px rgba(1,7,7,.50),0 24px 56px -12px rgba(1,7,7,.80))}
.as-form{margin:0;display:grid;gap:16px}
.as-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@container (min-width:520px){ .as-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@container (min-width:760px){ .as-slab .as-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

.as-field{display:grid;gap:6px;min-width:0}
.as-label{display:block;font:650 13px/1.3 var(--f-ui);letter-spacing:.02em;color:var(--ink3,#9DA9A7)}
.as-label span{font-weight:450}
.as-in{display:block;width:100%;min-width:0;height:52px;padding:0 14px;border:0;border-radius:var(--r-control,12px);background:var(--s2,#1E2C2C);color:var(--ink1,#F0F1EB);
  font:500 16px/1.2 var(--f-ui);caret-color:var(--signal,#FFCF00);transition:background-color var(--t-hover,140ms) var(--ease-std,ease)}
.as-in:hover{background:var(--s3,#293636)}
.as-in:focus{outline:2px solid var(--focus,#FFCF00);outline-offset:3px;background:var(--s2,#1E2C2C)}
.as-in::placeholder{color:var(--ink3,#9DA9A7);opacity:1}
.as-in[aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--critical,#FE6673)}
select.as-in{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DA9A7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px}
select.as-in option{color:var(--ink1,#F0F1EB);background:var(--s2,#1E2C2C)}
.as-hint{margin:-6px 0 0;font:450 14px/1.45 var(--f-ui);color:var(--ink3,#9DA9A7)}

/* States as a grid of ticks (the /tools/hail-alerts page only) */
.as-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:2px 8px;margin:0;padding:0;border:0;min-width:0}
.as-states legend{padding:0;margin:0 0 8px}
.as-states label{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 8px;border-radius:var(--r-bed,10px);font:450 15px/1.2 var(--f-ui);color:var(--ink1,#F0F1EB);cursor:pointer;
  transition:background-color var(--t-hover,140ms) var(--ease-std,ease)}
.as-states label:hover{background:var(--s2,#1E2C2C)}
.as input[type=checkbox]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--ink1,#F0F1EB);cursor:pointer}

/* Text alerts: tucked behind one quiet toggle */
.as-more{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink2,#C2CCC8);
  font:600 15px/1.3 var(--f-ui);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:#667170;
  transition:color var(--t-hover,140ms) var(--ease-std,ease)}
.as-more:hover{color:var(--ink1,#F0F1EB);text-decoration-color:#C2CCC8}
.as-more .i{width:18px;height:18px;transition:transform var(--t-hover,140ms) var(--ease-std,ease)}
.as-more[aria-expanded="true"] .i{transform:rotate(45deg)}
.as-sms{display:grid;gap:14px}
.as-sms[hidden]{display:none}
.as-check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font:450 14px/1.5 var(--f-ui);color:var(--ink2,#C2CCC8);cursor:pointer}
.as-check input{margin-top:2px!important}

/* Honeypot: off-screen for people, present for form-filling bots */
.as-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.as-go{width:100%;height:56px!important;font-size:16px!important;margin-top:4px}
.as-msg{margin:0;font:500 15px/1.45 var(--f-ui);color:var(--critical,#FE6673)}
.as-msg:empty{display:none}
.as-fine{margin:0;font:450 13px/1.5 var(--f-ui);color:var(--ink3,#9DA9A7)}
.as-fine a,.as-done a:not(.btn),.as-slim a:not(.btn){color:var(--ink1,#F0F1EB)}

/* ---- Thank-you: replaces the form in the same slab ---- */
.as-done{display:grid;gap:14px}
.as-done:focus{outline:none}
.as-done .as-ok{display:flex;align-items:center;gap:12px}
.as-done .as-ok .i{width:28px;height:28px;color:var(--good,#58DA98)}
.as-done h3{margin:0;font:650 24px/1.25 var(--f-ui);letter-spacing:-.005em;color:var(--ink1,#F0F1EB)}
.as-done p{margin:0;font:430 16px/1.55 var(--f-ui);color:var(--ink2,#C2CCC8)}
.as-done p b{color:var(--ink1,#F0F1EB);font-weight:650;overflow-wrap:anywhere}
.as-done ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.as-done li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;font:430 15px/1.5 var(--f-ui);color:var(--ink2,#C2CCC8)}
.as-done li .i{width:20px;height:20px;margin-top:1px;color:var(--h200,#CA93E3)}
.as-done li b{color:var(--ink1,#F0F1EB);font-weight:650}
.as-up{margin-top:10px;padding:20px;border-radius:var(--r-sheet,14px);background:var(--s2,#1E2C2C);display:grid;gap:14px}
.as-up p{color:var(--ink2,#C2CCC8)}
.as-up .btn{justify-self:start;background:var(--ink1,#F0F1EB);color:var(--ground,#091818)}
.as-up .btn:hover{background:#FFFFFF}

/* ---- Slim: one line under a lookup result ----
   Doubled class (.as .as-*) so a host page's own form rules (seo.css .tool form
   is a flex row, .tool input has a 160px floor) cannot reshape it. */
.as .as-slim{margin:20px 0 0;display:grid;gap:10px}
.as .as-in{min-width:0}
.as .as-slim-go{background:var(--s3,#293636);color:var(--ink1,#F0F1EB)}
.as .as-slim-go:hover{background:var(--s4,#344241)}
.as-slim-q{margin:0;display:flex;align-items:flex-start;gap:10px;font:450 15px/1.45 var(--f-ui);color:var(--ink2,#C2CCC8)}
.as-slim-q .i{width:20px;height:20px;margin-top:1px;color:var(--h200,#CA93E3)}
.as-slim-q b{color:var(--ink1,#F0F1EB);font-weight:650}
.as-slim-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.as-slim-row .btn{height:52px}
.as-slim .as-done{gap:8px}
.as-slim .as-done p{font-size:15px}
@container (max-width:359px){ .as-slim-row{grid-template-columns:minmax(0,1fr)} .as-slim-row .btn{width:100%} }

@media (max-width:767px){
  .as-band{margin:56px 0}
  .as-slab{padding:20px 16px}
  .as-lede{font-size:17px}
  .as-up .btn{width:100%;justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){ .as *{transition-duration:.01ms!important} }