/*
 * AgeControl client UI. Every rule is scoped to `.ac-client` (verification page) or `.ac-notice` (small checkout /
 * register notice) and every class carries the `ac-` prefix, so nothing leaks into the host template.
 *
 * Tokens (all custom properties are `--ac-*` or `--acx-*`):
 *   Inputs set by the module (theme_css / template, see docs/CLIENT_UI.md):
 *     --ac-primary, --ac-secondary, --ac-accent, --ac-radius   (theme_css; may already point to host variables)
 *     --ac-brand-primary, --ac-brand-accent                     (inline style on the root, validated #RRGGBB)
 *   Optional overrides for integrators (set them on .ac-client): --ac-on-primary, --ac-font, --ac-max-width.
 *   Derived (internal, do not set): --acx-*.
 *
 * Host theme variables (follow_site_theme = 1, data-ac-follow-site="1"). ALL host names below are UNVERIFIED
 * guesses and are only used when the host actually defines them; otherwise the brand color wins:
 *   --bs-primary          Bootstrap 5 based templates (Nexus? Lagom2? Twenty-One on BS5?)      UNVERIFIED
 *   --primary             Bootstrap 4 / custom (Twenty-One, Six have none by default)           UNVERIFIED
 *   --lagom-primary       Lagom2                                                                UNVERIFIED
 *   --color-primary       generic / Tailwind-style themes (Nexus?)                              UNVERIFIED
 *   html.dark, [data-theme=dark], [data-bs-theme=dark], body.dark  host dark mode markers      UNVERIFIED
 * If a host variable holds something that is not a color (e.g. "221 83% 53%") the declaration is invalid at
 * computed-value time; override --acx-primary in custom_css in that case.
 */

