/* Swell.  Ocean-night theme, phone first, desktop from 1024 px.
   No inline styles anywhere: the app sends style-src 'self'.  Anything dynamic
   is drawn as SVG attributes or set from app.js. */

:root {
  color-scheme: dark;
  --bg: #04111d;
  --bg-2: #071a2b;
  --surface: #0c2133;
  --surface-2: #10293f;
  --surface-3: #15334d;
  --glass: rgba(14, 38, 60, 0.62);
  --line: rgba(148, 197, 233, 0.12);
  --line-2: rgba(148, 197, 233, 0.22);
  --text: #eaf4fb;
  --text-2: #a9c1d4;
  --text-3: #6f8ba3;
  /* Surfaces that used to be written out (BACKLOG 48): one place to theme them. */
  --chrome: rgba(4, 17, 29, 0.78);
  --chrome-solid: rgba(5, 20, 34, 0.9);
  --chrome-side: rgba(5, 20, 34, 0.7);
  --card-a: rgba(18, 44, 68, 0.72);
  --card-b: rgba(11, 31, 49, 0.72);
  --hero-a: #0f3554;
  --hero-b: #0a243b;
  --hero-c: #081c2f;
  --inset: rgba(2, 14, 26, 0.4);
  --field: rgba(2, 12, 22, 0.45);
  --night: #0a1d2e;
  --hover: rgba(255, 255, 255, 0.06);
  --shade: 12 33 51;
  --night-fill: rgba(0, 0, 0, 0.22);
  /* Tips and hover cards are dark in dark mode: nothing bright pops up over the page (BACKLOG 48). */
  --tip-bg: #1a3954;
  --tip-text: #eaf4fb;
  --aqua: #2fd6c6;
  --aqua-2: #1aa89b;
  --coral: #ff7a59;
  --sand: #f4d7a1;
  --sky: #7cc4ff;
  /* Sports: validated all-pairs on the dark surface (dataviz validator, 2026-10-24). */
  --surf: #3987e5;
  --bodyboard: #d95926;
  --sup: #199e70;
  /* BACKLOG 54: the reference palette's slots 4 to 8 and a teal, run through the validator as nine in
     this order on #0c2133 and on #ffffff, 2026-10-24: every check passes in both.  A dot always sits
     beside the sport's name, so colour is never the only cue. */
  --kite: #c98500;
  --wing: #d55181;
  --windsurf: #008300;
  --surfski: #9085e9;
  --kayak: #e66767;
  --swim: #2390b0;
  /* Ratings: status colours, always shown with their word. */
  --epic: #b48cff;
  --good: #34d399;
  --good-text: #7ee8bf;     /* green words and icons; deep green in light mode (BACKLOG 154) */
  --fair: #facc15;
  --poor: #fb923c;
  --nogo: #64748b;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Outfit", "Inter", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }  /* no grey square on taps (BACKLOG 84) */
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(47, 214, 198, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(57, 135, 229, 0.12), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.5 var(--font);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--aqua); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 10px; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
svg.i.lg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ shell */
.shell { display: flex; min-height: 100vh; }
.side { display: none; }
.main { flex: 1; min-width: 0; overflow-x: clip; padding: calc(64px + var(--safe-t)) 14px calc(86px + var(--safe-b)); }
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(58px + var(--safe-t));
  padding: var(--safe-t) 14px 0; display: flex; align-items: center; gap: 12px;
  background: var(--chrome); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { display: flex; align-items: center; gap: 8px; font: 700 20px var(--display); color: var(--text); }
.topbar .brand:hover { text-decoration: none; }
.topbar .spacer { flex: 1; }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.clock b { font: 600 17px var(--display); font-variant-numeric: tabular-nums; }
.clock span { font-size: 11px; color: var(--text-3); }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--aqua);
          background: var(--surface-3); display: inline-grid; place-items: center; font-weight: 700; color: var(--aqua); }
.avatar.lg { width: 84px; height: 84px; font-size: 30px; }
.logo-mark { width: 30px; height: 30px; }

.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + var(--safe-b)); background: var(--chrome-solid);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line);
}
.tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px;
          color: var(--text-3); font-size: 11px; font-weight: 500; }
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabs a.on { color: var(--aqua); background: rgba(47, 214, 198, 0.08); }
.tabs svg.i { width: 22px; height: 22px; }

@media (min-width: 1024px) {
  .side {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; width: 248px; flex: none;
    padding: 22px 16px; border-right: 1px solid var(--line); background: var(--chrome-side);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .side .brand { display: flex; align-items: center; gap: 10px; font: 700 24px var(--display); color: var(--text);
                 padding: 4px 10px 22px; }
  .side .brand:hover { text-decoration: none; }
  .side nav { display: flex; flex-direction: column; gap: 4px; }
  .side nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px;
                color: var(--text-2); font-weight: 500; }
  .side nav a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
  .side nav a.on { background: linear-gradient(90deg, rgba(47, 214, 198, 0.16), rgba(47, 214, 198, 0.02));
                   color: var(--text); box-shadow: inset 3px 0 0 var(--aqua); }
  .side nav .soon { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 99px;
                    background: rgba(255, 122, 89, 0.15); color: var(--coral); font-weight: 600; }
  .side .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px;
              background: var(--surface); border: 1px solid var(--line); }
  .side .me b { display: block; font-size: 14px; }
  .side .me span { font-size: 12px; color: var(--text-3); }
  .side .me form { margin-left: auto; }
  .tabs { display: none; }
  .topbar { left: 248px; height: 64px; padding: 0 28px; transition: left .25s ease; }
  /* The handle halfway down the menu's edge folds it to icons and back (BACKLOG 107).  The
     choice is a cookie, so the page arrives already folded rather than snapping shut. */
  .side { transition: width .25s ease, padding .25s ease; }
  .side-toggle { position: absolute; top: 50%; right: -13px; z-index: 5; display: grid; place-items: center; width: 26px; height: 56px;
                 padding: 0; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2);
                 cursor: pointer; transform: translateY(-50%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: color .15s, border-color .15s; }
  .side-toggle:hover, .side-toggle:focus-visible { color: var(--text); border-color: var(--aqua); }
  .side-toggle svg.i { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .25s ease; }
  .side-mini .side-toggle svg.i { transform: none; }
  .side-mini .side { width: 76px; padding: 22px 10px; }
  .side-mini .side .lbl, .side-mini .side nav .soon, .side-mini .side .me-link { display: none; }
  .side-mini .side .brand { justify-content: center; gap: 0; padding: 4px 0 22px; }
  .side-mini .side nav a { position: relative; justify-content: center; gap: 0; padding: 11px 0; }
  .side-mini .side nav .count { position: absolute; top: 3px; right: 5px; }
  .side-mini .plan-btn { margin: 18px 0 0; padding: 10px 0; gap: 0; }
  .side-mini .side .me { flex-direction: column; gap: 8px; padding: 10px 0; }
  .side-mini .side .me form { margin-left: 0; }
  .side-mini .topbar { left: 76px; }
  .topbar .brand { display: none; }
  .main { padding: 88px 32px 40px; }
}
@media (min-width: 1600px) { .main { padding: 92px 48px 48px; } }
.wrap { max-width: 1480px; margin: 0 auto; }

/* ------------------------------------------------------------------ building blocks */
.card {
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.card.pad-0 { padding: 0; overflow: hidden; }
.card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text-2);
           font: 600 12.5px var(--font); text-transform: uppercase; letter-spacing: 0.08em; }
.card h3 .grow { flex: 1; }
.grid { display: grid; gap: 14px; }
.g2, .g3, .g4, .g6 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g2, .g4, .g6 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
                             .g6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .g6 { grid-template-columns: repeat(6, 1fr); } }
