/* ============================================================================
   Vibe Dashboard v2 — "Confirm wallet" screen (SYN-56 code-overwrite signing).
   Sep-2026 design upgrade: docs/design/design-upgrade/handoff-src/Vibe
   Dashboard.dc.html data-screen-label="Confirm wallet", rows C16–C27 (ruling
   F11: the magenta/glow hero is built as drawn). Reads styles/vibe-tokens.css
   (var(--v-*)) — never hardcode hex here — plus the shared modal primitive in
   styles/v2-modal.css for the signing overlay. The wallet-chooser renders
   src/core/wallet-picker.jsx variant="flat" (D42–D45 rules below; login's .v2l
   sheet skin lives in v2-login.css); otherwise this file styles only the
   surrounding confirm chrome.
   ============================================================================ */

.v2-confirm {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.v2-confirm-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--v-text-2);
  text-decoration: none;
  cursor: pointer;
}
.v2-confirm-back:hover { color: var(--v-text); }
.v2-confirm-back svg { display: block; }

/* ---- hero card (C16): --v-hero surface, 22px radius, magenta hairline, two
   blurred radial glow blobs, deep drop shadow ---- */
.v2-confirm-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--v-r-hero);
  border: 1px solid var(--v-border-magenta);
  background: var(--v-hero);
  box-shadow: var(--v-shadow-hero);
}
.v2-confirm-card::before,
.v2-confirm-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(16px);
  pointer-events: none;
}
.v2-confirm-card::before {
  width: 560px;
  height: 560px;
  right: -160px;
  top: -220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--v-blue) 20%, transparent), transparent 66%);
}
.v2-confirm-card::after {
  width: 520px;
  height: 520px;
  left: -180px;
  bottom: -240px;
  background: radial-gradient(circle, color-mix(in srgb, var(--v-pink) 16%, transparent), transparent 66%);
}

.v2-confirm-split {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 44px 46px;
}

.v2-confirm-left {
  flex: 1 1 360px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
}

.v2-confirm-right {
  flex: 1 1 340px;
  max-width: 400px;
  min-width: 320px;
}

.v2-confirm-kicker {
  font-family: var(--v-font-mono);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--v-pink);
}
.v2-confirm-kicker.is-neutral { color: var(--v-text-2); }

/* C17: 40px Poppins 700, -1px tracking */
.v2-confirm-title {
  font-family: var(--v-font-nav);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--v-heading);
  margin: 14px 0 0;
}
.v2-confirm-title.is-done { font-size: 32px; letter-spacing: -.6px; margin-top: 22px; }
.v2-confirm-title-dot { color: var(--v-blue); }
.v2-confirm-title-dot.is-green { color: var(--v-green); }

.v2-confirm-lead {
  font-size: 15px;
  line-height: 1.62;
  color: var(--v-text-2);
  margin: 18px 0 0;
  max-width: 460px;
}
.v2-confirm-lead + .v2-confirm-lead { margin-top: 16px; }
.v2-confirm-lead.is-centered { margin-top: 12px; max-width: 440px; line-height: 1.6; }
.v2-confirm-lead strong { color: var(--v-text); font-weight: 600; }
.v2-confirm-inline-code {
  font-size: .86em;
  color: var(--v-text-bright);
  background: color-mix(in srgb, var(--v-white) 7%, transparent);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.v2-confirm-lead.is-centered .v2-confirm-inline-code { font-size: .9em; background: none; padding: 0; }

/* C24: safety chips — 10.5px mono uppercase, 9px radius; C23: magenta reason chip */
.v2-confirm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.v2-confirm-chip {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--v-text-overline);
  border: 1px solid var(--v-border-control);
  border-radius: 9px;
  padding: 8px 13px;
}
.v2-confirm-chip.is-reason {
  color: var(--v-pink);
  border-color: color-mix(in srgb, var(--v-pink) 40%, transparent);
}

