/* ==========================================================================
   WORLD 01 — UVSAFE
   Not a page about a service. A service. Dark, instrument-like, quiet:
   the feel of an app you open on a hot morning before you leave the house.
   ========================================================================== */
:root{
  --ink:#E9EEF7;
  --paper:#080B12;
  --surface:#0E1421;
  --surface-2:#151D2E;
  --muted:#93A1BC;
  --line:rgba(147,161,188,.22);
  --brand:#2FD6E8;
  --brand-ink:#04121A;
  --accent:#5CE1F0;
  --violet:#6C4CFF;
  --amber:#FFB020;
  --danger:#FF5A5A;
  --focus:#7FD9FF;
  --foot-bg:#05070C;
  --foot-fg:#E9EEF7;

  --font-display:"Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --header-h:68px;
}
body{ background:
  radial-gradient(1100px 620px at 78% -12%, rgba(108,76,255,.30), transparent 62%),
  radial-gradient(900px 520px at 5% 8%, rgba(47,214,232,.16), transparent 60%),
  var(--paper);
  background-attachment:fixed;
}
h1,h2,h3{ letter-spacing:-.035em; font-weight:700; }
.eyebrow,.link-arrow,.card__kicker{ color:var(--brand); }
.site-header{ background:rgba(8,11,18,.72); border-bottom-color:rgba(147,161,188,.18); }
.site-header.is-stuck{ background:rgba(8,11,18,.94); }
.drawer{ background:#080B12; }
.worldbar{ background:#05070C; color:var(--ink); }
.card,.panel{ background:var(--surface); }
.btn--ghost{ --btn-fg:var(--ink); }
.btn--solid{ --btn-bg:#fff; --btn-fg:#08101A; }
.stat{ background:var(--surface); }
.imgph{ --ph-a:#6C4CFF; --ph-b:#0A1020; }

/* ------------------------------------------------------------- GLASS */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  backdrop-filter:blur(18px);
  padding:clamp(1.2rem,2.6vw,1.9rem);
}
.glass--tight{ padding:1.1rem 1.25rem; }

/* --------------------------------------------------------------- HERO */
.uvhero{
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,8vw,6rem) clamp(3rem,7vw,5.5rem);
}
.uvhero__grid{
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:960px){ .uvhero__grid{ grid-template-columns:1.05fr .95fr; } }
.uvhero h1{ font-size:var(--step-6); line-height:.98; margin-bottom:1rem; max-width:15ch; }
.uvhero h1 span{ background:linear-gradient(96deg,#2FD6E8,#6C4CFF 62%,#FFB020); -webkit-background-clip:text; background-clip:text; color:transparent; }
.aurora{
  position:absolute; inset:-30% -20% auto; height:78%; z-index:-1; filter:blur(90px); opacity:.30;
  -webkit-mask-image:radial-gradient(60% 60% at 62% 40%, #000 20%, transparent 76%);
  mask-image:radial-gradient(60% 60% at 62% 40%, #000 20%, transparent 76%);
  background:conic-gradient(from 210deg at 50% 50%, #6C4CFF, #2FD6E8, #FFB020, #6C4CFF);
  animation:spin 26s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ------------------------------------------------------------ UV DIAL */
.uvdial{ display:grid; place-items:center; position:relative; }
.uvdial svg{ width:min(100%,290px); height:auto; transform:rotate(-90deg); }
.uvdial__mid{
  position:absolute; text-align:center; display:grid; gap:.15rem; place-items:center;
  max-width:56%;
}
.uvdial__foot{ margin-top:.9rem; text-align:center; }
.uvdial__num{ font-family:var(--font-display); font-size:var(--step-6); line-height:1; letter-spacing:-.05em; }
.uvdial__lab{ font-size:var(--step--2); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700; }

/* --------------------------------------------------------- APP SHELL UI */
.appcard{
  background:linear-gradient(165deg, rgba(108,76,255,.22), rgba(8,11,18,.6));
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px; padding:1.4rem;
  box-shadow:0 40px 90px -40px rgba(47,214,232,.4);
}
.applist{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.55rem; }
.applist li{
  display:flex; align-items:center; gap:.85rem; margin:0;
  padding:.85rem 1rem; border-radius:var(--r-md);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  font-size:var(--step--1);
}
.applist .ic{
  width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:rgba(47,214,232,.16); color:var(--brand); font-size:1rem;
}
.applist .go{ margin-left:auto; opacity:.5; }

.tabbar{
  display:flex; gap:.25rem; padding:.4rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  margin-top:1.2rem;
}
.tabbar a{
  flex:1; text-align:center; padding:.6rem .4rem; border-radius:var(--r-pill);
  font-size:var(--step--2); font-weight:700; text-decoration:none; color:var(--muted);
}
.tabbar a[aria-current]{ background:var(--brand); color:var(--brand-ink); }

/* --------------------------------------------------------- STATUS / PHASE
   UVSafe is built in phases. Nothing here is described as working
   until it works. -------------------------------------------------------- */
.phase{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.phase__row{
  background:var(--surface); padding:1.1rem clamp(1rem,2.4vw,1.6rem);
  display:grid; gap:.4rem 1.2rem; align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .phase__row{ grid-template-columns:1.5fr 2.5fr auto; } }
.phase__name{ font-weight:700; font-family:var(--font-display); }
.phase__desc{ font-size:var(--step--1); color:var(--muted); margin:0; }
.status{
  display:inline-flex; align-items:center; gap:.45rem; justify-self:start;
  padding:.35rem .8rem; border-radius:var(--r-pill);
  font-size:var(--step--2); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid currentColor;
}
.status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status--p1{ color:var(--amber); }
.status--p2{ color:var(--muted); border-style:dashed; }
.status--live{ color:#3BE08D; }

/* ------------------------------------------------------------- PRODUCTS */
.brandcard{
  display:grid; gap:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.brandcard:hover{ transform:translateY(-4px); border-color:var(--brand); }
.brandcard .imgph{ border-radius:0; --ph-a:#2FD6E8; --ph-b:#0B1020; }
.brandcard__body{ padding:1.2rem 1.3rem 1.4rem; }
.brandcard__row{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; margin-bottom:.4rem; }
.spf{
  font-family:var(--font-display); font-weight:700; font-size:var(--step--1);
  color:var(--brand-ink); background:var(--brand); padding:.15rem .55rem; border-radius:var(--r-xs);
}
.origin{ font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }

/* ------------------------------------------------------------ HOSPITALS */
.filterbar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-5); }
.filterbar button{
  padding:.5rem 1rem; border-radius:var(--r-pill); border:1px solid var(--line);
  font-size:var(--step--2); font-weight:700; color:var(--muted);
}
.filterbar button[aria-pressed="true"]{ background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.facility{
  display:grid; gap:.35rem 1.2rem; align-items:center;
  padding:1.15rem clamp(1rem,2.5vw,1.5rem);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .facility{ grid-template-columns:auto 1fr auto auto; } }
.facility__pin{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:rgba(47,214,232,.14); color:var(--brand);
}
.facility h3{ font-size:var(--step-0); margin:0; }
.facility p{ margin:0; font-size:var(--step--1); color:var(--muted); }

/* ------------------------------------------------------------ RESOURCES */
.res{
  display:block; text-decoration:none; padding:1.4rem;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.res:hover{ border-color:var(--brand); transform:translateY(-3px); }
.res__type{ font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-weight:800; }
.res h3{ font-size:var(--step-1); margin:.5rem 0 .4rem; }

/* --------------------------------------------------------------- DONATE */
.tier{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem;
  background:var(--surface); display:flex; flex-direction:column; gap:.7rem;
}
.tier--feature{ border-color:var(--brand); background:linear-gradient(165deg, rgba(47,214,232,.14), rgba(8,11,18,.4)); }
.tier__amt{ font-family:var(--font-display); font-size:var(--step-3); letter-spacing:-.04em; }
.tier ul{ padding-left:1.1em; margin:0; font-size:var(--step--1); color:var(--muted); }

/* ------------------------------------------------------------- SUN CLOCK */
.sunclock{ display:grid; gap:.5rem; }
.sunclock__bar{
  height:56px; border-radius:var(--r-md); overflow:hidden; display:flex;
  border:1px solid var(--line);
}
.sunclock__seg{ flex:var(--f,1); display:grid; place-items:center; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#04121A; }
.seg--low{ background:#3BE08D; } .seg--mod{ background:#FFD84D; }
.seg--high{ background:#FF9A3D; } .seg--extreme{ background:#C81E1E; color:#fff; }
.sunclock__scale{ display:flex; justify-content:space-between; font-size:var(--step--2); color:var(--muted); }

.band-panel{ background:rgba(255,255,255,.03); border-block:1px solid var(--line); }
.site-footer{ border-top:1px solid var(--line); }
.notice{ background:rgba(47,214,232,.08); border-color:rgba(47,214,232,.35); }

/* ==========================================================================
   DASHBOARD
   UVSafe leads with a live reading, not a paragraph. This is the front of
   the service: what the sun is doing where you are, and what to do about it.
   ========================================================================== */

/* WHO bands. Purple for extreme is the WHO convention, not a design choice. */
[data-uv-band="low"]      { --band:#2FBF71; --band-ink:#04140C; }
[data-uv-band="moderate"] { --band:#E5B700; --band-ink:#1A1400; }
[data-uv-band="high"]     { --band:#F2761B; --band-ink:#1A0C00; }
[data-uv-band="veryhigh"] { --band:#E8443A; --band-ink:#FFFFFF; }
[data-uv-band="extreme"]  { --band:#A65BD6; --band-ink:#FFFFFF; }

.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:28px; padding:clamp(1.2rem,2.6vw,1.8rem);
  box-shadow:0 40px 90px -46px rgba(47,214,232,.42);
}

.uvbar{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin-bottom:1.2rem;
}
.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);
  border:1px solid rgba(255,255,255,.18);
}
.uvbar select option,
.uvbar select optgroup{ background:#0E1421; color:#E9EEF7; }
.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); font-size:var(--step--2);
  font-weight:700; white-space:nowrap;
}
.uvbar__loc:hover{ background:rgba(255,255,255,.09); }
.uvbar__loc:disabled{ opacity:.5; }

.uvread{ display:grid; gap:1.2rem; align-items:center; grid-template-columns:1fr; }
@media (min-width:560px){ .uvread{ grid-template-columns:auto 1fr; } }

.uvdial__num[data-uv-value]{
  font-family:var(--font-display); font-size:var(--step-6); line-height:1;
  letter-spacing:-.05em; color:var(--band, var(--brand));
}
.uvdial__band{
  font-size:var(--step--2); letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--band, var(--muted));
}
.uvdial__place{ font-size:var(--step--2); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.uvdial__updated{ font-size:var(--step--2); color:var(--muted); }

.uvline{ font-size:var(--step-0); margin:0 0 .9rem; }
.uvact{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.uvact li{
  display:flex; gap:.6rem; align-items:flex-start; margin:0;
  font-size:var(--step--1); color:var(--ink);
}
.uvact__tick{
  color:var(--band, var(--brand)); font-weight:800; flex:none; line-height:1.5;
}

/* State machine: loading / ready / offline. Never invents a reading. */
[data-uv-state] [data-uv-when="ready"],
[data-uv-state] [data-uv-when="loading"],
[data-uv-state] [data-uv-when="offline"]{ display:none; }
[data-uv-state="ready"]   [data-uv-when="ready"]{ display:block; }
[data-uv-state="loading"] [data-uv-when="loading"]{ display:block; }
[data-uv-state="offline"] [data-uv-when="offline"]{ display:block; }
[data-uv-state="loading"] .uvread,
[data-uv-state="offline"] .uvread{ opacity:.45; }

.uvskel{
  display:block; height:.5em; width:4em; 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:shimmer 1.4s linear infinite;
}
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* ------------------------------------------------------------ HOURLY STRIP */
.uvhours{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:.3rem; align-items:end; height:140px; margin-top:1.2rem;
}
.uvhour{
  display:grid; grid-template-rows:1fr auto auto; gap:.3rem;
  justify-items:center; height:100%;
}
.uvhour__bar{
  align-self:end;
  width:100%; max-width:26px; border-radius:5px 5px 2px 2px;
  background:var(--band,#2FD6E8); min-height:5px;
  transition:height .6s var(--ease-out-expo);
}
.uvhour[data-band="low"]{ --band:#2FBF71 } .uvhour[data-band="moderate"]{ --band:#E5B700 }
.uvhour[data-band="high"]{ --band:#F2761B } .uvhour[data-band="veryhigh"]{ --band:#E8443A }
.uvhour[data-band="extreme"]{ --band:#A65BD6 }
.uvhour__v{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink); }
.uvhour__t{ font-size:.6rem; color:var(--muted); }

/* ---------------------------------------------------------- QUICK ACTIONS */
.qa{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.qa__item{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.1rem; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
  text-decoration:none; color:var(--ink);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.qa__item:hover{ border-color:var(--brand); transform:translateY(-3px); }
.qa__ic{
  width:40px; height:40px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:rgba(47,214,232,.14); color:var(--brand); font-size:1.1rem;
}
.qa__item b{ display:block; font-size:var(--step-0); }
.qa__item span{ display:block; font-size:var(--step--2); color:var(--muted); }

/* ------------------------------------------------------------------ USSD */
.ussd{
  display:grid; gap:1.4rem; align-items:center; grid-template-columns:1fr;
  background:linear-gradient(150deg, rgba(255,176,32,.14), rgba(8,11,18,.4));
  border:1px solid rgba(255,176,32,.35); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);
}
@media (min-width:820px){ .ussd{ grid-template-columns:auto 1fr; } }
.ussd__code{
  font-family:var(--font-display); font-size:var(--step-5); letter-spacing:-.02em;
  color:var(--amber); line-height:1; white-space:nowrap;
}
.ussd__menu{ list-style:none; padding:0; margin:.8rem 0 0; display:grid; gap:.4rem; }
.ussd__menu li{
  margin:0; font-size:var(--step--1); display:flex; gap:.6rem;
  font-family:var(--font-mono);
}
.ussd__menu b{ color:var(--amber); }

/* ------------------------------------------------------------- BOOK FORM */
.bookgrid{ display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr; }
@media (min-width:900px){ .bookgrid{ grid-template-columns:1fr 1.1fr; } }
.typegrid{ display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.typecard{
  position:relative; border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:.9rem 1rem; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.typecard input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.typecard b{ display:block; font-size:var(--step--1); }
.typecard span{ display:block; font-size:var(--step--2); color:var(--muted); margin-top:.15rem; }
.typecard:has(input:checked){ border-color:var(--brand); background:rgba(47,214,232,.10); }
.typecard:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:2px; }

.steps-3{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; counter-reset:s3; }
@media (min-width:760px){ .steps-3{ grid-template-columns:repeat(3,1fr); } }
.steps-3 > div{ background:var(--surface); padding:1.2rem; counter-increment:s3; }
.steps-3 > div::before{
  content:"0" counter(s3); font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.16em; color:var(--brand); display:block; margin-bottom:.6rem; font-weight:600;
}
.steps-3 h3{ font-size:var(--step-0); margin-bottom:.3rem; }
.steps-3 p{ font-size:var(--step--1); color:var(--muted); margin:0; }

/* ------------------------------------------------------------- COMMUNITY */
.wa{
  display:grid; gap:1.2rem; align-items:center; grid-template-columns:1fr;
  background:linear-gradient(150deg, rgba(37,211,102,.14), rgba(8,11,18,.4));
  border:1px solid rgba(37,211,102,.35); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);
}
@media (min-width:760px){ .wa{ grid-template-columns:1fr auto; } }
.btn--wa{ --btn-bg:#25D366; --btn-fg:#04140C; }

.hours{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
}
.hours__row{
  background:var(--surface); padding:.8rem 1.1rem;
  display:flex; justify-content:space-between; gap:1rem; font-size:var(--step--1);
}
.hours__row b{ font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------- DONATE / MPESA */
.kitgrid{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.kit{
  position:relative; border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:1.1rem; cursor:pointer; display:grid; gap:.3rem;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.kit input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.kit b{ font-size:var(--step-0); }
.kit span{ font-size:var(--step--2); color:var(--muted); }
.kit .price{ font-family:var(--font-display); font-size:var(--step-1); color:var(--brand); }
.kit:has(input:checked){ border-color:var(--brand); background:rgba(47,214,232,.10); }
.kit:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:2px; }

.mpesa{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--step--2); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#3BE08D; border:1px solid rgba(59,224,141,.45); background:rgba(59,224,141,.10);
  padding:.35rem .8rem; border-radius:var(--r-pill);
}

/* --------------------------------------------------- FILTERABLE DIRECTORY */
.facility[hidden]{ display:none; }
.filterbar button[aria-pressed="true"]{ background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.dirmeta{ font-size:var(--step--1); color:var(--muted); margin:0 0 var(--sp-4); }
.dirempty{
  padding:2rem; text-align:center; border:1.5px dashed var(--line);
  border-radius:var(--r-md); color:var(--muted);
}