/* barrelfare.com/app: the signed-in web app, in the app theme
   (site.css :root[data-theme="app"]). The board mirrors the app's Deals
   screen (ios/BarrelFare/Views/DealListView.swift, MapHeader.swift RegionRail,
   HorizonTabs.swift); cards come from deal-card.css. */

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
button{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border:0;border-radius:999px;
  font:700 16px/1 var(--ui);color:#fff;background:var(--teal);text-decoration:none;cursor:pointer;
  box-shadow:0 8px 22px -12px rgba(14,124,134,.8)}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--teal-ring)}

/* ---------- Board ---------- */
/* At least a screen tall, so the footer starts below the fold and does not
   jump while the skeleton turns into cards (CLS 0.6 on 2026-10-07). */
.board{max-width:720px;margin:0 auto;padding:12px 16px 72px;min-height:100vh;min-height:100svh}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.tools{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--card);box-shadow:var(--shadow)}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:0;border-radius:999px;background:transparent;color:var(--teal);cursor:pointer}
.icon-btn:hover{background:var(--fill)}
.icon-btn[hidden]{display:none}
.icon-btn.on{color:#fff;background:var(--teal)}
.icon-btn .n{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  font:700 10px/16px var(--ui);color:#fff;background:#FF6B4A}
.search{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:999px;color:var(--ink-2)}
.search input{width:min(34vw,220px);border:0;outline:0;background:transparent;font:16px var(--ui);color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.home-chip{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 16px;border:0;border-radius:999px;
  background:var(--card);box-shadow:var(--shadow);font:600 15px var(--ui);color:var(--teal-text);cursor:pointer}
.home-chip:hover{background:var(--card-2)}
.horizon{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.horizon button{padding:5px 0 0;border:0;background:none;cursor:pointer;font:700 26px/1.1 var(--ui);letter-spacing:-.6px;
  color:var(--ink-3);white-space:nowrap}
.horizon button::after{content:"";display:block;width:100%;height:3px;margin-top:5px;border-radius:2px;background:transparent;
  transition:background .2s}
.horizon button[aria-selected="true"]{color:var(--ink)}
.horizon button[aria-selected="true"]::after{background:var(--teal)}
.horizon button:hover{color:var(--ink-2)}
.horizon button[aria-selected="true"]:hover{color:var(--ink)}
.horizon button:focus-visible{outline:2px solid var(--teal-ring);outline-offset:4px;border-radius:4px}
@media (max-width:420px){.horizon{gap:12px}.horizon button{font-size:22px}}
.month-btn{width:auto;min-width:40px;padding:0 8px;gap:5px}
.month-btn.picked{background:var(--fill)}
#month-lbl{font:700 15px var(--ui);letter-spacing:-.1px}
#month-lbl:empty{display:none}

/* Month picker (MonthGridPopover): Anytime, then the year three across. */
dialog.month-sheet{width:min(340px,calc(100vw - 24px))}
.month-sheet .sheet-h{padding:14px 16px 10px;border-bottom:.5px solid var(--sep)}
.month-sheet .sheet-h h2{font:600 13px var(--ui);color:var(--ink-2)}
.month-any{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 16px;border:0;border-bottom:.5px solid var(--sep);
  background:none;cursor:pointer;text-align:left}
.month-any b{font:400 16px var(--ui);color:var(--ink)}
.month-any span:nth-of-type(1){flex:1;text-align:right;font-size:12px;color:var(--ink-2);white-space:nowrap}
.month-any #month-any-ico{color:var(--teal);opacity:0;display:inline-flex}
.month-any.on{background:rgba(14,124,134,.10)}
.month-any.on b{font-weight:700;color:var(--teal-text)}
.month-any.on #month-any-ico{opacity:1}
.month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px}
.mcell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;border:0;border-radius:10px;
  background:var(--fill);cursor:pointer;color:var(--ink)}
.mcell b{font:700 15px var(--ui);letter-spacing:-.1px}
.mcell span{font:600 12px var(--ui);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.mcell.on{background:var(--teal);color:#fff}
.mcell.on span{color:rgba(255,255,255,.86)}
.mbar{position:relative;display:block;width:24px;height:3px;border-radius:2px;background:rgba(120,120,128,.16);overflow:hidden}
.mcell.on .mbar{background:rgba(255,255,255,.22)}
.mbar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.mcell:focus-visible,.month-any:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.rail{display:flex;gap:16px;overflow-x:auto;margin:14px -16px 0;padding:8px 16px 0;border-top:.5px solid var(--sep);
  border-bottom:.5px solid var(--sep);scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
.rail::-webkit-scrollbar{display:none}
/* The rail's height before app.js fills it, so the cards do not drop 57 px
   when it does (CLS 0.047 on 2026-10-07). */
.rail:empty{min-height:67px}
.rail-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 2px 8px;border:0;
  border-bottom:2px solid transparent;background:none;color:var(--ink-2);cursor:pointer}
.rail-tab svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-tab span{font:600 12px var(--ui);white-space:nowrap}
.rail-tab.on{color:var(--teal);border-bottom-color:var(--teal)}
#feed{margin-top:12px}

/* ---------- Drive rails: "Worth the drive" and "Near you" (RoadTripRail / NearYouRail) ---------- */
.drive{margin-top:16px}
.drive h2{margin:0 4px 8px;font:600 13px var(--ui);color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
.dt-strip{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;list-style:none;scrollbar-width:none}
.dt-strip::-webkit-scrollbar{display:none}
.dt-strip li{flex:0 0 auto}
.dt{display:flex;flex-direction:column;gap:4px;width:168px;padding:12px;border-radius:18px;background:var(--card);
  box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.dt-photo{width:196px;padding:8px}
.dt-photo img{width:100%;height:104px;object-fit:cover;border-radius:12px;margin-bottom:4px;background:var(--fill)}
.dt-photo b,.dt-photo .dt-fact,.dt-photo .dt-row{margin-left:4px}
.dt b{font:600 16px/1.25 var(--ui);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dt:not(.dt-photo) b{min-height:2.5em}
.dt-photo b{white-space:nowrap;text-overflow:ellipsis;display:block}
.dt-row{display:flex;gap:10px}
.dt-fact{display:inline-flex;align-items:center;gap:4px;font:500 14px var(--ui);white-space:nowrap}
.dt-fact .ic{color:var(--teal);flex:0 0 auto}
.dt-fact.dt-home span{color:var(--ink-2)}
a.dt:hover{background:var(--card-2)}
a.dt:focus-visible{outline:2px solid var(--teal-ring);outline-offset:2px}
.board-foot{margin:14px 4px 0;font-size:13px;line-height:1.4;color:var(--ink-2)}
.empty{margin-top:40px;text-align:center;padding:0 16px}
.empty h2{font:700 20px var(--ui)}
.empty p{margin:8px auto 18px;max-width:36ch;color:var(--ink-2);line-height:1.45}
.dc-skel .dc-img{background:var(--fill)}
.dc-skel .dc-body{gap:9px;padding-top:4px}
.dc-skel i{display:block;height:12px;border-radius:4px;background:var(--fill)}
@media (prefers-reduced-motion:no-preference){
  .dc-skel i,.dc-skel .dc-img{animation:pulse 1.2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.5}}
}

/* ---------- Sheets ---------- */
dialog.sheet{margin:auto;border:0;border-radius:22px;padding:0;width:min(440px,calc(100vw - 24px));max-height:min(80vh,640px);
  background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.sheet::backdrop{background:rgba(0,0,0,.4)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 8px}
.sheet-h h2{font:700 18px var(--ui)}
.sheet-h button{border:0;background:none;font:600 15px var(--ui);color:var(--teal-text);cursor:pointer}
.sheet-b{padding:4px 20px 8px;overflow:auto}
.sheet-f{display:flex;gap:10px;padding:12px 20px 20px}
.sheet-f .btn{flex:1}
.tog,.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:.5px solid var(--sep);
  font:500 16px var(--ui)}
.tog small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--ink-2)}
.tog input{width:44px;height:26px;appearance:none;-webkit-appearance:none;border-radius:13px;background:var(--fill);
  position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s}
.tog input::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.tog input:checked{background:#34C759}
.tog input:checked::after{transform:translateX(18px)}
.row select{font:16px var(--ui);color:var(--teal-text);background:transparent;border:0;text-align:right;cursor:pointer}
.home-q{width:100%;margin:4px 0 8px;padding:12px 14px;border-radius:12px;border:0;background:var(--fill);font:16px var(--ui);color:var(--ink)}
.home-list{list-style:none}
.home-list button{display:flex;justify-content:space-between;width:100%;padding:13px 2px;border:0;border-bottom:.5px solid var(--sep);
  background:none;text-align:left;cursor:pointer;font:16px var(--ui)}
.home-list button span{color:var(--ink-2);font-family:ui-monospace,Menlo,monospace;font-size:14px}
.home-list button[aria-current]{color:var(--teal-text);font-weight:600}

/* ---------- Sign in ---------- */
body[data-page="signin"]{min-height:100vh}
.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.auth-photo{position:relative;overflow:hidden;background:#0b2a2c url(/assets/hero/oahu-wide-1280.webp) center/cover;color:#fff;
  display:flex;align-items:flex-end;padding:40px}
.auth-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,18,20,.75),rgba(4,18,20,0) 60%)}
.auth-photo p{position:relative;z-index:1;max-width:16ch;font:800 clamp(30px,3.6vw,46px)/1.02 var(--display);letter-spacing:-.04em}
.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:40px clamp(20px,6vw,72px);max-width:560px;width:100%;margin:0 auto}
.auth-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);margin-bottom:36px}
.auth-brand b{font:800 20px var(--display);letter-spacing:-.03em}
.auth-brand b span{font-weight:300;color:var(--teal)}
.auth h1{font:800 32px/1.1 var(--display);letter-spacing:-.03em}
.auth-sub{margin-top:8px;font-size:16px;color:var(--ink-2)}
.btn-provider{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:22px;padding:14px;
  border:1px solid var(--sep);border-radius:14px;background:var(--card);font:600 16px var(--ui);color:var(--ink);cursor:pointer}
