/* Phone layout for /builds.html (loaded at (max-width: 760px)). */
/* On a phone: the page-head buttons share one row, each build card leads
   with a full-width Install button and the secondary downloads split the
   row under it, the visibility switch and every action are finger-sized,
   the status pill and mono meta are readable, and the server card's
   buttons go full width. */

.wrap { padding: 22px 16px 48px; }

/* ---------- page head ---------- */
.page-head { margin-bottom: 22px; gap: 16px; }
.page-head h1 { font-size: 1.75rem; }
.page-head .lede { font-size: 15px; line-height: 1.55; }
.head-acts { width: 100%; }
.head-acts .btn { flex: 1 1 0; min-height: 48px; }

/* ---------- list ---------- */
.list-count { font-size: 12px; }
.list-note { font-size: 14px; }
.blist { gap: 14px; }

.brow { padding: 16px; }
.bname { font-size: 1.05rem; line-height: 1.3; }
.pill { font-size: 12px; letter-spacing: .08em; padding: 4px 9px; margin-top: 1px; }
.bmeta { font-size: 12px; gap: 2px 12px; }
.bmsg { font-size: 15px; }
.btyp, .bblend, .bnote { font-size: 14px; }

/* Actions: the first one (Install, or Download when there is no install
   link) is the thing the card exists for, so it takes the whole row; the
   rest share the rows below, two to a row. */
.bacts { gap: 8px; }
.bacts .btn { flex: 1 1 calc(50% - 4px); min-height: 44px; padding: 10px 12px; font-size: 14px;
              white-space: normal; text-align: center; line-height: 1.25; }  /* wrap, so two labels share a row */
.bacts .btn:first-child { flex-basis: 100%; min-height: 48px; font-size: 15px; }
.bacts .btn-quiet { min-height: 40px; padding: 8px 6px; }

/* Who can see it: label and switch on one row, the note under them. */
.bvis { gap: 8px 12px; }
.bvis-k, .srv .eyebrow, .srv label.field { font-size: 12px; }
.seg button { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.bvis-note { flex-basis: 100%; font-size: 13px; }

/* Four steps in two columns at 15px instead of 12.8px. */
.prog-steps { font-size: 14px; gap: 10px 12px; }

/* ---------- host a server ---------- */
.srv { padding: 20px 16px; }
.srv h2 { font-size: 1.35rem; }
.srv-lede { font-size: 15px; }
.srv-card, .srv-upgrade { padding: 16px 14px; }
.srv-card h3, .srv-host .field-k { font-size: 12px; }
.srv-card .kv .line { font-size: 15px; }
.srv .actions .btn { flex: 1 1 100%; min-height: 48px; }
.srv .actions .btn-quiet { min-height: 44px; }
.srv-copy { min-height: 40px; padding: 8px 10px; }
.srv-steps { font-size: 15px; }
.plan-note { font-size: 14px; }
.pick-row select { min-height: 48px; font-size: 16px; }  /* 16px: iOS zooms smaller selects */
.pick-row .btn { min-height: 48px; }

/* signed out */
.gate { margin-top: 8px; }
.gate .actions .btn { flex: 1 1 auto; min-height: 48px; }