/* Personal Organizer mobile-first refinements, v0.5.1.
   Shared by the Android APK WebView and the browser/PWA.
   Desktop layout is deliberately unchanged. */
@media (max-width: 770px) {
  :root { --top: 58px; --radius: 16px; }
  html, body { width:100%; overflow-x:clip; -webkit-text-size-adjust:100%; overscroll-behavior-x:none; }
  body { -webkit-tap-highlight-color:transparent; }
  button, a { touch-action:manipulation; }
  .topbar { min-height:58px; height:58px; padding:0 14px; gap:7px; }
  .brand { gap:8px; min-width:0; }
  .brand-glyph { width:34px; height:34px; border-radius:11px; flex:none; }
  .brand-letter { font-size:21px; }
  .brand-words strong { font-size:11px; letter-spacing:1.4px; }
  .brand-words small { font-size:7px; letter-spacing:1.1px; }
  .header-actions { gap:6px; }
  .header-actions .icon-button { min-width:38px; width:38px; height:38px; }
  .sync-pill { font-size:0; max-width:13px; white-space:nowrap; overflow:hidden; padding:9px 0; }
  .sync-pill .sync-dot { width:9px; height:9px; margin:0; vertical-align:middle; }
  .screen { padding:17px 14px calc(103px + env(safe-area-inset-bottom)); min-height:calc(100dvh - 58px); }
  .page-header { margin-bottom:16px; align-items:flex-start; gap:9px; }
  .page-title { font-size:clamp(24px,6.5vw,30px); letter-spacing:-.7px; line-height:1.1; }
  .page-subtitle { font-size:12px; line-height:1.55; }
  .eyebrow { font-size:9px; margin-bottom:6px; }
  .page-actions { justify-content:flex-start; width:100%; gap:7px; }
  .page-actions .btn { flex:0 1 auto; }
  .grid { gap:10px; }
  .grid-2 { grid-template-columns:1fr; }
  .panel, .record, .task-row, .stop-body { min-width:0; }
  .panel-pad { padding:16px; }
  .panel-head { gap:8px; align-items:flex-start; }
  .panel-title { line-height:1.4; }
  .hero { margin-bottom:12px; padding:18px 16px; border-radius:19px; }
  .hero h2 { font-size:clamp(22px,6vw,28px); }
  .hero p { font-size:12px; line-height:1.5; }
  .hero-inner { gap:9px; }
  .hero-actions { margin-top:14px; gap:8px; }
  .hero-actions .btn { padding:11px; }
  .ring { height:96px; width:96px; }
  .ring svg { height:96px; width:96px; }
  .ring-label strong { font-size:23px; }
  .ring-label small { font-size:7px; }
  .grid-4 { gap:9px; }
  .metric { padding:13px; min-height:115px; }
  .metric strong { font-size:22px; margin-top:9px; }
  .metric small { font-size:10px; }
  .metric .metric-foot { margin-top:8px; }
  .task-list { gap:7px; }
  .task-row { min-height:61px; gap:11px; padding:11px; border-radius:13px; }
  .task-tick { width:29px; height:29px; border-radius:9px; flex:0 0 29px; }
  .task-title { font-size:13px; line-height:1.4; }
  .task-meta { font-size:10px; line-height:1.55; gap:5px; }
  .task-arrow { width:18px; height:18px; }
  .record { padding:13px; gap:8px; border-radius:13px; }
  .record strong { font-size:13px; overflow-wrap:anywhere; }
  .record p { font-size:11px; }
  .record-side { gap:6px; }
  .btn { min-height:44px; padding:10px 13px; border-radius:11px; font-size:12px; }
  .btn.small { min-height:40px; padding:9px 12px; }
  .text-button { min-height:40px; }
  .searchbar { height:46px; font-size:16px; }
  .field input, .field select, .field textarea, .auth-panel input { font-size:16px; min-height:46px; }
  .field textarea { min-height:90px; }
  .pill-group { gap:7px; }
  .pill-group button { min-height:40px; }
  .route-shell { gap:11px; }
  .route-menu { margin:0 -14px; padding:0 14px 8px; scroll-snap-type:x proximity; }
  .route-link { min-width:150px; scroll-snap-align:start; }
  .stop { gap:9px; }
  .stop-rail { flex-basis:26px; }
  .stop-body { padding:12px; }
  .stop-top { align-items:flex-start; }
  .stop-controls button { min-width:40px; width:40px; height:40px; }
  .stop-top h4 { font-size:13px; }
  .stop-task { font-size:12px; line-height:1.4; }
  .modal-backdrop { padding:0; align-items:flex-end; }
  .modal { max-height:calc(100dvh - 16px); border-radius:20px 20px 0 0; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom); }
  .modal-top { padding:15px 16px; }
  .modal-top h2 { font-size:17px; }
  .modal-body { padding:15px 16px; }
  .modal-footer { padding:12px 16px; justify-content:stretch; }
  .modal-footer .btn { flex:1; }
  .mobile-dock { height:calc(69px + env(safe-area-inset-bottom)); padding:5px 7px env(safe-area-inset-bottom); box-shadow:0 -8px 30px rgba(0,0,0,.12); }
  .mobile-dock button { flex:1; min-width:0; min-height:56px; padding:6px 2px; font-size:10px; letter-spacing:0; border-radius:12px; gap:4px; }
  .mobile-dock button.active { background:color-mix(in srgb,var(--cyan) 12%,transparent); }
  .mobile-dock button svg { width:21px; height:21px; }
  .toast-host { bottom:calc(83px + env(safe-area-inset-bottom)); }
  .auth-overlay { padding:18px; }
  .auth-panel { padding:25px 21px; }
  .quick-links .quick-card { min-height:110px; padding:13px; }
}
@media (max-width: 360px) {
  .screen { padding-left:11px; padding-right:11px; }
  .brand-words strong { font-size:10px; }
  .brand-words small { letter-spacing:.5px; }
  .metric { padding:10px; }
  .hero { padding:15px 12px; }
  .ring, .ring svg { width:80px; height:80px; }
  .mobile-dock button { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
/* v0.5.1: keep location cards compact and readable on phones */
@media (max-width:770px){
 .location-group .panel-head{align-items:center}.location-group .task-row{min-height:57px}
 .option-manager-row .color-editor input[type=color]{min-width:49px;width:49px}
 .schedule-actions button{flex:1;min-height:40px}
}