/* Membership certificate dialog: the form sits left and the exact preview right on a wide screen, so choosing a
   purpose shows the result without scrolling. On a phone or tablet the two blocks simply stack. */
.mv-cert-layout { display: grid; gap: 1rem; align-items: start; }
.mv-cert-form { display: grid; gap: .75rem; min-width: 0; }
.mv-cert-form > p { margin: 0; }
.mv-cert-form .mv-muted { font-size: .9375rem; line-height: 1.4; }
.mv-cert-paper { min-width: 0; min-height: 20rem; padding: 1.25rem 1.4rem; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-soft); color: var(--ui-ink); }
.mv-cert-paper h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.mv-cert-paper ul { margin: .75rem 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.mv-cert-paper li { overflow-wrap: anywhere; }
.mv-cert-empty { margin: 0; opacity: .8; }
.mv-cert-options { display: grid; gap: .25rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.mv-cert-options legend { padding: 0; font-weight: 700; margin-bottom: .25rem; }
.ui .mv-dialog .mv-cert-option { display: grid; grid-template-columns: var(--office-min-target, 44px) minmax(0, 1fr); align-items: center; gap: .6rem; min-height: 44px; padding: 0; font-weight: 400; cursor: pointer; }
.mv-cert-option strong { display: block; font-weight: 700; }
.mv-cert-option small { display: block; font-size: .8125rem; line-height: 1.3; opacity: .85; }
.mv-cert-option small:empty { display: none; }
.mv-cert-option input:disabled + span { opacity: .7; }
@media (min-width: 1100px) {
  .ui .mv-dialog.mv-dialog-wide { width: min(calc(100% - 4rem), 66rem); }
  .mv-dialog.mv-dialog-wide .mv-cert-layout { grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr); gap: 1.75rem; }
  .mv-dialog.mv-dialog-wide .mv-cert-paper { min-height: 26rem; position: sticky; top: 0; }
}