.split { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1200px) { .split { grid-template-columns: minmax(0, 1fr) 400px; } }
.section { margin-top: 22px; }
.section-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.section-head .grow { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap-row { flex-wrap: wrap; }
.stack > * + * { margin-top: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px;
       border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
       font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; white-space: nowrap; }
.btn:hover { background: var(--surface-3); text-decoration: none; border-color: rgba(47, 214, 198, 0.45); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, #2fd6c6, #3987e5); border-color: transparent; color: #04111d; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 10px; }
.btn.icon { padding: 8px; }
.btn.pinned { border-color: var(--aqua); color: var(--aqua); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px;
        border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font-size: 13px;
        font-weight: 500; cursor: pointer; user-select: none; white-space: nowrap; }
.chip:hover { color: var(--text); text-decoration: none; border-color: rgba(47, 214, 198, 0.45); }
.chip.on { background: rgba(47, 214, 198, 0.14); border-color: var(--aqua); color: var(--text); }
.chip input { display: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips.scroll::-webkit-scrollbar { display: none; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.surf, .bg-surf { background: var(--surf); }
.dot.bodyboard, .bg-bodyboard { background: var(--bodyboard); }
.dot.sup, .bg-sup { background: var(--sup); }
.dot.kite, .bg-kite { background: var(--kite); }
.dot.wing, .bg-wing { background: var(--wing); }
.dot.windsurf, .bg-windsurf { background: var(--windsurf); }
.dot.surfski, .bg-surfski { background: var(--surfski); }
.dot.kayak, .bg-kayak { background: var(--kayak); }
.dot.swim, .bg-swim { background: var(--swim); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px;
         font-weight: 700; letter-spacing: 0.02em; color: #04111d; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(4, 17, 29, 0.55); }
.badge.epic { background: var(--epic); }
.badge.good { background: var(--good); }
.badge.fair { background: var(--fair); }
.badge.poor { background: var(--poor); }
.badge.nogo { background: var(--nogo); color: #eaf4fb; }
.badge.lg { font-size: 14px; padding: 7px 14px; }
.sport-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }

.flash { margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(47, 214, 198, 0.12);
         border: 1px solid rgba(47, 214, 198, 0.35); }

/* Tooltips: data-tip on anything.  app.js adds .tip-on for taps on touch screens. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-text);
  font: 500 12.5px/1.4 var(--font); text-transform: none; letter-spacing: 0; text-align: left; white-space: normal;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 60;
}
[data-tip]:hover::after, [data-tip].tip-on::after { opacity: 1; transform: translate(-50%, 0); }
[data-tip].tip-left::after { left: 0; transform: translate(0, 4px); }
[data-tip].tip-left:hover::after { transform: translate(0, 0); }
[data-tip].tip-right::after { left: auto; right: 0; transform: translate(0, 4px); }
[data-tip].tip-right:hover::after { transform: translate(0, 0); }
/* The top bar sits at the top of the screen, so its tips open below and hang from
   the right-hand edge rather than running off the screen (BACKLOG 66). */
.topbar [data-tip]::after { bottom: auto; top: calc(100% + 10px); left: auto; right: 0; transform: translate(0, -4px); }
.topbar [data-tip]:hover::after, .topbar [data-tip].tip-on::after { transform: translate(0, 0); }
.info { color: var(--text-3); cursor: help; display: inline-flex; }
.info:hover { color: var(--aqua); }

/* ------------------------------------------------------------------ login
   Five photos crossfade every 10 seconds in random order (app.js).  The box sits
   where the mock-ups put it: right-hand side, about a quarter of the width,
   centred top to bottom.  Phones get a portrait crop and the box as a bottom sheet.
   data-tone="light" on the shell turns the box to white glass for bright photos. */
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.check input { width: 18px; height: 18px; accent-color: var(--aqua); }
.err { padding: 10px 12px; border-radius: 10px; background: rgba(255, 122, 89, 0.14); border: 1px solid rgba(255, 122, 89, 0.4);
       color: #ffd1c4; font-size: 13.5px; }
body.login { background: #020b14; min-height: 100vh; overflow-x: hidden; }
.login-shell {
  --box-bg: rgba(8, 26, 42, 0.52); --box-line: rgba(255, 255, 255, 0.16); --box-text: #f2f8fc;
  --box-sub: rgba(226, 238, 247, 0.72); --field-bg: rgba(255, 255, 255, 0.07); --field-line: rgba(255, 255, 255, 0.18);
  --field-text: #f2f8fc; --field-icon: rgba(226, 238, 247, 0.6);
  position: relative; min-height: 100vh; min-height: 100dvh; color: var(--box-text);
}
.login-shell[data-tone="light"] {
  --box-bg: rgba(255, 255, 255, 0.78); --box-line: rgba(255, 255, 255, 0.9); --box-text: #0b2236;
  --box-sub: #4d6578; --field-bg: rgba(255, 255, 255, 0.85); --field-line: rgba(11, 34, 54, 0.12);
  --field-text: #0b2236; --field-icon: #6f8ba3;
}
.slides { position: fixed; inset: 0; overflow: hidden; background: #020b14; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.slide.on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.slide.on img { animation: kenburns 11s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
img.fx-22 { object-position: 22% 50%; }
img.fx-30 { object-position: 30% 50%; }
img.fx-32 { object-position: 32% 50%; }
img.fx-40 { object-position: 40% 50%; }
img.fx-36 { object-position: 36% 50%; }
.scrim { position: absolute; inset: 0; pointer-events: none;
         background: linear-gradient(180deg, rgba(2, 11, 20, 0.5) 0%, rgba(2, 11, 20, 0) 18%, rgba(2, 11, 20, 0) 45%, rgba(2, 11, 20, 0.65) 100%); }
@media (prefers-reduced-motion: reduce) { .slide.on img { animation: none; transform: none; } .slide { transition-duration: .4s; } }

.login-top { position: fixed; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
             padding: calc(18px + var(--safe-t)) 22px 0; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.login-top .brand { display: flex; align-items: center; gap: 10px; font: 700 24px var(--display); }
.login-top .logo-mark { width: 34px; height: 34px; }
.login-clock { font-size: 13px; opacity: .9; }
.login-clock b { font: 600 15px var(--display); font-variant-numeric: tabular-nums; }

.login-caption { position: fixed; z-index: 3; left: 22px; right: 22px; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
                 top: calc(70px + var(--safe-t)); }
.login-caption p { margin: 0; transition: opacity .6s; }
.login-caption .kicker { font: 400 26px/1.1 "DM Serif Display", Georgia, serif; }
.login-caption .line { font-size: 13.5px; opacity: .85; margin-top: 4px; }
.login-caption.swap p { opacity: 0; }
.dots { display: flex; gap: 6px; margin-top: 12px; }
.dots button { width: 28px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.dots i { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); overflow: hidden; position: relative; }
.dots button.on i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dotfill 10s linear forwards; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.login-box {
  position: fixed; z-index: 4; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); max-height: calc(100dvh - 120px); overflow-y: auto;
  padding: 26px 22px 18px; border-radius: 28px; background: var(--box-bg); border: 1px solid var(--box-line); color: var(--box-text);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background .9s ease, color .9s ease, border-color .9s ease;
  animation: rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.login-box h1 { font: 400 32px/1.1 "DM Serif Display", Georgia, serif; letter-spacing: 0; }
.login-box .sub { color: var(--box-sub); margin: 6px 0 20px; transition: color .9s; }
.lfield { position: relative; display: block; margin-bottom: 12px; }
.lfield svg.i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--field-icon); pointer-events: none; }
.lfield input { width: 100%; padding: 14px 44px; border-radius: 14px; border: 1px solid var(--field-line); background: var(--field-bg);
                color: var(--field-text); outline: none; font-size: 16px; transition: border-color .2s, box-shadow .2s, background .9s, color .9s; }
.lfield input::placeholder { color: var(--field-icon); }
.lfield input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(47, 214, 198, 0.2); }
.lfield .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 8px; cursor: pointer;
               color: var(--field-icon); border-radius: 10px; line-height: 0; }
.lfield .eye:hover, .lfield .eye.on { color: var(--aqua); }
.lfield .eye svg.i { position: static; transform: none; }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 16px; }
.login-box .check { margin: 0; color: var(--box-sub); font-size: 13px; }
.linkish { border: 0; background: none; padding: 0; color: var(--aqua); font-size: 13px; cursor: pointer; }
.login-shell[data-tone="light"] .linkish { color: #0f8f84; }
.linkish[data-tip]::after { left: auto; right: 0; transform: translate(0, 4px); }
.linkish[data-tip]:hover::after, .linkish.tip-on::after { transform: translate(0, 0); }
.lbtn { width: 100%; padding: 14px; font-size: 16px; border-radius: 14px; }
.login-box .btn.primary { background: linear-gradient(135deg, #3ee0cf, #22b8c9); color: #04212a; box-shadow: 0 10px 30px rgba(34, 184, 201, 0.35); }
.install { margin-top: 12px; }
.install summary { list-style: none; }
.install summary::-webkit-details-marker { display: none; }
.btn.outline { background: transparent; border: 1px solid var(--field-line); color: var(--box-text); }
.login-shell[data-tone="light"] .btn.outline { border-color: rgba(15, 143, 132, 0.45); color: #0f8f84; }
.install-body { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--field-bg); font-size: 13px; color: var(--box-sub); }
.install-body p { margin: 0 0 6px; }
.install-body b { color: var(--box-text); }
.lfoot { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--box-sub); }
.login-box .err { margin-bottom: 14px; }
.login-shell[data-tone="light"] .err { color: #9a3412; background: rgba(251, 146, 60, 0.15); }

/* Short phones: tighten the sheet so the photo still shows. */
@media (max-height: 740px) and (max-width: 899px) {
  .login-box { padding: 20px 18px 14px; }
  .login-box h1 { font-size: 27px; }
  .login-box .sub { margin-bottom: 14px; }
  .lfoot { display: none; }
}

/* Desktop and landscape tablets: the box on the right, as in the mock-ups,
   and the caption bottom left. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .scrim { background: linear-gradient(90deg, rgba(2, 11, 20, 0) 50%, rgba(2, 11, 20, 0.3) 100%),
                       linear-gradient(180deg, rgba(2, 11, 20, 0.45) 0%, rgba(2, 11, 20, 0) 16%, rgba(2, 11, 20, 0) 70%, rgba(2, 11, 20, 0.55) 100%); }
  .login-top { padding: 30px 44px 0; }
  .login-top .brand { font-size: 28px; }
  .login-box { left: auto; right: 3.2vw; bottom: auto; top: 50%; width: clamp(370px, 27.5vw, 520px);
               max-height: calc(100vh - 140px); padding: clamp(28px, 2.4vw, 44px) clamp(26px, 2vw, 40px) clamp(22px, 1.8vw, 32px); border-radius: 22px;
               animation: rise-d .8s cubic-bezier(.2, .8, .2, 1) both; transform: translateY(-50%); }
  .login-box h1 { font-size: clamp(32px, 2.5vw, 46px); }
  .login-caption { top: auto; left: 44px; right: auto; bottom: 40px; max-width: 46vw; }
  .login-caption .kicker { font-size: clamp(30px, 2.6vw, 46px); }
  .login-caption .line { font-size: 15px; }
}
@keyframes rise-d { from { transform: translateY(calc(-50% + 24px)); opacity: 0; } to { transform: translateY(-50%); opacity: 1; } }

/* ------------------------------------------------------------------ dashboard */
.hello { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hello h1 { font-size: 26px; }
@media (min-width: 1024px) { .hello h1 { font-size: 34px; } }
.hello .grow { flex: 1; }

.hero { position: relative; overflow: hidden; border-radius: 24px; padding: 22px; border: 1px solid var(--line-2);
        background: radial-gradient(700px 300px at 100% 0%, rgba(47, 214, 198, 0.22), transparent 60%),
                    linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 55%, var(--hero-c) 100%); }
.hero::after { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; pointer-events: none; opacity: .35;
               background: url("../img/wave-lines.svg") center bottom / 1200px auto repeat-x; }
.hero > * { position: relative; z-index: 1; }
.hero-top { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.hero-top .grow { flex: 1; min-width: 220px; }
.hero .spot-name { font: 700 30px/1.1 var(--display); }
@media (min-width: 1024px) { .hero { padding: 30px 32px; } .hero .spot-name { font-size: 42px; } }
.hero .verdict { margin-top: 10px; font-size: 16px; color: var(--text); max-width: 640px; }
.hero .verdict b { color: var(--aqua); }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
@media (min-width: 760px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1300px) { .hero-stats { grid-template-columns: repeat(6, 1fr); } }
.stat { padding: 12px 14px; border-radius: 14px; background: var(--inset); border: 1px solid var(--line); }
.stat .k { font-size: 11.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.07em; display: flex; gap: 6px; align-items: center; }
.stat .v { font: 600 24px/1.2 var(--display); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 13px; color: var(--text-2); font-weight: 500; margin-left: 2px; }
.stat .s { font-size: 12.5px; color: var(--text-2); }
.spot-switch { margin-top: 18px; }

.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
.filterbar .label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 2px; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; color: var(--text-2); cursor: pointer; font-size: 13px; font-weight: 600; }
.seg button.on { background: var(--surface-3); color: var(--text); }

.widget { min-height: 210px; display: flex; flex-direction: column; }
.widget .body { flex: 1; display: flex; align-items: center; gap: 16px; }
.big { font: 600 40px/1 var(--display); font-variant-numeric: tabular-nums; }
.big small { font-size: 15px; color: var(--text-2); font-weight: 500; margin-left: 3px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.dial { width: 120px; height: 120px; flex: none; }
.dial .ring { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.dial .tick { stroke: var(--text-3); stroke-width: 1; }
.dial .card-pt { fill: var(--text-2); font: 600 9px var(--font); text-anchor: middle; dominant-baseline: middle; }
.dial .beach { fill: rgba(244, 215, 161, 0.18); stroke: rgba(244, 215, 161, 0.5); stroke-width: 1; }
.dial .arrow { fill: var(--aqua); }
.dial .arrow.swell { fill: var(--sky); }
.dial .center { fill: var(--text); font: 700 18px var(--display); text-anchor: middle; dominant-baseline: middle; }
.dial .unit { fill: var(--text-3); font: 500 8.5px var(--font); text-anchor: middle; }
.rel { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--text-2); }
.rel.offshore, .rel.cross-offshore { background: rgba(52, 211, 153, 0.15); color: var(--good-text); }
.rel.onshore, .rel.cross-onshore { background: rgba(251, 146, 60, 0.14); color: #fdba74; }

.chart { width: 100%; height: 220px; display: block; }
.chart.tall { height: 260px; }
.chart.short { height: 120px; }
.chart text { fill: var(--text-3); font: 500 10.5px var(--font); }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .now-l { stroke: var(--coral); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart .night { fill: var(--night-fill); }
.chart .offh { fill: var(--night-fill); }
.chart .rate-c.off { opacity: .28; }
.chart .wind-l { fill: none; stroke: var(--aqua); stroke-width: 2; }
.chart .gust-l { fill: none; stroke: var(--aqua); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .7; }
.chart .wind-a { fill: url(#gWind); }
.chart .tide-a { fill: url(#gTide); }
.chart .tide-l { fill: none; stroke: var(--sky); stroke-width: 2; }
.chart .swell-b { fill: var(--sky); opacity: .85; }
.chart .arrow-s { fill: var(--text-2); }
.chart .hover-l { stroke: var(--text-2); stroke-width: 1; }
.chart .pt { stroke: var(--surface); stroke-width: 2; }
.chart .day-l { fill: var(--text-2); font-weight: 600; }
.chart .score-c.surf { fill: var(--surf); } .chart .score-c.bodyboard { fill: var(--bodyboard); } .chart .score-c.sup { fill: var(--sup); }
.chart .lbl { fill: var(--text-2); font-weight: 600; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--aqua); display: inline-block; }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--aqua) 0 4px, transparent 4px 7px); }
.legend i.sky { background: var(--sky); }
.chart-tip { position: fixed; z-index: 80; pointer-events: none; padding: 9px 12px; border-radius: 12px; background: var(--tip-bg);
             color: var(--tip-text); font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow); min-width: 150px; }
/* Fades rather than vanishing, so a lifted finger or a scroll lets it go gently (BACKLOG 79). */
.chart-tip { transition: opacity .35s; }
.chart-tip.off { opacity: 0; }
.chart-tip b { font-family: var(--display); }
.chart-tip .r { display: flex; justify-content: space-between; gap: 14px; }

.sun-arc { width: 100%; height: 110px; }
.sun-arc .arc { fill: none; stroke: rgba(244, 215, 161, 0.35); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sun-arc .ground { stroke: var(--line-2); }
.sun-arc .sunball { fill: #ffd08a; }
.sun-arc text { fill: var(--text-3); font: 500 11px var(--font); }
.sun-arc .gold { fill: none; stroke: #ffb35c; stroke-width: 4; stroke-linecap: round; opacity: .8; }

.suit-meter { display: flex; gap: 4px; margin-top: 8px; }
.suit-meter i { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); }
.suit-meter i.on { background: linear-gradient(90deg, var(--sky), var(--aqua)); }

/* Week ahead suggestions */
.sugg { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface);
        border: 1px solid var(--line); transition: border-color .15s, transform .15s; color: var(--text); }
.sugg:hover { border-color: rgba(47, 214, 198, 0.5); transform: translateY(-1px); text-decoration: none; }
.sugg .when { width: 58px; flex: none; text-align: center; padding: 8px 0; border-radius: 12px; background: var(--surface-3); }
.sugg .when b { display: block; font: 700 22px/1 var(--display); }
.sugg .when span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.sugg .what { flex: 1; min-width: 0; }
.sugg .what b { display: block; font-size: 15px; }
.sugg .what .muted { font-size: 13px; }
.sugg .score { text-align: right; }
.score-num { font: 700 20px var(--display); font-variant-numeric: tabular-nums; }

/* Spot cards */
.spot-card { display: flex; flex-direction: column; gap: 12px; }
.spot-card .top { display: flex; gap: 10px; align-items: flex-start; }
.spot-card .top .grow { flex: 1; min-width: 0; }
.spot-card h4 { font: 600 19px var(--display); }
.spot-card h4 a { color: var(--text); }
.strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.strip a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0; border-radius: 10px;
           background: var(--surface); color: var(--text-2); font-size: 11px; }
.strip a:hover { background: var(--surface-3); text-decoration: none; }
.strip a i { width: 70%; height: 6px; border-radius: 3px; }
.strip a b { color: var(--text); font-size: 12px; }
.r-epic { background: var(--epic); } .r-good { background: var(--good); } .r-fair { background: var(--fair); }
.r-poor { background: var(--poor); } .r-nogo { background: var(--nogo); }

/* Cams: the player, then a two-line caption under it (BACKLOG 58). */
.cam { margin: 0; }
.cam + .cam { margin-top: 18px; }
.cam-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 10px; font-size: 13.5px; }
.cam-cap b { font-weight: 600; }
.cam-cap .credit { flex-basis: 100%; font-size: 12px; color: var(--text-3); }
.cam-cap .credit a { color: var(--text-2); }
.cam-frame { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover; border-radius: 14px; overflow: hidden; }
.cam-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cam-frame .cam-play { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; border: 0; color: #fff;
                        background: linear-gradient(135deg, rgba(15, 53, 84, 0.9), rgba(6, 26, 43, 0.9)); }
.cam-frame .cam-play span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 99px;
                             background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); font-weight: 600; }
.cam-frame .cam-play:hover span { background: rgba(47, 214, 198, 0.25); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #ff8a8a; letter-spacing: .08em; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ------------------------------------------------------------------ spot page */
.spot-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.spot-head .grow { flex: 1; min-width: 240px; }
.crumbs { font-size: 13px; color: var(--text-3); margin-bottom: 4px; }
.crumbs a { color: var(--text-2); }
.daytabs { display: grid; grid-template-columns: repeat(8, minmax(74px, 1fr)); gap: 6px; overflow-x: auto; scrollbar-width: none; }
.daytabs::-webkit-scrollbar { display: none; }
.daytabs a { padding: 10px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
             text-align: center; font-size: 12px; }
.daytabs a:hover { text-decoration: none; border-color: var(--line-2); color: var(--text); }
.daytabs a.on { border-color: var(--aqua); background: rgba(47, 214, 198, 0.1); color: var(--text); }
.daytabs a b { display: block; font-size: 14px; color: var(--text); }
.daytabs a i { display: block; height: 5px; border-radius: 3px; margin: 7px 10px 4px; }
.windows { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .windows { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.window { padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid; }
.window.surf { border-top-color: var(--surf); } .window.bodyboard { border-top-color: var(--bodyboard); } .window.sup { border-top-color: var(--sup); }
.window .t { font: 600 20px var(--display); margin: 6px 0 2px; }

.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
table.hours { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
table.hours th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: 11px;
                 text-transform: uppercase; letter-spacing: .06em; padding: 9px 10px; text-align: left; white-space: nowrap; }
table.hours td { padding: 8px 10px; border-top: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.hours tr:hover td { background: rgba(47, 214, 198, 0.05); }
table.hours tr.dark td { color: var(--text-3); }
table.hours tr.dark .cell-score, table.hours tr.dark .rel, table.hours tr.dark svg.arr { opacity: .45; }
table.hours tr.nowrow td { background: rgba(255, 122, 89, 0.08); }
.cell-score { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 3px 0; border-radius: 8px;
              font-weight: 700; color: #04111d; font-size: 12px; }
.cell-score.nogo { color: #eaf4fb; }
svg.arr { width: 16px; height: 16px; vertical-align: -3px; }
svg.arr path { fill: var(--aqua); }
svg.arr.swell path { fill: var(--sky); }

.about-list { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; }
.tide-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tide-list div { padding: 10px; border-radius: 12px; background: var(--surface); text-align: center; }
.tide-list b { display: block; font: 600 18px var(--display); }

/* ------------------------------------------------------------------ map */
/* Phones: from under the top bar down to the tab bar, with no strip of page between (measured 2026-10-24:
   the top bar ends at 58 px and the tab bar is 68 px tall). */
.map-page { position: relative; height: calc(100vh - 56px - 68px - var(--safe-b) - var(--safe-t)); margin: -8px -14px 0; }
@media (min-width: 1024px) { .map-page { height: calc(100vh - 64px); margin: -24px -32px -40px; } }
@media (min-width: 1600px) { .map-page { margin: -28px -48px -48px; } }
#map { position: absolute; inset: 0; }
.map-tools { position: absolute; z-index: 5; left: 12px; right: 12px; top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.map-tools .panel { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px; border-radius: 14px;
                    background: var(--chrome-solid); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.map-tools select { background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 10px; }
.map-legend { position: absolute; z-index: 5; left: 12px; bottom: 14px; padding: 10px 12px; border-radius: 14px; font-size: 12px;
              background: var(--chrome-solid); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.map-legend .row { gap: 12px; flex-wrap: wrap; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-panel { position: absolute; z-index: 6; right: 12px; top: 70px; bottom: 14px; width: min(380px, calc(100% - 24px)); overflow-y: auto;
             padding: 18px; border-radius: 20px; background: var(--chrome-solid); border: 1px solid var(--line-2);
             backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow);
             transform: translateX(calc(100% + 24px)); transition: transform .25s ease; }
.map-panel.open { transform: none; }
/* Phones: the tools sit in one row that scrolls sideways, so they never cover half the map (BACKLOG 143). */
@media (max-width: 640px) { .map-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; right: 0; padding-right: 12px; }
                            .map-tools::-webkit-scrollbar { display: none; }
                            .map-tools .panel { flex-wrap: nowrap; flex: none; } }
@media (max-width: 640px) { .map-panel { top: auto; height: 62%; right: 8px; left: 8px; width: auto; transform: translateY(110%); }
                            .map-panel.open { transform: none; } }
.map-panel .close { position: absolute; right: 12px; top: 12px; }
.map-panel .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }  /* two across even on a phone */
/* MapLibre places each marker with an inline transform on the outer element, so
   nothing here may set or animate transform on .marker itself: that made pins lag
   and jump while zooming (BACKLOG 61).  The look and the hover grow live on .pin. */
.marker { width: 40px; height: 40px; cursor: pointer; }
.marker:hover, .marker.sel { z-index: 3; }
.marker .pin { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative;
               border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); transition: transform .15s; }
.marker:hover .pin, .marker.sel .pin { transform: scale(1.15); }
.marker .pin b { font: 700 13px var(--display); color: #04111d; }
.marker .pin.nogo b { color: #fff; }
.marker .pin.pinned::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%;
                             background: var(--coral); border: 2px solid #fff; }
.marker svg { position: absolute; inset: -14px; width: 68px; height: 68px; pointer-events: none; }
.marker svg path { fill: #fff; stroke: rgba(0, 0, 0, 0.4); stroke-width: .5; }
/* Above the filter bar (5) and the spot panel (6), so a hover card near the top
   of the map is never hidden under them (BACKLOG 65). */
.maplibregl-popup { z-index: 7; }
.maplibregl-popup-content { background: var(--tip-bg); color: var(--tip-text); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow);
                            font: 13px/1.45 var(--font); min-width: 200px; }
.maplibregl-popup-tip { border-top-color: #f2f8fc !important; border-bottom-color: #f2f8fc !important; }
.pop h4 { font: 700 15px var(--display); margin-bottom: 2px; }
.pop .r { display: flex; justify-content: space-between; gap: 12px; }
.pop .bar { display: flex; gap: 6px; margin-top: 6px; }
.maplibregl-ctrl-group { background: var(--chrome-solid) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-ctrl-attrib { background: var(--chrome) !important; color: var(--text-3); }
.maplibregl-ctrl-attrib a { color: var(--text-2); }

/* ------------------------------------------------------------------ spots list, week grid */
.spot-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 14px; border-radius: 14px;
            background: var(--surface); border: 1px solid var(--line); }
.spot-row a.name { color: var(--text); font-weight: 600; font-size: 15px; }
.table-scroll { overflow-x: auto; }
/* At a glance: fixed columns so eight days always fit the card, phones included,
   with no sideways scroller (BACKLOG 62). */
.glance-note { margin: -6px 0 8px; }
.heat { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.heat th { font-size: 11.5px; color: var(--text-3); font-weight: 600; text-align: center; padding: 4px 0; line-height: 1.2; }
.heat th span, .heat th b { display: block; }
.heat th b { color: var(--text-2); font-size: 13px; }
.heat th.l { width: 150px; text-align: left; color: var(--text); font-size: 13.5px; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat td { height: 48px; border-radius: 10px; text-align: center; color: #04111d; }
.heat td.nogo { color: #eaf4fb; }
.heat td a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 48px; color: inherit; line-height: 1.15; overflow: hidden; }
.heat td a:hover { text-decoration: none; }
.heat td a b { font: 700 14px var(--display); }
.heat td a span { font-size: 10.5px; font-weight: 600; opacity: .8; }
@media (max-width: 639px) {
  .card.glance { padding: 14px 10px; }
  .heat { border-spacing: 2px; }
  .heat th { font-size: 9.5px; }
  .heat th b { font-size: 11.5px; }
  .heat th.l { width: 70px; font-size: 11.5px; padding-right: 2px; }
  .heat td { height: 40px; border-radius: 7px; }
  .heat td a { height: 40px; }
  .heat td a b { font-size: 12.5px; }
  .heat td a span { font-size: 8px; letter-spacing: -0.01em; }
}

/* ------------------------------------------------------------------ store teaser */
/* The Store (BACKLOG 106): Dallas's two banners take turns behind the title, and each tile is
   one of his photos with its name over a shade at the foot. */
.store-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 260px;
  padding: 36px 32px; border-radius: 26px; border: 1px solid var(--line-2); background: #071a2b; }
/* A little shorter than the photos' own 3 : 1, and never taller than 390 px on wide screens (BACKLOG 111).
   A height, not an aspect ratio: with a minimum height an aspect ratio widens the box past the screen. */
@media (min-width: 1024px) { .store-hero { height: clamp(290px, 24vw, 390px); min-height: 0; padding: 36px 48px; } }
.store-slides { position: absolute; inset: 0; z-index: -2; }
.store-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.store-slide.on { opacity: 1; }
.store-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.store-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(4, 17, 29, 0.85) 0%, rgba(4, 17, 29, 0.55) 40%, rgba(4, 17, 29, 0) 70%); }
.store-copy { max-width: 440px; }
.store-copy h1 { font-size: 40px; margin: 10px 0; }
.store-copy p { margin: 0; color: var(--text); font-size: 16px; }
@media (max-width: 639px) {
  .store-hero { align-items: flex-end; min-height: 320px; padding: 22px; }
  .store-hero::before { background: linear-gradient(0deg, rgba(4, 17, 29, 0.9) 0%, rgba(4, 17, 29, 0.5) 50%, rgba(4, 17, 29, 0) 80%); }
  .store-copy h1 { font-size: 32px; }
}
.store-dots { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 8px; }
.store-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(234, 244, 251, 0.45); cursor: pointer; }
.store-dots button.on { background: var(--aqua); }
.soon-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
@media (min-width: 1024px) { .soon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.soon-tile { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 18px; border: 1px solid var(--line-2);
  display: flex; align-items: flex-end; background: var(--surface); }
.soon-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.soon-tile:hover img { transform: scale(1.04); }
.soon-tile::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(4, 17, 29, 0.95) 0%, rgba(4, 17, 29, 0.78) 34%, rgba(4, 17, 29, 0) 66%); }
@media (max-width: 639px) {
  .soon-copy { padding: 10px; gap: 2px; }
  .soon-copy b { font-size: 14px; }
  .soon-copy .small { font-size: 11.5px; line-height: 1.35; }
  .soon-copy .badge { font-size: 11px; }
}
.soon-copy { display: grid; gap: 4px; justify-items: start; padding: 14px; color: var(--text-2); }
.soon-copy b { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 16px; }
.soon-copy .badge { margin-top: 4px; }

.empty { text-align: center; padding: 50px 20px; color: var(--text-2); }
.foot { margin-top: 36px; font-size: 12px; color: var(--text-3); text-align: center; }
.foot a { color: var(--text-2); }

/* ================================================================== second round:
   forms, wizard, planner, sessions, diary, guest pages, admin */

/* ------------------------------------------------------------------ forms */
.field { display: block; margin-bottom: 14px; min-width: 0; }
.field > span { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.field > span em, .label-like em { font-style: normal; font-weight: 400; }
.field > em { display: block; margin-top: 5px; font-style: normal; }
.field input, .field select, .field textarea, .input {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field);
  color: var(--text); outline: none; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(47, 214, 198, 0.15); }
.input.sm { padding: 6px 10px; font-size: 13px; width: auto; border-radius: 9px; }
textarea.input { resize: vertical; min-height: 80px; }
select.input option { background: var(--surface); }
input[type="time"].input { min-height: 46px; }
.label-like { font-size: 12.5px; color: var(--text-2); font-weight: 500; margin: 6px 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.section-tight { margin-top: 10px; margin-bottom: 10px; }

.pick-grid { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 14px; }
/* Phones: two across, so nine sports (BACKLOG 54) are not a long scroll. */
@media (max-width: 639px) { .pick-grid:not(.two) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pick-grid .pick > span { padding: 10px 12px; } .pick-grid .pick > span b { font-size: 14px; }
  .pick-grid .pick > span small { font-size: 11.5px; } }
@media (min-width: 640px) { .pick-grid { grid-template-columns: repeat(3, 1fr); } .pick-grid.two { grid-template-columns: repeat(2, 1fr); } }
.pick { position: relative; cursor: pointer; display: block; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick > span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 14px;
               border: 1px solid var(--line-2); background: var(--surface); transition: border-color .15s, background .15s; }
.pick > span b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pick > span small { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.pick:hover > span { border-color: rgba(47, 214, 198, 0.5); }
.pick input:checked + span { border-color: var(--aqua); background: rgba(47, 214, 198, 0.12); box-shadow: inset 0 0 0 1px var(--aqua); }
.pick input:focus-visible + span { box-shadow: 0 0 0 4px rgba(47, 214, 198, 0.25); }
.seg-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
            margin-bottom: 14px; width: fit-content; max-width: 100%; }
.seg-pick label { cursor: pointer; position: relative; }
.seg-pick input { position: absolute; opacity: 0; pointer-events: none; }
.seg-pick span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.seg-pick input:checked + span { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(47, 214, 198, 0.5); }
label.chip { position: relative; }
label.chip:has(input:checked) { background: rgba(47, 214, 198, 0.14); border-color: var(--aqua); color: var(--text); }

/* ------------------------------------------------------------------ nav additions */
.count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--coral); color: #fff;
         font: 700 11px/20px var(--font); text-align: center; }
.plan-btn { margin: 18px 4px 0; }
.me-link { display: flex; flex-direction: column; color: var(--text); }
.me-link:hover { text-decoration: none; }
.me-link b { font-size: 14px; }
.me-link span { font-size: 12px; color: var(--text-3); }
.avatar-link { display: inline-flex; border-radius: 50%; }
.avatar.xl { width: 96px; height: 96px; font-size: 36px; border-width: 3px; }
.tabs a { position: relative; }
.tabs a .count { position: absolute; top: 2px; left: 55%; margin: 0; min-width: 18px; height: 18px; line-height: 18px; font-size: 10px; font-style: normal; }
.tabs .tab-plan span { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; color: #04212a;
                        background: linear-gradient(135deg, #3ee0cf, #3987e5); box-shadow: 0 8px 24px rgba(47, 214, 198, 0.4); border: 3px solid var(--bg); }
.tabs .tab-plan.on { background: none; }
svg.i.flip { transform: scaleX(-1); }

/* ------------------------------------------------------------------ wizard and guest pages share a photo backdrop */
body.wizard-page, body.guest-page { background: #020b14; }
.wizard-bg { position: fixed; inset: 0; z-index: 0; }
.wizard-bg img { width: 100%; height: 100%; object-fit: cover; }
.wizard-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 11, 20, 0.55), rgba(2, 11, 20, 0.85)); }
.wizard-wrap { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
               padding: calc(20px + var(--safe-t)) 12px calc(20px + var(--safe-b)); }
.wizard { width: 100%; max-width: 680px; padding: 26px 22px; border-radius: 26px; background: rgba(8, 26, 42, 0.72); border: 1px solid rgba(255, 255, 255, 0.14);
          backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
          animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
@media (min-width: 760px) { .wizard { padding: 36px 40px; } }
.wizard-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.wizard-head h1, .guest-card h1 { font: 400 30px/1.15 "DM Serif Display", Georgia, serif; }
@media (min-width: 760px) { .wizard-head h1, .guest-card h1 { font-size: 36px; } }
.kicker { margin: 0 0 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); font-weight: 700; }
.progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.progress i { display: block; height: 100%; width: 20%; border-radius: 3px; background: linear-gradient(90deg, var(--aqua), var(--surf)); transition: width .35s ease; }
.step-name { margin: 10px 0 18px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.wizard.js .step { display: none; }
.wizard.js .step.on { display: block; animation: stepin .35s ease both; }
@keyframes stepin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wizard:not(.js) [data-next], .wizard:not(.js) [data-back], .wizard:not(.js) .progress, .wizard:not(.js) .step-name { display: none; }
.wizard-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.wizard-nav .grow { flex: 1; }
.push-card { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); }
.push-card .row { align-items: flex-start; }
.push-card .grow { flex: 1; }
.push-card p { margin: 2px 0 0; }
.push-card.on { border-color: var(--aqua); }
.details-form h3 { margin-top: 10px; }
.brand-sm { display: inline-flex; align-items: center; gap: 8px; font: 700 18px var(--display); }
.brand-sm .logo-mark { width: 26px; height: 26px; }
.hero-when { font-size: 17px; margin: 8px 0 2px; }
.v.small-v { font-size: 16px; }
.pack-details summary { cursor: pointer; list-style: none; }
.pack-details summary::-webkit-details-marker { display: none; }
.notes { white-space: pre-line; padding: 12px 14px; border-radius: 12px; background: var(--surface); font-size: 14px; margin: 0; }

/* ------------------------------------------------------------------ dashboard additions */
.nudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px;
         background: rgba(57, 135, 229, 0.12); border: 1px solid rgba(57, 135, 229, 0.35); color: var(--text); }
.nudge .grow { flex: 1; min-width: 200px; }
.nudge p { margin: 2px 0 0; }
.nudge.attention, .card.attention { background: rgba(255, 122, 89, 0.1); border-color: rgba(255, 122, 89, 0.4); }
a.nudge:hover { text-decoration: none; border-color: var(--coral); }
.next-sessions { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 760px) { .next-sessions { grid-template-columns: repeat(3, 1fr); } }
.next-card { position: relative; display: flex; min-height: 120px; border-radius: 20px; overflow: hidden; color: #fff; border: 1px solid var(--line-2); }
.next-card:hover { text-decoration: none; border-color: var(--aqua); }
.next-photo { position: absolute; inset: 0; }
.next-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.next-card:hover .next-photo img { transform: scale(1.05); }
.next-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 11, 20, 0.9), rgba(2, 11, 20, 0.35)); }
.next-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; }
.next-body b { font: 600 19px var(--display); }
.next-body .kicker { color: var(--sand); }

.sugg { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
        transition: border-color .15s; }
.sugg:hover { border-color: rgba(47, 214, 198, 0.5); transform: none; }
.sugg-main { display: flex; gap: 14px; align-items: center; flex: 1; min-width: 0; color: var(--text); }
.sugg-main:hover { text-decoration: none; }
.sugg .score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.plan-it { margin-top: 4px; }

/* ------------------------------------------------------------------ profile */
.profile-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px; border-radius: 24px; border: 1px solid var(--line-2);
                background: radial-gradient(600px 260px at 100% 0%, rgba(47, 214, 198, 0.2), transparent 60%), linear-gradient(135deg, var(--hero-a), var(--hero-c)); }
.profile-hero .grow { flex: 1; min-width: 200px; }
.profile-hero h1 { font: 400 34px/1.1 "DM Serif Display", Georgia, serif; margin-bottom: 10px; }
.stats-mini { display: flex; gap: 10px; }
.stats-mini div { padding: 12px 16px; border-radius: 14px; background: var(--inset); text-align: center; min-width: 96px; }
.stats-mini b { display: block; font: 700 28px var(--display); }
.stats-mini span { font-size: 12px; color: var(--text-2); }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.link-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--text); background: var(--surface); }
.link-list a:hover { text-decoration: none; background: var(--surface-3); }
.link-list a > svg:last-child { margin-left: auto; }
.link-list .grow { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ session rows and tags */
.srow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
        color: var(--text); border-left: 4px solid var(--surf); }
.srow + .srow { margin-top: 8px; }
.srow.bodyboard { border-left-color: var(--bodyboard); }
.srow.sup { border-left-color: var(--sup); }
.srow:hover { text-decoration: none; border-color: rgba(47, 214, 198, 0.5); }
.srow.cancelled { opacity: .55; }
.srow .when { width: 54px; flex: none; text-align: center; padding: 6px 0; border-radius: 12px; background: var(--surface-3); line-height: 1.15; }
.srow .when span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.srow .when b { display: block; font: 700 21px var(--display); }
.srow .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srow .what b { font-size: 15px; }
.srow .tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.faces { display: flex; align-items: center; margin-top: 4px; }
.face { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 11px var(--font); font-style: normal;
        background: var(--surface-3); color: var(--aqua); border: 2px solid var(--surface); margin-right: -6px; flex: none; }
.face.sm { width: 22px; height: 22px; margin-right: 2px; border: 0; }
.face.more { color: var(--text-2); }
.faces .tiny { margin-left: 12px; }
.stag, .rtag { display: inline-flex; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.stag.on { background: rgba(52, 211, 153, 0.16); color: var(--good-text); }
.stag.vote { background: rgba(250, 204, 21, 0.14); color: #fde68a; }
.stag.cancelled { background: rgba(100, 116, 139, 0.25); color: #cbd5e1; }
.rtag.going { color: var(--good-text); }
.rtag.maybe { color: #fde68a; }
.rtag.no { color: var(--text-3); }
.rtag.invited { background: var(--coral); color: #fff; }

/* ------------------------------------------------------------------ planner */
.plan-form .card h3 { margin-bottom: 14px; }
@media (min-width: 1200px) { .sticky-col { position: sticky; top: 88px; align-self: start; } }
.best-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; font-size: 13.5px;
             background: rgba(180, 140, 255, 0.12); border: 1px solid rgba(180, 140, 255, 0.35); margin: 4px 0 0; }
.best-hint span { flex: 1; min-width: 160px; }
.guest-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.guest-row { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .guest-row { grid-template-columns: 1fr 1.4fr; } }
.pv-score { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pv-score b { font: 700 34px var(--display); }
.preview .kv { margin-bottom: 10px; }
.preview.loading [data-preview-body] { opacity: .5; }

/* ------------------------------------------------------------------ session page */
.session-hero { position: relative; overflow: hidden; border-radius: 26px; min-height: 300px; display: flex; align-items: flex-end; border: 1px solid var(--line-2); }
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Darker at the top as well as the foot, so the crumbs and tags stay readable on a bright photo
   (Candice's iPhone, 2026-10-24: they washed out against the aerial shot). */
.session-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 11, 20, 0.55) 0%, rgba(2, 11, 20, 0.2) 28%, rgba(2, 11, 20, 0.35) 50%, rgba(2, 11, 20, 0.9) 100%); }
.session-hero .crumbs, .session-hero .crumbs a { color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.session-hero .stag { box-shadow: inset 0 0 0 99px rgba(2, 11, 20, 0.45); }
.session-hero.cancelled .hero-photo img { filter: grayscale(1); }
.hero-inner { position: relative; z-index: 1; padding: 26px 22px 22px; width: 100%; }
@media (min-width: 1024px) { .session-hero { min-height: 380px; } .hero-inner { padding: 36px 36px 30px; } }
.hero-inner h1 { font: 400 34px/1.1 "DM Serif Display", Georgia, serif; margin: 10px 0 2px; }
@media (min-width: 1024px) { .hero-inner h1 { font-size: 48px; } }
.hero-inner .crumbs a { color: rgba(255, 255, 255, 0.8); }
.hero-actions { margin-top: 16px; }
.btn.wa { background: #25d366; border-color: #25d366; color: #04210f; }
.btn.wa:hover { background: #2ee673; }
.answer-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 18px;
              background: var(--surface); border: 1px solid var(--line-2); }
.answer-bar .grow { flex: 1; min-width: 200px; }
.answer-bar p { margin: 2px 0 0; }
.answer-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.answer-btns.wide { display: grid; grid-template-columns: repeat(3, 1fr); }
.answer-btns.wide .btn { padding: 13px 8px; white-space: normal; }
.btn.ans.on.going { background: var(--good); border-color: var(--good); color: #04111d; }
.btn.ans.on.maybe { background: var(--fair); border-color: var(--fair); color: #04111d; }
.btn.ans.on.no { background: var(--surface-3); border-color: var(--text-3); }
.manage { display: flex; gap: 8px; flex-wrap: wrap; }
.window-stats .stat { background: var(--surface); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.timeline li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 0 0 14px 18px; border-left: 2px solid var(--line-2); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 3px var(--bg); }
.timeline b { font: 600 15px var(--display); }
.timeline span { font-size: 14px; color: var(--text-2); }
.pack { display: grid; gap: 4px 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pack { grid-template-columns: repeat(2, 1fr); } }
.tick { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; cursor: pointer; font-size: 14px; border-radius: 8px; }
.tick:hover { background: var(--surface); }
.tick input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--aqua); flex: none; }
.tick input:checked + span { color: var(--text-3); text-decoration: line-through; }
.people { list-style: none; margin: 0 0 10px; padding: 0; }
.people li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.people li .face { margin: 0; }
.people li .grow { flex: 1; }
.people li.going .face { background: rgba(52, 211, 153, 0.2); color: var(--good-text); }
.people li.maybe .face { background: rgba(250, 204, 21, 0.18); color: #fde68a; }
.people li.no { opacity: .55; }
.people em { font-style: normal; font-size: 12px; }
.copy-row { display: flex; gap: 8px; }
.copy-row .input { font-size: 13px; padding: 8px 10px; }

/* ------------------------------------------------------------------ diary calendar */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-head .grow { flex: 1; }
.cal-head h2 { font: 400 26px "DM Serif Display", Georgia, serif; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 4px 0; }
.cal-day { min-height: 64px; padding: 5px; border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
@media (min-width: 1024px) { .cal-day { min-height: 96px; } }
.cal-day .num { font-size: 12px; font-weight: 600; color: var(--text-2); }
.cal-day.out { opacity: .35; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--aqua); }
.cal-day.today .num { color: var(--aqua); }
.cal-ev { display: flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 6px; font-size: 11px; color: var(--text); background: var(--surface-3);
          white-space: nowrap; overflow: hidden; }
.cal-ev span { overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { text-decoration: none; background: rgba(47, 214, 198, 0.2); }
.cal-ev.vote { background: transparent; border: 1px dashed var(--line-2); }
.cal-ev.cancelled { opacity: .45; text-decoration: line-through; }
@media (max-width: 639px) { .cal-ev span { display: none; } .cal-ev { justify-content: center; } }

/* ------------------------------------------------------------------ admin */
.people-table { min-width: 640px; }
.people-table td { vertical-align: middle; }
.window-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .window-stats.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.guest-card .kicker { margin-top: 20px; }
@media (max-width: 639px) { .timeline li { grid-template-columns: 64px 1fr; gap: 8px; } }

/* ================================================================== third round:
   clocking sessions, XP and badges, beach reports */

/* ------------------------------------------------------------------ levels and XP */
.hello-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lv-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--surface);
           border: 1px solid var(--line-2); color: var(--text); }
.lv-chip:hover { text-decoration: none; border-color: var(--aqua); }
.lv-chip b { display: block; font-size: 13px; line-height: 1.1; }
.lv-chip small { font-size: 11px; color: var(--text-2); }
.lv-num { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; align-content: center;
          background: linear-gradient(135deg, var(--epic), var(--surf)); color: #fff; line-height: 1; box-shadow: 0 8px 22px rgba(180, 140, 255, 0.3); }
.lv-num span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.lv-num b { font: 700 24px var(--display); }
.lv-num.sm { width: 36px; height: 36px; border-radius: 50%; box-shadow: none; }
.lv-num.sm span { font-size: 8px; }
.lv-num.sm b { font-size: 15px; }
.level-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid rgba(180, 140, 255, 0.35);
              background: radial-gradient(400px 160px at 0% 0%, rgba(180, 140, 255, 0.18), transparent 70%), var(--surface); }
.level-card .grow { flex: 1; min-width: 0; }
.level-card .row b { font: 600 18px var(--display); }
.xp-bar svg { width: 100%; height: 8px; display: block; margin: 8px 0 4px; }
.xp-track { fill: var(--hover); }
.xp-fill { fill: var(--epic); }
.xp-log, .board { list-style: none; margin: 0; padding: 0; }
.xp-log li, .board li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.xp-log b { color: #d6c2ff; }
.board li .grow, .xp-log li .grow { flex: 1; min-width: 0; }
.board li.me { color: var(--aqua); }
.board .face { margin: 0; }

/* ------------------------------------------------------------------ badges */
.badge-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .badge-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.badge-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 6px; border-radius: 14px;
              background: var(--surface); border: 1px solid var(--line); }
.badge-tile b { font-size: 12.5px; line-height: 1.2; }
.badge-tile.earned { border-color: rgba(180, 140, 255, 0.35); }
.badge-tile.earned .badge-svg { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }
.badge-svg.locked { filter: grayscale(1); opacity: .3; }
.badge-tile.locked b { color: var(--text-2); }
.new-badges { border-color: rgba(180, 140, 255, 0.5); background: radial-gradient(500px 200px at 50% 0%, rgba(180, 140, 255, 0.2), transparent 70%), var(--surface); }
.new-badge { display: flex; align-items: center; gap: 14px; padding: 6px 16px 6px 0; }
.new-badge .badge-svg { animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.new-badge p { margin: 2px 0 0; }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ clock */
.clock-start .seg-pick { margin-bottom: 0; }
/* The breathing rings reach 34 px past the button and the glow about 48 px below it,
   so the margins keep all of that inside the card (BACKLOG 63). */
.go-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 200px; height: 200px; margin: 36px auto 46px;
          border-radius: 50%; border: 0; cursor: pointer; color: #04212a; background: radial-gradient(circle at 30% 25%, #6ff0e2, #22b8c9 55%, #3987e5);
          box-shadow: 0 0 0 10px rgba(47, 214, 198, 0.12), 0 0 0 22px rgba(47, 214, 198, 0.06), 0 14px 34px rgba(34, 184, 201, 0.35);
          animation: breathe 3.5s ease-in-out infinite; transition: transform .15s; }
.go-btn:hover { transform: scale(1.03); }
.go-btn:active { transform: scale(.97); }
.go-btn b { font: 700 24px var(--display); }
.go-btn small { font-size: 12.5px; opacity: .8; }
.go-btn svg.i { width: 34px; height: 34px; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 10px rgba(47, 214, 198, 0.12), 0 0 0 22px rgba(47, 214, 198, 0.06), 0 14px 34px rgba(34, 184, 201, 0.35); }
                     50% { box-shadow: 0 0 0 16px rgba(47, 214, 198, 0.14), 0 0 0 34px rgba(47, 214, 198, 0.05), 0 14px 34px rgba(34, 184, 201, 0.35); } }
@media (prefers-reduced-motion: reduce) { .go-btn { animation: none; } }
.clock-live { text-align: center; padding: 34px 20px 26px; border-radius: 26px; border: 1px solid var(--line-2); margin-bottom: 14px;
              background: radial-gradient(500px 240px at 50% 0%, rgba(47, 214, 198, 0.25), transparent 70%), linear-gradient(180deg, var(--hero-a), var(--hero-c)); }
.timer { font: 700 72px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 10px 0 12px;
         background: linear-gradient(135deg, #fff, #9ff3ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 760px) { .timer { font-size: 104px; } }
.pick.effort.low input:checked + span { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); background: rgba(52, 211, 153, 0.1); }
.pick.effort.medium input:checked + span { border-color: var(--fair); box-shadow: inset 0 0 0 1px var(--fair); background: rgba(250, 204, 21, 0.08); }
.pick.effort.high input:checked + span { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); background: rgba(255, 122, 89, 0.1); }
.stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label { cursor: pointer; color: var(--text-3); padding: 4px; }
.stars label svg.i { width: 28px; height: 28px; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: var(--fair); }
.stars input:checked ~ label svg.i, .stars label:hover svg.i, .stars label:hover ~ label svg.i { fill: currentColor; }
.ride-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--text);
            border-left: 3px solid var(--surf); margin-top: 6px; flex-wrap: wrap; }
.ride-row.bodyboard { border-left-color: var(--bodyboard); }
.ride-row.sup { border-left-color: var(--sup); }
.ride-row:hover { text-decoration: none; background: var(--surface-3); }
.ride-row .grow { flex: 1; min-width: 120px; }

/* ------------------------------------------------------------------ ride summary */
.ride-hero { position: relative; overflow: hidden; text-align: center; padding: 34px 20px 24px; border-radius: 26px; border: 1px solid var(--line-2);
             background: radial-gradient(600px 260px at 50% 0%, rgba(47, 214, 198, 0.25), transparent 70%), linear-gradient(180deg, var(--hero-a), var(--hero-c)); }
.ride-hero h1 { font: 400 34px/1.1 "DM Serif Display", Georgia, serif; margin: 6px 0; }
@media (min-width: 1024px) { .ride-hero h1 { font-size: 46px; } }
.ride-stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.ride-stats div { min-width: 100px; padding: 12px 16px; border-radius: 16px; background: var(--inset); border: 1px solid var(--line); }
.ride-stats b { display: block; font: 700 34px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ride-stats span { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; }
.ride-stats.compact { justify-content: flex-start; margin: 0 0 10px; }
.ride-stats.compact b { font-size: 24px; }
.xp-pop { border-color: rgba(180, 140, 255, 0.5) !important; background: rgba(180, 140, 255, 0.15) !important; }
.xp-pop b { color: #e2d4ff; }
.ride-hero.done .ride-stats div { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.ride-hero.done .ride-stats div:nth-child(2) { animation-delay: .1s; }
.ride-hero.done .ride-stats div:nth-child(3) { animation-delay: .2s; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: fall 2.8s ease-in forwards; }
.confetti i:nth-child(3n) { background: var(--aqua); } .confetti i:nth-child(3n+1) { background: var(--epic); } .confetti i:nth-child(3n+2) { background: var(--fair); }
.confetti i:nth-child(1) { left: 6%; animation-delay: .0s; } .confetti i:nth-child(2) { left: 12%; animation-delay: .3s; }
.confetti i:nth-child(3) { left: 18%; animation-delay: .15s; } .confetti i:nth-child(4) { left: 24%; animation-delay: .45s; }
.confetti i:nth-child(5) { left: 30%; animation-delay: .1s; } .confetti i:nth-child(6) { left: 36%; animation-delay: .6s; }
.confetti i:nth-child(7) { left: 42%; animation-delay: .25s; } .confetti i:nth-child(8) { left: 48%; animation-delay: .05s; }
.confetti i:nth-child(9) { left: 54%; animation-delay: .5s; } .confetti i:nth-child(10) { left: 60%; animation-delay: .2s; }
.confetti i:nth-child(11) { left: 66%; animation-delay: .35s; } .confetti i:nth-child(12) { left: 72%; animation-delay: .0s; }
.confetti i:nth-child(13) { left: 78%; animation-delay: .55s; } .confetti i:nth-child(14) { left: 84%; animation-delay: .15s; }
.confetti i:nth-child(15) { left: 90%; animation-delay: .4s; } .confetti i:nth-child(16) { left: 95%; animation-delay: .7s; }
.confetti i:nth-child(17) { left: 3%; animation-delay: .65s; } .confetti i:nth-child(18) { left: 50%; animation-delay: .8s; }
@keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(360px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* ------------------------------------------------------------------ beach reports */
.report { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
          margin-bottom: 8px; }
.report p { margin: 2px 0 0; }
.report.good { border-color: rgba(52, 211, 153, 0.4); }
.report.fair { border-color: rgba(250, 204, 21, 0.4); }
.report.poor, .report.alert { border-color: rgba(255, 122, 89, 0.6); background: rgba(255, 122, 89, 0.1); }
.report.nogo.alert { border-color: #ff5a5a; background: rgba(255, 90, 90, 0.14); }
.flag-swatch { display: inline-block; width: 22px; height: 16px; border-radius: 3px; flex: none; border: 1px solid rgba(255, 255, 255, 0.35);
               vertical-align: -3px; margin-top: 2px; }
.flag-swatch.green { background: #22a35a; }
.flag-swatch.black { background: #0b0b0b; }
.flag-swatch.red { background: #d62828; }
.flag-swatch.white { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M3 11c3 0 5-1 8-1s5 1 8 1M8 10l3-6 2 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.flag-swatch.none, .flag-swatch.unknown { background: repeating-linear-gradient(45deg, var(--surface-3) 0 4px, transparent 4px 8px); }
.report-form summary { list-style: none; display: inline-flex; margin-top: 4px; }
.report-form summary::-webkit-details-marker { display: none; }
.report-form[open] summary { margin-bottom: 4px; }

/* ------------------------------------------------------------------ live clock controls and the effort timeline */
.clock-live.paused { background: linear-gradient(180deg, var(--surface-3), var(--surface)); }
.clock-live.paused .timer { background: linear-gradient(135deg, #cbd5e1, #94a3b8); -webkit-background-clip: text; background-clip: text; }
.effort-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 560px; margin: 18px auto 10px; }
.eff-btn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border-radius: 16px; cursor: pointer;
           border: 1px solid var(--line-2); background: var(--inset); color: var(--text-2); transition: all .15s; }
.eff-btn b { font: 600 16px var(--display); color: var(--text); }
.eff-btn small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.eff-btn.low.on { background: var(--good); border-color: var(--good); }
.eff-btn.medium.on { background: var(--fair); border-color: var(--fair); }
.eff-btn.high.on { background: var(--coral); border-color: var(--coral); }
.eff-btn.on b, .eff-btn.on small { color: #04111d; }
.eff-btn:not(.on):hover { border-color: var(--aqua); }
.live-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 560px; margin: 0 auto; }
.live-actions .btn { width: 100%; white-space: normal; }
.wave-btn[disabled] { opacity: .4; cursor: not-allowed; }
.count-pill { min-width: 26px; padding: 2px 8px; border-radius: 99px; background: var(--aqua); color: #04212a; font-size: 13px; }
.strip-wrap { margin-bottom: 12px; }
.effort-strip { width: 100%; height: 34px; display: block; }
.effort-strip .seg.low { fill: var(--good); }
.effort-strip .seg.medium { fill: var(--fair); }
.effort-strip .seg.high { fill: var(--coral); }
.effort-strip .seg.break { fill: var(--surface-3); }
.effort-strip .wave-tick { fill: var(--sky); }
.legend i.eff { width: 12px; height: 8px; border-radius: 2px; }
.legend i.eff.low { background: var(--good); }
.legend i.eff.medium { background: var(--fair); }
.legend i.eff.high { background: var(--coral); }
.legend i.eff.break { background: var(--surface-3); }
.legend i.eff.wave { background: var(--sky); width: 3px; height: 10px; }
.events { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.events li { display: flex; gap: 12px; padding: 7px 0 7px 12px; border-left: 3px solid var(--line-2); font-size: 14px; }
.events li b { font-variant-numeric: tabular-nums; width: 46px; flex: none; }
.events li.low { border-left-color: var(--good); }
.events li.medium { border-left-color: var(--fair); }
.events li.high { border-left-color: var(--coral); }
.events li.pause { border-left-color: var(--text-3); color: var(--text-2); }
.events li.wave { border-left-color: var(--sky); color: var(--text-2); }
.events li.finish { border-left-color: var(--aqua); }
.copy-row .input { flex: 1; min-width: 0; width: auto; }
.copy-row .btn { flex: none; }
/* Grid items default to min-width: auto, so one wide child (the hourly table) would
   stretch the whole column past the screen on phones.  Let them shrink. */
.split > *, .g2 > *, .g3 > *, .g4 > *, .g6 > * { min-width: 0; }
.row > .grow { flex: 1; }
img.logo-mark { border-radius: 26%; object-fit: cover; }
.narrow-card { max-width: 520px; }

/* ================================================================== fourth round:
   review fixes, the profile pop-out, a level for each sport */

/* Buttons in a card heading keep their own case, not the heading's capitals. */
.card h3 .btn { text-transform: none; letter-spacing: 0; }

/* Profile notifications: status, then the buttons, with room between (BACKLOG 60). */
.push-status { margin: 0 0 12px; }
[data-push].on .push-status { color: var(--good-text); }
.ios-hint { margin: 10px 0 0; }

/* Login: one line per phone in the install steps (BACKLOG 64). */
.install-steps { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; align-items: center; margin: 0; }
.install-steps dt { font-weight: 700; color: var(--box-text); }
.install-steps dd { margin: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.install-steps dd b { color: var(--box-text); }
.install-steps svg.i { width: 13px; height: 13px; opacity: .55; }
.install-body .install-note { margin: 9px 0 0; font-size: 12px; }

/* A level for each sport (BACKLOG 55): a row per sport, shown only when it is ticked. */
.lvl-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.lvl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lvl-row > b { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; font-size: 14px; }
.lvl-row .seg-pick { margin: 0; }
.step:has(input[name="sports"][value="surf"]:not(:checked)) .lvl-row.surf,
.step:has(input[name="sports"][value="bodyboard"]:not(:checked)) .lvl-row.bodyboard,
.step:has(input[name="sports"][value="sup"]:not(:checked)) .lvl-row.sup,
.step:has(input[name="sports"][value="kite"]:not(:checked)) .lvl-row.kite,
.step:has(input[name="sports"][value="wing"]:not(:checked)) .lvl-row.wing,
.step:has(input[name="sports"][value="windsurf"]:not(:checked)) .lvl-row.windsurf,
.step:has(input[name="sports"][value="surfski"]:not(:checked)) .lvl-row.surfski,
.step:has(input[name="sports"][value="kayak"]:not(:checked)) .lvl-row.kayak,
.step:has(input[name="sports"][value="swim"]:not(:checked)) .lvl-row.swim { display: none; }
@media (max-width: 639px) { .lvl-row { gap: 6px; } .lvl-row .seg-pick span { padding: 7px 10px; font-size: 13px; } }

/* ------------------------------------------------------------------ profile pop-out (BACKLOG 67)
   Slides in from the right when the avatar in the top bar is tapped.  Without
   JavaScript the avatar is a plain link to the profile page. */
.drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(2, 8, 14, 0.55); opacity: 0; transition: opacity .2s; }
.drawer-scrim.open { opacity: 1; }
.drawer { position: fixed; z-index: 91; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); overflow-y: auto;
          padding: calc(18px + var(--safe-t)) 20px calc(20px + var(--safe-b)); background: var(--bg-2); border-left: 1px solid var(--line-2);
          box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45); transform: translateX(105%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.drawer.open { transform: none; }
.drawer:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-scrim { transition: none; } }
.drawer-x { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; }
.drawer-head { display: flex; align-items: center; gap: 14px; padding: 8px 40px 16px 0; border-bottom: 1px solid var(--line); }
.drawer-head .avatar { width: 64px; height: 64px; font-size: 24px; }
.drawer-head b { display: block; font: 600 20px var(--display); }
.drawer-head span { font-size: 13px; color: var(--text-2); }
.drawer .lv-line { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; }
.drawer .lv-line .grow { flex: 1; min-width: 0; }
.drawer .xp-bar svg { margin: 6px 0 0; }
.drawer .stats-mini { margin: 14px 0; }
.drawer .stats-mini div { flex: 1; min-width: 0; padding: 10px 6px; }
.drawer .stats-mini b { font-size: 22px; }
.drawer-sports { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px; }
.drawer-sports div { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface); font-size: 14px; }
.drawer-sports div span:last-child { margin-left: auto; color: var(--text-2); font-size: 13px; }
/* Every page the phone's tab bar leaves out (BACKLOG 153); the side menu has them on a desktop. */
.drawer-nav { display: none; }
@media (max-width: 1023px) {
  .drawer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
  .drawer-nav a { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 14px;
                  background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 500; text-align: center; line-height: 1.25; }
  .drawer-nav a:hover { text-decoration: none; background: var(--surface-3); }
  .drawer-nav svg.i { width: 22px; height: 22px; color: var(--aqua); }
  .drawer-nav em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); }
  .drawer-nav .count { position: absolute; top: 6px; right: 8px; margin: 0; font-style: normal; }
}
.drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-actions .btn { width: 100%; }
.drawer details { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.drawer details summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.drawer details summary::-webkit-details-marker { display: none; }
.drawer details summary .i:last-child { margin-left: auto; transition: transform .15s; }
.drawer details[open] summary .i:last-child { transform: rotate(90deg); }
.drawer details form { margin-top: 12px; }
.drawer .field { margin-bottom: 10px; }
.drawer .field input, .drawer .field select { padding: 10px 12px; font-size: 15px; }
.drawer-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.drawer-foot .grow { flex: 1; }
body.drawer-on { overflow: hidden; }
.drawer .g2 { grid-template-columns: 1fr 1fr; }
/* The login caption's photo title shares the .kicker class name with the small
   capitals over headings elsewhere; keep it the plain white serif it was drawn as. */
.login-caption .kicker { text-transform: none; letter-spacing: 0; color: #fff; margin: 0; font-weight: 400; }

/* ------------------------------------------------------------------ best bet and favourites (BACKLOG 74) */
.seg a { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 9px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a.on { background: var(--surface-3); color: var(--text); }
.best-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.best-pick .seg { background: var(--inset); }

.rank-list { display: flex; flex-direction: column; gap: 12px; }
.rank-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px; border-radius: var(--radius);
             background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); }
.rank-card.first { border-color: rgba(47, 214, 198, 0.5); background: radial-gradient(500px 200px at 0% 0%, rgba(47, 214, 198, 0.14), transparent 70%),
                   linear-gradient(180deg, var(--card-a), var(--card-b)); }
.rank-num { grid-row: span 3; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 700 20px var(--display);
            background: var(--surface-3); color: var(--text-2); }
.rank-card.first .rank-num { background: linear-gradient(135deg, var(--aqua), var(--surf)); color: #04212a; }
.rank-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rank-title h2 { font-size: 20px; margin-right: 2px; }
.rank-title h2 a { color: var(--text); }
.rank-main p { margin: 2px 0 0; }
.rank-why { color: var(--text); margin-top: 6px !important; }
.rank-sports { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rank-sport { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 99px; background: var(--surface);
              border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.rank-sport.on { border-color: var(--line-2); color: var(--text); }
.rank-sport b { min-width: 24px; padding: 1px 6px; border-radius: 99px; text-align: center; color: #04111d; font-size: 12px; }
.rank-sport b.nogo { color: #eaf4fb; }
.rank-stats { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 8px 0 0; font-size: 13px; }
.rank-stats dt { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.rank-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.rank-side { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (min-width: 900px) {
  .rank-card { grid-template-columns: 52px minmax(0, 1fr) 300px auto; align-items: center; padding: 18px 20px; }
  .rank-num { grid-row: auto; width: 52px; height: 52px; font-size: 24px; }
  .rank-stats { grid-column: auto; margin: 0; }
  .rank-side { grid-column: auto; flex-direction: column; align-items: stretch; margin: 0; }
}

/* The floating tooltip app.js uses in place of the CSS ones, kept on screen (BACKLOG 66, 79, 81). */
.js-tips [data-tip]::after { content: none; }
.tip-bubble { position: fixed; z-index: 95; left: 0; top: 0; max-width: min(280px, calc(100vw - 16px)); padding: 8px 11px; border-radius: 10px;
              background: var(--tip-bg); color: var(--tip-text); font: 500 12.5px/1.4 var(--font); box-shadow: var(--shadow); pointer-events: none;
              opacity: 0; transition: opacity .4s; }
.tip-bubble.on { opacity: 1; transition-duration: .12s; }

/* Sport and effort pickers that share their row evenly, one line each (BACKLOG 83). */
.seg-pick.fill { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.seg-pick.fill span { justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.center-row { display: flex; justify-content: center; }
.live-actions.one { grid-template-columns: 1fr; max-width: 320px; margin-bottom: 10px; }

/* Paddle out: no focus box on a tap, and a ripple while the clock starts (BACKLOG 84). */
.go-btn:focus { outline: none; }
.go-btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 8px; }
.go-btn.going { animation: launch 1.1s ease-out infinite; transform: scale(.97); cursor: progress; }
@keyframes launch { 0% { box-shadow: 0 0 0 0 rgba(47, 214, 198, 0.55), 0 14px 34px rgba(34, 184, 201, 0.35); }
                    100% { box-shadow: 0 0 0 34px rgba(47, 214, 198, 0), 0 14px 34px rgba(34, 184, 201, 0.35); } }
@media (prefers-reduced-motion: reduce) { .go-btn.going { animation: none; } }
.seg-pick.fill label { display: block; }
.seg-pick.fill span { display: flex; width: 100%; }

/* ------------------------------------------------------------------ the weather page (BACKLOG 45 to 47, 75, 78) */
.wx-when .chips.scroll { max-width: 100%; }
.wx-words { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wx-words li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; font-size: 14px; }
@media (max-width: 639px) { .wx-words li { grid-template-columns: 1fr; gap: 2px; } }
.wx-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
           background: rgba(255, 122, 89, 0.08); border: 1px solid rgba(255, 122, 89, 0.25); }
.wx-obs { gap: 18px; margin-bottom: 10px; }
.wx-scroll { overflow-x: auto; border-radius: var(--radius) var(--radius) 0 0; }
table.wx { border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.wx th, table.wx td { padding: 6px 4px; text-align: center; white-space: nowrap; min-width: 34px; border-bottom: 1px solid var(--line); }
table.wx td small { display: block; font-size: 9.5px; color: var(--text-3); }
table.wx .wx-l { position: sticky; left: 0; z-index: 2; min-width: 96px; text-align: left; padding-left: 12px; background: var(--surface-2);
                  color: var(--text-2); font-weight: 600; font-size: 11.5px; box-shadow: 1px 0 0 var(--line-2); }
table.wx .wx-l .dot { margin-right: 6px; }
table.wx thead th { background: var(--surface-2); color: var(--text-3); font-weight: 600; }
table.wx .wx-days th { color: var(--text); text-align: left; padding-left: 8px; font-size: 12px; }
table.wx .dstart { border-left: 2px solid var(--line-2); }
table.wx th.night { color: var(--text-3); background: var(--night); }
table.wx th.nowcol { color: var(--coral); }
table.wx td.col-on, table.wx th.col-on { box-shadow: inset 0 0 0 999px var(--hover); }
table.wx .cell-score { min-width: 26px; padding: 2px 0; }
table.wx svg.arr { width: 14px; height: 14px; }
.rel-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.rel-dot.offshore, .rel-dot.cross-offshore { background: #34d399; }
.rel-dot.cross-shore { background: var(--fair); }
.rel-dot.onshore, .rel-dot.cross-onshore { background: var(--poor); }
/* Each row is one hue, light to strong: aqua for wind, blue for waves, sand for heat,
   sky for rain, grey for cloud, violet for UV.  Text stays in the text colours. */
.wind-1 { background: rgba(47, 214, 198, 0.10); } .wind-2 { background: rgba(47, 214, 198, 0.20); }
.wind-3 { background: rgba(47, 214, 198, 0.32); } .wind-4 { background: rgba(47, 214, 198, 0.46); }
.wind-5 { background: rgba(47, 214, 198, 0.62); color: #04111d; } .wind-6 { background: rgba(47, 214, 198, 0.82); color: #04111d; }
.wave-1 { background: rgba(57, 135, 229, 0.12); } .wave-2 { background: rgba(57, 135, 229, 0.22); }
.wave-3 { background: rgba(57, 135, 229, 0.34); } .wave-4 { background: rgba(57, 135, 229, 0.48); }
.wave-5 { background: rgba(57, 135, 229, 0.64); } .wave-6 { background: rgba(57, 135, 229, 0.82); }
.temp-1 { background: rgba(244, 215, 161, 0.06); } .temp-2 { background: rgba(244, 215, 161, 0.12); }
.temp-3 { background: rgba(244, 215, 161, 0.2); } .temp-4 { background: rgba(244, 215, 161, 0.3); }
.temp-5 { background: rgba(244, 215, 161, 0.42); } .temp-6 { background: rgba(244, 215, 161, 0.56); }
.rain-1 { background: rgba(124, 196, 255, 0.10); } .rain-2 { background: rgba(124, 196, 255, 0.2); }
.rain-3 { background: rgba(124, 196, 255, 0.32); } .rain-4 { background: rgba(124, 196, 255, 0.46); }
.rain-5, .rain-6 { background: rgba(124, 196, 255, 0.64); color: #04111d; }
.cloud-1 { background: rgba(169, 193, 212, 0.05); } .cloud-2 { background: rgba(169, 193, 212, 0.1); }
.cloud-3 { background: rgba(169, 193, 212, 0.16); } .cloud-4 { background: rgba(169, 193, 212, 0.23); }
.cloud-5, .cloud-6 { background: rgba(169, 193, 212, 0.3); }
.uv-3 { background: rgba(180, 140, 255, 0.14); } .uv-4 { background: rgba(180, 140, 255, 0.26); }
.uv-5, .uv-6 { background: rgba(180, 140, 255, 0.42); }
.p-long { color: var(--good-text); font-weight: 700; }
.p-short { color: var(--text-3); }
.wx-foot { margin: 0; padding: 10px 14px 12px; }
.wx-agree { padding: 10px 12px; border-radius: 12px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); }
.wx-agree.agree { border-color: rgba(52, 211, 153, 0.4); }
.wx-agree.some { border-color: rgba(250, 204, 21, 0.4); }
.wx-agree.split { border-color: rgba(255, 122, 89, 0.5); }
.legend i.band { height: 10px; background: rgba(47, 214, 198, 0.25); }
.legend i.obs { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.chart .band-a { fill: rgba(47, 214, 198, 0.2); }
.chart .mid-l { fill: none; stroke: var(--aqua); stroke-width: 2; }
.chart .obs-d { fill: var(--coral); stroke: var(--surface); stroke-width: 2; }
.wx-sat { margin: 0; }
.wx-sat img { width: 100%; height: auto; display: block; border-radius: 14px; background: #000; aspect-ratio: 8 / 5; object-fit: cover; }
.wx-sat figcaption { margin-top: 6px; }
.wx-windy { margin-top: 10px; aspect-ratio: 4 / 3; }
.card h3 .badge { text-transform: none; letter-spacing: .02em; }
.chart-legend { margin: -4px 0 10px; }

/* Time wheels (BACKLOG 95): two snapping columns behind a highlight band. */
.wheel { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 240px;
         padding: 0 12px; border-radius: 14px; background: var(--field); border: 1px solid var(--line-2); }
.wheel::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 44px; transform: translateY(-50%); border-radius: 10px;
                 background: rgba(47, 214, 198, 0.12); border: 1px solid rgba(47, 214, 198, 0.4); pointer-events: none; }
.wheel-col { position: relative; height: 132px; width: 72px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
             overscroll-behavior: contain; padding: 44px 0; outline: none;
             -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
             mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-col:focus-visible { box-shadow: 0 0 0 2px var(--aqua); border-radius: 10px; }
.wheel-item { height: 44px; display: grid; place-items: center; scroll-snap-align: center; font: 600 22px var(--display);
              font-variant-numeric: tabular-nums; color: var(--text-3); cursor: pointer; user-select: none; transition: color .15s; }
.wheel-item.on { color: var(--text); }
.wheel-sep { position: relative; font: 700 22px var(--display); color: var(--text-2); }
/* Phones: Day across the top, From and To wheels side by side under it. */
@media (max-width: 639px) {
  .when-row { grid-template-columns: 1fr 1fr; }
  .when-row > :first-child { grid-column: 1 / -1; }
  .wheel { padding: 0 6px; }
  .wheel-col { width: 54px; }
}

/* Pins: the starter three on the dashboard, and the pin button in a Favourites row (BACKLOG 105). */
.starter-note { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.rank-side form { display: contents; }

/* Spot cards: a faint photo of the beach behind the details (BACKLOG 101), unless the admin
   picked plain cards (BACKLOG 108).  The card is its own stacking context, so the photo and its
   shade sit above the card's colour and below the text. */
.spot-row, .rank-card { position: relative; isolation: isolate; overflow: hidden; }
.spot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .8; pointer-events: none; }
/* A little more photo since BACKLOG 113: the shade stays deep behind the words on the left. */
:is(.spot-row, .rank-card):has(.spot-photo)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--shade) / 0.9) 0%, rgb(var(--shade) / 0.68) 50%, rgb(var(--shade) / 0.28) 100%); }
.rank-card .spot-photo { opacity: .55; }
.hero > .hero-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%);
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%); }
/* Admin > Spot cards: the two looks side by side. */
.look-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; margin-top: 12px; }
@media (max-width: 639px) { .look-pick { grid-template-columns: minmax(0, 1fr); } }
.look-opt { display: grid; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--line-2); cursor: pointer; }
.look-opt.on, .look-opt:has(input:checked) { border-color: var(--aqua); background: rgba(47, 214, 198, 0.08); }
.look-opt input { position: absolute; opacity: 0; pointer-events: none; }
.look-opt em { display: block; }
.look-swatch { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; height: 64px; padding: 10px 12px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.look-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.look-swatch.photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(var(--shade) / 0.94) 0%, rgb(var(--shade) / 0.8) 55%, rgb(var(--shade) / 0.5) 100%); }
.look-pick .btn { align-self: end; }

/* The CAM label opens a small live window (BACKLOG 100). */
button.live.cam-peek { margin-left: 6px; padding: 2px 8px 2px 7px; border-radius: 99px; border: 1px solid rgba(255, 90, 90, 0.35);
  background: rgba(255, 90, 90, 0.12); font-family: inherit; cursor: pointer; vertical-align: 1px; transition: background .15s, border-color .15s; }
button.live.cam-peek:hover, button.live.cam-peek[aria-expanded="true"] { background: rgba(255, 90, 90, 0.24); border-color: rgba(255, 90, 90, 0.65); }
.peek { position: fixed; z-index: 90; left: 0; top: 0; width: min(380px, calc(100vw - 24px)); border-radius: 16px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s; }
.peek.on { opacity: 1; transform: none; }
.peek-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; }
.peek-head b { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); cursor: pointer; }
.peek-x:hover { color: var(--text); border-color: var(--line-2); }
.peek-tabs { display: flex; gap: 6px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; }
.peek-tabs button { flex: none; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text-2); font: 500 12px var(--font); cursor: pointer; }
.peek-tabs button.on { border-color: var(--aqua); background: rgba(47, 214, 198, 0.14); color: var(--text); }
.peek-frame { aspect-ratio: 16 / 9; background: #000; display: grid; place-items: center; }
.peek-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.peek-out { padding: 16px; text-align: center; color: var(--text-2); font-size: 13px; }
.peek-out p { margin: 0 0 10px; }
.peek-note { margin: 0; padding: 8px 12px 0; font-size: 12px; color: var(--text-2); }
.peek-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 10px; font-size: 12px; color: var(--text-3); }
.peek-foot a { color: var(--text-2); }
.peek-spot { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.spots-credit { margin-top: 18px; }
.credit-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); }
.credit-row img { width: 132px; height: 66px; object-fit: cover; border-radius: 10px; display: block; }
.credit-row p { margin: 4px 0 0; color: var(--text-2); }
/* The best-bet card's rating sits in the top right, the buttons under it (BACKLOG 109).  On a
   phone the buttons wrap under the text, so the rating moves up into the corner on its own. */
.hero-top > .stack { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
@media (max-width: 639px) {
  .hero-top > .stack > .badge { position: absolute; top: -4px; right: 0; }
  .hero-top .grow > p:first-child { padding-right: 84px; }
  .hero-top > .stack { margin-left: 0; align-items: flex-start; }
}
/* Room between the Windy map and its caption (BACKLOG 110). */
.wx-credit { margin: 12px 4px 2px; line-height: 1.55; }

/* Profile: wind units and the kinds of push (BACKLOG 89, 98). */
.unit-pick { max-width: 280px; margin-bottom: 4px; }
.push-kinds { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); margin: 6px 0 14px; }
@media (min-width: 640px) { .push-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Groups (BACKLOG 96). */
.crew-chips { margin-bottom: 10px; }
.crew-card h3 form { display: inline; }
/* Who is invited, top right of the session banner (BACKLOG 97).  Below the banner on phones. */
.session-top { position: relative; }
.who-card { margin-top: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (min-width: 900px) {
  .who-card { position: absolute; top: 18px; right: 18px; z-index: 2; width: 250px; max-height: calc(100% - 36px); overflow-y: auto; margin: 0;
    background: rgba(4, 17, 29, 0.62); }
}
.who-head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2); }
.who-head .faint { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.who-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
@media (max-width: 899px) { .who-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.who-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; font-size: 13.5px; }
.who-row:hover { background: var(--hover); }
.who-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--nogo); }
.who-mark svg.i { width: 12px; height: 12px; }
.who-row.yes .who-mark { background: var(--good); border-color: var(--good); color: #04111d; }
.who-row.maybe .who-mark { border-color: var(--fair); background: rgba(250, 204, 21, 0.2); }
.who-row.wait .who-mark { border-color: #f87171; background: rgba(248, 113, 113, 0.18); }
.who-row.out .who-mark { color: var(--text-3); }
.who-row.out .who-name { color: var(--text-3); text-decoration: line-through; }
.who-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-nudge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #25d366; }
.who-nudge:hover { background: rgba(37, 211, 102, 0.12); }
.who-chat { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--aqua); }
.who-chat:hover { background: var(--surface-3); }
.who-chat svg.i { width: 16px; height: 16px; }
@media (min-width: 900px) { .session-top .hero-inner { padding-right: 290px; } }
/* Weather: the beach now, and the models' highlights (BACKLOG 114, 116). */
.wx-now, .wx-highlights { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }
.wx-highlights { margin-top: 14px; }
@media (min-width: 1300px) { .wx-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wx-now .v.sm, .wx-highlights .v.sm { font-size: 20px; }
/* Profile photo drop zone (BACKLOG 115): the round picture takes a dropped photo or a tap. */
.avatar-drop { position: relative; display: inline-grid; flex: none; cursor: pointer; border-radius: 50%; }
.avatar-drop .avatar { transition: filter .15s, box-shadow .15s; }
.avatar-drop-hint { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--aqua); color: #04111d; border: 2px solid var(--bg); }
.avatar-drop-hint svg.i { width: 14px; height: 14px; }
.avatar-drop:hover .avatar, .avatar-drop.over .avatar { filter: brightness(1.15); box-shadow: 0 0 0 4px rgba(47, 214, 198, 0.45); }
.avatar-drop.over .avatar { box-shadow: 0 0 0 6px rgba(47, 214, 198, 0.7); }
.avatar-drop.busy .avatar { filter: grayscale(1) brightness(.7); }
.avatar-drop:focus-within .avatar { box-shadow: 0 0 0 3px var(--aqua); }

/* ================================================================== light mode (BACKLOG 48)
   Each person picks Dark, Light or Auto (their phone's setting) on their profile or with the
   sun and moon in the top bar; base.html writes it on <html data-theme>.  Light only swaps the
   variables.  Photo banners stay dark in both modes, because their words sit on a dark shade. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eaf1f6;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f7fa;
  --surface-3: #e3edf4;
  --glass: rgba(255, 255, 255, 0.78);
  --line: rgba(11, 34, 54, 0.1);
  --line-2: rgba(11, 34, 54, 0.18);
  --text: #0b2236;
  --text-2: #3f5a6f;
  --text-3: #6a8296;
  --aqua: #0b8f84;
  --aqua-2: #087268;
  --good-text: #0f7a4f;
  --shadow: 0 14px 40px rgba(11, 34, 54, 0.12);
  --chrome: rgba(255, 255, 255, 0.86);
  --chrome-solid: rgba(255, 255, 255, 0.95);
  --chrome-side: rgba(255, 255, 255, 0.82);
  --card-a: #ffffff;
  --card-b: #f6f9fb;
  --hero-a: #d9f1f3;
  --hero-b: #e6f1f8;
  --hero-c: #f3f8fb;
  --inset: #f1f6f9;
  --field: #ffffff;
  --night: #e1e9ef;
  --hover: rgba(11, 34, 54, 0.05);
  --shade: 246 250 252;
  --night-fill: rgba(11, 34, 54, 0.07);
  --tip-bg: #0b2236;
  --tip-text: #f2f8fc;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
  color-scheme: light;
  --bg: #eaf1f6;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f7fa;
  --surface-3: #e3edf4;
  --glass: rgba(255, 255, 255, 0.78);
  --line: rgba(11, 34, 54, 0.1);
  --line-2: rgba(11, 34, 54, 0.18);
  --text: #0b2236;
  --text-2: #3f5a6f;
  --text-3: #6a8296;
  --aqua: #0b8f84;
  --aqua-2: #087268;
  --good-text: #0f7a4f;
  --shadow: 0 14px 40px rgba(11, 34, 54, 0.12);
  --chrome: rgba(255, 255, 255, 0.86);
  --chrome-solid: rgba(255, 255, 255, 0.95);
  --chrome-side: rgba(255, 255, 255, 0.82);
  --card-a: #ffffff;
  --card-b: #f6f9fb;
  --hero-a: #d9f1f3;
  --hero-b: #e6f1f8;
  --hero-c: #f3f8fb;
  --inset: #f1f6f9;
  --field: #ffffff;
  --night: #e1e9ef;
  --hover: rgba(11, 34, 54, 0.05);
  --shade: 246 250 252;
  --night-fill: rgba(11, 34, 54, 0.07);
  --tip-bg: #0b2236;
  --tip-text: #f2f8fc;
  }
}
:root[data-theme="light"] :is(.store-hero, .soon-tile, .session-hero, .next-card, .wizard, .guest-card, .cam-frame, .peek),
:root[data-theme="light"] body:is(.wizard-page, .guest-page) {
  color-scheme: dark;
  --bg: #04111d; --bg-2: #071a2b; --surface: #0c2133; --surface-2: #10293f; --surface-3: #15334d;
  --glass: rgba(14, 38, 60, 0.62); --line: rgba(148, 197, 233, 0.12); --line-2: rgba(148, 197, 233, 0.22);
  --text: #eaf4fb; --text-2: #a9c1d4; --text-3: #6f8ba3; --aqua: #2fd6c6; --good-text: #7ee8bf;
  --chrome: rgba(4, 17, 29, 0.78); --chrome-solid: rgba(5, 20, 34, 0.9); --inset: rgba(2, 14, 26, 0.4);
  --field: rgba(2, 12, 22, 0.45); --hover: rgba(255, 255, 255, 0.06); --shade: 12 33 51;
  color: var(--text);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] :is(.store-hero, .soon-tile, .session-hero, .next-card, .wizard, .guest-card, .cam-frame, .peek),
  :root[data-theme="auto"] body:is(.wizard-page, .guest-page) {
  color-scheme: dark;
  --bg: #04111d; --bg-2: #071a2b; --surface: #0c2133; --surface-2: #10293f; --surface-3: #15334d;
  --glass: rgba(14, 38, 60, 0.62); --line: rgba(148, 197, 233, 0.12); --line-2: rgba(148, 197, 233, 0.22);
  --text: #eaf4fb; --text-2: #a9c1d4; --text-3: #6f8ba3; --aqua: #2fd6c6; --good-text: #7ee8bf;
  --chrome: rgba(4, 17, 29, 0.78); --chrome-solid: rgba(5, 20, 34, 0.9); --inset: rgba(2, 14, 26, 0.4);
  --field: rgba(2, 12, 22, 0.45); --hover: rgba(255, 255, 255, 0.06); --shade: 12 33 51;
    color: var(--text);
  }
}
@media (min-width: 900px) {
  :root[data-theme="light"] .who-card {
  color-scheme: dark;
  --bg: #04111d; --bg-2: #071a2b; --surface: #0c2133; --surface-2: #10293f; --surface-3: #15334d;
  --glass: rgba(14, 38, 60, 0.62); --line: rgba(148, 197, 233, 0.12); --line-2: rgba(148, 197, 233, 0.22);
  --text: #eaf4fb; --text-2: #a9c1d4; --text-3: #6f8ba3; --aqua: #2fd6c6; --good-text: #7ee8bf;
  --chrome: rgba(4, 17, 29, 0.78); --chrome-solid: rgba(5, 20, 34, 0.9); --inset: rgba(2, 14, 26, 0.4);
  --field: rgba(2, 12, 22, 0.45); --hover: rgba(255, 255, 255, 0.06); --shade: 12 33 51;
    color: var(--text);
  }
}
/* Light mode: the sky glows softer behind the page, and bright fills keep dark words. */
:root[data-theme="light"] body { background-image: radial-gradient(1200px 600px at 85% -10%, rgba(47, 214, 198, 0.16), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(57, 135, 229, 0.12), transparent 60%); }
.theme-btn svg.i { width: 20px; height: 20px; }
.theme-btn .moon, :root[data-theme="light"] .theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: inline; }


/* A livelier map (BACKLOG 50): Epic and Good spots send out a slow ring, and the hover card and
   panel show each of your sports as an emoji with a thumb for the day.  The ring animates the
   inner .pin's ::before only; .marker itself is MapLibre's to move. */
.marker .pin.epic::before, .marker .pin.good::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  animation: ping 2.4s ease-out infinite; }
.marker .pin.epic::before { box-shadow: 0 0 0 2px rgba(180, 140, 255, 0.85); }
.marker .pin.good::before { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.85); animation-duration: 3.2s; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .marker .pin::before { animation: none !important; } }
.emos { display: flex; gap: 6px; margin: 10px 0 4px; }
.emo { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 1px; padding: 6px 4px 5px; border-radius: 12px;
  background: var(--inset); border: 1px solid var(--line); text-align: center; }
.emo b { font-size: 22px; line-height: 1.1; }
.emo i { font-style: normal; font-size: 14px; line-height: 1; }
.emo small { font-size: 10.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.emo.epic { border-color: rgba(180, 140, 255, 0.6); }
.emo.good { border-color: rgba(52, 211, 153, 0.6); }
.emo.nogo { opacity: .7; }
.emos-cap { margin: 10px 0 0; }
.emos-cap + .emos { margin-top: 4px; }

/* Help and tips (BACKLOG 52, 53). */
.help-nav { margin-bottom: 4px; }
.help details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.help details > summary::-webkit-details-marker { display: none; }
.help details > summary::after { content: "+"; margin-left: auto; color: var(--text-3); font-size: 18px; line-height: 1; }
.help details[open] > summary::after { content: "\2212"; }
.help details[open] > summary { margin-bottom: 8px; }
.help details p:last-child { margin-bottom: 0; }
.glossary { display: grid; gap: 12px 24px; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 900px) { .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.glossary dt { font-weight: 700; color: var(--text); }
.glossary dd { margin: 2px 0 0; color: var(--text-2); font-size: 14px; }
.tips { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--text-2); font-size: 14px; }
.tips li::marker { color: var(--aqua); }
.flag-list { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 10px; }
.flag-list li { display: flex; gap: 12px; align-items: flex-start; }
.flag-list .flag-swatch { margin-top: 3px; }
.flag-list p { margin: 0; }
.flag-swatch.redyellow { background: linear-gradient(180deg, #d62828 50%, #f5c518 50%); }
.flag-swatch.quarters { background: conic-gradient(#0b0b0b 0 25%, #fff 0 50%, #0b0b0b 0 75%, #fff 0); }

/* My hours (BACKLOG 120): the switch, and the hours outside them faded on the weather table. */
.hours-chip .i { width: 14px; height: 14px; }
.hours-chip:not(.on) { color: var(--text-2); }
table.wx .offh { opacity: .38; }
.hours-pick { margin-bottom: 10px; }
.hours-times { max-width: 420px; }

/* ================================================================== clubs and communities (BACKLOG 68 to 73)
   Colours only from the custom properties above, so light and dark mode carry over. */

/* Club sports: Swell's three keep their colours, the others borrow from the palette. */
.dot.c-surf { background: var(--surf); }
.dot.c-bodyboard { background: var(--bodyboard); }
.dot.c-sup { background: var(--sup); }
.dot.c-lifesaving { background: var(--coral); }
.dot.c-surfski { background: var(--sky); }
.dot.c-canoe { background: var(--sand); }

/* A club or person as a round face: initials on the club's first sport colour. */
.chat-face { width: 46px; height: 46px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; object-fit: cover;
             font: 700 15px var(--display); letter-spacing: .02em; color: var(--bg); background: var(--aqua); }
.chat-face.lg { width: 76px; height: 76px; font-size: 26px; }
.chat-face.person { background: var(--surface-3); color: var(--aqua); border: 2px solid var(--aqua); }
.chat-face.s-surf { background: var(--surf); }
.chat-face.s-bodyboard { background: var(--bodyboard); }
.chat-face.s-sup { background: var(--sup); }
.chat-face.s-lifesaving { background: var(--coral); }
.chat-face.s-surfski { background: var(--sky); }
.chat-face.s-canoe { background: var(--sand); color: #3a2a0c; }  /* sand is pale: dark letters */

/* ------------------------------------------------------------------ the directory */
.club-filters { display: grid; gap: 8px; margin: 14px 0 6px; }
.club-filters .filterbar { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.club-filters .filterbar::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .club-filters .filterbar { flex-wrap: wrap; } }
.club-mine { margin-top: 6px; }
.club-mine .chip span { margin-left: 4px; font-size: 11.5px; }
.club-card { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 16px; border-radius: var(--radius); color: var(--text);
             background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.club-card:hover { text-decoration: none; border-color: var(--line-2); transform: translateY(-1px); }
.club-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.club-card-text > b { font: 600 16px/1.3 var(--display); }
.club-sports { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.club-hero .club-sports { gap: 8px; }
.club-about { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.club-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.club-meta:empty { display: none; }
.block { display: block; }
.club-chip svg.i { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ a club's page */
.club-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; }
.club-hero > .grow { flex: 1; min-width: 220px; }
.club-hero h1 { margin: 2px 0 10px; }
.club-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.club-actions .narrow-only { display: none; }
/* Phones: the member badge, chat and Change on one line (Dallas, 2026-10-24). */
@media (max-width: 599px) {
  .club-actions { flex-wrap: nowrap; width: 100%; }
  .club-actions .btn { padding: 8px 14px; font-size: 14px; }
  .club-actions .btn.primary { flex: 1; justify-content: center; }
  .club-actions .wide-only { display: none; }
  .club-actions .narrow-only { display: inline; }
}
.club-join { display: flex; flex-wrap: wrap; gap: 8px; }
.club-more, .notify-menu { position: relative; }
.club-more > summary, .notify-menu > summary, .event-sheet > summary { list-style: none; }
.club-more > summary::-webkit-details-marker, .notify-menu > summary::-webkit-details-marker,
.event-sheet > summary::-webkit-details-marker { display: none; }
.club-more-pop, .notify-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 6px; padding: 10px;
                              min-width: 230px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
                              box-shadow: var(--shadow); }
@media (max-width: 639px) { .club-more-pop { right: auto; left: 0; } }
.club-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; }
.club-people li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.club-people a { overflow-wrap: anywhere; }
.club-contact .kv dd { overflow-wrap: anywhere; }
.club-member { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.club-member:first-of-type { border-top: 0; }
.club-member > .grow { display: flex; flex-direction: column; min-width: 0; }
.club-member .chat-face { width: 36px; height: 36px; font-size: 13px; }
.club-change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.club-change:first-of-type { border-top: 0; }
.club-change > .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.club-change form { display: flex; gap: 6px; }
.club-change svg.i { width: 14px; height: 14px; }
.club-map { height: 260px; }
.club-map-cap { margin: 0; padding: 10px 14px; }
.club-pin { width: 22px; height: 22px; border-radius: 50%; background: var(--coral); border: 3px solid var(--text); box-shadow: var(--shadow); }
.club-spot-pin { width: 13px; height: 13px; border-radius: 50%; background: var(--aqua); border: 2px solid var(--bg); cursor: pointer; }
.club-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--text); border-top: 1px solid var(--line); }
.club-line:first-of-type { border-top: 0; }
.club-line:hover { text-decoration: none; color: var(--aqua); }
.drawer-clubs { display: grid; gap: 6px; margin: 0 0 16px; }
.drawer-clubs .label-like { margin: 0 0 2px; }
.drawer-clubs > a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface);
                    color: var(--text); font-size: 14px; }
.drawer-clubs > a:hover { text-decoration: none; background: var(--surface-3); }
.drawer-clubs .row { margin-top: 4px; }

/* ------------------------------------------------------------------ the chats button in the top bar */
.chat-link { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-2); }
.chat-link:hover, .chat-link.on { color: var(--aqua); background: var(--surface); text-decoration: none; }
.chat-link svg.i { width: 22px; height: 22px; }
.chat-link .count { position: absolute; top: -1px; right: -3px; margin: 0; min-width: 18px; height: 18px; line-height: 18px; font-size: 10px; font-style: normal; }
.btn .count, .chip .count { margin-left: 2px; font-style: normal; }

/* ------------------------------------------------------------------ chats: the list and an open chat
   Phones: one full screen at a time, like WhatsApp.  Desktop: two panes side by side. */
.chat-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.chat-list { min-width: 0; }
.chat-list-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.chat-rows { display: grid; gap: 2px; }
.chat-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border-radius: 14px; color: var(--text); }
.chat-row:hover { text-decoration: none; background: var(--surface); }
.chat-row.on { background: var(--surface-2); }
.chat-row-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.chat-row-top, .chat-row-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-row-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chat-row-top time { flex: none; font-size: 12px; color: var(--text-3); }
.chat-row.unread .chat-row-top time { color: var(--aqua); font-weight: 600; }
.chat-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text-2); }
.chat-preview svg.i { width: 15px; height: 15px; }
.chat-row .count { margin: 0; flex: none; background: var(--aqua); color: var(--bg); }
.muted-ico { color: var(--text-3); display: inline-flex; }
.muted-ico svg.i { width: 15px; height: 15px; }
.chat-empty { display: grid; gap: 8px; padding: 6px 0; }
.chat-empty .btn { justify-self: start; margin-top: 6px; }

.thread { display: none; position: relative; flex-direction: column; min-width: 0; min-height: 0; }
.has-chat .chat-list { display: none; }
.has-chat .thread { display: flex; }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.thread-head .chat-face { width: 40px; height: 40px; font-size: 14px; }
.thread-back svg.i { transform: rotate(180deg); }
.thread-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.thread-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px var(--display); }
.thread-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 3px;
               padding: 12px 12px 16px; background: var(--bg-2); }
.thread-hello, .day-sep span, .unread-sep span { background: var(--surface); color: var(--text-2); }
.thread-hello { align-self: center; max-width: 440px; margin: 12px 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; text-align: center; }
.day-sep, .unread-sep { align-self: center; margin: 10px 0 6px; }
.day-sep span, .unread-sep span { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; }
.unread-sep span { color: var(--aqua); }
.earlier { align-self: center; margin-bottom: 8px; font-size: 13px; }
.thread-none { display: none; }

.msg { display: flex; min-width: 0; }
.msg.mine { justify-content: flex-end; }
.bubble { max-width: min(80%, 560px); min-width: 64px; padding: 7px 10px 5px; border-radius: 14px; background: var(--surface-2);
          box-shadow: 0 1px 0 var(--line); }
.msg.theirs .bubble { border-top-left-radius: 4px; }
.msg.mine .bubble { background: color-mix(in srgb, var(--aqua) 24%, var(--surface)); border-top-right-radius: 4px; }
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble time { display: block; margin-top: 1px; text-align: right; font-size: 10.5px; color: var(--text-3); }
.bubble .who { display: block; margin-bottom: 1px; font-size: 12.5px; }
.who.c0 { color: var(--aqua); }
.who.c1 { color: var(--sky); }
.who.c2 { color: var(--sand); }
.who.c3 { color: var(--coral); }
.who.c4 { color: var(--good-text); }
.who.c5 { color: var(--epic); }
.msg.flash-in .bubble, .msg.flash-in .event-card { animation: chat-in .25s ease-out; }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.new-pill { position: absolute; left: 50%; bottom: 84px; z-index: 6; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
            font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.new-pill svg.i { transform: rotate(90deg); width: 15px; height: 15px; }

/* The composer stays at the bottom; the event form opens above it. */
.composer { position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px calc(8px + var(--safe-b));
            background: var(--surface); border-top: 1px solid var(--line); }
.composer-form { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 8px; }
.composer textarea { flex: 1; min-width: 0; max-height: 140px; resize: none; padding: 10px 14px; border-radius: 22px; line-height: 1.4;
                     border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-size: 15px; }
.composer textarea:focus { outline: none; border-color: var(--aqua); }
/* Android draws the field's scrollbar as a grey line beside it; it still scrolls (seen 2026-10-24). */
.composer textarea { scrollbar-width: none; }
.composer textarea::-webkit-scrollbar { display: none; }
.send-btn, .event-sheet > summary { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; }
.event-sheet > summary { display: inline-grid; place-items: center; }
.event-sheet[open] > summary { color: var(--aqua); background: var(--surface-2); }
.event-form { display: none; }
.event-sheet[open] .event-form { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 8; display: block;
                                 max-height: min(72vh, 600px); overflow-y: auto; padding: 16px; border-radius: var(--radius);
                                 background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.event-form-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; font: 600 16px var(--display); }
.event-form .sport-pick { margin: -2px 0 14px; }
.event-form .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }  /* side by side on phones too */
.event-form .btn.primary { width: 100%; }
.event-times .wheel { max-width: 100%; }

/* An event in the chat: a card with the answers on it. */
.msg.is-event { margin: 4px 0; }
.event-card { display: grid; gap: 7px; width: min(94%, 400px); padding: 12px 14px 8px; border-radius: 16px; background: var(--surface-2);
              border: 1px solid color-mix(in srgb, var(--aqua) 45%, transparent); }
.event-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.event-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
                text-transform: uppercase; color: var(--aqua); }
.event-kicker svg.i { width: 15px; height: 15px; }
.event-q { margin: 0; font: 600 17px/1.3 var(--display); overflow-wrap: anywhere; }
.event-what, .event-when { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.event-when svg.i { width: 15px; height: 15px; }
.event-who { font-size: 13px; color: var(--text-2); }
.event-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.event-answers .btn { padding: 8px 4px; white-space: normal; line-height: 1.2; }
.event-answers .btn.on.going { background: color-mix(in srgb, var(--good) 24%, var(--surface-2)); border-color: var(--good); }
.event-answers .btn.on.maybe { background: color-mix(in srgb, var(--fair) 22%, var(--surface-2)); border-color: var(--fair); }
.event-answers .btn.on.no { background: color-mix(in srgb, var(--nogo) 30%, var(--surface-2)); border-color: var(--nogo); }
.event-links { display: flex; flex-wrap: wrap; gap: 6px; }
.event-foot { font-size: 10.5px; color: var(--text-3); text-align: right; }
.event-card.busy { opacity: .6; }

/* Push settings for one chat. */
.notify-pop { width: 270px; gap: 2px; }
.notify-pop > p { margin: 2px 6px 6px; }
.notify-pop > a { margin: 6px 6px 2px; }
.notify-opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: none;
              color: var(--text); text-align: left; cursor: pointer; }
.notify-opt:hover { background: var(--surface-3); }
.notify-opt svg.i { visibility: hidden; color: var(--aqua); }
.notify-opt.on svg.i { visibility: visible; }
.notify-opt em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); }
.notify-menu .is-off { color: var(--text-3); }

/* Phones: an open chat is the whole screen, top bar and tabs out of the way. */
@media (max-width: 1023px) {
  .chat-open .topbar, .chat-open .tabs { display: none; }
  .chat-open .main { padding: 0; }
  /* Pinned to all four edges, never a height: on an installed Android app 100dvh came out taller than the
     screen and pushed the message box under the system buttons (seen 2026-10-24). */
  .chat-open .thread { position: fixed; inset: 0; z-index: 30; padding-top: var(--safe-t); background: var(--bg); }
}
@media (min-width: 1024px) {
  .chat-shell { grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 128px); min-height: 520px; overflow: hidden;
                border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .chat-list, .has-chat .chat-list { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px; border-right: 1px solid var(--line); }
  .chat-list-head { padding: 0 6px; }
  .chat-rows { overflow-y: auto; align-content: start; }
  .thread { display: flex; }
  .thread-back { display: none; }
  .thread-none { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 40px; text-align: center; color: var(--text-3); }
  .thread-none svg.i { width: 44px; height: 44px; }
  .thread-none p { max-width: 360px; }
  .event-sheet[open] .event-form { right: auto; width: 440px; }
}
@media (min-width: 1600px) { .chat-shell { height: calc(100vh - 140px); } }

/* Closest clubs on a spot's page and its map panel (BACKLOG 117). */
.near-clubs { display: grid; gap: 8px; }
.near-club { display: grid; grid-template-columns: auto 92px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.near-sport { color: var(--text-2); font-size: 13px; }
.near-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The sports added for BACKLOG 54, in the places the first three have their colour. */
.chart .score-c.kite { fill: var(--kite); } .window.kite { border-top-color: var(--kite); } .srow.kite, .ride-row.kite { border-left-color: var(--kite); }
.chart .score-c.wing { fill: var(--wing); } .window.wing { border-top-color: var(--wing); } .srow.wing, .ride-row.wing { border-left-color: var(--wing); }
.chart .score-c.windsurf { fill: var(--windsurf); } .window.windsurf { border-top-color: var(--windsurf); } .srow.windsurf, .ride-row.windsurf { border-left-color: var(--windsurf); }
.chart .score-c.surfski { fill: var(--surfski); } .window.surfski { border-top-color: var(--surfski); } .srow.surfski, .ride-row.surfski { border-left-color: var(--surfski); }
.chart .score-c.kayak { fill: var(--kayak); } .window.kayak { border-top-color: var(--kayak); } .srow.kayak, .ride-row.kayak { border-left-color: var(--kayak); }
.chart .score-c.swim { fill: var(--swim); } .window.swim { border-top-color: var(--swim); } .srow.swim, .ride-row.swim { border-left-color: var(--swim); }

/* What each person likes (BACKLOG 86, 118): their kind of day, and the For you switch. */
.fav-day { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
           color: var(--sand); background: color-mix(in srgb, var(--sand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sand) 40%, transparent); }
.fav-day .i { width: 13px; height: 13px; }
p.fav-day { margin: 8px 0 0; }
:root[data-theme="light"] .fav-day { color: #8a5a00; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .fav-day { color: #8a5a00; } }
.foryou-chip .i { width: 14px; height: 14px; }
.foryou-chip:not(.on) { color: var(--text-2); }

/* Who's around, check-ins and near me (BACKLOG 87); the cam in the map panel (128). */
.around-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.around-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.around-row .face.sm, .around-row img.face { width: 32px; height: 32px; flex: none; object-fit: cover; }
.around-text { min-width: 0; }
.around-sport { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.around-when { display: block; overflow-wrap: anywhere; }
.around-when .i { width: 12px; height: 12px; color: var(--good-text); vertical-align: -1px; }
.around-row.here > img.face, .around-row.here > .face { box-shadow: 0 0 0 2px var(--good); }
.around-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.around-here { display: flex; gap: 6px; align-items: center; }
.around-here select.input { width: auto; padding: 6px 10px; }
.around-plan > summary { list-style: none; }
.around-plan > summary::-webkit-details-marker { display: none; }
.around-plan[open] { flex-basis: 100%; }
.around-form { display: grid; gap: 10px; margin-top: 10px; }
.map-panel .around-row { padding: 4px 0; }
.marker .pin-people { position: absolute; bottom: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
                      display: grid; place-items: center; font: 700 10.5px var(--font); font-style: normal; color: #04111d;
                      background: var(--sand); box-shadow: 0 0 0 2px var(--bg); }
.you-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky) 35%, transparent), 0 0 0 2px #fff inset; }
.chip.busy { opacity: .6; pointer-events: none; }
.near-km { display: block; font-size: 12px; font-weight: 600; color: var(--aqua); }
.panel-cam-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.panel-cam-tabs .chip { padding: 4px 10px; font-size: 12px; }
.panel-cam-frame { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; display: grid; place-items: center; gap: 8px;
                   background: var(--inset); border: 1px solid var(--line); text-align: center; padding: 0; }
.panel-cam-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.panel-cam-frame p { margin: 0 12px; }

/* Toasts (BACKLOG 131): flashed messages float above the tab bar on phones, top right on desktop. */
.toasts { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(84px + var(--safe-b)); display: grid; gap: 8px;
          justify-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: min(100%, 460px); padding: 12px 10px 12px 16px;
         border-radius: 14px; background: var(--surface-2); color: var(--text); border: 1px solid color-mix(in srgb, var(--aqua) 45%, var(--line));
         box-shadow: var(--shadow); font-size: 14px; line-height: 1.45; animation: toast-in .25s ease-out; }
.toast > span { flex: 1; min-width: 0; }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.toast-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none;
           color: var(--text-2); cursor: pointer; }
.toast-x .i { width: 14px; height: 14px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) { .toasts { left: auto; right: 24px; top: 80px; bottom: auto; justify-items: end; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.out { transition: none; } }

/* Report an alert (BACKLOG 130): opens to the full width of whatever row it sits in. */
.alert-form > summary { list-style: none; }
.alert-form > summary::-webkit-details-marker { display: none; }
.alert-form[open] { flex-basis: 100%; width: 100%; text-align: left; }
.center-row .alert-form { margin: 0 auto; }

/* Swop shop (BACKLOG 88). */
.swop-split { align-items: start; }
.swop-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); min-width: 0; }
.swop-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: var(--text); text-decoration: none; }
.swop-card:hover { text-decoration: none; border-color: var(--aqua); }
.swop-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--inset); }
.swop-photo.none { display: grid; place-items: center; color: var(--text-3); }
.swop-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.swop-title { font-size: 15px; line-height: 1.3; }
.swop-price { font: 700 16px var(--display); color: var(--aqua); }
.swop-price.big { font-size: 24px; margin: 4px 0 10px; }
.swop-kind { justify-self: start; display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
             border: 1px solid var(--line-2); color: var(--text-2); background: var(--surface-2); }
.swop-kind.free { color: var(--aqua); border-color: color-mix(in srgb, var(--aqua) 45%, transparent); }
.swop-kind.wanted { color: var(--sand); border-color: color-mix(in srgb, var(--sand) 45%, transparent); }
:root[data-theme="light"] .swop-kind.wanted { color: #8a5a00; }
.swop-map-card { overflow: hidden; position: sticky; top: 84px; }
.swop-map { height: 420px; }
.swop-pick { height: 400px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 640px) { .swop-pick { height: 340px; } }
/* The Satellite or Map switch on the Swop shop's maps (BACKLOG 147); MapLibre sizes its buttons square. */
.maplibregl-ctrl-group button.map-style-btn { width: auto; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--text); }

/* Listing photos (BACKLOG 145): a box to drop them on or tap, and a preview of each. */
.photo-drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 16px; text-align: center; cursor: pointer;
              border: 1.5px dashed var(--line-2); border-radius: 14px; background: var(--inset); transition: border-color .15s, background .15s; }
.photo-drop:hover, .photo-drop.over { border-color: var(--aqua); background: color-mix(in srgb, var(--aqua) 8%, var(--inset)); }
.photo-drop.over { border-style: solid; }
.photo-drop:focus-within { border-color: var(--aqua); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aqua) 18%, transparent); }
.photo-drop.busy { opacity: .6; pointer-events: none; }
.photo-drop.full { cursor: default; }
.photo-drop-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--aqua);
                   background: color-mix(in srgb, var(--aqua) 14%, transparent); margin-bottom: 4px; }
