/* ==========================================================================
   Coffer Phase 6/7 — Forms/Modals/Dialogs + Onboarding shell
   --------------------------------------------------------------------------
   Loaded AFTER coffer-brand.css. Owns:
     - Onboarding wizard chrome (canvas, header, step indicator, glass card)
     - Confirm dialog skin (Backstage tone-coded)
     - Modal/<dialog> defaults (when used outside the design-system component)
     - Misc icon button + ghost button helpers consumed by Phase 6/7 partials
   No global token redefines — Phase 1's coffer-brand.css owns those.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Onboarding canvas + glow
   -------------------------------------------------------------------------- */

.coffer-onboarding-canvas {
  background-color: var(--coffer-canvas);
  color: rgb(255 255 255 / 0.92);
}

.coffer-onboarding-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%,  rgb(59 130 246 / 0.10), transparent 70%),
    radial-gradient(40% 35% at 100% 100%, rgb(59 130 246 / 0.06), transparent 70%);
  z-index: 0;
}

.coffer-onboarding-card {
  max-width: 36rem;       /* matches max-w-lg + a touch wider */
  margin: 0 auto;
  background: var(--coffer-card);
  border: 1px solid var(--coffer-card-edge);
  border-radius: 1.5rem;  /* rounded-3xl */
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  box-shadow:
    0 30px 60px -20px rgb(0 0 0 / 0.45),
    inset 0 0 0 1px rgb(255 255 255 / 0.02);
  padding: 2rem;
}
@media (min-width: 768px) {
  .coffer-onboarding-card { padding: 2.5rem; }
}

/* --------------------------------------------------------------------------
   2. Onboarding step indicator (lit pills)
   -------------------------------------------------------------------------- */

.coffer-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 200ms ease;
  text-decoration: none;
}
.coffer-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  font-size: 10px;
  line-height: 1;
}
.coffer-step__name { line-height: 1; }

.coffer-step--idle {
  color: rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.03);
  border-color: var(--coffer-card-edge);
}
.coffer-step--idle .coffer-step__num {
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.55);
}
.coffer-step--idle:hover { color: rgb(255 255 255 / 0.75); }

.coffer-step--active {
  color: #93c5fd;
  background: rgb(var(--coffer-blue) / 0.15);
  border-color: rgb(var(--coffer-blue) / 0.40);
  box-shadow:
    0 0 12px rgb(var(--coffer-blue) / 0.30),
    inset 0 0 0 1px rgb(var(--coffer-blue) / 0.30);
}
.coffer-step--active .coffer-step__num {
  background: rgb(var(--coffer-blue) / 0.30);
  color: #fff;
}

.coffer-step--done {
  color: #6ee7b7;
  background: rgb(var(--coffer-emerald) / 0.10);
  border-color: rgb(var(--coffer-emerald) / 0.30);
}
.coffer-step--done .coffer-step__num {
  background: rgb(var(--coffer-emerald) / 0.20);
  color: #6ee7b7;
}

.coffer-step__rule {
  width: 1.5rem;
  height: 1px;
  background: var(--coffer-card-edge);
  display: inline-block;
}

/* Mobile progress bar */
.coffer-progress {
  width: 100%;
  height: 4px;
  background: rgb(255 255 255 / 0.06);
  border-radius: 9999px;
  overflow: hidden;
}
.coffer-progress__fill {
  height: 100%;
  background: linear-gradient(90deg,
    rgb(var(--coffer-blue) / 0.85),
    rgb(var(--coffer-blue) / 1));
  box-shadow: 0 0 12px rgb(var(--coffer-blue) / 0.55);
  transition: width 300ms ease;
}

/* --------------------------------------------------------------------------
   3. Tone-coded icon-square + eyebrow (used in confirm dialog + modal headers)
   -------------------------------------------------------------------------- */

