:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --accent-blue-subtle: #eef0ff;
  --primary: #3e4fe0;
  --primary-foreground: #fafafa;
  --primary-text: #3e4fe0;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #15803d;
  --warning: #ca8a04;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #737373;

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;

  --font-sans:
    "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  --rail-width: 232px;
  --content-max: 880px;
  --gutter: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #171717;
    --card-foreground: #fafafa;
    --secondary: #262626;
    --secondary-foreground: #fafafa;
    --muted: #262626;
    --muted-foreground: #a3a3a3;
    --accent: #404040;
    --accent-foreground: #fafafa;
    --accent-blue-subtle: #1e2258;
    --primary: #3e4fe0;
    --primary-foreground: #ffffff;
    --primary-text: #7181ff;
    --destructive: #f87171;
    --destructive-foreground: #0a0a0a;
    --success: #4ade80;
    --warning: #facc15;
    --border: rgb(255 255 255 / 10%);
    --input: rgb(255 255 255 / 15%);
    --ring: #a3a3a3;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a3a3a3;
  --accent: #404040;
  --accent-foreground: #fafafa;
  --accent-blue-subtle: #1e2258;
  --primary: #3e4fe0;
  --primary-foreground: #ffffff;
  --primary-text: #7181ff;
  --destructive: #f87171;
  --destructive-foreground: #0a0a0a;
  --success: #4ade80;
  --warning: #facc15;
  --border: rgb(255 255 255 / 10%);
  --input: rgb(255 255 255 / 15%);
  --ring: #a3a3a3;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--primary-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

code {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

small {
  display: block;
  font-size: 13px;
  color: var(--muted-foreground);
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--muted-foreground);
}

.small {
  font-size: 13px;
  color: var(--muted-foreground);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  padding: 8px 12px;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-md);
  z-index: 20;
}

.skip-link:focus {
  top: 16px;
}

/* Shell: rail on desktop, navigation sheet on phone */

.shell {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  border-right: 1px solid var(--border);
  background: var(--background);
}

.rail__nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-weight: 500;
}

.rail__nav a:hover {
  text-decoration: none;
  background: var(--secondary);
  color: var(--foreground);
}

.rail__nav a[aria-current="page"] {
  background: var(--accent-blue-subtle);
  color: var(--primary-text);
}

.rail__nav svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.rail__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.rail__identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-inline: 12px;
  min-width: 0;
}

.rail__identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail__footer .identity-email {
  font-size: 13px;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.rail__footer a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-weight: 500;
}

.rail__footer a:hover {
  background: var(--secondary);
  color: var(--foreground);
  text-decoration: none;
}

.rail__footer a[aria-current="page"] {
  background: var(--accent-blue-subtle);
  color: var(--primary-text);
}

.rail__footer svg {
  width: 20px;
  height: 20px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--foreground);
}

.wordmark:hover {
  text-decoration: none;
}

.wordmark__logo {
  display: block;
  width: 124px;
  height: 33px;
}

.wordmark__logo--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark__logo--light {
    display: none;
  }

  :root:not([data-theme="light"]) .wordmark__logo--dark {
    display: block;
  }
}

:root[data-theme="dark"] .wordmark__logo--light {
  display: none;
}

:root[data-theme="dark"] .wordmark__logo--dark {
  display: block;
}

.mobile-bar {
  display: none;
}

.content {
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  padding-block: 40px 64px;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.signed-out {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-block: 40px;
  padding-inline: 16px;
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
  }

  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail {
    display: none;
  }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--background) 92%, transparent);
    backdrop-filter: blur(16px);
  }

  .mobile-bar .wordmark {
    padding: 0;
  }

  .content {
    padding-block: 24px 48px;
    gap: 32px;
  }
}

.mobile-menu summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  cursor: pointer;
  list-style: none;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu summary svg {
  width: 20px;
  height: 20px;
}

.mobile-menu__sheet {
  position: fixed;
  inset: 65px 0 auto;
  max-height: calc(100vh - 65px);
  overflow-y: auto;
  padding: 20px 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--background);
  box-shadow: 0 18px 36px rgb(0 0 0 / 12%);
}

.mobile-menu__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px 16px;
}

.mobile-menu__header div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-menu__header span {
  color: var(--muted-foreground);
  font-size: 13px;
}

.mobile-menu nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-size: 16px;
  font-weight: 500;
}

.mobile-menu nav a:hover {
  background: var(--secondary);
  text-decoration: none;
}

.mobile-menu nav a[aria-current="page"] {
  background: var(--accent-blue-subtle);
  color: var(--primary-text);
}

.mobile-menu nav svg {
  width: 22px;
  height: 22px;
}

/* Buttons */

.button,
.button-secondary,
.button-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.button {
  background: var(--primary);
  color: var(--primary-foreground);
}

.button:hover {
  background: color-mix(in srgb, var(--primary) 88%, black);
  text-decoration: none;
}

.button-secondary {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

.button-secondary:hover {
  background: var(--secondary);
  text-decoration: none;
}

.button-destructive {
  background: transparent;
  color: var(--destructive);
  border-color: var(--border);
}

.button:disabled,
.button-secondary:disabled,
.button-destructive:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-text);
  cursor: pointer;
}

.button-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button-text {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 8px;
  color: var(--muted-foreground);
  font-weight: 500;
}

.button-text:hover {
  color: var(--foreground);
  text-decoration: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Page structure */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.page-header p {
  margin-top: 6px;
  color: var(--muted-foreground);
  max-width: 60ch;
}

/* Profile and settings */

.preference-card,
.session-card {
  width: 100%;
  max-width: 640px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.preference-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-field label,
.choice-group legend {
  font-weight: 500;
}

.form-field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
}

.form-field input:disabled {
  color: var(--muted-foreground);
  background: var(--secondary);
}

.form-field input:focus-visible {
  border-color: var(--primary);
  outline-color: var(--primary);
  outline-offset: 0;
}

.choice-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
}

.choice-group legend {
  margin-bottom: 8px;
}

.choice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.choice-row:first-of-type {
  border-top: 0;
}

.choice-row span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choice-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex: none;
}

.preference-card__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.session-card h2 {
  font-size: 16px;
}

.session-card p {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.button-link--muted {
  color: var(--muted-foreground);
}

.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section__heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.section__heading a {
  font-size: 13px;
  font-weight: 500;
}

.notice {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--secondary);
}

.notice--warning {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 32px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
}

.empty-state p {
  color: var(--muted-foreground);
  max-width: 48ch;
}

.empty-state .button-secondary {
  margin-top: 8px;
}

/* Attention block */

.attention {
  padding: 20px 24px;
  border-radius: var(--radius-2xl);
  background: var(--accent-blue-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attention h2 {
  font-size: 16px;
}

.attention .row-list li {
  border-top-color: color-mix(in srgb, var(--primary) 18%, transparent);
}

.attention .row-list li:first-child {
  border-top: 0;
}

.attention .row {
  padding-inline: 0;
}

/* Rows */

.row-list li {
  border-top: 1px solid var(--border);
}

.row-list li:first-child {
  border-top: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  color: inherit;
}

a.row:hover {
  text-decoration: none;
}

a.row:hover .row__title {
  color: var(--primary-text);
}

.row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.row__title {
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.row__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}

.row__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.row__reason {
  padding: 0 0 14px 48px;
  font-size: 13px;
  color: var(--destructive);
}

.amount {
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .row--stack {
    flex-wrap: wrap;
  }

  .row--stack .row__actions {
    width: 100%;
    padding-left: 48px;
  }
}

/* Avatars and status */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
  flex: none;
}

.avatar--muted {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.pill--green {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.pill--amber {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}

.pill--red {
  background: color-mix(in srgb, var(--destructive) 12%, transparent);
  color: var(--destructive);
}

.status-label {
  font-size: 13px;
  color: var(--muted-foreground);
}

.status-label--green {
  color: var(--success);
}

.status-label--amber {
  color: var(--warning);
}

.status-label--red {
  color: var(--destructive);
}

.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--muted-foreground);
  flex: none;
}

.status-icon--green {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

.status-icon--red {
  color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 12%, transparent);
}

.status-icon--amber {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
}

/* Day groups */

.day-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day-group h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Consent and detail cards */

.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 24px;
}

/* One list, two voices: what the agent may do, and the lines it cannot cross.
   The marker states which is which, and the text repeats it, so the
   distinction never rests on colour alone. */
.terms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.terms-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-wrap: pretty;
}

