@media(max-width:1100px){
  .sb{position:fixed;left:0;top:0;bottom:0;z-index:200;transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);height:100dvh;box-shadow:4px 0 24px rgba(0,0,0,.5)}
  .sb.open{transform:translateX(0)}
  #sb-close-btn{display:flex!important}
  .sb-hamburger{display:flex}
  .main{width:100%}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g21{grid-template-columns:minmax(0,1fr)}
  .md{width:min(470px,calc(100vw - 32px));max-height:88vh}
  .se-pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .se-pos-perm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #tr-folders{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #fi-folders{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .rp-body{grid-template-columns:minmax(0,1fr)}
  .rp-sidebar{position:static}
}

/* ── MOBILE MEMBER CARDS ── */
.m-mob-card{cursor:pointer;transition:border-color .12s}
.m-mob-card:hover{border-color:var(--sky)}
#m-mobile-cards{display:none}

/* ── MOBILE TABLE CARDS (shared) ── same table→card swap as Members, extended to
   Attendance, Academics, Finance Dues/National/Fines/Expense Log, and Community Service Hours. */
.mob-card{transition:border-color .12s}
.mob-card.clickable{cursor:pointer}
.mob-card.clickable:hover{border-color:var(--sky)}
#a-mobile-cards,#a-events-mobile-cards,#ac-mobile-cards,#fin-dues-mobile-cards,#fin-natl-mobile-cards,#cs-hours-mobile-cards,#fin-fines-mobile-cards,#fin-expense-mobile-cards,#fin-plans-mobile-cards,#rc-mobile-cards,#co-mem-mobile-cards,#j-res-mobile-cards,#ph-events-mobile-cards,#al-mobile-cards,#soc-events-mobile-cards{display:none}

