/* Should We Surf — shared stylesheet for home + spot detail pages.
   Edit here once; every page picks it up. */

:root{
  --ink:#0b0b10;
  --text:#ffffff;
  --text-2:rgba(255,255,255,.92);   /* secondary text */
  --text-3:rgba(255,255,255,.78);   /* tertiary */
  --ok:#2dd36f;
  --bad:#ff5a7a;
  --warn:#fbbf24;
  --focus:#ffd166;                   /* keyboard focus ring */
  --stroke:rgba(255,255,255,.55);
  --glass: rgba(10,30,46,.55);       /* dark tint so white text contrasts */
  --glass-strong: rgba(10,30,46,.70);
}

html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "tnum" 1, "ss01" 1;
  background:#0a1e2e;
  overflow-x:hidden;
  min-height:100vh;
}

/* Decorative animated ocean iframe. */
#oceanFrame{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  border:0; z-index:0; pointer-events:none;
}

/* Vignette over the ocean so all surfaces stay legible. */
.veil{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 80%),
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.55) 100%);
}

@media (prefers-reduced-motion: reduce){
  #oceanFrame{ display:none; }
  body{
    background:
      radial-gradient(120% 80% at 50% 10%, #1a4366 0%, #0a1e2e 70%, #050d17 100%);
  }
}

/* Universal keyboard focus ring. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 14px;
}

.wrap{
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; flex-direction:column;
  padding:24px 16px;
  gap:18px;
}

/* ---------- Top nav (spot detail) -------- */
.topnav{ display:flex; align-items:center; gap:10px; }
.topnav a{
  color:var(--text); text-decoration:none;
  font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
  background:var(--glass); border:1px solid var(--stroke);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.topnav a:hover{ background:var(--glass-strong); }

/* ---------- Header / brand -------- */
.header{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:14px;
}
.brand{ display:flex; flex-direction:column; gap:4px; }
.brand .name{
  font-family: "Original Surfer", cursive;
  font-weight:400; letter-spacing:0; font-size:42px; line-height:1;
  text-shadow:
    0 2px 18px rgba(0,0,0,.85),
    0 1px 0 rgba(0,0,0,.7),
    0 0 2px rgba(0,0,0,.9);
  display:flex; align-items:center; gap:12px;
  white-space: nowrap;
  margin:0;  /* reset h1/h2 default */
}
.brand .name.lg{ font-size:48px; }
.brand .sub{
  font-weight:700; font-size:13px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--text-2);
}
.brand .name .pixel-surfer{
  width: 1.5em; height: 1.1em; flex:0 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.45));
  animation: surfer-bob 2.2s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes surfer-bob{
  0%,100% { transform: translateY(0)    rotate(0deg); }
  25%     { transform: translateY(-1px) rotate(-1deg); }
  50%     { transform: translateY(0)    rotate(0deg); }
  75%     { transform: translateY(-1px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce){
  .brand .name .pixel-surfer{ animation: none; }
}
@media (max-width: 860px){
  .brand .name{ font-size: 30px; gap:8px; }
  .brand .name.lg{ font-size: 34px; }
}
@media (max-width: 420px){
  .brand .name{ font-size: 24px; gap:6px; }
  .brand .name.lg{ font-size: 28px; }
}

.header-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- Pills -------- */
.pill{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:999px;
  background:var(--glass);
  border:1px solid var(--stroke);
  color:var(--text);
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:13px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pillrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

.pill-big{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px;
  background:var(--glass); border:1px solid var(--stroke); color:var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,.30);
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:12px;
}
.pill-big.sm{ padding:8px 12px; border-radius:12px; }
.pill-big .emoji{ font-size:22px; line-height:1; }
.pill-big.sm .emoji{ font-size:18px; }
.pill-big .pl{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pill-big .pl .pl-label{
  font-weight:900; text-transform:uppercase; letter-spacing:.06em; font-size:12px;
}
.pill-big .pl .pl-note{
  font-size:13px; color:var(--text-2); font-weight:600;
  text-transform:none; letter-spacing:0; white-space: normal;
}
/* Skill / daylight tints — solid enough to pass contrast over the moving ocean. */
.pill-big.skill-out-of-range{ background:rgba(180,20,50,.70); border-color:rgba(255,120,140,.95); }
.pill-big.skill-worked{       background:rgba(180,110,10,.70); border-color:rgba(251,191,36,.95); }
.pill-big.skill-manageable{   background:rgba(20,110,50,.70); border-color:rgba(74,222,128,.95); }
.pill-big.skill-marginal{     background:rgba(20,90,140,.70); border-color:rgba(125,211,252,.95); }
.pill-big.skill-flat{         background:rgba(40,55,75,.70); border-color:rgba(255,255,255,.5); }
.pill-big.day-night{          background:rgba(10,15,30,.75); border-color:rgba(255,255,255,.4); }
.pill-big.day-dawn,
.pill-big.day-dusk{           background:rgba(180,110,10,.70); border-color:rgba(251,191,36,.95); }

/* ---------- Grids -------- */
.grid{ display:grid; gap:16px; }
.grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns:1fr 1fr; }
@media (max-width: 1100px){ .grid.cols-3{ grid-template-columns:1fr 1fr; } }
@media (max-width: 860px){
  .grid.cols-2{ grid-template-columns:1fr; }
}
@media (max-width: 720px){ .grid.cols-3{ grid-template-columns:1fr; } }

/* ---------- Cards -------- */
.card{
  border-radius:18px;
  background:var(--glass);
  border:1px solid var(--stroke);
  padding:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color:var(--text);
  transition: padding .2s ease, transform .15s ease;
}
.label{
  font-weight:900; text-transform:uppercase; letter-spacing:.10em;
  font-size:12px; color:var(--text-2); margin-bottom:10px;
}
/* Collapsible cards (spot detail) */
.card.collapsible .label{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none; gap:10px;
}
.card.collapsible .label .chev{
  display:inline-block; transition:transform .25s ease;
  opacity:.85; font-size:14px;
}
.card.collapsed{ padding:14px 18px; }
.card.collapsed .label{ margin-bottom:0; }
.card.collapsed .label .chev{ transform:rotate(-90deg); }
.card .body{
  overflow: visible;
  transition: max-height .3s ease, opacity .25s ease, margin-top .25s ease;
  max-height: 2000px; opacity:1;
}
.card.collapsed .body{
  max-height:0; opacity:0; margin-top:0; pointer-events:none;
  overflow: hidden;
}

.toggle-all{
  display:none; align-items:center; gap:8px;
  padding:10px 14px; border-radius:14px;
  background:#ffd166; border:1px solid rgba(0,0,0,.4);
  color:#0b0b10; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; font-size:13px; cursor:pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.toggle-all:hover{ filter: brightness(.96); }
.toggle-all .chev-icon{
  font-size:14px; line-height:1; display:inline-block;
  transition: transform .2s ease;
}
.toggle-all.is-collapsed .chev-icon{ transform: rotate(-90deg); }
@media (max-width: 860px){ .toggle-all{ display:inline-flex; } }

/* ---------- Stats -------- */
.big{
  font-size:54px; font-weight:1000; letter-spacing:-0.03em; line-height:1;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.unit{
  font-size:14px; font-weight:900; color:var(--text-2);
  margin-left:8px; text-transform:uppercase; letter-spacing:.06em;
}
.row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.stat{ flex:1 1 120px; }
.stat .k{
  font-size:12px; color:var(--text-2); text-transform:uppercase;
  letter-spacing:.06em; font-weight:800;
}
.stat .v{ font-size:20px; font-weight:900; color:var(--text); }

/* ---------- Wave preview (spot detail, inside Now card) -------- */
.wavefig{
  position:relative;
  margin:14px 0 4px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background:rgba(10,30,46,.35);
  height:120px;
}
.wavefig svg{ display:block; width:100%; height:100%; }
.wavefig .wave-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em;
  font-weight:800;
}
.wavefig .wave-empty[hidden]{ display:none; }
.wave-play{
  position:absolute; top:8px; right:8px;
  width:30px; height:30px; padding:0;
  border-radius:9px;
  background:var(--glass-strong);
  border:1px solid var(--stroke);
  color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:13px; line-height:1;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wave-play:hover{ background:rgba(20,50,70,.85); }

/* ---------- Status block (spot detail) -------- */
.status{
  margin-top:14px; font-weight:950; text-transform:uppercase;
  letter-spacing:.06em; font-size:13px;
  display:flex; align-items:flex-start; gap:10px;
}
.dot{
  width:12px; height:12px; border-radius:999px; margin-top:4px;
  background:var(--bad);
  box-shadow: 0 0 0 6px rgba(255,90,122,.30);
  flex:0 0 auto;
}
.status.good .dot{
  background:var(--ok);
  box-shadow: 0 0 0 6px rgba(45,211,111,.30);
}
.status-sub{
  font-weight:700; color:var(--text-2); margin-top:3px;
  text-transform:none; letter-spacing:0; font-size:13px;
}

.fineprint{ margin-top:10px; color:var(--text-2); font-size:13px; }

/* ---------- Buttons -------- */
button{
  appearance:none; border:1px solid var(--stroke); border-radius:14px;
  padding:10px 14px; cursor:pointer;
  background:var(--glass-strong); color:var(--text);
  font-weight:900; text-transform:uppercase; letter-spacing:.06em; font-size:13px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
button:hover{ transform: translateY(-1px); }
button:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btnrow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:6px;
}

/* ---------- Forecast window list -------- */
.windowlist{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.window{
  border:1px solid var(--stroke); border-radius:12px;
  background:rgba(10,30,46,.45);
  padding:10px 12px; display:flex; justify-content:space-between;
  gap:10px; align-items:center;
}
.window .when{ font-weight:900; color:var(--text); }
.window .meta{ color:var(--text-2); font-size:13px; }

/* ---------- Spot card (home grid) -------- */
.spot-card{
  position:relative;          /* anchor for corner pill */
  display:flex; flex-direction:column; gap:8px;
  text-decoration:none; color:inherit;
}
.spot-card .spot-name{
  font-family:"Original Surfer", cursive; font-weight:400;
  font-size:24px; line-height:1.1; color:var(--text);
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
  margin:0;
  padding-right: 96px;         /* room for the corner pill */
}
.spot-card .spot-sub{
  font-size:13px; color:var(--text-2);
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  padding-right: 96px;
}
.spot-card:hover{ transform: translateY(-2px); }

/* Skill pill tucked into the card's top-right corner. */
.spot-card .corner-pill{
  position:absolute; top:14px; right:14px;
  padding:6px 10px; border-radius:10px;
  font-size:11px; letter-spacing:.05em;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  max-width: 130px;
}
.spot-card .corner-pill .emoji{ font-size:16px; }

/* ---------- Footnote + global daylight indicator -------- */
.footnote{
  position:fixed; right:14px; bottom:10px; z-index:2;
  font-size:11px; color:var(--text-2); letter-spacing:.04em;
  max-width: 45vw; text-align:right;
  background: rgba(10,30,46,.55);
  padding: 6px 10px; border-radius: 10px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
}
.footnote a{ color:var(--text); text-decoration: underline; }

#globalDay{
  position:fixed; right:14px; top:14px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  background:var(--glass-strong); border:1px solid var(--stroke); color:var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
#globalDay .emoji{ font-size:20px; line-height:1; }
#globalDay .sub{
  font-size:11px; font-weight:700; color:var(--text-2);
  text-transform:none; letter-spacing:0; margin-left:6px;
}
#globalDay.day-night{ background:rgba(10,15,30,.75); border-color:rgba(255,255,255,.4); }
#globalDay.day-dawn, #globalDay.day-dusk{
  background:rgba(180,110,10,.70); border-color:rgba(251,191,36,.95);
}

/* Visually-hidden for screen-reader-only labels. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}