.terms-list li::before {
  content: "✓";
  flex: none;
  width: 16px;
  color: var(--success);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.terms-list .is-cannot {
  color: var(--muted-foreground);
}

.terms-list .is-cannot::before {
  content: "✕";
  color: var(--muted-foreground);
}

.detail-list {
  display: flex;
  flex-direction: column;
}

.detail-list > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.detail-list > div:first-child {
  border-top: 0;
}

.detail-list dt {
  color: var(--muted-foreground);
}

.detail-list dd {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .detail-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Cards */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.pay-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 172px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.pay-card--inactive {
  opacity: 0.6;
}

.pay-card__top,
.pay-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.pay-card__top {
  align-items: flex-start;
}

.pay-card__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pay-card__number {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.pay-card__brand-name {
  font-weight: 500;
}

.pay-card__action {
  margin-top: -12px;
}

.pay-card__action .button-secondary {
  width: 100%;
}

.pay-card__expiry {
  font-size: 13px;
  color: var(--muted-foreground);
}

.brand-logo {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  flex: none;
}

.brand-logo--generic {
  display: grid;
  place-items: center;
  background: var(--secondary);
  color: var(--muted-foreground);
}

[hidden] {
  display: none !important;
}

.enroll {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  max-width: 560px;
}

.enroll__status {
  margin: 0;
  color: var(--muted-foreground);
}

.enroll__form {
  min-height: 0;
}

.enroll__form:empty {
  display: none;
}

.enroll .button-secondary {
  justify-self: start;
}

/* --- The one add-card door: pick a network ---------------------------------- */

.add-card-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 560px;
}

.add-card-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--foreground);
  text-align: left;
}

a.add-card-option:hover {
  text-decoration: none;
  border-color: var(--primary);
  background: var(--accent-blue-subtle);
}

a.add-card-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.add-card-option .brand-logo {
  width: 40px;
  height: 28px;
  flex: none;
  object-fit: contain;
}

.add-card-option__body {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.add-card-option__title {
  font-size: 16px;
  font-weight: 500;
}

.add-card-option__meta {
  font-size: 13px;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.add-card-option > .design-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted-foreground);
}

/* Unavailable says so in words, not only by going grey. */
.add-card-option--off {
  border-style: dashed;
  background: transparent;
}

.add-card-option--off .add-card-option__title,
.add-card-option--off .brand-logo {
  opacity: 0.6;
}

.add-card-option__state {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.sdk-mount {
  min-height: 200px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  color: var(--muted-foreground);
  text-align: center;
}

/* Login */

.login-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
}

.login-card .wordmark {
  padding: 0;
}

.login-card h1 {
  font-size: 24px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-card label {
  font-size: 13px;
  font-weight: 500;
}

.login-card input[type="email"] {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  margin-bottom: 8px;
}

.login-card input[type="email"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
}

.login-card .button {
  width: 100%;
}

/* Error document */

.error-document {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  padding-block: 40px;
  padding-inline: 16px;
}

.error-code {
  font-size: 13px;
  color: var(--muted-foreground);
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .button-secondary,
  .rail__nav a {
    transition:
      background-color 120ms ease,
      border-color 120ms ease;
  }
}

.shell__main {
  min-width: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rail__account .button-link {
  align-self: flex-start;
}

/* Wallet Figma theme — Yuno dashboard primitives with Wallet sizing. */
:root {
  --rail-width: 252px;
  --content-max: 700px;
  --gutter: 48px;
  --accent-blue-subtle: #ede9fe;
  --wallet-surface: #f1f5f9;
  --wallet-muted: #6c6f75;
  --ring: #3e4fe0;
}
:root[data-theme="dark"] {
  --wallet-surface: #262626;
  --wallet-muted: #a3a3a3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wallet-surface: #262626;
    --wallet-muted: #a3a3a3;
  }
}
h1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}
.design-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
}
.rail {
  background: var(--card);
  padding: 32px 24px 24px;
  gap: 32px;
  border-color: var(--border);
}
:root[data-theme="light"] .rail {
  background: #fafafa;
}
.rail .wordmark {
  padding: 0 12px;
}
.rail .wordmark__logo {
  width: 98px;
  height: 28px;
}
.rail__nav ul {
  gap: 6px;
}
.rail__nav a {
  color: var(--foreground);
  font-weight: 600;
  padding: 8px 12px;
}
.rail__nav .design-icon {
  width: 24px;
  height: 24px;
}
.nav-chevron {
  display: none;
}
.rail__footer {
  border: 0;
  padding: 0;
}
.wallet-identity {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.identity-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  color: white;
  background: var(--primary);
  font-weight: 700;
}
.wallet-identity > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wallet-identity strong {
  font-size: 14px;
  line-height: 1.2;
}
.wallet-identity > div > span {
  font-size: 12px;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}
.wallet-identity--large {
  flex-direction: column;
  text-align: center;
  gap: 12px;
}
.wallet-identity--large .identity-avatar {
  width: 72px;
  height: 72px;
  font-size: 24px;
}
.wallet-identity--large > div {
  gap: 10px;
}
.wallet-identity--large strong {
  font-size: 20px;
}
.content {
  margin-inline: auto;
  padding-block: 48px;
  gap: 28px;
}
.page-header {
  margin: 0;
  align-items: center;
  gap: 16px;
}
.page-header p {
  font-size: 14px;
  margin-top: 6px;
  color: var(--muted-foreground);
}
.wallet-button,
.button,
.button-secondary,
.button-text {
  border-radius: 9999px;
}
.wallet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 24px;
  font: 500 14px/20px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
}
.wallet-button:hover {
  text-decoration: none;
}
.wallet-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.wallet-input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--background);
  color: var(--foreground);
  font: 400 14px/20px var(--font-sans);
  box-shadow: none;
}
.wallet-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
}
.row-list > li {
  border: 0;
}
.row-list .row,
.wallet-card > summary {
  border: 0;
  border-radius: 16px;
  padding: 16px;
  background: var(--wallet-surface);
  gap: 12px;
  color: var(--foreground);
  min-height: 76px;
}
.row-list .row:hover,
.wallet-card > summary:hover {
  text-decoration: none;
  background: var(--wallet-hover);
}
.row__title {
  font-size: 14px;
  font-weight: 500;
}
.row__meta {
  color: var(--foreground);
  font-size: 12px;
  margin-top: 4px;
}
.row__body {
  min-width: 0;
  flex: 1;
}
.row > .design-icon:last-child {
  width: 16px;
  height: 16px;
}
/* An assistant's own mark on its own backdrop, like an app icon: the same in
   both themes. The hairline ring keeps a white or black tile from dissolving
   into a surface of the same value. */
