styles.css

/*!
 * @mesub/react/styles.css: default theme (v5) for the Mesub widget
 *
 * Targets data attributes only (no class names). Element selectors are used
 * only inside the widget roots (h2, p, a, img, strong, dl, details).
 *
 * Theming: set any --mesub-* property on :root, on a wrapper, or on the
 * widget elements themselves. This file never assigns a --mesub-* property,
 * it only reads them with a fallback, so the merchant's value always wins,
 * whatever the specificity of the merchant's selector.
 *
 *   --mesub-accent        #cc451d   actions, current state, focus ring
 *   --mesub-on-accent     #ffffff   text on accent fills (keep >= 4.5:1)
 *   --mesub-bg            #ffffff   modal surface, list rows
 *   --mesub-text          #14151a   titles; derives muted tones + borders
 *   --mesub-font          inherit   merchant font; e.g. system-ui, sans-serif
 *   --mesub-radius        6px       buttons (modal = radius + 4px)
 *   advanced: --mesub-radius-lg, --mesub-text-soft, --mesub-muted, --mesub-sunk,
 *   --mesub-border, --mesub-control-border, --mesub-accent-text, --mesub-focus,
 *   --mesub-success, --mesub-success-text, --mesub-danger, --mesub-danger-text,
 *   --mesub-warning, --mesub-warning-text,
 *   --mesub-shadow, --mesub-backdrop, --mesub-duration
 *
 * Dark: data-mesub-theme="dark" on the element or any ancestor (e.g. <html>).
 *       data-mesub-theme="auto" follows prefers-color-scheme (opt-in on purpose:
 *       the widget must match the merchant's page, not the visitor's OS).
 *
 * Markup, as the components write it:
 *   - busy controls carry aria-busy="true"; [data-mesub-wallet] is a <button>
 *   - checkout: [data-mesub-step="plan"|"wallet"|"review"|"approve"|"confirming"|"subscribed"],
 *     [data-mesub-merchant] (img + <strong> name), [data-mesub-price] (<strong> + <span>),
 *     [data-mesub-summary] (<dl>) > [data-mesub-row] > dt + dd,
 *     [data-mesub-network="devnet"] badge, [data-mesub-explorer] link, [data-mesub-done],
 *     [data-mesub-cancel]
 *   - cancel, resume, close: [data-mesub-step="confirm"|"wallet"|"approve"|"confirming"|"done"]
 *   - the list of subscriptions: see the MANAGE section
 */

/* ---------------------------------------------------------------- tokens */

