/* SLPT-R28-B16UX6-MOBILE-UI-CONSOLIDATION-CSS-OWNERSHIP-20260827
   Canonical final mobile owner.
   Replaces B16UX4 + B16UX5 as one non-contradictory stylesheet.
   No DOM discovery. No runtime layout decoration.
*/

/* ================================================================
   PHONE
   ================================================================ */
@media (max-width:767px){

  /* --- dashboard safe geometry --- */
  #content .v192-dashboard{
    min-width:0!important;
    max-width:100%!important;
    padding-bottom:calc(118px + env(safe-area-inset-bottom))!important;
    scroll-padding-bottom:calc(118px + env(safe-area-inset-bottom))!important;
  }

  #content .v192-dashboard .v192-main-grid,
  #content .v192-dashboard .v192-panel{
    min-width:0!important;
    max-width:100%!important;
  }

  /* --- canonical mobile sidebar --- */
  #appView .sidebar,
  html[data-sidebar-collapsed="true"] #appView .sidebar{
    width:min(86vw,330px)!important;
    min-width:0!important;
    max-width:330px!important;
    padding:14px 12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  #appView .sidebar .sidebar-brand-row,
  html[data-sidebar-collapsed="true"] #appView .sidebar .sidebar-brand-row{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    min-height:48px!important;
    margin:0 0 10px!important;
    padding:0 4px!important;
  }

  #appView .sidebar .brand,
  html[data-sidebar-collapsed="true"] #appView .sidebar .brand{
    display:flex!important;
    width:auto!important;
    min-width:0!important;
    padding:5px 7px 8px!important;
    font-size:21px!important;
  }

  #appView .sidebar .nav,
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    margin-top:0!important;
  }

  #appView .sidebar .nav button,
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav button{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:11px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:46px!important;
    height:auto!important;
    margin:0!important;
    padding:9px 11px!important;
    text-align:left!important;
    font-size:13px!important;
    line-height:1.2!important;
    border-radius:12px!important;
  }

  #appView .sidebar .nav button span,
  #appView .sidebar .nav button span:last-child,
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav button span,
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav button span:last-child{
    display:inline-block!important;
    visibility:visible!important;
    opacity:1!important;
    position:static!important;
    width:auto!important;
    max-width:calc(100% - 46px)!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    clip:auto!important;
    clip-path:none!important;
    transform:none!important;
    text-indent:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:13px!important;
    font-weight:760!important;
    line-height:1.2!important;
    color:inherit!important;
    flex:1 1 auto!important;
  }

  #appView .sidebar .nav button .r23-nav-icon,
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav button .r23-nav-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    flex:0 0 30px!important;
    margin:0!important;
  }

  html.r233-sidebar-open #appView #mobileMenu{
    left:calc(min(86vw,330px) - 50px)!important;
    right:auto!important;
    top:max(14px,env(safe-area-inset-top))!important;
  }

  /* --- hero type --- */
  #content .v192-dashboard .v192-hero{
    box-sizing:border-box!important;
    min-height:0!important;
    padding:22px 20px 20px!important;
  }

  #content .v192-dashboard .v192-hero h1{
    margin:0!important;
    font-size:clamp(24px,7vw,28px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }

  #content .v192-dashboard .v192-hero p{
    margin:8px 0 0!important;
    max-width:100%!important;
    font-size:12.5px!important;
    line-height:1.4!important;
  }

  #content .v192-dashboard .v192-hero-chips{
    margin-top:13px!important;
  }

  #content .v192-dashboard .v192-hero-chips span{
    font-size:10px!important;
    line-height:1.2!important;
    padding:7px 10px!important;
  }

  /* --- Quick Access: 2 columns, contained internal geometry --- */
  #content .v192-dashboard .v192-quick-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:10px 8px!important;
    padding-top:16px!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #content .v192-dashboard .v192-quick{
    box-sizing:border-box!important;
    position:relative!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:114px!important;
    max-height:none!important;
    padding:24px 10px 11px!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:9px!important;
    row-gap:4px!important;
    align-content:center!important;
    align-items:start!important;
    overflow:visible!important;
  }

  #content .v192-dashboard .v192-quick::before{
    top:-12px!important;
    height:23px!important;
    pointer-events:none!important;
  }

  #content .v192-dashboard .v192-quick::after{
    top:-7px!important;
    height:16px!important;
    pointer-events:none!important;
  }

  #content .v192-dashboard .v192-quick-icon{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    margin:0!important;
  }

  #content .v192-dashboard .v192-quick-icon svg{
    width:15px!important;
    height:15px!important;
  }

  #content .v192-dashboard .v192-quick b{
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:13px!important;
    font-weight:780!important;
    line-height:1.12!important;
    letter-spacing:-.012em!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    text-wrap:balance;
  }

  #content .v192-dashboard .v192-quick small{
    grid-column:2!important;
    grid-row:2!important;
    align-self:start!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0 23px 0 0!important;
    font-size:10px!important;
    font-weight:500!important;
    line-height:1.28!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  #content .v192-dashboard .v192-quick>i{
    right:9px!important;
    bottom:9px!important;
    width:22px!important;
    height:22px!important;
    font-size:14px!important;
  }

  /* --- headline stats: exact 3-column geometry and true centered cells --- */
  #content .v192-dashboard .v192-metrics{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:0!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #content .v192-dashboard .v192-metric{
    box-sizing:border-box!important;
    position:relative!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    place-items:center!important;
    align-content:center!important;
    row-gap:7px!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:108px!important;
    max-height:none!important;
    margin:0!important;
    padding:12px 10px!important;
    text-align:center!important;
    overflow:hidden!important;
  }

  /* Canonical accent bar: visual only, never participates in alignment. */
  #content .v192-dashboard .v192-metric::before{
    content:""!important;
    position:absolute!important;
    left:8px!important;
    top:15px!important;
    bottom:15px!important;
    width:3px!important;
    border-radius:999px!important;
    background:var(--r27-stat-accent,var(--metric-accent,#38bdf8))!important;
    opacity:.95!important;
    pointer-events:none!important;
  }

  #content .v192-dashboard .v192-metric-copy{
    grid-row:1!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    place-items:center!important;
    align-content:end!important;
    row-gap:3px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:0 3px!important;
    margin:0!important;
    text-align:center!important;
  }

  #content .v192-dashboard .v192-metric-copy small{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:20px!important;
    margin:0!important;
    font-size:8.7px!important;
    font-weight:790!important;
    line-height:1.08!important;
    letter-spacing:.035em!important;
    text-transform:uppercase!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    text-wrap:balance;
  }

  #content .v192-dashboard .v192-metric-copy span{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:18px!important;
    margin:0!important;
    font-size:7.6px!important;
    font-weight:500!important;
    line-height:1.12!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance;
  }

  #content .v192-dashboard .v192-metric-primary{
    grid-row:2!important;
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  #content .v192-dashboard .v192-metric-icon{
    display:none!important;
  }

  #content .v192-dashboard .v192-metric-primary strong{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    font-size:19px!important;
    font-weight:780!important;
    line-height:1!important;
    letter-spacing:-.025em!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #content .v192-dashboard .v192-metric:nth-child(n+4){
    border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)!important;
  }

  /* --- upcoming sessions: mobile-specific typography only --- */
  #content .v192-dashboard .v192-schedule .panel-head h2{
    font-size:20px!important;
    line-height:1.12!important;
  }

  #content .v192-dashboard .v192-schedule .panel-head small{
    font-size:10.5px!important;
    line-height:1.25!important;
  }

  #content .v192-dashboard .v192-session-row{
    box-sizing:border-box!important;
    grid-template-columns:72px minmax(0,1fr) auto!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
    padding:10px 9px!important;
  }

  #content .v192-dashboard .v192-session-time b{
    font-size:13px!important;
    line-height:1.05!important;
  }

  #content .v192-dashboard .v192-session-time small{
    font-size:9px!important;
    line-height:1.15!important;
  }

  #content .v192-dashboard .v192-session-copy{
    min-width:0!important;
  }

  #content .v192-dashboard .v192-session-copy b{
    font-size:13px!important;
    line-height:1.15!important;
  }

  #content .v192-dashboard .v192-session-copy small{
    font-size:9.5px!important;
    line-height:1.2!important;
  }

  #content .v192-dashboard .v192-session-status{
    font-size:8.5px!important;
    padding:6px 7px!important;
  }

  /* --- Business Focus: 2 columns, content-safe --- */
  #content .v192-dashboard .r252-business-focus{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:8px!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #content .v192-dashboard .r252-business-focus article{
    box-sizing:border-box!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:96px!important;
    max-height:none!important;
    padding:11px 10px!important;
    gap:4px!important;
    overflow:hidden!important;
  }

  #content .v192-dashboard .r252-business-focus small{
    font-size:9px!important;
    line-height:1.12!important;
    letter-spacing:.045em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  #content .v192-dashboard .r252-business-focus b{
    font-size:17px!important;
    line-height:1.05!important;
  }

  #content .v192-dashboard .r252-business-focus span{
    font-size:9px!important;
    line-height:1.25!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* --- bottom KPIs: exact 3-column centered cells --- */
  #content .v192-dashboard .r252-dashboard-ops{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:7px!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #content .v192-dashboard .r252-dashboard-ops .r252-op{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    place-items:center!important;
    align-content:center!important;
    row-gap:3px!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:92px!important;
    max-height:none!important;
    padding:10px 7px!important;
    text-align:center!important;
    overflow:hidden!important;
  }

  #content .v192-dashboard .r252-dashboard-ops .r252-op small{
    width:100%!important;
    min-width:0!important;
    min-height:19px!important;
    font-size:8.3px!important;
    font-weight:770!important;
    line-height:1.08!important;
    letter-spacing:.025em!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance;
  }

  #content .v192-dashboard .r252-dashboard-ops .r252-op b{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important;
    font-weight:780!important;
    line-height:1.05!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #content .v192-dashboard .r252-dashboard-ops .r252-op span{
    width:100%!important;
    min-width:0!important;
    min-height:17px!important;
    font-size:7.5px!important;
    line-height:1.12!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* --- Program Editor static mobile containment --- */
  .advanced-builder.r27-option1-builder{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .r27-option1-builder #builderCanvas.r27-option1-canvas,
  .r27-option1-block-body,
  .r27-option1-session-stage,
  .r27-option1-session-list,
  .r27-option1-session-card.selected,
  .r27-option1-inline-editor,
  .r27-option1-exercise-stack,
  .r27-option1-exercise-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
  }

  .r27-option1-builder #builderCanvas.r27-option1-canvas,
  .r27-option1-block-body,
  .r27-option1-session-stage,
  .r27-option1-session-card.selected,
  .r27-option1-inline-editor,
  .r27-option1-exercise-stack,
  .r27-option1-exercise-card{
    overflow:visible!important;
  }

  .r27-option1-block-body{display:block!important}

  .r27-option1-week-rail{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    margin-bottom:10px!important;
  }

  .r27-option1-week-list{
    display:flex!important;
    width:max-content!important;
    min-width:100%!important;
    max-width:none!important;
    overflow:visible!important;
  }

  .r27-option1-session-stage,
  .r27-option1-session-card.selected,
  .r27-option1-inline-editor{
    display:block!important;
    position:static!important;
  }

  .r27-option1-session-list{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
  }

  .r27-option1-exercise-stack,
  .r27-option1-exercise-stack.is-collapsed{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }

  .r27-option1-add-exercise-bottom,
  .r27-option1-add-exercise-bottom.is-collapsed{
    display:block!important;
    width:100%!important;
    min-height:44px!important;
  }

  #r27Option1ToggleExercises{display:none!important}

  .r27-option1-prescription{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .r27-option1-notes{grid-column:1/-1!important}

  .r27-option1-builder .r27-option1-session-details{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    position:static!important;
  }
}

