/* ============================================================
   mobile.css — responsive pass for phones/tablets.
   Loaded LAST so it overrides. Desktop is unchanged above 860px.
   ============================================================ */

@media (max-width:860px){
  /* ---------- main calendar masthead ---------- */
  .app{padding:16px 14px 56px}
  .masthead{flex-direction:column;align-items:stretch;gap:14px}
  .brand .brandrow{gap:11px}
  .brand h1{font-size:24px}
  .logo-slot .logo-img{height:42px}
  .masthead .meta{justify-content:flex-start;gap:10px;flex-wrap:wrap}
  .top-action-btns{order:-1;width:100%}
  .top-act-btn.primary{flex:1}
  .schedule-link{font-size:12px}

  /* quote ribbon stacks */
  .quote-ribbon{flex-direction:column;align-items:flex-start;gap:10px;padding:13px 16px}
  .quote-ribbon .qr-today{flex-direction:row;align-items:baseline;gap:10px;padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:8px;width:100%}
  .quote-ribbon .qr-bigdate{font-size:21px}
  .quote-ribbon .qr-quote{align-items:flex-start;text-align:left}

  /* status bar wraps */
  .status-bar{flex-direction:column;align-items:flex-start;gap:12px}
  .status-stats{flex-wrap:wrap;gap:14px 20px}

  /* matrix: keep horizontal scroll, tighten the sticky label column */
  .grid{--label-w:128px;--col-w:46px}
  .grid .plabel .nm{font-size:11.5px}
  .matrix-top{flex-direction:column;align-items:flex-start;gap:10px}
  .legend{gap:10px}
  .grid-scroll{-webkit-overflow-scrolling:touch}
  /* make the scroll sliders chunkier for thumbs */
  .grid-slider{padding:10px 14px}
  .gs-range{height:22px}
  .gs-arrow{width:38px;height:38px}

  /* side panel becomes a bottom-anchored full-width sheet */
  .panel{width:100%;max-width:100%}

  /* ---------- schedule view ---------- */
  .out-mast{flex-direction:column;align-items:stretch;gap:12px}
  .out-controls{flex-direction:column;align-items:stretch;gap:12px}
  .ctrl-left,.ctrl-right{flex-wrap:wrap;justify-content:flex-start}
  #viewToggle{width:100%}
  #viewToggle button{flex:1}
  .out-actions{flex-wrap:wrap}

  /* week grid: let it scroll horizontally rather than crush 6 columns */
  .wk2-grid{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mo-grid{font-size:11px}

  /* ---------- manage patterns ---------- */
  .app-manage{padding:16px 14px 56px}
  .mg-mast{flex-direction:column;align-items:stretch;gap:12px}
  .mg-mast .right{justify-content:flex-start;flex-wrap:wrap}
  .mg-controls{flex-direction:column;align-items:stretch;gap:12px}
  .mg-row{flex-wrap:wrap;gap:10px}
  .mg-row .who{min-width:0;width:100%}
  .mg-days{width:100%}
  .mg-day{flex:1;min-width:42px}
  .mg-right{width:100%;justify-content:space-between;min-width:0}

  /* ---------- modals: near full-screen ---------- */
  .help-modal,.mine-modal{padding:0;align-items:stretch}
  .help-card,.mine-card,.mine-card.month{max-width:100%;max-height:100%;height:100%;border-radius:0;border:0}
  .help-body,.mine-body{padding:16px}

  /* My Schedule month grid: compact but readable; horizontal scroll fallback */
  .mine-grid{gap:4px}
  .mine-cell{min-height:62px;padding:5px 5px}
  .mc-date{font-size:13px}
  .mc-main{font-size:10px}
  .mc-sub{font-size:9px}
  .mc-loc,.mc-flag{font-size:7px}

  /* login card comfortable on phones */
  .cloud-login{padding:16px}
  .cloud-account{right:10px;bottom:10px;padding:5px 7px 5px 10px}
  .cloud-account .ca-email{max-width:120px}
}

@media (max-width:480px){
  .brand h1{font-size:21px}
  .quote-ribbon .qr-bigdate{font-size:19px}
  .quote-ribbon .qr-text{font-size:14px}
  /* month grid: 3 columns × stacked is unreadable; keep 6 but allow scroll */
  .mine-card.month .mine-body{overflow-x:hidden}
  .mine-grid{grid-template-columns:repeat(6,minmax(46px,1fr))}
  .status-stats .stat{font-size:12px}
  .status-stats .stat b{font-size:18px}
}