/* Desktop uses the header and content rows. Mobile keeps its navigation dock. */
html:has(#seafix-demo), html:has(#seafix-demo) > body {
  width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  overflow: hidden; overscroll-behavior: none;
  background: var(--sf-browser-background, #f5f5f7) !important;
}
html:has(#seafix-demo) > body { position: fixed; inset: 0; }
#seafix-demo {
  --sf-ui-scale: 1;
  --sf-shell-width: 1240px;
  --sf-work-shell-width: 1240px;
  --sf-work-columns: minmax(0,1fr) minmax(0,1fr);
  --sf-page-gutter: max(clamp(16px, 4vw, 36px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --sf-canvas: light-dark(#f5f5f7, #111113);
  --sf-header-bottom-space: 16px;
  --sf-work-top-space: 6px;
  --sf-logo-row-inset: 0px;
  --sf-header-fade-height: 40px;
  --sf-header-fade-progress: 0;
  position: fixed; inset: 0 0 auto; top: var(--sf-viewport-top, 0px);
  display: grid; grid-template-rows: minmax(0, 1fr);
  width: 100%; height: 100svh; height: var(--sf-viewport-height, 100dvh); min-height: 0;
  overflow: hidden; overscroll-behavior: none; background: var(--sf-canvas);
}
#seafix-demo .sf-phone {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%; max-width: var(--sf-shell-width); height: 100%; min-height: 0; max-height: 100%;
  margin-inline: auto;
}
#seafix-demo .sf-topbar {
  position: relative; top: auto; grid-row: 1; z-index: 24;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--sf-page-gutter) var(--sf-header-bottom-space);
  background: var(--sf-canvas); border-bottom: 0;
}
#seafix-demo .sf-topbar::before, #seafix-demo .sf-topbar::after { border-bottom: 0; bottom: 0; }
#seafix-demo :is(.sf-theme-panel, .sf-server-popover), #seafix-demo #sf-push {
  position: absolute; top: calc(var(--sf-header-height, 80px) + 8px);
  max-height: max(0px, calc(100% - var(--sf-header-height, 80px) - var(--sf-nav-height, 72px) - 24px));
  overflow-y: auto;
}
#seafix-demo .sf-main {
  grid-row: 2; min-width: 0; min-height: 0; height: 100%;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: none;
  padding-inline: var(--sf-page-gutter); padding-bottom: 16px;
  scroll-padding-top: 12px; scroll-padding-bottom: 16px;
}
#seafix-demo:not(.is-logged-out) .sf-phone,
#seafix-demo:not(.is-logged-out) .sf-main { background: var(--sf-canvas); }
#seafix-demo .sf-main:has(> :is([data-screen="home"], [data-screen="assigned"], [data-screen="completed"], [data-screen="statistics"], [data-screen="reports"], [data-screen="report"], [data-screen="layovers"], [data-screen="smt"],[data-screen="notification-inbox"]):not([hidden])) {
  padding-top: var(--sf-work-top-space);
}
/* Match the visible logo-to-report gap below the report button as well. */
#seafix-demo [data-screen="home"] > .sf-report {
  margin-bottom: calc(var(--sf-header-bottom-space) + var(--sf-work-top-space) + var(--sf-logo-row-inset));
}
@media (max-width: 479px) {
  /* A 40px mark is centered alongside the 44px header actions. */
  #seafix-demo { --sf-logo-row-inset: 2px; }
}
@media (max-width: 370px) {
  /* The smallest header mark is 34px; the action buttons remain 44px. */
  #seafix-demo { --sf-logo-row-inset: 5px; }
}

/* Mobile navigation follows the visual viewport; wide screens use shortcuts. */
#seafix-demo .sf-bottom-nav {
  --sf-nav-surface: light-dark(#ededf1, #242427);
  --sf-dock-edge: max(8px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  position: relative; inset: auto; grid-row: 3; justify-self: center; align-self: end;
  width: calc(100% - 2 * var(--sf-dock-edge)); max-width: 640px; min-width: 0;
  margin: 8px 0 0; border: 1px solid var(--sf-line); border-radius: 20px;
  padding: 5px 2px max(2px, env(safe-area-inset-bottom, 0px));
  background: var(--sf-nav-surface); box-shadow: 0 4px 16px var(--sf-nav-shadow); transform: none;
}
@media (min-width: 760px) {
  #seafix-demo .sf-bottom-nav { padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #seafix-demo .sf-bottom-nav {
      --sf-nav-surface: light-dark(rgb(255 255 255 / .76), rgb(32 32 35 / .82));
      backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%);
    }
  }
}

