/* Quick-add sheet (all sizes), then phone-first rules (<680px): tab bar, FAB, large titles, bottom sheets. */

.tabbar, .fab { display: none; }

.qa-overlay {
  position: fixed; inset: 0; z-index: 65; background: var(--overlay); animation: fade-in var(--dur-2) both;
  display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px;
}
.qa-overlay.is-closing { animation: fade-out var(--dur-1) both; }
.qa-sheet { --kb: 0px; width: min(640px, 100%); animation: pop-in var(--dur-3) var(--ease-out) both; }
.qa-sheet .quickadd { margin: 0; box-shadow: var(--shadow-sheet); }
.qa-sheet .grabber { display: none; }

@media (max-width: 679.98px) {
  html, body { overflow: hidden; }
  .app { height: 100dvh; }
  .sidebar { display: none; }
  body.sidebar-open .sidebar-scrim { display: none; }
  .sidebar-toggle { display: none !important; }

  /* nav bar + large title */
  .navbar {
    min-height: calc(var(--navbar-h) + var(--safe-top)); padding: var(--safe-top) 8px 0 calc(8px + var(--safe-left));
    gap: 4px; position: absolute; top: 0; left: 0; right: 0;
  }
  .nav-title {
    position: absolute; left: 25%; right: 25%; bottom: 0; height: var(--navbar-h); justify-content: center; gap: 6px;
    font: 600 17px/22px var(--font-text); opacity: 0; transition: opacity var(--dur-2); pointer-events: none;
  }
  .nav-title .title-icon, .nav-title .dot, .nav-title .title-emoji { display: none; }
  .navbar.is-scrolled .nav-title { opacity: 1; }
  .navbar:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-back {
    display: inline-flex; align-items: center; gap: 0; border: 0; background: transparent; color: var(--tint); font: 400 17px/22px var(--font-text);
    min-height: var(--tap); padding: 0 8px 0 0; margin-left: -4px; z-index: 1;
  }
  .nav-actions { margin-left: auto; gap: 0; z-index: 1; }
  .nav-actions .icon-btn { width: var(--tap); height: var(--tap); color: var(--tint); }
  .nav-actions .avatar-stack { min-height: var(--tap); }
  .main-scroll { padding-top: calc(var(--navbar-h) + var(--safe-top)); }
  .large-title { display: block; padding: 2px 16px 6px calc(16px + var(--safe-left)); }
  .large-title-text { display: flex; align-items: center; gap: 10px; font: var(--t-large); letter-spacing: var(--tr-large); }
  .large-title-text .title-text { overflow-wrap: anywhere; }
  .large-title-text .dot-lg { width: 14px; height: 14px; }
  .large-title-text .title-icon .icon { width: 28px; height: 28px; }
  .content { padding: 4px 16px calc(var(--tabbar-h) + var(--safe-bottom) + 96px) calc(16px + var(--safe-left)); }
  .main-scroll.is-module .content { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px); padding-inline: 0; }

  /* tab bar */
  .tabbar {
    display: flex; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    border-top: var(--hairline) solid var(--separator);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tabbar-h);
    color: var(--label-2); text-decoration: none; font: 500 10px/12px var(--font-text); padding-top: 4px;
  }
  .tab.is-active { color: var(--tint); }
  .tab-icon { position: relative; display: inline-flex; }
  .tab-badge {
    position: absolute; top: -4px; left: 16px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pill);
    background: var(--red-fill); color: #fff; font: 700 11px/17px var(--font-text); text-align: center;
  }
  .tab-badge.is-quiet { background: var(--label-3); }
  .tab-badge:not(.is-alert):not(.is-quiet) { background: var(--tint); }

  /* FAB */
  .fab {
    display: grid; place-items: center; position: fixed; z-index: 21; right: calc(18px + var(--safe-right));
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); width: 56px; height: 56px; border-radius: 50%; border: 0;
    background: var(--accent-fill); color: #fff; box-shadow: 0 6px 18px rgb(0 113 227 / 38%), 0 2px 6px rgb(0 0 0 / 15%);
    transition: transform var(--dur-2) var(--ease-spring);
  }
  .fab:active { transform: scale(.92); }
  body.has-detail .fab { display: none; }

  .toasts { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 84px); }

  /* lists: 44px targets, no hover-only affordances */
  .task-inner { padding: 11px 2px; gap: 12px; min-height: 48px; }
  .check { width: 24px; height: 24px; margin-top: -1px; }
  .task-meta { gap: 4px 12px; }
  .chip { font-size: 13px; }
  .group-head { min-height: 44px; }
  .group-head .icon-btn { width: var(--tap); height: var(--tap); }
  .add-row, .add-section { min-height: var(--tap); }
  .quickadd { margin-bottom: 14px; }
  .qa-tool-label { display: none; }
  .qa-tool { min-height: 40px; min-width: 44px; justify-content: center; }
  .nav-item { min-height: var(--tap); }
  .seg-btn { min-height: 32px; }
  .seg-label { display: none; }
  .today-greeting { font: var(--t-title3); }
  .tg-inline, .role-select, .label-input, .section-rename, .side-search input { font-size: 16px; }
  .btn-sm { min-height: 34px; font-size: 14px; }

  /* bottom sheets: dialogs and popovers */
  .overlay { place-items: end center; padding: 0; padding-top: calc(var(--safe-top) + 24px); }
  .modal, .modal-wide, .modal-small {
    width: 100%; max-height: calc(100dvh - var(--safe-top) - 24px); border-radius: 14px 14px 0 0;
    animation: sheet-up var(--dur-3) var(--ease-sheet) both; transform: translateY(var(--drag));
  }
  .modal.is-open, .modal.is-dragging { animation: none; }
  .modal.is-settling { transition: transform var(--dur-3) var(--ease-sheet); }
  .modal.is-leaving { transform: translateY(100%); transition: transform var(--dur-2) var(--ease-io); }
  .modal-head { padding-top: 18px; touch-action: none; }
  .grabber { display: block; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--fill-1); }
  .modal-body { padding-bottom: calc(20px + var(--safe-bottom)); }
  .sheet-menu .modal-body { padding: 0 8px calc(12px + var(--safe-bottom)); }
  .sheet-menu .menu-item { min-height: 48px; font-size: 17px; }
  .sheet-menu .date-picker { min-width: 0; }
  .popover-notif { width: auto; }

  /* detail: full-height bottom sheet */
  .detail-host {
    top: calc(var(--safe-top) + 10px); left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; overflow: hidden;
    animation: sheet-up var(--dur-3) var(--ease-sheet) both; box-shadow: 0 -10px 40px rgb(0 0 0 / 25%);
  }
  body.has-detail .main-col::after { content: ''; position: fixed; inset: 0; background: var(--overlay); z-index: 25; animation: fade-in var(--dur-2) both; }
  .detail { transform: translateY(var(--drag)); }
  .detail.is-settling { transition: transform var(--dur-3) var(--ease-sheet); }
  .detail-head { padding-top: 18px; touch-action: none; }
  .detail-head .icon-btn { width: var(--tap); height: var(--tap); }
  .detail-scroll { padding-inline: 16px; }
  .detail-title { font: var(--t-title3); }
  .prop-label { width: 104px; }
  .due-quick { padding-left: 12px; }
  .detail-notes { margin-left: 0; width: 100%; }
  .comment-input { font-size: 16px; }

  /* quick-add sheet sits on the keyboard */
  .qa-overlay { padding: 0; align-items: flex-end; }
  .qa-sheet {
    width: 100%; margin-bottom: var(--kb); border-radius: 14px 14px 0 0; background: var(--surface); padding: 14px 4px calc(6px + var(--safe-bottom));
    animation: sheet-up var(--dur-3) var(--ease-sheet) both; transition: margin-bottom var(--dur-1) linear;
  }
  .qa-sheet .grabber { display: block; top: 5px; }
  .qa-sheet .quickadd { box-shadow: none; }
  .qa-sheet .qa-tools { border-top: 0; }

  .card { padding: 16px; }
  .page-projects .btn-block { margin-top: 4px; }
  .auth-card { padding: 28px 20px 22px; }
}