/* Phone / compact tablet: real app shell with sticky app bar + bottom navigation. */
@media (max-width:767px){
  html{scroll-padding-top:calc(var(--s-mobile-header) + var(--s-safe-top) + 12px)}
  body.app-body{min-height:100dvh;background:radial-gradient(circle at 100% 0,rgba(77,54,190,.18),transparent 30%),#071021}
  .desktop-topbar{display:none!important}
  .mobile-appbar{display:block}
  .mobile-bottom-nav{display:grid}
  .mobile-only{display:initial!important}
  .desktop-only{display:none!important}
  .app-shell{display:block!important;min-height:100dvh;width:100%!important;overflow:visible!important}
  .main{width:100%;min-height:100dvh}
  .content{padding:16px 14px calc(var(--s-mobile-nav) + var(--s-safe-bottom) + 26px)!important;overflow:visible!important}

  /* Sidebar becomes a deliberate menu drawer, not the primary phone layout. */
  .sidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(86vw,320px)!important;height:100dvh!important;transform:translateX(-105%)!important;transition:transform .24s ease!important;z-index:50!important;padding:18px 14px calc(18px + var(--s-safe-bottom))!important;overflow:hidden!important;box-shadow:28px 0 80px rgba(0,0,0,.38)}
  body.menu-open .sidebar{transform:translateX(0)!important}
  body.menu-open::after{content:""!important;position:fixed!important;inset:0!important;background:rgba(1,6,16,.62)!important;backdrop-filter:blur(3px);z-index:45!important}
  .sidebar-close{display:grid;place-items:center}
  .sidebar .brand{height:68px;padding:4px 48px 8px 6px;justify-content:flex-start}
  .sidebar .brand img{display:block;width:170px;height:54px;object-fit:contain;object-position:left center}
  .brand-mark{display:none!important}
  .school-pill{display:block;margin:8px 4px 14px;padding:12px 14px;border-radius:16px}
  .sidebar nav{gap:4px;padding-right:2px!important}
  .sidebar nav a{min-height:46px;padding:10px 12px!important;border-radius:14px!important}
  .sidebar nav a span{display:block!important;white-space:nowrap!important}
  .sidebar-foot{display:block!important;padding:12px 10px 4px}

  .panel{padding:17px;border-radius:21px;box-shadow:0 12px 34px rgba(0,0,0,.16)}
  .panel-head{gap:10px;margin-bottom:14px}
  .panel-head h2{font-size:17px}
  .hero-card{padding:20px;border-radius:24px}
  .hero-card h2{font-size:clamp(25px,7vw,31px);margin:11px 0}
  .hero-card p{font-size:14px;line-height:1.7}
  .hero-card .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px}
  .hero-card .actions .btn{width:100%;padding-inline:10px}
  .hero-aside{gap:12px}
  .hero-mini{padding:17px;border-radius:21px}
  .hero-mini strong{font-size:25px}
  .hero-mini .ring{width:108px!important;height:108px!important}
  .stat,.account-card{padding:18px;border-radius:22px}
  .stat strong,.account-card strong{font-size:26px!important}
  .grid{gap:12px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr!important}
  .dashboard-hero,.subgrid,.student-top-grid{grid-template-columns:1fr!important;gap:12px}

  /* Touch-first actions. */
  .quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px!important;width:100%}
  .quick-actions>*{width:100%!important;min-width:0}
  .quick-actions .btn,.quick-actions button{width:100%!important;padding:12px 10px;font-size:12px}
  .search-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important;width:100%}
  .search-row .btn{width:auto!important;min-width:76px;padding-inline:14px}
  .filter-grid{grid-template-columns:1fr!important}
  .filter-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .filter-actions .btn{width:100%!important}
  .export-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .export-row .btn{width:100%!important}
  .inline-form{flex-wrap:wrap}

  .form-grid{grid-template-columns:1fr!important;gap:12px}
  .field label{margin-bottom:6px;font-size:10px}
  .field input,.field select,.field textarea{border-radius:15px;padding:13px 14px;font-size:16px;/* prevents iOS zoom */}
  .field textarea{min-height:104px}
  .check-row,.switch-row{align-items:flex-start}

  /* Lists are naturally mobile. */
  .account-list,.parent-directory,.mobile-card-grid,.goal-grid,.alert-grid,.class-grid,.vault-grid,.health-grid,.tenant-grid{grid-template-columns:1fr!important;gap:10px!important}
  .account-tile,.child-card,.parent-card{padding:14px;border-radius:18px}
  .account-tile>strong,.child-card>strong{font-size:14px;max-width:42%}
  .account-detail-head{align-items:flex-start;flex-wrap:wrap}
  .account-detail-head .quick-actions{width:100%;justify-content:flex-start}
  .parent-card .parent-actions{margin-left:0!important;width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .parent-card .parent-actions>*{width:100%}
  .parent-card .parent-actions .btn{width:100%}
  .parent-edit-banner{grid-template-columns:1fr!important;padding:14px}
  .notification-item,.audit-item,.metric-item{min-width:0}

  /* Card-based data view for dense tables on phones. JS supplies data-label. */
  .table-wrap:has(table[data-mobile-table-ready]){overflow:visible!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]){display:block!important;min-width:0!important;width:100%!important;border:0!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) tbody{display:grid!important;gap:10px!important;width:100%!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) tr{display:block!important;padding:8px 14px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:18px!important;background:rgba(255,255,255,.035)!important;box-shadow:0 8px 24px rgba(0,0,0,.12)!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td{display:grid!important;grid-template-columns:minmax(92px,.72fr) minmax(0,1.28fr)!important;gap:12px!important;align-items:start!important;width:100%!important;padding:10px 0!important;border-bottom:1px solid rgba(255,255,255,.055)!important;text-align:right!important;overflow-wrap:anywhere!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td:last-child{border-bottom:0!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td::before{display:block!important;content:attr(data-label);text-align:left!important;color:#8297bc;font-size:9px;font-weight:900;line-height:1.35;letter-spacing:.08em;text-transform:uppercase}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td[colspan]{display:block!important;text-align:left!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td[colspan]::before{display:none!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td .badge{justify-self:end}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td form{justify-self:end;max-width:100%}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td .quick-actions{grid-template-columns:1fr!important}

  .pager{justify-content:center;flex-wrap:wrap}
  .pager a{min-width:40px;height:40px}

  /* Teller: promote search/student/action controls. */
  .teller-search,.big-search{width:100%}
  .big-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .big-search input{min-height:52px;font-size:16px}
  .big-search .btn{width:auto!important;min-width:88px}
  .quick-amounts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .quick-amount{min-height:52px}
  .student-profile{grid-template-columns:auto minmax(0,1fr)!important}
  .student-profile>strong{grid-column:1/-1!important;text-align:left!important;margin-top:4px}

  /* Statements are summaries on screen; print/PDF keeps A4 table via print.css. */
  .statement-launch-form,.statement-summary,.statement-account{grid-template-columns:1fr!important}
  .statement-sheet{padding:16px!important;border-radius:20px!important}
  .statement-head{flex-direction:column;gap:10px}
  .statement-period{text-align:left!important}
  .statement-summary{gap:8px}
  .statement-summary div,.statement-account div{padding:11px 12px}

  /* Student cards are one-card-per-row on phone. */
  .card-grid{grid-template-columns:1fr!important;gap:14px!important}
  .student-card{width:100%;min-height:0!important;aspect-ratio:85.6/53.98;border-radius:18px;padding:15px}
  .student-card .qr-image{width:64px;height:64px}
  .school-card-head h3{font-size:15px;max-width:190px}
  .school-card-head img{width:54px;height:22px}
  .theme-picker,.theme-picker.compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  .theme-choice span{min-height:68px;padding:11px}

  /* Parent portal: preserve dedicated app feel. */
  .parent-body{background:#071021;min-height:100dvh}
  .parent-shell{width:100%!important;min-height:100dvh;border-inline:0!important}
  .parent-top{position:sticky;top:0;z-index:18;height:calc(62px + var(--s-safe-top));padding:var(--s-safe-top) 16px 0!important;background:rgba(6,16,32,.92);backdrop-filter:blur(18px)}
  .parent-top img{width:128px!important;height:46px!important}
  .parent-main{padding:16px 14px calc(var(--s-mobile-nav) + var(--s-safe-bottom) + 28px)!important}
  .parent-title{font-size:24px!important;margin:5px 0 16px!important}
  .parent-balance-card{padding:20px!important;border-radius:24px!important}
  .parent-balance-card strong{font-size:32px!important}
  .parent-bottom{display:grid!important;height:calc(var(--s-mobile-nav) + var(--s-safe-bottom))!important;padding-bottom:var(--s-safe-bottom)!important;left:0!important;right:0!important;bottom:0!important;border-radius:0!important}

  /* Confirmation becomes a one-hand bottom sheet. */
  .senoa-dialog-layer{place-items:end center;padding:0}
  .senoa-dialog{width:100%;border-radius:26px 26px 0 0;padding:10px 18px calc(18px + var(--s-safe-bottom));animation:senoa-sheet-up .22s ease}
  .senoa-dialog-grip{display:block;width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);margin:2px auto 16px}
  .senoa-dialog h3{font-size:20px}
  @keyframes senoa-sheet-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
  .senoa-toast-stack{left:12px;right:12px;top:calc(var(--s-mobile-header) + var(--s-safe-top) + 10px);width:auto}

  /* Login and public/landing are designed as phone layouts rather than squeezed desktop. */
  .login-shell{display:block!important;min-height:100dvh}
  .login-art{min-height:auto;padding:30px 20px 24px}
  .login-art .logo{width:185px;height:54px}
  .login-art h1{font-size:38px;line-height:1.02;margin:18px 0 12px}
  .login-art p{font-size:14px;line-height:1.7}
  .login-grid{grid-template-columns:1fr 1fr!important;gap:9px;margin-top:20px}
  .login-chip{padding:13px;border-radius:17px}
  .login-chip b{font-size:14px}.login-chip span{font-size:11px}
  .login-form{display:block;padding:18px 14px 38px}
  .login-card{width:100%;padding:20px;border-radius:24px}
  .login-card h2{font-size:28px}
  .login-card .btn{width:100%!important;min-height:52px}

  .wrap{width:min(100% - 24px,1200px)!important}
  .landing-nav .wrap{height:68px!important}
  .landing-logo{width:174px!important;height:44px!important;object-position:left center}
  .landing-menu{gap:8px!important}.landing-menu>a:not(.btn){display:none!important}.landing-menu .btn{width:auto!important;min-height:44px;padding:11px 13px;font-size:12px}
  .hero{padding:58px 0 52px!important}
  .hero-grid{grid-template-columns:1fr!important;gap:30px!important}
  .hero h1{font-size:clamp(39px,12vw,52px)!important;line-height:.98!important;margin:16px 0!important}
  .hero p{font-size:15px!important;line-height:1.75!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:9px!important;margin-top:22px!important}
  .hero-actions .btn{width:100%!important;padding-inline:10px;font-size:12px}
  .hero-proof{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px!important;margin-top:20px!important}
  .hero-proof .proof{min-width:0!important;padding:11px 9px!important;border-radius:15px!important}.hero-proof b{font-size:16px!important}.hero-proof span{font-size:9px!important;line-height:1.35;display:block;margin-top:3px}
  .phone-stage{min-height:auto!important;padding-top:4px!important;display:grid;gap:10px}
  .phone{position:relative!important;right:auto!important;top:auto!important;width:100%!important;margin:0!important;border-width:7px!important;border-radius:28px!important}
  .float-card{position:relative!important;inset:auto!important;margin:0!important;border-radius:18px!important;padding:14px 16px!important}
  .float-card.one{order:-1}
  .section{padding:58px 0!important}.section-head{margin-bottom:28px!important}.section-head h2{font-size:34px!important}.section-head p{font-size:14px!important}
  .feature-grid,.workflow-steps,.footer-rich{grid-template-columns:1fr!important}
  .feature-card{padding:20px!important;border-radius:22px!important}
  .security-band{grid-template-columns:1fr!important;padding:22px!important;border-radius:25px!important}.security-list{grid-template-columns:1fr 1fr!important}
  .cta-card{padding:22px!important;border-radius:24px!important;align-items:flex-start!important}.cta-card h2{font-size:28px!important}
  .footer .wrap{display:grid!important;grid-template-columns:1fr!important}
  .public-head .wrap{height:68px}.public-head img{width:160px!important}.public-doc{width:min(100% - 24px,860px)!important;padding:42px 0!important}.doc-card{padding:20px!important;border-radius:22px!important}

  /* Safe viewport/keyboard behavior. */
  :focus-visible{scroll-margin-bottom:calc(var(--s-mobile-nav) + 24px)}
  body{overscroll-behavior-y:none}
}

@media (max-width:599px){
  .form-grid{grid-template-columns:1fr!important}
  .credential-grid,.tenant-grid,.class-grid,.vault-grid,.health-grid{grid-template-columns:1fr!important}
  .inline-stats{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .inline-stats div{min-width:0;padding:9px 0}
  .inline-stats b{font-size:17px}
  .hero-card .actions{grid-template-columns:1fr 1fr}
}

@media (max-width:374px){
  .content{padding-inline:10px!important}
  .mobile-appbar{padding-inline:10px}
  .mobile-appbar-actions .mobile-search-btn{display:none}
  .mobile-appbar-copy h1{font-size:17px}
  .quick-actions,.hero-card .actions,.export-row,.filter-actions{grid-template-columns:1fr!important}
  .login-grid{grid-template-columns:1fr!important}
  .hero-actions{grid-template-columns:1fr!important}
  .hero-proof{grid-template-columns:1fr!important}
  .security-list{grid-template-columns:1fr!important}
  .theme-picker,.theme-picker.compact{grid-template-columns:1fr!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td{grid-template-columns:1fr!important;text-align:left!important;gap:4px!important}
  table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td .badge,table[data-mobile-table-ready]:not([data-mobile-table="keep"]) td form{justify-self:start}
}

@media (max-width:767px){
  .modal{place-items:end center!important;padding:0!important;z-index:78!important}
  .modal-card{width:100%!important;max-height:min(82dvh,720px);overflow:auto;border-radius:26px 26px 0 0!important;padding:22px 18px calc(18px + var(--s-safe-bottom))!important;animation:senoa-sheet-up .22s ease}
  .modal-card::before{content:"";display:block;width:42px;height:4px;border-radius:999px;background:rgba(255,255,255,.18);margin:-8px auto 16px}
  .modal-card .quick-actions{grid-template-columns:1fr 1fr!important}
  .confirm-box{grid-template-columns:minmax(0,1fr) auto!important;gap:9px 12px!important;padding:14px 0!important}
  .confirm-box b{max-width:170px;overflow-wrap:anywhere}
}

@media (max-width:767px){
  .mobile-filter-trigger{display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.045);color:#dfe9fb;font:inherit;font-weight:800}
  .mobile-filter-trigger b{font-size:11px;color:#8eb7ff}
  .filter-grid.mobile-collapsible{display:none!important;position:fixed!important;left:0;right:0;bottom:0;z-index:82;max-height:82dvh;overflow:auto;grid-template-columns:1fr!important;gap:12px!important;padding:12px 16px calc(18px + var(--s-safe-bottom))!important;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#14223f,#0b1730);border:1px solid rgba(255,255,255,.09);box-shadow:0 -28px 90px rgba(0,0,0,.45)}
  .filter-grid.mobile-collapsible.mobile-open{display:grid!important;animation:senoa-sheet-up .22s ease}
  .mobile-filter-head{display:flex;position:sticky;top:-12px;z-index:2;align-items:center;justify-content:space-between;gap:12px;margin:-12px -16px 2px;padding:14px 16px 12px;background:linear-gradient(180deg,#14223f 75%,rgba(20,34,63,.92));border-bottom:1px solid rgba(255,255,255,.07)}
  .mobile-filter-head::before{content:"";position:absolute;top:6px;left:50%;width:40px;height:4px;transform:translateX(-50%);border-radius:99px;background:rgba(255,255,255,.18)}
  .mobile-filter-head b,.mobile-filter-head span{display:block}.mobile-filter-head b{font-size:17px}.mobile-filter-head span{margin-top:3px;color:var(--text-soft);font-size:11px}
  .mobile-filter-head button{width:40px;height:40px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.05);color:#fff;font-size:22px}
  .mobile-filter-backdrop{display:block;position:fixed;inset:0;z-index:81;background:rgba(2,8,19,.68);backdrop-filter:blur(5px)}
  body.filter-open{overflow:hidden}
}

@media (max-width:767px){
  .receipt-body{padding:0!important;background:#fff!important}
  .receipt-sheet{width:100%!important;min-height:100dvh;margin:0!important;padding:20px 15px calc(22px + var(--s-safe-bottom))!important;border-radius:0!important;box-shadow:none!important}
  .receipt-head{gap:12px}.receipt-head img{width:138px!important}.receipt-head>div{min-width:0}.receipt-head b{font-size:11px}.receipt-head span{font-size:10px}
  .receipt-title{padding:18px 0}.receipt-title h1{font-size:29px;overflow-wrap:anywhere}.receipt-title p{overflow-wrap:anywhere}
  .receipt-detail div{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px!important}.receipt-detail b{text-align:right;overflow-wrap:anywhere}
  .receipt-foot{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
  .receipt-sheet>.quick-actions{grid-template-columns:1fr!important}
  .receipt-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .setup{width:min(100% - 24px,900px)!important;padding:34px 0!important}.setup-logo{width:190px!important;height:62px!important;margin-bottom:12px!important}.setup h1{font-size:30px!important}
}