/* Mobile layout shared by the portal, school, payroll, reports and tools. */
@media (max-width: 700px) {
  html { overflow-x: clip; }
  body { overflow-x: hidden; }
  img, svg, video, canvas { max-width: 100%; }
  .shell { width: calc(100% - 24px); }
  .page { min-width: 0; padding-bottom: 40px; }
  .page-title { margin-bottom: 18px; }
  .page-title h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); overflow-wrap: anywhere; }
  .page-title p { font-size: .92rem; }
  .site-header .header-inner { width: calc(100% - 20px); gap: 8px; }
  .header-nav { flex: 1 1 100%; justify-content: flex-start; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .header-nav a { flex: none; scroll-snap-align: start; }
  .account { margin-left: auto; }
  .account-name, .account-role { display: none; }
  .content-page, .team-page, .guide-page, .messengers-page { padding-top: 18px; }
  .button { min-height: 44px; }
  input, select, textarea { max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .team-grid, .guide-layout, .question-grid, .hiring-main { grid-template-columns: minmax(0, 1fr); }
  .team-panel, .invite-card, .guide-card, .payroll-panel, .hiring-panel { min-width: 0; padding: 16px; }
  .team-person, .team-list-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .team-actions, .payroll-actions { flex-wrap: wrap; }
  .team-actions form, .team-actions .button { max-width: 100%; }
  .resource-card { min-width: 0; }
  .resource-main, .resource-main p, .resource-main h3 { overflow-wrap: anywhere; }
  .payroll-grid { grid-template-columns: minmax(0, 1fr); }
  .payroll-form, .payroll-decision { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .payroll-final-action { align-items: stretch; flex-direction: column; }
  .payroll-final-action label { min-width: 0; }
  .payroll-period { align-items: stretch; }
  .payroll-period label, .payroll-period button { width: 100%; }
  .payroll-ledger-filters { align-items: stretch; }
  .payroll-ledger-filters label, .payroll-ledger-filters label:nth-child(2) { width: 100%; }
  .payroll-sheet-scroll, .efficiency-scroll { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .payroll-input-scroll, .payroll-ledger-scroll, .payroll-profkom-scroll { max-height: 64svh; }
  .payroll-sheet { width: max-content; }
  .payroll-sheet th:first-child, .payroll-sheet td:first-child,
  .efficiency-table th:first-child, .efficiency-table td:first-child { position: sticky; left: 0; z-index: 2; background-clip: padding-box; }
  .payroll-sheet thead th:first-child, .efficiency-table thead th:first-child { z-index: 5; }
  .payroll-input-sheet input, .payroll-input-sheet select { font-size: 16px !important; height: 40px !important; }
  .payroll-grid-footer button, .payroll-bulk-toolbar .button, .payroll-profkom-bottom .button { width: 100%; }
  .efficiency-intro { align-items: flex-start; flex-direction: column; padding: 16px; }
  .efficiency-period { max-width: 100%; }
  .efficiency-scroll { width: 100%; }
  .efficiency-table { min-width: 2490px; }
  .carriers-heading { padding: 18px; }
  .carriers-search { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .carrier-trip { padding: 15px; }
  .carrier-trip dl, .carrier-trip .carrier-facts { grid-template-columns: minmax(0, 1fr); }
  .carrier-trip dd { overflow-wrap: anywhere; }
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .news-editor input, .news-editor select, .news-editor textarea { width: 100%; }
  .news-review-actions, .news-review-actions form { width: 100%; }
  .news-review-actions .button { width: 100%; }
  .portal-task .button { min-height: 42px; }
  .portal-calc-feature { width: 100%; }
  .login-layout { grid-template-columns: minmax(0, 1fr); }
  .login-card, .login-intro { min-width: 0; }
  .reader { min-width: 0; overflow-wrap: anywhere; }
  pre { max-width: 100%; overflow: auto; }
  .site-footer .shell { width: calc(100% - 24px); }
}

@media (max-width: 390px) {
  .brand { gap: 7px; }
  .brand-word strong { font-size: 1rem; }
  .brand-word small { letter-spacing: .06em; }
  .brand-mark { width: 35px; height: 35px; }
  .header-nav a { padding-inline: 8px; font-size: .72rem; }
  .payroll-input-sheet th:first-child, .payroll-input-sheet td:first-child { width: 150px; min-width: 150px; max-width: 150px; }
}