/* Pilot readiness: compact notices, consistent Layovers headings, and SMT sheet. */
#seafix-demo .sf-notification-inbox-item{grid-template-columns:26px minmax(0,1fr) auto!important;grid-template-rows:minmax(0,auto) minmax(0,auto)!important;align-items:center!important;column-gap:10px;min-width:0;}
#seafix-demo .sf-notification-inbox-item>.sf-notification-inbox-copy{display:contents!important;}
#seafix-demo .sf-notification-inbox-item>.sf-notification-inbox-copy>strong{grid-column:2!important;grid-row:1!important;display:block!important;min-width:0;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;line-height:1.35!important;}
#seafix-demo .sf-notification-inbox-item>.sf-notification-inbox-copy>span:not(.sf-notification-unread-label){grid-column:2!important;grid-row:2!important;display:block!important;min-width:0;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;line-height:1.35!important;}
#seafix-demo .sf-notification-inbox-item>.sf-notification-trailing{grid-column:3!important;grid-row:1 / span 2!important;display:flex;align-self:center!important;align-items:center;justify-content:flex-end;gap:6px;min-width:0;}
#seafix-demo .sf-notification-inbox-item>.sf-notification-inbox-copy>time{grid-column:3!important;grid-row:1 / span 2!important;align-self:center!important;}
#seafix-demo .sf-notification-inbox-item>svg:first-child{grid-column:1!important;grid-row:1 / span 2!important;align-self:center!important;max-width:26px;max-height:30px;}
#seafix-demo #sf-notification-popover .sf-notification-group-list .sf-notification-inbox-item{grid-template-columns:20px minmax(0,1fr) auto!important;}
#seafix-demo #sf-layover-drills-panel>.sf-planning-heading,
#seafix-demo #sf-layover-port-panel>.sf-planning-heading{margin-bottom:12px!important;align-items:flex-start;}
#seafix-demo #sf-layover-drills-panel .sf-sidebar-heading p,
#seafix-demo #sf-layover-port-panel .sf-sidebar-heading p{margin-top:4px!important;line-height:1.4;}
#seafix-demo #sf-drill-index>.sf-planning-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:7px;margin-bottom:13px;}
#seafix-demo #sf-drill-index>.sf-planning-toolbar>.sf-service-filters{display:flex;align-items:center;min-width:0;gap:4px;flex:1 1 auto;}
#seafix-demo #sf-drill-index>.sf-planning-toolbar>.sf-service-filters>button{min-width:0;min-height:40px;padding:6px 8px;white-space:normal;font-size:11px;line-height:1.2;}
#seafix-demo #sf-drill-add{min-width:0;flex:none;min-height:40px;padding:8px 10px;background:#ad303d;border-color:#ad303d;color:white;font-weight:650;font-size:11px;line-height:1.2;}
#seafix-demo #sf-layover-port-panel>.sf-planning-heading{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:8px;}
#seafix-demo #sf-layover-port-panel>.sf-planning-heading>.sf-sidebar-heading{min-width:0;flex:1 1 auto;}
#seafix-demo #sf-layover-port-panel>.sf-planning-heading>#sf-port-add{flex:none;max-width:42%;min-height:40px;padding:7px 10px;white-space:normal;line-height:1.25;}
#seafix-demo #sf-layover-port-panel>.sf-planning-heading>#sf-port-back{flex:none;min-height:40px;padding:7px 11px;white-space:nowrap;align-self:flex-start;}
#seafix-demo #sf-layover-port-panel .sf-port-toolbar[hidden]{display:none!important;}
#seafix-demo #sf-port-index>.sf-port-filter{display:inline-flex;position:relative;align-items:center;gap:4px;margin:0 0 12px;border:0;background:transparent;}
#seafix-demo #sf-port-index>.sf-port-filter>span{display:none;}
#seafix-demo #sf-port-filter{appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;padding:5px 20px 5px 0!important;font-weight:600;cursor:pointer;max-width:100%;}
@media(max-width:380px){#seafix-demo #sf-drill-add svg{display:none}#seafix-demo #sf-drill-add{padding-inline:5px;font-size:9px}#seafix-demo #sf-drill-index>.sf-planning-toolbar>.sf-service-filters>button{padding-inline:4px;font-size:9px}}
@media(max-width:999px){#seafix-demo #sf-layover-port-panel>.sf-planning-heading>#sf-port-back{display:none!important}}
#seafix-demo #sf-port-index>.sf-port-filter:after{content:"⌄";position:absolute;right:4px;top:50%;transform:translateY(-55%);pointer-events:none;}
#seafix-demo #sf-port-filter:focus-visible{outline:2px solid var(--sf-heading);outline-offset:2px;border-radius:4px;}
#seafix-demo #sf-layover-port-panel:has(#sf-port-detail:not([hidden]))>.sf-planning-heading{margin-bottom:8px!important;}

#seafix-demo .sf-smt-meeting-dialog:has(#sf-meeting-heading.sf-cal-detail-title){padding-top:0!important;overflow-x:hidden;}
#seafix-demo .sf-smt-meeting-dialog #sf-meeting-heading.sf-cal-detail-title{margin:0 -28px 18px!important;padding:22px 60px 22px 25px!important;background:#53545a!important;border-radius:22px 22px 0 0!important;color:#fff!important;min-height:0!important;}
#seafix-demo .sf-smt-meeting-dialog:has(#sf-meeting-heading.sf-cal-detail-title)>.sf-cal-dialog-top{z-index:3;}
#seafix-demo .sf-smt-meeting-dialog:has(#sf-meeting-heading.sf-cal-detail-title)>.sf-cal-dialog-top>button{top:11px;right:-12px;background:rgb(255 255 255 / .12);border-color:rgb(255 255 255 / .2);color:#fff;}
@media(max-width:759px){
 #seafix-demo #sf-drill-index>.sf-planning-toolbar{gap:5px;}
 #seafix-demo #sf-drill-index>.sf-planning-toolbar>.sf-service-filters>button{padding-inline:5px;font-size:10px;}
 #seafix-demo #sf-drill-add{padding-inline:6px;font-size:10px;}
 #seafix-demo .sf-smt-meeting-dialog #sf-meeting-heading.sf-cal-detail-title{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;}
 #seafix-demo .sf-smt-meeting-dialog:has(#sf-meeting-heading.sf-cal-detail-title)>.sf-cal-dialog-top>button{right:-5px;}
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item{padding-inline:8px;column-gap:6px;}
 #seafix-demo #sf-notification-popover .sf-notification-trailing{gap:3px;font-size:10px;}
}

/* October crew feedback: preserve compact chrome and theme contrast. */
#seafix-demo:has([data-screen="home"]:not([hidden])),
#seafix-demo:has([data-screen="completed"]:not([hidden])) { --sf-header-bottom-space:4px; }
#seafix-demo .sf-main>.sf-screen:is([data-screen="home"],[data-screen="completed"]):not([hidden]) { padding-top:0; margin-top:0; }
#seafix-demo [data-screen="completed"]>.sf-screen-title { margin-top:0; margin-bottom:10px; }
#seafix-demo [data-screen="completed"]>.sf-screen-title .sf-page-intro { margin-top:0; }

/* Match the land to the dark canvas while keeping the sea and coast distinct.
   Image geometry, projected ports, routes and timetable calculations are unchanged. */
#seafix-demo[data-theme=dark] .ss-voyage-coast,
:root[data-theme=dark] #seafix-demo:not([data-theme=light]) .ss-voyage-coast { filter:grayscale(1) invert(1) brightness(1.55); }
@media(prefers-color-scheme:dark) {
 :root:not([data-theme=light]) #seafix-demo:not([data-theme=light]) .ss-voyage-coast { filter:grayscale(1) invert(1) brightness(1.55); }
}

/* Restore the compact avatar text rhythm; presence is plain role text. */
#seafix-demo .sf-chat-thread-header .sf-chat-thread-copy {
 display:flex; flex-direction:column; justify-content:center; align-items:stretch; height:46px; gap:2px;
}
#seafix-demo .sf-chat-thread-header .sf-chat-thread-role {
 display:flex; align-items:baseline; flex-wrap:wrap; gap:0 5px; min-width:0; font-size:11px; line-height:14px;
}
#seafix-demo .sf-chat-thread-role .sf-chat-thread-position { min-width:0; max-width:100%; flex:0 1 auto; }
#seafix-demo .sf-chat-thread-header .sf-chat-thread-role .sf-chat-duty {
 flex:none; height:auto; margin:0; padding:0; border:0; border-radius:0;
 background:transparent; color:var(--sf-muted); font:inherit;
}
#seafix-demo .sf-chat-thread-header .sf-chat-thread-state { height:14px; line-height:14px; }
#seafix-demo .sf-chat-thread-header .sf-chat-thread-state::before { content:none; }
#seafix-demo .sf-chat-thread-header .sf-chat-thread-role .sf-chat-duty::before { content:"—"; margin:0 5px 0 0; }
@media(min-width:760px) {
 /* Restore the desktop two-row grid: name, then role/presence and activity. */
 #seafix-demo .sf-chat-thread-header .sf-chat-thread-copy {
  display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr);
  grid-template-rows:auto auto; align-content:center; height:auto; gap:4px 8px;
 }
 #seafix-demo .sf-chat-thread-header .sf-chat-thread-copy>strong { grid-column:1 / -1; grid-row:1; }
 #seafix-demo .sf-chat-thread-header .sf-chat-thread-role { grid-column:1; grid-row:2; flex-wrap:nowrap; font-size:13px; line-height:18px; }
 #seafix-demo .sf-chat-thread-role .sf-chat-thread-position { max-width:180px; }
 #seafix-demo .sf-chat-thread-header .sf-chat-thread-state { grid-column:2; grid-row:2; height:auto; line-height:18px; }
 #seafix-demo .sf-chat-thread-header .sf-chat-thread-state::before { content:"·"; }
 #seafix-demo .sf-chat-thread-header .sf-chat-thread-role .sf-chat-duty::before { content:"·"; margin:0 8px 0 0; }
}