.v2-confirm-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 32px;
}
/* C18: bespoke primary CTA with blue glow */
.v2-confirm-cta {
  border: none;
  border-radius: 13px;
  padding: 15px 30px;
  font-family: var(--v-font-nav);
  font-weight: 600;
  font-size: 16px;
  color: var(--v-white);
  background: var(--v-blue);
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--v-blue) 55%, transparent);
  cursor: pointer;
  transition: transform .06s, box-shadow .15s, background .15s;
}
.v2-confirm-cta:hover {
  background: var(--v-blue-hover);
  box-shadow: 0 16px 40px -8px color-mix(in srgb, var(--v-blue) 70%, transparent);
}
.v2-confirm-cta:active { transform: translateY(1px); }
.v2-confirm-cta:disabled { background: var(--v-disabled); color: var(--v-text-3); box-shadow: none; cursor: not-allowed; }
.v2-confirm-cta:focus-visible { outline: 2px solid var(--v-text); outline-offset: 2px; }

.v2-confirm-free {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--v-text-3);
}
.v2-confirm-free-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: var(--v-r-pill);
  background: var(--v-green);
}

.v2-confirm-error {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v-rose);
}

/* ---- right column: the chooser panel frame ---- */
.v2-confirm-wallets {
  border: 1px solid var(--v-border-well);
  background: color-mix(in srgb, var(--v-white) 1.8%, transparent);
  border-radius: 18px;
  padding: 22px;
  transition: border-color .15s, box-shadow .15s;
}
.v2-confirm-wallets.is-glow {
  border-color: var(--v-border-blue);
  box-shadow: 0 0 0 3px var(--v-blue-tint);
}

/* ---- signing overlay (C19 Cancel, C20 magenta spinner) on the shared modal
   primitive: .v2-modal-backdrop.is-local + .v2-modal.is-plain ---- */
.v2-confirm-signing { padding: 24px; }
.v2-confirm-spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: var(--v-r-pill);
  border: 3px solid color-mix(in srgb, var(--v-pink) 20%, transparent);
  border-top-color: var(--v-pink);
  animation: v2Spin .8s linear infinite;
}
.v2-confirm-signing-title {
  font-family: var(--v-font-nav);
  font-weight: 600;
  font-size: 19px;
  color: var(--v-heading);
  margin-top: 20px;
}
.v2-confirm-signing-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v-text-2);
  margin: 9px 0 0;
}
.v2-confirm-cancel {
  margin-top: 20px;
  background: color-mix(in srgb, var(--v-white) 5%, transparent);
  border: 1px solid var(--v-border-control);
  color: var(--v-text-overline);
  font-family: var(--v-font);
  font-size: 13.5px;
  padding: 9px 20px;
  border-radius: 9px;
  cursor: pointer;
}
.v2-confirm-cancel:hover { color: var(--v-text); border-color: color-mix(in srgb, var(--v-white) 28%, transparent); }
.v2-confirm-cancel:disabled { color: var(--v-text-3); cursor: default; border-color: var(--v-border-well); }
.v2-confirm-cancel:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }

/* ---- done (C21) + neutral (C27, in-schema) states ---- */
.v2-confirm-success {
  position: relative;
  z-index: 1;
  padding: 60px 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: v2ModalUp .3s ease;
}
.v2-confirm-success-ring {
  width: 66px;
  height: 66px;
  border-radius: var(--v-r-pill);
  background: color-mix(in srgb, var(--v-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--v-green) 40%, transparent);
  display: grid;
  place-items: center;
  color: var(--v-green);
}
.v2-confirm-success-ring.is-neutral {
  background: color-mix(in srgb, var(--v-white) 4%, transparent);
  border-color: color-mix(in srgb, var(--v-white) 12%, transparent);
  color: var(--v-text-2);
}
.v2-confirm-success .v2-confirm-kicker { margin-top: 22px; }
.v2-confirm-success .v2-confirm-kicker + .v2-confirm-title { margin-top: 12px; }
.v2-confirm-signed-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-family: var(--v-font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--v-green) 45%, var(--v-text-2));
  border: 1px solid color-mix(in srgb, var(--v-green) 28%, transparent);
  background: color-mix(in srgb, var(--v-green) 6%, transparent);
  border-radius: var(--v-r-pill);
  padding: 8px 16px;
  white-space: nowrap;
}
.v2-confirm-btn-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  border: none;
  border-radius: 12px;
  padding: 13px 28px;
  font-family: var(--v-font-nav);
  font-weight: 600;
  font-size: 15px;
  color: var(--v-white);
  background: var(--v-blue);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.v2-confirm-btn-done:hover { background: var(--v-blue-hover); }
