/* =========================================================
   PBL Mobile UX Pass — V8.4.12
   Mobile-only responsive refinements.
   Desktop/tablet styling remains controlled by styles.css.
   ========================================================= */

@media (max-width:760px){
  /* Prevent reveal effects from creating apparent empty sections
     on phones/full-page mobile captures. */
  .reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  /* Public website */
  .container{width:min(100% - 28px,1200px)}
  .hero{min-height:570px}
  .hero-inner{min-height:500px;padding-bottom:84px}
  .hero-copy{max-width:100%}
  .hero h1{
    font-size:clamp(40px,12vw,50px);
    line-height:1.02;
    margin:14px 0;
  }
  .lead{font-size:16px;line-height:1.55}
  .hero-actions{gap:9px;margin-top:22px}
  .hero-actions .btn{flex:1 1 100%;width:100%}
  .hero-tabs{width:calc(100% - 28px)}
  .hero-tab{min-height:62px;padding:10px 14px}
  .trust-strip .container>div{padding:15px 12px}
  .section{padding:54px 0}

  /* Portal header */
  .portal-top{
    height:68px;
    min-height:68px;
    padding:8px 14px;
    gap:10px;
  }
  .portal-top>a{
    width:122px!important;
    height:38px!important;
    flex:0 0 122px;
  }
  .portal-top>div,
  .portal-top-actions{
    gap:8px;
    margin-left:auto;
    min-width:0;
  }
  .portal-top>div>a{
    font-size:13px;
    white-space:nowrap;
  }
  .notification-bell summary{width:36px;height:36px}
  .notification-menu{top:68px}

  /* Portal mobile navigation */
  .portal-layout{
    display:block;
    min-height:calc(100vh - 68px);
  }
  .portal-side{
    display:flex;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 12px;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    position:sticky;
    top:68px;
    z-index:40;
    box-shadow:0 6px 18px rgba(7,27,43,.10);
  }
  .portal-side::-webkit-scrollbar{display:none}
  .portal-side .portal-label{display:none}
  .portal-side a{
    flex:0 0 auto;
    min-height:42px;
    padding:10px 12px;
    margin:0;
    border-radius:8px;
    font-size:13px;
    scroll-snap-align:start;
    justify-content:center;
    gap:7px;
  }
  .portal-side a.active{
    background:#154967;
    color:#fff;
  }
  .portal-side a.has-attention{padding-right:10px}
  .nav-attention-badge{
    min-width:20px;
    height:20px;
    padding:0 5px;
    font-size:10px;
  }

  /* Portal content */
  .portal-main{padding:18px 14px 32px}
  .portal-head{
    align-items:flex-start;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
  }
  .portal-head h1{
    font-size:clamp(30px,8.5vw,38px);
    line-height:1.06;
    letter-spacing:-.025em;
    margin-top:4px;
  }
  .portal-head .eyebrow{font-size:11px}

  /* KPI cards */
  .stats-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
  }
  .stat{
    padding:16px;
    min-height:112px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .stat small{font-size:12.5px;line-height:1.35}
  .stat strong{font-size:30px;line-height:1;margin-top:10px}

  /* Panels */
  .panel{padding:16px;border-radius:12px}
  .panel-head{
    align-items:flex-start;
    gap:10px;
    flex-wrap:wrap;
  }
  .panel h2{font-size:24px;line-height:1.15}
  .panel h3{font-size:20px}

  /* Operational tables */
  .portal-main .table-wrap{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    margin:0 -16px;
    padding:0 16px 10px;
    scrollbar-width:thin;
  }
  .portal-main .table-wrap table{
    width:max-content;
    min-width:100%;
    border-collapse:collapse;
  }
  .portal-main .table-wrap th,
  .portal-main .table-wrap td{
    padding:12px;
    white-space:normal;
  }
  .portal-main .table-wrap th{
    white-space:nowrap;
    font-size:11px;
  }

  /* Shipment detail */
  .shipment-hero{padding:20px;border-radius:12px}
  .shipment-hero h2{font-size:28px;line-height:1.12}

  .tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:7px;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{
    flex:0 0 auto;
    white-space:nowrap;
    padding:10px 12px;
  }

  .doc-row,.notification-row{gap:12px}

  /* Attention/action controls */
  .action-required-strip{padding:11px 12px;gap:8px}
  .action-required-strip>span{font-size:11px}
  .payment-upload-area{justify-content:flex-start}

  /* Feedback/testimonials */
  .testimonial-capture-card{
    padding:22px 18px;
    border-radius:16px;
  }
  .testimonial-capture-card blockquote{font-size:20px}
}

@media (max-width:420px){
  .portal-top>a{
    width:108px!important;
    flex-basis:108px;
  }
  .portal-top>div>a{font-size:12px}
  .portal-main{padding-left:12px;padding-right:12px}
  .stats-grid{gap:8px}
  .stat{padding:14px;min-height:104px}
  .stat strong{font-size:28px}
  .portal-side a{font-size:12.5px;padding:9px 11px}
}