/* FixYourVessel 0.35 — compact work lists and a readable activity record. */
#seafix-demo[data-theme] {
  --sf-completed: light-dark(#1556b8, #95bfff);
  --sf-completed-soft: light-dark(#eaf2ff, #1a2f4d);
}
#seafix-demo .sf-report-card .sf-fieldset { margin-top: 20px; }
#seafix-demo .sf-report-card .sf-fieldset legend { margin: 0 0 8px; padding: 0; }
#seafix-demo .sf-report-card .sf-label { margin-top: 20px; margin-bottom: 8px; }
#seafix-demo .sf-report-card .sf-label:first-child { margin-top: 0; }
#seafix-demo .sf-assigned-intro { margin: 8px 0 0; color: var(--sf-muted); font-size: .875rem; line-height: 1.55; max-width: none; }
#seafix-demo .sf-screen-title { grid-template-columns: minmax(0, 1fr); }
#seafix-demo .sf-bottom-nav .sf-nav-label { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
#seafix-demo .sf-bottom-nav .sf-nav-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; box-sizing: border-box; background: #c92535; color: #fff; font-size: .75rem; line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; }
#seafix-demo [data-screen="detail"] > .sf-screen-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
#seafix-demo [data-screen="detail"] > .sf-screen-title > .sf-detail-heading { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
#seafix-demo [data-screen="detail"] .sf-screen-title h2 { font-size: 1rem; line-height: 1.4; }
#seafix-demo .sf-detail-number { margin: 0; color: var(--sf-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#seafix-demo .sf-detail-hero { padding: 20px; border: 1px solid var(--sf-line); border-radius: 16px; background: var(--sf-surface-raised); box-shadow: inset 3px 0 var(--sf-heading), 0 4px 16px #00000004; }
#seafix-demo .sf-detail-summary { margin: 0; color: var(--sf-text); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
#seafix-demo .sf-detail-summary > strong { color: var(--sf-heading); font-size: inherit; font-weight: 700; }
#seafix-demo .sf-detail-summary > #sf-detail-description { white-space: pre-wrap; }
#seafix-demo .sf-draft-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: start; }
#seafix-demo .sf-draft-help { grid-column: 1 / -1; margin: 0; font-size: .8125rem; line-height: 1.5; }
#seafix-demo .sf-draft-bar > button { justify-self: end; white-space: nowrap; }
#seafix-demo #sf-assigned-count { margin-left: 5px; color: var(--sf-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
#seafix-demo #sf-detail-status { flex: 0 0 auto; max-width: 108px; text-align: center; white-space: normal; }
#seafix-demo .sf-status--done { background: var(--sf-completed-soft); color: var(--sf-completed); }
#seafix-demo .sf-history-ticket:not(.is-cancelled)::before { background: var(--sf-completed); }
#seafix-demo .sf-work-story { display: block; position: relative; margin: 20px 0; }
#seafix-demo .sf-work-story::before { display: none; }
#seafix-demo .sf-story-heading { margin-bottom: 12px; }
#seafix-demo .sf-story-heading h3 { margin: 0; font-size: 1.0625rem; }
#seafix-demo .sf-story-heading > p { margin: 3px 0 0; color: var(--sf-muted); font-size: .8125rem; line-height: 1.45; }
#seafix-demo .sf-story-heading strong { color: var(--sf-text); font-weight: 650; }
#seafix-demo .sf-story-date { margin: 10px 0 8px; color: var(--sf-muted); font-size: .75rem; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; }
#seafix-demo .sf-story-list { margin: 0; padding: 0; list-style: none; }
#seafix-demo .sf-story-event { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 0 0 16px; }
#seafix-demo .sf-story-event::before { content: ""; grid-column: 1; grid-row: 1 / 3; justify-self: center; width: 1px; margin-bottom: -16px; background: var(--sf-line); pointer-events: none; }
#seafix-demo .sf-story-event:first-child::before { grid-row: 2; margin-top: 10px; }
#seafix-demo .sf-story-event:last-child::before { grid-row: 1; }
#seafix-demo .sf-story-event:only-child::before { display: none; }
#seafix-demo .sf-story-event:last-child { padding-bottom: 0; }
#seafix-demo .sf-story-person { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
#seafix-demo .sf-story-author { color: var(--sf-text); font-size: .875rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
#seafix-demo .sf-story-person > time { color: var(--sf-muted); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#seafix-demo .sf-story-marker { grid-column: 1; grid-row: 2; position: relative; z-index: 1; width: 6px; height: 6px; margin: 7px 1px 0; border-radius: 50%; background: var(--sf-muted); }
#seafix-demo .sf-story-content { grid-column: 2; grid-row: 2; min-width: 0; }
#seafix-demo .sf-story-action { color: var(--sf-text); font-size: .875rem; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
#seafix-demo .sf-story-meta { margin: 2px 0 0; color: var(--sf-muted); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
#seafix-demo .sf-story-note { margin: 4px 0 0; color: var(--sf-text); font-size: .875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#seafix-demo .sf-story-comment { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: start; gap: 7px; margin: 0; color: var(--sf-text); font-size: .875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#seafix-demo .sf-story-comment > svg { width: 17px; height: 17px; margin-top: 2px; stroke-width: 1.7; }
#seafix-demo .sf-story-event--completed .sf-story-action { color: var(--sf-completed); }
#seafix-demo .sf-story-event--completed .sf-story-marker { background: var(--sf-completed); }
#seafix-demo .sf-success-dialog { max-width: 560px; width: 100%; padding: 24px 20px 20px; border-radius: 20px; text-align: center; background: var(--sf-surface); border: 1px solid var(--sf-line); }
#seafix-demo .sf-success-dialog .sf-dialog-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border: 1px solid var(--sf-line); border-radius: 18px; background: var(--sf-surface-raised); color: var(--sf-heading); }
#seafix-demo .sf-success-dialog .sf-dialog-icon svg { width: 28px !important; height: 28px !important; stroke-width: 1.6; }
#seafix-demo .sf-success-dialog h2 { margin: 0; max-width: none; color: var(--sf-text); font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: normal; text-wrap: pretty; }
#seafix-demo .sf-confirm-ticket { white-space: nowrap; font-weight: 650; }
#seafix-demo .sf-success-dialog .sf-confirm-recipient { margin: 8px 0 0; padding: 0; color: var(--sf-text); font-size: 1rem; line-height: 1.5; }
#seafix-demo .sf-confirm-recipient > strong { color: inherit; font-size: inherit; font-weight: 650; }
#seafix-demo .sf-success-dialog .sf-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
#seafix-demo .sf-success-dialog .sf-dialog-actions > button { display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; min-height: 48px; margin: 0; padding: 12px 8px; border-radius: 12px; font-size: .875rem; line-height: 1.4; font-weight: 600; white-space: normal; }
#seafix-demo .sf-success-dialog .sf-dialog-actions .sf-secondary-action { background: var(--sf-surface-raised); border: 1px solid var(--sf-line); color: var(--sf-text); box-shadow: none; }
#seafix-demo #sf-report-success-dialog[data-state="sent"] .sf-dialog-icon svg { transform-origin: 45% 80%; animation: sf-thumb-sway 1.8s ease-in-out 2; }
#seafix-demo #sf-report-success-dialog[data-state="sending"] .sf-dialog-icon svg { animation: sf-send-rise 1.5s ease-in-out infinite; }
@keyframes sf-thumb-sway { 0%, 100% { transform: rotate(0) translateY(0); } 35% { transform: rotate(-9deg) translateY(-3px); } 65% { transform: rotate(3deg) translateY(-1px); } }
@keyframes sf-send-rise { 0%, 100% { transform: translateY(3px); opacity: .55; } 50% { transform: translateY(-4px); opacity: 1; } }
/* Blend the original eight-frame drawing into the surrounding surface. */
#seafix-demo .sf-assigned-empty { isolation: isolate; }
#seafix-demo .sf-fisherman-animation, #seafix-demo .sf-calm-vessel { background-color: transparent; border-radius: 0; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
#seafix-demo[data-theme="dark"] .sf-fisherman-animation, #seafix-demo[data-theme="dark"] .sf-calm-vessel { filter: grayscale(1) contrast(1.2) invert(1); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { #seafix-demo[data-theme="system"] .sf-fisherman-animation, #seafix-demo[data-theme="system"] .sf-calm-vessel { filter: grayscale(1) contrast(1.2) invert(1); mix-blend-mode: screen; } }
#seafix-demo .sf-home-empty .sf-calm-vessel { width: min(260px, 90%); height: 180px; margin: 0 auto 14px; object-fit: contain; transform-origin: 50% 70%; animation: sf-calm-sailing 8s ease-in-out infinite; }
@keyframes sf-calm-sailing { 0%, 100% { transform: translate(-6px, 1px) rotate(-.5deg); } 50% { transform: translate(6px, -3px) rotate(.5deg); } }
#seafix-demo .sf-history-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; margin: 24px 0 8px; }
#seafix-demo .sf-history-pagination button { min-width: 38px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--sf-line); border-radius: 10px; color: var(--sf-text); background: var(--sf-surface); font: inherit; font-size: .875rem; cursor: pointer; font-variant-numeric: tabular-nums; }
#seafix-demo .sf-history-pagination button[aria-current="page"] { background: var(--sf-report-bg); color: #fff; border-color: var(--sf-report-bg); }
#seafix-demo .sf-history-pagination > span { color: var(--sf-muted); }
#seafix-demo .sf-reports-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-surface-raised); color: var(--sf-text); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
#seafix-demo .sf-reports-link > span { flex: 1; text-align: left; }
#seafix-demo .sf-report-intro { margin: 7px 0 0; color: var(--sf-muted); font-size: .875rem; line-height: 1.5; }
#seafix-demo #sf-report-export-form { padding: 20px; margin: 0; border: 1px solid var(--sf-line); border-radius: 16px; background: var(--sf-surface); }
#seafix-demo #sf-report-export-form > * { margin-inline: 0; }
#seafix-demo .sf-report-vessel { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--sf-line); color: var(--sf-text); }
#seafix-demo #sf-report-export-form .sf-input-wrap { min-width: 0; background: var(--sf-surface-raised); }
#seafix-demo #sf-report-export-form select { min-width: 0; font-size: 1rem; }
#seafix-demo #sf-report-export-form .sf-export-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#seafix-demo #sf-report-export-form .sf-export-fields label, #seafix-demo #sf-report-export-form .sf-export-fields input { min-width: 0; }
#seafix-demo #sf-report-export-form .sf-export-fields input { font-size: 1rem; }
#seafix-demo #sf-report-export-form .sf-export-hint { font-size: .8125rem; line-height: 1.5; }
#seafix-demo #sf-report-export-form .sf-primary-action { width: 100%; margin: 20px 0 0; justify-content: center; }
@media (max-width: 370px) { #seafix-demo .sf-bottom-nav .sf-nav-label { gap: 3px; font-size: .75rem; } #seafix-demo .sf-history-pagination button { padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) { #seafix-demo .sf-calm-vessel, #seafix-demo #sf-report-success-dialog .sf-dialog-icon svg { animation: none !important; } }