/* Native dialog autofocus and taps must not leave a keyboard ring behind.
   Keyboard users get a clear ring outside the button (also visible on dark buttons, A7). */
#seafix-demo[data-input-modality="pointer"] button:focus { outline:0!important; box-shadow:none!important; }
#seafix-demo[data-input-modality="keyboard"] button:focus-visible {
 outline:2px solid var(--sf-heading)!important; outline-offset:3px; box-shadow:none!important;
}
/* Przewijane/przycinające pojemniki ucinały obwódkę na zewnątrz — tam rysujemy ją do środka.
   Na przyciskach wypełnionych kolorem obwódki (wybrany filtr, „Nowa lista zadań”) obwódka ma kolor napisu i odstęp od brzegu. */
#seafix-demo[data-input-modality="keyboard"] :where(#sf-task-filters,#sf-notification-inbox-list,#sf-chat-roster-scroll,#sf-settings-categories,.sf-layovers-sidebar,.sf-layovers-content) button:focus-visible { outline-offset:-2px; }
#seafix-demo[data-input-modality="keyboard"] :where(.sf-layovers-content) :is(:where(.sf-layover-audience-tabs,.sf-service-filters) button[aria-pressed="true"],button.sf-planning-action):focus-visible { outline-color:currentColor!important; outline-offset:-4px; }
#seafix-demo[data-input-modality="keyboard"] #sf-layover-calendar-panel .sf-cal-month-card button.sf-cal-day-number:focus-visible { outline-offset:-2px; }
#seafix-demo .sf-bottom-nav .sf-nav-add .sf-nav-icon {
 background:light-dark(#171719,#f4f4f6); color:light-dark(#fff,#111113);
}
@media(hover:hover) {
 #seafix-demo .sf-bottom-nav>.sf-nav-add:hover .sf-nav-icon { background:light-dark(#2b2b2f,#dedee4); color:light-dark(#fff,#111113); }
}

