/* Approved Round 2: desktop A's island-centered composition; phone B's open lists. */
#view-today-map .pageWrap, .beachPage.isRegionalToday { max-width: 1600px; padding: 28px 32px 40px; margin-inline: auto; }
#view-today-map .tmHead { margin-bottom: 10px; align-items: flex-start; }
#view-today-map .tmHead h1, .isRegionalToday .beachHeader h1 { font: 700 40px/1.05 var(--cg-display); letter-spacing: 0; margin: 0; }
#view-today-map .tmDate { font: 12px/1.5 var(--cg-interface); color: var(--cg-muted); padding-top: 9px; }
#tmStageWrap { width: 100%; height: auto; overflow: visible; }
#tmStage { display: block; width: auto; height: auto; position: relative; transform: none; transform-origin: initial; }
.regionalToday { --regional-accent: var(--cg-focus); color: var(--cg-ink); }
.regionalEvidence { display: flex; gap: 12px 24px; justify-content: space-between; align-items: start; border-top: 1px solid var(--cg-rule); }
.regionalContext { color: var(--cg-muted); font: 12px/1.6 var(--cg-interface); margin: 12px 0 0; }
.regionalSources { max-width: 58ch; font: 14px/1.6 var(--cg-interface); }
.regionalSources summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--cg-ink); }
.regionalSources summary::before { content: '+'; font: 18px var(--cg-number); }
.regionalSources[open] summary::before { content: '−'; }
.regionalSources p { margin: 0 0 14px; }
.regionalToday a { color: inherit; text-underline-offset: 4px; }
.regionalNotice { font: 12px/1.6 var(--cg-interface); color: var(--cg-muted); }
.regionalNotice p { margin: 0 0 12px; max-width: 85ch; }
.regionalNotice .regionalAlert { color: var(--warn, var(--cg-ink)); }
.regionalComposition { display: grid; grid-template-columns: minmax(240px, .95fr) minmax(270px, 1.28fr) minmax(250px, 1fr); grid-template-rows: auto auto auto; gap: 28px 26px; padding-block: 24px 32px; align-items: start; }
.regionalLocator { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; min-width: 0; }
.regionalLocator figcaption { text-align: center; text-transform: uppercase; font: 24px/1.3 var(--cg-interface); letter-spacing: .24em; margin: 0 0 22px; }
.regionalChart { position: relative; width: 100%; aspect-ratio: 1000 / 822; color: var(--cg-ink); }
.regionalChart img { width: 100%; height: 100%; display: block; }
.regionalPoints { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.regionalPoint { fill: var(--cg-bg); stroke: var(--cg-bright); stroke-width: 2; vector-effect: non-scaling-stroke; }
.regionalPointHalo { fill: transparent; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; }
.regionalPoints .isSelected .regionalPoint { fill: var(--regional-accent); stroke: var(--cg-bg); }
.regionalPoints .isSelected .regionalPointHalo { stroke: var(--regional-accent); }
.regionalMapLabel { display: none; }
.regionalCallouts { display: none; }
.regionalMapFallback { font: 14px/1.6 var(--cg-interface); }
.regionalList { min-width: 0; }
.regionalList--north { grid-column: 1; grid-row: 1; }
.regionalList--west { grid-column: 1; grid-row: 2; }
.regionalList--east { grid-column: 3; grid-row: 1 / 3; padding-top: 90px; }
.regionalList--south { grid-column: 2 / 4; grid-row: 3; }
.regionalList h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; text-transform: uppercase; font: 500 15px/1.5 var(--cg-interface); letter-spacing: .05em; }
.regionalList h2::after { content: ''; flex: 1; border-top: 1px solid var(--cg-rule); margin-left: 3px; }
.regionalList h2 span { white-space: nowrap; }
.regionalList ol { margin: 0; padding: 0; list-style: none; }
.regionalList--south ol { columns: 2; column-gap: 24px; }
.regionalList li { break-inside: avoid; }
.regionalRow { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 9px 8px; text-align: left; color: var(--cg-bright); font: 15px/1.45 var(--cg-interface); background: transparent; border: 0; border-bottom: 1px solid var(--cg-rule); border-radius: 0; cursor: pointer; }
.regionalName { overflow-wrap: anywhere; }
.regionalName small { display: block; font: 11px/1.5 var(--cg-interface); color: var(--cg-muted); }
.regionalRank, .regionalScore { font-family: var(--cg-number); font-variant-numeric: tabular-nums; }
.regionalRank { color: var(--cg-muted); }
.regionalScore { font-size: 16px; }
.regionalList ol:not(.unranked) li:first-child .regionalRow { outline: 1px solid var(--regional-accent); outline-offset: -1px; border-radius: 3px; background: color-mix(in srgb, var(--regional-accent) 5%, transparent); }
.regionalRow:hover, .regionalRow.isSelected { background: color-mix(in srgb, var(--regional-accent) 9%, transparent); }
.regionalToday button:focus-visible, .regionalToday a:focus-visible, .regionalToday summary:focus-visible { outline: 2px solid var(--cg-focus); outline-offset: 3px; }
.regionalToday button:disabled { cursor: wait; color: var(--cg-muted); }
.regionalEmpty { font: 14px/1.65 var(--cg-interface); color: var(--cg-muted); margin: 12px 0; }
.regionalCount { margin: 8px 8px 0; font: 11px/1.5 var(--cg-interface); color: var(--cg-muted); }
.regionalCompass { grid-column: 1; grid-row: 3; width: 85px; position: relative; align-self: center; justify-self: center; }
.regionalCompass svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1; }
.regionalCompass span { position: absolute; top: -8px; left: 47%; font: 10px var(--cg-interface); }
.regionalFooter { border-top: 1px solid var(--cg-rule); display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 12px/1.6 var(--cg-interface); color: var(--cg-muted); padding-top: 10px; }
.regionalFooter button { min-height: 44px; border: 1px solid var(--cg-rule); border-radius: 3px; background: transparent; color: var(--cg-ink); font: 13px var(--cg-interface); padding: 8px 14px; }
.regionalList .unranked .regionalRow { grid-template-columns: minmax(0,1fr); }
.isRegionalToday .beachHeader { display: block; margin-bottom: 10px; }
.isRegionalToday .beachHeader .activityPicker { margin-top: 8px; }
.isRegionalToday > .beachPreviewNote, .isRegionalToday > .beachLayout { display: none; }
.isRegionalToday > #beachRegionalStatus { font: 14px/1.6 var(--cg-interface); }
/* The unscored directory has more North/West rows: share its lower band. */
@media (min-width: 1201px) {
  .regionalToday[data-mode="beach"] .regionalComposition { grid-template-rows: auto auto; row-gap: 16px; padding-block: 8px 24px; }
  .regionalToday[data-mode="beach"] .regionalLocator { grid-row: 1; }
  .regionalToday[data-mode="beach"] .regionalList--east { grid-row: 1; padding-top: 0; }
  .regionalToday[data-mode="beach"] .regionalList--south { grid-row: 2; }
  .regionalToday[data-mode="beach"] .regionalCompass { display: none; }
}
@media (max-width: 1200px) and (min-width: 761px) {
  .regionalComposition { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .regionalLocator { grid-column: 1 / -1; grid-row: 1; width: min(420px, 100%); justify-self: center; }
  .regionalList--north { grid-column: 1; grid-row: 2; }
  .regionalList--west { grid-column: 2; grid-row: 2; }
  .regionalList--east { grid-column: 1; grid-row: 3; padding-top: 0; }
  .regionalList--south { grid-column: 2; grid-row: 3; }
  .regionalList--south ol { columns: 1; }
  .regionalCompass { display: none; }
}
@media (max-width: 760px) {
  #view-today-map .pageWrap, .beachPage.isRegionalToday { padding: 24px 20px 32px; }
  #view-today-map .tmHead h1, .isRegionalToday .beachHeader h1 { font-size: 34px; }
  #view-today-map .tmDate { display: none; }
  .regionalEvidence { display: block; border-top: 0; }
  .regionalContext { margin-top: 8px; }
  .regionalSources { font-size: 13px; }
  .regionalSources summary { min-height: 44px; }
  .regionalComposition { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
  .regionalLocator { width: min(360px, 100%); align-self: center; margin-bottom: 6px; }
  .regionalLocator figcaption { font-size: 22px; margin-bottom: 18px; }
  .regionalChart { width: 84%; margin-inline: auto; }
  .regionalMapLabel { display: block; position: absolute; font: 11px/1.3 var(--cg-interface); text-transform: uppercase; letter-spacing: .06em; color: var(--cg-ink); }
  .regionalMapLabel--north { top: 2%; left: 11%; }
  .regionalMapLabel--west { top: 62%; left: -8%; }
  .regionalMapLabel--east { top: 23%; right: -7%; }
  .regionalMapLabel--south { bottom: -5%; right: 11%; }
  .regionalList { width: 100%; padding-top: 0; }
  .regionalList h2 { font-size: 16px; margin-bottom: 8px; }
  .regionalList--south ol { columns: 1; }
  .regionalRow { min-height: 48px; padding: 11px 5px; font-size: 16px; gap: 9px; }
  .regionalList ol:not(.unranked) li:first-child .regionalRow { outline: none; border-top: 1px solid var(--cg-rule); border-radius: 0; background: transparent; }
  .regionalRow:focus-visible { outline: 2px solid var(--cg-focus) !important; }
  .regionalName small { font-size: 12px; }
  .regionalCount { margin-left: 5px; }
  .regionalCompass { display: none; }
  .regionalFooter { align-items: start; flex-direction: column; gap: 8px; }
  .regionalFooter button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .regionalToday * { scroll-behavior: auto; transition: none; } }


#view-today-map .tmHeadLeft { gap: 0; }
#view-today-map .activityPicker, .isRegionalToday .activityPicker { background: transparent; border: 0; box-shadow: none; color: var(--cg-bright); min-height: 44px; }
#view-today-map .activityPicker .atlas-icon, .isRegionalToday .activityPicker .atlas-icon { display: none; }
#view-today-map .activityPicker select, .isRegionalToday .activityPicker select { font: 700 25px/1.2 var(--cg-display); padding: 0 26px 0 0; min-height: 44px; width: auto; color: var(--cg-bright); color-scheme: dark; letter-spacing: 0; }
#view-today-map .activityPicker option, .isRegionalToday .activityPicker option { background: var(--cg-bg); color: var(--cg-bright); }

/* Override the inherited uppercase button and full-height Beach map shell. */
.regionalToday .regionalRow { text-transform: none; letter-spacing: 0; font-style: normal; }
.regionalActivity { margin: 0; color: var(--cg-bright); font: 700 25px/1.3 var(--cg-display); }
#view-beaches .beachPage.isRegionalToday { height: auto; min-height: 100%; overflow: visible; padding: 28px 32px 40px; }
#view-beaches .isRegionalToday .beachHeader { display: block !important; }
#view-beaches .isRegionalToday .beachHeader .regionalActivity { font: 700 25px/1.3 var(--cg-display); color: var(--cg-bright); margin: 0; }
#view-beaches .isRegionalToday > .beachLayout { display: none !important; }
#view-beaches .isRegionalToday .regionalActivity[hidden] { display: none; }
@media (max-width:760px) {
  #view-beaches .beachPage.isRegionalToday { padding: 24px 20px 32px; }
  .regionalLocator { width: min(280px, 100%); padding-bottom: 32px; }
  .regionalChart { width: 90%; }
  .regionalCallouts { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--cg-muted); stroke-width: 1; }
  .regionalCallouts path { vector-effect: non-scaling-stroke; }
  .regionalCallouts circle { fill: var(--cg-ink); stroke: none; }
  .regionalMapLabel--south { bottom: -19%; right: 10%; }
}