/* Compact phones keep structure and reduce only typography/geometry. */
@media (max-width:390px){
  #content .v192-dashboard .v192-hero h1{font-size:23px!important}
  #content .v192-dashboard .v192-hero p{font-size:12px!important}

  #content .v192-dashboard .v192-quick{
    min-height:110px!important;
    padding:23px 9px 10px!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    column-gap:7px!important;
  }
  #content .v192-dashboard .v192-quick-icon{
    width:28px!important;height:28px!important;min-width:28px!important;
  }
  #content .v192-dashboard .v192-quick b{font-size:12px!important}
  #content .v192-dashboard .v192-quick small{font-size:9px!important;line-height:1.24!important}

  #content .v192-dashboard .v192-metric{
    min-height:104px!important;
    padding:11px 8px!important;
  }
  #content .v192-dashboard .v192-metric-copy small{
    font-size:8.1px!important;
    letter-spacing:.02em!important;
  }
  #content .v192-dashboard .v192-metric-copy span{font-size:7.1px!important}
  #content .v192-dashboard .v192-metric-primary strong{font-size:18px!important}

  #content .v192-dashboard .r252-dashboard-ops .r252-op{
    min-height:88px!important;
    padding:9px 5px!important;
  }
  #content .v192-dashboard .r252-dashboard-ops .r252-op small{font-size:7.8px!important}
  #content .v192-dashboard .r252-dashboard-ops .r252-op b{font-size:15px!important}
  #content .v192-dashboard .r252-dashboard-ops .r252-op span{font-size:7.1px!important}
}