.agent-logo {
  --agent-size: 44px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--agent-size);
  height: var(--agent-size);
  border-radius: calc(var(--agent-size) * 0.3);
  flex: none;
  overflow: hidden;
  background: #fff;
  color: var(--foreground);
  font-size: calc(var(--agent-size) * 0.42);
  font-weight: 600;
  line-height: 1;
}
.agent-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--foreground) 12%, transparent);
  pointer-events: none;
}
.agent-logo img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.agent-logo--xs {
  --agent-size: 20px;
}
.agent-logo--sm {
  --agent-size: 32px;
}
.agent-logo--lg {
  --agent-size: 72px;
}
.agent-logo--codex img {
  width: 82%;
  height: 82%;
}
.agent-logo--claude {
  background: #d97757;
}
.agent-logo--claude img {
  width: 58%;
  height: 58%;
}
.agent-logo--cursor {
  background: #14120b;
}
.agent-logo--cursor img {
  width: 52%;
  height: 52%;
}
.agent-logo--grok {
  background: #050505;
}
.agent-logo--grok img {
  width: 56%;
  height: 56%;
}
.agent-logo--meta img {
  width: 70%;
  height: 70%;
}
.agent-logo--initial {
  background: var(--wallet-surface);
}
.agent-logo--muted {
  opacity: 0.6;
}
.agent-connected {
  width: 16px;
  height: 16px;
}
.purchase-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-blue-subtle);
  color: var(--primary-text);
  flex: none;
}
.purchase-mark--muted {
  background: var(--secondary);
  color: var(--muted-foreground);
}
.day-group h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.wallet-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wallet-card > summary {
  display: flex;
  align-items: center;
  min-height: 58px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
}
.wallet-card > summary::-webkit-details-marker {
  display: none;
}
.wallet-card .brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.default-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-text);
}
.wallet-card-details {
  padding: 16px;
  display: grid;
  gap: 8px;
}
.wallet-card[open] > summary > .design-icon:last-child {
  transform: rotate(90deg);
}
.page-profile {
  gap: 28px;
}
.profile-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.profile-form h2 {
  font-size: 18px;
  grid-column: 1 / -1;
}
.profile-name,
.profile-address,
.profile-form .preference-card__actions {
  grid-column: 1 / -1;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-size: 14px;
  font-weight: 400;
}
.profile-form .preference-card__actions {
  display: flex;
  justify-content: flex-end;
  border: 0;
  padding: 0;
  margin: 0;
}
.settings-form,
.settings-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-form h2,
.settings-links h2 {
  font-size: 14px;
  font-weight: 600;
}
.setting-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-height: 64px;
  width: 100%;
  background: var(--wallet-surface);
  border: 0;
  border-radius: 16px;
  color: var(--foreground);
  text-align: left;
  font-size: 14px;
}
.setting-row > span {
  flex: 1;
}
.setting-row > .design-icon {
  width: 22px;
  height: 22px;
}
.setting-row > .design-icon:last-child {
  width: 18px;
  height: 18px;
}
a.setting-row:hover {
  text-decoration: none;
  background: var(--wallet-hover);
}
.setting-row select {
  max-width: 140px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  color: var(--foreground);
  background: var(--background);
}
.wallet-switch {
  appearance: none;
  width: 44px;
  height: 24px;
  flex: none;
  border-radius: 9999px;
  border: 0;
  /* Off-state track: derived from the theme, not a fixed slate. */
  background: color-mix(in srgb, var(--foreground) 26%, transparent);
  padding: 3px;
  cursor: pointer;
}
.wallet-switch::before {
  content: "";
  display: block;
  height: 18px;
  width: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s;
}
.wallet-switch:checked {
  background: var(--primary);
}
.wallet-switch:checked::before {
  transform: translateX(20px);
}
.appearance-settings {
  margin-top: 6px;
}
.appearance-settings summary {
  cursor: pointer;
}
.settings-form > .wallet-button {
  align-self: flex-end;
}
.shell--standalone {
  display: block;
}
.shell--standalone .rail,
.shell--standalone .mobile-bar {
  display: none;
}
.menu-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 96px);
  background: var(--wallet-surface);
  padding: 24px;
  border-radius: 32px;
  gap: 60px;
}
.menu-handle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  /* Reads the same on either theme instead of a fixed light grey. */
  background: color-mix(in srgb, var(--foreground) 22%, transparent);
  align-self: center;
}
.menu-page nav ul {
  display: grid;
  gap: 8px;
}
.menu-page nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  background: var(--card);
  border-radius: 16px;
  color: var(--foreground);
}
.menu-page nav a > span {
  flex: 1;
}
.menu-page nav a > .design-icon:last-child {
  width: 16px;
  height: 16px;
}
.menu-page footer {
  margin-top: auto;
  text-align: center;
  font-size: 12px;
}
.menu-page footer .wordmark {
  margin-bottom: 8px;
}
.signed-out {
  padding: 0;
  display: block;
}
.login-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--background);
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.login-card > .wordmark {
  align-self: flex-start;
  padding: 0;
}
.login-card .wordmark__logo {
  width: 98px;
  height: 28px;
}
.login-content {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-block: auto;
  padding-block: 64px;
  text-align: center;
}
.login-content header {
  display: grid;
  gap: 6px;
}
.login-content h1 {
  margin: 0;
}
.login-content header p {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.login-card .login-form {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.login-card .login-form .wallet-button {
  width: 100%;
}
.login-card .login-form input {
  margin: 0;
}
.login-card .login-form .wallet-input {
  font-size: 14px;
}
.login-links {
  display: flex;
  gap: 24px;
  font-size: 12px;
}
.login-links a,
.change-email {
  color: var(--foreground);
}
.otp-fields {
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
  border: 0;
}
.otp-fields .wallet-input {
  height: 56px;
  border: 0;
  border-radius: 16px;
  background: var(--wallet-surface);
  text-align: center;
  font-size: 18px;
  padding: 0;
}
.prototype-hint {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: -32px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.info-page {
  max-width: 700px;
  padding: 24px;
  display: grid;
  gap: 24px;
  margin: auto;
}
.approval-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100dvh - 96px);
  gap: 28px;
}
.approval-content {
  margin-block: auto;
  width: 100%;
  max-width: 500px;
  display: grid;
  gap: 36px;
}
.approval-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.approval-heading .purchase-mark {
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  width: 52px;
  height: 52px;
}
.approval-heading .purchase-mark .design-icon {
  width: 32px;
  height: 32px;
}
.approval-heading h1 {
  font-size: 18px;
  line-height: 28px;
}
.approval-limits {
  padding: 8px 16px;
  border-radius: 16px;
  background: var(--wallet-surface);
}
.approval-limits > div {
  display: flex;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
}
.approval-limits > div:last-child {
  border: 0;
}
.approval-limits dt {
  font-weight: 600;
}
.approval-limits dd {
  margin-left: auto;
  text-align: right;
  overflow-wrap: anywhere;
}
.approval-actions {
  display: flex;
  gap: 28px;
}
.approval-actions form {
  flex: 1;
}
.approval-actions .wallet-button {
  width: 100%;
}
.approval-footer {
  font-size: 12px;
  color: var(--muted-foreground);
  text-align: center;
}
.approval-payment {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wallet-surface);
  padding: 16px;
  border-radius: 16px;
}
.approval-payment .brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.approval-payment > span {
  flex: 1;
}
@media (max-width: 760px) {
  :root {
    --gutter: 24px;
  }
  .content {
    padding: 32px 24px 24px;
    gap: 32px;
  }
  .mobile-bar {
    position: static;
    padding: 48px 24px 0;
    border: 0;
    background: var(--background);
  }
  .mobile-back,
  .mobile-menu summary {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wallet-surface);
  }
  .mobile-back .design-icon,
  .mobile-menu summary .design-icon {
    width: 18px;
    height: 18px;
  }
  .mobile-menu {
    display: none;
  }
  .page-header p {
    display: none;
  }
  .page-header {
    align-items: center;
  }
  .page-header > .wallet-button {
    min-height: 36px;
    padding: 6px 16px;
  }
  .row-list .row {
    min-height: 76px;
  }
  .page-profile {
    min-height: calc(100dvh - 84px);
  }
  .profile-form {
    border: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: 1;
    align-content: start;
  }
  .profile-form h2 {
    display: none;
  }
  .profile-name {
    order: 0;
  }
  .profile-country {
    grid-column: 1 / -1;
    order: 1;
  }
  .profile-address {
    order: 2;
  }
  .profile-city,
  .profile-state {
    order: 3;
  }
  .profile-form .preference-card__actions {
    order: 4;
    margin-top: 32px;
    align-self: end;
  }
  .profile-form .preference-card__actions .wallet-button {
    width: 100%;
  }
  .menu-page {
    min-height: 100dvh;
    border-radius: 32px 32px 0 0;
    padding: 12px 24px 32px;
    gap: 60px;
  }
  .page-menu {
    padding: 0;
  }
  .menu-page .wallet-identity {
    margin-top: 16px;
  }
  .login-card {
    padding: 64px 24px 32px;
  }
  .login-card > .wordmark {
    align-self: center;
  }
  .login-card .wordmark__logo {
    width: 114px;
    height: 32px;
  }
  .login-content {
    gap: 48px;
  }
  .login-content h1 {
    font-size: 24px;
  }
  .login-card .login-form {
    gap: 48px;
  }
  .otp-fields {
    gap: 12px;
  }
  .approval-page {
    min-height: calc(100dvh - 56px);
  }
  .approval-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }
  .approval-actions .wallet-button {
    width: 100%;
  }
  .approval-page > .wordmark {
    margin-top: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wallet-switch::before {
    transition: none;
  }
}

