/* E22: coordinate-safe responsive layout. Never scale the interaction surface with CSS zoom. */
html.fullscreen-fit,html.fullscreen-fit body{width:100%;height:100%;overflow:hidden}
html.fullscreen-fit .app-shell{width:100%;height:100vh;max-width:none;margin:0;padding:8px;gap:8px;overflow:hidden;grid-template-rows:auto auto auto minmax(0,1fr)}
html.fullscreen-fit .topbar{padding:8px 12px;min-height:54px}
html.fullscreen-fit .brand-logo{width:40px;height:40px}
html.fullscreen-fit .brand h1{font-size:28px}
html.fullscreen-fit .brand p{font-size:10px}
html.fullscreen-fit .actions{gap:6px}
html.fullscreen-fit .actions button,html.fullscreen-fit .file-button{padding:8px 10px;font-size:13px}
html.fullscreen-fit .project-panel.collapsed{min-height:42px}
html.fullscreen-fit .breadcrumbs{margin:0}
html.fullscreen-fit .workspace{min-height:0;height:100%;align-items:stretch}
html.fullscreen-fit .timeline-card{min-height:0;height:100%;overflow:hidden}
html.fullscreen-fit .timeline-stage{min-height:220px;height:auto;flex:1}
html.fullscreen-fit .timeline-card{display:flex;flex-direction:column}
html.fullscreen-fit .legend{padding:5px 12px}
html.fullscreen-fit .diagnostics{display:none}

.workspace{align-items:start}
.timeline-card{height:auto;min-height:0}
.timeline-stage{height:clamp(420px,62vh,780px);min-height:360px}
.legend{min-height:0}

/* Every manipulable window keeps its controls in sight while only the body scrolls. */
.shell-window>header,.runtime-dialog>header,.discussion-window>header,.project-browser-window>header{position:sticky;top:0;z-index:12;background:rgba(13,20,24,.98);backdrop-filter:blur(10px)}
.profile-interface-button{margin-top:10px}
.interface-layout-window{width:min(520px,calc(100vw - 24px));max-height:min(680px,calc(100vh - 24px))}
.interface-layout-list{display:grid;gap:8px;margin:12px 0}
.interface-layout-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px;border:1px solid #34434b;border-radius:10px}

/* Independent, rounded Marker cue; the Canvas animation is complemented by this semantic style. */
.timeline-stage.marker-draft-active{box-shadow:inset 0 0 0 1px rgba(103,239,255,.45)}
.current-context-navigator::before{content:attr(data-label);position:absolute;left:8px;top:1px;z-index:3;color:#94c9d8;font-size:9px;pointer-events:none}
.context-lane::after{content:attr(data-label);position:absolute;left:8px;top:1px;color:#9eb4bd;font-size:9px;z-index:3;pointer-events:none}

.project-media-controls input[type=file]{max-width:100%}
.media-add-label{display:flex;justify-content:center;cursor:pointer;border:1px solid #3b4a52;border-radius:10px;padding:11px;margin:8px 0}
.media-add-label input{display:none}
.project-media-list,.project-current-media-menu{display:grid;gap:6px}
.project-media-item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid #314047;border-radius:9px;background:#111a1f}
.project-media-item.active{border-color:#ff781c;box-shadow:0 0 0 1px rgba(255,120,28,.25)}
.project-media-item button{padding:6px 9px}
.project-media-remove{color:#ff7373}
.project-current-media{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;margin-top:10px}
.project-current-media>button{padding:8px}
.project-current-media-main{display:flex;justify-content:space-between;gap:8px;align-items:center;min-width:0}
.project-current-media-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-change-badge{color:#6fe8a0;font-size:11px}
@media(max-width:1100px){.topbar{align-items:flex-start}.actions{justify-content:flex-end}.timeline-stage{height:55vh}}