:root{
  --ink:#06131d;
  --navy:#062944;
  --deep:#031a2b;
  --midnight:#020b12;
  --ocean:#006997;
  --wave:#0284b8;
  --cyan:#37c4ec;
  --foam:#f4fbff;
  --mist:#d8f3fb;
  --line:rgba(64,196,236,.22);
  --card:rgba(248,252,255,.93);
  --card-strong:#ffffff;
  --muted:#587181;
  --good:#37c4ec;
  --warn:#f6c65b;
  --bad:#f28b82;
  --shadow:0 24px 70px rgba(0,38,63,.24);
  --glow:0 0 34px rgba(55,196,236,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  line-height:1.5;
  background:#fff;
  min-height:100vh;
}
body:before,body:after{display:none}
main,.top{max-width:1180px;margin:0 auto;padding:1rem;position:relative;z-index:1}
.top{display:flex;gap:1rem;justify-content:space-between;align-items:center}
.surf-hero{
  margin-top:1rem;
  border:1px solid rgba(6,41,68,.10);
  border-radius:24px;
  color:var(--ink);
  background:#fff;
  box-shadow:0 10px 34px rgba(6,41,68,.08);
  position:relative;
  overflow:hidden;
  min-height:178px;
}
.surf-hero:before,.surf-hero:after{display:none}
.surf-hero.compact{min-height:132px;padding:.75rem 1rem}
.brand-lockup,.header-actions{position:relative;z-index:2}
.brand-lockup{display:flex;align-items:center;gap:1rem}
.site-logo{
  width:250px;max-width:42vw;height:auto;
  border-radius:18px;
  background:#fff;
  padding:.35rem;
  box-shadow:0 16px 38px rgba(0,0,0,.36),0 0 28px rgba(55,196,236,.24);
}
.compact .site-logo{width:210px}
h1,h2,h3{line-height:1.08;margin:.2rem 0 .55rem;color:inherit}
h1{font-size:clamp(2rem,5vw,4.4rem);letter-spacing:-.06em;text-shadow:0 2px 18px rgba(0,0,0,.38)}
h2{font-size:clamp(1.55rem,3vw,2.55rem);color:var(--navy)}
h3{font-size:1.28rem;color:var(--navy)}
.surf-hero h1{color:#f7fdff}.tagline{margin:.15rem 0;color:inherit;opacity:.92}.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--ocean);font-weight:950;font-size:.78rem;margin:0 0 .25rem}
.login{max-width:34rem;margin:7vh auto;padding:1.8rem;text-align:center}
.login-logo{display:block;width:min(430px,92%);margin:0 auto 1rem;border-radius:18px;box-shadow:0 18px 42px rgba(0,38,63,.18)}
.form-stack{display:grid;gap:.8rem;text-align:left}
label{display:grid;gap:.25rem;margin:.3rem 0;font-weight:850;color:var(--navy)}
input,select{font:inherit;border:1px solid rgba(6,41,68,.18);border-radius:14px;padding:.78rem .85rem;background:#fff;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
input:focus,select:focus,button:focus,a:focus{outline:3px solid rgba(55,196,236,.55);outline-offset:2px}
button,.button-link{font:inherit;font-weight:950;border:0;border-radius:999px;padding:.78rem 1rem;cursor:pointer;color:white;background:linear-gradient(135deg,var(--navy),var(--wave));box-shadow:0 12px 28px rgba(0,105,151,.26);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
button:hover,.button-link:hover{filter:brightness(1.08);transform:translateY(-1px)}
a{color:#005f91;font-weight:850}.error{background:#fff0f0;color:#9f1239;border:1px solid #fecdd3;padding:.7rem;border-radius:14px}
.shell-card,.intro-panel,.card,.provider-panel,section:not(.recommendation-section):not(.alternatives-panel):not(.provider-panel){
  background:var(--card);
  border:1px solid rgba(255,255,255,.74);
  border-radius:26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.intro-panel,.provider-panel,section{margin:1rem 0;padding:1.2rem}.recommendation-section,.alternatives-panel{padding:0;background:transparent;border:0;box-shadow:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.rec-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.alt-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{padding:1rem;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--cyan),var(--wave),var(--navy))}.card-kicker{font-weight:950;text-transform:uppercase;letter-spacing:.12em;color:var(--ocean);font-size:.75rem}
.rec-card{background:linear-gradient(180deg,#ffffff 0%,#f3fbff 100%)}
.score-wave{display:inline-flex;align-items:baseline;gap:.15rem;margin:.4rem 0 .7rem;color:white;background:linear-gradient(135deg,var(--deep),var(--ocean));border-radius:20px;padding:.3rem .75rem;box-shadow:0 12px 28px rgba(0,38,63,.20)}
.score-wave span{font-size:2.2rem;font-weight:1000}.score-wave small{opacity:.85}.metrics{display:grid;grid-template-columns:minmax(105px,.7fr) 1.3fr;gap:.35rem .7rem}.metrics dt,.grid dt{font-weight:950;color:var(--navy)}.metrics dd,.grid dd{margin:0}.explain{border-left:4px solid var(--cyan);padding-left:.8rem;color:#18384b;background:rgba(55,196,236,.08);border-radius:0 12px 12px 0}.grid{display:grid;grid-template-columns:minmax(180px,.55fr) 1.45fr;gap:.55rem 1rem}.score-line{font-weight:950;color:var(--ocean)}
.provider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem}.provider-chip{background:linear-gradient(180deg,#fff,#edf9fd);color:var(--ink);border:1px solid rgba(0,105,151,.16);border-radius:18px;justify-content:space-between;text-align:left;padding:.8rem;box-shadow:0 12px 26px rgba(0,38,63,.12)}.provider-name{font-weight:950}.status-pill{border-radius:999px;padding:.2rem .55rem;font-size:.78rem;font-weight:950;text-transform:uppercase;background:#e5e7eb;color:#111827}.status-pill.healthy,.status-healthy .status-pill{background:#d9fbff;color:#005f91}.status-pill.degraded,.status-degraded .status-pill{background:#fff3c4;color:#854d0e}.status-pill.disabled,.status-disabled .status-pill{background:#e5e7eb;color:#374151}.status-pill.unavailable,.status-unavailable .status-pill{background:#fee2e2;color:#991b1b}
.tablewrap{overflow:auto;border-radius:20px;border:1px solid rgba(0,105,151,.14);background:#fff}table{width:100%;border-collapse:collapse;min-width:900px}th,td{text-align:left;padding:.82rem;border-bottom:1px solid rgba(6,41,68,.10);vertical-align:top}th{background:linear-gradient(180deg,#e6f8fd,#d4eff7);color:var(--navy);font-weight:1000;position:sticky;top:0}tr:hover td{background:rgba(55,196,236,.07)}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;flex-wrap:wrap}.preference-form{display:flex;align-items:end;gap:.55rem;flex-wrap:wrap;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);padding:.55rem;border-radius:18px;backdrop-filter:blur(10px)}.preference-form label{font-size:.78rem;font-weight:900;color:inherit;min-width:9rem}.preference-form select{appearance:auto;border-radius:12px;border:1px solid rgba(8,47,73,.18);padding:.45rem .6rem;background:white;color:var(--ink);font-weight:850}.preference-form button{padding:.5rem .7rem}.top-preferences{max-width:1180px;margin:1rem auto 0;padding:0 1rem;display:flex;justify-content:flex-end;position:relative;z-index:2}.login-prefs .preference-form{background:rgba(255,255,255,.86);color:var(--ink);box-shadow:var(--shadow)}
.alt-row{padding:.65rem 0;border-top:1px solid rgba(8,47,73,.12)}.alt-row:first-of-type{border-top:0}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,11,18,.62);z-index:20;padding:1rem}.modal[aria-hidden="false"]{display:flex}.modal-card{width:min(680px,96vw);max-height:86vh;overflow:auto;background:#f8fdff;border:1px solid rgba(55,196,236,.34);border-radius:26px;padding:1.2rem;box-shadow:0 24px 90px rgba(0,0,0,.45)}.modal-close{float:left;margin:0 .6rem .4rem 0;width:2.35rem;height:2.35rem;padding:0;border-radius:999px}.modal ul{padding-left:1.3rem}.spot-hero{padding:1.2rem}

@media(max-width:880px){.top{align-items:stretch;flex-direction:column}.brand-lockup{align-items:flex-start}.site-logo{width:min(78vw,360px);max-width:78vw}.header-actions{justify-content:flex-start}.preference-form{width:100%}.preference-form label{min-width:100%}.preference-form select,.preference-form button{width:100%}.top-preferences{justify-content:stretch}.login-prefs .preference-form{width:100%}.metrics,.grid{grid-template-columns:1fr}.surf-hero{min-height:auto}.surf-hero h1{font-size:2.6rem}}
@media(max-width:520px){main,.top{padding:.75rem}.site-logo{width:100%}.card,.intro-panel,.provider-panel,section{padding:.9rem;border-radius:20px}.login{margin:3vh .75rem}.login-logo{width:100%}h1{font-size:2.25rem}}

/* Private login: intentionally neutral, no WaveWatch branding or surf context before authentication. */
body:has(.private-login){background:#fff;color:#111827}
body:has(.private-login):before,body:has(.private-login):after{display:none}
.private-login{max-width:28rem;background:#fff;border:1px solid #e5e7eb;box-shadow:0 18px 50px rgba(17,24,39,.10);backdrop-filter:none;text-align:left}
.private-login h1{text-shadow:none;letter-spacing:0;font-size:1.8rem;color:#111827;text-align:left;margin-bottom:1rem}
.private-login label{color:#1f2937}.private-login input{border-color:#d1d5db;border-radius:10px}.private-login button{background:#111827;box-shadow:none;border-radius:10px}.private-login button:hover{filter:none;background:#000}

.access-panel{padding:1.2rem}
.access-map-figure{margin:0 0 1rem}
.access-map-image{display:block;width:min(100%,760px);height:auto;border:1px solid rgba(6,41,68,.16);border-radius:18px;background:#f2efe8}
.access-map-figure figcaption{margin-top:.45rem;color:var(--muted);font-size:.9rem}
.access-map-pending{border:1px dashed rgba(133,77,14,.5);background:#fff7d6;color:#4f3100;border-radius:18px;padding:1rem;margin:0 0 1rem}
.access-map-pending p{margin:.35rem 0 0}

/* Authenticated header refresh: white, quiet, no scenic background. */
.app-header{
  margin-top:1rem;
  border:1px solid rgba(6,41,68,.10);
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 30px rgba(6,41,68,.07);
}
.app-header.compact{padding:.75rem 1rem}
.app-header .site-logo{
  width:min(320px,46vw);
  max-height:118px;
  object-fit:contain;
  border-radius:0;
  background:transparent;
  padding:0;
  box-shadow:none;
}
.app-header.compact .site-logo{width:min(260px,42vw);max-height:92px}
.site-footer{max-width:1180px;margin:1.5rem auto 2.5rem;padding:1rem;text-align:center;position:relative;z-index:1}
.logout-link{font-weight:500;color:#59636e;text-decoration:underline;text-underline-offset:.2em;text-transform:lowercase}
.logout-link:hover{color:#17212b}