.wallet-button[data-wallet-variant="default"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.wallet-button[data-wallet-variant="secondary"] {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.wallet-button[data-wallet-variant="link"] {
  background: transparent;
  color: var(--foreground);
  min-height: auto;
  padding: 0;
}
.wallet-button[data-wallet-variant="default"]:hover {
  background: color-mix(in srgb, var(--primary) 90%, black);
}
.profile-form {
  max-width: none;
}

.page-mandates,
.page-authorizations {
  --content-max: 760px;
}
.profile-form .wallet-input,
.login-card input.wallet-input[type="email"] {
  height: 36px;
}
@media (max-width: 760px) {
  .profile-form {
    grid-template-rows: repeat(4, max-content) 1fr;
    align-content: stretch;
  }
}

/*
 * Phone widths: one column everywhere, and every control a thumb can hit.
 * Nothing here sets a colour, so both themes keep their own.
 */
@media (max-width: 480px) {
  .profile-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  /* One column reads in source order; the two-column ordering above would put
     the postal code above the address it belongs to. */
  .profile-form > * {
    order: 0;
  }

  .profile-form .wallet-input,
  .profile-form select {
    min-height: 44px;
    height: auto;
  }

  .page-cards .page-header > .wallet-button {
    min-height: 44px;
  }

  .setting-row select {
    min-height: 44px;
    max-width: 44%;
  }

  .wallet-card > summary {
    min-height: 60px;
  }

  .wallet-card-details .actions > * {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .add-card-option {
    min-height: 76px;
  }

  .enroll {
    padding: 16px;
  }
}

.identity-avatar-wrap {
  position: relative;
  flex: none;
}
.identity-edit {
  position: absolute;
  right: -8px;
  bottom: -2px;
  border-radius: 50%;
  padding: 6px;
  background: var(--background);
}
.identity-edit .design-icon {
  width: 18px;
  height: 18px;
}
.rail__nav a:not([aria-current="page"]) > .design-icon {
  filter: grayscale(1);
}
.rail__nav a[aria-current="page"] > .design-icon {
  filter: brightness(0) saturate(100%) invert(30%) sepia(94%) saturate(2100%)
    hue-rotate(229deg);
}
.menu-page {
  background: color-mix(in srgb, var(--wallet-surface) 50%, var(--background));
}
.menu-page nav .design-icon {
  filter: grayscale(1);
}
.menu-page footer .wordmark__logo {
  width: 98px;
  height: 28px;
}
@media (max-width: 760px) {
  .menu-page {
    gap: 72px;
  }
  .menu-page .wallet-identity {
    margin-top: 60px;
  }
}

/* Shared Phosphor treatment across navigation, preferences and links. */
.rail__nav a > .design-icon,
.rail__nav a:not([aria-current="page"]) > .design-icon,
.rail__nav a[aria-current="page"] > .design-icon,
.menu-page nav .design-icon {
  filter: none;
  color: inherit;
}
.setting-row > .design-icon {
  width: 22px;
  height: 22px;
  color: var(--wallet-muted);
}
.setting-row > .design-icon:last-child {
  width: 18px;
  height: 18px;
}
button.setting-row {
  cursor: pointer;
  font-family: var(--font-sans);
}
button.setting-row:hover {
  background: var(--wallet-hover);
}
.identity-edit {
  border: 0;
  box-shadow: none;
  color: var(--foreground);
  line-height: 0;
  text-decoration: none;
}
.identity-edit:hover {
  text-decoration: none;
}
.identity-edit:focus:not(:focus-visible) {
  outline: none;
}
.page-info .info-page {
  margin: 0;
  padding: 0;
  width: 100%;
}
#wallet-toaster {
  display: contents;
}
.toast-icon-success {
  color: var(--success);
}
#wallet-toaster [data-sonner-toast],
#wallet-toaster [data-close-button] {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

/* Neutral interaction states shared across wallet surfaces. */
:root {
  --wallet-hover: #e2e8f0;
}
html[data-theme="dark"] {
  --wallet-hover: #334155;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --wallet-hover: #334155;
  }
}
.rail__nav a,
.menu-page nav a {
  transition:
    transform 120ms ease,
    background-color 150ms ease;
}
.rail__nav a:active,
.menu-page nav a:active {
  transform: scale(0.96);
}
.rail__nav a:hover,
.rail__footer a:hover,
.menu-page nav a:hover,
.row-list .row:hover,
.wallet-card > summary:hover,
a.setting-row:hover,
button.setting-row:hover,
.identity-edit:hover,
.add-card:hover,
.button-secondary:hover,
.wallet-button:hover {
  background: var(--wallet-hover);
  color: var(--foreground);
}
.wallet-button[data-wallet-variant="default"]:hover,
.button:hover {
  background: #3348cc;
  color: #fff;
}
.setting-row:has([name="intent"]) {
  color: inherit;
}
form[action="/logout"] .design-icon:first-child,
.setting-row .design-icon[data-sign-out] {
  color: #dc2626;
}
.wallet-card > summary.row {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.wallet-card-dialog.app-dialog {
  width: min(440px, calc(100vw - 32px));
  height: auto;
  max-height: 85dvh;
  border-radius: 24px;
  margin: auto;
  background: var(--background);
  color: var(--foreground);
}
.wallet-card-details[hidden] {
  display: none;
}
.public-document {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.public-header,
.public-footer {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 0;
}
.public-article {
  width: min(680px, calc(100% - 48px));
  margin: 64px auto 96px;
  flex: 1;
}
.public-article h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.public-intro {
  font-size: 20px;
  color: var(--muted-foreground);
  margin: 24px 0 48px;
}
.public-article section {
  margin-top: 32px;
}
.public-article h2 {
  font-size: 20px;
  margin-bottom: 12px;
}
.public-article p {
  line-height: 1.75;
}
.public-footer {
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  flex-wrap: wrap;
}
.public-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
@media (prefers-reduced-motion: reduce) {
  .rail__nav a,
  .menu-page nav a {
    transition: none;
  }
  .rail__nav a:active,
  .menu-page nav a:active {
    transform: none;
  }
}

.wallet-card-dialog button[aria-label="Close dialog"] {
  display: none;
}
.wallet-dialog-close {
  display: inline-flex;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.wallet-dialog-close:hover {
  background: var(--wallet-hover);
}

/* Keep card dialog geometry stable throughout entry and exit on every viewport. */
.wallet-card-dialog.app-dialog {
  flex: 0 1 auto;
  min-height: 0;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .wallet-card-dialog.app-dialog {
    transition-duration: 0s;
  }
}

@keyframes login-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.login-content {
  animation: login-enter 260ms ease-out both;
}
.login-form[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
}
.otp-fields .wallet-input {
  min-width: 0;
  flex: 1;
}
.login-form > label:not(.sr-only) {
  margin-bottom: -22px;
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  .login-content {
    animation: none;
  }
}
.login-delivery-hint {
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.5;
}

.vault-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--secondary-foreground);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--secondary) 88%, var(--primary));
}
.vault-badge img {
  max-height: 24px;
  object-fit: contain;
}
.agent-row {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.agent-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 12px;
  font-weight: 500;
}
.agent-status--muted {
  color: var(--muted-foreground);
}
.agent-details[hidden] {
  display: none;
}
.agent-dialog__content {
  display: grid;
  gap: 20px;
}
.agent-details__hero {
  display: flex;
  align-items: center;
  gap: 14px;
}
.agent-details__hero p {
  font-size: 13px;
}
.agent-metadata {
  display: grid;
  border-top: 1px solid var(--border);
}
.agent-metadata > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.agent-metadata dt {
  color: var(--muted-foreground);
}
.agent-metadata dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.agent-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-scopes span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--secondary);
  font-size: 12px;
}
.agent-details__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.agent-details__actions .button-secondary,
.agent-details__actions .wallet-button {
  border-radius: 999px;
}
.agent-disconnect {
  color: var(--destructive);
}
@media (max-width: 560px) {
  .agent-status {
    font-size: 0;
  }
  .agent-metadata > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  .agent-details__actions,
  .agent-details__actions form,
  .agent-details__actions .button-secondary,
  .agent-details__actions .wallet-button {
    width: 100%;
  }
}
.profile-phone,
.profile-postal-code {
  grid-column: 1 / -1;
}
.profile-phone__label {
  font-size: 14px;
}
.profile-phone__value {
  min-height: 36px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--secondary);
  color: var(--muted-foreground);
  font: 400 14px/20px var(--font-sans);
}

/* ==========================================================================
   UI pass: one spacing rhythm, one press response, and the screens that
   needed their own shape. Appended last so it settles the earlier layers.
   ========================================================================== */

:root {
  --step-1: 4px;
  --step-2: 8px;
  --step-3: 12px;
  --step-4: 16px;
  --step-5: 24px;
  --step-6: 32px;
  --step-7: 48px;
  --press: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- Press feedback -------------------------------------------------------
   The rail already answers a press by shrinking. Anything else that behaves
   like a control now answers the same way, so the whole app feels alike. */

.row-list .row,
.wallet-card > summary,
.agent-archive > summary,
.setting-row,
.add-card,
.login-escape,
.consent-change {
  transition:
    transform 140ms var(--press),
    background-color 150ms ease,
    border-color 150ms ease;
}
.row-list .row:active,
.wallet-card > summary:active,
.agent-archive > summary:active,
a.setting-row:active,
button.setting-row:active,
.add-card:active {
  transform: scale(0.98);
}
.login-escape:active,
.consent-change:active {
  transform: scale(0.96);
}
.wallet-button {
  transition:
    transform 140ms var(--press),
    background-color 150ms ease,
    border-color 150ms ease;
}
.wallet-button:active:not(:disabled) {
  transform: scale(0.97);
}

/* --- Rows -----------------------------------------------------------------
   A row's title and its meta line belong together; they were being pushed
   apart by a flex gap and a margin stacking on top of each other. */

.row-list {
  gap: var(--step-2);
}
.row-list .row,
.wallet-card > summary {
  min-height: 0;
  padding: var(--step-4);
  gap: var(--step-3);
}
.row__body {
  gap: 0;
}
.row__meta {
  margin-top: 2px;
  gap: 2px var(--step-2);
  color: var(--muted-foreground);
  line-height: 1.35;
}
.row__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.35;
}

/* --- Connected agents ----------------------------------------------------- */

.agent-verified {
  display: inline-flex;
  align-items: center;
  color: var(--success);
}
.agent-verified .design-icon {
  width: 15px;
  height: 15px;
}
.agent-origin {
  color: var(--muted-foreground);
}
.agent-origin::after {
  content: "·";
  margin-inline-start: var(--step-2);
}
.agent-status {
  flex: none;
  color: var(--success);
}
/* An ended connection is stated in red: it is the one status an owner may
   need to act on. Declared after the base rule so it actually wins. */
.agent-status--muted {
  color: var(--destructive);
}
/* The check mark moved next to the name, so the label is now the only thing
   carrying the status and has to stay readable on a narrow screen. */
@media (max-width: 560px) {
  .agent-status {
    font-size: 11px;
  }
}

/* Disconnected agents are kept for the record, not offered as a choice. */
.agent-archive {
  margin-top: var(--step-5);
}
.agent-archive > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-3);
  padding: var(--step-3) var(--step-4);
  border-radius: 14px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.agent-archive > summary::-webkit-details-marker {
  display: none;
}
.agent-archive > summary:hover {
  background: var(--wallet-hover);
  color: var(--foreground);
}
.agent-archive > summary .design-icon {
  width: 16px;
  height: 16px;
  transition: transform 160ms var(--press);
}
.agent-archive[open] > summary .design-icon {
  transform: rotate(90deg);
}
.agent-archive > .row-list {
  margin-top: var(--step-2);
}
.agent-archive .agent-logo {
  opacity: 0.65;
}

