/* EA1REK-97/98: compact, directly accessible overlay switches. */
#activityPage :is(#activityLayerControls,#activityProgressControls){display:flex;flex-wrap:wrap;justify-content:flex-start;width:auto;gap:6px}
#activityPage :is(#activityLayerControls,#activityProgressControls)[hidden]{display:none}
#activityPage :is(#activityLayerControls,#activityProgressControls) button{flex:0 0 auto;width:auto;min-height:44px;height:auto;padding:6px 10px;font-size:.78rem;line-height:1.2;gap:5px;background:transparent;border:1px solid var(--color-border);color:var(--color-primary);box-shadow:none}
#activityPage :is(#activityLayerControls,#activityProgressControls) button svg{width:16px;height:16px}
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=true]{background:color-mix(in srgb,var(--color-brand) 10%,var(--color-surface));border-color:var(--color-brand);color:color-mix(in srgb,var(--color-brand) 65%,black);outline:none}
[data-theme=dark] #activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=true]{color:var(--color-brand-text)}
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed]:focus-visible{outline:3px solid var(--color-brand);outline-offset:2px}
#activityPage #activityMapCoverage{display:block}
@media(max-width:575px){#activityPage :is(#activityLayerControls,#activityProgressControls){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}#activityPage :is(#activityLayerControls,#activityProgressControls) button{padding:6px;font-size:.77rem}}

/* Restore the three full-width Maps-style layer buttons requested in manual QA. */
#activityPage :is(#activityLayerControls,#activityProgressControls){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
#activityPage :is(#activityLayerControls,#activityProgressControls) button{width:100%;min-width:0;padding:5px 6px}
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=true]{background:var(--color-brand);border-color:var(--color-brand);color:white}

/* Keep active labels and icons legible on the orange surface in both themes. */
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=true],
[data-theme=dark] #activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=true]{color:#081e32}
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=true] span{color:inherit}

/* Match /maps layer-choice typography, surfaces, icon sizing and states. */
#activityPage :is(#activityLayerControls,#activityProgressControls) .map-layer-choice{display:flex;align-items:center;justify-content:center;min-height:46px;padding:7px 15px;font-size:.92rem;font-weight:700;gap:7px;border-radius:var(--radius-md);color:var(--color-text)}
#activityPage :is(#activityLayerControls,#activityProgressControls) .map-layer-choice svg{width:19px;height:19px;stroke-width:1.6}
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=false]{background:transparent;border-color:var(--color-border);color:var(--color-text)}
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=false]:hover{background:rgba(232,120,24,.12);border-color:var(--color-brand);color:var(--color-brand-text)}
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=true],
[data-theme=dark] #activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed=true]{background:var(--color-brand);border-color:var(--color-brand);color:white;box-shadow:0 2px 5px #0002}
#activityPage :is(#activityLayerControls,#activityProgressControls) button[aria-pressed]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
@media(max-width:575px){#activityPage :is(#activityLayerControls,#activityProgressControls) .map-layer-choice{font-size:.88rem;padding:8px;gap:4px}#activityPage :is(#activityLayerControls,#activityProgressControls) .map-layer-choice svg{width:18px;height:18px}}

@media(min-width:992px){#activityPage .activity-logbook-column>#activityMapCoverage{display:flex}}