@media(max-width:768px){
  /* ── CORE ── */
  body{font-size:12.5px}
  /* iOS Safari auto-zooms the whole page on focus of any field computed under 16px — this
     catches every input/select/textarea app-wide (including the few with inline font-size
     overrides in attendance.js/committees.js/sober.js, which !important is needed to beat). */
  input,select,textarea{font-size:16px!important}
  /* ── TOUCH TARGETS: floor every tappable control toward Apple/Google's ~40-44px guidance.
     min-height/min-width (not height/width) so this floors the used size even for the many
     inline height:22px-ish buttons scattered through table-row/kanban-card actions app-wide —
     min-height wins over an explicit height per the CSS box model, no per-template edits needed. */
  .btn{min-height:40px}
  .btn-sm{min-height:36px!important}
  .btn-xs{min-height:34px!important}
  .ib{min-width:40px;min-height:40px}
  .md-x{min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  .tc{min-width:24px;min-height:24px}
  .att-check{min-width:26px;min-height:26px}
  .tgl{width:40px;height:22px}
  .tgl::after{width:18px;height:18px;top:2px}
  .tgl.on::after{left:20px}
  .tgl.off::after{left:2px}
  .content{padding:11px 12px}
  .topbar{padding:0 12px;gap:7px}
  .tb-title{max-width:110px}
  .tb-date{display:none}
  /* ── MEMBERS: swap table for cards on mobile ── */
  #m-tbl-card{display:none}
  #m-mobile-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 0}
  /* ── Same swap for Attendance / Academics / Finance Dues+National+Fines+Expense+Plans / CS Hours / Recruitment ── */
  #a-tbl-card,#a-events-tbl-card,#ac-tbl-card,#fin-dues-tbl-card,#fin-natl-tbl-card,#cs-hours-tbl-card,#fin-fines-tbl-card,#fin-expense-tbl-card,#fin-plans-tbl-card,#rc-tbl-card,#co-mem-tbl-card,#j-res-tbl-card,#ph-events-tbl-card,#al-tbl-card,#soc-events-tbl-card{display:none}
  #a-mobile-cards,#a-events-mobile-cards,#ac-mobile-cards,#fin-dues-mobile-cards,#fin-natl-mobile-cards,#cs-hours-mobile-cards,#fin-fines-mobile-cards,#fin-expense-mobile-cards,#fin-plans-mobile-cards,#rc-mobile-cards,#co-mem-mobile-cards,#j-res-mobile-cards,#ph-events-mobile-cards,#al-mobile-cards,#soc-events-mobile-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 0}
  /* minmax(0,1fr), not bare 1fr — a bare 1fr track's automatic minimum size is still based on
     its item's min-content (a wide .tw-wrapped table, a nowrap price/date column, etc.), so the
     grid item can overflow its own track's box even once collapsed to one column, forcing the
     WHOLE .content area to scroll horizontally instead of the intended per-table .tw scroll.
     minmax(0,1fr) zeroes the track's automatic minimum, the same fix .cal-cell needed. */
  .g4,.g3,.g2,.g21,.gg{grid-template-columns:minmax(0,1fr)!important}
  #d-officer-row{grid-template-columns:minmax(0,1fr)!important}
  /* Explicit ids instead of a >div:last-child structural selector — that pattern silently
     stopped matching Chaplain Hub's grids once #ch-full-view/#ch-member-view were introduced,
     since the grids became grandchildren instead of direct children (see the audit's C-01-
     adjacent mobile-responsiveness finding). Targeting the grid elements directly here can't
     go stale the same way if the surrounding DOM changes again. */
  #ch-analytics-grid,#ch-events-grid{grid-template-columns:minmax(0,1fr)!important}
  .fg{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pl{width:110px}
  .card{padding:11px 12px}
  .card-hd{flex-wrap:wrap;gap:6px}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:480px}
  .mo{align-items:flex-end;padding:0}
  .md{width:100%!important;max-width:100%!important;border-radius:var(--rl) var(--rl) 0 0;max-height:92dvh;padding:16px 15px;border-left:none;border-right:none;border-bottom:none}
  .confirm-box{width:calc(100vw - 28px);max-width:380px}
  .kb,#t-kb{grid-template-columns:1fr!important}
  .fr.c2,.fr.c3{grid-template-columns:1fr!important}
  .cal-cell{min-height:54px;padding:3px}
  .cal-pip{font-size:8.5px;padding:1px 3px}
  .cal-day-num{font-size:10.5px;width:18px;height:18px}
  #cal-filt select{width:100%;min-width:0}
  .cal-ev-label{display:none}
  .kv{font-size:19px}
  #tr-folders{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #fi-folders{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .btn{max-width:100%}
  .card-hd .btn{min-height:34px;font-size:11px;padding:0 9px}
  .rw{flex-wrap:wrap}
  #notes-g{grid-template-columns:1fr!important}
  .case-actions{flex-wrap:wrap}
  #ma-list{grid-template-columns:1fr!important}
  .tbl td,.tbl th{padding:5px 7px;font-size:11px}
  .lg-box{width:calc(100vw - 32px);padding:28px 20px}
  #ac-table th:nth-child(3),#ac-table td:nth-child(3){display:none}
  .an-off-row{grid-template-columns:100px 1fr 1fr!important}
  .an-off-row>div:last-child{display:none}

  /* ── TOPBAR: hide title when search is open ── */
  .gs-wrap{max-width:none;flex:1}

  /* ── FINANCE TABS: scrollable on mobile ── */
  #fin-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #fin-tabs-bar::-webkit-scrollbar{display:none}
  #rc-tabs-bar::-webkit-scrollbar{display:none}
  .fin-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}
  .fin-profile-grid{grid-template-columns:1fr!important}

  /* ── DASHBOARD ── */
  .d2-hero-health{gap:12px}

  /* ── ATTENDANCE ANALYTICS ── */
  #att-row1,#att-row2{grid-template-columns:1fr!important}
  #att-risk-grid{grid-template-columns:1fr!important}
  .att-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}
  .att-ev-label{width:90px}

  /* ── RECRUITMENT ── */
  .rc-hfunnel-row{grid-template-columns:80px minmax(0,1fr) 60px}
  .rc-hfunnel-label{font-size:9.5px}
  /* Kanban: stay full comfortable card width and let one stage take focus at a time via
     horizontal snap-scroll, instead of shrinking every column to fit — see .rc-kanban base rule. */
  .rc-kanban{grid-auto-flow:column;grid-auto-columns:minmax(min(78vw,280px),1fr);grid-template-columns:none!important;scroll-snap-type:x proximity}
  .rc-col{scroll-snap-align:start}

  /* ── REPORTS ── */
  .rp-body{grid-template-columns:minmax(0,1fr)}
  .rp-sidebar{position:static}
  .rp-header{flex-direction:column;align-items:flex-start;gap:6px}
  .rp-preview-wrap{padding:14px 13px}
  .rp-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rp-actions-bar{flex-wrap:wrap;gap:7px}
  #rp-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
  .rp-item{border-left:none;border-radius:8px;border:1px solid var(--bdr)}
  .rp-item.active{border-color:var(--sky);background:var(--sky-bg)}
  .rp-sidebar-lbl{display:none}

  /* ── PAGE-SPECIFIC TOOLBARS: wrap gracefully ── */
  #att-toolbar,#sober-toolbar{flex-wrap:wrap}
  .page-toolbar{flex-wrap:wrap;gap:7px}

  /* ── PAGE HEADERS: stack title above actions ── */
  .ph{flex-direction:column;align-items:flex-start}
  .ph-actions{width:100%;flex-wrap:wrap}
  .ph-actions .sbar{flex:1;min-width:140px;margin-bottom:0!important}

  /* ── TABLES: enforce min-width so .tw containers activate horizontal scroll ── */
  .tbl{min-width:460px}
  .rp-table{min-width:460px}

  /* ── COMMITTEES: override inline grid style ── */
  #co-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* ── TASKS KANBAN ── */
  .kb{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* ── ACADEMICS TABS: horizontal scroll instead of wrapping ── */
  #ac-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important}
  #ac-tabs-bar::-webkit-scrollbar{display:none}
  .ac-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}

  /* ── COMMITTEES: tabs scroll instead of wrapping ── */
  #co-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important}
  #co-tabs-bar::-webkit-scrollbar{display:none}
  .co-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}

  /* ── HOUSE LIFE: tabs scroll instead of wrapping; rank/criteria tables scroll horizontally ── */
  #hl-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important}
  #hl-tabs-bar::-webkit-scrollbar{display:none}
  .hl-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}
  #hl-rank-table{min-width:460px}
  #hl-criteria-table{min-width:380px}

  /* ── BIBLE STUDY PROGRAM: tabs scroll instead of wrapping; the PDF viewer swaps to a
     resource card instead of forcing a tiny unreadable iframe; KPI/overview grids stack ── */
  #bs-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important}
  #bs-tabs-bar::-webkit-scrollbar{display:none}
  .bs-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}
  .bs-pdf-embed{display:none!important}
  .bs-pdf-mobile-card{display:block!important}
  .bs-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bs-overview-grid{grid-template-columns:1fr!important}
  .se-pos-grid{grid-template-columns:1fr!important}
  .se-pos-perm-grid{grid-template-columns:1fr!important}

  /* ── VENDORS, ALUMNI, PHILANTHROPY, RITUAL: tables inside pages scroll ── */
  #page-vendors .card,#page-alumni .card,#page-philanthropy .card,#page-ritual .card{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── FINANCE: dues/fines/budget/national/plans tab content ── */
  #fin-dues,#fin-fines,#fin-budget,#fin-national,#fin-plans,#fin-settings{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── ACADEMICS PANES: table content scroll ── */
  #ac-pane-members,#ac-pane-history,#ac-pane-checks{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── HOUSE MANAGEMENT: Chore Manager's 5-column row (3 text inputs + day select + delete)
     has no room to shrink on a phone — scroll it instead of squeezing every input to ~40px. ── */
  #kc-chore-manager{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kc-chore-header,.kc-chore-row{min-width:520px}

  /* ── MEETING NOTES: officer-report grid — 2 columns of textareas is unreadably narrow on a
     phone, stack them instead. ── */
  #mn-officers-list>div{grid-template-columns:1fr!important}

  /* ── REPORT PREVIEW: wide tables inside reports scroll ── */
  .rp-preview-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── HEALTH SCORECARD: dimension bars adjust ── */
  .hs-dim-bar-row{flex-wrap:wrap;gap:4px}

  /* ── GLOBAL TABLE SAFETY NET: any table not already in a .tw that overflows ── */
  .card table{max-width:none}
}

