/* Homepage mobile: each feature keeps its own content height, with a rail
   measured from the selected card rather than the tallest inactive demo. */
@media(max-width:860px){
 html:not(.product-showcase-embed) .scroll-showreel .scr{align-items:flex-start;height:var(--showreel-mobile-height,auto)!important;min-height:0}
 .scroll-showreel .showreel-card{flex-basis:100%;align-self:flex-start}
 .scroll-showreel .showreel-card:last-child{margin-right:0}
 .scroll-showreel .showreel-caption{flex:none;margin-bottom:12px}
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen{height:auto;min-height:0;max-width:100%}
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen>.scene{height:auto;min-height:0;min-width:0;padding:16px 12px 20px;overflow:visible!important}
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen:has(>:is(#sc0,#sc3,#sc4)){height:auto;min-height:0}
 .scroll-showreel .showreel-card-top{position:relative;min-width:0}
 .scroll-showreel .showreel-card-top .showreel-app-project{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .scroll-showreel .showreel-card-top .showreel-app-search{flex:0 1 90px}
 .scroll-showreel .showreel-screen :is(.hrow,.issues-head,.documents-head){min-width:0;flex-wrap:wrap;gap:10px}
 .scroll-showreel .showreel-screen :is(.h1x,.subx){overflow-wrap:anywhere}
 /* Chat has a readable conversation window, not a tall empty frame. */
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen>#sc3{height:clamp(340px,65svh,520px);justify-content:flex-start;padding:12px 10px}
 html:not(.product-showcase-embed) .scroll-showreel #sc3 .chatw2{height:auto;max-height:100%;margin:0;width:100%;min-width:0}
 .scroll-showreel #sc3 .chbody{padding:10px;overscroll-behavior-y:auto!important}
 .scroll-showreel #sc3 :is(.dprev,.inb2){min-width:0;max-width:100%}
 /* Compare and View use the available card width and let their panels flow. */
 html:not(.product-showcase-embed) .scroll-showreel #sc0 .cmp-plan-stage{height:clamp(230px,70vw,360px)}
 html:not(.product-showcase-embed) .scroll-showreel #sc4 .ctlcv{height:clamp(260px,75vw,400px)}
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen>#sc4{padding-bottom:44px}
 .scroll-showreel #sc4 :is(.ctlpr,.ctlpn){max-width:100%;min-width:0}
 .scroll-showreel #sc4 .ctlpr{display:contents}
 .scroll-showreel #sc4 .control-stage{display:flex;flex-direction:column;gap:10px}
 .scroll-showreel #sc4 .ctlpn{display:block;position:static;width:100%;overflow-wrap:anywhere}
 .scroll-showreel #sc4 .ctlpr .ctlpn:first-child{order:1}.scroll-showreel #sc4 .ctlcv{order:2}.scroll-showreel #sc4 #c4i{order:3}
 /* Documents deliberately remain a finite, non-scrolling timeline. */
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen>#sc2{display:flex;height:clamp(440px,72svh,600px);overflow:clip!important}
 .scroll-showreel #sc2 .chipr{flex-wrap:wrap;gap:6px}
 .scroll-showreel #sc2 .chipr .ddwrap{flex:1 1 80px;min-width:0}
 .scroll-showreel #sc2 .chipr .chip{min-height:32px;padding-inline:6px}
 .scroll-showreel #sc2 .facet-trigger .chl{font-size:11px}
 .scroll-showreel #sc2 .tlviews,.scroll-showreel #sc2 .tlview{overflow:clip}
 /* Keep all classification tags on one row, including the longer EN/ET labels. */
 .scroll-showreel #sc2 .timeline-doccard .doccard-tags{flex-wrap:nowrap;gap:clamp(2px,.6vw,4px)}
 .scroll-showreel #sc2 .timeline-doccard .doc-classification-chip{font-size:clamp(7px,2vw,9px);padding:3px clamp(2px,.65vw,5px)}
 .scroll-showreel #sc2 .timeline-doccard .doc-add-tag{width:clamp(16px,4.8vw,20px);padding-inline:2px}
 /* Wide lists, Kanban and schedules scroll inside their own view, never the page. */
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen :is(.gantt-scroll,.kbn,#listv){max-width:100%;max-height:min(520px,75svh);overflow:auto!important;overscroll-behavior:auto!important;scrollbar-width:thin}
 .scroll-showreel .showreel-screen :is(.gantt,.plan-version-stack,.plan-schedule-footer,.issue-view-toolbar){min-width:0;max-width:100%}
 .scroll-showreel .showreel-screen .issue-view-toolbar{flex-wrap:wrap}
 .scroll-showreel .showreel-screen .kbn{grid-template-columns:repeat(3,minmax(210px,85%))}
 .scroll-showreel #sc7 .issues-head{display:flex;flex-wrap:wrap;align-items:flex-start}
 .scroll-showreel #sc7 .issues-primary-actions{margin-left:auto}
 .scroll-showreel #sc7 #mmBtn{min-height:32px;white-space:normal}
 /* Brief stays unboxed, with only the finding and actions shown on mobile. */
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen>#sc8{height:auto;display:flex}
 .scroll-showreel #sc8 .brief-layout{flex:none;grid-template-columns:minmax(0,1fr);overflow:visible}
 .scroll-showreel #sc8 .brief-requirements{display:none}
 .scroll-showreel #sc8 :is(.brief-conflict,.brief-document,.brief-task){overflow-wrap:anywhere;min-width:0}
 .scroll-showreel #sc8 .brief-footer{align-items:stretch}
 .scroll-showreel #sc8 .brief-action{white-space:normal;min-height:36px}
 /* Shared dialogs retain access to their full contents on short screens. */
 html:not(.product-showcase-embed) .scroll-showreel .scr :is(.idrw,.mmov,.mmd,.mmtime-list,.brief-demo){max-width:100%;overflow:auto!important;overscroll-behavior-y:auto!important}
 .scroll-showreel .showreel-screen .idrw{width:100%}
}

@media(max-width:860px){
 /* Keep two and a half or more document cards visible below the complete header and controls. */
 html:not(.product-showcase-embed) .scroll-showreel .showreel-screen>#sc2{height:auto;min-height:0}
 html:not(.product-showcase-embed) .scroll-showreel .scr #sc2>.tlviews{flex:none;height:460px;min-height:460px}
 /* Drawing gestures belong to Compare; the surrounding card retains page scrolling. */
 html:not(.product-showcase-embed) .scroll-showreel .scr #sc0 .cmp-plan-stage,
 html:not(.product-showcase-embed) .scroll-showreel .scr #sc0 .cmp-plan-stage *{touch-action:none!important}
}