/* The title bar overlays existing content: it never consumes list layout space. */
.collapsed-title-bar{position:fixed;inset:var(--app-chrome-height,57px) 0 auto;z-index:95;box-sizing:border-box;width:100%;background:var(--page);color:var(--ink);font-family:var(--font);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms ease,visibility 150ms}
.collapsed-title-bar[hidden]{display:none}
.collapsed-title-bar.is-active{opacity:1;visibility:visible;pointer-events:auto}
.collapsed-title-row{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:12px;align-items:center;box-sizing:border-box;height:48px;padding:6px 16px}
.collapsed-title-back{display:grid;place-items:center;box-sizing:border-box;width:36px;height:36px;min-width:36px;min-height:36px;border:0;border-radius:50%;padding:0;margin:0;background:var(--surface);color:var(--action-ink);box-shadow:var(--shadow-tile),0 0 0 1px rgb(var(--brand-rgb)/.08);cursor:pointer}
.collapsed-title-back[hidden]{visibility:hidden;display:block}
.collapsed-title-name{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:3px;margin-bottom:-3px;font-size:16px;font-weight:600;line-height:24px;text-align:center;text-transform:none}
/* Sticky originals retain exactly their existing layout slots and visual styles. */
.title-collapse-filter{position:sticky!important;top:var(--title-collapse-sticky-top,calc(var(--app-chrome-height,57px) + 48px))!important;z-index:94!important}
.title-collapse-filter.is-pinned{background:var(--page)!important}
.collapsed-title-back:focus-visible{outline:3px solid rgb(var(--brand-rgb)/.3);outline-offset:0}
/* Unpin only the two list heroes that previously stayed above their lists. */
body.compact-journey-app>main.title-collapse-screen:is(.engine-stack.student-roster,.eval-list-view)>.flow-hero-shell{position:relative!important;top:auto!important;z-index:auto!important}
body.compact-journey-app>main.title-collapse-screen{scroll-padding-top:48px}
/* Local's report keeps its original header and footer geometry at the top; the header now scrolls with the preview. */
.title-collapse-dialog-scroll{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.title-collapse-dialog-scroll>.student-report-view{overflow-x:auto;overflow-y:visible;flex:1 0 auto}
@media(prefers-reduced-motion:reduce){.collapsed-title-bar{transition:none}}