.pcx { color: var(--text); max-width: 52rem; margin: 1rem auto; overflow-wrap: anywhere; }
.pcx p { line-height: 1.6; margin: .8rem 0; }
.pcx h1, .pcx h2, .pcx h3 { margin: 1.1rem 0 .6rem; }
.pcx .cx-btn { margin: .4rem .4rem .4rem 0; }
.pcx-picker { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1rem 0; }
.pcx select, .pcx input { font: inherit; color: inherit; background: var(--bg-1); border: 1px solid currentColor; border-radius: .5rem; padding: .65rem; max-width: 100%; min-height: 44px; }
.pcx-form { padding: 1rem; border: 1px solid var(--line-2); border-radius: .8rem; }
.pcx-form label { display: grid; gap: .4rem; margin: .8rem 0; }
.pcx-home { border-top: 1px solid var(--line-2); padding-top: .5rem; }
.pcx-row { display: flex; flex-wrap: wrap; }
.pcx-counts { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pcx-counts td, .pcx-counts th { text-align: right; padding: .6rem .3rem; border-bottom: 1px solid var(--line-2); }
.pcx-counts th:first-child { text-align: left; }
.pcx-people, .pcx-events { list-style: none; padding: 0; }
.pcx-people li, .pcx-events li { padding: .8rem 0; border-bottom: 1px solid var(--line-2); }
.pcx-people strong, .pcx-people span, .pcx-people a, .pcx-people label { display: block; margin: .35rem 0; }
.pcx-people input { margin-right: .5rem; vertical-align: middle; min-width: 24px; }
.pcx :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 450px) { .pcx-counts { font-size: .75rem; } .pcx-counts td, .pcx-counts th { padding: .6rem .15rem; } }
/* CARD-GROWTH-1011: the card app (/card/edit) does not load connect.css, so the Plus offer sheet drew as an unstyled white dialog with
   pale text in dark mode. These rules give the sheet and its buttons the same look connect.css gives them on the home screen. */
dialog.pcx[data-card-extras-offer] { position: fixed; inset: auto 0 0 0; margin: 0 auto; max-width: 40rem; width: 100%; max-height: 92dvh; overflow: auto; border: 0; border-radius: 1.25rem 1.25rem 0 0; padding: .6rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom)); background: var(--bg-1); color: var(--text); box-shadow: 0 -8px 40px rgba(0,0,0,.35); }
dialog.pcx[data-card-extras-offer]::backdrop { background: rgba(10,6,14,.55); }
dialog.pcx[data-card-extras-offer] .cx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap, 44px); padding: .7rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line-2, rgba(127,127,127,.45)); background: transparent; color: var(--text); font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; text-align: center; }
dialog.pcx[data-card-extras-offer] h2[tabindex="-1"]:focus { outline: none; }