/* Full-page Support used to force a translucent white composer in dark mode. */
#seafix-demo .sc-panel:not(.sc-floating) .sc-compose {
 background:light-dark(#f8f8fa,#26282e); color:light-dark(#17191d,#f4f4f6);
}
#seafix-demo .sc-panel:not(.sc-floating) .sc-compose textarea {
 color:light-dark(#17191d,#f4f4f6); -webkit-text-fill-color:light-dark(#17191d,#f4f4f6);
 caret-color:currentColor;
}
#seafix-demo .sc-panel:not(.sc-floating) .sc-compose textarea::placeholder {
 color:light-dark(#686a70,#b9bdc7); -webkit-text-fill-color:light-dark(#686a70,#b9bdc7); opacity:1;
}

/* Approval keeps number matching; rejection is a separate, distant action. */
#seafix-demo dialog#sf-login-incoming.sf-compact-incoming {
 width:min(420px,calc(100vw - 32px)); min-height:0; padding:24px; border-radius:24px;
 background:var(--sf-canvas); box-shadow:0 18px 70px rgb(0 0 0 / .22);
}
#seafix-demo #sf-login-incoming.sf-compact-incoming .sf-incoming-heading { align-items:center; gap:12px; margin-bottom:18px; }
#seafix-demo #sf-login-incoming.sf-compact-incoming .sf-auth-dialog-icon {
 flex:none; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:14px;
 background:var(--sf-surface-raised); color:var(--sf-heading);
}
#seafix-demo #sf-login-incoming.sf-compact-incoming h2 { font-size:19px; font-weight:600; }
#seafix-demo #sf-login-incoming.sf-compact-incoming [data-login-device] {
 margin-bottom:16px; padding:12px 14px; border-radius:12px; background:var(--sf-surface-raised); color:var(--sf-heading); font-size:14px;
}
#seafix-demo #sf-login-incoming.sf-compact-incoming [data-login-warning] { color:var(--sf-muted); font-size:13px; line-height:1.6; }
#seafix-demo #sf-login-incoming.sf-compact-incoming [data-login-choices] { gap:10px; margin:18px 0 0; }
#seafix-demo #sf-login-incoming.sf-compact-incoming [data-login-choices] button {
 min-height:62px; padding:12px 6px; border:1px solid var(--sf-line); border-radius:14px;
 background:var(--sf-surface-raised); color:var(--sf-heading); font-size:24px; font-weight:600; font-variant-numeric:tabular-nums;
}
#seafix-demo #sf-login-incoming.sf-compact-incoming [data-login-incoming-note]:empty { display:none; }
#seafix-demo #sf-login-incoming.sf-compact-incoming [data-login-reject] {
 width:100%; margin-top:36px; min-height:48px; padding:12px; border:0; border-top:1px solid var(--sf-line);
 border-radius:0; background:transparent; color:var(--sf-danger,#c43b4b); font-size:13px; font-weight:500;
}

