html{-webkit-text-size-adjust:100%}
button,a.ghost{min-height:44px}

/* Center the primary reporting headings without centering dense data. */
.month-head{align-items:center;text-align:center;flex-direction:column;justify-content:center}
.month-nav{justify-content:center}
.payroll>.topbar{justify-content:center;text-align:center}

@media(max-width:760px){
  body{background:linear-gradient(180deg,#fff7ee 0,#f4f0e7 34rem)}
  .shell{width:100%;max-width:540px;margin:0 auto;padding:14px 14px calc(104px + env(safe-area-inset-bottom))}
  .topbar{display:grid;justify-items:center;text-align:center;margin-bottom:22px}
  .brand{justify-content:center}.brand .mark{width:46px;height:46px}.brand h1{font-size:19px}
  .nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;z-index:20;bottom:max(8px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);width:min(calc(100% - 16px),520px);padding:7px;background:#171713ef;box-shadow:0 16px 40px #0006;backdrop-filter:blur(12px)}
  .nav button{min-width:0;min-height:46px;padding:8px 4px;font-size:12px;line-height:1.1;border-radius:12px;touch-action:manipulation}
  .card{width:100%;margin-inline:auto;padding:18px;border-radius:20px}
  .hero,.grid{width:100%;grid-template-columns:1fr;gap:14px}
  .clock{text-align:center}.clock .field{text-align:left}.clock h2{font-size:38px}
  .field input,.field textarea,.field select,input,textarea,select{font-size:16px;line-height:1.35;min-height:50px}
  .type-picker span{min-height:58px;padding:10px;text-align:center}
  .primary,.ghost,.actions button{min-height:46px;touch-action:manipulation}
  .entry{margin:10px 0;padding:15px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px #2723130d}
  .entry:last-child{border:1px solid var(--line)}
  .entry>div:last-child{gap:10px;align-items:center}.entry .actions{justify-content:flex-end}
  .week-nav{width:100%;justify-content:space-between;margin:8px auto 18px}.week-nav button{flex:0 0 46px;width:46px;height:46px}.week-nav strong{text-align:center}
  .payroll>.topbar,.section>.topbar{justify-items:center;text-align:center}
  .pay-card{padding:18px 0;grid-template-columns:1fr auto;align-items:center}.pay-card h2{font-size:38px}.pay-total{text-align:right}
  .modal{padding-top:max(24px,env(safe-area-inset-top))}.modal .card{padding:20px 18px calc(20px + env(safe-area-inset-bottom))}.modal .actions{display:grid;grid-template-columns:1fr 1fr}.modal .actions button{width:100%}
}

@media(max-width:600px){
  .month-head{justify-items:center;text-align:center;gap:14px;margin:4px auto 18px}.month-head h2{font-size:40px}.month-nav{justify-content:center}
  .monthly-stats{display:grid;grid-template-columns:1fr;gap:10px}.monthly-stats .card{min-height:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;padding:17px 18px;text-align:left}.monthly-stats .card span{font-weight:750}.monthly-stats .card b{grid-row:1/3;grid-column:2;font-size:30px;text-align:right}.monthly-stats .card small{grid-column:1}.money-card{grid-column:auto}.money-card b{font-size:36px}
  .dashboard-grid{gap:14px}.calendar-card{padding:16px 10px}.calendar-title{text-align:center}.calendar-title h3{margin-bottom:4px}.calendar-legend{display:none}
  .cal-weekdays,.calendar-grid{gap:3px}.cal-weekdays{margin-top:15px}.cal-day{min-width:0;min-height:46px;aspect-ratio:auto;padding:4px 2px;align-items:center;text-align:center;border-radius:8px}.cal-day>span{font-size:10px}.cal-day b{font-size:11px}.cal-day small{font-size:7px}
  .work-split article,.employee-bar{min-height:50px}.overall-strip{display:grid;grid-template-columns:1fr 1fr;border-radius:18px}.overall-strip>div{text-align:center;padding:15px 10px}.overall-strip strong{font-size:22px}
  .compact{justify-items:center;text-align:center}.compact .ghost{width:100%}
}

@media(max-width:380px){
  .nav button{font-size:11px}.shell{padding-inline:10px}.card{padding:16px}.pay-card{grid-template-columns:1fr}.pay-total{text-align:left;justify-items:start}
}