/* v0.4.6 mobile layout and status coherence fixes */
.wl-session-shell{max-width:calc(100vw - 24px);overflow:hidden}
.wl-session-shell>*{min-width:0}
.wl-session-clock{overflow:hidden}
.wl-session-clock strong{white-space:nowrap}
.topbar-session.wl-rest-topbar strong{min-width:5.2ch;letter-spacing:0}
.status-dot.wl-paused{background:#8d987f;animation:none;box-shadow:none}

@media(max-width:560px){
  .wl-session-shell{
    grid-template-columns:minmax(0,1fr) auto auto auto;
    gap:5px;
    padding:6px;
  }
  .wl-session-shell button{min-height:42px;font-size:.72rem;padding-inline:8px}
  .wl-session-clock{padding-inline:9px}
  .wl-session-clock strong{font-size:.94rem}
  .wl-session-pause,.wl-session-finish{padding-inline:8px!important}
  .wl-session-tools{width:44px}

  /* Save/cloud states must never cover the session controls or record button. */
  .wl-save-status{
    top:auto!important;
    right:auto!important;
    left:12px!important;
    bottom:calc(164px + env(safe-area-inset-bottom))!important;
    z-index:34!important;
    max-width:154px!important;
    padding:7px 10px!important;
  }
  .wl-save-status{pointer-events:none}
  .wl-save-status strong{font-size:.66rem!important}
  .wl-cloud-button{
    top:auto!important;
    right:12px!important;
    bottom:calc(164px + env(safe-area-inset-bottom))!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    padding:0!important;
    overflow:hidden!important;
    font-size:0!important;
    z-index:34!important;
  }
  .wl-cloud-button::before{content:"☁";font-size:18px;line-height:1}

  .topbar-session.wl-rest-topbar{min-width:86px}
  .topbar-session.wl-rest-topbar strong{font-size:18px;min-width:5.2ch;line-height:1.05}
  .topbar-session.wl-rest-topbar small{font-size:8px}

  /* Keep two compact cards without allowing the numeric value to spill into +/- buttons. */
  .wl-ui-compact .input-stack{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .wl-ui-compact .number-input-card{min-width:0;overflow:hidden;padding:9px 8px}
  .wl-ui-compact .large-stepper{
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    gap:4px!important;
    width:100%;
    min-width:0;
    min-height:84px;
  }
  .wl-ui-compact .large-stepper>*{min-width:0!important;max-width:100%}
  .wl-ui-compact .large-step-button{width:auto!important;min-width:0!important;padding:3px!important;overflow:hidden}
  .wl-ui-compact .large-step-button>span{font-size:1.65rem!important;line-height:1}
  .wl-ui-compact .large-step-button>small{font-size:.54rem!important}
  .wl-ui-compact .number-display-button{min-width:0!important;overflow:hidden!important;padding:0 2px!important}
  .wl-ui-compact .number-display-line{justify-content:center;gap:3px;max-width:100%;min-width:0;overflow:hidden}
  .wl-ui-compact .number-display-line strong,
  .wl-ui-compact .number-display-button strong{
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:clip;
    font-size:clamp(1.82rem,7.4vw,2.2rem)!important;
    letter-spacing:-.045em!important;
  }
  .wl-ui-compact .number-display-line small{display:none!important}
}

@media(max-width:410px){
  .wl-session-shell{grid-template-columns:minmax(0,1fr) auto auto auto}
  .wl-session-shell button{font-size:.67rem;padding-inline:6px}
  .wl-session-tools{width:40px}
  .wl-ui-compact .large-stepper{grid-template-columns:37px minmax(0,1fr) 37px!important;gap:3px!important}
  .wl-ui-compact .number-display-line strong,
  .wl-ui-compact .number-display-button strong{font-size:clamp(1.72rem,7.5vw,2.05rem)!important}
}