:root {
  min-width: 0;
  --single-page-sidebar-width: clamp(184px, 14vw, 232px);
  --single-page-topbar-height: 64px;
}

body.single-page-root {
  min-width: 0;
  overflow-x: clip;
}

body.single-page-root[data-current-module="workbench"] {
  --single-page-topbar-height: 0px;
  overflow-x: clip;
  overflow-y: visible;
}

body.single-page-root[data-current-module="workbench"] .ticket-shell {
  grid-template-rows: minmax(0, 1fr);
}

body.single-page-root[data-current-module="workbench"] .single-page-topbar {
  display: none;
}

.mobile-module-nav {
  display: none;
}

.single-page-app {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.single-page-sidebar {
  width: auto;
}

@media (min-width: 760px) {
  /* Continue the rail through full-page captures while its controls stay fixed. */
  .single-page-app {
    background: linear-gradient(var(--ticket-navy-deep), var(--ticket-navy-deep)) left top / var(--single-page-sidebar-width) 100% no-repeat;
  }
  .single-page-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--single-page-sidebar-width);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .single-page-shell { grid-column: 2; }
  .single-page-app { grid-template-columns: var(--single-page-sidebar-width) minmax(0, 1fr); }
}
@media (min-width: 760px) and (max-width: 980px) {
  :root { --single-page-sidebar-width: 72px; }
}