.agent-connect-trigger {
  margin-bottom: var(--step-5);
}
.agent-connect-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 24px 80px rgb(0 0 0 / 24%);
}
.agent-connect-dialog::backdrop {
  background: rgb(0 0 0 / 48%);
}
.agent-connect-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--step-3);
  padding: var(--step-4) var(--step-5);
  border-bottom: 1px solid var(--border);
}
.agent-connect-dialog__header h2 {
  margin: 0;
  font-size: 18px;
}
.agent-connect-dialog__body {
  display: grid;
  gap: var(--step-4);
  max-height: calc(100dvh - 100px);
  padding: var(--step-5);
  overflow-y: auto;
  font-size: 13px;
}
.agent-connect-dialog__body > p {
  margin: 0;
  color: var(--muted-foreground);
}
.agent-connect__endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-2);
  padding: var(--step-3);
  border-radius: 12px;
  background: var(--wallet-surface);
}
.agent-connect__label {
  width: 100%;
  color: var(--muted-foreground);
  font-size: 12px;
}
.agent-connect__endpoint code {
  overflow-wrap: anywhere;
  user-select: all;
}
.agent-connect__endpoint > code {
  flex: 1;
  min-width: 0;
}
.agent-connect__copy {
  flex: none;
  padding: var(--step-1) var(--step-2);
  font-size: 12px;
}
.agent-connect__presets {
  display: grid;
  gap: var(--step-2);
}
.agent-preset {
  border-radius: 12px;
  background: var(--wallet-surface);
}
.agent-preset > summary {
  display: flex;
  align-items: center;
  gap: var(--step-3);
  padding: var(--step-3);
  cursor: pointer;
  list-style: none;
}
.agent-preset > summary::-webkit-details-marker {
  display: none;
}
.agent-preset > summary > .design-icon {
  width: 16px;
  height: 16px;
  margin-left: auto;
}
.agent-preset[open] > summary > .design-icon {
  transform: rotate(90deg);
}
.agent-preset__body {
  display: grid;
  gap: var(--step-3);
  padding: 0 var(--step-3) var(--step-3);
}
.agent-preset__body ol {
  margin: 0;
  padding-left: 1.25em;
  list-style: decimal;
}
.agent-preset__body p {
  margin: 0;
  color: var(--muted-foreground);
}
.agent-preset__command {
  display: flex;
  align-items: flex-start;
  gap: var(--step-2);
}
.agent-preset__command pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--step-3);
  overflow-x: auto;
  border-radius: 8px;
  background: #161a2e;
  color: #e8ebf5;
  font-size: 12px;
}

/* --- Sign in --------------------------------------------------------------
   The code step is a six-box form, so it stops at the width of those boxes
   rather than stretching to the width of the email step. */

.login-content {
  gap: var(--step-6);
  padding-block: var(--step-7);
}
.login-content--code {
  max-width: 372px;
}
.login-content header {
  gap: var(--step-2);
}
.login-card .login-form {
  gap: var(--step-5);
}
.login-field {
  display: grid;
  gap: 6px;
  text-align: left;
}
.login-hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted-foreground);
}
.otp-fields {
  gap: var(--step-2);
  justify-content: center;
}
.otp-fields .wallet-input {
  width: 52px;
  height: 60px;
  font-size: 22px;
  font-weight: 500;
  border: 1px solid transparent;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}
.otp-fields .wallet-input.is-filled {
  border-color: var(--primary);
  background: var(--accent-blue-subtle);
}
.login-alternatives {
  display: flex;
  gap: var(--step-3);
}
.login-alternatives .wallet-button {
  flex: 1;
}
.login-alternatives .wallet-button:disabled {
  opacity: 0.55;
}
/* The way out of a stuck sign-in, present but never competing with the code. */
.login-escape {
  margin-top: var(--step-2);
  padding: var(--step-2);
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.login-escape:hover {
  color: var(--foreground);
}
.login-links {
  gap: var(--step-5);
}

/* --- Country and phone ----------------------------------------------------
   A flag is quicker to recognise than a calling code is to recall. */

.country-select {
  height: 36px;
  padding: 0 var(--step-3);
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--background);
  color: var(--foreground);
  font: 400 14px/20px var(--font-sans);
  cursor: pointer;
}
.country-select--block {
  width: 100%;
}
.country-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.phone-field {
  display: flex;
  gap: var(--step-2);
  align-items: center;
}
.phone-field__country {
  position: relative;
  flex: none;
}
.phone-field .country-select {
  max-width: 190px;
}
/* Enhanced: the native select still takes the interaction, but sits invisibly
   over a compact flag-and-code label so the closed field stays narrow. */
.phone-field--enhanced .phone-field__country {
  display: block;
  min-width: 0;
}
.phone-field--enhanced .phone-field__display {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--step-3);
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--background);
  font-size: 14px;
  white-space: nowrap;
}
/* Out of flow so the longest country name cannot widen the closed field,
   while the real select still takes every click, tap and keystroke. */
.phone-field--enhanced .country-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.phone-field--enhanced
  .phone-field__display:has(~ .country-select:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.phone-field__number {
  flex: 1;
}
.profile-phone__value {
  display: flex;
  align-items: center;
  gap: var(--step-2);
}
.profile-phone__flag {
  font-size: 18px;
  line-height: 1;
}

/* --- Connection consent ---------------------------------------------------
   One decision on the page, so it is centred and everything else is quiet. */

/* The decision owns the viewport, so the shell's own padding would only
   push its footer past the fold. */
.content.page-connect {
  max-width: none;
  padding: 0;
}
.consent-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--step-6);
  min-height: 100dvh;
  padding: var(--step-5);
  text-align: center;
}
.consent-page > .wordmark {
  padding: 0;
}
.consent-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--step-5);
  width: 100%;
  max-width: 460px;
  margin-block: auto;
}
.consent-marks {
  display: flex;
  align-items: center;
  gap: 0;
}
.consent-marks__link {
  width: 44px;
  height: 1px;
  background: var(--border);
}
.consent-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  flex: none;
  overflow: hidden;
}
.consent-mark img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.consent-mark--wallet {
  background: var(--primary);
}
.consent-mark--wallet img {
  filter: brightness(0) invert(1);
}
.consent-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}
.consent-facts {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: var(--step-1) var(--step-5);
  border-radius: 18px;
  background: var(--wallet-surface);
  text-align: left;
}
.consent-facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-4);
  padding-block: var(--step-4);
  border-top: 1px solid var(--border);
}
.consent-facts > div:first-child {
  border-top: 0;
}
.consent-facts dt {
  font-size: 14px;
  font-weight: 600;
}
.consent-facts dd {
  display: flex;
  align-items: center;
  gap: var(--step-2);
  margin: 0;
  font-size: 14px;
  text-align: right;
  overflow-wrap: anywhere;
}
.consent-verified {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.consent-decision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--step-3);
  width: 100%;
}
.consent-decision .wallet-button {
  width: 100%;
  height: 44px;
}
.consent-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.consent-returning {
  margin: 0;
  color: var(--muted-foreground);
}
.consent-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--step-2);
  font-size: 12px;
  color: var(--muted-foreground);
}
.consent-footer form {
  display: contents;
}
.consent-change {
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .consent-decision {
    grid-template-columns: 1fr;
  }
  .login-alternatives {
    flex-direction: column;
  }
  .otp-fields .wallet-input {
    width: 44px;
    height: 54px;
    font-size: 19px;
  }
  .otp-fields {
    gap: 6px;
  }
}

/* --- Motion ---------------------------------------------------------------
   Movement only where it explains something: a step arriving, a digit
   landing, a panel settling. */

@media (prefers-reduced-motion: no-preference) {
  .login-content,
  .consent-panel {
    animation: wallet-rise 340ms var(--press) both;
  }
  .row-list > li {
    animation: wallet-rise 260ms var(--press) both;
  }
  .agent-archive[open] > .row-list > li {
    animation-duration: 200ms;
  }
  .otp-fields .wallet-input.is-popped {
    animation: otp-pop 200ms var(--press);
  }
  .consent-marks {
    animation: wallet-pair 420ms var(--press) both;
  }
}

@keyframes wallet-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes otp-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes wallet-pair {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .row-list .row,
  .wallet-card > summary,
  .agent-archive > summary,
  .setting-row,
  .add-card,
  .wallet-button,
  .login-escape,
  .consent-change {
    transition: none;
  }
  .row-list .row:active,
  .wallet-card > summary:active,
  .agent-archive > summary:active,
  .wallet-button:active:not(:disabled),
  .login-escape:active,
  .consent-change:active {
    transform: none;
  }
}

/* ===== visa-enrollment (worker A4: card enrollment, step-up, passkey registration) ===== */
/* Mobile-first: everything below reads at 375px and grows from there. */

/* Two spellings of the same position. Narrow screens get the sentence, wider
   screens get the dots; never both, so it is announced once. */
