/* App-wide small-screen, forced-colours and print overrides. Loaded last so they win.
   Components with their own screen-size layout keep it in their file (compare, documents, levels,
   registers, forms, appearance). */
@media (max-width:56.25em){
  .bar-crumbs .bc-group,.bar-crumbs .bc-group + .sep{display:none} /* the menu shows the group */
  .bar-actions{margin-left:auto}
  .toolbar .legend{margin:0}
}
@media (max-width:45em),(max-height:28.75em){
  body{height:auto;overflow:visible;display:block}
  main{display:block;overflow:visible}
  .view-fill{height:auto;min-height:0}
  .map-scroll,.table-scroll{flex:none;height:75dvh}
  .hero-row,.ppt-grid,.msec{grid-template-columns:1fr !important;grid-template-rows:none !important}
  .tiles{grid-template-columns:1fr 1fr}
  .msec > .card{grid-column:auto !important;grid-row:auto !important}
  .cols{height:120px;flex:none}
}
@media (max-width:45em){
  .nav-sub{left:0;width:100%;border-left:0;box-shadow:none} /* the sub-menu covers the group list, with a Back row */
  .nav-back{display:inline-grid}
  .hours-opt small{display:none} /* the "(n of m timed)" note doesn't fit beside the switch on phones */
  :root{--pad:0.75rem;--detail-w:100vw !important}
  body.has-detail main{margin-right:0}
  .detail-resize{display:none}
  .bar{gap:var(--space-2)}
  .range-btn .rc-counts,.range-btn .rc-caret{display:none}
  .range-btn{padding:calc(0.25rem * var(--dz)) var(--space-2)}
  .filters select{max-width:none;flex:1}
  .filters label{flex:1 1 8.75rem}
  .filters label select{width:100%}
  .view-fill{height:calc(100dvh - var(--bar-h) - 1.5rem)}
  /* Charts pages stack their cards and the page scrolls; the big card keeps a screen's height */
  #view-metrics.view-fill:has(.msec-side:not([hidden])){height:auto}
  .msec-side{height:auto}
  .msec-side > .c-tools{height:85dvh}
  .msec-side > .c-tools > .tool-view{position:static;margin:var(--space-1) 0 var(--space-2)}
  .msec-side > .c-tools > h3:has(+ .tool-view){padding-right:0}
  .hero .value{font-size:var(--fs-5xl)}
  .stack-rows{grid-template-columns:minmax(90px,120px) 1fr auto}
  .bars{grid-template-columns:minmax(90px,130px) 1fr}
  .sipoc{grid-template-columns:1fr}
  .fstep{width:100%}
  .flow li{width:100%;flex-direction:column}
  .flow li:not(:last-child)::after{content:"↓"}
}
@media (forced-colors:active){
  .seg,.fill,.b,.meter span{forced-color-adjust:none}
}
@media print{
  .bar{position:static}
  .drawer,.scrim,.icon-btn,.filters,.pop{display:none}
  .view-fill{height:auto}
  .map-scroll,.table-scroll{overflow:visible}
  .view[hidden]{display:block !important}
}