/* Column spacing stays open, without a vertical divider. */
#seafix-demo .sf-statistic:nth-child(odd) { border-right: 0; }
@media (min-width: 1000px) {
  /* Use the same breakpoint as the two work columns, including other app pages. */
  #seafix-demo { --sf-nav-height: 0px; }
  #seafix-demo .sf-phone { grid-template-rows: auto minmax(0, 1fr); }
  #seafix-demo .sf-bottom-nav { display: none !important; }
  #seafix-demo :is(#sf-theme-toggle, #sf-theme-panel) { display: none !important; }
  #seafix-demo [data-screen="home"] > .sf-report { display: none; }
  #seafix-demo.sf-split-view .sf-main { position: relative; }
  #seafix-demo.sf-split-view .sf-main > .sf-scroll-column:not([hidden]) { border-inline: 0; animation:none; }
  /* Both headings start at the same top edge; sidebar sections follow downward. */
  #seafix-demo.sf-split-view .sf-main > [data-screen="detail-empty"]:not([hidden]) {
    display: block; align-self: stretch; align-content: start; margin-block: 0; padding-top: 0;
    animation:none; transform:none; overflow-anchor:none;
  }
  /* Give the shared shortcuts the space previously lost between the columns. */
  #seafix-demo.sf-split-view .sf-main {
    column-gap:12px;
    grid-template-columns:var(--sf-work-columns);
  }
  /* Keep the source scrollbar inside the narrower gap while preserving row space. */
  #seafix-demo.sf-split-view .sf-main > .sf-detail-source.sf-scroll-column {
    width:calc(100% + 36px); margin-inline:-24px -12px; padding-right:20px;
  }
}
/* Scale every desktop element together, while retaining the full viewport. */
@media screen and (min-width: 1000px) {
  #seafix-demo {
    --sf-ui-scale: .9;
    --sf-viewport-height: calc(100dvh / var(--sf-ui-scale));
    zoom: var(--sf-ui-scale);
  }
}
@media (min-width:1200px) {
  /* Retain the work list's room while giving the full shortcuts panel more width. */
  #seafix-demo:not(.is-logged-out) { --sf-shell-width:1360px; }
  #seafix-demo { --sf-work-shell-width:1383px; --sf-work-columns:minmax(0,1fr) minmax(0,1.236fr); }
  #seafix-demo.sf-split-view { --sf-shell-width:var(--sf-work-shell-width); }
}
@media (max-width: 999px) {
  /* Safari/Chrome need native document scrolling to retract their own controls.
     A stable small viewport minimum never grows the document during a gesture. */
  html:has(#seafix-demo), html:has(#seafix-demo) > body {
    position: static; inset: auto; height: auto; min-height: 100%;
    overflow-x: clip; overflow-y: visible; overscroll-behavior-y: none;
  }
  html:has(#seafix-demo) { overflow-y: auto; scroll-padding-block: 88px; }
  #seafix-demo {
    position: relative; inset: auto; display: block;
    height: auto; min-height: 100svh; overflow: visible;
  }
  #seafix-demo .sf-phone {
    display: flex; flex-direction: column; height: auto; max-height: none;
    min-height: 100svh; overflow: visible;
  }
  #seafix-demo .sf-topbar { position: sticky; top: 0; flex: 0 0 auto; }
  #seafix-demo .sf-topbar::before, #seafix-demo .sf-topbar::after { content: none; }
  #seafix-demo .sf-main {
    flex: 1 0 auto; height: auto; overflow: visible; overscroll-behavior-y: auto;
  }
  #seafix-demo:not(.is-logged-out) .sf-main {
    /* Reserve the measured dock exactly once, including its safe area. */
    padding-bottom: calc(var(--sf-nav-height, 72px) + 14px);
  }
  #seafix-demo .sf-bottom-nav {
    position: fixed; inset: auto 0 0; margin: 0 auto;
    /* offsetTop is relative to the layout viewport, never to document scrollY. */
    top: calc(var(--sf-viewport-top, 0px) + var(--sf-viewport-height, 100dvh) - var(--sf-nav-height, 72px));
    bottom: auto; transition: none;
  }
  #seafix-demo :is(.sf-theme-panel, .sf-server-popover), #seafix-demo #sf-push {
    position: fixed; top: calc(var(--sf-viewport-top, 0px) + var(--sf-header-height, 80px) + 8px);
    max-height: max(0px, calc(var(--sf-viewport-height, 100dvh) - var(--sf-header-height, 80px) - var(--sf-nav-height, 72px) - 24px));
  }
  #seafix-demo.sf-settings-view .sf-main { overflow: visible; }
  #seafix-demo .sf-settings-shell {
    height: auto; min-height: calc(100svh - var(--sf-header-height, 80px) - var(--sf-nav-height, 72px) - 14px);
    overflow: visible;
  }
  #seafix-demo :is(.sf-settings-sidebar, .sf-settings-content) { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  #seafix-demo .sf-bottom-nav { transition: none; }
}

