/* ==========================================================================
   PraisePanda — mobile dashboard rebuild + settings components (2026-11-03).
   Additive: the desktop cascade in praisepanda.css is untouched. Loaded after
   it so these rules win where they overlap. Breakpoints:
     ≤900px  nav becomes a burger-driven dropdown drawer
     ≤860px  KPI/plan grids go 2-col (existing rule), two-col sections stack
     ≤640px  tables scroll horizontally, touch targets grow
     ≤480px  single-column stacking everywhere
   ========================================================================== */

/* ---------- safety: nothing may push the page wider than the viewport ------ */
html,body{overflow-x:clip}

/* ---------- member chip + nav toggle -------------------------------------- */
.nav-toggle{display:none}
.member-chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);
  border:2px solid var(--line);border-radius:999px;padding:.28rem .85rem .28rem .4rem;
  color:var(--ink);font-size:.82rem;max-width:100%}
.member-chip>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-chip strong{font-family:var(--font-display);letter-spacing:.01em}
.member-chip .panda{width:22px;height:22px;flex:none}
.nav-right .linkbtn{min-height:44px;display:inline-flex;align-items:center;padding:0 8px}

/* ---------- billing plan grid (was an inline style) ------------------------- */
.plan-grid{grid-template-columns:repeat(3,1fr)}

/* ---------- settings: notification preference rows + switches --------------- */
.pref-row{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pref-row:last-child{border-bottom:0}
.pref-row>div:first-child{flex:1 1 220px;min-width:0}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;cursor:pointer;font-weight:700;font-size:.88rem;margin:0;padding-left:54px}
.switch input{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:44px;height:28px;opacity:0;margin:0;cursor:pointer}
.switch .sl{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:44px;height:26px;border-radius:999px;background:var(--line);
  border:2px solid var(--ink);transition:background .15s;pointer-events:none}
.switch .sl::after{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink);
  transition:left .15s}
.switch input:checked+.sl{background:var(--green)}
.switch input:checked+.sl::after{left:18px}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled+.sl{opacity:.45}
.switch input:focus-visible+.sl{outline:2px solid var(--gold);outline-offset:2px}
.switch.off{cursor:not-allowed;color:var(--muted)}

/* ---------- ≤1120px: burger nav drawer -------------------------------------
   Moved up from 900px: the desktop header row (brand + 6 links + More + member
   chip) cannot fit below ~1150px even compacted, so the drawer takes over. */
@media(max-width:1120px){
  .topbar-in{flex-wrap:wrap;position:relative;gap:8px}
  .brand{flex:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:auto;background:var(--paper);
    border:2px solid var(--ink);border-radius:12px;font-size:1.25rem;line-height:1;
    color:var(--ink);box-shadow:none;padding:0;flex:none}
  .nav-toggle:hover{box-shadow:none;transform:none}
  .nav-right{order:3;flex:0 1 100%;width:100%;margin-left:0;justify-content:space-between;
    padding-top:8px;border-top:1px solid var(--line);gap:8px;flex-wrap:wrap}
    /* QA batch #4: member chip + Support + Log out must wrap, not overflow,
       on narrow phones (long business names can push past 390px otherwise) */
  /* drawer row has room: restore the full chip identity and the header buttons
     hidden by the compact default */
  .member-chip .chip-name,.member-chip .chip-sep{display:inline}
  .nav-right .btn.small{display:inline-flex;align-items:center}
  .nav-right .nav-logout{display:block}
  .nav-right-sep{display:block}
  /* no duplicates: the More-menu account section stays only in the dropdown tier */
  .nav-more-menu .nav-more-accthead,.nav-more-menu .nav-more-ident,
  .nav-more-menu .nav-more-account{display:none}
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;gap:2px;background:var(--paper);
    border-bottom:2px solid var(--ink);padding:10px 16px 16px;margin:0;
    max-height:calc(100vh - 140px);overflow-y:auto;
    box-shadow:0 18px 30px rgba(42,32,24,.18)}
  .mainnav.open{display:flex}
  .mainnav a{margin:0;padding:12px 12px;font-size:1rem;min-height:44px;
    display:flex;align-items:center;border-radius:12px}
  .mainnav a.on{border-bottom:0;background:var(--ink);color:#fff;padding-bottom:12px}
  /* batch #4: grouped drawer — "More" menu flattens into the drawer with
     section headers, so the flat 14-link grid never appears on mobile */
  .nav-more-btn{display:none}
  .nav-more-menu{display:block;position:static;min-width:0;background:none;border:0;
    box-shadow:none;padding:0;z-index:auto}
  .nav-more.open .nav-more-menu,.nav-more:focus-within .nav-more-menu{display:block}
  .mainnav>.nav-sec,.nav-more-menu .nav-sec{display:block;font-size:.68rem;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.75rem 12px .3rem}
  .mainnav>.nav-sec.nav-sec-work{padding-top:.25rem}
  .nav-more-menu .nav-sec:not(:first-child){border-top:1px solid var(--line);margin-top:.5rem;padding-top:.85rem}
}

/* ---------- ≤860px: plan grid to 2-col ------------------------------------- */
@media(max-width:860px){
  .plan-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- ≤640px: tables scroll, touch targets, tighter cards ------------- */
@media(max-width:640px){
  .wrap{padding:18px 14px 48px}
  main{padding:1rem .75rem 3rem}
  .card{padding:16px}
  .greet h2{font-size:1.45rem}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Cells never wrap mid-word on mobile — the table scrolls instead. */
  table td,table th{white-space:nowrap}
  /* Visible scroll hint: fade the table's right edge so it's obvious
     there's more content to swipe to. */
  .card table{-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
  .credit-hero .num{font-size:1.9rem}
  .btn.small,button.small{min-height:44px}
  .pref-row{flex-direction:column;align-items:stretch;gap:8px}
  .cobrand{padding:18px}
}

/* ---------- ≤480px: single column everywhere, no iOS auto-zoom -------------- */
@media(max-width:480px){
  .grid,.kpi-grid{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .rhead{flex-wrap:wrap}
  .arow .btn,.arow button{flex:1 1 100%}
  input,select,textarea{font-size:16px}
  .member-chip{font-size:.76rem}
}