/*
 * Dapur Guru V2.3.1 R5.2 — Visual Pixel Alignment & Mobile Polish
 * Baseline: R5 visual lock + R5.1 production verifier hotfix.
 * Scope: presentation only. No backend, route, database, queue or renderer contract changes.
 */

/* Landing: closer proportions to the approved master reference. */
.r5-visual-lock .vl-nav-inner{height:4.35rem}
.r5-visual-lock .vl-hero-grid{
  min-height:31.5rem;
  grid-template-columns:minmax(0,1.04fr) minmax(390px,.86fr);
  gap:2rem;
  padding-top:1.7rem;
  padding-bottom:1.9rem;
}
.r5-visual-lock .vl-hero h1{
  max-width:32.5rem;
  margin:.82rem 0 .68rem;
  font-size:clamp(2.5rem,3.7vw,3.8rem);
  line-height:.99;
  letter-spacing:-.052em;
}
.r5-visual-lock .vl-hero p{max-width:34.5rem;line-height:1.62}
.r5-visual-lock .vl-portrait-stage{min-height:27.5rem}
.r5-visual-lock .vl-portrait-orbit{width:min(25rem,84%)}
.r5-visual-lock .vl-ai-card{right:.65rem;top:5rem}
.r5-visual-lock .vl-stat-float{left:.3rem;bottom:.35rem}

/* Auth: reference uses a slightly stronger left panel and a tighter form column. */
.r5-visual-lock .auth-shell.vl-auth-shell{grid-template-columns:minmax(350px,43%) minmax(0,57%)}
.r5-visual-lock .vl-auth-shell .auth-art{padding:2.35rem clamp(2rem,3vw,3.35rem)}
.r5-visual-lock .vl-auth-shell .auth-art-copy{margin-top:clamp(4.2rem,10.5vh,6.2rem)}
.r5-visual-lock .vl-auth-shell .auth-art-copy h1{font-size:clamp(1.9rem,2.55vw,2.8rem)}
.r5-visual-lock .vl-auth-shell .auth-panel{padding:2.2rem clamp(2.3rem,5.3vw,5.8rem)}
.r5-visual-lock .vl-auth-shell .auth-box,
.r5-visual-lock .vl-auth-shell .auth-box-register{width:min(27.5rem,100%)}

/* Dashboard: master reference keeps greeting clean; utility destinations remain in sidebar. */
.r5-visual-lock .r52-dashboard-greeting{margin-bottom:.78rem}
.r5-visual-lock .r52-dashboard-greeting .ws-head-actions{display:none!important}
.r5-visual-lock .vl-content{padding:1.2rem 1.35rem 1.8rem}
.r5-visual-lock .vl-stat-grid{gap:.7rem;margin-bottom:.78rem}
.r5-visual-lock .vl-board{margin-top:.72rem;gap:.75rem}
.r5-visual-lock .vl-lower-grid{margin-top:.75rem;gap:.75rem}

@media (max-width:1180px){
  .r5-visual-lock .vl-hero-grid{grid-template-columns:minmax(0,1fr) minmax(350px,.82fr);min-height:29.5rem;gap:1.2rem}
  .r5-visual-lock .vl-portrait-orbit{width:min(23rem,84%)}
}

@media (max-width:900px){
  .r5-visual-lock .vl-hero-grid{grid-template-columns:1fr;min-height:auto;gap:.25rem;padding-top:1.65rem}
  .r5-visual-lock .vl-portrait-stage{min-height:23.5rem}
  .r5-visual-lock .vl-content{width:100%;max-width:100%;min-width:0;overflow-x:hidden;padding:.88rem .82rem 1.45rem}
  .r5-visual-lock .r52-dashboard-greeting{display:block;min-width:0}
  .r5-visual-lock .vl-stat-grid,
  .r5-visual-lock .vl-board,
  .r5-visual-lock .vl-lower-grid,
  .r5-visual-lock .vl-panel,
  .r5-visual-lock .vl-quick-grid{min-width:0;max-width:100%}
}

