/* ==========================================================================
   Pulse — phones and tablets. Loaded last, so it refines everything above.

   ≤ 980px   the sidebar becomes the bottom bar: shell, safe areas
   ≤ 720px   phones: readable type, full-width controls, bottom sheets
   touch     no sticky hover effects, finger-sized targets, press feedback
   ========================================================================== */

html {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
select,
textarea,
[role='button'] {
  touch-action: manipulation; /* no double-tap zoom delay */
}

/* Overview rows group their chips (.habit-tags) for the phone layout below; on wider
   screens the group dissolves into the row as before, and the due date shows on the right. */
.habit-tags {
  display: contents;
}

.due-inline {
  display: none;
}

/* Sign-in and loading screens clear the notch and home indicator. */
.login {
  padding-top: calc(64px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.login-qlooq {
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
}

.login-theme {
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
}

/* --------------------------------------------------------------------------
   Shell (bottom bar layout)
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .topbar {
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .view {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* Bottom bar: an icon with a pill behind it when active, and a short label. */
  .mobile-nav {
    gap: 2px;
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    box-shadow: none;
  }

  .mobile-nav-item {
    position: relative;
    isolation: isolate;
    justify-content: flex-start;
    gap: 4px;
    min-height: 54px;
    padding: 4px 0 3px;
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    background: none;
    transition: color 0.2s ease;
  }

  .mobile-nav-item span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-item .material-symbols-outlined {
    font-size: 23px;
    line-height: 30px;
    transition: transform 0.25s var(--spring), font-variation-settings 0.2s ease;
  }

  .mobile-nav-item.active {
    color: var(--accent-bright);
    background: none;
  }

  .mobile-nav-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
  }

  .mobile-nav-item.active::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 50%;
    width: 46px;
    height: 30px;
    margin-left: -23px;
    border-radius: 15px;
    background: rgba(var(--accent-rgb), 0.16);
    animation: nav-pill 0.32s var(--spring);
  }

  .mobile-nav-item:active .material-symbols-outlined {
    transform: scale(0.88);
  }

  @keyframes nav-pill {
    from { transform: scaleX(0.4); opacity: 0; }
  }

  .toast-wrap {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .view {
    padding-top: 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .page {
    gap: 14px;
  }

  .topbar {
    height: calc(58px + env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 8px;
  }

  .topbar-right {
    gap: 6px;
  }

  /* The sync chip keeps its word (SYNCED, LOCAL, RECONNECT…) — a bare dot says nothing on
     a phone. The logo alone carries the brand to make room. */
  .drive-status-label {
    display: inline-block !important;
  }

  .drive-status {
    gap: 6px;
    padding: 0 10px !important;
  }

  .toast-wrap {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(78px + env(safe-area-inset-bottom));
  }

  /* Page header: compact so the first card or list is visible without scrolling. */
  .page-head {
    gap: 10px;
  }

  .page-heading {
    gap: 3px;
  }

  .page-head .eyebrow {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .page-title {
    font-size: 22px;
  }

  .page-sub {
    font-size: 12px;
    line-height: 1.45;
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  /* Hero: a compact status strip. Greeting on top, then the three stats side by side as
     equal small tiles; Execution's ring shrinks to a badge in its tile's corner. */
  .hero {
    padding: 12px;
  }

  .hero .hero-inner {
    gap: 10px;
  }

  .hero .hero-copy {
    gap: 4px;
  }

  .hero .hero-eyebrow .chip {
    padding: 2px 7px;
    font-size: 8.5px;
  }

  .hero .hero-title {
    font-size: 20px;
  }

  .hero .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .hero .hero-stat {
    position: relative;
    min-width: 0;
    padding: 9px 10px 8px;
    gap: 5px;
    overflow: hidden;
  }

  .hero .hero-stat.with-ring {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .hero .hero-stat.with-ring .ring {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 18px !important;
    height: 18px !important;
  }

  .hero .hero-stat.with-ring .ring svg {
    width: 100%;
    height: 100%;
  }

  .hero .hero-stat.with-ring .ring-label {
    display: none;
  }

  .hero .hero-stat-copy {
    min-width: 0;
    gap: 5px;
  }

  .hero .hero-stat-top {
    font-size: 8px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .hero .hero-stat.with-ring .hero-stat-top {
    padding-right: 18px;
  }

  .hero .hero-stat-top .material-symbols-outlined {
    display: none;
  }

  .hero .hero-stat-value {
    font-size: 19px;
  }

  .hero .hero-stat-value small {
    font-size: 8px;
  }

  .hero .hero-stat-foot {
    font-size: 9px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Header buttons keep their natural width — stretched across the screen they read as
     heavy bars rather than buttons. */
  .page-actions > .btn {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 13px;
    font-size: 12.5px;
  }

  .page-actions > .chip {
    flex: none;
  }

  /* Task quick-add: Add becomes a compact button at the end of the title field (like a send
     button), so priority and date can share the row below at full readable width. */
  .task-quickadd {
    position: relative;
  }

  .task-quickadd-main .input {
    padding-right: 58px;
  }

  .task-quickadd-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .task-quickadd-controls .pulse-select,
  .task-quickadd-controls .pulse-date {
    width: auto !important;
    min-width: 0 !important;
  }

  .task-quickadd-controls .btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 46px;
    height: 34px;
    padding: 0;
    font-size: 0; /* icon only; the word stays for screen readers */
    border-radius: 9px;
  }

  .task-quickadd-controls .btn .material-symbols-outlined {
    font-size: 20px;
  }

  /* Data vault: two buttons per row instead of four full-width bars. */
  .data-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-actions .btn {
    justify-content: center;
  }

  /* "Open task queue" / "Open activity tracker" under a list: a quiet link-sized button. */
  .btn-ghost.btn-block {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
  }

  /* Overview rows (Habits / Activities / Tasks tabs): name on its own line (up to two lines),
     chips under it, actions beside or below — instead of one cramped, truncated line. */
  .overview-panel .habit-row {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas:
      'check name name'
      'check tags meta'
      'check prog prog';
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
  }

  .overview-panel .habit-row .habit-check {
    grid-area: check;
    align-self: start;
  }

  .overview-panel .habit-row .habit-main,
  .overview-panel .habit-row .habit-name {
    display: contents;
  }

  .overview-panel .habit-row .name {
    grid-area: name;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    padding-top: 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.32;
  }

  .overview-panel .habit-row:has(.habit-kebab) .name {
    padding-right: 30px;
  }

  .overview-panel .habit-row .habit-tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 8px;
  }

  .overview-panel .habit-row .habit-tags .tag-chip {
    max-width: 100%;
  }

  .overview-panel .habit-row .habit-desc {
    display: none;
  }

  .overview-panel .habit-row .habit-progress {
    grid-area: prog;
    max-width: none;
    margin-top: 10px;
  }

  .overview-panel .habit-row .habit-meta {
    grid-area: meta;
    align-self: end;
    gap: 6px;
    margin-top: 8px;
  }

  .overview-panel .habit-row .habit-kebab {
    position: absolute;
    top: 8px;
    right: 6px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  /* Activities: quick-log buttons get their own row, sharing it evenly. */
  .overview-panel .activity-row {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas:
      'check name'
      'check tags'
      'check prog'
      'check meta';
  }

  .overview-panel .activity-row .habit-meta {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-self: stretch;
    margin-top: 10px;
  }

  .overview-panel .activity-row .habit-meta:not(:has(.log-btn)) {
    display: none;
  }

  .overview-panel .activity-row .log-btn {
    justify-content: center;
    height: 32px;
  }

  /* Tasks: priority and due date side by side under the title. */
  .overview-panel .task-overview-row {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas:
      'check name'
      'check tags';
  }

  .overview-panel .task-overview-row > .habit-meta {
    display: none;
  }

  .overview-panel .habit-tags .due-inline {
    display: contents;
  }

  /* Filters + category + search: chips scroll on one line, then the controls share a row. */
  .habit-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .habit-toolbar > .row {
    width: 100%;
    flex-wrap: nowrap;
  }

  .habit-toolbar > .row > .pulse-select {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 46%;
  }

  .habit-toolbar > .row > .input-group {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
  }

  /* Readable type: the desktop's micro labels (6.5–9px) are too small on a phone. */
  .chip,
  .tag-chip,
  .legend-pct,
  .task-group-title > span,
  .profile-email,
  .hero-stat-foot,
  .streak-chip {
    font-size: 9.5px;
  }

  .filter-chip,
  .seg-btn,
  .log-btn,
  .preset-btn,
  .zen-toggle,
  .habit-card-rate,
  .habit-card-today,
  .task-group-count,
  .field > label,
  .open-loop-meta,
  .activity-kpi-top,
  .kpi-top > span,
  .hero-stat-top,
  .stack-count,
  .device-line > span,
  .circadian-meta > span,
  .note-saved,
  .note-foot > span,
  .heatmap-note,
  .donut-center > span,
  .timer-session-label > span,
  .timer-mode,
  .timer-sub,
  .corr-confidence,
  .corr-meta,
  .focus-meta,
  .rel-rate-top > span,
  .rel-rate-top > strong,
  .cadence-label,
  .modal-eyebrow,
  .account-mini-sub,
  .mono {
    font-size: 9.5px;
  }

  .habit-mini-stat span,
  .sync-status-item > span,
  .focus-metric-copy > span,
  .rel-name > span,
  .rel-vol,
  .rel-foot > span,
  .cadence-value,
  .chart-labels > span,
  .heatmap-months > span,
  .heatmap-daylabels > span,
  .heatmap-legend > span,
  .habit-mini-stat strong small,
  .hero-stat-value small,
  strong > small {
    font-size: 8.5px;
    letter-spacing: 0.05em;
  }

  .week-day .wd-label {
    font-size: 8px;
  }

  .cadence-mini {
    gap: 3px;
  }

  .cadence-mini span {
    width: 20px;
    height: 20px;
    font-size: 8.5px;
  }

  /* Labels with an inline micro size in the markup. */
  [style*='font-size:6.5px'],
  [style*='font-size: 6.5px'],
  [style*='font-size:7px'],
  [style*='font-size: 7px'],
  [style*='font-size:7.5px'],
  [style*='font-size: 7.5px'] {
    font-size: 8.5px !important;
  }

  [style*='font-size:8px'],
  [style*='font-size: 8px'],
  [style*='font-size:8.5px'],
  [style*='font-size: 8.5px'] {
    font-size: 9.5px !important;
  }

  /* Dialogs are bottom sheets: full width, rising from the bottom edge, with a grab bar
     (drag it down to close — js/ui.js). */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .modal,
  .modal-sm,
  .modal-md,
  .modal-lg {
    max-width: 100%;
  }

  .modal {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top));
    min-height: 0;
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1);
  }

  .modal-backdrop.open .modal {
    transform: none;
  }

  /* The sheet slides all the way back down when it closes. */
  .modal-backdrop:not(.open) .modal {
    transform: translateY(100%);
    transition-duration: 0.22s, 0.2s;
  }

  .modal-head {
    position: relative;
    padding: 24px 18px 0;
    touch-action: none;
  }

  .modal-head::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 99px;
    background: rgba(var(--tint-rgb), 0.22);
  }

  .modal-title {
    font-size: 20px;
  }

  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 18px 16px;
  }

  .modal-foot {
    gap: 8px;
    padding: 12px 16px 14px;
  }

  .modal-foot .foot-note {
    flex: 1 0 100%;
    margin: 0 0 2px;
    text-align: center;
  }

  .modal-foot .foot-note:empty {
    display: none;
  }

  .modal-foot .btn {
    flex: 1 1 0;
    min-height: 44px;
    justify-content: center;
  }

  /* Short phones: keep the header and footer slim so the form body can scroll. */
  @media (max-height: 700px) {
    .modal-head {
      padding-top: 19px;
    }

    .modal-head::before {
      top: 6px;
    }

    .modal-body {
      padding: 10px 16px 12px;
    }

    .modal-foot {
      padding: 10px 14px 12px;
    }

    .modal-foot .btn {
      min-height: 40px;
    }
  }

  /* Dropdowns, date and time pickers open as sheets along the bottom edge. */
  .control-pop {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: 62dvh;
    overflow-y: auto;
    border-radius: 18px;
    transform-origin: center bottom !important;
  }

  /* Top-bar banners (streak calendar, Drive status) drop down from the top bar, full width. */
  .streak-banner,
  .drive-pop {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    top: calc(64px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    max-height: calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    transform-origin: center top !important;
  }

  .cards-pop {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 40px - env(safe-area-inset-top));
    overflow-y: auto;
  }

  /* Command palette: at the top, leaving room for the keyboard below. */
  .palette-backdrop {
    padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  }

  .palette-results {
    max-height: 50dvh;
  }

  .palette-foot {
    display: none;
  }
}

@media (max-width: 420px) {
  .mobile-brand .brand-name {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Touch screens
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  /* Finger-sized targets (about 36–44px). */
  .icon-btn {
    width: 38px;
    height: 38px;
  }

  .btn-sm,
  .activity-quick .btn-sm {
    height: 36px;
  }

  .filter-chip {
    height: 34px;
    padding: 0 12px;
  }

  .seg-btn {
    min-height: 36px;
  }

  .preset-btn {
    min-height: 34px;
    padding-left: 11px;
    padding-right: 11px;
  }

  .log-btn {
    height: 30px;
    padding: 0 9px;
  }

  .habit-check {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .open-loop .habit-check {
    width: 28px;
    height: 28px;
  }

  .objective-check {
    width: 22px;
    height: 22px;
  }

  .zen-toggle {
    height: 34px;
  }

  .task-group-head {
    min-height: 40px;
    align-items: center;
  }

  .drive-status,
  .streak-chip {
    height: 38px;
  }

  .drive-status {
    min-width: 38px;
    justify-content: center;
  }

  .search-trigger {
    height: 38px;
  }

  .about-qlooq-links a {
    height: 34px;
  }

  .menu-item,
  .control-option {
    min-height: 42px;
  }

  .palette-item {
    min-height: 46px;
  }

  /* Text fields at 16px so phones don't zoom the page in when one is focused. */
  .input,
  textarea,
  input[type='search'],
  input[type='text'],
  input[type='number'],
  .palette-input input {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   No hover: a tap leaves the finger's last position "hovered", so lifts and nudges
   would stick. Remove them, reveal hover-only controls, and give a press instead.
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .template-card:hover,
  .habit-card:hover,
  .hero-stat:hover,
  .nav-item:hover,
  .btn:not(:disabled):hover,
  .btn:not(:disabled):hover .material-symbols-outlined,
  .icon-btn:hover,
  .icon-btn:hover .material-symbols-outlined,
  .theme-toggle:hover .material-symbols-outlined,
  html[data-theme='light'] .theme-toggle:hover .material-symbols-outlined,
  .day-preset:hover,
  .preset-btn:hover,
  .swatch:hover,
  .type-card:hover,
  .habit-row:hover,
  .habit-check:hover,
  .tl-item:hover,
  .rel-row:hover,
  .week-day:hover,
  .session-item:hover,
  .objective:hover,
  .heat-cell:hover,
  .cadence-bar:hover,
  .legend-item:hover,
  .menu-item:hover,
  .palette-item:hover,
  .toast:hover,
  .accent-swatch:hover,
  .qlooq-chip:hover,
  .qlooq-badge:hover,
  .dev-badge:hover,
  .about-dev:hover,
  .about-dev:hover .about-go,
  .about-qlooq-card:hover .about-go,
  .btn-google:hover:not(:disabled),
  .drive-status.is-auth:hover {
    transform: none;
  }

  .objective-remove {
    opacity: 1;
    padding: 6px;
    margin-right: -6px;
  }

  .habit-card:active,
  .habit-row:active,
  .tl-item:active,
  .template-card:active,
  .type-card:active,
  .week-day:active,
  .hero-stat:active,
  .session-item:active,
  .objective:active,
  .about-dev:active,
  .account-mini:active {
    transform: scale(0.985);
    transition-duration: 0.1s;
  }

  .btn:not(:disabled):active,
  .filter-chip:active,
  .seg-btn:active,
  .preset-btn:active,
  .log-btn:active {
    transform: scale(0.96);
    transition-duration: 0.1s;
  }
}