.regulation-drawer { position: absolute; z-index: 650; right: 18px; bottom: 50px; width: min(360px, calc(100% - 36px)); max-height: 55%; overflow: auto; padding: 18px; border: 1px solid #dce5df; border-radius: 16px; color: #31504f; background: white; box-shadow: 0 12px 34px rgb(25 48 43 / 20%); font-size: 12px; }
.details-preview { z-index: 651; }
.regulation-drawer h2 { margin: 0 0 12px; color: #183d40; font-size: 19px; }
.drawer-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer-title h2 { margin-bottom: 4px; }
.regulation-drawer p { line-height: 1.5; }
.spot-regulation, .fish-section { padding-top: 12px; border-top: 1px solid #e8eee9; }
.spot-regulation h3, .fish-section h3 { margin: 0 0 9px; color: #244542; font-size: 14px; }
.spot-regulation h4 { margin: 13px 0 6px; color: #526c65; font-size: 11px; }
.regulation-details { margin-top: 7px; color: #536b64; font-size: 11px; }
.regulation-details summary { color: #397067; font-weight: 650; cursor: pointer; }
.regulation-details p { margin: 6px 0 0; }
.regulation-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; padding: 0; list-style: none; }
.regulation-chips li { padding: 5px 8px; border: 1px solid #dcebe2; border-radius: 999px; color: #35645c; background: #edf6ef; font-size: 11px; font-weight: 650; }
.spot-sources { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 0; padding: 0; list-style: none; }
.spot-sources a, .data-attribution a { color: #16776f; font-weight: 650; text-underline-offset: 2px; }
.spot-empty, .spot-unavailable, .spot-loading { margin: 0; color: #657b74; font-size: 11px; line-height: 1.4; }
.spot-loading { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 6px 10px; border: 1px solid #dcebe2; border-radius: 999px; color: #35645c; background: #f4faf7; font-weight: 600; }
.spot-spinner { display: inline-block; box-sizing: border-box; flex: 0 0 18px; width: 18px; height: 18px; border: 3px solid #bcded3; border-top-color: #138177; border-radius: 50%; animation: spot-spin .7s linear infinite; }
@keyframes spot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spot-spinner { animation: none; } }
.spot-unavailable { color: #765a2b; }
.fish-section { margin-top: 12px; }
.fish-nearby-note { margin: 0 0 9px; color: #576e66; font-size: 11px; }
.fish-species-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.fish-species-card { overflow: hidden; border: 1px solid #e3ebe5; border-radius: 11px; background: #fbfcfb; }
.fish-species-main { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 8px; }
.fish-species-image-wrapper { display: block; flex: 0 0 46px; width: 46px; height: 46px; }
.fish-species-image { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 9px; object-fit: contain; background: #edf4ef; }
.fish-species-fallback { display: grid; place-items: center; color: #17766f; font-size: 24px; }
.fish-species-copy { display: grid; min-width: 0; gap: 2px; }
.fish-species-copy strong { overflow: hidden; color: #244542; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.fish-species-copy em { color: #576e66; font-size: 11px; }
.fish-species-meta { display: flex; flex-wrap: wrap; gap: 3px 8px; color: #576e66; font-size: 11px; }
.fish-photo-credit { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; margin-left: auto; border-radius: 50%; color: #55746c; background: #edf4ef; font-size: 12px; text-decoration: none; }
.fish-photo-credit:hover, .fish-photo-credit:focus-visible { color: white; background: #16776f; }
.fish-observation-details { padding: 0 10px 8px; color: #536b64; font-size: 11px; }
.fish-observation-details summary, .fish-method summary { color: #397067; font-weight: 650; cursor: pointer; }
.fish-observation-details ul { display: grid; gap: 3px; margin: 7px 0 0; padding-left: 16px; }
.spot-data-footer { display: grid; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf1ed; scroll-margin: 12px; }
.spot-data-footer section h3 { margin: 0 0 5px; color: #536b64; font-size: 11px; }
.fish-photo-credits { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: #536b64; font-size: 11px; }
.fish-photo-credits li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; scroll-margin: 12px; }
.fish-photo-credits a { color: #16776f; text-underline-offset: 2px; }
.data-attribution { margin: 0 0 7px; color: #536b64; font-size: 11px; }
.fish-method { color: #536b64; font-size: 11px; }
.fish-method p { margin: 6px 0 0; }
.regulation-drawer :focus-visible { outline: 2px solid #27877d; outline-offset: 2px; }

@media (max-width: 800px) {
    .regulation-drawer { right: 12px; bottom: 164px; width: calc(100% - 24px); max-height: 55%; }
}