/* ── RESPONSIVE.CSS — Mobile & Tablet ── */

/* ── MOBILE NAV BAR (bottom) ── */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--mobile-nav-h);background:var(--surface);border-top:1px solid var(--border);z-index:200;align-items:stretch}
.mobile-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;color:var(--text3);font-size:10px;font-family:inherit;transition:color .15s;padding:6px 0}
.mobile-nav-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.mobile-nav-btn.active{color:var(--accent)}
.mobile-nav-btn span{font-size:10px;font-weight:500}

/* ── GOALS DRAWER (mobile slide-up) ── */
.goals-drawer{display:none;position:fixed;inset:0;z-index:300;pointer-events:none}
.goals-drawer.open{pointer-events:all}
.goals-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .25s}
.goals-drawer.open .goals-drawer-backdrop{opacity:1}
.goals-drawer-panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:16px 16px 0 0;padding:16px 16px calc(16px + var(--mobile-nav-h));max-height:80vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,0,.67,0)}
.goals-drawer.open .goals-drawer-panel{transform:translateY(0)}
.drawer-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 16px}
.drawer-title{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:var(--text);margin-bottom:14px;padding:0 4px}

@media (max-width: 768px) {
  /* Hide desktop sidebar */
  .sidebar{display:none}
  /* Single column */
  .app{grid-template-columns:1fr;min-height:calc(100vh - var(--mobile-nav-h))}
  /* Shrink main header */
  .main-header{padding:0 16px;height:52px}
  .main-title{font-size:15px;max-width:40%}
  .header-actions{gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;max-width:60%}
  .header-actions::-webkit-scrollbar{display:none}
  .btn-sm{padding:4px 8px;font-size:11px}
  .mode-switch{margin-right:2px}
  .mode-tab{padding:5px 9px;font-size:11px}
  .minimized-bar{padding:6px 16px}
  .min-chip-path{display:none}
  /* Focus mode padding */
  .focus-mode{padding:16px;gap:12px;padding-bottom:calc(var(--mobile-nav-h) + 16px)}
  /* QuickBoard padding + touch-friendly notes */
  .quickboard-mode{padding:16px;padding-bottom:calc(var(--mobile-nav-h) + 16px)}
  .sticky-note{min-width:180px}
  /* Show mobile nav */
  .mobile-nav{display:flex}
  /* Show goals drawer */
  .goals-drawer{display:block}
  /* Timer smaller */
  .timer-display{font-size:40px}
  .active-task-title{font-size:20px}
  /* Timer controls wrap */
  .timer-controls{gap:6px}
  .timer-controls .btn{flex:1;justify-content:center;min-width:0;text-align:center}
  /* Task row actions always visible on mobile */
  .task-row-actions{opacity:1}
  /* Toast */
  .toast-container{top:auto;bottom:calc(var(--mobile-nav-h) + 12px);right:12px;left:12px}
  .toast{max-width:100%}
  /* Modal full width */
  .modal{max-width:100%;border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;margin:0;max-height:92vh}
  .modal-overlay{align-items:flex-end;padding:0}
  /* Form row stack on tiny screens */
  .form-row{grid-template-columns:1fr}
  /* Progress section */
  .progress-pct{font-size:17px}
  /* Section title smaller */
  .section-title{font-size:11px}
}

@media (max-width: 480px) {
  .timer-display{font-size:34px}
  .active-task{padding:16px}
  .task-list-section{padding:12px 14px}
  .focus-mode{padding:12px;padding-bottom:calc(var(--mobile-nav-h) + 12px)}
  .main-header{padding:0 12px}
}