/* Trip photos have a square frame, while the complete image keeps its own shape. */
.trip-card{gap:20px;align-items:center}
.trip-card .trip-card-copy{flex:1;min-width:0}
.trip-card .trip-card-copy h3{margin:0 0 7px;line-height:1.3;overflow-wrap:anywhere}
.trip-card .trip-card-copy p{margin:0;line-height:1.6}
.trip-card .trip-alert-badges:empty{display:none}
.trip-card .trip-alert-badges:not(:empty){margin-top:9px}
.trip-card .trip-photo{width:92px;height:92px;flex:0 0 92px;overflow:hidden;background:#f1f4f8;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center}
.trip-card .trip-photo img,.trip-photo-preview img{width:100%;height:100%;display:block;object-fit:contain}
.trip-photo-preview{width:180px;height:180px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#f1f4f8;display:flex;align-items:center;justify-content:center;margin:18px auto;color:var(--muted);font-size:14px}
.photo-storage-note{font-size:13px;line-height:1.6;color:var(--muted);margin:16px 0}
/* Consistent hierarchy and quiet controls for a readable inbox. */
.notifications-page{max-width:840px;margin:0 auto}
.notification-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:24px 0}
.notification-heading h1{margin:0 0 7px}
.notification-heading p{margin:0;color:var(--muted);font-size:14px}
.notification-heading>button{flex-shrink:0}
.notification-filters{display:flex;gap:6px;border-bottom:1px solid var(--border);padding:0 0 12px;margin:0 0 26px}
.notification-filters button{flex:0 0 auto;border:0;background:transparent;color:var(--muted);padding:9px 16px;min-height:42px;display:flex;align-items:center;gap:8px}
.notification-filters button[aria-pressed=true]{background:#e9effb;color:#254b9e;font-weight:650}
.notification-filters button span{background:#dce6fa;border-radius:12px;padding:1px 7px;font-size:12px;line-height:1.6}
.notification-group{margin:0 0 26px}
.notification-group>h2{font-size:13px;font-weight:650;color:var(--muted);margin:0 0 10px;letter-spacing:.02em}
.notifications-page .notification-list{display:block;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:white}
.notifications-page .notification-item{display:flex;align-items:flex-start;gap:16px;padding:22px;margin:0;border:0;border-bottom:1px solid #e9edf3;border-radius:0;background:white;box-shadow:none}
.notifications-page .notification-item:last-child{border-bottom:0}
.notifications-page .notification-item.unread{background:#f7f9ff;border-left:3px solid #5176ce;padding-left:19px}
.notification-symbol{width:38px;height:38px;flex:0 0 38px;border:1px solid #e4eaf5;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#fff;color:#4365ac}
.notification-symbol svg{width:20px;height:20px}
.notification-copy{min-width:0;flex:1}
.notification-title{display:flex;gap:10px;align-items:center}
.notification-title h3{font-size:15px;line-height:1.5;margin:0;font-weight:650;color:#202f49;overflow-wrap:anywhere}
.notification-unread{width:6px;height:6px;border-radius:50%;background:#365fc1;flex:0 0 6px}
.notifications-page .notification-copy>p{margin:6px 0 14px;font-size:14px;line-height:1.65;color:#4c5c76;overflow-wrap:anywhere;white-space:pre-line}
.notification-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.notifications-page .notification-footer time{font-size:12px;line-height:1.6;color:#67758c;white-space:nowrap}
.notification-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.notifications-page .notification-actions button{min-height:32px;border:0;background:transparent;padding:4px 0;border-radius:3px;font-size:13px}
.notification-link{color:#2958ba;font-weight:600;display:flex;align-items:center;gap:7px;text-align:left}
.notification-read{color:#627087;font-weight:400}
.notification-link:hover,.notification-read:hover{text-decoration:underline}
.notification-empty{text-align:center;padding:54px 18px;border:1px dashed var(--border);border-radius:14px;background:#fff}
.notification-empty>svg{height:32px;width:32px;color:#7a8eaf;margin-bottom:10px}
.notification-empty h2{font-size:17px;margin:8px 0}
.notification-empty p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}
.notification-device{border-top:1px solid var(--border);margin-top:34px;padding:16px 0}
.notification-device>summary{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:14px;font-weight:600}
.notification-device>summary small{font-weight:400;color:var(--muted);font-size:12px}
.notification-device .desktop-notifications{display:block;margin:14px 0 0;padding:18px;border:1px solid var(--border);border-radius:12px;background:white}
.notification-device .desktop-notifications p{font-size:14px;line-height:1.6}
.notification-device .desktop-notifications>button{margin:6px 8px 0 0}
@media(max-width:600px){
 .trip-card{gap:12px;padding:16px}
 .trip-card .trip-photo{width:66px;height:66px;flex-basis:66px;border-radius:8px}
 .trip-card .trip-card-copy h3{font-size:16px}
 .trip-card .trip-card-copy p{font-size:12px}
 .trip-card>button{padding:8px 12px;min-width:0}
 .notification-heading{align-items:flex-start;flex-wrap:wrap;gap:12px}
 .notification-heading>button{padding:6px 0;min-height:32px}
 .notifications-page .notification-item{padding:17px 14px;gap:11px}
 .notifications-page .notification-item.unread{padding-left:11px}
 .notification-symbol{width:30px;height:30px;flex-basis:30px;border-radius:9px}
 .notification-symbol svg{width:17px;height:17px}
 .notification-title h3{font-size:14px}
 .notifications-page .notification-copy>p{font-size:13px}
 .notification-footer{align-items:flex-start;gap:4px}
 .notification-actions{gap:12px}
}
.notifications-page .notification-item{flex-direction:row}
@media(max-width:360px){
 .trip-card.has-trip-photo{display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px 12px}
 .trip-card.has-trip-photo .trip-photo{grid-column:1;grid-row:1 / span 2}
 .trip-card.has-trip-photo .trip-card-copy{grid-column:2}
 .trip-card.has-trip-photo>button{grid-column:2;justify-self:start}
}