Phones: list grids size their columns with minmax(0, 1fr) (or a min(…, 100%) minimum), so one long line can never widen a page past the screen (#162)

ddiff --git a/public/directory.css b/public/directory.css
iindex f53d8a7..a6eff32 100644
---- a/public/directory.css
++++ b/public/directory.css
@@@ -27,7 +27,7 @@
  .dir-btn.dir-primary { background: var(--accent-strong, var(--accent, #3472d8)); border-color: transparent; color: var(--on-accent-strong, #fff) !important; }
  .dir-btn.dir-primary:hover { filter: brightness(1.08); }
  
--.dir-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
++.dir-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
  .dir-card { background: var(--bg-secondary, #101828); border: 1px solid var(--border, #1f2d47); border-radius: 14px; display: flex; flex-direction: column; transition: border-color .15s; }
  .dir-card:hover { border-color: var(--accent, #3b82f6); }
  .dir-card-link { display: grid; gap: 6px; padding: 16px 18px 10px; color: inherit !important; text-decoration: none; }
@@@ -48,7 +48,7 @@
  .dir-state[data-state="online"] { color: #22c55e; }
  .dir-state[data-state="online"] .dir-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
  
--.dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
++.dir-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dir-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; border: 1px solid var(--border, #1f2d47); border-radius: 12px; background: var(--bg-secondary, #101828); }
  .dir-row > a b { font-size: 15.5px; }
  .dir-row-actions { margin-left: auto; font-size: 14px; }
@@@ -95,7 +95,7 @@
  
  /* /setup/sd-card: a robot from a blank microSD card (server/web/sd-card.js, public/sd-card.js). */
  .sd-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 760px; }
--.sd-steps { list-style: none; counter-reset: sd-step; margin: 0 0 30px; padding: 0; display: grid; gap: 18px; max-width: 860px; }
++.sd-steps { list-style: none; counter-reset: sd-step; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 860px; }
  .sd-step { counter-increment: sd-step; position: relative; padding: 18px 20px 18px 64px; border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-secondary, #101828); }
  .sd-step::before { content: counter(sd-step); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--accent-strong, var(--accent, #3472d8)); color: var(--on-accent-strong, #fff); }
  .sd-step > h2 { font-size: 19px; letter-spacing: -.01em; margin: 4px 0 12px; }
ddiff --git a/public/panel.css b/public/panel.css
iindex 548ac84..e3e9e39 100644
---- a/public/panel.css
++++ b/public/panel.css
@@@ -202,7 +202,7 @@ main { padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(saf
  /* ── Robots and pairing pages ───────────────────────────────────────────────────────────────────────── */
  .page { max-width: 44rem; }
  .page > h1 { margin: 0.5rem 0 1.25rem; }
--.robots { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
++.robots { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .robot-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .robot-name { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap); color: var(--text); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
  .robot-name .icon { color: var(--accent); }
@@@ -226,7 +226,7 @@ main { padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(saf
  .pair-status[data-state="online"] { border-color: rgba(63, 185, 80, 0.6); background: rgba(63, 185, 80, 0.1); }
  .pair-status[data-state="online"] .dot { background: var(--ok); animation: none; }
  .pair-status .button { margin-left: auto; }
--.steps { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; counter-reset: step; }
++.steps { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; counter-reset: step; }
  .steps > li { counter-increment: step; }
  .steps h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--text); }
  .steps h2::before { content: counter(step); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--fill-accent); color: var(--on-fill-accent); font-size: 0.85rem; }
@@@ -264,14 +264,14 @@ main { padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(saf
  .kits { margin-top: 1.75rem; }
  .kits > h2 { margin-bottom: 0.25rem; }
  .kits > .muted { margin: 0 0 0.85rem; }
--.kit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
++.kit-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .kit { display: grid; gap: 0.6rem; }
  .kit-head { display: flex; gap: 0.75rem; align-items: flex-start; }
  .kit-icon { width: 2.5rem; height: 2.5rem; flex: none; padding: 0.45rem; border-radius: 10px; color: var(--accent); background: var(--raised); }
  .kit h3 { margin: 0 0 0.3rem; font-size: 1.05rem; line-height: 1.3; }
  .kit-desc { margin: 0; color: var(--muted); font-size: 0.92rem; }
  .kit-parts summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; gap: 0.35rem; }
--.kit-parts ul { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
++.kit-parts ul { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .kit-parts li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.4rem; font-size: 0.92rem; }
  .kit-parts small { display: block; color: var(--muted); font-size: 0.82rem; }
  .part-qty { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
@@@ -286,7 +286,7 @@ main { padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(saf
  @media (prefers-reduced-motion: reduce) { .kit-parts summary::before { transition: none; } }
  
  /* The owner's People card and the turn-queue strip. */
--.people-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.4rem; }
++.people-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .person { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); }
  .person .who { display: grid; min-width: 0; } .person .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person .who small { color: var(--muted); font-size: 0.82rem; }
  .people-add { display: flex; flex-wrap: wrap; gap: 0.5rem; } .people-add input { flex: 1 1 10rem; min-width: 0; padding: 0 0.75rem; border: 1px solid var(--line); background: var(--bg); color: var(--text); } .people-add select { padding: 0 0.5rem; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
@@@ -375,7 +375,7 @@ main { padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(saf
  .share-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
  .share-form .field { flex: 1 1 180px; }
  .share-link { width: 100%; margin-top: 6px; font-family: ui-monospace, monospace; }
--.share-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
++.share-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .share-list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line, #2a313c); border-radius: 10px; }
  .inline-form { display: inline; margin: 0; }
  .share-body .page { padding-top: 12px; }