/* Analytics, Contacts, Documents and Speech use the same fixed-size tablet as the other pages.
   Earlier rules let these frames grow with their content (or let content spill past the frame); here the frame keeps
   its standard height (header + --tablet-scene-height). On desktop the content is compacted to fit; on tablets,
   and wherever it still does not fit, it scrolls inside the frame. Phones (below 768px) keep the page-scroll layout.
   The Models page is intentionally NOT changed here: it keeps its own layout. */

/* Phones only: the page grids may shrink below the width of their content, so cards never run past the frame. */
@media(max-width:767px){
 body[data-section=models] .models-page,body[data-section=analytics] .analytics-page{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:768px){
 body[data-section=analytics] .analytics-page{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:650px){
 body[data-section=analytics] .analytics-filters .site-select{width:100%!important;max-width:none!important;min-width:0!important}
}
@media(min-width:768px){
 body:is([data-section=analytics],[data-section=contacts]) .tablet{height:calc(var(--tablet-header-height) + var(--tablet-scene-height) + 18px)!important;min-height:0!important}
 body:is([data-section=analytics],[data-section=contacts],[data-section=documents],[data-section=speech]) .tablet #main{height:var(--tablet-scene-height)!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important}
}
@media(min-width:1101px){
 /* Analytics: the three panels share the remaining height; a large confusion matrix scrolls inside its panel. */
 body[data-section=analytics] .analytics-page{height:100%!important;padding-top:10px!important;padding-bottom:12px!important;gap:8px!important}
 body[data-section=analytics] .analytics-heading h1{font-size:clamp(26px,2.4vw,36px)!important;margin-bottom:4px!important}
 body[data-section=analytics] .analytics-heading p{font-size:12.5px!important;line-height:1.5!important}
 body[data-section=analytics] .analytics-summary article{padding:8px 16px!important}
 body[data-section=analytics] .analytics-summary strong{font-size:26px!important}
 body[data-section=analytics] .analytics-overview #model-chart,body[data-section=analytics] .analytics-overview #confusion-chart{max-height:none!important}
 body[data-section=analytics] .analytics-overview .column-chart{height:calc(100% - 28px)!important}

 /* Contacts: the envelope picture gives up height before the form or the links do. */
 body[data-section=contacts] .contacts-page{height:100%!important;min-height:0!important}
 body[data-section=contacts] .contact-sidebar{grid-template-rows:minmax(110px,1fr) auto auto!important}
}

/* Header menu (shown on screens narrower than 1440px): coloured by the active theme instead of fixed blue. */
@media(max-width:1439px){
 body:not([data-section=home]) .header #navigation{background:color-mix(in srgb,var(--bg),var(--accent) 9%);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);box-shadow:0 14px 35px #0008,0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}
}

/* Analytics: ROC was never computed, so its always-empty panel and the "ROC-AUC" card are hidden and the two real panels get the width. */
body[data-section=analytics] .analytics-overview .analytics-roc,body[data-section=analytics] .analytics-summary article:nth-child(3){display:none}
body[data-section=analytics] .analytics-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:651px){
 body[data-section=analytics] .analytics-overview{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
}
body[data-section=analytics] .analytics-overview .column-label{overflow-wrap:break-word}
/* Documents and Speech: the "processed locally" note sits right under the upload area, as quiet helper text. */
.workspace .workspace-file-pane .workspace-privacy{margin-top:0;font-size:11px;line-height:1.5;color:var(--muted)}