/* Request 231 (B5): #/phone prototype. 390px first; existing app.css variables only. */
.ph { max-width: 30rem; margin: 0 auto; padding: 0 .75rem 2rem; color: var(--ink); }
.ph-label { display: inline-block; margin: .5rem 0 0; padding: .1rem .5rem; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .75rem; }
.ph-head { margin: .25rem 0 .25rem; font-size: 1.4rem; font-family: var(--font-head); }
.ph-links { margin: 0 0 1rem; font-size: .9rem; }
.ph-group { margin: 0 0 1.25rem; }
.ph-group h2 { margin: 0 0 .5rem; font-size: 1rem; color: var(--ink-2, var(--ink)); }
.ph-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ph-card { background: var(--card); border: var(--border-ui, 1px) solid var(--line); border-radius: var(--radius-ui, 12px); padding: .75rem .85rem; display: grid; gap: .3rem; }
.ph-title { font-weight: 650; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ph-stage { font-size: .95rem; }
.ph-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .85rem; color: var(--ink-2, var(--ink)); }
.ph-unknown { color: var(--muted); font-style: italic; }
.ph-promise { font-size: .85rem; color: var(--muted); }
.ph-next { justify-self: start; margin-top: .25rem; min-height: 44px; display: inline-flex; align-items: center; }
.ph-note { font-size: .8rem; }
@media (min-width: 700px) { .ph { padding-top: .5rem; } }

/* Batch 31 §4 (stream B): the phone home in the approved look (stream A's shared layer): the page title in the title face,
   each group under the section-label heading, square cards, and the button's text centred (it sat at the top). */
body.shop-on .ph .ph-head { font-size: 30px; margin-top: 4px; }
body.shop-on .ph .ph-group > h2 { font: italic 900 16px/1.2 var(--font-title); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); margin: 0 0 8px; }
body.shop-on .ph .ph-card { border-radius: 4px; border: 1px solid var(--hair); background: var(--surface); box-shadow: none; }
body.shop-on .ph a.btn.ph-next { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; line-height: 1.2; }
body.shop-on .ph .ph-label { border-radius: 4px; display: block; width: max-content; }