/* The client switches its own billing period (round 39), in the plan pane. The confirm dialog is the withdrawal
   dialog's shell (client-withdraw.css); only what differs is here. */

.plan-switch { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.plan-switch[hidden], .psw-msg[hidden], .psw-since[hidden] { display: none; }

.psw-since { color: var(--ink-2); font-size: 0.9375rem; white-space: nowrap; }

.psw-lead { max-width: 34rem; color: var(--ink); text-wrap: pretty; }
.psw-hint { margin-top: 0.4rem; }
.psw-open { margin-top: 0.9rem; max-width: 100%; padding-block: 0.5rem; line-height: 1.25; }
.psw-offer:empty { display: none; }

/* what was just done, or why it cannot be: one line at the control, the mark carries the tone */
.psw-msg { display: flex; align-items: baseline; gap: 0.65rem; max-width: 34rem; margin-bottom: 0.9rem; color: var(--ink); text-wrap: pretty; }
.psw-msg .mk { position: relative; top: -0.04em; }
.psw-msg-t { min-width: 0; }
.psw-msg:has(+ .psw-offer:empty) { margin-bottom: 0; }

/* the provider's own mail and phone, each a full-size target on its own row on a phone */
.psw-ask { display: block; }
.psw-links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.psw-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-weight: 560; text-underline-offset: 0.2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.psw-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 0.2rem; }

/* the confirm is a choice, not a warning: blue, not the withdrawal's red */
.psw-confirm { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.psw-dlg .wd-c .ob-pre-r { grid-template-columns: 6.8rem minmax(0, 1fr); }
.psw-dlg .ob-pre-ln { margin-top: 0.15rem; color: var(--ink-2); }
.psw-dlg .psw-hint { margin-top: 0.9rem; }
.psw-dlg .ob-error { scroll-margin-bottom: 9rem; }

@media (max-width: 380px) {
  .psw-dlg .wd-c .ob-pre-r { grid-template-columns: minmax(0, 1fr); }
  .psw-open { width: 100%; }
}