@media (max-width:640px){
  html,body.r5-visual-lock{max-width:100%;overflow-x:hidden}
  .r5-visual-lock .vl-nav-inner{height:4rem}
  .r5-visual-lock .dg-container{width:calc(100% - 20px)}

  /* Landing mobile mirrors the reference: copy first, compact stats, no oversized portrait. */
  .r5-visual-lock .vl-hero-grid{padding-top:1.3rem;padding-bottom:1.35rem}
  .r5-visual-lock .vl-hero-copy{padding-left:0}
  .r5-visual-lock .vl-hero h1{font-size:clamp(2rem,10.1vw,2.8rem);max-width:20rem;margin:.72rem 0 .58rem}
  .r5-visual-lock .vl-hero p{font-size:.79rem;line-height:1.58}
  .r5-visual-lock .vl-actions{gap:.5rem;margin-top:.9rem}
  .r5-visual-lock .vl-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;margin-top:.75rem}
  .r5-visual-lock .vl-trust span{white-space:nowrap;font-size:.56rem}
  .r5-visual-lock .vl-portrait-stage{min-height:auto;margin-top:.65rem;display:block}
  .r5-visual-lock .vl-portrait-orbit,
  .r5-visual-lock .vl-ai-card{display:none!important}
  .r5-visual-lock .vl-stat-float{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;
    width:100%!important;min-width:0!important;margin:.15rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .r5-visual-lock .vl-stat-float div{min-width:0;padding:.58rem .25rem}
  .r5-visual-lock .vl-stat-float strong{font-size:.96rem}
  .r5-visual-lock .vl-stat-float small{font-size:.52rem;white-space:nowrap}

  /* Auth mobile: compact form card with stable viewport width. */
  .r5-visual-lock .vl-auth-shell .auth-panel{padding:0 .75rem 1.25rem}
  .r5-visual-lock .vl-auth-shell .auth-mobile-head{height:4.35rem}
  .r5-visual-lock .vl-auth-shell .auth-box,
  .r5-visual-lock .vl-auth-shell .auth-box-register{margin:.72rem auto 0;padding:1.12rem;border-radius:.95rem;max-width:100%;box-sizing:border-box}
  .r5-visual-lock .vl-auth-shell .auth-heading{margin-bottom:1rem}
  .r5-visual-lock .vl-auth-shell .auth-heading h2{font-size:1.55rem}

  /* Dashboard mobile: approved 2x2 stats + 2x3 feature grid, zero horizontal overflow. */
  .r5-visual-lock .vl-content{width:100%;max-width:100%;min-width:0;padding:.72rem .62rem 1.2rem;overflow-x:hidden}
  .r5-visual-lock .r52-dashboard-greeting{margin-bottom:.65rem}
  .r5-visual-lock .r52-dashboard-greeting h1{font-size:1.05rem;line-height:1.18;overflow-wrap:anywhere}
  .r5-visual-lock .r52-dashboard-greeting p{font-size:.65rem;margin-top:.18rem}
  .r5-visual-lock .r52-dashboard-greeting .ws-head-actions{display:none!important}
  .r5-visual-lock .vl-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.45rem;margin-bottom:.62rem}
  .r5-visual-lock .vl-stat-card{min-width:0;min-height:4.4rem;padding:.58rem .62rem;gap:.5rem;border-radius:.72rem}
  .r5-visual-lock .vl-stat-icon{width:2rem;height:2rem;flex:0 0 2rem}
  .r5-visual-lock .vl-stat-number{font-size:1rem}
  .r5-visual-lock .vl-stat-label{font-size:.54rem;white-space:normal}
  .r5-visual-lock .vl-board,
  .r5-visual-lock .vl-lower-grid{grid-template-columns:minmax(0,1fr)!important;gap:.6rem;margin-top:.6rem;width:100%;max-width:100%}
  .r5-visual-lock .vl-panel{width:100%;max-width:100%;min-width:0;padding:.68rem;border-radius:.78rem;overflow:hidden;box-sizing:border-box}
  .r5-visual-lock .vl-panel-head{gap:.4rem;margin-bottom:.58rem}
  .r5-visual-lock .vl-panel-head h2{font-size:.68rem}
  .r5-visual-lock .vl-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.42rem;width:100%}
  .r5-visual-lock .vl-quick{min-width:0;min-height:5.45rem;padding:.55rem .5rem;border-radius:.68rem;overflow:hidden}
  .r5-visual-lock .vl-quick-icon{width:1.75rem;height:1.75rem;margin-bottom:.38rem}
  .r5-visual-lock .vl-quick strong{font-size:.61rem;line-height:1.2;overflow-wrap:anywhere}
  .r5-visual-lock .vl-quick small{font-size:.5rem;line-height:1.3;overflow-wrap:anywhere}
  .r5-visual-lock .vl-chart-wrap{height:6.5rem;padding:.6rem .15rem .25rem}
  .r5-visual-lock .vl-chart-labels{font-size:.43rem}
  .r5-visual-lock .vl-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Keep 2x2 stat cards even on compact phones; the master reference uses this layout. */
@media (max-width:390px){
  .r5-visual-lock .vl-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r5-visual-lock .vl-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r5-visual-lock .vl-content{padding-left:.5rem;padding-right:.5rem}
  .r5-visual-lock .vl-stat-card{padding:.5rem;gap:.4rem}
  .r5-visual-lock .vl-stat-icon{width:1.8rem;height:1.8rem;flex-basis:1.8rem}
  .r5-visual-lock .vl-stat-number{font-size:.92rem}
  .r5-visual-lock .vl-stat-label{font-size:.5rem}
}

@media (prefers-reduced-motion:reduce){
  .r5-visual-lock *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}