/* Loaded last so the phone layout also overrides the app's inline display:grid. */
.mobile-menu-toggle, .mobile-menu-close, .mobile-nav-backdrop { display: none; }
.mobile-cell-value { display: contents; }
.topbar-title { min-width: 0; }
#content, #content > *, .form-grid > *, .two-columns > *, .crop-grid > *, .metrics > * { min-width: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media screen and (max-width: 820px), screen and (max-width: 1024px) and (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  body.nav-open { overflow: hidden; overscroll-behavior: none; }
  button, a, summary { touch-action: manipulation; }
  input, select, textarea { font-size: 16px; min-height: 48px; max-width: 100%; }
  input[type="checkbox"], input[type="radio"] { min-height: 22px; min-width: 22px; }
  .login-shell { grid-template-columns: minmax(0, 1fr); min-height: 100svh; }
  .login-brand { min-height: auto; padding: calc(24px + env(safe-area-inset-top)) 22px 24px; }
  .login-brand::after { width: 230px; height: 230px; bottom: -150px; right: -140px; }
  .login-lockup img { width: 36px; height: 36px; }
  .login-lockup strong { font-size: .78rem; }
  .login-lockup span { font-size: .52rem; }
  .login-brand h1 { margin: 20px 0 12px; font-size: clamp(30px, 8vw, 42px); line-height: 1.05; }
  .login-intro { margin: 0; font-size: 14px; line-height: 1.5; }
  .principle-list { display: none; }
  .login-panel { padding: 20px max(14px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)); }
  .login-card { width: min(440px, 100%); min-width: 0; padding: 24px 20px; border-radius: 18px; }
  .login-card h2 { margin-top: 16px; font-size: 30px; }
  .login-card p { overflow-wrap: anywhere; }
  .login-card label { font-size: 13px; }
  .login-card button, #password-setup button { min-height: 46px; font-size: 14px; }
  #password-setup { min-height: 100svh; padding: calc(24px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)); }

  #app.app-shell { grid-template-columns: minmax(0, 1fr); min-height: 100svh; }
  #app .app-body { grid-column: 1; min-width: 0; width: 100%; margin: 0; padding-bottom: 0; }
  #app .sidebar {
    display: flex; position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(320px, calc(100vw - 48px)); max-height: none; height: 100vh; height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-100%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain;
    transition: transform .2s ease, visibility .2s; box-shadow: 8px 0 35px #0a211b33;
  }
  .nav-open #app .sidebar { transform: translateX(0); visibility: visible; }
  #app .sidebar-brand { padding: 0 0 18px; gap: 10px; }
  #app .brand-mark { width: 38px; height: 38px; }
  #app .sidebar-brand strong { font-size: 15px; }
  #app .sidebar-brand small { font-size: 9px; }
  .mobile-menu-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; color: white; background: #ffffff14; border: 1px solid #ffffff26; border-radius: 10px; font-size: 28px; line-height: 1; }
  #menu { display: block; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  #menu button { width: 100%; margin: 3px 0; min-height: 48px; padding: 12px; white-space: normal; font-size: 15px; }
  #app .sidebar-foot { display: grid; flex: 0 0 auto; margin-top: 16px; padding-top: 16px; gap: 12px; font-size: 12px; }
  #app .sidebar-foot .text-button { min-height: 44px; font-size: 14px; }
  #app .sidebar-foot a { line-height: 1.5; overflow-wrap: anywhere; }
  .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 50; background: #081e15a6; touch-action: none; }
  .nav-open .mobile-nav-backdrop { display: block; }
  .topbar { position: sticky; top: 0; z-index: 25; justify-content: flex-start; min-height: 66px; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
  .mobile-menu-toggle { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; color: var(--forest); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
  .mobile-menu-toggle svg { width: 23px; height: 23px; }
  .topbar-title { flex: 1; }
  .topbar .eyebrow { font-size: 8px; letter-spacing: .1em; }
  .topbar h2 { font-size: clamp(16px, 4.5vw, 19px); line-height: 1.2; overflow-wrap: anywhere; }
  .topbar-actions { flex: 0 0 auto; gap: 0; }
  .topbar .active-role, .topbar .avatar, .topbar-signout { display: none; }
  .connection-pill { font-size: 10px; padding: 7px 8px; }
  .command-main { width: 100%; max-width: 100%; padding: 16px max(12px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  #content > section, .protected-document, .routine { padding: 18px 16px; border-radius: 14px; margin-bottom: 14px; }
  #content h2 { font-size: 25px; line-height: 1.2; overflow-wrap: anywhere; }
  #content h3 { font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
  #content p, #content li { overflow-wrap: anywhere; }
  #content button { min-height: 44px; max-width: 100%; padding: 11px 13px; font-size: 14px; white-space: normal; }
  #content input, #content select, #content textarea { width: 100%; font-size: 16px; }
  #content input[type="checkbox"], #content input[type="radio"] { width: auto; }
  #content label { font-size: 14px; }
  .form-grid, .two-columns, .crop-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .form-grid > div.wide { grid-column: 1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metrics > div { padding: 14px 12px; }
  .metrics strong { font-size: 24px; }
  .metrics span { font-size: 12px; line-height: 1.4; }
  .crop-card { padding: 18px; }
  .tracker-heading { display: block; }
  .tracker-heading select { width: 100%; max-width: none; margin-top: 14px; }
  .tracker-heading > button { margin-top: 14px !important; }
  .quick-actions, .summary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #content .quick-actions button, #content .summary-actions button { flex: 1 1 140px; margin: 0; }
  .workspace-tabs { display: flex; flex-wrap: nowrap; width: 100%; max-width: 100%; overflow-x: auto; gap: 4px; padding: 5px; scrollbar-width: thin; }
  #content .workspace-tabs button { flex: 0 0 auto; min-height: 44px; padding: 10px 12px; white-space: nowrap; }
  .responsibility-settings { padding: 16px; }
  .protected-document summary, .responsibility-settings summary, .routine summary { min-height: 44px; line-height: 1.5; }
  .reporting-line { font-size: 14px; line-height: 1.6; }
  .callout { font-size: 13px; }
  .mobile-table-container { overflow: visible; min-width: 0; }
  #content .mobile-record-table { display: block; width: 100%; font-size: 14px; border: 0; }
  .mobile-record-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
  .mobile-record-table tbody { display: grid; gap: 12px; }
  .mobile-record-table tbody tr { display: block; min-width: 0; padding: 5px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
  #content .mobile-record-table td { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; align-items: start; width: auto; max-width: none; padding: 10px 12px; border: 0; border-bottom: 1px solid #dce3dd80; white-space: normal; font-size: 14px; overflow-wrap: anywhere; }
  #content .mobile-record-table td:last-child { border-bottom: 0; }
  .mobile-record-table td::before { content: attr(data-label); grid-column: 1; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.5; text-transform: uppercase; letter-spacing: .025em; }
  .mobile-record-table .mobile-cell-value { display: block; grid-column: 2; min-width: 0; line-height: 1.5; }
  #content .mobile-record-table td[data-full-width] { display: block; }
  .mobile-record-table td[data-full-width]::before { display: none; }
  #content .mobile-record-table td button { min-height: 44px; font-size: 13px; white-space: normal; }
  .weekly-bar { width: 100%; max-width: 180px; min-width: 0; }
  #note { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; width: auto; max-width: none; max-height: 30dvh; overflow: auto; font-size: 14px; padding: 12px 14px; }
}

@media screen and (max-width: 360px) {
  .topbar { gap: 8px; }
  .topbar .eyebrow { display: none; }
  .metrics strong { font-size: 21px; }
  .metrics > div { padding: 12px 10px; }
  #content > section, .protected-document { padding: 16px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .sidebar { transition: none; }
}

@media print {
  .mobile-menu-toggle, .mobile-menu-close, .mobile-nav-backdrop { display: none !important; }
}