/* Phone-first refinements. Loaded AFTER base.css + components.css.
   Every rule is scoped to a media query -- desktop layout is untouched. */

/* ============ phones (<= 640px) ============ */
@media (max-width: 640px){

  /* keep the page from ever scrolling sideways */
  html, body{overflow-x:hidden}
  body{-webkit-tap-highlight-color:transparent}

  /* ---------- header ---------- */
  header.top{top:0}
  .top .wrap{gap:10px; height:56px}
  .logo{font-size:15px; gap:8px}
  .logo .mark{width:28px; height:28px; font-size:15px}
  .logo small{display:none}          /* subtitle drops on phones */
  .who{display:none}                 /* the identity block is chrome, not action */
  .authbtn{padding:9px 14px; font-size:13px; min-height:40px}

  /* ---------- hero + stat strip ---------- */
  .hero{padding:20px 0 4px}
  .hero h1{font-size:20px; letter-spacing:-.015em}
  .hero p{font-size:13px; line-height:1.5}
  .stats{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:14px 0 2px; padding:2px 0 8px;
  }
  .stats::-webkit-scrollbar{display:none}
  .stat{flex:0 0 auto; min-width:118px; scroll-snap-align:start; padding:10px 13px}
  .stat b{font-size:18px}
  .stat span{font-size:10.5px}

  /* ---------- sub-nav ---------- */
  .subnav{top:56px; margin-top:14px}
  .tabbar{padding:8px 0 2px; gap:4px}
  .ptab{padding:9px 14px; font-size:14px; min-height:40px; gap:8px}
  .ptab .n{font-size:11.5px; padding:1px 7px}

  /* toolbar: seg + filter share row 1, search + sort share row 2 */
  .toolrow{gap:8px; padding:6px 0 10px}
  .toolrow .grow{display:none}         /* no push-spacer on mobile */
  .seg{padding:2px}
  .seg button{padding:8px 10px; font-size:12.5px; gap:5px; min-height:36px}
  .seg button svg{width:14px; height:14px}
  .filter{flex:0 0 auto}
  .filter-btn{padding:8px 12px; font-size:12.5px; min-height:36px; gap:6px}
  .filter-btn svg{width:14px; height:14px}
  .filter-btn .chev{width:12px; height:12px}
  .filtermenu{
    min-width:220px;
    max-width:calc(100vw - 32px);
    /* if filter sits on the right side of row 1, keep menu on-screen */
    left:auto; right:0;
  }
  .ctl{flex:1 1 100%; width:100%; gap:8px}
  .ctl input{flex:1; width:auto; min-height:40px; font-size:14px; padding:9px 12px}
  .ctl select{min-height:40px; font-size:13px; padding:8px 10px}

  /* ---------- main content ---------- */
  main{padding:16px 0 80px}
  .footer-note{font-size:11.5px; padding:20px 0 8px}

  /* ---------- timeline ---------- */
  .month{margin:22px 2px 10px; scroll-margin-top:190px}
  .month h2{font-size:14px}
  .tl{padding-left:22px}
  .tl::before{left:5px}
  .tl .node::before{left:-22px; top:18px; width:10px; height:10px; border-width:2px}

  /* month rail already becomes a horizontal scroller at 820px --
     bleed it edge-to-edge on phones so it can scroll cleanly */
  .monthrail{margin:0 -20px 8px; padding:0 20px 8px}
  .rl{padding:8px 12px; font-size:12.5px; min-height:36px}

  /* ---------- grid ---------- */
  .grid{grid-template-columns:1fr; gap:12px}

  /* ---------- post card ---------- */
  .post .head{padding:12px 14px 6px; gap:10px}
  .post .av{width:38px; height:38px; font-size:14px}
  .post .id b{font-size:14px}
  .post .id .sub{
    max-width:none; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .badges{gap:4px}
  .pill{font-size:10.5px; padding:2px 8px}
  .post .body{padding:2px 14px 10px; font-size:13.5px}
  .post .body.clamp{-webkit-line-clamp:6}
  .more{padding:0 14px 10px}
  .media{padding:0 14px 12px; gap:6px}
  .media img{height:auto; max-height:240px; width:100%; object-fit:cover}
  .foot{padding:10px 14px; gap:14px; font-size:12px; flex-wrap:wrap}
  .foot .lk{margin-left:auto}

  /* ---------- pipeline ---------- */
  .pipe-head{margin:4px 2px 12px}
  .pipe-head h2{font-size:15px}
  .pip-sum{gap:10px 14px; padding:12px}
  .plan{grid-template-columns:1fr; gap:12px}
  .card-plan{padding:14px}
  .card-plan h3{font-size:14px}
  .card-plan .ctrls{gap:6px}
  .card-plan select,
  .card-plan input[type=date]{min-height:38px; font-size:13px}
  .card-plan textarea{font-size:13px}

  /* ---------- calendar ---------- */
  .cal-top{gap:8px; margin:2px 2px 12px}
  .cal-top h2{font-size:16px; min-width:0; flex:1 1 100%; order:-1}
  .cal-nav{gap:6px}
  .cal-nav button{width:40px; height:40px; font-size:16px}
  .cal-today{height:40px; padding:0 12px; font-size:13px}

  .cal{gap:3px}
  .cal .dow{font-size:9.5px; padding-bottom:0; letter-spacing:.04em}
  .cal .cell{min-height:64px; padding:5px 3px; gap:3px; border-radius:7px}
  .cal .dn{font-size:11px}
  .cal .ev{font-size:10px; padding:2px 4px; gap:3px; border-radius:4px; line-height:1.15}
  .cal .ev .dot{width:5px; height:5px}
  .cal-legend{font-size:11.5px; gap:10px 14px; margin-top:14px}
  .cal-hint{font-size:12px}
  .unscheduled{margin-top:10px; gap:6px}
  .chip-draft{font-size:12px; padding:8px 12px; min-height:36px}

  /* ---------- overlay: bottom sheet on phones ---------- */
  .ov{padding:0; align-items:flex-end}
  .ov .panel,
  .ov .panel.wide{
    max-width:none; width:100%;
    max-height:92vh;
    border-radius:14px 14px 0 0;
    border-left:0; border-right:0; border-bottom:0;
  }
  .ov .ph{padding:12px 14px}
  .ov .ph b{font-size:14px}
  .ov .x{width:36px; height:36px; font-size:17px}
  .ov .pb{padding:12px 14px 20px; gap:10px}

  /* ---------- draft workspace ---------- */
  /* editor is already the first grid child, so it lands on top when .dw
     collapses to one column (components.css does that at <=900px). */
  .dw-top{gap:8px; margin-bottom:12px}
  .dw-top h2{font-size:16px; min-width:0; flex:1 1 200px}
  .dw-top .btn{min-height:40px; padding:9px 12px}
  .dw-top select,
  .dw-top input[type=date]{min-height:40px; padding:8px 10px; font-size:13px}
  .dw{gap:14px}
  .dw .panel-c{padding:14px}
  .dw textarea{min-height:44vh; font-size:15px; line-height:1.55; padding:12px}
  .dw .meter{gap:8px; font-size:12px}
  .dw .bar{min-width:80px}
  /* the two action buttons ("Check", "Save revision") are wrapped in an inline
     span[style="margin-left:auto; display:flex; gap:8px"] -- override so they
     drop to their own full-width row and reach 44px tall for the thumb */
  .dw .meter > span[style*="margin-left"]{
    margin-left:0 !important; width:100%; flex-basis:100%;
  }
  .dw .meter > span[style*="margin-left"] .btn{
    flex:1; min-height:44px; padding:10px 12px; font-size:13.5px;
  }
  .rev{max-height:none; padding-left:12px}
  .note-add{gap:8px}
  .note-add input{min-height:40px; font-size:13px}
  .note-add .btn{min-height:40px; padding:0 14px}
  .note-item{font-size:13px}
  .btn{min-height:38px}

  /* ---------- login ---------- */
  .login-box{margin:6vh auto; padding:22px}
  .login-box input{min-height:44px; font-size:15px}
  .login-box button{min-height:46px; font-size:15px}
}

/* ============ tiny phones (<= 400px) ============ */
@media (max-width: 400px){
  .wrap{padding:0 14px}
  .top .wrap{gap:8px}
  .hero h1{font-size:19px}
  /* seg + filter now share ~305px on row 1 -- tighten just a touch */
  .seg button{padding:7px 8px; gap:4px}
  .filter-btn{padding:7px 10px; gap:6px}
  .filtermenu{max-width:calc(100vw - 22px)}
  .cal{gap:2px}
  .cal .cell{min-height:58px; padding:4px 2px}
  .cal .dn{font-size:10.5px}
  .cal .ev{font-size:9.5px; padding:2px 3px}
  .cal .ev .dot{width:4px; height:4px}
  .cal-nav button{width:36px; height:36px}
  .cal-today{height:36px; padding:0 10px}
  .ov .pb{padding:12px 12px 18px}
}

/* ============ landscape phones: shorter overlay ============ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){
  .ov{padding:0}
  .ov .panel{max-height:96vh}
  .dw textarea{min-height:56vh}
}