/* Shared neutral selection and more room for navigation labels. */
#seafix-demo :is(.sf-settings-shell, .sf-account-menu-panel) {
  --sf-settings-selection: light-dark(#e4e5e9, #36383e);
  --sf-settings-blue: light-dark(#202126, #e8e9ed);
}
@media (min-width: 761px) {
  #seafix-demo .sf-settings-shell { grid-template-columns: 258px minmax(0, 1fr); width:calc(100% - 2 * var(--sf-page-gutter,16px) + 10px); margin-inline-start:calc(var(--sf-page-gutter,16px) - 10px); }
  #seafix-demo .sf-settings-sidebar { padding-left:10px; overflow-x:hidden; }
  #seafix-demo .sf-settings-link { width: calc(100% + 10px); margin-left: -10px; padding-left: 10px; }
}
#seafix-demo .sf-settings-link[aria-current="page"] { color: var(--sf-settings-ink); background: var(--sf-settings-selection); }
#seafix-demo .sf-settings-link:hover { color: var(--sf-settings-ink); background: light-dark(#eaebee,#303238); }
#seafix-demo .sf-settings-link[aria-current="page"]:hover { background: var(--sf-settings-selection); }
#seafix-demo .sf-settings-page[data-screen="availability"] .sf-settings-form-card,
#seafix-demo .sf-settings-page[data-screen="vessel-time"] .sf-settings-form-card,
#seafix-demo.is-system-admin .sf-profile-summary { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#seafix-demo .sf-settings-page .sf-presence-options { margin: 0; }
#seafix-demo .sf-settings-page .sf-presence-options label > span { min-height: 92px; padding: 13px 28px 13px 13px; border-radius: 10px; background: transparent; }
#seafix-demo .sf-settings-page .sf-presence-options input:checked + span,
#seafix-demo .sf-settings-page .sf-day-grid input:checked + span { border-color: light-dark(#c4c6ce,#696d76); background: var(--sf-settings-selection); color: var(--sf-settings-ink); }
#seafix-demo .sf-settings-page .sf-day-grid span { background: transparent; }
#seafix-demo .sf-settings-page .sf-availability-divider { margin: 30px 0 18px; padding: 0; border: 0; font-size: 17px; font-weight: 600; }
#seafix-demo .sf-settings-page #sf-zone-form { max-width: 480px; margin-top: 22px; }
#seafix-demo #sf-zone-form > .sf-label { margin: 0 0 10px; font-size: 15px; }
#seafix-demo #sf-vessel-zone { padding-inline: 14px 34px; }
#seafix-demo.is-system-admin .sf-profile-summary .sf-account-details { border-top: 1px solid var(--sf-settings-line); margin-top: 22px; }
#seafix-demo.is-system-admin .sf-profile-summary .sf-account-details > div { padding-block: 14px; }
#seafix-demo #sf-push { width: min(390px, calc(100vw - 24px)); max-width: 390px; padding-inline: 10px 6px; column-gap: 5px; }
#seafix-demo.is-private-test { padding-top:52px; }
#seafix-demo #sf-private-test-banner { position:fixed; top:var(--sf-viewport-top,0px); left:0; right:0; z-index:80; display:flex; align-items:center; justify-content:center; gap:12px; height:52px; margin:0; padding:7px 14px; border:0; border-bottom:1px solid light-dark(#c7c9d0,#646771); background:light-dark(#e3e4e8,#33353b); color:light-dark(#202126,#e8e9ed); font-size:12px; }
#seafix-demo #sf-test-exit { flex-shrink:0; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit; padding:6px 0; font:inherit; cursor:pointer; }
@media(max-width:759px) { #seafix-demo.is-private-test .sf-topbar { top:52px; } }
#seafix-demo.is-private-test.sf-settings-view::after { top:calc(var(--sf-header-height,80px) + 52px); }
@media print { #seafix-demo #sf-private-test-banner { display:none!important; } #seafix-demo.is-private-test { padding-top:0; } }
#seafix-demo #sf-private-test-banner[hidden] { display:none; }
#seafix-demo .sf-test-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
#seafix-demo .sf-test-actions button { padding:10px 14px; border:1px solid var(--sf-settings-line); border-radius:9px; background:var(--sf-settings-selection); color:var(--sf-settings-ink); font:inherit; cursor:pointer; }
#seafix-demo #sf-test-outbox details { padding-block:12px; border-bottom:1px solid var(--sf-settings-line); overflow-wrap:anywhere; }
#seafix-demo #sf-test-outbox pre { white-space:pre-wrap; font-size:12px; }
#seafix-demo .sf-chat-tool { display:grid; place-items:center; flex:0 0 34px; width:34px; height:36px; padding:7px; border:0; border-radius:8px; background:transparent; color:var(--sf-muted); cursor:pointer; }
#seafix-demo .sf-chat-tool svg { width:19px; height:19px; }
#seafix-demo .sf-chat-tool:hover { background:light-dark(#e5e6eb,#393b43); color:var(--sf-heading); }
#seafix-demo .sf-chat-tool:disabled { opacity:.35; cursor:default; }
#seafix-demo .sf-chat-tool[hidden], #seafix-demo #sf-chat-find-panel[hidden], #seafix-demo #sf-chat-emoji-picker[hidden] { display:none; }
#seafix-demo #sf-chat-find-panel { flex:none; padding:10px 0; border-bottom:1px solid var(--sf-line); }
#seafix-demo #sf-chat-find-form { display:flex; align-items:center; gap:4px; }
#seafix-demo #sf-chat-find-input { min-width:0; flex:1; padding:10px 12px; border:1px solid var(--sf-line); border-radius:9px; background:var(--sf-chat-field); color:var(--sf-heading); font:inherit; font-size:13px; }
#seafix-demo .sf-chat-find-navigation { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--sf-muted); }
#seafix-demo #sf-chat-find-status { flex:1; }
#seafix-demo #sf-chat-find-result { max-height:150px; overflow:auto; overflow-wrap:anywhere; font-size:13px; }
#seafix-demo #sf-chat-find-result p { white-space:pre-wrap; margin:5px 0; }
#seafix-demo #sf-chat-find-result small { color:var(--sf-muted); }
#seafix-demo #sf-chat-emoji-picker { display:flex; flex-wrap:wrap; flex:none; gap:3px; padding:6px; }
#seafix-demo #sf-chat-emoji-picker button { display:grid; place-items:center; min-width:36px; height:36px; border:0; border-radius:8px; background:transparent; font-size:21px; cursor:pointer; }
#seafix-demo #sf-chat-emoji-picker button:hover { background:light-dark(#e5e6eb,#393b43); }
#seafix-demo #sf-drill-dialog { width:min(600px,calc(100vw - 24px)); max-height:calc(100svh - 32px); padding:24px; border:1px solid var(--sf-line); border-radius:18px; background:light-dark(#f6f6f8,#23252b); color:var(--sf-heading); overflow:auto; }
#seafix-demo #sf-drill-dialog::backdrop { background:#0005; }
#seafix-demo .sf-drill-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
#seafix-demo .sf-drill-heading h2 { font-size:23px; margin:0 0 7px; }
#seafix-demo #sf-drill-time-zone { font-size:12px; color:var(--sf-muted); }
#seafix-demo #sf-drill-fields { margin:18px 0; padding:0; border:0; display:grid; gap:10px; }
#seafix-demo #sf-drill-fields legend { padding:0 0 12px; font-weight:600; }
#seafix-demo #sf-drill-fields label { font-size:13px; margin:8px 0 0; }
#seafix-demo #sf-drill-fields :is(input,textarea) { width:100%; min-width:0; padding:11px 13px; border:1px solid var(--sf-line); border-radius:9px; font:inherit; background:light-dark(#fff,#303239); color:var(--sf-heading); }
#seafix-demo #sf-drill-fields button { justify-self:start; margin-top:10px; }
#seafix-demo .sf-drill-row { border-top:1px solid var(--sf-line); padding:16px 0; font-size:13px; overflow-wrap:anywhere; }
#seafix-demo .sf-drill-row p { margin:7px 0; white-space:pre-wrap; }
#seafix-demo .sf-drill-row small { color:var(--sf-muted); }