/* Scoped to the pilot settings card; use the host's existing theme tokens. */
#deviceNotifications{grid-column:1/-1;min-width:0}
#notificationSettings p{margin:12px 0;overflow-wrap:anywhere}
#notificationSettings p:has(button){display:flex;flex-wrap:wrap;gap:8px}
#notificationSettings button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;max-width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--panel);font:inherit;font-size:14px;line-height:1.4;text-align:left}
#notificationSettings button:disabled{opacity:.5;cursor:default}
#notificationSettings button:focus-visible,#notificationSettings summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#notificationSettings [data-notification="enable"]{border-color:var(--accent);font-weight:650}
#notificationSettings label{display:flex;align-items:center;gap:10px;min-height:44px}
#notificationSettings input{width:20px;height:20px;accent-color:var(--accent)}
#notificationSettings ul{padding-left:20px;max-height:240px;overflow:auto}
#notificationSettings li{padding:8px 0;overflow-wrap:anywhere}
#notificationSettings summary{min-height:44px;padding:12px 0;cursor:pointer}
#notificationSettings button svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#notificationSettings button:has(svg):not(:has(span)){padding:10px;width:44px}
@media(hover:hover){#notificationSettings button:not(:disabled):hover{border-color:var(--accent)}}

.field-notification-page{max-width:760px;margin:24px auto;padding:20px;padding-bottom:calc(100px + env(safe-area-inset-bottom));color:var(--ink)}
#deviceNotifications h3{font-size:1.35rem}.field-notification-page button,.field-notification-page summary{min-height:44px}
#aguaButton{display:none!important}#bottomNav{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Field header integration: preserve the shared 44px control anatomy. */
body .topbar #fieldNotificationBell{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ink);text-decoration:none}
#fieldNotificationBell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#fieldNotificationBell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#fieldNotificationBell [data-notification-count]{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#c62838;color:#fff;font:700 11px/18px system-ui;text-align:center;box-sizing:border-box}
#fieldNotificationBell [hidden]{display:none!important}
.notification-inbox-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px}
#notificationInboxStatus{margin:0;flex:1 1 120px}
@media(max-width:480px){body .topbar{padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));gap:6px}body .topbar .topbar-actions{gap:4px}body .topbar .brand{min-width:0;flex:1 1 0;gap:6px}body .topbar .brand-mark{width:32px;height:32px;flex:0 0 32px}body .topbar .wata-suite-name{display:none!important}body .topbar .wata-app-title{font-size:13px}body .topbar .wata-brand-copy{min-width:0}body .topbar #networkStatus{display:none}}

/* Compact inbox: secondary controls remain available in explicit disclosures. */
html body #app .field-notification-page{box-sizing:border-box;width:100%;max-width:760px;margin:0 auto;padding:20px 16px 24px}
html body #app .field-notification-page h1{font-size:1.375rem;line-height:1.2;margin:0 0 12px;text-align:left}
#notificationSettings{font-size:.875rem;line-height:1.45}
#notificationSettings .notification-inbox-top{gap:8px;flex-wrap:nowrap;padding:0 0 8px;border:0}
#notificationSettings #notificationInboxStatus{margin:0}
#notificationSettings .notification-read-action{margin:0 0 16px}
#notificationSettings .notification-actions{display:flex;flex-wrap:wrap;gap:8px}
#notificationSettings>details{border-top:1px solid var(--line)}
#notificationSettings summary{box-sizing:border-box;padding:13px 0;font-weight:650}
#notificationSettings .notification-events{list-style:none;padding:0;margin:0 0 16px}
#notificationSettings .notification-events li{border-top:1px solid var(--line);padding:12px 0}
#notificationSettings time{display:block;font-size:.75rem;color:var(--muted,var(--ink));margin-top:3px}
/* Four everyday destinations, five manager destinations. No reserved hidden slot. */
@media(max-width:700px){
 html body .field-workspace>#bottomNav:not(.is-management){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:2px}
 html body .field-workspace>#bottomNav{overflow:visible!important;box-sizing:border-box}
 html body .field-workspace>#bottomNav>button{min-width:0!important;width:100%;padding:6px 2px;min-height:52px}
 html body .field-workspace>#bottomNav>button>span:last-child{font-size:.625rem;white-space:normal;overflow-wrap:anywhere}
 html body .field-workspace>#bottomNav .field-manager-bar{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
 html body .field-workspace>#bottomNav .field-manager-bar a{min-width:0;font-size:.5625rem;padding:6px 1px;color:var(--wf-text,var(--ink))}
 html body .field-workspace>#bottomNav .field-manager-bar a>span:last-child{overflow-wrap:anywhere}
}

body .topbar #fieldNotificationBell[hidden]{display:none!important}