/* Phones: the same compact feel as laptops (desktop.css), sized for
   fingers. Geist (its @font-face is in desktop.css), 15px text, tighter
   rows and smaller chrome. Taps stay at least 36px, and boxes you type
   into stay at 16px so iPhones don't zoom in on them. Loaded last on each
   page, so these win on narrow screens. */
@media (max-width: 959px) {
  html { font-size: 15px; }
  body {
    font: 15px/1.4 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  main { padding: 14px 14px 40px; }
  h1 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
  h1.section-title .section-path { font-size: 12px; }
  .card { border-radius: 10px; padding: 12px; }
  label { font-size: 13px; }
  input, select, textarea { padding: 8px 10px; font-size: 16px; }
  button { padding: 9px 14px; font-size: 14px; font-weight: 500; }
  button.link { font-size: inherit; }
  .msg { font-size: 13px; }

  /* The button row under the heading. */
  .page-bar { gap: 6px; margin-bottom: 10px; }
  .action { padding: 7px 10px; gap: 6px; font-size: 14px; font-weight: 500; border-radius: 8px; }
  .action svg { width: 16px; height: 16px; }
  .bar { margin: 8px 0 6px; }

  /* The task list. */
  .card:has(> #list) { padding: 0 12px; }
  li.item { padding: 9px 0; gap: 10px; }
  li.item .title { font-weight: 500; }
  .check, .pick { width: 20px; height: 20px; margin-top: 0; }
  .pick svg { width: 12px; height: 12px; margin: 2px; }
  .meta { font-size: 12.5px; gap: 2px 10px; }
  .notes { font-size: 13px; margin-top: 2px; }
  .due svg, .subs svg, .section-tag svg { width: 12px; height: 12px; }
  li.item > div:has(> .meta:empty:last-child) { min-height: calc(1lh + 12.5px * 1.4); }
  body.picking li.item.picked { box-shadow: -12px 0 0 var(--chip), 12px 0 0 var(--chip); }
  .pick-bar { padding: 6px 6px 6px 12px; border-radius: 10px; }
  .pick-bar button { padding: 8px 10px; }
  .pick-bar .quiet svg { width: 18px; height: 18px; }

  /* The notes list. */
  li.note a { padding: 9px 0; }
  li.note .title { font-weight: 500; }
  .meta, .snippet { font-size: 12.5px; }
  .bin svg { width: 16px; height: 16px; }
  .bin { margin-top: 8px; }

  /* Tab bar and + button. */
  :root { --tabbar-h: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .tabbar a { gap: 2px; font-size: 11px; font-weight: 500; }
  .tab-icon svg { width: 22px; height: 22px; }
  .fab { width: 50px; height: 50px; }
  .fab svg { width: 22px; height: 22px; }

  /* The task sheet and Add a task. */
  .drawer { padding: 14px; }
  .fields { gap: 10px; }
  .pair { gap: 10px; }
  #t-title { font-size: 16px; font-weight: 600; }
  #t-notes-view { padding: 8px 10px; min-height: 52px; font-size: 14px; }
  #t-meta, .remind-hint { font-size: 12px; }
  #t-subs li { gap: 10px; padding: 0; }
  #t-subs input:not(.check), #t-sub-new { padding: 7px 2px; }
  .sub-add svg { width: 18px; height: 18px; }
  .section-choose { padding: 8px 10px; gap: 8px; }
  .section-choose svg, .section-choices svg { width: 15px; height: 15px; }
  .section-choices button { padding: 8px 8px 8px calc(8px + var(--depth, 0) * 14px); }
  #add-form { gap: 8px; }
  .add-done { padding: 8px 14px; }
  .add-opts { gap: 6px; }
  .opt { padding: 6px 10px; gap: 5px; font-size: 13px; }
  .opt svg { width: 15px; height: 15px; }
  /* The marks behind the title have to match the box's 16px text. */
  .qa-mirror { padding: 8px 10px; font-size: 16px; }
  .qa-chip, button.qa-chip.qa-off { font-size: 12.5px; }
  .qa-chip > svg { width: 14px; height: 14px; }
  .qa-hint { padding: 9px 8px; gap: 8px; }
  .qa-hint svg { width: 15px; height: 15px; }

  /* The sections drawer. */
  .sections-drawer .tree-pick { padding: 8px; gap: 8px; font-weight: 500; }
  .tree-pick svg, .tree-fold svg, .tree-more svg, .sections-new svg { width: 16px; height: 16px; }
  .sections-drawer .sections-new { padding: 8px; font-weight: 500; }
  .sections-head h2 { font-size: 1.05rem; }

  /* The note editor. */
  #note-title { font-size: 17px; }
  #note-section { padding: 5px 30px 5px 10px; font-size: 13px; }

  /* Home. */
  .stat { padding: 12px; border-radius: 10px; }
  .stat .num { font-size: 2.1rem; font-weight: 600; }
  .stat .label { font-size: 12.5px; }
  #reminders h2 { font-size: 15px; }

  /* The delete question. */
  dialog.confirm { padding: 16px; border-radius: 12px; }
  dialog.confirm p { font-size: 15px; margin-bottom: 14px; }
  .confirm-actions button { padding: 9px 12px; font-size: 14px; font-weight: 500; border-radius: 8px; }

  .md { font-size: 14px; }
}