/* American Regulators USA Storm Tracker: location, watch, push and install additions.
   Loaded after the page's own <style>, so equal-specificity rules here win. */

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- First-visit location card and install card (between the header and the map) ---- */
.ar-card{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:.8rem 1.5rem;background:#13283c;border-bottom:1px solid #294057;color:#eef5fb}
.ar-card[hidden]{display:none}
.ar-card .ar-card-text{flex:1 1 320px;min-width:0}
.ar-card h2{margin:0 0 .15rem;font-size:1rem;letter-spacing:.02em;color:#ffcc6a}
.ar-card p{margin:0;font-size:.92rem;color:#dbe7ef;line-height:1.45}
.ar-card .ar-card-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.ar-card button{min-height:44px}
.ar-card button.link{background:transparent;border:1px solid #45637b}
.ar-card .ar-card-status{flex-basis:100%;font-size:.88rem;color:#b8cfdf;min-height:0}
.ar-card .ar-card-status:empty{display:none}
.ar-install{background:#102338}
.ar-install .ios-steps{font-size:.92rem}
.ar-install .ios-share{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em}

/* ---- Watch Location additions ---- */
.watch-detail{margin:.35rem 0 .6rem;font-size:.86rem;color:#b8cfdf}
.watch-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.watch-row[hidden]{display:none}
.watch-moved{margin:.5rem 0;padding:.6rem .7rem;border:1px solid #6c5a2a;border-radius:8px;background:#2a2412;font-size:.9rem}
.watch-moved[hidden]{display:none}
.watch-moved button{margin-top:.45rem}

/* ---- Push alerts ---- */
.push-settings .push-area{font-weight:700;color:#fff;margin:.4rem 0}
.push-types{border:1px solid #35536d;border-radius:8px;padding:.55rem .75rem .65rem;margin:.6rem 0}
.push-types legend{padding:0 .3rem;font-weight:700;font-size:.92rem}
.push-types label{display:flex;align-items:center;gap:.55rem;min-height:36px;font-size:.93rem;cursor:pointer}
.push-types input{width:20px;height:20px;accent-color:#e7a932;flex:none}
.push-types .hint{margin:.35rem 0 0;font-size:.82rem;color:#a7bacb}
.push-buttons{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.push-buttons button{min-height:44px}
.push-buttons button[hidden]{display:none}
button:disabled{opacity:.62;cursor:not-allowed}

/* ---- SKYWARN partner mark: white card like the WRN badge, with the ® NOAA asks for at its
   upper right (SKYWARN branding guidelines v5.0) ---- */
.skywarn-mark{position:relative;display:block;justify-self:center;align-self:center;background:#fff;border-radius:8px;padding:.3rem .35rem;box-shadow:0 2px 12px #0006;line-height:0}
.skywarn-mark img{display:block;height:104px;width:auto}
.skywarn-mark .reg{position:absolute;top:3px;right:4px;font:700 11px/1 Arial,sans-serif;color:#1b1b1b}
.skywarn-mark:focus-visible{outline:3px solid #ffc351;outline-offset:2px}

/* ---- Desktop header: title | WRN, AR USA logo, SKYWARN in the centre | weather on the right ---- */
@media(min-width:1181px){
  .header-brandline{grid-template-columns:minmax(290px,1fr) 155px 145px auto minmax(300px,1fr)}
  .site-header .brand-mark{justify-self:center}
  .site-header .header-weather{justify-self:end;width:100%;max-width:360px}
}
@media(min-width:801px) and (max-width:1180px){
  .header-brandline{grid-template-columns:minmax(0,1fr) 145px 135px auto;grid-template-areas:"title wrn brand sky" "weather weather weather weather"}
  .skywarn-mark{grid-area:sky}
  .skywarn-mark img{height:96px}
}

/* ---- WRN badge inside Weather Preparedness (phones and small tablets only) ---- */
.prep-wrn{display:none}

@media(max-width:800px){
  /* The header badge gives way to the logo; the badge moves into Weather Preparedness. */
  .site-header .wrn-mark,.site-header .skywarn-mark{display:none}
  .header-brandline{grid-template-areas:"title brand" "weather weather"}
  .prep-wrn{display:flex;align-items:center;gap:.75rem;margin:0 0 .9rem;padding:.6rem;border:1px solid #35536d;border-radius:10px;background:#192f43;color:#eef5fb;text-decoration:none}
  .prep-wrn img{width:90px;height:auto;flex:none;background:#fff;border-radius:7px;padding:2px}
  .prep-wrn span{font-size:.9rem;line-height:1.4}
  .prep-skywarn img{width:auto;height:64px;padding:3px}
  .prep-wrn:hover span,.prep-wrn:focus-visible span{text-decoration:underline}
  /* Preferred phone order: header, weather, emergency strip, location + radar controls, map,
     then Weather Preparedness. */
  .map-utility{order:4;padding:8px 12px}
  /* Damage Reports moved into Layers & Toggles: the three remaining map buttons share one row. */
  .bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bar>#locate{grid-column:auto;min-width:0;white-space:normal}
  .ar-card{padding:.75rem 12px}
  .ar-card .ar-card-actions{width:100%}
  .ar-card .ar-card-actions button{flex:1 1 auto}
}