/* Settings share a quiet sidebar, clear groups and the platform system font. */
#seafix-demo { --sf-settings-ground: light-dark(#fafafa, #1c1c1e); }
#seafix-demo :is(.sf-settings-shell, .sf-account-menu-panel) {
  --sf-settings-ink: light-dark(#1d1d1f, #f5f5f7);
  --sf-settings-muted: light-dark(#6e6e73, #a6a6ad);
  --sf-settings-line: light-dark(#e6e6eb, #38383d);
  --sf-settings-paper: light-dark(#ffffff, #242426);
  --sf-settings-blue: light-dark(#0071e3, #64adff);
  --sf-settings-selection: light-dark(#e5effc, #19334f);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#seafix-demo .sf-settings-shell {
  --sf-settings-top-space: 16px;
  display: grid; grid-template-columns: 224px minmax(0, 1fr);
  width: calc(100% - 2 * var(--sf-page-gutter, 16px)); height: 100%; min-width: 0; min-height: 0;
  margin-inline: var(--sf-page-gutter, 16px);
  overflow: hidden; border: 0; border-radius: 0;
  background: var(--sf-canvas, var(--sf-page)); color: var(--sf-settings-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5;
  box-shadow: none;
}
#seafix-demo .sf-settings-shell[hidden],
#seafix-demo .sf-settings-shell [hidden] { display: none !important; }
#seafix-demo.sf-settings-view .sf-main {
  display: block; overflow: hidden;
  padding: 0;
  background: var(--sf-canvas, var(--sf-page));
}
#seafix-demo .sf-settings-sidebar {
  display: flex; flex-direction: column; gap: 0; min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin;
  padding: var(--sf-settings-top-space) 16px var(--sf-settings-top-space) 0; border: 0;
  background: transparent;
}
#seafix-demo .sf-settings-back {
  --icon-size: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid light-dark(#dcdce3, #414147); border-radius: 12px;
  background: light-dark(#eeeef2, #2a2a2e); color: light-dark(#1d1d1f, #f5f5f7);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px; line-height: 1.4; font-weight: 600; white-space: nowrap; cursor: pointer;
  box-shadow: none;
}
#seafix-demo .sf-settings-back > svg { flex: 0 0 auto; stroke-width: 1.8; }
#seafix-demo .sf-settings-back:focus-visible { outline: 2px solid light-dark(#0071e3, #64adff); outline-offset: 3px; }
#seafix-demo .sf-settings-navigation { display: grid; align-content: start; gap: 4px; }
#seafix-demo .sf-settings-link {
  --icon-size: 18px; display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 44px; margin: 0; padding: 10px 8px 10px 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--sf-settings-ink); text-align: left;
  font: inherit; font-size: 13px; line-height: 1.4; font-weight: 450; cursor: pointer;
}
#seafix-demo .sf-settings-link > svg { flex: 0 0 auto; color: var(--sf-settings-muted); stroke-width: 1.7; }
#seafix-demo .sf-settings-link[aria-current="page"] { background: var(--sf-settings-selection); color: var(--sf-settings-blue); font-weight: 600; }
#seafix-demo .sf-settings-link[aria-current="page"] > svg { color: inherit; }
#seafix-demo .sf-settings-admin-group { display: grid; gap: 4px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sf-settings-line); }
#seafix-demo .sf-settings-admin-group > p { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--sf-settings-muted); }
#seafix-demo .sf-settings-menu-toggle { display: none; }
#seafix-demo .sf-settings-content { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; padding: var(--sf-settings-top-space) clamp(24px, 3.2vw, 44px) 44px; border-radius: 22px 22px 0 0; background: var(--sf-settings-ground); }
@media (min-width: 760px) {
  #seafix-demo .sf-settings-content { border-top-right-radius: 0; }
  /* Continue only the surface beyond the centered shell. Forms keep their width.
     The strip covers the right page gutter and, on wide windows, the outer margin. */
  #seafix-demo.sf-settings-view::after {
    content: ""; position: absolute; top: var(--sf-header-height, 80px); right: 0; bottom: 0;
    width: max(var(--sf-page-gutter, 16px), calc((100% - var(--sf-shell-width, 1240px)) / 2 + var(--sf-page-gutter, 16px)));
    background: var(--sf-settings-ground); pointer-events: none; z-index: 1;
  }
}
#seafix-demo .sf-settings-shell .sf-settings-page { width: 100%; max-width: 760px !important; margin: 0 auto; padding: 0; }
#seafix-demo .sf-settings-page > .sf-screen-title { display: block; margin: 0 0 28px; }
#seafix-demo .sf-settings-page .sf-screen-title h2 { margin: 0; color: var(--sf-settings-ink); font-size: 26px; line-height: 1.25; font-weight: 650; letter-spacing: -.035em; }
#seafix-demo .sf-settings-page > .sf-screen-title h2 { padding: 6px 0 5px; }
#seafix-demo .sf-settings-page .sf-screen-title p { margin: 8px 0 0; color: var(--sf-settings-muted); font-size: 14px; line-height: 1.55; }
#seafix-demo .sf-settings-page .sf-screen-title h2:focus { outline: none; }
#seafix-demo .sf-settings-shell :is(button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--sf-settings-blue); outline-offset: 3px; }
#seafix-demo .sf-settings-page .sf-settings-section-title,
#seafix-demo .sf-settings-page > h3 { margin: 26px 0 10px; color: var(--sf-settings-ink); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
#seafix-demo .sf-settings-page .sf-settings-section-title:first-child { margin-top: 0; }
#seafix-demo .sf-settings-caption { margin: 12px 2px 24px; color: var(--sf-settings-muted); font-size: 12px; line-height: 1.6; }

/* The account summary and security controls use the same row rhythm. */
#seafix-demo .sf-account-card { overflow: hidden; border: 1px solid var(--sf-settings-line); border-radius: 15px; background: var(--sf-settings-paper); }
#seafix-demo .sf-account-identity { display: flex; align-items: center; gap: 17px; padding: 24px; }
#seafix-demo .sf-account-avatar { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: light-dark(#e8edf5, #344152); color: light-dark(#536278, #c0d4ef); font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
#seafix-demo .sf-account-identity > div { min-width: 0; }
#seafix-demo .sf-account-identity h3 { margin: 0 0 4px; color: var(--sf-settings-ink); font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
#seafix-demo .sf-account-role { color: var(--sf-settings-muted); font-size: 12px; }
#seafix-demo .sf-account-details { margin: 0; padding: 0 24px 5px; }
#seafix-demo .sf-account-details > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 15px 0; border-top: 1px solid var(--sf-settings-line); }
#seafix-demo .sf-account-details dt { color: var(--sf-settings-muted); font-size: 13px; }
#seafix-demo .sf-account-details dd { margin: 0; color: var(--sf-settings-ink); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
#seafix-demo .sf-app-details-logo { display: block; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; }
#seafix-demo .sf-app-details-description { margin: 0; padding: 0 24px 20px; color: var(--sf-settings-ink); font-size: 14px; line-height: 1.7; }
#seafix-demo .sf-settings-page .sf-profile-options { gap: 10px; }
#seafix-demo .sf-settings-page .sf-profile-option { border: 1px solid var(--sf-settings-line); border-radius: 14px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-profile-option > summary { --icon-size: 16px; min-height: 76px; padding: 16px 20px; gap: 14px; }
#seafix-demo .sf-settings-summary-copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
#seafix-demo .sf-settings-summary-copy > svg { --icon-size: 21px; flex: 0 0 auto; color: var(--sf-settings-muted); }
#seafix-demo .sf-settings-page .sf-profile-option[open] > summary .sf-settings-summary-copy svg { transform: none; }
#seafix-demo .sf-settings-summary-copy strong { display: block; color: var(--sf-settings-ink); font-size: 14px; font-weight: 550; }
#seafix-demo .sf-settings-summary-copy small { display: block; margin-top: 2px; color: var(--sf-settings-muted); font-size: 12px; font-weight: 400; }
#seafix-demo .sf-settings-page .sf-profile-form { padding: 0 20px 20px; }

/* Reuse existing form controls and their validation and save behavior. */
#seafix-demo .sf-settings-form-card { margin: 0 0 16px; padding: 22px; border: 1px solid var(--sf-settings-line); border-radius: 15px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-support-form { margin: 0 0 22px; padding: 0; border: 0; background: transparent; }
#seafix-demo .sf-settings-page :is(.sf-label, .sf-fieldset legend) { display: block; margin: 20px 0 7px; color: var(--sf-settings-ink); font: inherit; font-size: 13px; font-weight: 550; }
#seafix-demo .sf-settings-page :is(form, fieldset) > :is(.sf-label, legend):first-child { margin-top: 0; }
#seafix-demo .sf-settings-page .sf-input-wrap { --icon-size: 17px; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px; margin: 0; padding: 0 12px; border: 1px solid var(--sf-settings-line); border-radius: 9px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-input-wrap > svg { flex: 0 0 auto; color: var(--sf-settings-muted); }
#seafix-demo .sf-settings-page .sf-input-wrap > :is(input, select) { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 0; border: 0; border-radius: 0; background: transparent; color: var(--sf-settings-ink); font: inherit; font-size: 15px; box-shadow: none; }
#seafix-demo .sf-settings-page .sf-input-wrap:not(:has(> svg)) { padding: 0; }
#seafix-demo .sf-settings-page .sf-input-wrap:not(:has(> svg)) > :is(input, select) { padding: 10px 14px; }
#seafix-demo .sf-settings-page .sf-input-wrap:focus-within { border-color: var(--sf-settings-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-settings-blue) 13%, transparent); }
#seafix-demo .sf-settings-page .sf-input-wrap > :is(input, select):focus-visible { outline: none; }
#seafix-demo .sf-settings-page textarea { display: block; width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--sf-settings-line); border-radius: 9px; background: var(--sf-settings-paper); color: var(--sf-settings-ink); font: inherit; font-size: 15px; line-height: 1.6; resize: vertical; }
#seafix-demo .sf-settings-page input::placeholder,
#seafix-demo .sf-settings-page textarea::placeholder { color: var(--sf-settings-muted); opacity: .85; }
#seafix-demo .sf-settings-page :is(.sf-primary-action, .sf-secondary-action) { --icon-size: 16px; display: inline-flex; justify-content: center; align-items: center; gap: 7px; width: auto; max-width: 100%; min-height: 42px; padding: 10px 18px; border-radius: 10px; font: inherit; font-size: 13px; line-height: 1.4; font-weight: 550; cursor: pointer; }
#seafix-demo .sf-settings-page .sf-primary-action { background: light-dark(#1d1d1f, #ededf1); color: light-dark(#ffffff, #1d1d1f); border: 1px solid transparent; box-shadow: none; }
#seafix-demo .sf-settings-page .sf-secondary-action { background: var(--sf-settings-paper); border: 1px solid var(--sf-settings-line); color: var(--sf-settings-ink); }
#seafix-demo .sf-settings-page form > .sf-primary-action { display: flex; margin: 22px 0 0 auto; }
#seafix-demo .sf-settings-page > .sf-primary-action { display: flex; margin: 0 0 22px auto; }
#seafix-demo .sf-settings-page .sf-operation-note { margin: 10px 0; color: var(--sf-settings-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#seafix-demo .sf-settings-page :is(.sf-operation-note.is-error, .sf-form-message.is-error) { color: var(--sf-danger); }
#seafix-demo .sf-settings-text-link { --icon-size: 14px; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; margin: 0; padding: 5px 0; border: 0; border-radius: 5px; background: transparent; color: var(--sf-settings-blue); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
#seafix-demo .sf-settings-text-link > svg { flex: 0 0 auto; }
#seafix-demo .sf-settings-form-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
#seafix-demo .sf-settings-back { flex-shrink: 0; width: auto; overflow: visible; text-overflow: clip; }
#seafix-demo .sf-settings-back > span { white-space: nowrap; }
#seafix-demo .sf-settings-page > .sf-screen-title.sf-crew-invite-heading { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 16px; }
#seafix-demo .sf-crew-invite-heading > div { min-width: 0; }
#seafix-demo .sf-crew-invite-heading .sf-crew-back { margin-top: 0; justify-self: end; align-self: start; border: 0; background: transparent; box-shadow: none; color: var(--sf-settings-muted); }
#seafix-demo .sf-crew-invite-heading .sf-crew-back:hover { background: transparent; color: var(--sf-settings-ink); }
@media (max-width:479px) {
  #seafix-demo .sf-settings-page > .sf-screen-title.sf-crew-invite-heading { gap: 10px; }
  #seafix-demo .sf-settings-page .sf-screen-title.sf-crew-invite-heading h2 { font-size: 22px; }
  #seafix-demo .sf-crew-back { padding: 10px; font-size: 12px; gap: 5px; }
}

/* Connected preference rows with a familiar, accessible switch. */
#seafix-demo .sf-settings-group { overflow: hidden; border: 1px solid var(--sf-settings-line); border-radius: 15px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-dnd-switch { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 20px; min-height: 82px; margin: 0; padding: 19px 20px; border: 0; border-radius: 0; background: transparent; }
#seafix-demo .sf-settings-group .sf-dnd-switch + .sf-dnd-switch { border-top: 1px solid var(--sf-settings-line); }
#seafix-demo .sf-settings-page .sf-dnd-switch strong { color: var(--sf-settings-ink); font-size: 14px; font-weight: 550; line-height: 1.45; }
#seafix-demo .sf-settings-page .sf-dnd-switch small { max-width: 440px; margin-top: 4px; color: var(--sf-settings-muted); font-size: 12px; line-height: 1.55; }
#seafix-demo .sf-settings-page input[role="switch"] { appearance: none; -webkit-appearance: none; display: block; position: relative; flex: 0 0 44px; width: 44px; height: 26px; min-width: 44px; min-height: 26px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: light-dark(#d4d4d9, #54545b); box-shadow: none; cursor: pointer; transition: background .18s ease; }
#seafix-demo .sf-settings-page input[role="switch"]::after { content: ""; display: block; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .16); transform: translateX(0); transition: transform .18s ease; }
#seafix-demo .sf-settings-page input[role="switch"]:not(:checked) { box-shadow: inset 0 0 0 1px light-dark(#7b7b84, #9a9aa2); }
#seafix-demo .sf-settings-page input[role="switch"]:checked { background: var(--sf-settings-blue); }
#seafix-demo .sf-settings-page input[role="switch"]:checked::after { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { #seafix-demo .sf-settings-page input[role="switch"], #seafix-demo .sf-settings-page input[role="switch"]::after { transition: none; } }
#seafix-demo .sf-settings-page .sf-notification-permission { --icon-size: 17px; display: flex; align-items: start; gap: 10px; margin: 17px 2px 0; padding: 0; border: 0; background: transparent; color: var(--sf-settings-muted); }
#seafix-demo .sf-settings-page .sf-notification-permission > svg { flex: 0 0 auto; margin-top: 2px; }
#seafix-demo .sf-settings-page .sf-notification-permission strong { color: var(--sf-settings-ink); font-size: 12px; font-weight: 500; }
#seafix-demo .sf-settings-page .sf-notification-permission small { display: block; margin-top: 3px; color: var(--sf-settings-muted); font-size: 12px; line-height: 1.5; }

/* Availability keeps separate status and schedule save controls. */
#seafix-demo .sf-settings-page :is(.sf-presence-hero, .sf-dnd-hero, .sf-admin-vessel) { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--sf-settings-line); border-radius: 14px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page :is(.sf-presence-hero, .sf-dnd-hero, .sf-admin-vessel) > span { --icon-size: 20px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--sf-settings-selection); color: var(--sf-settings-blue); }
#seafix-demo .sf-settings-page :is(.sf-presence-hero, .sf-dnd-hero, .sf-admin-vessel) strong { display: block; margin: 2px 0 0; color: var(--sf-settings-ink); font-size: 14px; line-height: 1.45; font-weight: 550; overflow-wrap: anywhere; }
#seafix-demo .sf-settings-page :is(.sf-presence-hero, .sf-dnd-hero, .sf-admin-vessel) small { display: block; color: var(--sf-settings-muted); font-size: 11px; }
#seafix-demo .sf-settings-page :is(.sf-presence-hero, .sf-dnd-hero, .sf-admin-vessel) em { --icon-size: 12px; display: inline-flex; align-items: center; gap: 4px; max-width: 150px; padding: 5px 8px; border-radius: 6px; background: light-dark(#eef2ef, #2c3a30); color: light-dark(#42674b, #a6d9ae); font-size: 11px; line-height: 1.4; font-style: normal; text-align: center; }
#seafix-demo .sf-settings-page .sf-presence-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
#seafix-demo .sf-settings-page .sf-presence-options legend { padding: 0 0 12px; }
#seafix-demo .sf-settings-page .sf-presence-options label > span { --icon-size: 20px; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-content: start; align-items: start; gap: 4px 9px; height: 100%; min-height: 106px; padding: 16px 32px 16px 13px; border: 1px solid var(--sf-settings-line); border-radius: 11px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-presence-options label > span::after { content: ""; position: absolute; top: 18px; right: 12px; width: 14px; height: 14px; border: 1px solid var(--sf-settings-line); border-radius: 50%; }
#seafix-demo .sf-settings-page .sf-presence-options input:checked + span { border-color: var(--sf-settings-blue); background: color-mix(in srgb, var(--sf-settings-selection) 42%, var(--sf-settings-paper)); }
#seafix-demo .sf-settings-page .sf-presence-options input:checked + span::after { border: 4px solid var(--sf-settings-blue); background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-presence-options input:checked + span > svg { color: var(--sf-settings-blue); }
#seafix-demo .sf-settings-page .sf-presence-options strong { color: var(--sf-settings-ink); font-size: 13px; font-weight: 550; }
#seafix-demo .sf-settings-page .sf-presence-options small { margin: 0; color: var(--sf-settings-muted); font-size: 11px; line-height: 1.55; }
#seafix-demo .sf-settings-page :is(.sf-presence-note, .sf-dnd-note, .sf-invite-note) { --icon-size: 16px; display: flex; align-items: start; gap: 9px; margin: 16px 0 0; padding: 0; border: 0; background: transparent; color: var(--sf-settings-muted); font-size: 12px; line-height: 1.6; }
#seafix-demo .sf-settings-page :is(.sf-presence-note, .sf-dnd-note, .sf-invite-note) > svg { flex: 0 0 auto; margin-top: 2px; }
#seafix-demo .sf-settings-page .sf-invite-note { margin: 0 0 22px; }
#seafix-demo .sf-settings-page .sf-invite-note strong { color: var(--sf-settings-ink); font-size: 13px; font-weight: 550; }
#seafix-demo .sf-settings-page .sf-invite-note small { color: var(--sf-settings-muted); font-size: 12px; }
#seafix-demo .sf-settings-page .sf-availability-divider { margin: 30px 0 14px; font-size: 14px; font-weight: 600; color: var(--sf-settings-ink); }
#seafix-demo .sf-settings-page .sf-availability-divider::before,
#seafix-demo .sf-settings-page .sf-availability-divider::after { display: none; }
#seafix-demo .sf-settings-page #sf-dnd-form > .sf-dnd-switch { min-height: 0; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--sf-settings-line); }
#seafix-demo .sf-settings-page .sf-time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
#seafix-demo .sf-settings-page .sf-time-grid .sf-label { margin-top: 0; }
#seafix-demo .sf-settings-page .sf-day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
#seafix-demo .sf-settings-page .sf-day-grid span { display: grid; place-items: center; min-width: 0; min-height: 40px; padding: 5px 0; border: 1px solid var(--sf-settings-line); border-radius: 8px; background: var(--sf-settings-paper); color: var(--sf-settings-muted); font-size: 12px; font-weight: 500; }
#seafix-demo .sf-settings-page .sf-day-grid input:checked + span { border-color: color-mix(in srgb, var(--sf-settings-blue) 32%, transparent); background: var(--sf-settings-selection); color: var(--sf-settings-blue); }
#seafix-demo .sf-settings-page .sf-day-grid input:disabled + span { opacity: .5; }
#seafix-demo .sf-vessel-time-card .sf-account-details { padding-top: 6px; }
#seafix-demo .sf-vessel-time-card .sf-account-details > div:first-child { border-top: 0; }
#seafix-demo #sf-vessel-zone { text-overflow: ellipsis; }

/* Compact color samples without a device or desktop-window illustration. */
#seafix-demo .sf-settings-page .sf-theme-options-page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 450px; margin: 0; }
#seafix-demo .sf-settings-page .sf-theme-options-page > button { position: relative; display: block; min-width: 0; min-height: 0; margin: 0; padding: 8px; border: 1px solid var(--sf-settings-line); border-radius: 6px; background: var(--sf-settings-paper); color: var(--sf-settings-ink); box-shadow: none; cursor: pointer; }
#seafix-demo .sf-settings-page .sf-theme-options-page > button[aria-pressed="true"] { border-color: var(--sf-settings-blue); box-shadow: 0 0 0 1px var(--sf-settings-blue); }
#seafix-demo .sf-theme-swatch { display: flex; flex-direction: column; justify-content: center; gap: 8px; width: 100%; height: 52px; padding: 12px; border: 1px solid #dcdce1; border-radius: 2px; background: #f7f7f9; }
#seafix-demo .sf-theme-swatch i { display: block; width: 70%; height: 4px; border-radius: 1px; background: #b7bdc6; }
#seafix-demo .sf-theme-swatch i:last-child { width: 45%; }
#seafix-demo .sf-theme-swatch--dark { border-color: #46464c; background: #27272c; }
#seafix-demo .sf-theme-swatch--dark i { background: #7c8490; }
#seafix-demo .sf-theme-swatch--system { background: linear-gradient(90deg, #f7f7f9 50%, #27272c 50%); }
#seafix-demo .sf-settings-page .sf-theme-option-label { --icon-size: 14px; display: flex; align-items: center; gap: 5px; padding: 13px 2px 4px; font-size: 12px; line-height: 1.4; font-weight: 550; }
#seafix-demo .sf-theme-option-label > svg { flex: 0 0 auto; color: var(--sf-settings-muted); }
#seafix-demo .sf-theme-selected { --icon-size: 10px; display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; border: 1px solid var(--sf-settings-line); border-radius: 50%; color: transparent; }
#seafix-demo [data-theme-choice][aria-pressed="true"] .sf-theme-selected { border-color: var(--sf-settings-blue); background: var(--sf-settings-blue); color: var(--sf-settings-paper); }

/* Crew, vessels and support retain their live data and actions. */
#seafix-demo .sf-settings-page .sf-section-head { margin: 26px 0 12px; }
#seafix-demo .sf-settings-page .sf-section-head h3 { color: var(--sf-settings-ink); font-size: 14px; font-weight: 600; }
#seafix-demo .sf-settings-page .sf-section-head > span { font-size: 12px; }
#seafix-demo .sf-settings-page .sf-crew-groups { display: grid; gap: 14px; }
#seafix-demo .sf-settings-page .sf-crew-list { border: 0; }
#seafix-demo .sf-settings-page .sf-crew-group { overflow: hidden; margin: 0; border: 1px solid var(--sf-settings-line); border-radius: 14px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-crew-group-head { --icon-size: 17px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; width: 100%; min-height: 62px; padding: 14px 16px; border: 0; border-radius: 0; background: transparent; }
#seafix-demo .sf-settings-page .sf-crew-group-head > span { width: 28px; height: 28px; border-radius: 7px; background: var(--sf-settings-ground); color: var(--sf-settings-muted); }
#seafix-demo .sf-settings-page .sf-crew-group-head h3 { color: var(--sf-settings-ink); font-size: 13px; font-weight: 550; text-align: left; }
#seafix-demo .sf-settings-page .sf-crew-group-head em { color: var(--sf-settings-muted); font-size: 11px; font-style: normal; }
#seafix-demo .sf-settings-page .sf-crew-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; margin: 0; padding: 15px 16px; border: 0; border-top: 1px solid var(--sf-settings-line); border-radius: 0; background: transparent; }
#seafix-demo .sf-settings-page .sf-crew-row > span:nth-child(2) { min-width: 0; }
#seafix-demo .sf-settings-page .sf-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sf-settings-ground); color: var(--sf-settings-muted); font-size: 11px; font-weight: 550; }
#seafix-demo .sf-settings-page .sf-crew-row strong { color: var(--sf-settings-ink); font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
#seafix-demo .sf-settings-page .sf-crew-row small { color: var(--sf-settings-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
#seafix-demo .sf-settings-page .sf-crew-actions { display: flex; align-items: center; gap: 8px; }
#seafix-demo .sf-settings-page .sf-crew-actions .sf-status { padding: 4px 7px; font-size: 10px; border-radius: 6px; }
#seafix-demo .sf-settings-page .sf-crew-action { --icon-size: 15px; display: grid; place-items: center; width: 36px; min-height: 36px; border-radius: 8px; border: 1px solid var(--sf-settings-line); background: var(--sf-settings-paper); color: var(--sf-settings-muted); }
#seafix-demo .sf-settings-page #sf-vessel-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
#seafix-demo .sf-settings-page #sf-vessel-form > label { grid-column: 1 / -1; margin: 0; }
#seafix-demo .sf-settings-page #sf-vessel-form > button { margin: 0; min-height: 46px; }
#seafix-demo .sf-settings-page .sf-vessel-list { display: grid; gap: 10px; }
#seafix-demo .sf-settings-page .sf-vessel-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--sf-settings-line); border-radius: 14px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-vessel-row > span { --icon-size: 21px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--sf-settings-ground); color: var(--sf-settings-muted); }
#seafix-demo .sf-settings-page .sf-vessel-row > div { min-width: 0; }
#seafix-demo .sf-settings-page .sf-vessel-row strong { display: block; color: var(--sf-settings-ink); font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
#seafix-demo .sf-settings-page .sf-vessel-row small { display: block; margin-top: 3px; color: var(--sf-settings-muted); font-size: 11px; }
#seafix-demo .sf-settings-page .sf-vessel-actions { display: flex; align-items: center; gap: 12px; }
#seafix-demo .sf-settings-page .sf-vessel-actions em { font-size: 11px; color: var(--sf-settings-muted); font-style: normal; }
#seafix-demo .sf-settings-page .sf-vessel-actions button { max-width: 146px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--sf-settings-line); border-radius: 8px; color: var(--sf-settings-blue); background: var(--sf-settings-paper); font: inherit; font-size: 12px; overflow-wrap: anywhere; cursor: pointer; }
#seafix-demo .sf-settings-page .sf-vessel-actions button:disabled { color: var(--sf-settings-muted); }
#seafix-demo .sf-settings-page .sf-support-diagnostics { display: flex; align-items: start; gap: 10px; margin: 20px 0 0; padding: 0; background: transparent; }
#seafix-demo .sf-settings-page .sf-support-diagnostics input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--sf-settings-blue); }
#seafix-demo .sf-settings-page .sf-support-diagnostics strong { color: var(--sf-settings-ink); font-size: 12px; font-weight: 500; }
#seafix-demo .sf-settings-page .sf-support-diagnostics small { color: var(--sf-settings-muted); font-size: 11px; line-height: 1.55; }
#seafix-demo .sf-settings-page #sf-support-inbox { margin-top: 14px; color: var(--sf-settings-muted); font-size: 13px; }
#seafix-demo .sf-settings-page .sf-support-ticket { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--sf-settings-line); border-radius: 13px; background: var(--sf-settings-paper); }
#seafix-demo .sf-settings-page .sf-support-ticket > summary { padding: 17px 18px; color: var(--sf-settings-ink); font-size: 13px; font-weight: 500; cursor: pointer; }
#seafix-demo .sf-settings-page .sf-support-ticket > :is(p, small, form) { display: block; margin: 0 18px 16px; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
#seafix-demo .sf-settings-page .sf-support-ticket > p { white-space: pre-wrap; }
#seafix-demo .sf-settings-page .sf-support-ticket > .sf-support-reply { padding: 12px; border-radius: 9px; background: var(--sf-settings-ground); color: var(--sf-settings-ink); }
#seafix-demo .sf-settings-page :is(.sf-user-success, .sf-support-success, .sf-presence-success, .sf-dnd-success) { margin: 14px 0; padding: 14px; border-radius: 11px; font-size: 13px; }
#seafix-demo .sf-settings-page :is(.sf-user-success, .sf-support-success, .sf-presence-success, .sf-dnd-success) strong { font-size: 13px; font-weight: 550; }
#seafix-demo .sf-settings-page :is(.sf-user-success, .sf-support-success, .sf-presence-success, .sf-dnd-success) small { font-size: 12px; }
#seafix-demo #sf-theme-panel .sf-settings-action { min-height: 62px; }
#seafix-demo.sf-settings-view #sf-user-dialog { background: rgb(12 14 20 / .35); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#seafix-demo.sf-settings-view #sf-user-dialog .sf-dialog-card { width: min(480px, calc(100vw - 32px)); padding: 26px; border-radius: 20px; border-color: light-dark(#e6e6eb, #38383d); box-shadow: 0 20px 70px rgb(0 0 0 / .16); }
#seafix-demo.sf-settings-view #sf-user-dialog-title { padding-right: 30px; font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; }
#seafix-demo.sf-settings-view #sf-user-dialog .sf-label { margin-top: 20px; font-size: 13px; }
#seafix-demo.sf-settings-view #sf-user-dialog select { min-height: 46px; padding: 10px 12px; border-radius: 9px; font-size: 16px; }
#seafix-demo.sf-settings-view #sf-user-dialog :is(.sf-primary-action, .sf-cancel-action) { min-height: 44px; border-radius: 10px; font-size: 13px; }

@media (hover: hover) {
  #seafix-demo .sf-settings-link:hover:not([aria-current="page"]) { background: light-dark(#e9e9ee, #303036); color: var(--sf-settings-ink); }
  #seafix-demo .sf-settings-back:hover { background: light-dark(#e2e2e8, #37373d); border-color: light-dark(#cacad3, #54545c); }
  #seafix-demo .sf-settings-page .sf-primary-action:hover { opacity: .88; }
  #seafix-demo .sf-settings-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 959px) and (min-width: 760px) {
  #seafix-demo .sf-settings-shell { grid-template-columns: 208px minmax(0, 1fr); }
  #seafix-demo .sf-settings-content { padding: var(--sf-settings-top-space) 24px 36px; }
  #seafix-demo .sf-settings-page .sf-presence-options { grid-template-columns: minmax(0, 1fr); }
  #seafix-demo .sf-settings-page .sf-theme-options-page { gap: 9px; }
  #seafix-demo .sf-theme-option-label > svg { display: none; }
}
@media (max-width: 759px) {
  #seafix-demo.sf-settings-view .sf-main { overflow-y: auto; background: var(--sf-canvas, var(--sf-page)); }
  #seafix-demo .sf-settings-shell { display: block; height: auto; min-height: 100%; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  #seafix-demo .sf-settings-sidebar { display: block; overflow: visible; padding: 12px 0 16px; border: 0; background: transparent; }
  #seafix-demo .sf-settings-back { padding-inline: 12px; }
  #seafix-demo.sf-settings-view .sf-top-actions { margin-left: auto; }
  #seafix-demo .sf-settings-menu-toggle { --icon-size: 18px; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 15px; border: 1px solid var(--sf-settings-line); border-radius: 12px; background: var(--sf-settings-paper); color: var(--sf-settings-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
  #seafix-demo .sf-settings-menu-toggle > svg:last-child { --icon-size: 15px; margin-left: auto; color: var(--sf-settings-muted); }
  #seafix-demo .sf-settings-menu-toggle[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
  #seafix-demo .sf-settings-navigation { display: none; margin-top: 7px; padding: 7px; border: 1px solid var(--sf-settings-line); border-radius: 12px; background: var(--sf-settings-paper); }
  #seafix-demo .sf-settings-shell.is-menu-open .sf-settings-navigation { display: grid; }
  #seafix-demo .sf-settings-link { min-height: 46px; padding-inline: 11px; font-size: 14px; }
  #seafix-demo .sf-settings-admin-group { margin-top: 9px; padding-top: 9px; }
  #seafix-demo .sf-settings-content { overflow: visible; padding: 24px 16px max(28px, env(safe-area-inset-bottom, 0px)); }
  #seafix-demo .sf-settings-page > .sf-screen-title { gap: 12px; margin-bottom: 24px; }
  #seafix-demo .sf-settings-page .sf-screen-title h2 { font-size: 25px; }
  #seafix-demo .sf-settings-page .sf-screen-title p { font-size: 13px; }
  #seafix-demo .sf-settings-page .sf-input-wrap > :is(input, select),
  #seafix-demo .sf-settings-page textarea { font-size: 16px; }
  #seafix-demo .sf-settings-form-card { padding: 18px; }
  #seafix-demo .sf-settings-page .sf-primary-action { min-height: 44px; }
  #seafix-demo .sf-account-identity { padding: 20px; }
  #seafix-demo .sf-app-details-description { padding-inline: 20px; }
  #seafix-demo .sf-account-details { padding: 0 20px 3px; }
  #seafix-demo .sf-account-details > div { grid-template-columns: 94px minmax(0, 1fr); gap: 14px; }
  #seafix-demo .sf-settings-page .sf-theme-options-page { gap: 10px; }
}

/* A subtle scroll edge lives inside the opaque Settings content surface. */
@media (min-width: 760px) {
  #seafix-demo .sf-settings-content {
    --sf-settings-content-gutter: clamp(24px, 3.2vw, 44px);
    isolation: isolate;
  }
  #seafix-demo .sf-settings-content.sf-header-fade-active,
  #seafix-demo.sf-settings-view:has(.sf-settings-content.sf-header-fade-active)::after {
    -webkit-mask-image: none;
    mask-image: none;
  }
  #seafix-demo .sf-settings-content::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 3;
    display: block;
    height: 32px;
    margin: calc(-1 * var(--sf-settings-top-space)) calc(-1 * var(--sf-settings-content-gutter)) calc(var(--sf-settings-top-space) - 32px);
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--sf-settings-ground) 82%, transparent), transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
    transition: opacity .15s ease-out;
  }
  #seafix-demo .sf-settings-content.sf-settings-scrolled::before { opacity: 1; }
}
@media (min-width: 760px) and (max-width: 959px) {
  #seafix-demo .sf-settings-content { --sf-settings-content-gutter: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #seafix-demo .sf-settings-content::before { transition: none; }
}
@media (max-width: 479px) {
  #seafix-demo .sf-settings-page .sf-presence-options { grid-template-columns: minmax(0, 1fr); }
  #seafix-demo .sf-settings-page .sf-presence-options label > span { min-height: 90px; }
  #seafix-demo .sf-settings-page :is(.sf-presence-hero, .sf-dnd-hero, .sf-admin-vessel) { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 11px; padding: 14px; }
  #seafix-demo .sf-settings-page :is(.sf-presence-hero, .sf-dnd-hero, .sf-admin-vessel) > span { width: 34px; height: 34px; grid-row: 1 / 3; }
  #seafix-demo .sf-settings-page :is(.sf-presence-hero, .sf-dnd-hero, .sf-admin-vessel) em { grid-column: 2; justify-self: start; }
  #seafix-demo .sf-settings-page .sf-dnd-switch { gap: 12px; padding: 17px; }
  #seafix-demo .sf-settings-page .sf-theme-options-page > button { padding: 6px; }
  #seafix-demo .sf-theme-selected { position: absolute; top: 11px; right: 11px; }
  #seafix-demo .sf-settings-page .sf-theme-option-label { gap: 3px; font-size: 11px; }
  #seafix-demo .sf-theme-option-label > svg { display: none; }
  #seafix-demo .sf-settings-page .sf-crew-row { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 10px; padding: 14px; }
  #seafix-demo .sf-settings-page .sf-avatar { width: 32px; height: 32px; }
  #seafix-demo .sf-settings-page .sf-crew-actions { grid-column: 2; justify-content: space-between; }
  #seafix-demo .sf-settings-page .sf-vessel-row { grid-template-columns: 34px minmax(0, 1fr); padding: 15px; }
  #seafix-demo .sf-settings-page .sf-vessel-actions { grid-column: 2; justify-content: space-between; }
  #seafix-demo .sf-settings-page #sf-vessel-form { grid-template-columns: minmax(0, 1fr); }
  #seafix-demo .sf-settings-page #sf-vessel-form > button { justify-self: end; }
  #seafix-demo .sf-settings-form-footer { align-items: stretch; flex-direction: column; }
  #seafix-demo .sf-settings-form-footer > .sf-primary-action { align-self: flex-end; }
}
@media (max-width: 379px) {
  #seafix-demo .sf-settings-page .sf-time-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #seafix-demo .sf-settings-shell *, #seafix-demo .sf-settings-shell *::after { transition: none !important; }
}