.v2-confirm-btn-done:focus-visible { outline: 2px solid var(--v-text); outline-offset: 2px; }

/* C22 footnote: rendered by the shared PointsDisclaimer (ui.jsx) as .v2-disclaimer
   (v2-shell.css) — centred/width rules below keep the Confirm page layout. */
.v2-confirm > .v2-disclaimer { max-width: 780px; margin: 2px auto 0; text-align: center; }

/* A26 (from S2): the Overview notice "Verify wallet" CTA is the mock's
   9px 16px / 13.5px button, not the 42px .v2-btn. The notice markup lives in
   this file's CodeOverwriteConfirmPrompt, so the override lives here.
   The superadmin View-as bar (app.jsx) reuses these two classes and keeps
   this rule only. */
.v2-wallet-notice-cta.v2-btn { height: auto; padding: 9px 16px; font-size: 13.5px; }
/* L25: the mock button sets no font, so it takes the body font (Space
   Grotesk) and white text; .v2-btn's Poppins made it 38px tall against the
   mock's 35px (mock/overview.png). Scoped to the notice's actions wrapper so
   the View-as button is untouched. Height is pinned on desktop only, so a
   font fallback cannot move it; the ≤900 full-width CTA in v2-shell.css
   keeps its own height and padding. */
.v2-wallet-notice-actions > .v2-wallet-notice-cta.v2-btn { font-family: var(--v-font); color: var(--v-white); }
@media (min-width: 901px) {
  .v2-wallet-notice-actions > .v2-wallet-notice-cta.v2-btn { height: 35px; padding: 0 16px; }
}

/* ---- D42–D45 (Q9): flat always-open wallet list — VibeWalletPicker
   variant="flat", Confirm only (login keeps the .v2l sheet in v2-login.css).
   Spec: docs/design/dashboard-refresh-sep15/mock/confirm-wallet.html:33-81 ---- */