.visa-stepper-compact {
  display: none;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.visa-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.visa-step {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
}

.visa-step__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.visa-step[data-state="done"] {
  color: var(--success);
}

.visa-step[data-state="done"] .visa-step__dot {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.visa-step[data-state="now"] {
  color: var(--foreground);
  font-weight: 500;
}

.visa-step[data-state="now"] .visa-step__dot {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.visa-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.visa-panel h2 {
  font-size: 18px;
}

.visa-panel__intro {
  color: var(--muted-foreground);
  max-width: 52ch;
  text-wrap: pretty;
}

.visa-panel .actions {
  flex-wrap: wrap;
}

/* --- Consent (VIC guide 3.13) ---------------------------------------------- */

.visa-consent {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.visa-consent h2 {
  font-size: 18px;
}

.visa-consent__lede {
  max-width: 52ch;
  text-wrap: pretty;
}

.visa-consent__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted-foreground);
}

.visa-consent__list li {
  max-width: 60ch;
  padding-left: 16px;
  border-left: 2px solid var(--border);
  text-wrap: pretty;
}

.visa-consent__list strong {
  color: var(--foreground);
}

.visa-consent__version {
  font-size: 13px;
  color: var(--muted-foreground);
}

.visa-consent__form {
  display: grid;
  gap: 16px;
}

.visa-consent__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 56ch;
  cursor: pointer;
}

.visa-consent__check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--primary);
}

/* --- Card entry ------------------------------------------------------------ */

.visa-form {
  display: grid;
  gap: 20px;
  max-width: 560px;
}

.visa-form__group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.visa-form__group > legend {
  padding: 0 6px;
  font-weight: 500;
}

.visa-form__wide {
  grid-column: 1 / -1;
}

.visa-form select {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
}

.visa-form select:focus-visible,
.visa-form input:focus-visible {
  border-color: var(--primary);
  outline-color: var(--primary);
  outline-offset: 0;
}

/* --- Step-up methods ------------------------------------------------------- */

.visa-methods {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.visa-method {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.visa-method:has(input:checked) {
  border-color: var(--primary);
  background: var(--accent-blue-subtle);
}

.visa-method:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.visa-method input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--primary);
}

.visa-method__body {
  display: grid;
  gap: 2px;
}

.visa-method__title {
  font-weight: 500;
}

.visa-method__detail {
  font-size: 13px;
  color: var(--muted-foreground);
}

.visa-passkey__status {
  color: var(--muted-foreground);
}

.visa-passkey__status[data-tone="error"] {
  color: var(--destructive);
}

/* --- Ready state and card art (VIC guide 3.12) ----------------------------- */

.visa-ready {
  display: grid;
  gap: 16px;
}

.visa-ready__facts {
  display: grid;
  gap: 12px;
  justify-items: start;
}

/*
 * Card art (VIC guide 3.12). Issuer art keeps its own aspect ratio: only the
 * width is set, so it scales without distortion. The fallback is an SVG in the
 * 1536x969 card ratio, coloured by card metadata through SVG attributes (the
 * CSP forbids inline styles). Corners are 3mm, inside the 2.88-3.48mm range.
 */
.visa-card-art {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0;
}

.visa-card-art--compact {
  max-width: 240px;
}

.visa-card-art--fallback {
  height: auto;
  aspect-ratio: 1536 / 969;
  border-radius: 3mm;
  overflow: hidden;
}

.visa-card-art__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3mm;
}

/* Last four as a caption under issuer art, never painted over it. */
.visa-card-art__caption {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.visa-card-art__overlay {
  font-family: var(--font-sans);
  font-size: 76px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.visa-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.visa-facts > div {
  display: flex;
  gap: 8px;
  font-size: 14px;
}

.visa-facts dt {
  min-width: 120px;
  color: var(--muted-foreground);
}

.visa-facts dd {
  margin: 0;
}

/* --- Wallet list additions ------------------------------------------------- */

/* The collapsed wallet row carries the agentic rail next to the last four, so
   a card's readiness is legible without opening it. It wraps under the number
   once the row runs out of width. */
.wallet-card > summary > .row__body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}

.wallet-card__rail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted-foreground);
}

.wallet-card__rail-name {
  font-size: 12px;
  font-weight: 500;
}

.wallet-card__rail .pill {
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
}

.visa-instrument {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--secondary);
}

.visa-instrument__status,
.visa-instrument__next {
  margin: 0;
}

.visa-instrument .actions,
.visa-instrument__next .button-secondary {
  margin: 0;
}

@media (min-width: 640px) {
  .visa-ready {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: center;
  }
}

/*
 * Phone layout. One column, thumb-sized controls, and the step's primary
 * action pinned to the bottom of the viewport so it is reachable without
 * scrolling past a long form.
 */
@media (max-width: 640px) {
  .visa-stepper {
    display: none;
  }

  .visa-stepper-compact {
    display: block;
  }

  .visa-form__group {
    grid-template-columns: minmax(0, 1fr);
  }

  .visa-form,
  .visa-panel,
  .visa-consent {
    max-width: none;
  }

  .visa-form select,
  .visa-form .wallet-input,
  .visa-form input {
    min-height: 44px;
  }

  .visa-method {
    min-height: 44px;
  }

  .visa-panel .actions,
  .visa-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    gap: 8px;
    margin-top: 8px;
    padding-block: 10px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--background);
  }

  .visa-panel .actions {
    background: var(--card);
  }

  .visa-panel .actions > *,
  .visa-actions > * {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

/* --- Card verification code ---------------------------------------------
   The same code step as sign-in: centred, six boxes at the sign-in size and
   spacing, one primary action, and the alternatives beneath it. */

.visa-otp {
  justify-items: center;
  gap: var(--step-5);
  padding: var(--step-6) var(--step-5);
  text-align: center;
}

.visa-otp__header {
  display: grid;
  gap: var(--step-2);
  max-width: 372px;
}

.visa-otp__header h2 {
  font-size: 20px;
}

.visa-otp__header p {
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.visa-otp__header .visa-otp__sent {
  color: var(--foreground);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.visa-otp__form {
  display: flex;
  flex-direction: column;
  gap: var(--step-5);
  width: 100%;
  max-width: 372px;
}

.visa-otp__form > .wallet-button {
  width: 100%;
}

.visa-otp__form[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
}

@media (max-width: 480px) {
  .visa-otp {
    padding: var(--step-5) var(--step-4);
  }
}

/* ===== end visa-enrollment ===== */

/* ===== visa-authorization (instruction authentication, detail, timeline) ===== */
/* Mobile-first: every rule below reads at 375px and grows from there. */

/* --- Visa wordmark ----------------------------------------------------------
   Visa's own colours only: Visa Blue on light surfaces, white on dark ones.
   Only a height is ever set, so the mark keeps its proportions. */

.visa-wordmark {
  display: inline-block;
  flex: none;
  height: 0.8em;
  width: auto;
  aspect-ratio: 1000 / 324.68;
  color: #1434cb;
  vertical-align: baseline;
}

:root[data-theme="dark"] .visa-wordmark {
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .visa-wordmark {
    color: #fff;
  }
}

/* The Visa rail, marked where it matters: next to the purchase it pays for. */
.visa-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  line-height: 1;
}

.visa-badge .visa-wordmark {
  height: 11px;
}

/* Doubled class: the wallet row's square logo size must not squeeze the
   wordmark, which only ever scales as a whole. */
.brand-logo.brand-logo--visa {
  display: grid;
  place-items: center;
  width: 44px;
  height: 26px;
  padding-inline: 2px;
}

.brand-logo--visa .visa-wordmark {
  width: 100%;
  height: auto;
}

/* --- Authorizations list ---------------------------------------------------
   One column at every width: a second column only ever split the one list the
   owner scans. Live authorizations are rows; ended ones fold away. */

.authorization-groups {
  display: flex;
  flex-direction: column;
  gap: var(--step-5);
}

.authorization-group {
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
}

.authorization-group > h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
}

.authorization-row {
  align-items: flex-start;
  position: relative;
}

.authorization-row > .purchase-mark,
.authorization-row > .pill,
.authorization-row > .design-icon:last-child {
  align-self: center;
}

.authorization-row .row__body {
  gap: 0;
}

.authorization-row__agent {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
}

.authorization-row .row__title {
  padding-right: 28px;
}

/* Who asked, by their own mark, directly under what they asked for. */
.row__agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
}

/* --- Spend meter ------------------------------------------------------------
   "USD 184.20 of USD 1,000.00 this week" in words, then the bar, then what is
   left. The words say everything the bar does, so colour is never the only
   signal, and the bar's own colours clear 3:1 against its track in both
   themes. */

.budget {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
}

.budget__line {
  font-size: 14px;
  color: var(--muted-foreground);
}

.budget__line strong {
  font-weight: 600;
  color: var(--foreground);
}

.budget__track {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
  overflow: hidden;
}

.budget__bar {
  display: block;
  width: 100%;
  height: 100%;
}

.budget__spent {
  fill: var(--primary-text);
}

.budget__reserved {
  fill: color-mix(in srgb, var(--primary-text) 45%, transparent);
}

.budget__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.budget__full {
  color: var(--foreground);
  font-weight: 500;
}

.budget__reserved-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.budget__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary-text) 45%, transparent);
}

/* Authorization rows use one saturated purple fill and one amount. Reserved
   money is included in the fill; the progressbar still explains it to AT. */
.budget--compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.budget--compact .budget__track {
  flex: 1;
  min-width: 0;
  height: 10px;
  background: color-mix(in srgb, var(--primary) 16%, var(--wallet-surface));
}

.budget__compact-fill {
  fill: var(--primary);
}