#seafix-demo #sf-work-windows{display:grid;gap:14px;margin:20px 0 12px}
#seafix-demo .sf-work-window{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end}
#seafix-demo .sf-work-window label{min-width:0}
#seafix-demo .sf-work-window input{box-sizing:border-box;width:100%;min-width:0;min-height:44px;border:1px solid var(--sf-line);border-radius:10px;padding:8px 10px;background:var(--sf-surface);color:var(--sf-heading);font:inherit}
#seafix-demo .sf-work-window button{margin:0!important;min-height:44px;font-size:11px;padding:8px}
#seafix-demo #sf-add-work-window{margin:0 0 12px}

@media(max-width:600px){#seafix-demo .sf-work-window{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px}#seafix-demo .sf-work-window button{grid-column:1/-1;justify-self:end;width:auto}}

/* Settings always retain a reachable header, including after chat/calendar navigation. */
#seafix-demo.sf-settings-view .sf-topbar{z-index:40;visibility:visible!important;opacity:1!important;transform:none!important;flex-shrink:0}
#seafix-demo.sf-settings-view .sf-topbar :is(.sf-brand-area,.sf-top-actions,.sf-account-menu){visibility:visible!important;opacity:1!important;transform:none!important;pointer-events:auto}
#seafix-demo.sf-settings-view:not(.is-logged-out) .sf-topbar #sf-settings-back:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:8px;border:0;background:transparent;color:var(--sf-heading);opacity:1!important;transform:none!important;pointer-events:auto}
#seafix-demo.sf-settings-view .sf-topbar #sf-settings-back>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#seafix-demo.sf-settings-view .sf-topbar #sf-settings-back>svg{width:18px;height:18px}
@media(min-width:1000px){#seafix-demo.sf-settings-view,#seafix-demo.sf-settings-view .sf-phone{overflow:clip}}
@media(max-width:999px){
 #seafix-demo.sf-settings-view .sf-topbar{position:fixed;top:var(--sf-viewport-top,0px);left:0;right:0;width:100%;max-width:var(--sf-shell-width,1240px);box-sizing:border-box;margin-inline:auto;background:var(--sf-canvas)}
 #seafix-demo.sf-settings-view .sf-phone{padding-top:var(--sf-header-height,80px)}
 #seafix-demo.sf-settings-view.is-private-test .sf-topbar{top:calc(var(--sf-viewport-top,0px) + 52px)}
 #seafix-demo.sf-settings-view.is-private-test .sf-phone{padding-top:calc(var(--sf-header-height,80px) + 52px)}
 #seafix-demo.sf-settings-view :is(input,select,textarea,summary){scroll-margin-top:calc(var(--sf-header-height,80px) + 16px)}
}
@media(max-width:599px){#seafix-demo.sf-settings-view .sf-topbar #sf-crewchat-brand{display:none!important}}

/* Compact time fields and paired actions stay within the same side margins. */
#seafix-demo .sf-settings-page .sf-work-window { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
#seafix-demo .sf-settings-page .sf-work-window input { width:100%; min-width:0; max-width:100%; height:44px; padding:8px; font-size:16px; }
#seafix-demo .sf-work-window input::-webkit-date-and-time-value { min-width:0; text-align:left; }
#seafix-demo .sf-work-window-actions { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:0; }
#seafix-demo .sf-settings-page .sf-work-window-actions button { width:auto; min-width:0; margin:0!important; padding:8px 10px; white-space:normal; font-size:12px; }


/* A real end spacer remains scrollable even when the final page ends in a margin. */
#seafix-demo .sf-settings-content::after { content:""; display:block; height:28px; clear:both; flex-shrink:0; }
#seafix-demo .sf-settings-content { scroll-padding-bottom:28px; }

/* Schedule controls retain their touch targets without native time-picker overflow. */
#seafix-demo .sf-work-window label { display:block; min-width:0; overflow:hidden; }
#seafix-demo .sf-work-window input.sf-time-24 { box-sizing:border-box; width:100%; min-width:0; max-width:100%; text-align:center; font-variant-numeric:tabular-nums; }
#seafix-demo .sf-day-grid label { position:relative; min-width:0; }
#seafix-demo .sf-day-grid input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:auto; cursor:pointer; z-index:1; }
#seafix-demo .sf-day-grid span { pointer-events:none; }
#seafix-demo .sf-datetime-24 { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(80px,1fr); gap:10px; }
#seafix-demo .sf-datetime-24 > input { min-width:0; width:100%; box-sizing:border-box; }
#seafix-demo #sf-smt-list { scroll-margin-top:calc(var(--sf-header-height,80px) + 16px); }