.single-page-sidebar-status {
  display: grid;
  gap: 5px;
  padding: 14px 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.single-page-sidebar-date {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: auto 14px 0;
  padding: 12px;
  border: 1px solid rgba(148, 197, 255, .22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(58, 137, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #fff;
}

.single-page-sidebar-date > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: rgba(75, 160, 255, .18);
  color: #a9d7ff;
  font-size: 19px;
}

.single-page-sidebar-date-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.single-page-sidebar-date small,
.single-page-sidebar-date span {
  color: rgba(226, 239, 255, .7);
  font-size: 10px;
  line-height: 1.35;
}

.single-page-sidebar-date strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.single-page-compatibility-status[hidden] {
  display: none !important;
}

.single-page-sidebar-status .cloud-pill {
  overflow: hidden;
  color: rgba(226, 239, 255, .72);
  font-size: 10px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.single-page-sidebar-status .cloud-pill.online {
  color: #53d99d;
}

.single-page-shell {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.single-page-topbar {
  min-height: var(--single-page-topbar-height);
}

.single-page-topbar .ticket-profile {
  text-decoration: none;
}

.single-page-topbar .ticket-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.single-page-topbar .ticket-avatar img[hidden],
.single-page-topbar .ticket-avatar i[hidden] {
  display: none;
}

#moduleViewWorkbench.dashboard {
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: none;
  margin-inline: auto;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* A translated final footer extends document scrolling beyond the sidebar's grid. */
html.motion-ready #moduleViewWorkbench .footer-note[data-motion="scroll"] {
  opacity: 1;
  transform: none;
  animation: none;
}

.module-view-remote {
  position: relative;
  width: 100%;
  min-width: 0;
  height: calc(100vh - var(--single-page-topbar-height));
  height: calc(100dvh - var(--single-page-topbar-height));
  overflow: hidden;
  background: transparent;
}

.module-view-remote[hidden],
.module-frame[hidden],
#moduleViewWorkbench[hidden] {
  display: none !important;
}

#dashboard-scores { display: none !important; }

.module-frame {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  opacity: 1;
  /* Route feedback owns the transition; keep embedded document surfaces stable. */
  transform: none;
}

.module-load-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
  background: #f5f7fa;
  color: #1f2937;
}
.module-load-state[hidden] { display: none; }
.module-load-state strong { font-size: 18px; }
.module-load-state p { max-width: 32em; margin: 0; color: #667085; line-height: 1.7; }
.module-load-state button { padding: 10px 22px; border: 1px solid #d6dce5; border-radius: 12px; background: white; color: #1f2937; cursor: pointer; }

body.module-remote-active {
  overflow: hidden;
}

body.module-remote-active .single-page-app,
body.module-remote-active .single-page-shell {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.module-sidebar-collapsed {
  --single-page-sidebar-width: 76px;
}

body.module-sidebar-collapsed .single-page-app {
  grid-template-columns: var(--single-page-sidebar-width) minmax(0, 1fr);
}

body.module-sidebar-collapsed .ticket-brand-copy,
body.module-sidebar-collapsed .single-page-sidebar-status {
  display: none;
}

body.module-sidebar-collapsed .ticket-nav-item span,
body.module-sidebar-collapsed .single-page-sidebar-date {
  display: none;
}

body.module-sidebar-collapsed .ticket-brand,
body.module-sidebar-collapsed .ticket-nav-item {
  justify-content: center;
  padding-inline: 0;
}

body.module-sidebar-collapsed .ticket-brand img {
  width: 38px;
  height: 38px;
}

@media (min-width: 760px) {
  body.module-sidebar-collapsed.module-sidebar-hover-expanded {
    --single-page-sidebar-width: clamp(184px, 14vw, 232px);
  }

  body.module-sidebar-collapsed.module-sidebar-hover-expanded .single-page-app {
    grid-template-columns: var(--single-page-sidebar-width) minmax(0, 1fr);
  }

  body.module-sidebar-collapsed.module-sidebar-hover-expanded .ticket-brand {
    justify-content: flex-start;
    padding-inline: 12px;
  }

  body.module-sidebar-collapsed.module-sidebar-hover-expanded .ticket-brand-copy,
  body.module-sidebar-collapsed.module-sidebar-hover-expanded .single-page-sidebar-status,
  body.module-sidebar-collapsed.module-sidebar-hover-expanded .single-page-sidebar-date {
    display: grid;
  }

  body.module-sidebar-collapsed.module-sidebar-hover-expanded .ticket-nav-item span {
    display: inline;
  }

  body.module-sidebar-collapsed.module-sidebar-hover-expanded .ticket-nav-item {
    justify-content: flex-start;
    padding-inline: 17px;
  }
}

@keyframes single-page-module-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 759px) {
  :root { --single-page-topbar-height: 58px; --mobile-nav-height:calc(68px + env(safe-area-inset-bottom)); }
  .single-page-sidebar { display: none; }
  .single-page-app,
  body.module-sidebar-collapsed .single-page-app { display: block; }
  .single-page-topbar { position: sticky; top: 0; z-index: 40; }
  #moduleViewWorkbench.dashboard { width: calc(100% - 16px); }
  html.motion-ready #moduleViewWorkbench [data-motion="scroll"] {
    opacity: 1 !important;
    transform: none !important;
  }
  html.motion-ready #moduleViewWorkbench [data-motion="scroll"].is-revealed {
    animation: none !important;
  }
  .mobile-module-nav {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
    min-height:var(--mobile-nav-height);
    box-sizing:border-box;
    margin:0;
    border:0;
    border-radius:18px 18px 0 0;
    background: rgba(250, 253, 255, .94);
    box-shadow: 0 18px 40px rgba(16, 54, 102, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(20px) saturate(150%);
  }
  .mobile-module-nav > a {
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    border-radius: 13px;
    color: #63758f;
    font-size: 10px;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease;
  }
  .mobile-module-nav > a i { font-size: 20px; }
  .mobile-module-nav > a:active { transform: scale(.96); }
  .mobile-module-nav > a[aria-current="page"] {
    background: transparent;
    box-shadow: none;
    color: #0868da;
  }
  body.single-page-root { padding-bottom: var(--mobile-nav-height); }

  /* The embedded document owns scrolling. Reserve the fixed navigation height,
     including its internal safe area, once in the host viewport. */
  body.single-page-root.module-remote-active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom:var(--mobile-nav-height);
    box-sizing:border-box;
  }
  body.module-remote-active .single-page-app {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }
  body.module-remote-active .single-page-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  body.module-remote-active .single-page-topbar { flex: 0 0 auto; }
  body.module-remote-active .module-view-remote {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }
  body.module-remote-active .module-frame { display: block; }
  body.module-remote-active > .mobile-module-nav {
    position: fixed;
    flex: 0 0 auto;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .module-frame { animation: none; }
  .mobile-module-nav > a { transition: none; }
}

/* Prevent automatic text inflation; page and pinch zoom remain available. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-motion-theme="reference"] .mobile-module-nav>a{ -webkit-tap-highlight-color:transparent }
html[data-motion-theme="reference"] .mobile-module-nav>a:focus{outline:none;box-shadow:none}
html[data-motion-theme="reference"][data-nav-keyboard=true] .mobile-module-nav>a:focus{outline:2px solid #737d8b;outline-offset:-3px}