/* One calm visual language across the crew's daily workflow. */
#seafix-demo[data-theme] {
  --sf-page: light-dark(#f4f5f7, #101113);
  --sf-surface: light-dark(#ffffff, #18191c);
  --sf-surface-raised: light-dark(#f5f6f8, #222428);
  --sf-heading: light-dark(#0e1013, #fafafa);
  --sf-text: light-dark(#15171b, #f0f1f3);
  --sf-muted: light-dark(#505761, #c0c5cd);
  --sf-line: light-dark(#e0e3e8, #373b41);
  --sf-primary: light-dark(#191c22, #d9dde4);
  --sf-primary-strong: var(--sf-heading);
  --sf-primary-soft: light-dark(#edeff2, #303339);
  --sf-primary-text: light-dark(#ffffff, #15171b);
  --sf-report-bg: #17191d;
  --sf-report-text: #ffffff;
  --sf-success: light-dark(#15814d, #6be0a3);
  --sf-success-soft: light-dark(#edf8f1, #16352a);
  --sf-warning: light-dark(#775600, #ffe085);
  --sf-warning-soft: light-dark(#fff5cd, #3b321a);
  --sf-danger: light-dark(#c42b39, #ff8e99);
  --sf-danger-soft: light-dark(#fff0f1, #3d2228);
  font-size: 1rem;
  line-height: 1.5;
}
#seafix-demo [hidden] { display: none !important; }
#seafix-demo :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 3px; }
#seafix-demo button { -webkit-tap-highlight-color: transparent; }
#seafix-demo button:disabled { opacity: .58; cursor: default; }
#seafix-demo .sf-phone { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
#seafix-demo .sf-main { padding-inline: clamp(16px, 4vw, 36px); }
#seafix-demo .sf-topbar { padding-inline: clamp(16px, 4vw, 36px); border-bottom: 1px solid var(--sf-line); gap: 12px; }
#seafix-demo .sf-brand { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.025em; }
#seafix-demo .sf-vessel { font-size: .8125rem; line-height: 1.3; margin-top: 4px; }
#seafix-demo .sf-brand-mark { width: 44px; height: 44px; border-radius: 13px; }
#seafix-demo .sf-brand-mark svg { width: 29px !important; height: 29px !important; }
#seafix-demo .sf-top-actions { gap: 7px; }
#seafix-demo :is(.sf-sync, .sf-theme-toggle, .sf-icon-button) { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 12px; }
#seafix-demo .sf-sync .sf-sync-online { color: var(--sf-success); }
#seafix-demo .sf-screen-title { align-items: center; margin-bottom: 24px; gap: 12px; }
#seafix-demo .sf-screen-title > div { min-width: 0; }
#seafix-demo .sf-screen-title h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
#seafix-demo h3 { font-size: 1rem; font-weight: 650; }
#seafix-demo .sf-section-head { margin: 24px 0 12px; }
#seafix-demo .sf-section-head > span { font-size: .875rem; background: var(--sf-surface-raised); }
#seafix-demo .sf-report { min-height: 72px; margin-bottom: 0; padding: 16px; border-radius: 16px; }
#seafix-demo .sf-report strong { font-size: 1rem; font-weight: 650; }
#seafix-demo .sf-report small { font-size: .8125rem; }
#seafix-demo :is(.sf-primary-action, .sf-secondary-action, .sf-cancel-action, .sf-danger-action) { min-height: 48px; font-size: .9375rem; font-weight: 600; border-radius: 12px; }
#seafix-demo .sf-primary-action { background: var(--sf-report-bg); color: #fff; border: 1px solid light-dark(#17191d, #515761); box-shadow: none; }
#seafix-demo .sf-secondary-action { background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-line); }
#seafix-demo .sf-ticket { min-height: 92px; margin: 0; padding-block: 18px; padding-right: 8px; gap: 12px; align-items: start; }
#seafix-demo .sf-ticket.sf-ticket--new,
#seafix-demo .sf-ticket.sf-ticket--urgent,
#seafix-demo .sf-ticket.sf-ticket--work,
#seafix-demo .sf-history-ticket { padding-left: 15px; }
#seafix-demo .sf-ticket::before { top: 19px; bottom: 19px; width: 3px; }
#seafix-demo .sf-ticket--urgent { background: transparent; }
#seafix-demo .sf-ticket-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
#seafix-demo .sf-ticket-title .sf-ticket-location { font-size: inherit; white-space: normal; font-weight: 700; }
#seafix-demo .sf-ticket-copy small { font-size: .8125rem; line-height: 1.5; margin-top: 6px; }
#seafix-demo .sf-ticket-copy .sf-ticket-assignee { font-size: inherit; font-weight: 650; }
#seafix-demo .sf-ticket-date { overflow-wrap: anywhere; }
#seafix-demo .sf-status { font-size: .875rem; padding: 5px 9px; border-radius: 8px; line-height: 1.4 !important; }
#seafix-demo .sf-ticket > .sf-status { margin-top: 1px; max-width: 100%; }
#seafix-demo .sf-ticket-sync { color: var(--sf-warning); }
#seafix-demo .sf-list-tools { margin: 4px 0 8px; min-width: 0; }
#seafix-demo .sf-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
#seafix-demo .sf-search-field { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-surface-raised); color: var(--sf-muted); }
#seafix-demo .sf-search-field input { width: 100%; min-width: 0; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--sf-text); font-size: 1rem; outline-offset: 0; }
#seafix-demo .sf-search-row select { min-width: 0; padding: 10px 8px; border: 1px solid var(--sf-line); border-radius: 12px; font-size: .875rem; background: var(--sf-surface); }
#seafix-demo .sf-search-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8125rem; color: var(--sf-muted); }
#seafix-demo .sf-search-meta button,
#seafix-demo .sf-draft-bar button { border: 0; background: transparent; color: var(--sf-text); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 5px; font-size: .8125rem; cursor: pointer; }
#seafix-demo .sf-search-meta:has(button[hidden]) { min-height: 0; }
#seafix-demo .sf-draft-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -10px 0 20px; color: var(--sf-muted); font-size: .8125rem; }
#seafix-demo .sf-report-card { border: 0; border-radius: 0; padding: 0; background: transparent; }
#seafix-demo .sf-report-form-refresh { gap: 24px; }
#seafix-demo .sf-label, #seafix-demo .sf-fieldset legend { font-size: .875rem; font-weight: 600; color: var(--sf-text); margin: 20px 0 8px; }
#seafix-demo .sf-report-card .sf-label:first-child { margin-top: 0; }
#seafix-demo .sf-report-card .sf-input-wrap { background: var(--sf-surface-raised); border-radius: 12px; padding-inline: 14px; }
#seafix-demo .sf-report-card .sf-input-wrap > svg { display: none; }
#seafix-demo .sf-report-card .sf-textarea-wrap { background: transparent; }
#seafix-demo textarea { border-radius: 12px; background: var(--sf-surface-raised); line-height: 1.55; }
#seafix-demo .sf-report-card input::placeholder,
#seafix-demo .sf-report-card textarea::placeholder { color: var(--sf-muted); opacity: .85; }
#seafix-demo .sf-priorities span { font-size: .875rem; min-height: 48px; border-radius: 12px; background: var(--sf-surface); color: var(--sf-text); }
#seafix-demo .sf-priority--normal input:checked + span { border-color: var(--sf-heading); background: var(--sf-surface-raised); color: var(--sf-heading); box-shadow: inset 0 0 0 1px var(--sf-heading); }
#seafix-demo .sf-priority--urgent input:checked + span { border-color: var(--sf-danger); background: var(--sf-danger-soft); color: var(--sf-danger); box-shadow: inset 0 0 0 1px var(--sf-danger); }
#seafix-demo .sf-photo { margin: 0; padding: 16px; border: 1px dashed var(--sf-line); border-radius: 12px; }
#seafix-demo .sf-photo strong { font-size: .9375rem; font-weight: 600; }
#seafix-demo .sf-photo small { font-size: .8125rem; }
#seafix-demo .sf-report-form-refresh > .sf-primary-action { margin-top: 0; }
#seafix-demo .sf-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#seafix-demo .sf-photo-card { min-width: 0; }
#seafix-demo .sf-photo-preview { width: 100%; min-height: 80px; aspect-ratio: 4/3; display: block; overflow: hidden; padding: 0; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-surface-raised); color: var(--sf-text); cursor: pointer; font-size: .8125rem; }
#seafix-demo .sf-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
#seafix-demo .sf-photo-remove { width: 100%; min-height: 44px; padding: 4px; border: 0; background: transparent; color: var(--sf-danger); font-size: .875rem; cursor: pointer; }
#seafix-demo .sf-detail-photos { margin-top: 20px; }
#seafix-demo #sf-photo-viewer { width: min(940px, 94vw); max-height: 92dvh; padding: 16px; border: 1px solid var(--sf-line); border-radius: 18px; background: var(--sf-surface); color: var(--sf-text); }
#seafix-demo #sf-photo-viewer::backdrop { background: rgb(8 10 15 / .7); backdrop-filter: blur(8px); }
#seafix-demo #sf-photo-viewer img { display: block; max-width: 100%; max-height: 70dvh; margin: 12px auto; object-fit: contain; }
#seafix-demo .sf-photo-close { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--sf-line); background: var(--sf-surface-raised); color: var(--sf-text); cursor: pointer; }
#seafix-demo #sf-photo-viewer p { font-size: .875rem; overflow-wrap: anywhere; }
#seafix-demo .sf-detail-hero { padding: 20px; border: 0; border-radius: 16px; background: var(--sf-surface-raised); box-shadow: none; }
#seafix-demo .sf-detail-location-line strong { font-size: 1.125rem; line-height: 1.4; }
#seafix-demo .sf-detail-field--description p { font-size: 1rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
#seafix-demo .sf-detail-divider { margin-block: 16px; }
#seafix-demo .sf-timeline { gap: 0; margin-block: 22px; }
#seafix-demo .sf-timeline::before { left: 17px; top: 28px; bottom: 30px; background: var(--sf-line); }
#seafix-demo .sf-timeline-row { grid-template-columns: 36px minmax(0, 1fr); min-height: 74px; gap: 12px; padding: 12px 0; border: 0; border-radius: 0; align-items: start; background: transparent; }
#seafix-demo .sf-timeline-row::before, #seafix-demo .sf-timeline-row::after { display: none; }
#seafix-demo .sf-timeline-row > span { width: 36px; height: 36px; border-radius: 11px; background: var(--sf-surface); }
#seafix-demo .sf-timeline-row strong { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
#seafix-demo .sf-timeline-row small { font-size: .8125rem; line-height: 1.5; }
#seafix-demo .sf-timeline-note { background: var(--sf-surface-raised); font-size: .875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#seafix-demo .sf-work-update { padding: 16px; border-radius: 14px; }
#seafix-demo .sf-work-update .sf-label { margin-top: 0; }
#seafix-demo .sf-detail-secondary-actions { gap: 12px; }
#seafix-demo .sf-completed-head { padding: 14px 16px; border-radius: 14px; }
#seafix-demo .sf-completed-head > span { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
#seafix-demo .sf-completed-head > p small { font-size: .875rem; }
#seafix-demo .sf-completed-head strong { font-size: 1.25rem; }
#seafix-demo .sf-history-tabs button, #seafix-demo .sf-history-scope button { font-size: .875rem; min-height: 46px; }
#seafix-demo .sf-theme-panel { width: min(370px, calc(100% - 32px)); padding: 20px; border-radius: 18px; }
#seafix-demo .sf-settings-profile { padding-bottom: 20px; margin-bottom: 20px; }
#seafix-demo .sf-settings-profile strong { font-size: 1rem; font-weight: 650; }
#seafix-demo .sf-settings-profile small, #seafix-demo .sf-settings-profile #sf-profile-vessel { font-size: .8125rem; line-height: 1.4; }
#seafix-demo .sf-settings-action { min-height: 68px; margin-top: 0; padding-top: 0; }
#seafix-demo .sf-settings-action strong { font-size: .9375rem; font-weight: 600; }
#seafix-demo .sf-settings-action small { font-size: .8125rem; }
#seafix-demo .sf-settings-action > svg { color: var(--sf-muted); }
#seafix-demo .sf-logout { font-size: .9375rem; padding-top: 14px; }
#seafix-demo .sf-theme-panel > strong { font-size: .875rem; }
#seafix-demo :is(.sf-presence-options, .sf-dnd-switch, .sf-crew-row, .sf-notification-card, .sf-export-panel, .sf-appearance-card, .sf-summary) strong { font-size: .9375rem; line-height: 1.45; }
#seafix-demo :is(.sf-presence-options, .sf-dnd-switch, .sf-crew-row, .sf-notification-card, .sf-export-panel, .sf-appearance-card, .sf-summary) small { font-size: .8125rem; line-height: 1.5; }
#seafix-demo :is(.sf-day-grid span, .sf-theme-options span, .sf-form-message, .sf-transfer-status, .sf-presence-note, .sf-dnd-note) { font-size: .875rem; }
#seafix-demo .sf-sync-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 14px; margin-block: 12px; border-radius: 12px; background: var(--sf-warning-soft); color: var(--sf-text); font-size: .8125rem; }
#seafix-demo .sf-sync-banner > span { flex: 1; min-width: 150px; }
#seafix-demo .sf-sync-banner button { min-height: 44px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--sf-line); background: var(--sf-surface); color: var(--sf-text); font-size: .8125rem; cursor: pointer; }
#seafix-demo .sf-assigned-empty { border: 0; padding-block: 26px; }
#seafix-demo .sf-assigned-empty p { font-size: .875rem; }
#seafix-demo .sf-bottom-nav { border-radius: 20px; }
#seafix-demo .sf-bottom-nav button { border-radius: 14px; }
#seafix-demo .sf-bottom-nav span { font-size: .8125rem; }
@media (hover: hover) {
  #seafix-demo .sf-ticket:hover { background: var(--sf-surface-raised); }
  #seafix-demo .sf-primary-action:hover { background: #2b2e34; }
}
@media (min-width: 760px) {
  #seafix-demo .sf-phone { max-width: 1240px; }
  #seafix-demo .sf-screen[data-screen="home"]:not([hidden]) { display: block; }
  #seafix-demo .sf-screen { max-width: 820px !important; width: 100%; margin-inline: auto; }
  #seafix-demo .sf-screen[data-screen="report"] { max-width: 660px !important; }
  #seafix-demo .sf-bottom-nav { max-width: 650px; }
  #seafix-demo .sf-bottom-nav span { font-size: .875rem; }
}
@media (min-width: 1000px) {
  #seafix-demo.sf-split-view .sf-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  #seafix-demo.sf-split-view .sf-detail-source { grid-column: 1; grid-row: 1; }
  #seafix-demo.sf-split-view [data-screen="detail"] { grid-column: 2; grid-row: 1; border-left: 1px solid var(--sf-line); padding-left: 28px; }
}
@media (max-width: 370px) {
  #seafix-demo .sf-brand { font-size: .9375rem; }
  #seafix-demo .sf-topbar { padding-inline: 12px; }
  #seafix-demo .sf-top-actions { gap: 4px; }
  #seafix-demo .sf-brand-lockup { gap: 8px; }
  #seafix-demo .sf-search-row { grid-template-columns: minmax(0, 1fr) 96px; }
  #seafix-demo .sf-history-tabs { grid-template-columns: repeat(2, 1fr); }
  #seafix-demo .sf-detail-meta { flex-wrap: wrap; }
}

/* Compact daily lists and controls that use their whole surface. */
#seafix-demo .sf-phone { height: 100%; min-height: 0; overflow: hidden; }
#seafix-demo .sf-main { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
#seafix-demo .sf-bottom-nav { position: fixed; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); width: auto; margin-inline: auto; transform: none; z-index: 22; }
#seafix-demo .sf-ticket { min-height: 72px; padding-block: 11px; gap: 9px; }
#seafix-demo .sf-ticket::before { top: 12px; bottom: 12px; }
#seafix-demo .sf-ticket-copy small { margin-top: 3px; }
#seafix-demo .sf-section-head { margin-top: 18px; }
#seafix-demo .sf-report-form-refresh { gap: 16px; }
#seafix-demo .sf-report-card .sf-input-wrap { display: block; padding: 0; overflow: hidden; }
#seafix-demo .sf-report-card :is(.sf-input-wrap input, .sf-input-wrap select, #sf-location) { display: block; box-sizing: border-box; width: 100%; padding: 12px 14px; min-height: 50px; border: 0; margin: 0; background: var(--sf-surface-raised); color: var(--sf-text); font: inherit; }
#seafix-demo #sf-location { height: 50px; min-height: 50px; line-height: 1.5; }
#seafix-demo .sf-report-card .sf-input-wrap:focus-within { outline: 2px solid var(--sf-primary); outline-offset: 2px; }
#seafix-demo .sf-settings-profile { margin-bottom: 10px; padding-bottom: 4px; border-bottom: 0; }
#seafix-demo .sf-settings-profile > div { display: block; }
#seafix-demo .sf-settings-profile small { margin-top: 3px; }
#seafix-demo .sf-settings-profile #sf-profile-vessel { display: inline; font: inherit; color: inherit; }
#seafix-demo .sf-settings-action:first-of-type { border-top: 0; }
#seafix-demo .sf-history-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
#seafix-demo .sf-history-tabs button { padding-inline: 5px; }
#seafix-demo .sf-export-panel { margin: 0 0 16px; }
#seafix-demo .sf-availability-divider { display: block; margin: 22px 0 12px; padding: 0; color: var(--sf-text); font-size: .875rem; font-weight: 600; text-transform: none; letter-spacing: normal; }
#seafix-demo .sf-availability-divider::before, #seafix-demo .sf-availability-divider::after { display: none; }
#seafix-demo .sf-presence-options legend { margin: 22px 0 12px; padding-bottom: 0; }
#seafix-demo .sf-operation-note { margin: 12px 0; font-size: .875rem; color: var(--sf-muted); line-height: 1.5; }
#seafix-demo .sf-operation-note.is-error { color: var(--sf-danger); }
#seafix-demo .sf-history-more { width: 100%; margin-block: 16px; }
#seafix-demo .sf-fisherman-animation { display: block; width: min(230px, 85%); aspect-ratio: 1; margin: 0 auto 12px; background: #f4f4f2 url('/fisherman-loop-sprite.png') 0 0 / 400% 200% no-repeat; border-radius: 18px; animation: sf-fishing 3.2s steps(1, end) infinite; }
@keyframes sf-fishing {
  0%, 100% { background-position: 0 0; }
  12.5% { background-position: 33.333333% 0; }
  25% { background-position: 66.666667% 0; }
  37.5% { background-position: 100% 0; }
  50% { background-position: 0 100%; }
  62.5% { background-position: 33.333333% 100%; }
  75% { background-position: 66.666667% 100%; }
  87.5% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) { #seafix-demo .sf-fisherman-animation { animation: none; } }
#seafix-demo .sf-input-wrap:has(> :is(input,select):only-child) { display: block; padding: 0; }
#seafix-demo .sf-input-wrap > :is(input,select):only-child { padding: 12px 14px; width: 100%; box-sizing: border-box; }
#seafix-demo #sf-activation-form { border-top: 1px solid var(--sf-line); padding-top: 20px; margin-top: 22px; }
#seafix-demo #sf-activation-form > select { border: 1px solid var(--sf-line); padding: 12px; border-radius: 12px; }
#seafix-demo #sf-zone-form { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--sf-line); }
#seafix-demo #sf-zone-form .sf-secondary-action { width: 100%; margin-top: 12px; }
#seafix-demo .sf-support-ticket { margin: 12px 0; border: 1px solid var(--sf-line); border-radius: 12px; padding: 14px; font-size: .9375rem; }
#seafix-demo .sf-support-ticket summary { cursor: pointer; font-weight: 600; min-height: 36px; }
#seafix-demo .sf-support-ticket p { white-space: pre-wrap; overflow-wrap: anywhere; }
#seafix-demo .sf-support-ticket > small { color: var(--sf-muted); }
#seafix-demo .sf-support-reply { padding: 12px; background: var(--sf-surface-raised); border-radius: 10px; }
#seafix-demo .sf-support-ticket form { margin-top: 16px; }
#seafix-demo .sf-support-ticket textarea { width: 100%; padding: 12px; box-sizing: border-box; font: inherit; border: 1px solid var(--sf-line); }
#seafix-demo #sf-support-inbox { margin: 18px 0; }
#seafix-demo #sf-notification-inbox { margin-top: 28px; }
#seafix-demo .sf-inbox-row { display: block; width: 100%; min-height: 64px; padding: 12px 0; text-align: left; border: 0; border-bottom: 1px solid var(--sf-line); background: transparent; color: var(--sf-text); cursor: pointer; }
#seafix-demo .sf-inbox-row strong, #seafix-demo .sf-inbox-row span { display: block; font-size: .9375rem; }
#seafix-demo .sf-inbox-row span { margin-top: 3px; color: var(--sf-muted); font-size: .875rem; }
@media print {
  html,body { height:auto !important; overflow:visible !important; }
  #seafix-demo,#seafix-demo .sf-phone { position:static !important; display:block !important; height:auto !important; max-height:none !important; overflow:visible !important; }
  #seafix-demo .sf-print-report { max-width:none; }
}