/**
 * @file map-notifications.css
 * @purpose Style the expandable notification column, switches, unread badge and feed.
 * @dependencies Sidebar layout and notification markup; loaded after map-interface.css.
 * @public .notification-menu, .notification-panel, .notification-option, .notification-list.
 * @sideEffects Keeps the map fixed while the notification column scrolls independently.
 */

/* Disclosure uses the same rail geometry as the map-mode section. */
.notification-menu { min-height: 0; flex: 0 0 auto; }
.notification-menu[open] { display: flex; flex: 0 0 auto; flex-direction: column; }
.notification-menu > summary { position: relative; }
.notification-menu > summary::-webkit-details-marker { display: none; }
.map-sidebar .notification-menu[open] > summary { background: #30353a; color: #fff; }
/* Panels occupy the free column above the four fixed footer rows, never pushing their triggers.
 * The sidebar row heights and gaps are defined in map-sidebar.css. */
.notification-panel { position: absolute; top: 3.6rem; bottom: var(--sidebar-footer-clearance); left: .38rem; right: .38rem; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 8px; scrollbar-width: thin; scrollbar-color: #5f6871 transparent; }
.notification-panel h2 { margin: 0 0 14px; font-size: 15px; color: #fff; }
.notification-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; color: #f2f4f7; cursor: pointer; }
.notification-option strong { display: block; font-size: 13.5px; }
.notification-option small { display: block; margin-top: 5px; color: #c1c9d2; font-size: 12px; line-height: 1.45; }
.notification-option input { appearance: none; flex: 0 0 32px; width: 32px; height: 19px; border: 0; border-radius: 12px; background: #616975; cursor: pointer; }
.notification-option input::before { display: block; content: ''; width: 13px; height: 13px; margin: 3px; border-radius: 50%; background: #fff; transition: transform 120ms; }
.notification-option input:checked { background: #4285f4; }
.notification-option input:checked::before { transform: translateX(13px); }
.notification-option input:focus-visible { outline: 2px solid #b8d2ff; outline-offset: 3px; }
.notification-option input:disabled { opacity: .5; cursor: wait; }

/* Badge remains visible when the rail is collapsed. Feed content is always plain text. */
.notification-badge { position: absolute; left: 27px; top: 2px; min-width: 16px; padding: 1px 3px; border-radius: 10px; background: #dc2626; color: #fff; font-size: 10px; text-align: center; }
.notification-badge[hidden], .notification-panel [hidden] { display: none; }
.notification-status { color: #c1c9d2; font-size: 12px; line-height: 1.5; }
.notification-status.is-error { color: #ffb0b0; }
.notification-list { list-style: none; margin: 12px 0 0; padding: 0; }
.notification-list li { padding: 12px 8px; border-top: 1px solid #454b53; overflow-wrap: anywhere; }
.notification-list li.is-unread { border-left: 3px solid #4285f4; background: #2a323e; }
.notification-list strong { font-size: 13px; color: #fff; }
.notification-list p { margin: 7px 0; font-size: 12px; line-height: 1.5; color: #d9dfe5; }
.notification-list time { font-size: 11px; color: #b7c1cb; }
.notification-action { border: 1px solid #6b7683; border-radius: 5px; padding: 7px 9px; background: transparent; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.notification-action:focus-visible { outline: 2px solid #b8d2ff; outline-offset: 2px; }
.notification-action:hover { background: #3c4652; }

@media (prefers-reduced-motion: reduce) {
  .notification-option input::before { transition: none; }
}

/* Match the smaller navigation rows and sidebar padding on narrow screens. */
@media (max-width: 44rem) {
  .notification-panel { left: .3rem; right: .3rem; }
}