.budget__compact-amount {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .budget--compact {
    flex-wrap: wrap;
    gap: 6px;
  }

  .budget--compact .budget__track {
    flex-basis: 100%;
  }

  .budget__compact-amount {
    margin-left: auto;
  }
}

.budget--lg {
  gap: 8px;
  margin-top: 0;
}

.budget--lg .budget__line {
  font-size: 16px;
}

.budget--lg .budget__line strong {
  font-size: 24px;
  letter-spacing: -0.01em;
}

.budget--lg .budget__track {
  height: 14px;
}

.budget--lg .budget__foot {
  font-size: 13px;
}

/* The whole purse, above the list it adds up. */
.spend-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
}

.spend-summary > h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
}

.spend-summary__note {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.spend-plain {
  font-size: 15px;
  color: var(--muted-foreground);
}

.spend-plain strong {
  font-size: 20px;
  font-weight: 600;
  color: var(--foreground);
}

/* Ended authorizations reuse the agents page's archive, tap target included. */
.authorization-archive > summary {
  min-height: 44px;
}

/* --- Approve and authenticate ----------------------------------------------
   A standalone decision page: the limits sit on a surface that is deliberate
   in both themes, and the action stays reachable without scrolling back. */

.approval-limits {
  padding: 4px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--wallet-surface);
}

.approval-limits > div {
  gap: var(--step-4);
  min-height: 44px;
  align-items: center;
}

.approval-limits dt {
  font-weight: 500;
  color: var(--muted-foreground);
}

.approval-limits dd {
  font-weight: 500;
}

.approval-limits__agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* A description is a sentence, not a value: it gets the full width. */
.approval-limits__wide {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding-block: 12px;
}

.approval-limits__wide dd {
  margin-left: 0;
  text-align: left;
  font-weight: 400;
  color: var(--muted-foreground);
}

.approval-rail {
  margin: -16px 0 0;
  font-size: 13px;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* Who is asking, by their own mark, above what they ask for. */
.requester {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.requester strong {
  color: var(--foreground);
  font-weight: 600;
}

.requester--chip {
  margin: 6px 0 2px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--wallet-surface);
}

.approval-page .visa-card-art {
  justify-self: center;
}

.approval-page .visa-passkey-form {
  margin: 0;
  gap: 10px;
  align-items: stretch;
  text-align: center;
}

.approval-page .visa-passkey-form .button,
.approval-page .visa-passkey-form .button-text {
  width: 100%;
  justify-content: center;
}

.visa-passkey-status {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}

/* The browser's own refusal is the one thing this line must be able to shout. */
.visa-passkey-status[data-tone="error"] {
  color: var(--destructive);
}

/* --- Passkey stage ---------------------------------------------------------
   The terms were approved on the previous page. Confirming swaps the prompt
   for Visa's embed in the same place: each half is a one-row grid that eases
   between 0fr and 1fr, so the page changes height smoothly instead of the
   frame landing under the button. */

.passkey-stage {
  display: grid;
  text-align: center;
}

.passkey-stage__swap {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}

.passkey-stage__clip {
  min-height: 0;
  overflow: hidden;
}

/* The inset keeps the button's focus ring inside the clip. */
.passkey-stage__prompt {
  display: grid;
  gap: var(--step-5);
  padding: 4px 4px var(--step-3);
}

.passkey-stage__lede {
  margin: 0;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.passkey-stage__embed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.passkey-stage__embed:focus {
  outline: none;
}

.passkey-stage[data-state="embed"] .passkey-stage__ask {
  grid-template-rows: 0fr;
  opacity: 0;
}

.passkey-stage[data-state="embed"] .passkey-stage__embed {
  grid-template-rows: 1fr;
  opacity: 1;
}

.passkey-stage__viewport {
  position: relative;
  min-height: 420px;
  margin: 4px 0 var(--step-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--wallet-surface);
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
}

.passkey-stage[data-state="embed"] .passkey-stage__viewport {
  transform: none;
}

.passkey-stage__slot {
  position: relative;
  z-index: 1;
}

/* Visa's frame stays invisible until its ceremony starts; the loader covers
   the load and the session handshake, and returns while the wallet verifies. */
.passkey-stage__slot iframe {
  display: block;
  opacity: 0;
}

.passkey-stage[data-embed-ready] .passkey-stage__slot iframe {
  opacity: 1;
}

.passkey-stage__loader {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
}

.passkey-stage[data-embed-ready] .passkey-stage__loader {
  opacity: 0;
}

.passkey-stage > .visa-passkey-status {
  padding-block: 4px 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .passkey-stage__swap {
    transition:
      grid-template-rows 420ms var(--press),
      opacity 280ms ease;
  }

  .passkey-stage__viewport {
    transition: transform 420ms var(--press);
  }

  .passkey-stage__slot iframe {
    transition: opacity 320ms ease;
  }

  .passkey-stage__loader {
    transition: opacity 200ms ease;
    animation: passkey-spin 900ms linear infinite;
  }
}

@keyframes passkey-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Authorization detail --------------------------------------------------
   Read top to bottom like the approval sheet: what it is, who asked, the
   terms as a table, what has been spent, what the agent obtained, how to stop
   it, and only then the evidence. */

.page-authorizations.content {
  gap: 24px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--muted-foreground);
}

.breadcrumb li[aria-current="page"] {
  overflow: hidden;
  max-width: 40ch;
  color: var(--foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-left: -8px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  color: var(--foreground);
  font-weight: 500;
}

.breadcrumb a:hover {
  background: var(--wallet-hover);
  text-decoration: none;
}

.breadcrumb .design-icon {
  width: 16px;
  height: 16px;
}

.detail-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.detail-head .purchase-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.detail-head__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.detail-head__text h1 {
  overflow-wrap: anywhere;
}

.detail-head__where {
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.detail-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
}

.detail-head__approved {
  font-size: 13px;
  color: var(--muted-foreground);
}

.detail-sentence {
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.detail-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--primary-text) 35%, transparent);
  border-radius: var(--radius-2xl);
  background: var(--accent-blue-subtle);
}

.detail-callout--attention {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, var(--background));
}

.detail-callout__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1 1 260px;
}

.detail-callout__text h2 {
  font-size: 16px;
}

.detail-callout__text p {
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.detail-callout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The terms as a two-column table, the same reading the approval sheet gives. */
.summary-table {
  padding: 4px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--wallet-surface);
}

.summary-table > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 12px;
  border-top: 1px solid var(--border);
}

.summary-table > div:first-child {
  border-top: 0;
}

.summary-table dt {
  color: var(--muted-foreground);
}

.summary-table dd {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.summary-table__wide dd,
.summary-table__note {
  font-weight: 400;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.pays-with {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.pays-with .visa-wordmark {
  height: 12px;
}

.summary-rail {
  font-size: 13px;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* A grey pill is the same value as the surface it sits on, so on these
   surfaces it gets an edge rather than disappearing into them. */
.summary-table .pill,
.tech-instruction__head .pill {
  border: 1px solid var(--border);
}

/* --- Credential requests ---------------------------------------------------
   The same pale, rounded surface and leading icon as authorization rows.
   This is a credential record, not issuer card art. */

.visa-credentials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--step-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.visa-credential {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.visa-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  gap: 10px 12px;
  min-height: 168px;
  padding: 20px;
  border: 0;
  border-radius: 16px;
  background: var(--wallet-surface);
  color: var(--foreground);
}

.visa-card--spent {
  background: var(--wallet-surface);
}

.visa-card__mark {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: center;
}

.visa-card__top,
.visa-card__amount,
.visa-card__facts,
.visa-card__verified,
.visa-card__error {
  grid-column: 2;
  min-width: 0;
}

.visa-card--spent .visa-card__amount,
.visa-card--spent .visa-card__merchant {
  color: var(--muted-foreground);
}

.visa-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--step-2);
}

.visa-card__merchant {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.visa-card__merchant .visa-wordmark {
  height: 11px;
}

.visa-card .pill {
  flex: none;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
}

.visa-card__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.1;
}

.visa-card__amount strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.visa-card__amount span {
  font-size: 13px;
  color: var(--muted-foreground);
}

.visa-card__facts {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 12px;
}

.visa-card__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.visa-card__facts dt {
  color: var(--muted-foreground);
}

.visa-card__facts dd {
  text-align: right;
  overflow-wrap: anywhere;
}

.visa-card__number {
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.visa-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--success);
}

.visa-card__verified .design-icon {
  width: 14px;
  height: 14px;
}

.visa-card__error {
  font-size: 12px;
  color: var(--destructive);
  overflow-wrap: anywhere;
}

/* The outcome the agent reported, as one slim line under its own card. */
.visa-credential__outcome,
.visa-outcomes li {
  margin: 0;
  padding-left: 2px;
  font-size: 12px;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.visa-outcomes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- Stopping an authorization ---------------------------------------------
   The destructive step asks once more, in place, before it happens. */

.detail-manage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.detail-manage > h2 {
  font-size: 16px;
}

.detail-manage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.confirm-action > summary {
  list-style: none;
  cursor: pointer;
}

.confirm-action > summary::-webkit-details-marker {
  display: none;
}

.confirm-action[open] > summary {
  border-color: var(--destructive);
}

.confirm-action__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 44ch;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--destructive) 40%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--destructive) 6%, var(--background));
  text-wrap: pretty;
}

