/* VENISIA MOBILE REFINE V2 — progressive visual enhancement over HOTFIX V1.
   No changes to forms, nav targets, account balances or device commands. */
@media (max-width: 767px) {
  body.vs-active { overflow-x: clip; }
  body.vs-active .main-area,
  body.vs-active main.content { box-sizing:border-box; min-width:0; }
  body.vs-active .main-area .topbar { padding-block: 12px; }
  body.vs-active .main-area .topbar h1 {font-size:clamp(1.15rem,5vw,1.5rem);line-height:1.35;}
  body.vs-active .topbar .pill,
  body.vs-active .vs-newsline,
  body.vs-active .alert { max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
  body.vs-active .vs-newsline { align-items:baseline; }
  body.vs-active .vs-newsline span { flex-basis:100%; }
  /* Give both the real Dashboard and the enhanced quick navigation a clear hierarchy. */
  body.vs-active.vs-route-dashboard #vi-page-experience-v4 { margin-bottom: 14px; }
  body.vs-active.vs-route-dashboard #vi-page-experience-v4 .vi4-hero { padding:16px; border-radius:20px; }
  body.vs-active.vs-route-dashboard #vi-page-experience-v4 .vi4-title {font-size:1.25rem;line-height:1.5;}
  body.vs-active.vs-route-dashboard #vi-page-experience-v4 .vi4-sub {font-size:.8rem;line-height:1.65;}
  body.vs-active.vs-route-dashboard #vi-page-experience-v4 .vi4-grid { gap:9px; margin-top:13px; }
  body.vs-active.vs-route-dashboard #vi-page-experience-v4 .vi4-tile {
     min-height:62px; padding:10px; border-radius:14px; align-items:center; gap:8px;
  }
  body.vs-active.vs-route-dashboard #vi-page-experience-v4 .vi4-tile:focus-visible {outline:2px solid #e8cf8a;outline-offset:2px;}
  body.vs-active.vs-route-dashboard #vi-page-experience-v4 .vi4-tile span:last-child {font-size:.8rem;}
  body.vs-active.vs-route-dashboard main.content>.intro {margin-block:12px 14px!important;padding:16px!important;}
  body.vs-active.vs-route-dashboard main.content>.intro h1 {font-size:1.4rem;line-height:1.5;}
  body.vs-active.vs-route-dashboard main.content>.intro p {font-size:.82rem;line-height:1.7;}
  body.vs-active .metrics { gap:10px!important; }
  body.vs-active .metric { padding:15px!important; min-height:100px!important; }
  body.vs-active .metric>strong {font-size:clamp(1.35rem,6vw,1.8rem);}
  body.vs-active .heading-row {gap:8px;}
  body.vs-active .heading-row>* {min-width:0;}
  body.vs-active .panel {margin-block:12px!important;padding:15px!important;}
  body.vs-active .panel h2 {overflow-wrap:anywhere;line-height:1.5;}
  body.vs-active .table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
  body.vs-active .table-scroll table { min-width:max-content; }
  /* Permit necessary table horizontal scroll without making the whole page scroll sideways. */
  body.vs-active .form-grid { min-width:0; }
  body.vs-active .form-grid :is(input,select,textarea) { max-width:100%; box-sizing:border-box; }
  /* Do not obscure content and controls with the keyboard-search launcher. */
  body.vs-active #vi-command-center-v3 .vi-launch {width:42px;height:42px;min-width:42px;min-height:42px;}
  body.vs-active #vi-command-center-v3 {bottom:calc(10px + env(safe-area-inset-bottom))!important;left:max(9px,env(safe-area-inset-left))!important;}
  body.vs-active .vs-mobile-toggle {bottom:calc(10px + env(safe-area-inset-bottom))!important;}
}
@media (max-width: 359px) {
  body.vs-active #vi-page-experience-v4 .vi4-grid {grid-template-columns:minmax(0,1fr)!important;}
}
@media (prefers-reduced-motion: reduce) {
  body.vs-active #vi-page-experience-v4 .vi4-tile {transition:none!important;}
}