/* ================================================================
   TABLET: typography is intentionally independent from phone/desktop.
   Existing structural tablet layout remains authoritative.
   ================================================================ */
@media (min-width:768px) and (max-width:1024px){
  #content .v192-dashboard .v192-hero h1{
    font-size:30px!important;
    line-height:1.1!important;
  }
  #content .v192-dashboard .v192-hero p{font-size:13px!important}
  #content .v192-dashboard .v192-quick b{font-size:13.5px!important;line-height:1.15!important}
  #content .v192-dashboard .v192-quick small{font-size:10px!important;line-height:1.3!important}
  #content .v192-dashboard .v192-metric-copy small{font-size:10px!important}
  #content .v192-dashboard .v192-metric-copy span{font-size:9px!important}
  #content .v192-dashboard .v192-metric-primary strong{font-size:20px!important}
}

@media (max-width:520px){
  .r27-option1-prescription,
  .r27-option1-more-grid,
  .r27-option1-alternate,
  .r27-option1-follower-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .r27-option1-prescription label,
  .r27-option1-notes,
  .r27-option1-alternate label,
  .r27-option1-follower-grid label{
    grid-column:1!important;
  }

  .r27-option1-single-toggle{
    max-width:100%!important;
    white-space:normal!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #appView .sidebar,
  #appView .sidebar *,
  #content .v192-dashboard *,
  .r27-option1-builder *{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}