/* plan.css - Plan: spaces, promises and the visit. Done in a car park as often as at a desk.
   Page scoped. Only this page loads it, so a phone opening Capture never parses
   the landing page hero. Shared chrome is assets/base.css; colours are ONLY ever
   tokens from assets/tokens.css. */

main { max-width: 900px; }
.qr-block { border-bottom: 1px solid var(--grid); padding: 10px 0; font-size: 12.5px; }
.qr-block:last-child { border-bottom: none; }
.hand { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 14px; }
.hand .chg { border: none; background: var(--wash-red); color: var(--kz-red); border-radius: 999px; font-size: 10.5px; padding: 3px 11px; cursor: pointer; font-family: inherit; font-weight: 600; }
.adm-input { border: 1.5px solid var(--grid); border-radius: 10px; background: var(--card); color: var(--ink-1); font-family: inherit; font-size: 12.5px; padding: 8px 10px; }
.adm-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.adm-row .fs-line { align-self: center; }
.ok-line { font-size: 12px; color: var(--kz-red); font-weight: 500; margin-top: 6px; min-height: 16px; }
/* Plan is done in a car park as often as at a desk: every block stacks under 700px,
   every input is 16px because under that iOS zooms the page on focus, every target
   is 44px. */
@media (max-width: 700px) {
  main { padding-left: 16px; padding-right: 16px; }
  .adm-row { flex-direction: column; align-items: stretch; }
  .adm-row > * { width: 100%; max-width: none !important; }
  .adm-input { font-size: 16px; min-height: 44px; }
  .adm-row .btn { min-height: 44px; font-size: 15px; }
  .hand .chg { min-height: 44px; font-size: 12px; padding: 3px 16px; }
  .grid > * { min-width: 0; }
}