.button-destructive--solid {
  border-color: transparent;
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-radius: 999px;
}

.button-destructive--solid:hover {
  background: color-mix(in srgb, var(--destructive) 88%, black);
}

.detail-manage .button-destructive,
.detail-manage .button-secondary {
  border-radius: 999px;
}

/* --- Technical details -----------------------------------------------------
   Ids, versions and the Visa instruction itself are evidence, not reading
   matter: present, folded away, and last. */

.tech-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-3);
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.tech-details > summary::-webkit-details-marker {
  display: none;
}

.tech-details > summary:hover {
  background: var(--wallet-hover);
  color: var(--foreground);
}

.tech-details > summary .design-icon {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 160ms var(--press);
}

.tech-details[open] > summary .design-icon {
  transform: rotate(90deg);
}

.tech-details__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 12px 4px;
}

.tech-instructions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tech-instructions > h3 {
  font-size: 14px;
  font-weight: 600;
}

.tech-instruction {
  display: flex;
  flex-direction: column;
  gap: var(--step-3);
  padding: var(--step-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.tech-instruction__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-3);
}

.tech-instruction__head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tech-instruction__description {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Terms bound at Visa: a stacked card each, so nothing scrolls sideways. */
.visa-terms {
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
}

.visa-terms li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--wallet-surface);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.visa-terms li > .muted {
  font-size: 12px;
}

.detail-list dd small {
  display: block;
  color: var(--muted-foreground);
  font-size: 12px;
}

/* --- Activity timeline: wallet grants and Visa events in one column --------- */

.visa-events {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.visa-event {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--step-3);
  padding: var(--step-3) 0;
  border-top: 1px solid var(--border);
}

.visa-event:first-child {
  border-top: 0;
}

.visa-event__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.visa-event__mark .design-icon {
  width: 17px;
  height: 17px;
}

.visa-event--visa .visa-event__mark {
  background: var(--accent-blue-subtle);
  color: var(--primary-text);
}

.visa-event__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.visa-event__label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.visa-event__summary {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.visa-event__data {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 2px 0 0;
  font-size: 12px;
}

.visa-event__data > div {
  display: flex;
  gap: 5px;
  min-width: 0;
}

.visa-event__data dt {
  color: var(--muted-foreground);
}

.visa-event__data dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.visa-event > time,
.visa-event > .muted {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* --- Narrow screens --------------------------------------------------------- */

/* A page with its own breadcrumb already has the way back at the top; the
   shell's menu arrow above it would be a second, different "back". */
@media (max-width: 760px) {
  .shell__main:has(.breadcrumb) > .mobile-bar {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Nothing scrolls sideways: every key/value pair stacks. */
  .detail-list > div,
  .approval-limits > div,
  .summary-table > div {
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-block: 10px;
  }

  .summary-table {
    padding-inline: 16px;
  }

  .approval-limits dd {
    margin-left: 0;
    text-align: left;
  }

  .detail-head .purchase-mark {
    width: 44px;
    height: 44px;
  }

  .detail-callout__actions,
  .detail-callout__actions > *,
  .detail-manage__actions,
  .confirm-action,
  .confirm-action > summary,
  .confirm-action__panel,
  .confirm-action__panel form,
  .confirm-action__panel button {
    width: 100%;
  }

  .confirm-action__panel {
    max-width: none;
  }

  /* A control a thumb has to hit is at least 44px tall on these screens. */
  .page-authorizations .button,
  .page-authorizations .button-secondary,
  .page-authorizations .button-destructive,
  .approval-page .button,
  .approval-page .button-secondary,
  .approval-page .button-text,
  .approval-page .wallet-button {
    height: auto;
    min-height: 44px;
  }

  /* The decision stays under the thumb however long the terms run. */
  .approval-sticky {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 4px;
    padding-block: 12px 8px;
    background: linear-gradient(
      to top,
      var(--background) 78%,
      color-mix(in srgb, var(--background) 0%, transparent)
    );
  }

  .visa-event {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .visa-event > time,
  .visa-event > .muted {
    grid-column: 2;
  }
}

/* ===== end visa-authorization ===== */

/* ===== landing (public front door at /) ===== */
/* Tokens only, so light and dark follow the owner's system setting. */

.landing {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  --landing-width: 1120px;
  --landing-inline: max(24px, calc((100% - var(--landing-width)) / 2));
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--landing-inline);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(14px);
}

.landing-header .wordmark,
.landing-footer .wordmark {
  padding: 0;
}

.landing-header .wordmark__logo,
.landing-footer .wordmark__logo {
  width: 98px;
  height: 28px;
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 8px 20px;
}

.landing-nav__links {
  display: flex;
  gap: 20px;
}

.landing-nav a:not(.button) {
  color: var(--foreground);
  font-weight: 500;
}

.landing-nav__cta.button {
  height: 36px;
  padding: 0 16px;
}

.landing-main {
  display: flex;
  flex-direction: column;
  gap: 96px;
  width: 100%;
  padding: 56px var(--landing-inline) 96px;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 56px;
}

.landing-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.landing-eyebrow {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-blue-subtle);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 600;
}

.landing-hero h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

.landing-lede {
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-hero__actions .button,
.landing-hero__actions .button-secondary {
  height: 44px;
  padding: 0 20px;
}

.landing-hero__note {
  font-size: 13px;
  color: var(--muted-foreground);
}

/* The approval sheet, drawn by its labels alone: no amounts, no merchants. */
.landing-sheet {
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(20px, 4vw, 40px);
  border-radius: 32px;
  background: var(--wallet-surface);
}

.landing-sheet__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(360px, 100%);
  padding: 28px 24px 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 24px 48px -28px rgb(15 23 42 / 35%);
}

.landing-sheet__marks {
  display: flex;
  align-items: center;
}

.landing-sheet__link {
  width: 32px;
  height: 1px;
  background: var(--border);
}

.landing-sheet__wallet {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--primary);
}

.landing-sheet__wallet img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.landing-sheet__ask {
  font-size: 15px;
  font-weight: 600;
}

.landing-sheet__rows {
  width: 100%;
  padding: 2px 16px;
  border-radius: 16px;
  background: var(--wallet-surface);
}

.landing-sheet__rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 11px;
  border-top: 1px solid var(--border);
}

.landing-sheet__rows > div:first-child {
  border-top: 0;
}

.landing-sheet__rows dt {
  font-size: 13px;
  color: var(--muted-foreground);
}

.landing-sheet__value {
  display: block;
  width: 84px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 14%, transparent);
}

.landing-sheet__rows > div:nth-child(2) .landing-sheet__value {
  width: 64px;
}

.landing-sheet__rows > div:nth-child(3) .landing-sheet__value {
  width: 96px;
}

.landing-sheet__rows > div:nth-child(4) .landing-sheet__value {
  width: 56px;
}

.landing-sheet__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.landing-sheet__actions span {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 999px;
  background: var(--secondary);
  font-size: 14px;
  font-weight: 500;
}

.landing-sheet__actions span:last-child {
  background: var(--primary);
  color: var(--primary-foreground);
}

.landing-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.landing-section > h2,
.landing-security h2,
.landing-cta h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

.landing-clients {
  align-items: center;
  text-align: center;
}

.landing-clients > p {
  max-width: 62ch;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.landing-clients__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}

.landing-clients__logos li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.landing-steps,
.landing-features {
  display: grid;
  gap: 16px;
}

.landing-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-steps li,
.landing-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
}

.landing-steps h3,
.landing-feature h3 {
  font-size: 17px;
  font-weight: 600;
}

.landing-steps p,
.landing-feature p {
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.landing-steps__number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}

.landing-feature__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-blue-subtle);
  color: var(--primary-text);
}

.landing-feature__icon .design-icon {
  width: 22px;
  height: 22px;
}

.landing-security {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 32px 56px;
}

.landing-security > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-security p {
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* Each line says what it guarantees; the tick only repeats it. */
.landing-checks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-checks li {
  display: flex;
  gap: 12px;
  text-wrap: pretty;
}

.landing-checks li::before {
  content: "✓";
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
}

.landing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(32px, 6vw, 56px) 24px;
  border-radius: 28px;
  background: var(--wallet-surface);
  text-align: center;
}

.landing-cta > p {
  color: var(--muted-foreground);
}

.landing-cta .landing-hero__actions {
  justify-content: center;
}

.landing-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
  padding: 32px var(--landing-inline) 40px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted-foreground);
}

.landing-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 44ch;
}

.landing-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.landing-footer__links a {
  color: var(--foreground);
}

@media (max-width: 900px) {
  .landing-hero,
  .landing-security {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .landing-nav__links {
    display: none;
  }

  .landing-main {
    gap: 64px;
    padding-top: 32px;
  }

  .landing-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-lede {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .landing-nav {
    gap: 14px;
  }

  .landing-hero__actions,
  .landing-hero__actions > * {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .landing-hero__copy,
  .landing-sheet {
    animation: wallet-rise 420ms var(--press) both;
  }

  .landing-sheet {
    animation-delay: 80ms;
  }
}

/* ===== end landing ===== */