/* A soft opacity curve joins scrolling content to the opaque header canvas.
   The first 32px of scrolling gradually introduce the effect, so initial page
   titles stay fully readable and the transition never switches on abruptly. */
@media (max-width: 999px) {
  #seafix-demo .sf-topbar::after {
    content: ""; position: absolute; top: calc(100% - 1px); bottom: auto; left: 0; right: 0;
    width: auto; height: var(--sf-header-fade-height);
    background: linear-gradient(to bottom,
      var(--sf-canvas) 0%,
      color-mix(in srgb, var(--sf-canvas) 96%, transparent) 16%,
      color-mix(in srgb, var(--sf-canvas) 80%, transparent) 36%,
      color-mix(in srgb, var(--sf-canvas) 46%, transparent) 58%,
      color-mix(in srgb, var(--sf-canvas) 14%, transparent) 80%,
      color-mix(in srgb, var(--sf-canvas) 0%, transparent) 100%);
    border: 0; box-shadow: none; pointer-events: none;
    opacity: var(--sf-header-fade-progress); transition: opacity .12s linear;
  }
}
@media (min-width: 1000px) {
  #seafix-demo.sf-settings-view::after { --sf-header-fade-progress: var(--sf-settings-fade-progress, 0); }
  #seafix-demo .sf-header-fade-active,
  #seafix-demo.sf-settings-view:has(.sf-settings-content.sf-header-fade-active)::after {
    --sf-header-fade-mask: linear-gradient(to bottom,
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress))) 0px,
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress) * .96)) calc(var(--sf-header-fade-height) * .16),
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress) * .8)) calc(var(--sf-header-fade-height) * .36),
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress) * .46)) calc(var(--sf-header-fade-height) * .58),
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress) * .14)) calc(var(--sf-header-fade-height) * .8),
      #000 var(--sf-header-fade-height));
    -webkit-mask-image: var(--sf-header-fade-mask); mask-image: var(--sf-header-fade-mask);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  /* The Settings scroll edge is drawn inside the content pane itself. */
  #seafix-demo.sf-settings-view:has(.sf-settings-content.sf-header-fade-active)::after {
    --sf-header-fade-mask: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #seafix-demo .sf-topbar::after { transition: none; }
}
/* Chat retains its own scrolling surface on phones. Settings is unchanged. */
@media (max-width: 999px) {
  #seafix-demo:not(.sf-settings-view) :is(.sf-chat-sections, #sf-chat-people, #sf-chat-messages).sf-header-fade-active {
    --sf-header-fade-mask: linear-gradient(to bottom,
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress))) 0px,
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress) * .96)) calc(var(--sf-header-fade-height) * .16),
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress) * .8)) calc(var(--sf-header-fade-height) * .36),
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress) * .46)) calc(var(--sf-header-fade-height) * .58),
      rgb(0 0 0 / calc(1 - var(--sf-header-fade-progress) * .14)) calc(var(--sf-header-fade-height) * .8),
      #000 var(--sf-header-fade-height));
    -webkit-mask-image: var(--sf-header-fade-mask); mask-image: var(--sf-header-fade-mask);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}
@media print {
  html:has(#seafix-demo) > body { position: static; inset: auto; }
  #seafix-demo .sf-topbar::after { content: none; }
  #seafix-demo .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; }
}

/* Touch tablets keep two equally sized work columns, including with a trackpad. */
@media screen and (min-width: 1000px) and (any-pointer: coarse) {
  #seafix-demo.sf-split-view {
    --sf-shell-width: 100%;
    --sf-work-shell-width: 100%;
    --sf-work-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #seafix-demo.sf-split-view .sf-main > .sf-detail-source.sf-scroll-column {
    width: 100%; margin-inline: 0; padding-inline: 0 8px;
  }
  #seafix-demo.sf-split-view .sf-main > [data-screen="detail-empty"]:not([hidden]) {
    padding-inline: 0 8px;
  }
}