:is([data-mesub-dialog], [data-mesub-subscribe], [data-mesub-subscribe] ~ [data-mesub-receipt], [data-mesub-subscriptions]) {
  --_accent: var(--mesub-accent, #cc451d);
  --_on-accent: var(--mesub-on-accent, #ffffff);
  --_accent-text: var(--mesub-accent-text, var(--_accent));
  --_accent-hover: color-mix(in srgb, var(--_accent) 90%, #000);
  --_accent-active: color-mix(in srgb, var(--_accent) 82%, #000);
  --_focus: var(--mesub-focus, var(--_accent));

  --_bg: var(--mesub-bg, #ffffff);
  --_text: var(--mesub-text, #14151a);
  --_text-soft: var(--mesub-text-soft, color-mix(in srgb, var(--_text) 78%, var(--_bg)));
  --_muted: var(--mesub-muted, color-mix(in srgb, var(--_text) 62%, var(--_bg)));
  --_sunk: var(--mesub-sunk, color-mix(in srgb, var(--_text) 5%, var(--_bg)));
  --_border: var(--mesub-border, color-mix(in srgb, var(--_text) 10%, transparent));
  --_divider: color-mix(in srgb, var(--_text) 6%, transparent);
  --_control-border: var(--mesub-control-border, color-mix(in srgb, var(--_text) 47%, var(--_bg)));

  --_success: var(--mesub-success, #0e9384);
  --_success-text: var(--mesub-success-text, #0b7a6e);
  --_danger: var(--mesub-danger, #a5124a);
  --_danger-text: var(--mesub-danger-text, #8f1040);
  --_warning: var(--mesub-warning, #b54708);
  --_warning-text: var(--mesub-warning-text, #93370d);

  --_radius: var(--mesub-radius, 6px);
  --_radius-lg: var(--mesub-radius-lg, calc(var(--_radius) + 4px));
  --_shadow: var(--mesub-shadow, 0 1px 2px rgb(20 21 26 / 6%), 0 24px 48px -16px rgb(20 21 26 / 28%));
  --_dur: var(--mesub-duration, 140ms);
  --_ease-enter: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* Dark: only the base colours change; everything else derives. */
:is([data-mesub-dialog], [data-mesub-subscribe], [data-mesub-subscribe] ~ [data-mesub-receipt], [data-mesub-subscriptions]):is([data-mesub-theme="dark"], [data-mesub-theme="dark"] *) {
  --_bg: var(--mesub-bg, #16171c);
  --_text: var(--mesub-text, #eceef1);
  --_accent-text: var(--mesub-accent-text, color-mix(in srgb, var(--_accent) 70%, #fff));
  --_success-text: var(--mesub-success-text, #2fb5a3);
  --_danger: var(--mesub-danger, #e0577f);
  --_danger-text: var(--mesub-danger-text, #f28aaa);
  --_warning: var(--mesub-warning, #e8a33d);
  --_warning-text: var(--mesub-warning-text, #f2b24a);
  --_border: var(--mesub-border, color-mix(in srgb, var(--_text) 12%, transparent));
  --_sunk: var(--mesub-sunk, color-mix(in srgb, var(--_text) 7%, var(--_bg)));
  --_shadow: var(--mesub-shadow, 0 0 0 1px rgb(255 255 255 / 4%), 0 24px 64px -16px rgb(0 0 0 / 70%));
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :is([data-mesub-dialog], [data-mesub-subscribe], [data-mesub-subscribe] ~ [data-mesub-receipt], [data-mesub-subscriptions]):is([data-mesub-theme="auto"], [data-mesub-theme="auto"] *) {
    --_bg: var(--mesub-bg, #16171c);
    --_text: var(--mesub-text, #eceef1);
    --_accent-text: var(--mesub-accent-text, color-mix(in srgb, var(--_accent) 70%, #fff));
    --_success-text: var(--mesub-success-text, #2fb5a3);
    --_danger: var(--mesub-danger, #e0577f);
    --_danger-text: var(--mesub-danger-text, #f28aaa);
  --_warning: var(--mesub-warning, #e8a33d);
  --_warning-text: var(--mesub-warning-text, #f2b24a);
    --_border: var(--mesub-border, color-mix(in srgb, var(--_text) 12%, transparent));
    --_sunk: var(--mesub-sunk, color-mix(in srgb, var(--_text) 7%, var(--_bg)));
    --_shadow: var(--mesub-shadow, 0 0 0 1px rgb(255 255 255 / 4%), 0 24px 64px -16px rgb(0 0 0 / 70%));
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- dialog */

[data-mesub-dialog] {
  box-sizing: border-box;
  inline-size: min(400px, calc(100vw - 32px));
  max-inline-size: none;
  max-block-size: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--_border);
  border-radius: var(--_radius-lg);
  background: var(--_bg);
  color: var(--_text-soft);
  box-shadow: var(--_shadow);
  font-family: var(--mesub-font, inherit);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: start;
}

/* display only when open: never override the closed dialog's display:none */
[data-mesub-dialog][open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 16px;
  column-gap: 16px;
  animation: mesub-enter 240ms var(--_ease-enter);
}

[data-mesub-dialog]::backdrop {
  background: var(--mesub-backdrop, rgb(20 21 26 / 40%));
  animation: mesub-fade 240ms ease-out;
}
[data-mesub-dialog]:is([data-mesub-theme="dark"], [data-mesub-theme="dark"] *)::backdrop {
  background: var(--mesub-backdrop, rgb(0 0 0 / 60%));
}

[data-mesub-dialog] *,
[data-mesub-dialog] *::before,
[data-mesub-dialog] *::after {
  box-sizing: border-box;
}

/* every child takes a full row */
[data-mesub-dialog][open] > * {
  grid-column: 1 / -1;
}

[data-mesub-dialog] h2 {
  margin: 0;
  padding-inline-end: 40px; /* room for the close button */
  color: var(--_text);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

[data-mesub-dialog] p {
  margin: 0;
}
[data-mesub-dialog] h2 + p {
  margin-block-start: -8px;
}
[data-mesub-dialog] strong {
  color: var(--_text);
  font-weight: 500;
}
[data-mesub-dialog] a {
  color: var(--_accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- buttons */

:is([data-mesub-submit], [data-mesub-subscribe]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--_radius);
  background: var(--_accent);
  color: var(--_on-accent);
  font-family: var(--mesub-font, inherit);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition-property: color, background-color, border-color;
  transition-duration: var(--_dur);
  transition-timing-function: ease-out;
}
[data-mesub-submit] {
  inline-size: 100%;
  margin-block-start: 8px;
}
[data-mesub-submit]:not(:disabled, [aria-busy="true"]):hover {
  background: var(--_accent-hover);
}
[data-mesub-submit]:not(:disabled, [aria-busy="true"]):active {
  background: var(--_accent-active);
}
[data-mesub-submit]:disabled:not([aria-busy="true"]) {
  background: var(--_sunk);
  color: var(--_muted);
  cursor: not-allowed;
}
[data-mesub-submit][aria-busy="true"] {
  cursor: progress;
}

/* quiet text button: Back */
[data-mesub-back] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: var(--_radius);
  background: transparent;
  color: var(--_text-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--_dur) ease-out, background-color var(--_dur) ease-out;
}
[data-mesub-back] {
  grid-column: 1 !important;
  justify-self: start;
  margin-inline-start: -8px;
}
[data-mesub-back]::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-inline-start: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
}

[data-mesub-back]:hover {
  background: var(--_sunk);
}
[data-mesub-back]:disabled {
  color: var(--_muted);
  cursor: default;
  background: transparent;
}

/* close: top right, an icon drawn in CSS when the button is empty */
[data-mesub-close] {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--_radius);
  background: transparent;
  color: var(--_muted);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--_dur) ease-out, background-color var(--_dur) ease-out;
}
/* hover tints the cross itself, never a grey square behind it */
[data-mesub-close]:hover {
  background: transparent;
  color: var(--_accent);
}
[data-mesub-close]:empty::before,
[data-mesub-close]:empty::after {
  content: "";
  grid-area: 1 / 1;
  inline-size: 14px;
  block-size: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
[data-mesub-close]:empty::after {
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- wallets */

[data-mesub-wallets] {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--_border);
  border-radius: var(--_radius-lg);
}
[data-mesub-wallets] > * + * {
  border-block-start: 1px solid var(--_divider);
}
[data-mesub-wallets] > li {
  display: contents; /* if items are wrapped in <li>, the button carries the row */
}
[data-mesub-wallets] > li + li > [data-mesub-wallet] {
  border-block-start: 1px solid var(--_divider);
}

[data-mesub-wallet] {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  min-block-size: 52px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--_bg);
  color: var(--_text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--_dur) ease-out, color var(--_dur) ease-out;
}
[data-mesub-wallet] img {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 6px;
}
/* trailing chevron */
[data-mesub-wallet]::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.5px solid var(--_muted);
  border-block-start: 1.5px solid var(--_muted);
  transform: rotate(45deg);
}
[data-mesub-wallet]:hover:not(:disabled) {
  background: var(--_sunk);
}
[data-mesub-wallet]:focus-visible {
  outline-offset: -2px !important;
  border-radius: var(--_radius-lg);
}
[data-mesub-wallet]:disabled:not([aria-busy="true"]) {
  color: var(--_muted);
  cursor: default;
}
[data-mesub-wallet]:disabled:not([aria-busy="true"]) img {
  opacity: 0.5;
}
[data-mesub-wallet][aria-busy="true"] {
  background: var(--_sunk);
  cursor: progress;
}
/* busy: the chevron becomes a spinner */
[data-mesub-wallet][aria-busy="true"]::after {
  inline-size: 12px;
  block-size: 12px;
  border: 2px solid var(--_accent);
  border-inline-end-color: transparent;
  border-radius: 50%;
  transform: none;
  animation: mesub-spin 800ms linear infinite;
}

[data-mesub-no-wallet] {
  margin: 0;
  padding: 16px;
  border-radius: var(--_radius-lg);
  background: var(--_sunk);
  color: var(--_text-soft);
  font-size: 14px;
  line-height: 20px;
}

/* --------------------------------------------------- errors and notices */

[data-mesub-dialog] [data-mesub-error] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--_danger-text);
  font-family: var(--mesub-font, inherit);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
[data-mesub-dialog] [data-mesub-error]::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: 2px;
  border-radius: 50%;
  background: var(--_danger);
  color: var(--_bg);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}
[data-mesub-error]:empty {
  display: none !important;
}

[data-mesub-notice] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--_radius);
  background: var(--_sunk);
  color: var(--_text-soft);
  font-size: 13px;
  line-height: 18px;
}
[data-mesub-notice]:empty {
  display: none;
}
[data-mesub-notice][aria-busy="true"]::before {
  content: "";
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  border: 2px solid var(--_accent);
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: mesub-spin 800ms linear infinite;
}

/* ------------------------------------------------- done: cancelled, resumed, closed */

[data-mesub-dialog][data-mesub-step="done"][open] {
  justify-items: center;
  text-align: center;
  padding-block: 40px 24px;
}
[data-mesub-dialog][data-mesub-step="done"] h2 {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-inline-end: 0;
}
[data-mesub-dialog][data-mesub-step="done"] h2::before {
  content: "";
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background:
    linear-gradient(var(--_success-text), var(--_success-text)) 15px 21px / 6px 2px no-repeat,
    linear-gradient(var(--_success-text), var(--_success-text)) 19px 14px / 2px 9px no-repeat,
    color-mix(in srgb, var(--_success) 14%, var(--_bg));
  transform: rotate(45deg);
}

/* ------------------------------------------------------ subscribe button */

[data-mesub-subscribe]:is([data-mesub-state="idle"], [data-mesub-state="open"]):not(:disabled):hover {
  background: var(--_accent-hover);
}
[data-mesub-subscribe]:is([data-mesub-state="idle"], [data-mesub-state="open"]):not(:disabled):active {
  background: var(--_accent-active);
}
[data-mesub-subscribe]:is([data-mesub-state="signing"], [data-mesub-state="confirming"]) {
  cursor: progress;
}
[data-mesub-subscribe][data-mesub-state="subscribed"] {
  border-color: color-mix(in srgb, var(--_success) 32%, transparent);
  background: color-mix(in srgb, var(--_success) 10%, var(--_bg));
  color: var(--_success-text);
  cursor: default;
}
[data-mesub-subscribe][data-mesub-state="subscribed"]::before {
  content: "";
  inline-size: 10px;
  block-size: 5px;
  margin-block-start: -3px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ======================================================= subscribe flow */

/* merchant header: logo 40px, name; the plan name is the step's h2 */
[data-mesub-merchant] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-inline-end: 40px;
  color: var(--_text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
[data-mesub-merchant] img {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--_radius-lg);
  object-fit: cover;
}
[data-mesub-merchant] strong {
  font-weight: 600;
}
[data-mesub-merchant] [data-mesub-network] {
  margin-inline-start: auto;
}

[data-mesub-network="devnet"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--_warning) 12%, var(--_bg));
  color: var(--_warning-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
[data-mesub-network="devnet"]::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}

[data-mesub-price] {
  display: grid;
  gap: 2px;
  margin: 0;
}
[data-mesub-price] strong {
  color: var(--_text);
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
[data-mesub-price] span {
  color: var(--_text-soft);
  font-size: 14px;
}

[data-mesub-summary] {
  display: grid;
  margin: 0;
  border-block: 1px solid var(--_divider);
}
[data-mesub-row] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 40px;
  padding-block: 10px;
  font-size: 13px;
  line-height: 18px;
}
[data-mesub-row] + [data-mesub-row] {
  border-block-start: 1px solid var(--_divider);
}
[data-mesub-row] dt {
  color: var(--_text-soft);
}
[data-mesub-row] dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--_text);
  font-weight: 500;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
[data-mesub-row] dd img {
  inline-size: 16px;
  block-size: 16px;
  border-radius: 4px;
}
[data-mesub-row] dd small {
  color: var(--_muted);
  font-size: 12px;
  font-weight: 400;
}

[data-mesub-done] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 44px;
  margin: 8px 0 0;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--_radius);
  background: var(--_accent);
  color: var(--_on-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--_dur) ease-out;
}
[data-mesub-done]:hover {
  background: var(--_accent-hover);
}

[data-mesub-cancel] {
  justify-self: center;
  min-block-size: 36px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--_radius);
  background: transparent;
  color: var(--_text-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--_dur) ease-out, color var(--_dur) ease-out;
}
[data-mesub-cancel]:hover {
  background: var(--_sunk);
  color: var(--_text);
}

[data-mesub-explorer] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--_accent-text);
  font-weight: 500;
}
[data-mesub-explorer]::after {
  content: "\2197";
  font-size: 12px;
  text-decoration: none;
}

/* subscribed: a calm check before the title */
[data-mesub-dialog][data-mesub-step="subscribed"] h2 {
  display: grid;
  justify-items: start;
  gap: 16px;
}
[data-mesub-dialog][data-mesub-step="subscribed"] h2::before {
  content: "";
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background:
    linear-gradient(var(--_success-text), var(--_success-text)) 15px 21px / 6px 2px no-repeat,
    linear-gradient(var(--_success-text), var(--_success-text)) 19px 14px / 2px 9px no-repeat,
    color-mix(in srgb, var(--_success) 14%, var(--_bg));
  transform: rotate(45deg);
}

/* ---------------------------------------------------- spinners and focus */

:is([data-mesub-submit][aria-busy="true"], [data-mesub-subscribe]:is([data-mesub-state="signing"], [data-mesub-state="confirming"]))::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: mesub-spin 800ms linear infinite;
}

[data-mesub-dialog] :focus-visible,
[data-mesub-subscribe]:focus-visible {
  outline: 2px solid var(--_focus);
  outline-offset: 2px;
}

[data-mesub-dialog]:focus-visible {
  outline: none;
}

/* ============================================================ V2 LAYER
 * Everything above is v1. This layer adds depth, guidance and trust cues:
 *   [data-mesub-badge] inside a wallet row ("Last used")
 *   figure[data-mesub-message] (what the wallet will show) with a pre
 *   [data-mesub-install] links and [data-mesub-reload] button in the no-wallet state
 *   [data-mesub-receipt] after the Subscribe button
 */

:is([data-mesub-dialog], [data-mesub-subscribe], [data-mesub-subscribe] ~ [data-mesub-receipt], [data-mesub-subscriptions]) {
  --_radius-lg: var(--mesub-radius-lg, calc(var(--_radius) + 8px));
  --_accent-soft: color-mix(in srgb, var(--_accent) 9%, var(--_bg));
  --_accent-ring: color-mix(in srgb, var(--_accent) 24%, transparent);
  --_accent-ink: color-mix(in srgb, var(--_accent-text) 78%, var(--_text));
  --_danger-soft: color-mix(in srgb, var(--_danger) 9%, var(--_bg));
  --_success-soft: color-mix(in srgb, var(--_success) 12%, var(--_bg));
  --_warning-soft: color-mix(in srgb, var(--_warning) 10%, var(--_bg));
}

/* ------------------------------------------------------------ v2 dialog */

[data-mesub-dialog] {
  inline-size: min(420px, calc(100vw - 32px));
  padding: 28px;
}
[data-mesub-dialog][open] {
  row-gap: 20px;
}
[data-mesub-dialog]::backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
[data-mesub-dialog] h2 + p {
  margin-block-start: -12px;
}

[data-mesub-dialog]:is([data-mesub-step="wallet"], [data-mesub-step="confirming"]) { --_s1: var(--_accent); --_s2: var(--_accent); --_s3: var(--_accent); }
[data-mesub-dialog][data-mesub-step="subscribed"] { --_s1: var(--_success); --_s2: var(--_success); --_s3: var(--_success); }
[data-mesub-dialog][data-mesub-step="done"][open]::before { display: none; }

[data-mesub-close] {
  inset-block-start: 26px;
  inset-inline-end: 20px;
}

/* merchant context on every step */
[data-mesub-merchant] {
  padding-block-end: 20px;
  border-block-end: 1px solid var(--_divider);
}

[data-mesub-merchant] ~ h2 {
  padding-inline-end: 0;
}

/* ---------------------------------------------------------- v2 wallets */

[data-mesub-wallets] {
  gap: 8px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
[data-mesub-wallets] > * + * {
  border-block-start: 0;
}
/* each row is its own box now: the divider of the joined list becomes its top edge */
[data-mesub-wallets] > li + li > [data-mesub-wallet] {
  border-block-start: 1px solid var(--_border);
}
[data-mesub-wallets] [data-mesub-wallet] {
  min-block-size: 60px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--_border);
  border-radius: var(--_radius-lg);
  transition: border-color var(--_dur) ease-out, background-color var(--_dur) ease-out;
}
[data-mesub-wallet] img {
  box-sizing: content-box;
  padding: 6px;
  background: var(--_sunk);
  border-radius: var(--_radius);
}
[data-mesub-wallets] [data-mesub-wallet]:hover:not(:disabled) {
  border-color: var(--_accent);
  background: var(--_bg);
}
[data-mesub-wallets] [data-mesub-wallet][aria-busy="true"] {
  border-color: var(--_accent);
  background: var(--_accent-soft);
  box-shadow: 0 0 0 3px var(--_accent-ring);
}
[data-mesub-wallet]:focus-visible {
  outline-offset: 2px !important;
}
[data-mesub-badge] {
  margin-inline-start: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--_accent-soft);
  color: var(--_accent-ink);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
[data-mesub-wallet]:has([data-mesub-badge])::after {
  margin-inline-start: 4px;
}

/* what the wallet will show: the terms, on the review */
[data-mesub-message] {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--_radius-lg);
  background: var(--_sunk);
}
[data-mesub-message] figcaption {
  color: var(--_muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
/* Every box property is set: a host page's own `pre` rule (a dark code block,
   say) would otherwise show through and hide the text. */
[data-mesub-message] pre {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  word-break: normal;
  color: var(--_text);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 18px;
  white-space: pre-wrap;
}
[data-mesub-message] p {
  position: relative;
  padding-inline-start: 18px;
  color: var(--_success-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
[data-mesub-message] p::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 3px;
  inline-size: 8px;
  block-size: 4px;
  border-inline-start: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

/* no wallet: install links as rows, then a reload */
[data-mesub-no-wallet] {
  display: grid;
  gap: 8px;
  padding: 0;
  background: transparent;
}

[data-mesub-install] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 60px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--_border);
  border-radius: var(--_radius-lg);
  color: var(--_text) !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: border-color var(--_dur) ease-out;
}
[data-mesub-install]:hover {
  border-color: var(--_accent);
}
[data-mesub-install] img {
  box-sizing: content-box;
  inline-size: 24px;
  block-size: 24px;
  padding: 6px;
  border-radius: var(--_radius);
  background: var(--_sunk);
}
[data-mesub-install] span {
  margin-inline-start: auto;
  color: var(--_accent-text);
  font-size: 13px;
}
[data-mesub-install] span::after {
  content: " \2197";
}
[data-mesub-reload] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 44px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--_control-border);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--_dur) ease-out, background-color var(--_dur) ease-out;
}
[data-mesub-reload]:hover {
  background: var(--_sunk);
}

/* ----------------------------------------------------------- v2 errors */

[data-mesub-dialog] [data-mesub-error] {
  display: block;
  position: relative;
  padding-inline-start: 22px;
}
[data-mesub-dialog] [data-mesub-error]::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 2px;
  margin: 0;
}
/* a step-level error is a callout */
[data-mesub-dialog] > [data-mesub-error] {
  padding: 10px 12px 10px 34px;
  border: 1px solid color-mix(in srgb, var(--_danger) 22%, transparent);
  border-radius: var(--_radius);
  background: var(--_danger-soft);
}
[data-mesub-dialog] > [data-mesub-error]::before {
  inset-inline-start: 12px;
  inset-block-start: 12px;
}
[data-mesub-error] strong {
  color: inherit;
  font-weight: 600;
}
[data-mesub-error] code {
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: nowrap;
}

/* ------------------------------------------------------- v2 review step */

[data-mesub-dialog]:is([data-mesub-step="plan"], [data-mesub-step="review"]) h2 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--_text-soft);
}
[data-mesub-dialog]:is([data-mesub-step="plan"], [data-mesub-step="review"]) h2 + [data-mesub-price] {
  margin-block-start: -18px;
}
[data-mesub-price] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
[data-mesub-price] strong {
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.035em;
}
[data-mesub-price] span {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--_sunk);
  color: var(--_text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
[data-mesub-summary] {
  padding: 4px 16px;
  border: 0;
  border-radius: var(--_radius-lg);
  background: var(--_sunk);
}
[data-mesub-row] + [data-mesub-row] {
  border-block-start-color: color-mix(in srgb, var(--_text) 8%, transparent);
}

[data-mesub-cancel] {
  margin-block-start: -12px;
}

/* ------------------------------------------------ v2 success moments */

[data-mesub-dialog]:is([data-mesub-step="subscribed"], [data-mesub-step="done"]) h2::before {
  inline-size: 48px;
  block-size: 48px;
  background:
    linear-gradient(var(--_bg), var(--_bg)) 18px 25px / 8px 2.5px no-repeat,
    linear-gradient(var(--_bg), var(--_bg)) 23.5px 15px / 2.5px 12.5px no-repeat,
    var(--_success);
  box-shadow: 0 0 0 6px var(--_success-soft);
  animation: mesub-pop 420ms var(--_ease-enter) both;
}
[data-mesub-dialog][data-mesub-step="subscribed"][open] {
  justify-items: stretch;
}
[data-mesub-dialog][data-mesub-step="subscribed"] h2 {
  padding-block-start: 6px;
}

/* -------------------------------------------- v2 subscribe button */

[data-mesub-subscribe] {
  position: relative;
  overflow: hidden;
  min-block-size: 48px;
  padding: 0 22px;
}
/* progress hairline along the bottom edge: 1/3 signing, 2/3 confirming, full when subscribed */
[data-mesub-subscribe]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  block-size: 3px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--_ease-enter);
}
[data-mesub-subscribe][data-mesub-state="signing"]::after { transform: scaleX(0.34); }
[data-mesub-subscribe][data-mesub-state="confirming"]::after { transform: scaleX(0.72); }
[data-mesub-subscribe][data-mesub-state="subscribed"]::after { transform: scaleX(1); opacity: 0.35; }

[data-mesub-subscribe] ~ [data-mesub-receipt] {
  display: block;
  margin-block-start: 8px;
  color: var(--_muted);
  font-family: var(--mesub-font, inherit);
  font-size: 12px;
  line-height: 16px;
}
[data-mesub-subscribe] ~ [data-mesub-receipt] {
  color: var(--_text-soft);
}
[data-mesub-subscribe] ~ [data-mesub-receipt] a {
  color: var(--_accent-text);
  text-underline-offset: 2px;
}

@keyframes mesub-shake {
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
@keyframes mesub-pop { from { transform: rotate(45deg) scale(0.6); opacity: 0; } }

/* ============================================================ V4 LAYER
 * Centred, icon-led screens; Mesub brand in the top bar; one smooth progress line.
 *   [data-mesub-brand]: top bar, the Mesub mark (an inline <svg fill="currentColor">) + "mesub.io"
 *   [data-mesub-dialog] > [data-mesub-back]:empty: the icon back button, top left
 *   [data-mesub-hero="wait"|"error"|"pending"|"check"|"empty"] (aria-hidden),
 *     "wait"/"error"/"pending" wrap the wallet or merchant <img>
 *   [data-mesub-funds="safe"|"pending"]: a quiet line, "Nothing was charged."
 */

[data-mesub-dialog] {
  inline-size: min(380px, calc(100vw - 32px));
  padding: 14px 24px 24px;
  --_radius-lg: var(--mesub-radius-lg, calc(var(--_radius) + 10px));
}
[data-mesub-dialog][open] {
  row-gap: 16px;
}
[data-mesub-dialog] h2 {
  padding-inline-end: 0;
  text-align: center;
  font-size: 20px;
  line-height: 26px;
}
[data-mesub-dialog] h2 + p {
  margin-block-start: -10px;
  text-align: center;
}

/* one continuous progress line across the whole journey, on the very top edge:
   the dialog has no top border, so nothing shows above the line */
[data-mesub-dialog][open] {
  border-block-start-width: 0;
}
[data-mesub-dialog][open]::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 4px;
  background:
    linear-gradient(var(--_bar, var(--_accent)) 0 0) 0 0 / calc(var(--_progress, 0) * 100%) 100% no-repeat,
    var(--_divider);
  transition: background-size 520ms var(--_ease-enter);
}
[data-mesub-dialog]:is([data-mesub-step="plan"], [data-mesub-step="confirm"]) { --_progress: 0.2; }
[data-mesub-dialog][data-mesub-step="wallet"] { --_progress: 0.4; }
[data-mesub-dialog][data-mesub-step="review"] { --_progress: 0.58; }
[data-mesub-dialog][data-mesub-step="approve"] { --_progress: 0.72; }
[data-mesub-dialog][data-mesub-step="confirming"] { --_progress: 0.86; }
[data-mesub-dialog]:is([data-mesub-step="subscribed"], [data-mesub-step="done"]) { --_progress: 1; --_bar: var(--_success); }
[data-mesub-dialog][data-mesub-step="done"][open]::before { display: block; }

/* top bar: back · Mesub · close */
[data-mesub-brand] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 36px;
  margin: 0;
  color: var(--_text);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-mesub-brand] :is(img, svg) {
  inline-size: auto;
  block-size: 12px;
  flex: none;
}
[data-mesub-close] {
  inset-block-start: 14px;
  inset-inline-end: 14px;
}
/* Out of the grid: placed in it, an absolute child is positioned against the
   content box, which put the close 28px in from the corner. */
[data-mesub-dialog][open] > [data-mesub-close] {
  grid-column: auto;
  grid-row: auto;
}
[data-mesub-dialog] > [data-mesub-back]:empty {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  grid-column: auto !important;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  margin: 0;
  padding: 0;
  color: var(--_muted);
}
[data-mesub-dialog] > [data-mesub-back]:empty::before {
  margin-inline-start: 3px;
  inline-size: 8px;
  block-size: 8px;
}
[data-mesub-dialog] > [data-mesub-back]:empty:hover {
  color: var(--_text);
}
/* a text back/cancel under the primary button */
[data-mesub-dialog] > [data-mesub-back]:not(:empty) {
  grid-column: 1 / -1 !important;
  justify-self: center;
  margin: -8px 0 0;
}
[data-mesub-dialog] > [data-mesub-back]:not(:empty)::before {
  display: none;
}
[data-mesub-cancel] {
  margin-block-start: -8px;
}

/* merchant: centred logo + name */
[data-mesub-merchant] {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 0;
  border: 0;
  color: var(--_text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
[data-mesub-merchant] img {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--_border), 0 8px 20px -10px rgb(20 21 26 / 35%);
}
[data-mesub-merchant] strong {
  font-weight: 500;
}
[data-mesub-merchant] [data-mesub-network] {
  margin: 0;
}
[data-mesub-merchant] + h2 {
  margin-block-start: -6px;
}

/* ------------------------------------------------------------- heroes */

[data-mesub-hero] {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  margin-block-start: 4px;
}
[data-mesub-hero] img {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--_border);
}
[data-mesub-hero]:is([data-mesub-hero="wait"], [data-mesub-hero="error"], [data-mesub-hero="pending"]) img {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  box-shadow: none;
}
[data-mesub-hero]:is([data-mesub-hero="wait"], [data-mesub-hero="error"], [data-mesub-hero="pending"])::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 3px solid var(--_divider);
  border-radius: 50%;
}
[data-mesub-hero="wait"]::before {
  border-block-start-color: var(--_accent) !important;
  border-inline-end-color: var(--_accent) !important;
  animation: mesub-spin 1000ms linear infinite;
}
[data-mesub-hero="error"]::before {
  border-color: var(--_danger);
}
[data-mesub-hero="pending"]::before {
  border-color: var(--_warning);
  border-block-end-color: var(--_divider);
  animation: mesub-spin 2400ms linear infinite;
}
[data-mesub-hero="error"]::after {
  content: "!";
  position: absolute;
  inset-block-end: 2px;
  inset-inline-end: 2px;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--_danger);
  color: var(--_bg);
  box-shadow: 0 0 0 3px var(--_bg);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}
[data-mesub-hero="check"]::before {
  content: "";
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background:
    linear-gradient(var(--_bg), var(--_bg)) 21px 29px / 9px 3px no-repeat,
    linear-gradient(var(--_bg), var(--_bg)) 27px 17.5px / 3px 14.5px no-repeat,
    var(--_success);
  box-shadow: 0 0 0 8px var(--_success-soft);
  transform: rotate(45deg);
  animation: mesub-pop 420ms var(--_ease-enter) both;
}

[data-mesub-hero="empty"]::before {
  content: "";
  inline-size: 56px;
  block-size: 56px;
  border-radius: 16px;
  background:
    linear-gradient(var(--_muted), var(--_muted)) 34px 25px / 6px 6px no-repeat,
    linear-gradient(var(--_sunk), var(--_sunk)) 17px 19px / 22px 18px no-repeat,
    linear-gradient(var(--_muted), var(--_muted)) 15px 17px / 26px 22px no-repeat,
    var(--_sunk);
}
/* subscribed / done: the hero replaces the inline check */
[data-mesub-dialog]:is([data-mesub-step="subscribed"], [data-mesub-step="done"]) h2 {
  display: block;
  padding: 0;
}
[data-mesub-dialog]:is([data-mesub-step="subscribed"], [data-mesub-step="done"]) h2::before {
  content: none;
}
[data-mesub-dialog][data-mesub-step="done"][open] {
  padding-block: 14px 28px;
}

/* under a hero, the alert line is plain centred text */
[data-mesub-dialog]:has([data-mesub-hero]) > [data-mesub-error] {
  margin-block-start: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--_text-soft);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
[data-mesub-dialog]:has([data-mesub-hero]) > [data-mesub-error]::before {
  display: none;
}
[data-mesub-dialog] > [data-mesub-explorer] {
  justify-self: center;
  font-size: 13px;
}

/* money status: a quiet line, not a chip */
[data-mesub-funds] {
  position: relative;
  justify-self: center;
  margin: -6px 0 0;
  padding-inline-start: 18px;
  color: var(--_success-text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
[data-mesub-funds]::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 4px;
  inline-size: 9px;
  block-size: 5px;
  border-inline-start: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
[data-mesub-funds="pending"] {
  color: var(--_warning-text);
}
[data-mesub-funds="pending"]::before {
  inset-block-start: 6px;
  inline-size: 6px;
  block-size: 6px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  transform: none;
}

/* ------------------------------------------------------------ buttons */

:is([data-mesub-submit], [data-mesub-done]) {
  min-block-size: 48px;
  border-radius: var(--_radius-lg);
}

[data-mesub-notice] {
  justify-content: center;
  padding: 0;
  background: none;
}

/* ------------------------------------------------------------ wallets */

[data-mesub-wallets] {
  gap: 8px;
}
[data-mesub-wallets] [data-mesub-wallet] {
  min-block-size: 56px;
  padding: 0 14px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--_radius-lg);
  background: var(--_sunk);
  font-size: 15px;
}
[data-mesub-wallets] [data-mesub-wallet]:hover:not(:disabled) {
  border-color: var(--_accent);
  background: var(--_sunk);
}
[data-mesub-wallet] img {
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  background: none;
  border-radius: 8px;
}
[data-mesub-wallet]::after {
  display: none;
}
[data-mesub-badge] {
  background: var(--_bg);
  color: var(--_text-soft);
  box-shadow: inset 0 0 0 1px var(--_border);
}

[data-mesub-no-wallet] {
  margin-block-start: 4px;
}
[data-mesub-install] {
  min-block-size: 56px;
  padding: 0 14px;
  border-color: transparent;
  background: var(--_sunk);
}
[data-mesub-install] img {
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  background: none;
  border-radius: 8px;
}
[data-mesub-reload] {
  min-block-size: 48px;
  border-radius: var(--_radius-lg);
}

/* ------------------------------------------------------------- review */

[data-mesub-dialog]:is([data-mesub-step="plan"], [data-mesub-step="review"]) h2 {
  color: var(--_text);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
[data-mesub-dialog]:is([data-mesub-step="plan"], [data-mesub-step="review"]) h2 + [data-mesub-price] {
  margin-block-start: -14px;
}
[data-mesub-price] {
  display: grid;
  justify-items: center;
  gap: 0;
}
[data-mesub-price] strong {
  font-size: 40px;
  line-height: 46px;
}
[data-mesub-price] span {
  padding: 0;
  background: none;
  color: var(--_text-soft);
  font-size: 14px;
  font-weight: 400;
}
[data-mesub-summary] {
  padding: 2px 16px;
}
[data-mesub-summary] + p {
  margin-block-start: -6px;
  color: var(--_muted);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* ============================================================ V5 LAYER
 * Cleaner surfaces and a motion system. Every decorative animation sits inside
 * prefers-reduced-motion: no-preference, so reduced-motion users get none of it
 * (spinners keep the v1 slow-down).
 *
 * Motion tokens
 *   enter   380ms  cubic-bezier(0.22, 1, 0.36, 1)   modal (scale + blur in)
 *   rise    420ms  same curve, 45ms stagger         each step's content, on mount
 *   spring  cubic-bezier(0.34, 1.56, 0.64, 1)      badges, check pop
 *   press   120ms  scale(0.98)                      buttons and rows
 *   progress 600ms spring-ish fill                  top line
 * Extra markup: details[data-mesub-terms] > summary + figure[data-mesub-message] on the
 *   review, closed by default: the terms the wallet is about to show.
 */

/* ------------------------------------------------------------ cleaner */

[data-mesub-dialog] {
  padding: 14px 28px 28px;
  border-color: color-mix(in srgb, var(--_text) 7%, transparent);
  --_shadow: var(--mesub-shadow, 0 1px 1px rgb(20 21 26 / 4%), 0 32px 72px -28px rgb(20 21 26 / 38%));
}
[data-mesub-dialog]:is([data-mesub-theme="dark"], [data-mesub-theme="dark"] *) {
  --_shadow: var(--mesub-shadow, 0 0 0 1px rgb(255 255 255 / 5%), 0 32px 80px -24px rgb(0 0 0 / 80%));
}
[data-mesub-dialog][open] {
  row-gap: 18px;
}
[data-mesub-brand] {
  gap: 8px;
  color: var(--_text-soft);
  font-size: 14px;
  line-height: 18px;
}
[data-mesub-brand] :is(img, svg) {
  block-size: 18px;
  opacity: 0.9;
}
[data-mesub-dialog] h2 + p {
  color: var(--_muted);
}
[data-mesub-merchant] img,
[data-mesub-hero] img {
  box-shadow: none;
  outline: 1px solid var(--_divider);
  outline-offset: -1px;
}
[data-mesub-hero]:is([data-mesub-hero="wait"], [data-mesub-hero="error"], [data-mesub-hero="pending"]) img {
  outline: 0;
}
[data-mesub-summary] {
  padding: 0;
  border-block: 1px solid var(--_divider);
  border-radius: 0;
  background: none;
}
[data-mesub-wallets] [data-mesub-wallet],
[data-mesub-install] {
  border: 1px solid var(--_border);
  background: var(--_bg);
}
[data-mesub-wallets] [data-mesub-wallet]:hover:not(:disabled),
[data-mesub-install]:hover {
  border-color: color-mix(in srgb, var(--_accent) 60%, transparent);
  background: var(--_bg);
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--_accent) 50%, transparent);
}

/* the wait ring becomes a soft conic arc */
[data-mesub-hero="wait"]::before,
[data-mesub-hero="pending"]::before {
  border: 0 !important;
  background: conic-gradient(from 0deg, transparent 0 50%, var(--_ring, var(--_accent)));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
[data-mesub-hero="pending"] {
  --_ring: var(--_warning);
}
[data-mesub-hero][data-mesub-hero="error"]::before {
  border-color: color-mix(in srgb, var(--_danger) 55%, transparent);
}

/* ------------------------------------------------------------- motion */

/* review: the terms to sign, closed by default (native <details>) */
[data-mesub-terms] {
  margin: 0;
  border-block: 1px solid var(--_divider);
}
[data-mesub-terms] > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: 44px;
  list-style: none;
  color: var(--_text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--_radius);
  transition: color var(--_dur) ease-out;
}
[data-mesub-terms] > summary::-webkit-details-marker {
  display: none;
}
[data-mesub-terms] > summary::after {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  margin-inline-end: 4px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
[data-mesub-terms][open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}
[data-mesub-terms] > summary:hover {
  color: var(--_text);
}
[data-mesub-terms] [data-mesub-summary] {
  border-block-end: 0;
}
[data-mesub-terms] [data-mesub-summary] + p {
  margin: 0;
  padding-block: 2px 14px;
}

@media (prefers-reduced-motion: no-preference) {

  [data-mesub-dialog][open] {
    animation: mesub-enter-v5 380ms var(--_ease-enter);
  }
  [data-mesub-dialog][open]::before {
    transition: background-size 600ms cubic-bezier(0.3, 1.25, 0.5, 1);
  }

  /* each step's content rises in, one element after another */
  [data-mesub-dialog][open] > :not([data-mesub-close], [data-mesub-back]:empty, [data-mesub-brand]) {
    animation: mesub-rise 420ms var(--_ease-enter) both;
  }
  [data-mesub-dialog][open] > :nth-child(4) { animation-delay: 0ms; }
  [data-mesub-dialog][open] > :nth-child(5) { animation-delay: 45ms; }
  [data-mesub-dialog][open] > :nth-child(6) { animation-delay: 90ms; }
  [data-mesub-dialog][open] > :nth-child(7) { animation-delay: 135ms; }
  [data-mesub-dialog][open] > :nth-child(8) { animation-delay: 180ms; }
  [data-mesub-dialog][open] > :nth-child(9) { animation-delay: 225ms; }
  [data-mesub-dialog][open] > :nth-child(n+10) { animation-delay: 270ms; }

  [data-mesub-wallets] > li > [data-mesub-wallet],
  [data-mesub-summary] > [data-mesub-row],
  [data-mesub-no-wallet] > [data-mesub-install] {
    animation: mesub-rise 420ms var(--_ease-enter) both;
  }
  [data-mesub-wallets] > li:nth-child(1) > [data-mesub-wallet],
  [data-mesub-summary] > [data-mesub-row]:nth-child(1),
  [data-mesub-no-wallet] > [data-mesub-install]:nth-of-type(1) { animation-delay: 120ms; }
  [data-mesub-wallets] > li:nth-child(2) > [data-mesub-wallet],
  [data-mesub-summary] > [data-mesub-row]:nth-child(2),
  [data-mesub-no-wallet] > [data-mesub-install]:nth-of-type(2) { animation-delay: 170ms; }
  [data-mesub-wallets] > li:nth-child(3) > [data-mesub-wallet],
  [data-mesub-summary] > [data-mesub-row]:nth-child(3) { animation-delay: 220ms; }
  [data-mesub-wallets] > li:nth-child(n+4) > [data-mesub-wallet],
  [data-mesub-summary] > [data-mesub-row]:nth-child(n+4) { animation-delay: 270ms; }

  /* press and hover */
  :is([data-mesub-submit], [data-mesub-done], [data-mesub-subscribe], [data-mesub-reload], [data-mesub-wallet], [data-mesub-install]) {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: var(--_dur), var(--_dur), var(--_dur), 200ms, 120ms;
    transition-timing-function: ease-out;
  }
  :is([data-mesub-submit], [data-mesub-done], [data-mesub-subscribe], [data-mesub-reload]):active:not(:disabled, [aria-busy="true"]) {
    transform: scale(0.98);
  }
  [data-mesub-wallets] [data-mesub-wallet]:hover:not(:disabled),
  [data-mesub-install]:hover {
    transform: translateY(-1px);
  }
  [data-mesub-wallets] [data-mesub-wallet]:active:not(:disabled) {
    transform: scale(0.99);
  }

  /* busy primary: a light sweep across the button */
  :is([data-mesub-submit][aria-busy="true"], [data-mesub-subscribe]:is([data-mesub-state="signing"], [data-mesub-state="confirming"])) {
    background-image: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 22%) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: mesub-shimmer 1400ms linear infinite;
  }

  

  

  

  /* heroes */
  [data-mesub-hero="pending"]::before {
    animation-duration: 2400ms;
  }
  [data-mesub-dialog][open] > [data-mesub-hero="error"] {
    animation: mesub-rise 420ms var(--_ease-enter) both, mesub-shake 420ms ease-out 380ms;
  }
  [data-mesub-hero="error"]::after {
    animation: mesub-badge 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 260ms both;
  }
  [data-mesub-hero="check"]::before {
    animation: mesub-check 760ms var(--_ease-enter) both;
  }
  [data-mesub-hero="check"]::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid var(--_success);
    border-radius: 50%;
    animation: mesub-ripple 900ms ease-out 380ms both;
  }

  
  [data-mesub-merchant] img {
    animation: mesub-pop-circle 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* money status and alerts arrive last */
  [data-mesub-funds] {
    animation: mesub-rise 420ms var(--_ease-enter) 300ms both !important;
  }
  [data-mesub-badge] {
    animation: mesub-badge 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 360ms both;
  }

  /* terms open and close smoothly where the browser can animate to auto */
  [data-mesub-terms] {
    interpolate-size: allow-keywords;
  }
  [data-mesub-terms]::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 320ms var(--_ease-enter), content-visibility 320ms allow-discrete;
  }
  [data-mesub-terms][open]::details-content {
    block-size: auto;
  }
  [data-mesub-terms] > summary::after {
    transition: transform 240ms var(--_ease-enter);
  }

  /* subscribe button: label swaps fade */
  [data-mesub-subscribe][data-mesub-state="subscribed"]::before {
    animation: mesub-badge 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

@keyframes mesub-enter-v5 {
  from { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(6px); }
}
@keyframes mesub-rise {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes mesub-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@keyframes mesub-badge {
  from { transform: scale(0); }
}
@keyframes mesub-check {
  0% { opacity: 0; transform: rotate(45deg) scale(0.4); background-size: 0 3px, 3px 0; background-position: 21px 29px, 27px 32px; }
  35% { opacity: 1; transform: rotate(45deg) scale(1.06); background-size: 0 3px, 3px 0; background-position: 21px 29px, 27px 32px; }
  60% { transform: rotate(45deg) scale(1); background-size: 9px 3px, 3px 0; background-position: 21px 29px, 27px 32px; }
  100% { transform: rotate(45deg) scale(1); background-size: 9px 3px, 3px 14.5px; background-position: 21px 29px, 27px 17.5px; }
}
@keyframes mesub-ripple {
  from { opacity: 0.7; transform: scale(0.85); }
  to { opacity: 0; transform: scale(1.55); }
}
@keyframes mesub-pop-circle {
  from { opacity: 0; transform: scale(0.6); }
}

/* ------------------------------------------- mobile: bottom sheet < 480px */

@media (max-width: 479.98px) {
  [data-mesub-dialog] {
    inline-size: 100%;
    max-inline-size: 100%;
    max-block-size: calc(100dvh - 24px);
    margin: auto 0 0;
    padding: 24px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-block-end: 0;
    border-radius: var(--_radius-lg) var(--_radius-lg) 0 0;
  }
  [data-mesub-dialog][open] {
    animation-name: mesub-sheet;
  }
  [data-mesub-dialog] h2 {
    font-size: 20px;
    line-height: 26px;
  }

  [data-mesub-close] {
    inset-block-start: 8px;
    inset-inline-end: 8px;
    inline-size: 44px;
    block-size: 44px;
  }
  [data-mesub-back] {
    min-block-size: 44px;
  }
  [data-mesub-wallet] {
    min-block-size: 56px;
  }
}
/* ------------------------------------------------------------- the token
 * img[data-mesub-token-logo] before an amount; small[data-mesub-usd] and
 * small[data-mesub-unverified] under the checkout's price.
 */

/* a fixed box under the line's own height: loaded, failed or absent, nothing moves */
[data-mesub-token-logo] {
  display: inline-block;
  inline-size: 20px;
  block-size: 20px;
  margin-inline-end: 6px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
[data-mesub-price] [data-mesub-token-logo] {
  inline-size: 28px;
  block-size: 28px;
  margin-inline-end: 8px;
}
[data-mesub-rate] [data-mesub-token-logo] {
  inline-size: 16px;
  block-size: 16px;
}
[data-mesub-price] strong {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}
[data-mesub-price] small {
  color: var(--_muted);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
[data-mesub-terms] [data-mesub-row] dd small {
  display: block;
}
/* the dollars at the charge, under the amount: within the row's own height */
[data-mesub-payment] > span:last-child small {
  display: block;
  line-height: 16px;
  font-weight: 400;
}

/* ------------------------------------------------------- long amounts
 * An amount left in full digits never leaves its box: [data-mesub-fit] is set
 * past a length ("2", "3", "4"), the text shrinks, then breaks anywhere.
 * Ordinary amounts carry no attribute and keep their size.
 */
[data-mesub-price] strong[data-mesub-fit] {
  min-inline-size: 0;
}
/* one line of the same height as an ordinary price */
[data-mesub-price] strong[data-mesub-fit="2"] {
  font-size: 28px;
  letter-spacing: -0.02em;
}
/* two lines within that height */
[data-mesub-price] strong[data-mesub-fit="3"] {
  font-size: 20px;
  line-height: 23px;
  letter-spacing: -0.01em;
}
[data-mesub-price] strong[data-mesub-fit="4"] {
  font-size: 16px;
  line-height: 23px;
  letter-spacing: 0;
}
[data-mesub-price] strong:is([data-mesub-fit="3"], [data-mesub-fit="4"]) [data-mesub-token-logo] {
  inline-size: 18px;
  block-size: 18px;
  margin-inline-end: 6px;
}
/* two lines fit the button's own height */
[data-mesub-submit]:is([data-mesub-fit="3"], [data-mesub-fit="4"]) {
  padding-block: 5px;
  font-size: 13px;
  line-height: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
}
[data-mesub-row] dt {
  flex: none;
}
[data-mesub-row] dd {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
[data-mesub-dialog] p[data-mesub-rate],
[data-mesub-subscription-price] {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
[data-mesub-rate] strong:is([data-mesub-fit="3"], [data-mesub-fit="4"]) {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.01em;
}
[data-mesub-subscription-price] strong:is([data-mesub-fit="3"], [data-mesub-fit="4"]) {
  font-size: 16px;
  line-height: 22px;
}
/* a payment in full digits: on a line of its own under the date and the word */
[data-mesub-payment] > span:last-child {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
[data-mesub-payment] > span[data-mesub-fit] {
  grid-column: 1 / -1;
  padding-block-end: 8px;
}

@media (max-width: 479.98px) {
  [data-mesub-dialog] { padding: 24px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  [data-mesub-close] { inset-block-start: 10px; inset-inline-end: 8px; inline-size: 44px; block-size: 44px; }
  [data-mesub-dialog] > [data-mesub-back]:empty { inset-block-start: 10px; inset-inline-start: 8px; inline-size: 44px; block-size: 44px; }
  [data-mesub-dialog] { padding-block-start: 14px; }

  [data-mesub-price] strong { font-size: 40px; line-height: 44px; }
  [data-mesub-price] strong[data-mesub-fit="2"] { font-size: 24px; }
  [data-mesub-price] strong[data-mesub-fit="3"] { font-size: 18px; line-height: 22px; }
  [data-mesub-price] strong[data-mesub-fit="4"] { font-size: 15px; line-height: 22px; }
  [data-mesub-wallets] [data-mesub-wallet], [data-mesub-install] { min-block-size: 60px; }
}

/* ---------------------------------------------------------------- motion */

@keyframes mesub-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes mesub-sheet {
  from { transform: translateY(100%); }
}
@keyframes mesub-fade {
  from { opacity: 0; }
}
@keyframes mesub-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================ CHECKOUT
 * What the rebuilt flow adds to the handoff: p[data-mesub-description] under the
 * price, and the terms inside details[data-mesub-terms].
 */

[data-mesub-description] {
  margin-block-start: -8px;
  color: var(--_muted);
  text-align: center;
}
/* the plan's end date, under its price: part of what is bought */
[data-mesub-ends] {
  margin-block-start: -8px;
  color: var(--_text-soft);
  font-size: 13px;
  text-align: center;
}
[data-mesub-terms] [data-mesub-message] {
  margin-block-end: 14px;
}
/* Right under the list, the terms are its next row: one divider between them,
   not two with the view's gap in the middle. */
[data-mesub-summary] + [data-mesub-terms] {
  margin-block-start: -16px;
  border-block-start: 0;
}
/* the last line of the review, right above the button */
[data-mesub-footnote] {
  margin: 0;
  color: var(--_muted);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
/* What the toggle opens: set in from the list above and lighter than it, with
   a rule down its side, so it reads as the toggle's own content and not as
   more rows of that list. */
[data-mesub-terms] [data-mesub-summary] {
  margin: 0 0 14px;
  padding: 2px 0 2px 14px;
  border: 0;
  border-inline-start: 2px solid var(--_border);
  border-radius: 0;
  background: transparent;
}
/* A term can be a sentence: its name sits above it and both start at the same
   edge, so a long one wraps under its own first word at any width, and no
   column is there for it to spill out of. */
[data-mesub-terms] [data-mesub-row] {
  display: block;
  min-block-size: 0;
  padding-block: 6px;
  font-size: 12px;
  line-height: 18px;
}
[data-mesub-terms] [data-mesub-row] + [data-mesub-row] {
  border-block-start: 0;
}
[data-mesub-terms] [data-mesub-row] dt {
  color: var(--_muted);
}
[data-mesub-terms] [data-mesub-row] dd {
  display: block;
  color: var(--_text-soft);
  font-size: 13px;
  font-weight: 400;
  text-align: start;
  overflow-wrap: anywhere;
}
/* the token, as a small button that opens where it is traded */
[data-mesub-dialog] a[data-mesub-token] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 26px;
  /* under its name, not beside it: clear of the line above */
  margin-block: 3px 0;
  padding: 0 10px;
  border: 1px solid var(--_border);
  border-radius: 999px;
  color: var(--_text);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--_dur) ease-out;
}
[data-mesub-dialog] a[data-mesub-token]::after {
  content: "\2197";
  color: var(--_muted);
  font-size: 11px;
}
[data-mesub-dialog] a[data-mesub-token]:hover {
  background: var(--_sunk);
}
[data-mesub-dialog] a[data-mesub-token]:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  [data-mesub-dialog] a[data-mesub-token] {
    transition: none;
  }
}
/* where the subscription is stopped: a quiet button on the done screen, opening that page */
[data-mesub-dialog] a[data-mesub-manage] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 40px;
  margin: 0;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  color: var(--_text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--_dur) ease-out;
}
/* the arrow only when it leaves the site */
[data-mesub-dialog] a[data-mesub-manage][data-mesub-external]::after {
  content: "\2197";
  color: var(--_muted);
  font-size: 12px;
}
[data-mesub-dialog] a[data-mesub-manage]:hover {
  background: var(--_sunk);
}
[data-mesub-dialog] a[data-mesub-manage]:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  [data-mesub-dialog] a[data-mesub-manage] {
    transition: none;
  }
}
/* Cancel takes the room of the button above it, so its hover is as wide */
[data-mesub-cancel] {
  justify-self: stretch;
  inline-size: 100%;
  min-block-size: 48px;
  border-radius: var(--_radius-lg);
}
[data-mesub-done]:disabled {
  background: var(--_sunk);
  color: var(--_muted);
  cursor: not-allowed;
}
:is([data-mesub-cancel], [data-mesub-reload]):disabled {
  background: transparent;
  color: var(--_muted);
  cursor: not-allowed;
}

/* ============================================================== MANAGE
 * <ManageSubscriptions />, in the page, not in a dialog:
 *   div[data-mesub-subscriptions][data-mesub-state] > ul[data-mesub-subscription-list]
 *   > li[data-mesub-subscription] > div[data-mesub-subscription-head] (strong + span[data-mesub-status])
 *   + p[data-mesub-subscription-price] + dl[data-mesub-summary]
 *   + div[data-mesub-pay-now] (button + p[data-mesub-pay-now-said]) on a late one + button[data-mesub-action];
 *   p[data-mesub-empty] when there is nothing to list, button[data-mesub-retry] after an error.
 */

[data-mesub-subscriptions] {
  display: grid;
  gap: 12px;
  color: var(--_text-soft);
  font-family: var(--mesub-font, inherit);
  font-size: 14px;
  line-height: 20px;
  text-align: start;
}
[data-mesub-subscriptions] *,
[data-mesub-subscriptions] *::before,
[data-mesub-subscriptions] *::after {
  box-sizing: border-box;
}
[data-mesub-subscriptions] p {
  margin: 0;
}
[data-mesub-subscriptions] > [data-mesub-notice] {
  justify-content: flex-start;
}
[data-mesub-subscriptions] > [data-mesub-error] {
  color: var(--_danger-text);
  font-size: 13px;
  line-height: 18px;
}
[data-mesub-empty] {
  padding: 16px;
  border: 1px dashed var(--_border);
  border-radius: var(--_radius-lg);
  color: var(--_muted);
}

[data-mesub-subscription-list] {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* One subscription, as a card: who it is, what it costs, its dates, what to
   know, then the one thing it allows. Read top to bottom. */
[data-mesub-subscription] {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--_border);
  border-radius: var(--_radius-lg);
  background: var(--_bg);
}
[data-mesub-subscription-head] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}
[data-mesub-subscription] [data-mesub-logo] {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 10px;
  background: var(--_sunk);
  color: var(--_text-soft);
  font-size: 15px;
  font-weight: 600;
  object-fit: cover;
}
[data-mesub-subscription-name] {
  flex: 1;
  display: grid;
  min-inline-size: 0;
}
[data-mesub-subscription-name] strong {
  overflow: hidden;
  color: var(--_text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-mesub-subscription-name] span {
  overflow: hidden;
  color: var(--_muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-mesub-status] {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--_sunk);
  color: var(--_text-soft);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
[data-mesub-status="active"] {
  background: var(--_success-soft);
  color: var(--_success-text);
}
:is([data-mesub-status="unpaid"], [data-mesub-status="stopped"], [data-mesub-status="paused"]) {
  background: var(--_warning-soft);
  color: var(--_warning-text);
}
[data-mesub-subscription-price] {
  color: var(--_text-soft);
  font-variant-numeric: tabular-nums;
}
[data-mesub-subscription-price] strong {
  color: var(--_text);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-mesub-subscription] [data-mesub-summary] {
  border-block-end: 0;
}
[data-mesub-subscription] [data-mesub-row]:last-child {
  padding-block-end: 0;
}
[data-mesub-dialog] [data-mesub-subscription-note],
[data-mesub-subscription-note] {
  text-align: start;
  color: var(--_muted);
  font-size: 12px;
  line-height: 18px;
}

/* the one thing a subscription allows now, and Try again after a failed read */
:is([data-mesub-action], [data-mesub-retry]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--_control-border);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--_dur) ease-out, background-color var(--_dur) ease-out;
}
[data-mesub-action] {
  inline-size: 100%;
  min-block-size: 40px;
}
[data-mesub-retry] {
  justify-self: start;
}
[data-mesub-action="cancel"] {
  color: var(--_danger-text);
}

/* Pay now on a late one (Mesub-io/backend#354): the way out, so the accent; what came of it under it */
[data-mesub-pay-now] {
  display: grid;
  gap: 6px;
}
[data-mesub-pay-now] [data-mesub-action="pay-now"] {
  border-color: var(--_accent);
  background: var(--_accent);
  color: var(--_on-accent);
}
[data-mesub-pay-now] [data-mesub-action="pay-now"]:hover:not(:disabled) {
  border-color: var(--_accent-hover);
  background: var(--_accent-hover);
}
[data-mesub-pay-now] [data-mesub-action="pay-now"]:active:not(:disabled) {
  background: var(--_accent-active);
}
[data-mesub-pay-now-said] {
  text-align: start;
  font-size: 12px;
  line-height: 18px;
  color: var(--_success-text);
}
[data-mesub-pay-now-said="refused"] {
  color: var(--_danger-text);
}
:is([data-mesub-action], [data-mesub-retry]):hover:not(:disabled) {
  background: var(--_sunk);
}
:is([data-mesub-action], [data-mesub-retry]):active:not(:disabled) {
  border-color: var(--_text);
}
:is([data-mesub-action], [data-mesub-retry]):focus-visible {
  outline: 2px solid var(--_focus);
  outline-offset: 2px;
}
:is([data-mesub-action], [data-mesub-retry]):disabled {
  border-color: var(--_border);
  color: var(--_muted);
  cursor: not-allowed;
}

@media (max-width: 479.98px) {
  :is([data-mesub-action], [data-mesub-retry]) {
    min-block-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-mesub-dialog][open],
  [data-mesub-dialog]::backdrop {
    animation: none;
  }
  [data-mesub-dialog] *,
  [data-mesub-dialog] *::before,
  [data-mesub-dialog] *::after,
  [data-mesub-subscriptions] *,
  [data-mesub-subscriptions] *::before,
  [data-mesub-subscribe],
  [data-mesub-subscribe]::before,
  [data-mesub-subscribe]::after {
    transition-duration: 0ms !important;
    animation-duration: 2400ms !important; /* spinners slow to a crawl instead of vanishing */
  }
}

@media (forced-colors: active) {
  :is([data-mesub-submit], [data-mesub-subscribe], [data-mesub-wallet], [data-mesub-action], [data-mesub-retry]) {
    border: 1px solid ButtonText;
  }
}

/* ============================================================ MANAGE BUTTON
 * button[data-mesub-manage-button]: the Subscribe button's shape, in neutral
 * colours, since it opens a list and charges nothing.
 */
[data-mesub-manage-button] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_text);
  font-family: var(--mesub-font, inherit);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition-property: background-color, border-color;
  transition-duration: var(--_dur);
  transition-timing-function: ease-out;
}
[data-mesub-manage-button]:hover:not(:disabled) {
  background: var(--_sunk);
}
[data-mesub-manage-button]:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 2px;
}
[data-mesub-manage-button]:disabled {
  color: var(--_muted);
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  [data-mesub-manage-button] {
    transition: none;
  }
}

/* ============================================================ ONE SUBSCRIPTION
 * [data-mesub-step="subscription"]: what the Manage button opens. Read top to
 * bottom: who and what, how it stands, the facts, what comes and what was
 * charged, then the one thing it allows. No card inside the window: the
 * window is the frame, hairlines do the grouping.
 */
[data-mesub-step="subscription"] {
  text-align: start;
}
[data-mesub-identity] {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}
[data-mesub-identity] [data-mesub-logo] {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  background: var(--_sunk);
  color: var(--_text-soft);
  font-size: 16px;
  font-weight: 600;
  object-fit: cover;
}
[data-mesub-identity] > div {
  flex: 1;
  display: grid;
  min-inline-size: 0;
}
[data-mesub-dialog] [data-mesub-identity] h2 {
  overflow: hidden;
  padding: 0;
  font-size: 17px;
  line-height: 22px;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-mesub-identity] > div > span {
  overflow: hidden;
  color: var(--_muted);
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-mesub-dialog] p[data-mesub-rate] {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--_text-soft);
  font-size: 14px;
  line-height: 20px;
  text-align: start;
  font-variant-numeric: tabular-nums;
}
[data-mesub-rate] strong {
  color: var(--_text);
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
[data-mesub-dialog] p[data-mesub-state-note] {
  grid-column: 1 / -1;
  margin: -8px 0 0;
  color: var(--_text-soft);
  font-size: 13px;
  line-height: 18px;
  text-align: start;
}
[data-mesub-step="subscription"] > [data-mesub-summary] {
  grid-column: 1 / -1;
}

/* Payments: the checkout's toggle, opening on two groups, what comes and what
   was charged. Each line has three columns: the date, the word, the amount. */
[data-mesub-step="subscription"] > [data-mesub-payments] {
  grid-column: 1 / -1;
}
[data-mesub-payments] > section {
  display: grid;
  gap: 2px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--_border);
}
[data-mesub-payments] > section + section {
  margin-block-start: 12px;
}
[data-mesub-payments] > section:last-child {
  margin-block-end: 14px;
}
[data-mesub-payments] h3 {
  margin: 0;
  color: var(--_muted);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-mesub-payments] ul {
  display: grid;
  /* One set of columns for every row: the date takes the width of the longest one. */
  grid-template-columns: max-content minmax(0, 1fr) auto;
  grid-auto-rows: max-content;
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the rest of the history, asked for: a quiet line, never a second button */
[data-mesub-dialog] [data-mesub-more] {
  justify-self: start;
  min-block-size: 32px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--_muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
[data-mesub-dialog] [data-mesub-more]:hover {
  color: var(--_text);
}
[data-mesub-payment] {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-block-size: 36px;
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
[data-mesub-payment] + [data-mesub-payment] {
  border-block-start: 1px solid var(--_divider);
}
[data-mesub-payment] > span:first-child {
  color: var(--_muted);
  /* A date with its hour and time zone stays on one line. */
  white-space: nowrap;
}
/* the word, with a dot of its tone before it */
[data-mesub-payment] > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  color: var(--_text);
}
[data-mesub-payment] > span:nth-child(2)::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--_muted);
}
/* which retry, 2 / 3: quieter than the word it follows */
[data-mesub-payment] small {
  color: var(--_muted);
  font-size: 12px;
  white-space: nowrap;
}
[data-mesub-payment="good"] > span:nth-child(2)::before {
  background: var(--_success);
}
[data-mesub-payment="bad"] > span:nth-child(2)::before {
  background: var(--_danger);
}
/* not yet: a hollow dot and softer words, so it cannot read as a charge made */
[data-mesub-payment="upcoming"] > span:nth-child(2) {
  color: var(--_text-soft);
}
[data-mesub-payment="upcoming"] > span:nth-child(2)::before {
  border: 1.5px solid var(--_muted);
  background: transparent;
}
[data-mesub-payment] > span:last-child {
  color: var(--_text);
  font-weight: 500;
  text-align: end;
}
/* only what was paid is bold: an amount not taken, or not yet, reads softer */
:is([data-mesub-payment="upcoming"], [data-mesub-payment="bad"], [data-mesub-payment="none"])
  > span:last-child {
  color: var(--_text-soft);
  font-weight: 400;
}
[data-mesub-dialog] [data-mesub-payment] a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--_border);
  text-underline-offset: 3px;
}
[data-mesub-dialog] [data-mesub-payment] a:hover {
  text-decoration-color: currentColor;
}

/* the one action: full width, neutral, the rarest thing on the screen */
[data-mesub-step="subscription"] > [data-mesub-action] {
  grid-column: 1 / -1;
  inline-size: 100%;
  min-block-size: 44px;
  border-color: var(--_border);
  border-radius: var(--_radius-lg);
}
[data-mesub-step="subscription"] > [data-mesub-retry] {
  grid-column: 1 / -1;
}

/* the list inside the dialog: the dialog is the frame, the list brings none */
[data-mesub-dialog] [data-mesub-subscriptions][data-mesub-in-dialog] {
  grid-column: 1 / -1;
}