/* Compact native activity control. Reuses the existing Field Folio tokens. */
.activityPicker{
  position:relative;display:inline-flex;align-items:center;flex:none;
  min-height:48px;background:var(--folio-field-white);color:var(--folio-graphite);
  border:1px solid var(--accent);border-radius:3px;box-shadow:var(--folio-shadow);
}
.activityPicker .atlas-icon{
  position:absolute;left:12px;pointer-events:none;color:var(--folio-graphite);
  --atlas-icon-cell:transparent;--atlas-icon-frame:var(--folio-graphite);
  --atlas-icon-mark:var(--folio-graphite);--atlas-icon-glyph-fill:transparent;
}
.activityPicker select{
  min-height:48px;width:154px;padding:10px 12px 10px 43px;
  border:0;border-radius:2px;background:transparent;color:inherit;
  font:600 14px/1.2 var(--font-interface);letter-spacing:.025em;
  cursor:pointer;color-scheme:light;outline-offset:4px;
}
.activityPicker:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.activityPicker option{color:#171a17;background:#f5f4ee}
.activityPicker .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media(max-width:600px){
  .activityPicker select{width:142px;min-height:44px;font-size:16px;padding-left:38px}
  .activityPicker{min-height:44px}
  .activityPicker .atlas-icon{left:9px}
}

.beachPage{max-width:1600px;margin:auto;padding:28px}
.beachHeader{display:flex;align-items:center;justify-content:space-between;gap:24px}
.beachHeader h1{font:40px/1.1 var(--font-display);margin:8px 0}
.beachHeader>div>p:last-child,.beachMapCaption{color:var(--text-dim);font-size:13px}
.beachEyebrow{font:600 12px/1.4 var(--font-interface);letter-spacing:.08em;color:var(--accent)}
.beachPreviewNote{font:14px/1.6 var(--font-interface);max-width:850px;margin:20px 0 24px;color:var(--text)}
.beachLayout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}
#beachMap{height:min(65vh,720px);min-height:400px;background:var(--surface);border:1px solid var(--border-strong)}
.beachMapCaption{margin:12px 0;line-height:1.6}
.beachBrowser{min-width:0;border:1px solid var(--border-strong);background:var(--surface)}
.beachDetail{padding:20px;border-bottom:1px solid var(--border-strong)}
.beachDetail h2{font:26px/1.15 var(--font-h2);margin:8px 0 14px}
.beachDetail p,.beachDetail details,.beachAdvisories p{font:14px/1.6 var(--font-interface);margin:10px 0}
.beachDetail summary{cursor:pointer;min-height:44px;padding:12px 0}
.beachSourceLinks{display:grid;gap:4px}
.beachSourceLinks a{display:block;padding:9px 0}
.beachPage a{color:var(--accent);text-underline-offset:4px}
.beachPage a:focus-visible,.beachPage button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.beachFilters{padding:18px;display:grid;gap:12px;border-bottom:1px solid var(--border-strong)}
.beachFilters label{display:grid;gap:8px;font:13px var(--font-interface)}
.beachFilters input,.beachFilters select{box-sizing:border-box;width:100%;min-height:44px;padding:10px;border:1px solid var(--border-strong);background:var(--bg);color:var(--text);font:16px var(--font-interface);color-scheme:dark}
.beachResults{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
.beachResults button{background:none;border:0;text-decoration:underline;color:var(--text);min-height:44px}
#beachList{padding:0;margin:0;list-style:none;max-height:460px;overflow:auto}
#beachList button{display:grid;gap:6px;text-align:left;width:100%;min-height:66px;padding:16px 18px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font:16px/1.3 var(--font-interface)}
#beachList button small{color:var(--text-dim);font:12px/1.4 var(--font-interface)}
#beachList button:hover,#beachList button[aria-pressed="true"]{background:var(--surface-active);box-shadow:inset 3px 0 var(--accent)}
.beachEmpty{padding:20px;font-size:14px;line-height:1.6}
.beachThumb{position:relative;display:block;width:88px;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--bg)}
.beachThumb img{display:block;width:100%;height:100%;object-fit:cover}
#beachList button:has(.beachThumb){grid-template-columns:88px minmax(0,1fr);align-items:center;gap:13px}
.beachListText{display:grid;gap:6px}
.beachCover{width:100%;margin:16px 0 8px}
.beachPin{display:grid;place-items:center;background:transparent}
.beachPin span{width:17px;height:17px;background:var(--bg);border:3px solid var(--accent);border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.7)}
.beachPin.selected span{width:23px;height:23px;background:var(--accent);border-color:var(--text)}
.beachAdvisories{margin:26px 0;padding-top:20px;border-top:1px solid var(--border-strong)}
.beachAdvisories h2{font:22px var(--font-h2)}
#beachActivitySelect{padding-left:14px}
#beachRetry[hidden]{display:none!important}
@media(max-width:980px){
  .beachPage{padding:22px 16px}
  .beachLayout{grid-template-columns:1fr}
  #beachMap{height:360px;min-height:300px}
  .beachHeader h1{font-size:32px}
  .beachHeader{gap:12px}
  .beachAdvisories{margin:18px 0}
  #beachList{max-height:440px}
}