/* The locked-module offer and the quiet contextual card (webapp/apps/shared/upgrade.js, P1).
   `up-` parts only; the plan cards, buttons, fields and banners are the shared `pa-` classes in app.css.
   Tokens only; Day and Dark come from the tokens. */

.up-offer { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; }
.up-head { display: flex; flex-direction: column; gap: var(--pa-s1); min-width: 0; }
.up-head h2 { margin: 0; overflow-wrap: anywhere; }

.up-plans { border: 0; margin: 0; padding: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--pa-s3); }
.up-legend { padding: 0; margin-bottom: var(--pa-s2); font-weight: 600; font-size: var(--cx-text-small); color: var(--cx-text); }
.up-plan { cursor: pointer; }
.up-plan:has(input:disabled) { cursor: default; }
.up-plan:focus-within { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.up-plan-top { display: flex; align-items: center; gap: var(--pa-s2); min-width: 0; overflow-wrap: anywhere; }
.up-plan-top input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--cx-action); flex: none; }

.up-payer { display: flex; flex-direction: column; gap: var(--pa-s2); }
.up-payer-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--pa-s3); }
.up-msg:empty { display: none; }
/* The price is in the label, so it wraps rather than being clipped on a phone. */
.up-buy { white-space: normal; text-align: center; max-inline-size: 100%; }

.up-quiet { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--pa-s3) var(--pa-s4);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius); background: var(--cx-surface-2);
  color: var(--cx-text); text-decoration: none; }
.up-quiet:hover { border-color: var(--cx-border-strong); }
.up-quiet:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.up-quiet-title { font-weight: 600; overflow-wrap: anywhere; }

@media (any-pointer: coarse) {
  .up-plan-top input { inline-size: 24px; block-size: 24px; }
  .up-quiet { min-block-size: 44px; }
}

/* Connect Digital Office: a premium module offered inside the unified plans (upgrade.js renderOfficeOffer). */
.up-office { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--pa-s3); margin: var(--pa-s3) 0; }
.up-office .up-plan { margin: 0; }