.photo-drop-icon svg.i { width: 20px; height: 20px; }
.photo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); margin-top: 10px; min-width: 0; }
.photo-thumb { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--inset);
               border: 1px solid var(--line); cursor: pointer; }
.photo-thumb.cover { cursor: default; box-shadow: 0 0 0 2px var(--aqua); border-color: transparent; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cover { position: absolute; left: 6px; bottom: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 600;
               color: #fff; background: rgba(4, 17, 29, 0.72); }
.photo-x { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
           border: 0; border-radius: 50%; color: #fff; background: rgba(4, 17, 29, 0.72); cursor: pointer; }
.photo-x:hover, .photo-x:focus-visible { background: var(--coral); }
.photo-x svg.i { width: 14px; height: 14px; }
/* A listing's other photos, under the big one. */
.swop-thumbs { display: flex; gap: 8px; overflow-x: auto; margin: -4px 0 12px; padding-bottom: 2px; }
.swop-thumb { flex: none; width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
              background: var(--inset); cursor: pointer; opacity: .75; }
.swop-thumb.on, .swop-thumb:hover { opacity: 1; border-color: var(--aqua); }
.swop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swop-photo-wrap { position: relative; display: block; }
.swop-count { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
              border-radius: 99px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(4, 17, 29, 0.72); }
.swop-count svg.i { width: 13px; height: 13px; }
/* MapLibre owns the marker's transform, so the drop shape is on an inner <i>. */
.swop-pin { display: block; width: 24px; height: 24px; cursor: pointer; }
.swop-pin i { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--coral);
              box-shadow: 0 0 0 3px var(--bg), 0 2px 6px rgba(0, 0, 0, 0.35); }
.swop-big { width: 100%; max-height: 460px; object-fit: contain; border-radius: 12px; background: var(--inset); margin-bottom: 12px; }
.swop-h { margin: 8px 0 0; }
.swop-details { white-space: pre-wrap; overflow-wrap: anywhere; }
.swop-area { margin: 0; min-width: 200px; }
@media (max-width: 1023px) { .swop-map-card { position: static; } .swop-map { height: 280px; } .swop-split .swop-map-card { order: -1; } }

/* A club change as a list (people or links), not raw data. */
.change-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.change-list li { display: flex; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
.change-list .i { width: 13px; height: 13px; flex: none; position: relative; top: 2px; }
.change-list .add .i { color: var(--good-text); }
.change-list .gone .i { color: var(--coral); }
.change-list .chg .i { color: var(--sky); }
.club-change { overflow-wrap: anywhere; }

/* Near you on the map (BACKLOG 142). */
.near-insight { margin: 4px 0 0; }
.near-rows { display: grid; gap: 6px; }
.near-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; text-align: left;
            border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.near-row:hover { border-color: var(--aqua); }
.near-row .grow { display: grid; min-width: 0; }


/* ================================================================== notifications (BACKLOG 148)
   The bell beside the sun and moon, with its count, and the pane it opens: new ones stand out
   with an aqua edge until the next time the list is opened. */
.bell-btn { position: relative; }
.bell-btn svg.i { width: 20px; height: 20px; }
.bell-btn .count { position: absolute; top: -4px; right: -4px; margin: 0; min-width: 18px; height: 18px; line-height: 18px;
                   font-size: 10px; font-style: normal; }
.drawer-title h2 { display: flex; align-items: center; gap: 8px; margin: 4px 44px 16px 0; font: 600 20px var(--display); }
.drawer-title h2 svg.i { width: 20px; height: 20px; color: var(--aqua); }
.notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.notice a { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface);
            color: var(--text); }
.notice a:hover { text-decoration: none; background: var(--surface-3); }
.notice.new a { background: color-mix(in srgb, var(--aqua) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--aqua); }
.notice-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
               background: var(--inset); color: var(--aqua); }
.notice-icon svg.i { width: 18px; height: 18px; }
.notice-icon.alerts { color: var(--coral); }
.notice-icon.swop { color: var(--sand); }
:root[data-theme="light"] .notice-icon.swop { color: #8a5a00; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .notice-icon.swop { color: #8a5a00; } }
.notice-text { display: grid; gap: 2px; min-width: 0; }
.notice-text b { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.notice-text span { font-size: 13px; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.notice-text small { font-size: 11.5px; color: var(--text-3); }
.notice-empty { display: grid; justify-items: center; gap: 4px; padding: 28px 12px; text-align: center; }
.notice-empty .notice-icon { width: 48px; height: 48px; margin-bottom: 6px; }
.notice-empty p { margin: 0; }
.notices-page .notice-list { gap: 8px; }
/* Narrow phones: the bell joined the top bar, so the clock keeps only the time. */
@media (max-width: 420px) {
  .topbar { gap: 6px; padding-left: 12px; padding-right: 10px; }
  .topbar .clock span { display: none; }
}

/* ================================================================== spotters (BACKLOG 156) */
.watch-wrap { display: grid; gap: 16px; max-width: 720px; }
.watch-card .kicker { display: flex; align-items: center; gap: 6px; color: var(--aqua); }
.watch-card h1 { margin: 6px 0 14px; font-size: clamp(24px, 5vw, 32px); }
.watch-card.done h1 { color: var(--text-2); }
.watch-late { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
              color: #fff; background: var(--coral); }
.watch-warn { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-weight: 500;
              background: color-mix(in srgb, var(--coral) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--coral) 40%, transparent); }
.watch-yes { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 600; color: var(--good-text); }
.watch-sos h3 { display: flex; align-items: center; gap: 8px; }
.watch-sos h3 svg.i { color: var(--coral); }
.watch-sos .btn { font-variant-numeric: tabular-nums; }
.watch-mini { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; color: var(--text);
              border-color: color-mix(in srgb, var(--aqua) 40%, var(--line)); }
.watch-mini:hover { text-decoration: none; border-color: var(--aqua); }
.watch-mini .grow { display: grid; gap: 2px; min-width: 0; }
.watch-mini small { font-size: 12px; color: var(--text-2); }
.watch-mini-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--aqua);
                   background: color-mix(in srgb, var(--aqua) 14%, transparent); }
.spot-note { margin: 4px 0 14px; padding: 12px 14px 2px; border-radius: 14px; background: var(--inset); }
.spot-note p { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; }
.spot-note p svg.i { flex: none; margin-top: 2px; color: var(--aqua); }
.out-modes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 14px; min-width: 0; }
.spot-others { margin-top: 4px; }