/* =====================================================================
   mobile.css: a polished phone experience (up to 860px wide).
   Clear glass cards, comfortable touch targets, calm spacing, safe areas
   for notched phones, and gentle press feedback. Loads last.
   ===================================================================== */
@media (max-width:860px){
  :root{--m-gap:14px;--m-radius:24px;--m-glass:rgba(20,26,36,.78)}
  html{-webkit-text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}

  /* calm glass cards with a soft blur that a phone handles well */
  .st-card,.panel,.stat,.hero,.hm-side,.wx-panel,.card,.gstage,.sk-kpi,.pc-card,.ach,.bk-card{
    border-radius:var(--m-radius)!important;
    background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.01)),var(--m-glass)!important;
    -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
    border:1px solid rgba(255,255,255,.09)!important;
    box-shadow:0 18px 40px -22px rgba(0,0,0,.7)!important;
  }
  .view{padding:calc(env(safe-area-inset-top,0px) + 64px) 14px calc(env(safe-area-inset-bottom,0px) + 96px)!important}
  .view > *{margin-bottom:var(--m-gap)}

  /* the menu button: a clear round glass button in the corner */
  #menuBtn,.menu-btn,.hamburger{width:46px!important;height:46px!important;border-radius:16px!important;
    display:grid!important;place-items:center;background:var(--m-glass)!important;border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}

  /* big, comfortable touch targets */
  .btn,button.primary,.gm-btn,.hero button,.cta,.w-btn{min-height:52px;font-size:16px}
  .chip,.mode,.navbtn{min-height:44px}
  .chip{padding:10px 14px!important;font-size:14px}
  .chip:active,button:active,.navbtn:active,.st-card:active,.panel:active{transform:scale(.97);transition:transform .12s ease}

  /* type scale for small screens */
  h1{font-size:clamp(30px,9vw,40px)!important;line-height:1.1}
  h2{font-size:19px}
  .eyebrow{font-size:10px;letter-spacing:.16em}

  /* the timer ring fits the width */
  .ring,.timer-ring,#ring{width:min(74vw,300px)!important;height:min(74vw,300px)!important}

  /* form controls are comfortable to use */
  input,select,textarea{font-size:16px!important;min-height:46px}

  /* the sound mixer stacks neatly */
  #mix{padding:12px}
  #mix .mixrow{grid-template-columns:auto 1fr 40px}
}

/* respect safe areas on notched phones */
@supports (padding:max(0px)){
  @media (max-width:860px){
    .nav{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  }
}

@media (max-width:860px){
  /* the small card titles (like "Focus & Tea Timer") stay compact on phones */
  .top h1,.card-title,.panel-title{font-size:13px!important;letter-spacing:.2em!important;line-height:1.2;font-family:'Inter',system-ui,sans-serif!important;font-weight:700!important}
  .top{gap:8px}
}