/* ── MOBILE BOTTOM NAVIGATION ── */
.mobile-bnav{display:none}

@media(max-width:768px){
  .mobile-bnav{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:150;
    background:var(--surf);
    border-top:1px solid var(--bdr);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -2px 16px rgba(0,0,0,.08);
  }
  .mbn-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:8px 4px 6px;
    border:none;
    background:none;
    cursor:pointer;
    color:var(--ht);
    font-size:9.5px;
    font-weight:500;
    font-family:inherit;
    transition:color .15s;
    min-height:54px;
    -webkit-tap-highlight-color:transparent;
  }
  .mbn-item i{font-size:22px;line-height:1}
  .mbn-item.active{color:var(--sky-tx)}
  .mbn-item:active{opacity:.65}

  /* push scrollable content above the bottom bar */
  .content{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px) + 10px)!important}

  /* hamburger replaced by bottom nav on phones */
  .sb-hamburger{display:none!important}
}

@media(max-width:480px){
  /* icon-only bottom nav on very small phones */
  .mbn-item span{display:none}
  .mbn-item{min-height:50px}
  .mbn-item i{font-size:24px}
}

@media(max-width:480px){
  /* ── CORE ── */
  #m-mobile-cards,#a-mobile-cards,#a-events-mobile-cards,#ac-mobile-cards,#fin-dues-mobile-cards,#fin-natl-mobile-cards,#cs-hours-mobile-cards,#fin-fines-mobile-cards,#fin-expense-mobile-cards,#fin-plans-mobile-cards,#rc-mobile-cards,#co-mem-mobile-cards,#j-res-mobile-cards,#ph-events-mobile-cards,#al-mobile-cards,#soc-events-mobile-cards{grid-template-columns:1fr}
  #co-grid{grid-template-columns:1fr!important}
  .kb{grid-template-columns:1fr!important}
  #fi-folders,#tr-folders{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .folder-icon{width:32px;height:32px;font-size:16px}
  .folder-name{font-size:11.5px}
  .kv{font-size:17px}
  .topbar{padding:0 10px;height:48px}
  .tb-title{max-width:74px}
  .cal-cell{min-height:38px}
  .cal-day-num{font-size:9px;width:15px;height:15px}

  /* ── DASHBOARD ── */
  .d2-off-card{grid-template-columns:minmax(0,1fr) 38px 38px 62px;gap:4px;padding:6px 7px}
  .d2-off-stat-val{font-size:11px}

  /* ── REPORTS ── */
  #rp-menu{grid-template-columns:minmax(0,1fr)}
  .rp-kpi-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}

  /* ── TABLES: hide lower priority columns ── */
  .tbl th:last-child,.tbl td:last-child{display:none}
  .tbl th:nth-child(4),.tbl td:nth-child(4){display:none}

  /* ── MODALS ── */
  .md{padding:13px 12px}
  .md-t{font-size:13px}

  /* ── BUTTONS: icon-only on very small ── */
  .btn-icon-label{display:none}
}

@media(max-width:380px){
  .content{padding:8px 9px}
  .topbar{gap:5px}
  .tb-title{max-width:50px}
  .d2-off-card{grid-template-columns:minmax(0,1fr) 36px 56px;gap:3px}
  .d2-off-card>.d2-off-stat:first-of-type{display:none} /* hide attendance col, keep tasks + status */
  .att-tabs .att-tab{padding:0 9px;font-size:11px}
  .rp-item-sub{display:none}
}