/* Final UI prototype hardening for mobile/tablet/desktop review. */
html{scrollbar-gutter:stable}
body{overflow-x:hidden}
#app{min-height:100vh}
.mobile-shell,.screen,.service-grid,.list,.card,.chat-shell,.form{min-width:0}
.service-card>*{min-width:0}
.service-card h4,.service-card p,.list-row h4,.list-row p,.summary-row span,.summary-row strong{overflow-wrap:anywhere}
.progress{overflow-x:auto;overscroll-behavior-inline:contain;padding:4px 2px 8px;scrollbar-width:none}.progress::-webkit-scrollbar{display:none}.progress>.step{flex:0 0 46px}.progress>.progress-line{min-width:18px}
.review-panel{max-height:min(76vh,640px);overflow:auto;overscroll-behavior:contain}
.review-switcher{max-width:calc(100vw - 28px)}
.ui-modal,.ui-bottom-sheet{max-height:calc(100dvh - 24px);overflow:auto}
body.ui-overlay-open{overflow:hidden;touch-action:none}
.desktop-shell{min-width:0}.desk-main,.desktop-grid,.desk-card{min-width:0}
.metric strong,.desk-card h3,.exception strong{overflow-wrap:anywhere}
@media(max-width:380px){
  .screen{padding-left:16px;padding-right:16px}
  .hero-title{font-size:30px}
  .service-grid{gap:8px}
  .service-card{padding:11px;gap:8px;min-height:102px}
  .service-icon{width:42px;height:42px;flex-basis:42px}
  .service-icon svg{width:25px;height:25px}
  .bottom-nav{padding-left:8px;padding-right:8px}
  .nav-item{font-size:9px}
  .summary-row.total strong{font-size:20px}
  .review-mode-banner{font-size:9px;max-width:72vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:431px) and (max-width:900px){
  .mobile-shell{max-width:560px}
  .bottom-nav{width:min(100%,560px)}
}
@media(max-width:900px){
  .desktop-shell{display:block}
  .side{position:static;height:auto;padding:14px;overflow-x:auto}
  .side .brand-lockup{margin:0 0 12px}
  .side-nav{flex-direction:row;min-width:max-content}
  .side-nav button{white-space:nowrap}
  .desk-main{padding:18px 16px 44px}
  .desk-head{gap:12px;align-items:center}
  .desk-head h1{font-size:24px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desktop-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .desk-head{align-items:flex-start;flex-direction:column}
  .metric-grid{grid-template-columns:1fr}
  .exception{grid-template-columns:1fr auto;gap:8px}
  .exception .severity{grid-column:1}.exception strong{grid-column:1}.exception>span:not(.severity){grid-column:2;grid-row:1}.exception-action{grid-column:2;grid-row:2}
  .chart{overflow-x:auto}
}
@media(hover:hover){.service-card:hover,.list-row:hover{border-color:rgba(32,216,239,.42)}.btn:not([disabled]):hover{filter:brightness(.99)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}