/* v333: screen fit only. All existing colors, typography and controls remain
   defined by each page's original stylesheet and header patches. */
@media screen {
  html[data-hcfd-screen-fit] {
    --hcfd-fit-fallback: calc(var(--topbar-h, 64px) + var(--safe-top, env(safe-area-inset-top, 0px)));
  }
  html[data-hcfd-screen-fit="module"] #app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-top: 0;
  }
  html[data-hcfd-screen-fit="module"] #topbar {
    /* The header occupies its own row above the independently scrolling page. */
    position: relative;
    inset: auto;
    height: auto;
    min-height: var(--hcfd-fit-fallback);
    flex: 0 0 auto;
    flex-wrap: wrap;
  }
  html[data-hcfd-screen-fit="module"] #app > .main-scroll {
    position: relative;
    inset: auto;
    min-height: 0;
    flex: 1 1 0;
  }
  html[data-hcfd-screen-fit="module"] #topbar .brand,
  html[data-hcfd-screen-fit="module"] #topbar .brand-text,
  html[data-hcfd-screen-fit="module"] #topbar > :not(.brand) {
    min-width: 0;
    max-width: 100%;
  }
  html[data-hcfd-screen-fit="module"] #topbar > :not(.brand) { flex-wrap: wrap; }
  html[data-hcfd-screen-fit="module"] #topbar .brand-text h1,
  html[data-hcfd-screen-fit="module"] #topbar .who,
  html[data-hcfd-screen-fit="module"] #topbar .who b {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  html[data-hcfd-screen-fit="module"] #offlineToast {
    top: calc(var(--hcfd-fit-header-height, var(--hcfd-fit-fallback)) + 6px);
  }

  /* Keep the existing User Management header/rail dimensions plus safe area. */
  html[data-hcfd-screen-fit="users"] { --hcfd-fit-fallback: calc(68px + var(--safe-top)); }
  html[data-hcfd-screen-fit="users"] body > .topbar {
    height: auto;
    min-height: var(--hcfd-fit-fallback);
    padding-top: var(--safe-top);
    flex-wrap: wrap;
  }
  html[data-hcfd-screen-fit="users"] .topbar .brand,
  html[data-hcfd-screen-fit="users"] .topbar .portal-search,
  html[data-hcfd-screen-fit="users"] .topbar .top-user { min-width: 0; }
  html[data-hcfd-screen-fit="users"] .topbar .brand span { white-space: normal; }
  html[data-hcfd-screen-fit="users"] .sidebar,
  html[data-hcfd-screen-fit="users"] .drawer-backdrop {
    top: var(--hcfd-fit-header-height, var(--hcfd-fit-fallback));
  }
  html[data-hcfd-screen-fit="users"] .main {
    padding-top: calc(var(--hcfd-fit-header-height, var(--hcfd-fit-fallback)) + 24px);
  }

  /* PEER retains its original sizes and document-flow header. */
  html[data-hcfd-screen-fit="peer"] #topbar {
    padding-top: calc(16px + var(--safe-top, env(safe-area-inset-top, 0px)));
    flex-wrap: wrap;
  }
  html[data-hcfd-screen-fit="peer"] #topbar > :not(.brand) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
  html[data-hcfd-screen-fit="peer"] #topbar .who { overflow-wrap: anywhere; }
  html[data-hcfd-screen-fit="peer"] dialog {
    padding-top: calc(24px + var(--safe-top, env(safe-area-inset-top, 0px)));
  }
  html[data-hcfd-screen-fit="peer"] .drawerHead {
    top: var(--safe-top, env(safe-area-inset-top, 0px));
  }

  @media (min-width: 901px) {
    html[data-hcfd-fit-rail="prevention"] .modrail,
    html[data-hcfd-fit-rail="prevention"] .seg.toptabs {
      top: var(--hcfd-fit-header-height, var(--hcfd-fit-fallback));
    }
    html[data-hcfd-fit-rail="prevention"] .modrail { padding-top: 16px; }
    html[data-hcfd-fit-rail="prevention"] .seg.toptabs { padding-top: 6px; }
    html[data-hcfd-fit-rail="prevention"] #app > .hcfd-ann { padding-left: 212px; }
  }
  @media (max-width: 760px) {
    html[data-hcfd-screen-fit="users"] { --hcfd-fit-fallback: calc(60px + var(--safe-top)); }
    html[data-hcfd-screen-fit="users"] .main {
      padding-top: calc(var(--hcfd-fit-header-height, var(--hcfd-fit-fallback)) + 16px);
    }
  }
  @media (max-width: 650px) {
    html[data-hcfd-screen-fit="peer"] #topbar {
      padding-top: calc(12px + var(--safe-top, env(safe-area-inset-top, 0px)));
    }
    html[data-hcfd-screen-fit="peer"] dialog {
      padding-top: calc(18px + var(--safe-top, env(safe-area-inset-top, 0px)));
    }
  }
}