/* Keep navigation in view without trapping a long menu below a short viewport. */
@media(min-width:760px) {
  #seafix-demo :is(.sf-layovers-page > .sf-layovers-layout > .sf-layovers-sidebar,#sf-smt-navigation) {
    position:sticky; top:calc(var(--sf-header-fade-height,40px) + 4px); align-self:start;
    max-height:calc(var(--sf-viewport-height,100dvh) - var(--sf-header-height,80px) - var(--sf-nav-height,0px) - var(--sf-header-fade-height,40px) - 24px);
    overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; padding:3px;
  }
}
@media(min-width:760px) and (max-width:999px) {
  #seafix-demo :is(.sf-layovers-page > .sf-layovers-layout > .sf-layovers-sidebar,#sf-smt-navigation) { top:calc(var(--sf-header-height,80px) + var(--sf-header-fade-height,40px) + 4px); }
}
#seafix-demo #sf-smt-navigation #sf-smt-view-report { grid-template-columns:22px minmax(0,1fr); align-items:start; column-gap:12px; }
#seafix-demo #sf-smt-navigation #sf-smt-view-report small { display:block; }
#seafix-demo #sf-layover-port-panel { min-width:0; }
#seafix-demo .sf-port-toolbar { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
#seafix-demo #sf-port-form { display:grid; gap:20px; width:100%; max-width:660px; margin:0; }
#seafix-demo #sf-port-form [hidden],#seafix-demo #sf-layover-port-panel [hidden] { display:none!important; }
#seafix-demo .sf-port-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#seafix-demo #sf-port-form label.sf-port-field { display:grid; align-content:start; gap:8px; min-width:0; margin:0; }
#seafix-demo .sf-port-field > label,#seafix-demo .sf-port-field > span { font-size:13px; font-weight:600; }
#seafix-demo #sf-port-form :is(input:not([type=checkbox]),select) { width:100%; min-width:0; max-width:100%; box-sizing:border-box; padding:12px; min-height:44px; border:1px solid var(--sf-line); border-radius:12px; background:var(--sf-surface); color:var(--sf-heading); font:inherit; font-size:14px; }
#seafix-demo .sf-port-fieldset { min-width:0; margin:0; padding:18px; border:1px solid var(--sf-line); border-radius:16px; }
#seafix-demo .sf-port-fieldset legend { padding:0 6px; font-size:13px; font-weight:600; }
#seafix-demo #sf-port-form label.sf-port-check { display:flex; gap:10px; align-items:center; cursor:pointer; font-size:14px; margin:0; }
#seafix-demo #sf-port-form input[type=checkbox] { width:19px; height:19px; min-height:19px; flex:none; margin:0; accent-color:var(--sf-heading); }
#seafix-demo .sf-port-fuels { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
#seafix-demo .sf-port-fuels .sf-port-check { padding:12px 18px; border:1px solid var(--sf-line); border-radius:12px; background:var(--sf-surface); }
#seafix-demo .sf-port-fuels .sf-port-check:has(:checked) { background:var(--sf-surface-raised); border-color:var(--sf-muted); }
#seafix-demo .sf-port-hint { margin:8px 0 12px; color:var(--sf-muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
#seafix-demo #sf-port-recipient-list { margin-top:12px; }
#seafix-demo .sf-port-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#seafix-demo .sf-port-actions .sf-primary-action { width:auto; min-width:160px; margin:0; }
#seafix-demo .sf-port-details { padding:24px; border:1px solid var(--sf-line); border-radius:18px; background:var(--sf-surface); }
#seafix-demo .sf-port-details h3 { margin:8px 0 24px; font-size:25px; overflow-wrap:anywhere; }
#seafix-demo .sf-port-eyebrow { font-size:12px; color:var(--sf-muted); }
#seafix-demo .sf-port-details dl { margin:0; display:grid; gap:18px; }
#seafix-demo .sf-port-details dt { color:var(--sf-muted); font-size:12px; margin-bottom:5px; }
#seafix-demo .sf-port-details dd { margin:0; font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
#seafix-demo .sf-port-details .sf-port-hint { margin:24px 0; }
#seafix-demo #sf-port-filter { width:auto; max-width:100%; border:1px solid var(--sf-line); border-radius:10px; padding:10px 12px; background:var(--sf-surface); color:var(--sf-heading); font:inherit; font-size:13px; }
#seafix-demo #sf-port-pages { display:flex; gap:12px; justify-content:center; align-items:center; margin-top:20px; font-size:12px; }
#seafix-demo .sf-tutorial-intro { color:var(--sf-muted); font-size:14px; line-height:1.65; margin:8px 0 26px; }
#seafix-demo .sf-tutorial-section { border-top:1px solid var(--sf-line); }
#seafix-demo .sf-tutorial-section:last-child { border-bottom:1px solid var(--sf-line); }
#seafix-demo .sf-tutorial-section > summary { display:flex; align-items:center; gap:12px; padding:20px 0; list-style:none; cursor:pointer; font-size:16px; font-weight:600; }
#seafix-demo .sf-tutorial-section summary::-webkit-details-marker { display:none; }
#seafix-demo .sf-tutorial-section > summary > svg:first-child { width:21px!important; height:21px!important; color:var(--sf-muted); }
#seafix-demo .sf-tutorial-section > summary span { flex:1; }
#seafix-demo .sf-tutorial-chevron { width:17px!important; height:17px!important; transition:transform .15s; color:var(--sf-muted); }
#seafix-demo details[open] > summary > .sf-tutorial-chevron { transform:rotate(90deg); }
#seafix-demo .sf-tutorial-functions { padding:0 0 20px 32px; }
#seafix-demo .sf-tutorial-function > summary { display:flex; gap:12px; align-items:center; padding:13px 0; cursor:pointer; list-style:none; font-size:14px; font-weight:550; }
#seafix-demo .sf-tutorial-function > summary span { flex:1; }
#seafix-demo .sf-tutorial-function p { margin:0 24px 16px 0; font-size:13px; line-height:1.8; color:var(--sf-muted); }
#seafix-demo .sf-tutorial-section summary:focus-visible { outline:2px solid var(--sf-heading); outline-offset:3px; border-radius:6px; }
@media(max-width:759px) {
  #seafix-demo #sf-port-form :is(input:not([type=checkbox]),select),#seafix-demo #sf-port-filter { font-size:16px; }
  #seafix-demo .sf-port-fields { grid-template-columns:minmax(0,1fr); }
  #seafix-demo .sf-port-fieldset { padding:14px; }
  #seafix-demo .sf-port-details { padding:20px; }
  #seafix-demo .sf-tutorial-functions { padding-left:14px; }
}
@media print { #seafix-demo #sf-smt-navigation { display:none!important; } }
@media(prefers-reduced-motion:reduce) { #seafix-demo .sf-tutorial-chevron { transition:none; } }