/* =========================================================================
   BLACK ALBINISM: app.css
   "What's happening", the app home, the offline page, and the bottom tab
   bar. The tab bar only exists when the site is opened from the home
   screen (html.is-app); on the website nothing here changes the layout.
   ========================================================================= */

/* ---------------------------------------------------- What's happening */
.slide--plain{
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--slide-accent) 42%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, #241c16 0%, #0e0b09 100%);
}
.slide--plain::after{ background:none; }

.phead--plain{ min-height:auto; padding-block:clamp(5rem, 12vw, 8rem) clamp(2rem, 5vw, 3rem); }
.phead--plain::after{ background:none; }
.phead--plain .eyebrow{ color:var(--brand); }

.hlist{ display:grid; gap:var(--sp-4, 1.25rem); grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.hcard{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius:var(--r-lg, 18px); background:var(--paper);
}
.hcard__pic{ aspect-ratio:16/9; overflow:hidden; background:#241c16; }
.hcard__pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.hcard__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.35rem; }
.hcard__kind{ margin:0; font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--ink) 70%, transparent); }
.hcard__kind b{ color:var(--red, #c81422); }
.hcard--soon .hcard__kind b{ color:#9a5b00; }
.hcard--past .hcard__kind b{ color:inherit; }
.hcard h3{ margin:.1rem 0 0; font-size:var(--step-1); line-height:1.2; }
.hcard__meta{ margin:0; display:flex; flex-wrap:wrap; gap:.3rem .9rem; font-size:var(--step--1); font-weight:700; }
.hcard p{ margin:0; }
.hcard .link-arrow{ margin-top:.5rem; align-self:flex-start; }
.hpast .hcard{ opacity:.85; }

/* ---------------------------------------------------------- app home */
.apphome__head{ background:var(--ink); color:#fff; padding:1.8rem 0 1.2rem; }
.apphome__head .eyebrow{ color:var(--brand); }
.apphome__head h1{ margin:0; font-size:var(--step-3); }
.apphome__uv{ background:var(--ink); padding-bottom:1.6rem; }
.appuv{
  display:grid; gap:.25rem; padding:1.2rem 1.3rem; border-radius:var(--r-lg, 18px);
  text-decoration:none; color:#fff;
  background:linear-gradient(150deg, #0b1a24 0%, #080b12 100%);
  border:1px solid rgba(79,227,240,.35);
}
.appuv__now{ font-size:var(--step--2); letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#4FE3F0; }
.appuv__read{ display:flex; align-items:baseline; gap:.6rem; }
.appuv__read b{ font-size:clamp(2.6rem, 11vw, 3.4rem); line-height:1; }
.appuv__read i{ font-style:normal; font-weight:800; font-size:var(--step-1); }
.appuv__line{ color:rgba(255,255,255,.86); font-size:var(--step--1); }
.appuv__go{ margin-top:.4rem; font-weight:800; font-size:var(--step--2); color:#4FE3F0; }
.apphome__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.appgrid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.appgrid a{
  display:flex; align-items:center; min-height:3.6rem; padding:.8rem 1rem;
  border-radius:var(--r-md, 12px); text-decoration:none; font-weight:800; color:var(--ink);
  background:color-mix(in srgb, var(--brand) 16%, var(--paper));
}
.apphome__site{ margin-top:1.4rem; }

/* ------------------------------------------------------- offline page */
.offline{ background:var(--ink); color:#fff; min-height:100svh; display:grid; place-items:center; }
.offline__in{ max-width:34rem; padding:2rem 1.25rem; text-align:center; }
.offline__in img{ border-radius:50%; margin:0 auto 1rem; display:block; }
.offline__in a{ color:var(--brand); }

/* --------------------------------------------- tab bar (installed app) */
.apptabs{ display:none; }
html.is-app .apptabs{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  background:rgba(20,17,16,.96); border-top:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
html.is-app .apptabs a{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.2rem;
  padding:.35rem .1rem; min-height:48px; justify-content:center;
  color:rgba(255,255,255,.72); text-decoration:none; font-size:.66rem; font-weight:700; letter-spacing:.02em;
}
html.is-app .apptabs svg{ width:22px; height:22px; }
html.is-app .apptabs a[aria-current="page"]{ color:var(--brand); }
html.is-app .apptabs span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
html.is-app body{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
html.is-app .site-header{ padding-top:env(safe-area-inset-top, 0px); }

/* ------------------------------------------------ iPhone install tip */
.iostip{
  position:fixed; left:.75rem; right:.75rem; bottom:calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index:95;
  display:flex; align-items:center; gap:.75rem; padding:.8rem .9rem;
  background:#141110; color:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-size:var(--step--1); line-height:1.4;
}
.iostip img{ border-radius:50%; flex:0 0 auto; }
.iostip p{ margin:0; flex:1 1 auto; }
.iostip svg{ display:inline-block; width:1.1em; height:1.1em; vertical-align:-.15em; color:var(--brand); }
.iostip button{
  flex:0 0 auto; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer;
}
.appgrid__bell{ grid-column:1 / -1; background:var(--ink) !important; color:#fff !important; }

/* ------------------------------------------------------- notifications */
.notify__set{ border:0; padding:0; margin:0 0 1.2rem; display:grid; gap:.6rem; }
.notify__set legend{ font-weight:800; font-size:var(--step-1); margin-bottom:.6rem; }
.notify__topic{ display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 1rem; border-radius:var(--r-md, 12px);
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent); cursor:pointer; }
.notify__topic input{ width:22px; height:22px; margin-top:.15rem; accent-color:var(--brand); flex:0 0 auto; }
.notify__topic span, .notify__county span{ display:grid; gap:.1rem; }
.notify__topic small, .notify__county small{ color:color-mix(in srgb, var(--ink) 68%, transparent); font-size:var(--step--1); }
.notify__topic.is-soon{ opacity:.55; cursor:default; }
.notify__county{ display:grid; gap:.5rem; margin-bottom:1.4rem; }
.notify__county select{ min-height:48px; padding:.6rem .8rem; border-radius:var(--r-md, 12px); font:inherit;
  border:1px solid color-mix(in srgb, var(--ink) 25%, transparent); background:var(--paper); max-width:100%; }
.notify__msg{ min-height:1.5em; font-weight:700; margin-top:1rem; }
.notify__msg.is-bad{ color:var(--red, #c81422); }
.notify__privacy{ margin-top:2rem; padding-top:1.2rem; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }

/* A plain information box. (".notice" is reserved for team instructions,
   which the build removes from public pages, so it cannot be used here.) */
.infonote{
  display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.2rem; border-radius:var(--r-md, 12px);
  background:color-mix(in srgb, var(--brand) 12%, var(--paper)); font-size:var(--step--1);
}
.infonote strong{ display:block; margin-bottom:.15rem; }
.infonote[hidden]{ display:none; }
.notify [hidden]{ display:none !important; }

/* ===================================================== app home, v2
   The UVSafe reader leads, then a slim swipeable "What's happening" strip,
   then the Go to grid. The UV panel styles are copied from uvsafe.css and
   scoped here, because uvsafe.css restyles the whole page. */
.apphome__uv{
  --ink-uv:#E9EEF7; --muted-uv:#93A1BC;
  color:var(--ink-uv); padding:1.2rem 0 1.6rem;
  background:
    radial-gradient(700px 420px at 85% -10%, rgba(108,76,255,.30), transparent 62%),
    radial-gradient(600px 380px at 0% 10%, rgba(47,214,232,.16), transparent 60%),
    #080B12;
}
html.is-app .apphome__uv{ padding-top:calc(1.2rem + env(safe-area-inset-top, 0px)); }
.apphome__row--uv{ margin-bottom:.8rem; }
.apphome__row--uv h1{ margin:0; font-size:var(--step-2); color:#fff; }
.apphome__row--uv a{ color:#5CE1F0; font-weight:700; font-size:var(--step--1); text-decoration:none; white-space:nowrap; }

.apphome [data-uv-band="low"]      { --band:#2FBF71; }
.apphome [data-uv-band="moderate"] { --band:#E5B700; }
.apphome [data-uv-band="high"]     { --band:#F2761B; }
.apphome [data-uv-band="veryhigh"] { --band:#E8443A; }
.apphome [data-uv-band="extreme"]  { --band:#A65BD6; }
.apphome .uvpanel{
  background:linear-gradient(165deg, rgba(108,76,255,.20), rgba(8,11,18,.55));
  border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:1.1rem;
  box-shadow:0 40px 90px -46px rgba(47,214,232,.42);
}
.apphome .uvbar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.apphome .uvbar select{
  flex:1; min-width:150px; min-height:44px; padding:.5rem .8rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.07); color:var(--ink-uv); border:1px solid rgba(255,255,255,.18); font:inherit;
}
.apphome .uvbar select option, .apphome .uvbar select optgroup{ background:#0E1421; color:#E9EEF7; }
.apphome .uvbar__loc{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.5rem 1rem;
  border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.18); background:transparent;
  color:var(--ink-uv); font:inherit; font-size:var(--step--2); font-weight:700; white-space:nowrap; cursor:pointer;
}
.apphome .uvbar__loc:disabled{ opacity:.5; }
.apphome .uvread{ display:grid; gap:1rem; align-items:center; grid-template-columns:1fr; }
@media (min-width:560px){ .apphome .uvread{ grid-template-columns:auto 1fr; } }
.apphome .uvdial{ display:grid; place-items:center; position:relative; }
.apphome .uvdial svg{ width:min(100%,240px); height:auto; transform:rotate(-90deg); }
.apphome .uvdial__mid{ position:absolute; text-align:center; display:grid; gap:.15rem; place-items:center; max-width:56%; }
.apphome .uvdial__num{ font-family:var(--font-display, "Space Grotesk", sans-serif); font-size:var(--step-6);
  line-height:1; letter-spacing:-.05em; color:var(--band, #2FD6E8); }
.apphome .uvdial__band{ font-size:var(--step--2); letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--band, var(--muted-uv)); }
.apphome .uvdial__place{ font-size:var(--step--2); color:var(--muted-uv); letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.apphome .uvline{ font-size:var(--step-0); margin:0 0 .8rem; color:var(--ink-uv); }
.apphome .uvact{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.apphome .uvact li{ display:flex; gap:.6rem; align-items:flex-start; margin:0; font-size:var(--step--1); color:var(--ink-uv); }
.apphome .uvact__tick{ color:var(--band, #2FD6E8); font-weight:800; flex:none; line-height:1.5; }
.apphome .uvsmall{ margin:.8rem 0 0; font-size:var(--step--2); color:var(--muted-uv); }
.apphome .uvsmall--cap{ margin-top:1.1rem; color:var(--ink-uv); font-weight:700; }
.apphome .uvsmall--foot{ opacity:.85; }
.apphome [data-uv-state] [data-uv-when]{ display:none; }
.apphome [data-uv-state="ready"]   [data-uv-when="ready"],
.apphome [data-uv-state="loading"] [data-uv-when="loading"],
.apphome [data-uv-state="offline"] [data-uv-when="offline"]{ display:block; }
.apphome [data-uv-state="loading"] .uvread, .apphome [data-uv-state="offline"] .uvread{ opacity:.45; }
.apphome .uvskel{ display:block; height:.5em; width:3em; border-radius:var(--r-pill);
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.24), rgba(255,255,255,.10));
  background-size:200% 100%; animation:uvshimmer 1.4s linear infinite; }
@keyframes uvshimmer{ to{ background-position:-200% 0; } }
.apphome .uvhours{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.25rem; align-items:end; height:120px; margin-top:.7rem; }
.apphome .uvhour{ display:grid; grid-template-rows:1fr auto auto; gap:.25rem; justify-items:center; height:100%; }
.apphome .uvhour__bar{ align-self:end; width:100%; max-width:22px; border-radius:5px 5px 2px 2px; background:var(--band,#2FD6E8); min-height:5px; transition:height .6s ease-out; }
.apphome .uvhour[data-band="low"]{ --band:#2FBF71 } .apphome .uvhour[data-band="moderate"]{ --band:#E5B700 }
.apphome .uvhour[data-band="high"]{ --band:#F2761B } .apphome .uvhour[data-band="veryhigh"]{ --band:#E8443A }
.apphome .uvhour[data-band="extreme"]{ --band:#A65BD6 }
.apphome .uvhour__v{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-uv); }
.apphome .uvhour__t{ font-size:.58rem; color:var(--muted-uv); }

/* the slim strip */
.apphome__on{ padding:1.4rem 0 .6rem; }
.apphome__on h2{ margin:0; font-size:var(--step-1); }
.hstrip{
  display:flex; gap:.7rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:.8rem max(var(--gutter, 1.25rem), calc((100% - var(--wrap, 1200px)) / 2 + var(--gutter, 1.25rem))) 1rem;
  scroll-padding-inline:var(--gutter, 1.25rem); scrollbar-width:none;
}
.hstrip::-webkit-scrollbar{ display:none; }
.hchip{
  flex:0 0 min(82%, 300px); scroll-snap-align:start; display:flex; gap:.75rem; align-items:center;
  padding:.6rem .8rem .6rem .6rem; border-radius:16px; text-decoration:none; color:var(--ink);
  background:var(--paper); border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-left:4px solid var(--chip, var(--brand));
}
.hchip img, .hchip__dot{ flex:0 0 64px; width:64px; height:64px; border-radius:12px; object-fit:cover; }
.hchip__dot{ background:color-mix(in srgb, var(--chip, var(--brand)) 35%, var(--paper)); }
.hchip__txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.hchip__kind{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:color-mix(in srgb, var(--ink) 65%, transparent); }
.hchip__title{ font-weight:800; line-height:1.2; font-size:var(--step--1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hchip__meta{ font-size:.75rem; color:color-mix(in srgb, var(--ink) 72%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hchip--idea{ background:var(--ink); color:#fff; border-left-color:var(--brand); padding-left:.9rem; }
.hchip--idea .hchip__kind{ color:rgba(255,255,255,.75); }
.hchip__go{ display:flex; gap:.4rem; margin-top:.35rem; }
.hchip__go a{ padding:.3rem .8rem; min-height:36px; display:grid; place-items:center;
  border-radius:var(--r-pill); background:var(--brand); color:var(--ink); font-weight:800; font-size:.78rem; text-decoration:none; }
.hchip__go a + a{ background:rgba(255,255,255,.12); color:#fff; }

/* gauge: an open ring that runs green to red, so the tip matches the reading */
.apphome .uvdial svg{ transform:none; width:min(100%,250px); }
.apphome .uvdial__mid{ margin-top:-.4rem; }
/* picker and location button on one line on phones */
.apphome .uvbar{ flex-wrap:nowrap; }
.apphome .uvbar select{ min-width:0; flex:1 1 0; padding-inline:.8rem .5rem; }
.apphome .uvbar__loc{ padding-inline:.8rem; flex:0 0 auto; }

/* in the installed app, the footer is just the about line and social links */
html.is-app .site-footer .footer__col:not(:first-child),
html.is-app .site-footer .footer__bottom{ display:none; }
html.is-app .site-footer .footer__top{ display:block; }
.apphome__on + .section{ padding-top:.8rem; }