/* ------------------------------------------------------------------ tokens */
.ac-client,
.ac-notice {
  --acx-primary: var(--ac-primary, var(--ac-brand-primary, #2f80ed));
  --acx-accent: var(--ac-accent, var(--ac-brand-accent, #1b5fd6));
  --acx-radius: var(--ac-radius, 8px);
  --acx-on-primary: var(--ac-on-primary, #fff);
  /* light palette */
  --acx-bg: #fff;
  --acx-surface: #fff;
  --acx-surface-2: #f3f6fa;
  --acx-text: #1a2230;
  --acx-muted: #4f5b6b;
  --acx-border: #d3dae3;
  --acx-border-strong: #8592a3;
  --acx-ok: #11622a;
  --acx-ok-bg: #e6f5eb;
  --acx-err: #9d1c24;
  --acx-err-bg: #fdecec;
  --acx-warn: #7a4a00;
  --acx-warn-bg: #fff3dc;
  --acx-info: #1d4f91;
  --acx-info-bg: #e8f1fd;
  --acx-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.06);
  --acx-gap: 1rem;
  --acx-pad: 1.5rem;
  /* buttons: darkened primary so white text reaches AA (>= 4.5:1) for typical brand colors */
  --acx-btn: var(--acx-primary);
  --acx-link: var(--acx-primary);
  color-scheme: light;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ac-client,
  .ac-notice {
    --acx-btn: color-mix(in srgb, var(--acx-primary) 66%, #000);
    --acx-btn-hover: color-mix(in srgb, var(--acx-primary) 52%, #000);
    --acx-link: color-mix(in srgb, var(--acx-primary) 64%, #000);
    --acx-tint: color-mix(in srgb, var(--acx-primary) 10%, var(--acx-surface));
  }
}

/* follow_site_theme: prefer host variables (UNVERIFIED names, see header), brand color as last resort */
.ac-client[data-ac-follow-site="1"],
.ac-notice[data-ac-follow-site="1"] {
  --acx-primary: var(--bs-primary, var(--primary, var(--lagom-primary, var(--color-primary, var(--ac-primary, var(--ac-brand-primary, #2f80ed))))));
}

/* dark palette -- three entry points: explicit, OS preference (system), host dark markers (follow site) */
.ac-client[data-ac-theme="dark"],
.ac-notice[data-ac-theme="dark"] {
  --acx-bg: #10151c;
  --acx-surface: #18202a;
  --acx-surface-2: #212b37;
  --acx-text: #e8edf3;
  --acx-muted: #a8b3c1;
  --acx-border: #324050;
  --acx-border-strong: #7a8798;
  --acx-ok: #7fdb9b;
  --acx-ok-bg: #12301d;
  --acx-err: #ffa3a8;
  --acx-err-bg: #3b171a;
  --acx-warn: #f3c56f;
  --acx-warn-bg: #3a2b0b;
  --acx-info: #9cc4f5;
  --acx-info-bg: #14283f;
  --acx-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ac-client[data-ac-theme="dark"],
  .ac-notice[data-ac-theme="dark"] {
    --acx-link: color-mix(in srgb, var(--acx-primary) 55%, #fff);
  }
}

@media (prefers-color-scheme: dark) {
  .ac-client[data-ac-theme="system"],
  .ac-notice:not([data-ac-theme]),
  .ac-notice[data-ac-theme="system"] {
    --acx-bg: #10151c;
    --acx-surface: #18202a;
    --acx-surface-2: #212b37;
    --acx-text: #e8edf3;
    --acx-muted: #a8b3c1;
    --acx-border: #324050;
    --acx-border-strong: #7a8798;
    --acx-ok: #7fdb9b;
    --acx-ok-bg: #12301d;
    --acx-err: #ffa3a8;
    --acx-err-bg: #3b171a;
    --acx-warn: #f3c56f;
    --acx-warn-bg: #3a2b0b;
    --acx-info: #9cc4f5;
    --acx-info-bg: #14283f;
    --acx-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: dark) {
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .ac-client[data-ac-theme="system"],
    .ac-notice:not([data-ac-theme]),
    .ac-notice[data-ac-theme="system"] {
      --acx-link: color-mix(in srgb, var(--acx-primary) 55%, #fff);
    }
  }
}

/* Host dark markers (UNVERIFIED class/attribute names). Only when follow_site_theme is on and the admin did not force light. */
:is(html.dark, html.dark-mode, html[data-theme="dark"], html[data-bs-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"], body[data-bs-theme="dark"])
  :is(.ac-client, .ac-notice)[data-ac-follow-site="1"]:not([data-ac-theme="light"]) {
  --acx-bg: #10151c;
  --acx-surface: #18202a;
  --acx-surface-2: #212b37;
  --acx-text: #e8edf3;
  --acx-muted: #a8b3c1;
  --acx-border: #324050;
  --acx-border-strong: #7a8798;
  --acx-ok: #7fdb9b;
  --acx-ok-bg: #12301d;
  --acx-err: #ffa3a8;
  --acx-err-bg: #3b171a;
  --acx-warn: #f3c56f;
  --acx-warn-bg: #3a2b0b;
  --acx-info: #9cc4f5;
  --acx-info-bg: #14283f;
  --acx-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :is(html.dark, html.dark-mode, html[data-theme="dark"], html[data-bs-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"], body[data-bs-theme="dark"])
    :is(.ac-client, .ac-notice)[data-ac-follow-site="1"]:not([data-ac-theme="light"]) {
    --acx-link: color-mix(in srgb, var(--acx-primary) 55%, #fff);
  }
}

.ac-client[data-ac-density="compact"] { --acx-gap: 0.75rem; --acx-pad: 1rem; }
.ac-client[data-ac-density="comfortable"] { --acx-gap: 1.25rem; --acx-pad: 2rem; }

/* ------------------------------------------------------------------ base (scoped reset, no global rules) */
.ac-client,
.ac-client *,
.ac-client *::before,
.ac-client *::after,
.ac-notice,
.ac-notice *,
.ac-notice *::before,
.ac-notice *::after {
  box-sizing: border-box;
}
.ac-client {
  display: block;
  max-width: var(--ac-max-width, 40rem);
  margin-block: 1rem;
  margin-inline: auto;
  padding-inline: 0;
  color: var(--acx-text);
  font-family: var(--ac-font, inherit);
  line-height: 1.5;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  word-spacing: normal;
  text-indent: 0;
  -webkit-text-size-adjust: 100%;
}
.ac-client :where(h2, h3, p, ul, ol, li, form, section, header) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
}
.ac-client :where(ul, ol) { list-style: none; }
/* Beat common host rules like `.content p { margin; line-height }` / `.content ul { padding; list-style }` / `h2 { text-transform }`
   (specificity 0,1,1) with a doubled class (0,2,1). None of my own rules for these elements sets these properties. */
.ac-client.ac-client :is(h2, h3, p, ul, ol, li) { margin: 0; text-transform: none; letter-spacing: normal; text-shadow: none; float: none; }
.ac-client.ac-client :is(p, ul, ol, li) { line-height: inherit; }
.ac-client.ac-client :is(ul, ol) { padding: 0; list-style: none; }
.ac-client [hidden] { display: none !important; }
.ac-client .ac-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ac-client .ac-icon {
  display: inline-block;
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
}
.ac-client .ac-icon--lg { inline-size: 1.6em; block-size: 1.6em; }
.ac-client .ac-icon--xl { inline-size: 2.5em; block-size: 2.5em; }

/* no-JS vs JS visibility; the script adds .ac-js to the root */
.ac-client:not(.ac-js) .ac-js-only { display: none !important; }
.ac-client.ac-js .ac-nojs { display: none !important; }

/* ------------------------------------------------------------------ card */
.ac-client .ac-card {
  display: flex;
  flex-direction: column;
  gap: var(--acx-gap);
  padding: var(--acx-pad);
  background: var(--acx-surface);
  color: var(--acx-text);
  border: 1px solid var(--acx-border);
  border-radius: calc(var(--acx-radius) + 4px);
  box-shadow: var(--acx-shadow);
}
.ac-client .ac-head { display: flex; flex-direction: column; gap: 0.5rem; }
.ac-client .ac-logo { display: block; max-block-size: 2.5rem; max-inline-size: 100%; inline-size: auto; block-size: auto; margin-block-end: 0.25rem; }
.ac-client .ac-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--acx-text);
  overflow-wrap: anywhere;
}
.ac-client .ac-title .ac-icon { color: var(--acx-link); }
.ac-client .ac-title:focus { outline: none; }
.ac-client .ac-lead { color: var(--acx-text); font-size: 1.05em; }
.ac-client .ac-h3 { font-size: 1.1em; font-weight: 650; line-height: 1.3; color: var(--acx-text); }
.ac-client .ac-muted { color: var(--acx-muted); }
.ac-client .ac-center { text-align: center; }
.ac-client strong { font-weight: 650; }

/* ------------------------------------------------------------------ progress */
.ac-client .ac-progress {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  counter-reset: none;
}
.ac-client .ac-progress__item {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  font-size: 0.875em;
  color: var(--acx-muted);
}
.ac-client .ac-progress__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.95rem;
  inset-inline-start: calc(-50% + 1.1rem);
  inline-size: calc(100% - 2.2rem);
  block-size: 2px;
  background: var(--acx-border);
}
.ac-client .ac-progress__item:first-child::before { display: none; }
.ac-client .ac-progress__item.is-done::before,
.ac-client .ac-progress__item[aria-current="step"]::before { background: var(--acx-btn); }
.ac-client .ac-progress__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: 50%;
  border: 2px solid var(--acx-border-strong);
  background: var(--acx-surface);
  color: var(--acx-muted);
  font-weight: 650;
  font-size: 0.9em;
  line-height: 1;
}
.ac-client .ac-progress__dot .ac-icon { inline-size: 1.1em; block-size: 1.1em; vertical-align: 0; }
.ac-client .ac-progress__item[aria-current="step"] { color: var(--acx-text); font-weight: 650; }
.ac-client .ac-progress__item[aria-current="step"] .ac-progress__dot { border-color: var(--acx-btn); color: var(--acx-btn); }
.ac-client .ac-progress__item.is-done .ac-progress__dot { background: var(--acx-btn); border-color: var(--acx-btn); color: var(--acx-on-primary); }
.ac-client .ac-progress__item.is-failed .ac-progress__dot { background: var(--acx-err); border-color: var(--acx-err); color: var(--acx-surface); }
.ac-client .ac-progress__label { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ buttons / links */
.ac-client .ac-btn,
.ac-client a.ac-btn,
.ac-client button.ac-btn,
.ac-client label.ac-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  padding: 0.6rem 1.25rem;
  margin: 0;
  border: 2px solid var(--acx-btn);
  border-radius: var(--acx-radius);
  background: var(--acx-btn);
  color: var(--acx-on-primary);
  font: inherit;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ac-client .ac-btn:hover,
.ac-client a.ac-btn:hover,
.ac-client button.ac-btn:hover,
.ac-client label.ac-btn:hover {
  background: var(--acx-btn-hover, var(--acx-btn));
  border-color: var(--acx-btn-hover, var(--acx-btn));
  color: var(--acx-on-primary);
  text-decoration: none;
}
.ac-client .ac-btn:active { transform: translateY(1px); }
.ac-client .ac-btn[disabled],
.ac-client .ac-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.ac-client .ac-btn--lg { min-block-size: 3.1rem; padding-inline: 1.5rem; font-size: 1.05em; }
.ac-client .ac-btn--ghost,
.ac-client a.ac-btn--ghost,
.ac-client button.ac-btn--ghost,
.ac-client label.ac-btn--ghost {
  background: transparent;
  color: var(--acx-link);
  border-color: var(--acx-border-strong);
}
.ac-client .ac-btn--ghost:hover,
.ac-client a.ac-btn--ghost:hover,
.ac-client button.ac-btn--ghost:hover,
.ac-client label.ac-btn--ghost:hover {
  background: var(--acx-tint, var(--acx-surface-2));
  border-color: var(--acx-link);
  color: var(--acx-link);
}
.ac-client .ac-link,
.ac-client button.ac-link {
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  padding: 0.5rem 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--acx-link);
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.ac-client .ac-link:hover { text-decoration-thickness: 2px; background: none; color: var(--acx-link); }
.ac-client a:not(.ac-btn) { color: var(--acx-link); text-decoration: underline; text-underline-offset: 0.2em; }
.ac-client :is(a, button, input, label, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--acx-focus, var(--acx-link));
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--acx-surface);
}
.ac-client .ac-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.ac-client .ac-center + .ac-actions,
.ac-client .ac-stage ~ .ac-actions { justify-content: center; }
.ac-client .ac-alt { margin-block-start: 1.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--acx-border); }
.ac-client .ac-alt p { margin-block: 0 0.75rem; }

/* ------------------------------------------------------------------ alerts / panels / chips */
.ac-client .ac-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border: 1px solid currentColor;
  border-radius: var(--acx-radius);
  background: var(--acx-info-bg);
  color: var(--acx-info);
}
.ac-client .ac-alert .ac-icon { margin-block-start: 0.1rem; }
.ac-client .ac-alert p,
.ac-client .ac-alert span { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.ac-client .ac-alert--error { background: var(--acx-err-bg); color: var(--acx-err); }
.ac-client .ac-alert--warn { background: var(--acx-warn-bg); color: var(--acx-warn); }
.ac-client .ac-alert--info { background: var(--acx-info-bg); color: var(--acx-info); }
.ac-client .ac-alert:focus { outline: 3px solid currentColor; outline-offset: 2px; }
.ac-client .ac-alert a { color: inherit; }

.ac-client .ac-panel { display: flex; flex-direction: column; gap: var(--acx-gap); }
.ac-client .ac-intro { display: flex; flex-direction: column; gap: 0.25rem; }
.ac-client .ac-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ac-client .ac-chosen__label { color: var(--acx-muted); }
.ac-client .ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--acx-border-strong);
  border-radius: 999px;
  background: var(--acx-tint, var(--acx-surface-2));
  color: var(--acx-text);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.ac-client .ac-chip .ac-icon { color: var(--acx-link); }

.ac-client .ac-howto { counter-reset: ac-step; display: flex; flex-direction: column; gap: 0.6rem; }
.ac-client .ac-howto > li { counter-increment: ac-step; position: relative; padding-inline-start: 2.25rem; min-block-size: 1.75rem; }
.ac-client .ac-howto > li::before {
  content: counter(ac-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--acx-tint, var(--acx-surface-2));
  border: 1px solid var(--acx-border-strong);
  color: var(--acx-text);
  font-weight: 650;
  font-size: 0.85em;
}
.ac-client .ac-tips { display: flex; flex-direction: column; gap: 0.35rem; }
.ac-client .ac-tips > li { position: relative; padding-inline-start: 1.5rem; }
.ac-client .ac-tips > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.2rem;
  inset-block-start: 0.55em;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--acx-link);
}

.ac-client .ac-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-block-start: var(--acx-gap);
  border-block-start: 1px solid var(--acx-border);
  color: var(--acx-muted);
  font-size: 0.875em;
}
.ac-client .ac-privacy .ac-icon { margin-block-start: 0.1rem; color: var(--acx-link); }
.ac-client .ac-privacy--inline { padding: 0.75rem 1rem; border: 1px solid var(--acx-border); border-radius: var(--acx-radius); background: var(--acx-surface-2); }
.ac-client .ac-cancel { display: flex; justify-content: center; }

/* ------------------------------------------------------------------ result blocks */
.ac-client .ac-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  text-align: center;
  border-radius: var(--acx-radius);
}
.ac-client .ac-result form { display: flex; justify-content: center; }
.ac-client .ac-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
}
.ac-client .ac-result__icon .ac-icon { inline-size: 2.4rem; block-size: 2.4rem; vertical-align: 0; }
.ac-client .ac-result--ok .ac-result__icon { background: var(--acx-ok-bg); color: var(--acx-ok); }
.ac-client .ac-result--fail .ac-result__icon { background: var(--acx-err-bg); color: var(--acx-err); }
.ac-client .ac-result--wait .ac-result__icon { background: var(--acx-warn-bg); color: var(--acx-warn); }
.ac-client .ac-result:focus { outline: none; }

/* ------------------------------------------------------------------ form fields (manual review upload) */
.ac-client .ac-form { display: flex; flex-direction: column; gap: var(--acx-gap); }
.ac-client .ac-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ac-client .ac-label { font-weight: 650; color: var(--acx-text); }
.ac-client .ac-hint { color: var(--acx-muted); font-size: 0.875em; }
.ac-client .ac-input {
  display: block;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.55rem 0.75rem;
  margin: 0;
  border: 2px solid var(--acx-border-strong);
  border-radius: var(--acx-radius);
  background: var(--acx-surface);
  color: var(--acx-text);
  font: inherit;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}
.ac-client textarea.ac-input { resize: vertical; min-block-size: 5rem; }
.ac-client input.ac-input[type="file"] { padding: 0.45rem 0.6rem; cursor: pointer; }
.ac-client .ac-input::file-selector-button {
  margin-inline-end: 0.75rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: calc(var(--acx-radius) - 2px);
  background: var(--acx-btn);
  color: var(--acx-on-primary);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.ac-client .ac-input:focus-visible { outline: 3px solid var(--acx-link); outline-offset: 2px; border-color: var(--acx-link); }

/* ------------------------------------------------------------------ method cards */
.ac-client .ac-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; }
.ac-client .ac-cards__item { display: flex; }
.ac-client .ac-method-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 0.85rem;
  inline-size: 100%;
  min-block-size: 4.5rem;
  padding: 1rem;
  margin: 0;
  border: 2px solid var(--acx-border);
  border-radius: calc(var(--acx-radius) + 2px);
  background: var(--acx-surface);
  color: var(--acx-text);
  font: inherit;
  line-height: 1.5;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.ac-client .ac-method-card:hover { border-color: var(--acx-btn); background: var(--acx-tint, var(--acx-surface-2)); color: var(--acx-text); }
.ac-client .ac-method-card:active { transform: translateY(1px); }
.ac-client .ac-method-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--acx-radius);
  background: var(--acx-tint, var(--acx-surface-2));
  color: var(--acx-link);
}
.ac-client .ac-method-card__icon .ac-icon { vertical-align: 0; }
.ac-client .ac-method-card__body { display: flex; flex-direction: column; gap: 0.2rem; min-inline-size: 0; flex: 1 1 auto; }
.ac-client .ac-method-card__name { font-weight: 700; overflow-wrap: anywhere; }
.ac-client .ac-method-card__desc { color: var(--acx-muted); font-size: 0.9em; }

/* ------------------------------------------------------------------ status / spinner */
.ac-client .ac-status { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.5rem 0; color: var(--acx-text); text-align: center; }
.ac-client .ac-spinner {
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border: 3px solid var(--acx-border);
  border-block-start-color: var(--acx-btn);
  border-radius: 50%;
  animation: ac-spin 0.9s linear infinite;
}
.ac-client .ac-status.is-paused .ac-spinner { animation-play-state: paused; }
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ wallet */
.ac-client .ac-wallet__grid { display: grid; grid-template-columns: 1fr; gap: var(--acx-gap); }
.ac-client .ac-wallet__device,
.ac-client .ac-wallet__qr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--acx-border);
  border-radius: var(--acx-radius);
  background: var(--acx-surface-2);
}
.ac-client .ac-wallet__device .ac-btn { align-self: stretch; }
.ac-client .ac-qr { align-self: center; max-inline-size: 15rem; inline-size: 100%; }
.ac-client .ac-qr svg { display: block; inline-size: 100%; block-size: auto; border-radius: calc(var(--acx-radius) / 2); background: #fff; }
.ac-client .ac-qr:empty { display: none; }
@media (min-width: 40em) {
  .ac-client .ac-wallet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
@media (max-width: 39.99em) {
  /* on a phone the same-device button comes first, the QR is secondary */
  .ac-client .ac-wallet__qr { order: 2; }
}

/* ------------------------------------------------------------------ capture */
.ac-client .ac-step { display: flex; flex-direction: column; gap: var(--acx-gap); }
.ac-client .ac-stage {
  position: relative;
  inline-size: 100%;
  max-inline-size: 28rem;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  max-block-size: 70vh;
  overflow: hidden;
  border-radius: calc(var(--acx-radius) + 2px);
  background: #0b0f14;
  border: 1px solid var(--acx-border);
}
.ac-client .ac-video,
.ac-client .ac-canvas { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; background: #0b0f14; }
.ac-client .ac-video { transform: scaleX(-1); } /* mirror the live view only; the photo is not mirrored */
.ac-client .ac-canvas { object-fit: contain; }
.ac-client .ac-guide {
  position: absolute;
  inset-block: 8%;
  inset-inline: 28%;
  border: 3px dashed rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.ac-client .ac-attempts { text-align: center; font-size: 0.9em; }

/* ------------------------------------------------------------------ small screens / motion / contrast */
@media (max-width: 30em) {
  .ac-client { margin-block: 0.5rem; }
  .ac-client .ac-card { padding: calc(var(--acx-pad) * 0.75); }
  .ac-client .ac-actions { flex-direction: column; align-items: stretch; }
  .ac-client .ac-actions .ac-btn { inline-size: 100%; }
  .ac-client .ac-progress__label { font-size: 0.85em; }
  .ac-client .ac-guide { inset-inline: 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-client *,
  .ac-client *::before,
  .ac-client *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .ac-client .ac-spinner { border-color: var(--acx-btn); border-radius: 50%; opacity: 0.8; }
}
@media (forced-colors: active) {
  .ac-client .ac-card,
  .ac-client .ac-alert,
  .ac-client .ac-method-card,
  .ac-client .ac-chip,
  .ac-client .ac-btn { border: 2px solid CanvasText; }
  .ac-client .ac-progress__dot { border-color: CanvasText; }
  .ac-client .ac-btn { background: ButtonFace; color: ButtonText; }
  .ac-client .ac-progress__item.is-done .ac-progress__dot { background: Highlight; color: HighlightText; }
}
@media print { .ac-client .ac-actions, .ac-client .ac-cancel { display: none !important; } }

/* ------------------------------------------------------------------ .ac-notice (checkout / register notice)
 * Small, standalone: <div class="ac-notice" role="alert"><svg class="ac-icon">..</svg><span>text <a href>link</a></span></div>
 * Optional data-ac-theme / data-ac-follow-site attributes work like on .ac-client. Without data-ac-theme it follows the OS. */
.ac-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  max-inline-size: 100%;
  margin-block: 0.75rem;
  margin-inline: 0;
  padding: 0.75rem 1rem;
  border: 1px solid currentColor;
  border-radius: var(--acx-radius);
  background: var(--acx-warn-bg);
  color: var(--acx-warn);
  font: inherit;
  line-height: 1.45;
  text-align: start;
}
.ac-notice .ac-icon { flex: none; inline-size: 1.25em; block-size: 1.25em; margin-block-start: 0.1rem; fill: none; stroke: currentColor; }
.ac-notice .ac-notice__body,
.ac-notice > span,
.ac-notice > p { flex: 1 1 auto; min-inline-size: 0; margin: 0; overflow-wrap: anywhere; color: inherit; }
.ac-notice a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.ac-notice a:hover { text-decoration-thickness: 2px; }
.ac-notice a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.ac-notice--error { background: var(--acx-err-bg); color: var(--acx-err); }
.ac-notice--info { background: var(--acx-info-bg); color: var(--acx-info); }
.ac-notice--ok { background: var(--acx-ok-bg); color: var(--acx-ok); }
/* already verified: a small, unobtrusive status line instead of a box */
.ac-notice--quiet { display: flex; inline-size: fit-content; max-inline-size: 100%; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; border-color: transparent; font-size: 0.875em; }
.ac-notice--quiet .ac-icon { margin-block-start: 0; inline-size: 1.1em; block-size: 1.1em; }
@media (forced-colors: active) { .ac-notice { border: 2px solid CanvasText; } }

/* ------------------------------------------------------------------ provider in an iframe (display mode "inline") */
.ac-client .ac-frame {
  inline-size: 100%;
  border: 1px solid var(--acx-border);
  border-radius: var(--acx-radius);
  overflow: hidden;
  background: var(--acx-surface-2);
}
.ac-client .ac-frame__iframe {
  display: block;
  inline-size: 100%;
  block-size: min(42rem, 80vh);
  min-block-size: 24rem;
  border: 0;
  background: #fff;
}

/* ------------------------------------------------------------------ return page of a popup / iframe (return.php) */
.ac-client.ac-return {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  padding: 1rem;
  background: var(--acx-bg);
  color: var(--acx-text);
}
.ac-client .ac-return__card { inline-size: 100%; max-inline-size: 28rem; text-align: center; }
.ac-client .ac-return__title { margin-block: 0 0.5rem; }

/* ---- AusweisApp bridge (1. download, 2. code, 3. send) --------------------------------------------------------------------- */
.ac-client .ac-bridge__steps { counter-reset: ac-step; display: flex; flex-direction: column; gap: 1.25rem; padding: 0; margin: 1rem 0; list-style: none; }
.ac-client .ac-bridge__step { counter-increment: ac-step; position: relative; padding-inline-start: 2.25rem; }
.ac-client .ac-bridge__step::before {
  content: counter(ac-step); position: absolute; inset-inline-start: 0; inset-block-start: 0.1rem;
  inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--acx-tint, var(--acx-surface-2)); border: 1px solid var(--acx-border-strong); color: var(--acx-text); font-weight: 650; font-size: 0.85em;
}
.ac-client .ac-bridge__downloads { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ac-client .ac-bridge__code { inline-size: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; word-break: break-all; }
.ac-client .ac-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125em; overflow-wrap: anywhere; }

/* ---- optional provider logos (files on the shop's own server, Service\Logos) ----------------------------------------------- */
/* light chip behind the logo so dark logos stay visible in dark mode; fixed height, the name stays next to it */
.ac-client .ac-logo-chip { display: inline-flex; align-items: center; justify-content: center; inline-size: fit-content; inline-size: -moz-fit-content; max-inline-size: 132px; align-self: flex-start; flex: 0 0 auto; padding: 4px; border-radius: 6px; background: #fff; border: 1px solid var(--acx-border); margin-block-end: 0.25rem; }
/* the chip follows the logo width (a square app icon gets a square chip); in the column of the method card it must not stretch */
.ac-client .ac-logo-img { display: block; block-size: 28px; inline-size: auto; max-inline-size: 120px; object-fit: contain; }
.ac-client .ac-logo-chip[hidden] { display: none !important; }