.wallet-flat-title { margin: 0; font-family: var(--v-font-nav); font-weight: 600; font-size: 20px; color: var(--v-heading); }
.wallet-flat-prompt { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--v-text-2); }
.wallet-flat-prompt .v-mono { font-size: .9em; color: var(--v-text-bright); }
.wallet-flat-primary { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.wallet-flat-row {
  display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box;
  padding: 13px 15px; border-radius: 14px; text-align: left; text-decoration: none;
  font: inherit; color: var(--v-text); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--v-green) 32%, transparent);
  background: color-mix(in srgb, var(--v-green) 5%, transparent);
  transition: border-color .15s, background .15s;
}
.wallet-flat-row:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v-green) 55%, transparent);
  background: color-mix(in srgb, var(--v-green) 9%, transparent);
}
.wallet-flat-row:disabled { cursor: default; opacity: .6; }
.wallet-flat-row:focus-visible, .wallet-flat-other-row:focus-visible, .wallet-flat-install-link:focus-visible, .wallet-flat-missing-link:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }
.wallet-flat .wallet-picker-icon, .wallet-flat .wallet-picker-dot { display: block; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; object-fit: contain; }
.wallet-flat .wallet-picker-dot { background: linear-gradient(135deg, var(--v-magenta), var(--v-blue)); }
.wallet-flat .wallet-picker-icon.small, .wallet-flat .wallet-picker-dot.small { width: 34px; height: 34px; border-radius: 10px; }
.wallet-flat-name { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; font-weight: 500; color: var(--v-text); }
.wallet-flat-row .wallet-flat-name { font-family: var(--v-font-nav); font-weight: 600; font-size: 15.5px; }
.wallet-flat-sub { font-family: var(--v-font); font-weight: 400; font-size: 12px; color: var(--v-text-2); }
.wallet-flat-badge {
  flex-shrink: 0; padding: 4px 8px; border-radius: 6px;
  font-family: var(--v-font-mono); font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--v-green);
  background: color-mix(in srgb, var(--v-green) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--v-green) 34%, transparent);
}
.wallet-flat-overline { margin-top: 18px; font-family: var(--v-font-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--v-text-3); }
.wallet-flat-other { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.wallet-flat-other-row {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 11px 13px; border-radius: 12px; text-align: left; font: inherit; color: var(--v-text);
  border: 1px solid var(--v-border-well);
  background: color-mix(in srgb, var(--v-white) 2%, transparent);
}
button.wallet-flat-other-row { cursor: pointer; }
.wallet-flat-install-link { flex-shrink: 0; text-decoration: none; border-radius: 9px; }
.wallet-flat-install {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--v-white) 13%, transparent); border-radius: 9px;
  font-family: var(--v-font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--v-text-overline); transition: color .15s, border-color .15s;
}
.wallet-flat-install svg { width: 12px; height: 12px; }
.wallet-flat-install-link:hover .wallet-flat-install, .wallet-flat-row:hover .wallet-flat-install { color: var(--v-text); border-color: color-mix(in srgb, var(--v-white) 24%, transparent); }
.wallet-flat-missing { margin-top: 15px; }
.wallet-flat-missing-link { display: inline-block; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--v-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wallet-flat-missing-link:hover { color: var(--v-link-hover); }
.wallet-flat-missing-label { display: block; margin-bottom: 8px; font-size: 12.5px; color: var(--v-text-2); }
.wallet-flat-missing-row { display: flex; gap: 8px; }
.wallet-flat-missing-row input { flex: 1; min-width: 0; height: 38px; box-sizing: border-box; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--v-white) 10%, transparent); border-radius: var(--v-r-btn); background: color-mix(in srgb, var(--v-white) 4%, transparent); color: var(--v-text); font: inherit; font-size: 13px; }
.wallet-flat-missing-send { flex: 0 0 auto; height: 38px; padding: 0 14px; border: 0; border-radius: var(--v-r-btn); background: var(--v-blue); color: var(--v-white); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wallet-flat-missing-send:disabled { opacity: .5; cursor: default; }
.wallet-flat-missing-sent { font-size: 12.5px; color: var(--v-green); }
.wallet-flat-missing-error { margin-top: 6px; font-size: 12px; color: var(--v-rose); }

@media (prefers-reduced-motion: reduce) {
  .v2-confirm-success { animation: none; }
  .wallet-flat-row, .wallet-flat-install { transition: none; }
}

@media (max-width: 720px) {
  /* P-CF-2 (F3 decided): keep the app's 28/22 pad, H1 30px, min-width 0 —
     the mock's 44/46 + H1 40 + min-width 320 clip at 390. */
  .v2-confirm-split { padding: 28px 22px; gap: 26px; }
  .v2-confirm-left, .v2-confirm-right { min-width: 0; }
  .v2-confirm-title { font-size: 30px; }
  .v2-confirm-title.is-done { font-size: 26px; }
  .v2-confirm-success { padding: 44px 24px; }
  .v2-confirm-card::before, .v2-confirm-card::after { width: 360px; height: 360px; }
  /* P-CF-3: the wallet name ellipsizes inside its flex column — the
     DETECTED badge stays flush right and never overlaps the name. */
  .wallet-flat-name { overflow: hidden; }
  .wallet-flat-row .wallet-flat-name > span:first-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* P-CF-4: other-wallet names stay single-line at 14.5px beside the h32
     INSTALL chip (the full 7-wallet catalog is logic truth, kept). */
  .wallet-flat-other .wallet-flat-name { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wallet-flat-other-row { gap: 8px; padding: 10px 12px; }
  /* P-CF-5: every icon sits on the same solid tile so the column reads
     even whether the wallet ships a PNG logo or the gradient-dot fallback. */
  .wallet-flat .wallet-picker-icon { background-color: var(--v-elevated); }
  /* P-CF-7: app-only states keep the done-card metrics above (H1 32→26,
     pad 60/46→44/24) — error line, busy CTA, signing overlay and the
     missing-wallet form need no further shrink. */
}