.btn-provider:hover{background:var(--card-2)}
/* Sign in with Apple: Apple's black button (white in dark mode), above Google. */
.btn-apple{background:#000;color:#fff;border-color:#000}
.btn-apple:hover{background:#1C1C1E}
.btn-apple+.btn-provider{margin-top:10px}
.btn-provider[hidden]{display:none}
@media (prefers-color-scheme:dark){.btn-apple{background:#fff;color:#000;border-color:#fff}.btn-apple:hover{background:#E5E5EA}}
.auth-note{margin-top:10px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.or{display:flex;align-items:center;gap:10px;margin:20px 0 6px;font-size:13px;color:var(--ink-2)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--sep)}
.field{display:block;margin-top:14px;font:500 15px var(--ui)}
.field input{display:block;width:100%;margin-top:6px;padding:14px;border-radius:12px;border:1px solid var(--sep);
  background:var(--card);font:16px var(--ui);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-ring)}
body[data-mode="signin"] [data-create]{display:none}
body[data-mode="create"] [data-signin]{display:none}
.auth-forgot{display:block;margin:8px 0 0 auto;border:0;background:none;padding:0;font:500 14px var(--ui);
  color:var(--teal-text);cursor:pointer}
.auth-forgot:hover{text-decoration:underline}
/* /app/reset: one panel, four states (reset.ts sets body[data-state]). */
body[data-page="reset"] [data-show]{display:none}
body[data-state="verify"] [data-show~="verify"],body[data-state="form"] [data-show~="form"],
body[data-state="done"] [data-show~="done"],body[data-state="expired"] [data-show~="expired"]{display:block}
#reset-submit{width:100%;margin-top:20px}
.auth-panel .btn.as-link{display:inline-block;margin-top:22px;text-decoration:none;text-align:center}
.rules{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.rules li{display:flex;align-items:center;gap:6px}
.rule-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink-3)}
.rules li.ok{color:var(--ink)}
.rules li.ok .rule-dot{border-color:var(--teal);background:var(--teal)}
#auth-submit{width:100%;margin-top:20px}
.auth-err{min-height:1.3em;margin-top:10px;font-size:14px;color:#C0392B}
.auth-toggle{margin-top:6px;border:0;background:none;font:15px var(--ui);color:var(--ink-2);cursor:pointer}
.auth-toggle:hover{color:var(--teal-text)}
.auth-legal{margin-top:26px;font-size:12.5px;color:var(--ink-2)}
.auth-legal a{color:inherit}
@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-photo{min-height:200px;padding:24px}
  .auth-photo p{font-size:28px}
  .auth-panel{padding-top:28px}
  .auth-brand{display:none}
}

/* ---------- Account ---------- */
.acct{max-width:600px;margin:0 auto;padding:28px 16px 80px}
.acct h1{font:800 32px/1.1 var(--display);letter-spacing:-.03em}
.acct .sub{margin-top:6px;color:var(--ink-2)}
.group{margin-top:22px;background:var(--card);border-radius:14px;padding:0 16px}
.group h2{padding:14px 0 6px;font:600 13px var(--ui);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.item{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:.5px solid var(--sep);font-size:16px}
.item span:first-child{color:var(--ink-2)}
.item span:last-child{text-align:right}
.item a{color:var(--teal-text)}
.item-go{justify-content:flex-end;padding:0;border-top:0}
/* The Alerts group: the You tab's switches (SwiftUI Toggle, system green). */
.item-alert{align-items:center}
.item .al-t{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
.item span.al-l{color:var(--ink)}
.item .al-n{font-size:13px;line-height:1.35;color:var(--ink-2)}
.item .al-t span{text-align:left}
.item .al-v{color:var(--ink-2)}
.sw{position:relative;flex:0 0 auto;width:51px;height:31px;padding:0;border:0;border-radius:999px;
  background:rgba(120,120,128,.24);cursor:pointer;transition:background .2s ease}
.sw[aria-checked="true"]{background:#34C759}
.sw .sw-k{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .2s ease}
.sw[aria-checked="true"] .sw-k{transform:translateX(20px)}
.sw:disabled{opacity:.6;cursor:default}
.sw:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sw[aria-checked="true"]{background:#30D158}
  :root:not([data-theme="light"]) .sw{background:rgba(120,120,128,.32)}}
@media (prefers-reduced-motion:reduce){.sw,.sw .sw-k{transition:none}}
/* The Board bags group (bags.ts): the app's garage list as rows. */
.item-bag{align-items:center}
.group[hidden]{display:none}
.item a.al-l{color:var(--ink);text-decoration:none}
.item a.al-l:hover{color:var(--teal-text)}
.bag-pick{display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer}
.bag-pick input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--teal)}
.bag-add{padding:12px 0 14px;border-top:.5px solid var(--sep);display:grid;gap:10px}
.bag-q,.bag-dims input{width:100%;min-width:0;padding:10px 12px;border:.5px solid var(--sep);border-radius:10px;
  background:var(--card-2);font:16px var(--ui);color:var(--ink)}
.bag-results{list-style:none;margin:0;padding:0;display:grid}
.bag-results:empty{display:none}
.bag-results button{width:100%;padding:11px 2px;border:0;border-bottom:.5px solid var(--sep);background:none;
  font:15px var(--ui);color:var(--teal-text);text-align:left;cursor:pointer}
.bag-dims{display:flex;align-items:center;gap:6px}
.bag-dims span{color:var(--ink-2)}
.bag-dims .btn-sm{flex:0 0 auto}
.group-msg{margin:0;padding:0 0 12px;font-size:13px;color:#FF3B30}
.group-msg:empty{display:none}
.item-go a{display:block;padding:0 0 14px;font-weight:600;text-decoration:none}
.item-go a[hidden]{display:none}
.acct-actions{display:grid;gap:10px;margin-top:24px}
.btn-plain{padding:14px;border:0;border-radius:14px;background:var(--card);font:600 16px var(--ui);cursor:pointer;color:var(--teal-text)}
.btn-danger{color:#C0392B}
.danger-input{width:100%;margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--sep);background:var(--bg);
  font:16px var(--ui);color:var(--ink)}
.btn.red{background:#C0392B;box-shadow:none}

/* Profile header: the photo, the name, Upload / Remove (Kody 2026-10-04).
   The photo is a button (click or drop a file on it); the camera badge says
   so. .nav-av is the nav's avatar class (nav-auth.js), reused at 96 px. */
.prof{display:flex;align-items:center;gap:20px}
.prof-av{position:relative;flex:0 0 auto;width:96px;height:96px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.prof-av:focus-visible{outline:none}
.prof-av:focus-visible .prof-ph,.prof-av.drop .prof-ph{box-shadow:0 0 0 4px var(--teal-ring)}
.prof-ph{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:color-mix(in srgb,var(--teal) 15%,var(--card));color:var(--teal);font:800 40px/1 var(--display);
  box-shadow:0 0 0 1px var(--sep);transition:box-shadow .18s}
.prof-ph img{display:block;width:100%;height:100%;object-fit:cover}
.prof-av[aria-busy="true"] .prof-ph{opacity:.55}
.prof-cam{position:absolute;right:0;bottom:2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--teal);color:#fff;box-shadow:0 0 0 3px var(--bg)}
.prof-id{min-width:0}
.prof-id h1{overflow-wrap:anywhere}
.prof-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn-sm{padding:8px 14px;border:0;border-radius:999px;background:var(--teal);color:#fff;font:600 14px var(--ui);cursor:pointer}
.btn-sm:disabled{opacity:.5;cursor:default}
.btn-sm:focus-visible{outline:none;box-shadow:0 0 0 4px var(--teal-ring)}
.btn-sm-plain{background:var(--fill);color:var(--ink)}
.btn-sm[hidden]{display:none}
.prof-msg{min-height:1.3em;margin-top:8px;font-size:14px;color:var(--ink-2)}
.prof-msg.err{color:#C0392B}
.item-field{align-items:center}
.item-field label{color:var(--ink-2);flex:0 0 auto}
.item-field input{flex:1;min-width:0;padding:0;border:0;background:none;font:16px var(--ui);color:var(--ink);text-align:right}
.item-field input:focus{outline:none}
.item-field input::placeholder{color:var(--ink-3)}
/* Profile > Preferences > Appearance, and the About links (account.ts). */
.item-field select{font:16px var(--ui);color:var(--teal-text);background:transparent;border:0;text-align:right;cursor:pointer;padding:0}
.item-link a{color:var(--ink);text-decoration:none;flex:1}
.item-link a:hover{color:var(--teal-text)}
.item-link::after{content:"\2197";color:var(--ink-3);font-size:13px}
@media (max-width:480px){
  .prof{gap:16px}
  .prof-av{width:80px;height:80px}
  .prof-ph{font-size:34px}
  .acct h1{font-size:26px}
}

/* ---------- Plans (PaywallView.swift) ---------- */
body[data-page="pro"]{min-height:100vh}
.pro-top{display:flex;align-items:center;justify-content:space-between;max-width:520px;margin:0 auto;padding:18px 20px 0}
.pro-top .auth-brand{display:inline-flex;margin:0}
.pro-acct{font:600 15px var(--ui);color:var(--teal-text);text-decoration:none}
.pro{max-width:520px;margin:0 auto;padding:12px 20px 56px}
.pro-hero{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px;text-align:center}
.pro-hero h1{font:700 24px/1.2 var(--ui);letter-spacing:-.3px}
.pro-tl{list-style:none;margin:28px 0 4px}
.pro-tl li{position:relative;display:flex;gap:14px;padding-bottom:16px}
.pro-tl li:last-child{padding-bottom:0}
.pro-tl li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:rgba(14,124,134,.6)}
.pro-tl li.tl-next:not(:last-child)::after{background:var(--sep)}
.tl-node{flex:0 0 40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.tl-active .tl-node{background:var(--teal);color:#fff}
.tl-next .tl-node{background:rgba(14,124,134,.15);color:var(--teal)}
.tl-quiet .tl-node{background:var(--fill);color:var(--ink-2)}
.tl-text{display:flex;flex-direction:column;gap:3px;padding-top:2px}
.tl-text b{font:600 17px var(--ui)}
.tl-text span{font-size:15px;line-height:1.35;color:var(--ink-2)}
.plans{display:grid;gap:10px;margin-top:24px}
.plan{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;padding:14px;border-radius:16px;
  border:1px solid rgba(14,124,134,.12);background:rgba(14,124,134,.07);text-align:left;cursor:pointer;color:var(--ink)}
.plan.on{border:2px solid var(--teal);padding:13px;background:linear-gradient(135deg,rgba(14,124,134,.16),rgba(14,124,134,.04))}
.plan:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.plan-t{display:flex;flex-direction:column;gap:3px}
.plan-t b{font:600 17px var(--ui)}
.plan-sub{font-size:13px;line-height:1.35;color:var(--ink-2)}
.plan-save{flex:0 0 auto;font:600 12px var(--ui);padding:4px 9px;border-radius:999px;color:var(--teal-text);background:rgba(14,124,134,.14)}
.plan-save:empty{display:none}
.plan.on .plan-save{color:#fff;background:var(--teal)}
.pro-cta{width:100%;margin-top:20px;padding:16px 24px;font-size:17px}
.pro-err{min-height:1.2em;margin-top:8px;font-size:14px;color:#C0392B;text-align:center}
.pro-terms{margin-top:2px;font-size:12px;line-height:1.6;color:var(--ink-3);text-align:center}
.pro-terms a{color:inherit}
.pro-app{margin-top:16px;font-size:13px;color:var(--ink-2);text-align:center}
.pro-out{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:10px;color:var(--ink-3)}
.link-btn{min-height:44px;padding:0 6px;border:0;background:none;cursor:pointer;font:600 14px var(--ui);color:var(--teal-text)}
.link-btn.quiet{font-weight:400;color:var(--ink-2)}
.pro-listed{display:flex;align-items:center;gap:6px;max-width:40ch;font-size:14px;line-height:1.4;color:var(--ink-2);text-align:center}
.pro-listed .ic{color:var(--teal)}

/* ---------- You're in (ProWelcomeView.swift) ---------- */
body[data-page="welcome"]{min-height:100vh;
  background:radial-gradient(circle at 70% 10%,rgba(255,255,255,.26),transparent 460px),
    linear-gradient(180deg,#1CB5C2 0%,#0E7C86 32%,#083840 66%,#111111 100%)}
.welcome{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 24px;
  text-align:center;color:#fff}
.welcome h1{font:800 36px/1.05 var(--display);letter-spacing:-.03em}
.welcome p{max-width:34ch;margin:12px auto 0;font-size:17px;line-height:1.45;color:rgba(255,255,255,.86)}
.welcome p a{color:#fff}
.wl-cta{margin-top:28px;background:#fff;color:#0A6B75;box-shadow:none}
.wl-wait,.wl-in,.wl-slow{display:none}
body[data-state="wait"] .wl-wait,body[data-state="in"] .wl-in,body[data-state="slow"] .wl-slow{display:block}
.wl-spin{display:inline-block;width:22px;height:22px;margin-top:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);
  border-top-color:#fff}
@media (prefers-reduced-motion:no-preference){
  .wl-spin{animation:spin .9s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  body[data-state="in"] .wl-in{animation:rise .5s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}}
}

/* Swell banner and swell screen (SwellEventBanner / SwellEventView). */
.swell-hide{display:none!important}
.swell{margin:14px 0 4px}
.swell-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--teal);
  color:#fff;text-decoration:none}
.swell-banner:focus-visible{outline:2px solid var(--teal-ring);outline-offset:2px}
.sb-faces{display:flex;flex:0 0 auto}
.sb-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--teal);background:var(--fill)}
.sb-faces img+img{margin-left:-14px}
.sb-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sb-text b{font:600 17px/1.25 var(--ui)}
.sb-text span{font:500 15px/1.3 var(--ui);color:rgba(255,255,255,.85)}
.sb-go{flex:0 0 auto;display:inline-flex}
.swell-view{padding:4px 0 24px}
.sv-back{display:inline-flex;align-items:center;gap:4px;font:600 15px var(--ui);color:var(--teal-text);text-decoration:none;
  margin:4px 0 10px}
.sv-title{font:700 24px/1.2 var(--display);margin:0}
.sv-sub{font:500 15px/1.3 var(--ui);color:var(--ink-2);margin:4px 0 14px}
.sv-report{font:400 17px/1.45 var(--ui);margin:0 0 16px;max-width:62ch}
.sv-load{min-height:120px}
.sv-h2{font:600 17px var(--ui);margin:22px 0 10px}
.swell-map{display:block;width:100%;height:auto;border-radius:16px;margin:0 0 16px;background:var(--map-ocean)}
:root{--map-ocean:#DCEBF0;--map-land:#F4F1EA;--map-coast:rgba(60,60,67,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--map-ocean:#0F2A33;--map-land:#2C2C2E;--map-coast:rgba(235,235,245,.18)}}
.sm-ocean{fill:var(--map-ocean)}
.sm-land{fill:var(--map-land);stroke:var(--map-coast);stroke-width:.8;stroke-linejoin:round}
.sm-fetch{stroke:var(--teal);stroke-opacity:.3;stroke-width:16;stroke-linecap:round;fill:none}
.sm-arrow{stroke:var(--teal);stroke-width:3;stroke-dasharray:8 6;stroke-linecap:round;fill:none}
.sm-headfill{fill:var(--teal)}
.sm-dot{stroke:#fff;stroke-width:1.5}
.sm-badge{fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.sm-low{font:800 20px var(--ui);fill:#BF1D1D;text-anchor:middle}
.sm-ico{color:var(--teal)}
.sm-ico.sm-tropical{color:#BF1D1D}
.sv-grid{background:var(--card);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.sg-scroll{overflow-x:auto;scrollbar-width:thin}
.sg{display:flex;flex-direction:column;min-width:max-content}
.sg-row{display:flex;align-items:stretch;border-bottom:1px solid var(--sep)}
.sg-row:last-child{border-bottom:0}
.sg-head{border-bottom:0}
.sg-name{position:sticky;left:0;z-index:2;flex:0 0 112px;width:112px;display:flex;align-items:center;padding-right:8px;
  background:var(--card);font:600 15px/1.25 var(--ui)}
.sg-name a{color:var(--ink);text-decoration:none}
.sg-name a:hover{color:var(--teal-text)}
.sg-cells{position:relative;display:flex}
.sg-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:32px;fill:var(--teal);fill-opacity:.12;pointer-events:none}
.sg-day,.sg-cell{flex:0 0 64px;width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sg-day{height:40px;font:500 12px/1.2 var(--ui);color:var(--ink-2)}
.sg-day b{font-weight:600}
.sg-day.peak{color:var(--teal-text);font-weight:700}
.sg-cell{height:58px;gap:6px;position:relative;z-index:1;font:400 15px var(--ui);color:var(--ink-3)}
.sg-cell b{font:700 15px var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-bars{display:flex;gap:2px;width:44px}
.sg-bars i{flex:1;height:4px;border-radius:2px}
@media (max-width:420px){.sg-name{flex-basis:96px;width:96px;font-size:14px}}

/* ---------- Map view (explore_map.ts; SpotMapView on the app) ---------- */
.xm{position:relative;margin-top:14px}
.xm[hidden]{display:none}
.xm-stage{position:relative;height:min(74vh,640px);min-height:420px;border-radius:16px;overflow:hidden;
  background:var(--map-ocean);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.xm-stage:active{cursor:grabbing}
.xm-land{position:absolute;inset:0;width:100%;height:100%;display:block}
.xm-ocean{fill:var(--map-ocean)}
.xm-land use{fill:var(--map-land);stroke:var(--map-coast);stroke-width:.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.xm-pins{position:absolute;inset:0;pointer-events:none}
.xm-home{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  margin:-13px 0 0 -13px;border-radius:50%;background:var(--ink);color:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* A pin is a dot on its spot; a capsule (is-cap) stands above the dot on a tail. */
.xm-pin{--q:#8E8E93;position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;
  pointer-events:auto;cursor:pointer}
.xm-pin.q-great{--q:#0E7A3B}.xm-pin.q-good{--q:#2F7A2A}.xm-pin.q-fair{--q:#A85410}.xm-pin.q-poor{--q:#C0392B}
.xm-pin::before{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--q);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.xm-pin::after{content:"";position:absolute;left:-16px;top:-16px;width:32px;height:32px}
.xm-pin span{display:none}
.xm-pin.is-cap::before{left:-4px;top:-4px;width:8px;height:8px;border-width:1.5px}
.xm-pin.is-cap span{position:absolute;bottom:6px;left:0;transform:translateX(-50%);display:block;height:26px;padding:0 10px;
  border-radius:13px;background:var(--q);color:#fff;font:600 13px/26px var(--ui);white-space:nowrap;
  font-variant-numeric:tabular-nums;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.xm-pin.is-cap span::after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;
  border-bottom:0;border-top-color:var(--q)}
.xm-pin.is-sel{--q:var(--teal);z-index:2}
.xm-pin.is-sel span{transform:translateX(-50%) scale(1.12);transform-origin:50% 100%}
.xm-pin.is-sel::before{background:var(--teal)}
.xm-pin:focus-visible{outline:none}
.xm-pin:focus-visible span,.xm-pin:focus-visible::before{box-shadow:0 0 0 3px var(--teal-ring)}
.xm-pin[hidden]{display:none}
.xm-ctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow),0 1px 3px rgba(0,0,0,.15)}
.xm-ctl button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:none;
  color:var(--teal);cursor:pointer}
.xm-ctl button+button{border-top:.5px solid var(--sep)}
.xm-ctl button:hover{background:var(--fill)}
.xm-cards{position:absolute;left:0;right:0;bottom:10px;list-style:none;display:flex;gap:10px;padding:0 max(7%,calc(50% - 170px));
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;pointer-events:none}
.xm-cards::-webkit-scrollbar{display:none}
.xm-cards>li{flex:0 0 86%;max-width:340px;scroll-snap-align:center;background:var(--card);border-radius:14px;
  padding:0 14px;box-shadow:0 4px 18px rgba(0,0,0,.18);pointer-events:auto}
@media (max-width:380px){.search input{width:24vw}}