/*
 * InkPick — responsive.css
 * Phone layout (narrow screens).
 */

/* ============================================================
   8. MOBILE LAYOUT (phones / narrow windows)
   The page keeps its journal look but: tabs scroll horizontally,
   the pick button spans the full width, the gutter narrows, and
   dialogs use the whole screen width.
   ============================================================ */
@media (max-width: 600px) {
  html { font-size: 16.5px; }
  .topbar { padding: .8rem .8rem .2rem; }
  .brand { font-size: 1.3rem; }

  .tabs { padding: 0 .8rem 2px; }

  .sheet { padding: .9rem .7rem 1.2rem 56px; border-radius: 0;
    border-left: none; border-right: none; }
  .margin-line { left: 44px; }
  .marker { left: 4px; width: 34px; }

  .pickbar { margin-left: -48px; gap: 20px; } /* button spans 8-42px: clear of the line at 44px */
  .pick-btn { width: 34px; height: 34px; font-size: 1.1rem; }
  .pick-hint { font-size: 1.2rem; }

  .addrow .bullet-new { display: none; }
  .addrow { gap: .4rem; }
  .addrow .btn { padding: .35rem .7rem; flex: none; }

  dialog { padding: .9rem; max-width: 96vw; }
  .field.row { flex-wrap: nowrap; }
  .field.row .btn { flex: 1; min-width: 0; padding-inline: .5rem; }
  .ink-pad { height: 170px; }
  .pen-row { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .pen-label { min-width: 0; }
  .dialog-actions .btn { flex: 1; }
  .dialog-actions .spacer { display: none; }
}