/* Shared by mobile browsers and the Android WebView. Keep wide tables scrollable. */
.main-shell, #content, .heading-actions, .panel-heading > *, .form-grid > * { min-width: 0; }
.login-main { width: 100%; min-width: 0; margin: 0; }
.sidebar-scrim { position: fixed; inset: 0; z-index: 29; border: 0; background: #16271c66; }
.modal { max-height: calc(var(--visual-height, 100vh) - 24px); }
.modal-overlay { top: var(--visual-top, 0px); bottom: auto; height: var(--visual-height, 100vh); padding: 12px; }
.modal-header h2 { overflow-wrap: anywhere; line-height: 1.5; padding-right: 12px; }
.modal-header .modal-close { flex-shrink: 0; }
.table-scroll, .subnav, .meal-timeline, .water-timeline { max-width: 100%; overscroll-behavior-x: contain; }
.batch-line.water-line { grid-template-columns: 1fr 1fr 30px; }

/* Native navigation already takes up space; use a drawer even in landscape. */
.android-app .main-shell { margin-left: 0; width: 100%; }
.android-app .sidebar { width: min(280px, 85vw); transform: translateX(-105%); transition: transform .2s; }
.android-app .sidebar.open { transform: translateX(0); }
.android-app .mobile-menu { display: flex; flex-shrink: 0; }
.android-app .topbar { min-height: 52px; height: auto; padding: 4px 14px; gap: 8px; }
.android-app .breadcrumbs { margin-right: auto; font-size: 12px; gap: 6px; flex-wrap: wrap; }
.android-app .today-text, .android-app .live-dot { display: none; }
.android-app .top-actions { gap: 4px; }
.android-app .page-footer { display: none; }

@media (max-width: 700px), (pointer: coarse) {
  .topbar { height: auto; min-height: 56px; padding: 6px 12px; gap: 8px; }
  .breadcrumbs { flex-wrap: wrap; min-width: 0; }
  .top-actions { flex-shrink: 0; gap: 4px; }
  .icon-button { min-width: 40px; min-height: 40px; }
  main { padding: 22px 16px; }
  .page-heading { gap: 16px; }
  .page-heading h1 { line-height: 1.5; overflow-wrap: anywhere; }
  .page-heading p { font-size: 12px; line-height: 1.8; }
  .heading-actions { flex-wrap: wrap; max-width: 100%; }
  .heading-actions .btn, .btn, .btn.small { min-height: 44px; font-size: 13px; white-space: normal; line-height: 1.5; }
  .btn svg, .card-label svg { flex-shrink: 0; }
  .text-button { min-height: 40px; line-height: 1.6; }
  .panel-heading, .section-title { flex-wrap: wrap; gap: 12px; }
  .panel-heading h3 { font-size: 15px; line-height: 1.6; }
  .segments { flex-wrap: wrap; max-width: 100%; }
  .segments button { min-height: 36px; font-size: 12px; line-height: 1.5; }
  .subnav { gap: 16px; }
  .subnav button { min-height: 44px; font-size: 14px; flex-shrink: 0; }
  .hero-copy { padding: 24px; }
  .hero-copy h2 { font-size: 24px; letter-spacing: 1px; }
  .hero-copy p { font-size: 12px; line-height: 1.8; }
  .hero-progress { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 22px; }
  .hero-progress:after { display: none; }
  .hero-progress h3 { font-size: 14px; }
  .progress-body { justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  .progress-ring { flex-shrink: 0; width: 84px; height: 84px; }
  .progress-body p { white-space: normal; font-size: 13px; margin: 0; }
  .hero-progress .progress-caption { font-size: 12px; line-height: 1.8; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-top { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .card-label { font-size: 13px; line-height: 1.6; flex-wrap: wrap; }
  .record-button { font-size: 12px; min-height: 36px; padding: 6px 10px; white-space: nowrap; position: relative; z-index: 1; }
  .stat-number { font-size: 30px; overflow-wrap: anywhere; line-height: 1.4; letter-spacing: -.5px; }
  .stat-number small { display: inline-block; font-size: 12px; }
  .stat-sub { font-size: 12px; }
  .stat-bottom { flex-wrap: wrap; gap: 8px; font-size: 11px; line-height: 1.6; }
  .large-number { overflow-wrap: anywhere; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .field > span, .field > label { font-size: 14px; line-height: 1.6; }
  .field input, .field select, .field textarea, .date-input, .search-row input { font-size: 16px; min-height: 46px; max-width: 100%; }
  .field small, .modal-description { font-size: 12px; line-height: 1.8; }
  .modal { border-radius: 18px; }
  .modal-header { padding: 16px 18px; }
  .modal-header h2 { font-size: 18px; }
  .modal-body { padding: 18px; }
  .modal .form-actions { gap: 12px; padding: 12px 0 4px; }
  .modal .form-actions .btn { flex: 1; min-height: 48px; font-size: 15px; }
  .batch-line, .batch-line:has([name=time]), .batch-line.water-line { grid-template-columns: minmax(0,1fr) 44px; gap: 12px; }
  .batch-line > .field, .batch-line:has([name=time]) > .field:first-child { grid-column: 1; }
  .batch-line > button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .meal-food-row { grid-template-columns: minmax(0,1fr) 44px; }
  .meal-food-row > .field, .meal-food-row .food-cal, .meal-food-row .portion { grid-column: 1; }
  .meal-food-row button { grid-column: 2; grid-row: 1 / 3; }
  .contact-line { grid-template-columns: minmax(0,1fr) 44px; }
  .contact-line .field { grid-column: 1; }
  .contact-line button { grid-column: 2; grid-row: 1 / 3; }
  .login-main { padding: 28px 22px; align-items: center; }
  .login-box { width: 100%; max-width: 420px; }
  .login-art { min-height: 140px; padding: 22px; }
  .login-manifesto h1 { font-size: 22px; }
  .login-box .btn { font-size: 15px; min-height: 48px; }
  .login-note { font-size: 12px; line-height: 1.8; }
  .category-grid, .book-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .category-card, .book-cover { overflow-wrap: anywhere; }
  .donut-layout { grid-template-columns: minmax(0,1fr); }
  .donut { max-width: 210px; margin: auto; }
  .calendar-day { min-height: 48px; }
  .upcoming-item { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 430px) {
  .stats-grid, .category-grid, .book-grid { grid-template-columns: minmax(0,1fr); }
  .card-top { align-items: center; }
  .stat-card { padding: 20px; }
  .login-art { display: none; }
  .login-main { padding-top: 36px; }
  .login-main:before { content: '树己 · 好好生活，慢慢成为自己'; display: block; color: #284f3d; font-size: 14px; margin-bottom: 28px; }
  .login-main { flex-direction: column; justify-content: flex-start; }
  .top-actions .avatar { display: none; }
}

@media (max-height: 450px) and (pointer: coarse) {
  .login-art { display: none; }
  .login-page { grid-template-columns: minmax(0,1fr); }
  .modal-header { padding-top: 10px; padding-bottom: 10px; }
}