.coffer-tone-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.coffer-tone-square--blue    { background: rgb(var(--coffer-blue)    / 0.10); color: #93c5fd; }
.coffer-tone-square--amber   { background: rgb(var(--coffer-amber)   / 0.10); color: #fcd34d; }
.coffer-tone-square--red     { background: rgb(var(--coffer-red)     / 0.10); color: #fca5a5; }
.coffer-tone-square--emerald { background: rgb(var(--coffer-emerald) / 0.10); color: #6ee7b7; }
.coffer-tone-square--slate   { background: rgb(var(--coffer-slate)   / 0.10); color: rgb(255 255 255 / 0.65); }

.coffer-eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.coffer-eyebrow--blue    { color: #93c5fd; }
.coffer-eyebrow--amber   { color: #fcd34d; }
.coffer-eyebrow--red     { color: #fca5a5; }
.coffer-eyebrow--emerald { color: #6ee7b7; }
.coffer-eyebrow--slate   { color: rgb(255 255 255 / 0.65); }

/* --------------------------------------------------------------------------
   4. Icon button + ghost button (for headers, dialog close, etc.)
   -------------------------------------------------------------------------- */

.coffer-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--coffer-card-edge);
  color: rgb(255 255 255 / 0.70);
  transition: all 180ms ease;
  text-decoration: none;
}
.coffer-icon-btn:hover {
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.95);
}

.coffer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1.125rem;
  border-radius: 0.875rem;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 180ms ease;
  text-decoration: none;
}
.coffer-btn--primary {
  background: var(--color-blue-600);
  color: #fff;
  box-shadow: 0 0 18px rgb(var(--coffer-blue) / 0.25);
}
.coffer-btn--primary:hover {
  background: var(--color-blue-700);
  box-shadow: 0 0 24px rgb(var(--coffer-blue) / 0.40);
}
.coffer-btn--ghost {
  background: transparent;
  color: rgb(255 255 255 / 0.70);
  border-color: var(--coffer-card-edge);
}
.coffer-btn--ghost:hover {
  background: rgb(255 255 255 / 0.05);
  color: rgb(255 255 255 / 0.95);
}
.coffer-btn--destructive {
  background: rgb(var(--coffer-red) / 0.15);
  color: #fca5a5;
  border-color: rgb(var(--coffer-red) / 0.40);
  box-shadow: inset 0 0 0 1px rgb(var(--coffer-red) / 0.30);
}
.coffer-btn--destructive:hover {
  background: rgb(var(--coffer-red) / 0.25);
}
.coffer-btn--outline-destructive {
  background: transparent;
  color: #fca5a5;
  border-color: rgb(var(--coffer-red) / 0.40);
}
.coffer-btn--outline-destructive:hover {
  background: rgb(var(--coffer-red) / 0.10);
}

/* --------------------------------------------------------------------------
   5. Confirm dialog wrapper (DS::Dialog content surface)
   -------------------------------------------------------------------------- */

.coffer-confirm {
  background: rgb(15 23 42 / 0.85);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  border-radius: 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.05);
  box-shadow:
    0 30px 60px -20px rgb(0 0 0 / 0.50),
    inset 0 0 0 1px rgb(255 255 255 / 0.02);
  padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   6. Generic <dialog> + Plaid Link wrapper modal skinning
   -------------------------------------------------------------------------- */

dialog,
dialog[open] {
  background: rgb(15 23 42 / 0.92) !important;
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  border: 1px solid var(--coffer-card-edge) !important;
  border-radius: 1.5rem !important;
  color: rgb(255 255 255 / 0.92);
  box-shadow:
    0 30px 60px -20px rgb(0 0 0 / 0.50),
    inset 0 0 0 1px rgb(255 255 255 / 0.02);
  padding: 0;
}
dialog::backdrop {
  background: rgb(2 6 17 / 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* DS::Dialog inner body padding */
:where(dialog [role="document"], dialog .modal__body, dialog .dialog__body) {
  padding: 1.5rem;
}

/* Modal headers (account-create, transaction-create, etc.) — convert plain
   dialog <header>/h2 into Backstage-style eyebrow + tone square. We can't
   inject the icon-square per-modal without view edits, so we just give the
   header text the eyebrow treatment. */
:where(dialog header h2, dialog header h3, dialog .modal__title) {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  text-transform: none !important;
}

/* --------------------------------------------------------------------------
   7. Filter/search dropdowns (Sure uses [role="menu"] and ::part(menu))
   -------------------------------------------------------------------------- */

:where([role="menu"], [role="listbox"], .menu, .dropdown__menu) {
  background: rgb(15 23 42 / 0.92) !important;
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  border: 1px solid var(--coffer-card-edge) !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.55);
  color: rgb(255 255 255 / 0.85);
}
:where([role="menuitem"], [role="option"]) {
  color: rgb(255 255 255 / 0.85);
}
:where([role="menuitem"]:hover, [role="option"]:hover, [role="menuitem"][data-active], [role="option"][data-active]) {
  background: rgb(255 255 255 / 0.06);
  color: #fff;
}

/* --------------------------------------------------------------------------
   8. Goals page — checkable cards
   -------------------------------------------------------------------------- */

.coffer-onboarding-card label[for]:has(input[type="checkbox"].sr-only),
.coffer-onboarding-card label.flex:has(input[type="checkbox"].sr-only) {
  background: rgb(255 255 255 / 0.03);
  border: 1px solid var(--coffer-card-edge);
  border-radius: 0.875rem;
  transition: all 180ms ease;
}
.coffer-onboarding-card label.flex:has(input[type="checkbox"].sr-only):hover {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(var(--coffer-blue) / 0.35);
}
.coffer-onboarding-card label.flex:has(input[type="checkbox"]:checked) {
  background: rgb(var(--coffer-blue) / 0.10) !important;
  border-color: rgb(var(--coffer-blue) / 0.40) !important;
  box-shadow:
    0 0 12px rgb(var(--coffer-blue) / 0.20),
    inset 0 0 0 1px rgb(var(--coffer-blue) / 0.25);
}