/* A shared dark surface ties incoming messages to the composer. */
#seafix-demo { --sf-chat-incoming-dark:#26282e; --sf-chat-outgoing-dark:#454b55; }
#seafix-demo.sf-chat-view #sf-chat-compose {
 background:light-dark(rgb(255 255 255 / .72),var(--sf-chat-incoming-dark));
}
#seafix-demo .sf-mini-chat .sf-mini-compose {
 background:light-dark(#fff,var(--sf-chat-incoming-dark)); color:var(--sf-text);
}
#seafix-demo .sf-mini-chat .sf-mini-compose textarea {
 color:var(--sf-heading); -webkit-text-fill-color:var(--sf-heading); caret-color:currentColor;
}
#seafix-demo .sf-chat-bubble.sf-chat-bubble:not(.is-mine):not(.is-sticker)>p,
#seafix-demo .sc-bubble.sc-bubble:not(.sc-own):not(.is-sticker)>.sc-body {
 background:light-dark(#fff,var(--sf-chat-incoming-dark)); color:light-dark(#17191d,#f4f4f6);
}
#seafix-demo .sf-chat-bubble.sf-chat-bubble.is-mine:not(.is-sticker)>p,
#seafix-demo .sc-bubble.sc-bubble.sc-own:not(.is-sticker)>.sc-body {
 background:light-dark(#101113,var(--sf-chat-outgoing-dark)); color:#fff;
}

/* Compose text follows the theme on mobile WebKit as well as desktop. */
#seafix-demo.sf-chat-view .sf-chat-page #sf-chat-body {
 color:var(--sf-heading); -webkit-text-fill-color:var(--sf-heading); caret-color:currentColor;
}
#seafix-demo.sf-chat-view .sf-chat-page #sf-chat-body::placeholder {
 color:var(--sf-muted); -webkit-text-fill-color:var(--sf-muted); opacity:.65;
}