/* Access payment flow (charter §7.14): package/asset → TX → codes.
   The dialog mirrors the entry "glass" card (aurora.css #connect-panel): gradient
   border, 22 px radius, accent-dot labels, 38 px fields and one primary CTA, so
   the payment window reads as part of the same product on both the landing and
   the web client. Colours fall back from the landing palette to the client one. */

.members { margin: 10px 0 0; font: 500 13px/1.45 var(--display, inherit); letter-spacing: 0; color: var(--muted, var(--sc-muted, #8fa4a7)); }
.members b { color: var(--text, var(--bs-body-color, #edf6f2)); font-weight: 700; font-variant-numeric: tabular-nums; }

.access-flow { display: grid; gap: 14px; }
.access-label {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font: 600 11px/1.2 var(--display, inherit); letter-spacing: .085em; text-transform: uppercase;
  color: var(--muted, var(--sc-muted, #8fa4a7));
}
.access-label::before {
  content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent, var(--sc-accent, #a8e6c8)); box-shadow: 0 0 8px var(--accent, var(--sc-accent, #a8e6c8));
}
.access-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.access-pkg {
  display: grid; gap: 4px; padding: 12px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--line, var(--sc-border, rgba(255,255,255,.12))); border-radius: 14px;
  background: rgba(255, 255, 255, .03); color: var(--text, var(--bs-body-color, #edf6f2));
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.access-pkg:hover { background: rgba(255, 255, 255, .06); }
.access-pkg.is-on {
  border-color: var(--accent, var(--sc-accent, #a8e6c8));
  box-shadow: 0 0 0 1px var(--accent, var(--sc-accent, #a8e6c8)) inset, 0 10px 26px -18px var(--accent, var(--sc-accent, #a8e6c8));
}
.access-pkg b { font: 650 19px/1 var(--display, inherit); }
.access-pkg span { font: 500 11px/1.3 var(--display, inherit); color: var(--muted, var(--sc-muted, #8fa4a7)); }
.access-assets { display: flex; gap: 8px; }
.access-asset {
  height: 32px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, var(--sc-border, rgba(255,255,255,.12)));
  background: transparent; color: var(--muted, var(--sc-muted, #8fa4a7));
  font: 600 11.5px/1 var(--display, inherit); letter-spacing: .06em;
}
.access-asset.is-on {
  background: var(--accent, var(--sc-accent, #a8e6c8)); border-color: var(--accent, var(--sc-accent, #a8e6c8));
  color: var(--ink, var(--sc-accent-ink, #072018));
}
.pay-addr-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 10px 8px 12px; border-radius: 11px;
  border: 1px solid var(--line, var(--sc-border, rgba(255,255,255,.12)));
  background: rgba(255, 255, 255, .035);
}
.access-addr { flex: 1 1 auto; min-width: 0; }
.access-amount-line { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text, var(--bs-body-color, #edf6f2)); }
.access-amount { color: var(--accent, var(--sc-accent, #a8e6c8)); }
.access-tx { width: 100%; }
.access-hint { margin: 0; }
.access-msg { min-height: 16px; margin: 0; color: var(--muted, var(--sc-muted, #8fa4a7)); font-size: 12px; line-height: 1.4; }
.access-warn {
  margin: 0; padding: 10px 12px; border-radius: 11px;
  border: 1px solid rgba(212, 106, 76, .70); background: rgba(180, 84, 58, .18);
  color: var(--text, var(--bs-body-color, #edf6f2)); font-size: 12.5px; line-height: 1.5;
}
.access-codes { margin: 0; padding-left: 20px; font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.6; user-select: all; }
.access-codes li { word-break: break-all; }
.access-step .access-back { margin-top: 0; }
.access-copied { margin-left: 6px; }

dialog.access-dialog {
  max-width: 460px; width: calc(100% - 32px); max-height: 90vh; overflow: auto;
  padding: 0; border: 1px solid transparent; border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(24, 30, 37, .97), rgba(16, 22, 28, .99)) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 42%, rgba(168, 230, 200, .34)) border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--text, var(--bs-body-color, #edf6f2));
}
dialog.access-dialog::backdrop { background: rgba(2, 4, 7, .72); }
/* Shared modal X (charter §12.2): base styles live in modal.css; the access
   dialog only nudges it inward because its border radius is larger. */
.access-dialog .modal-x { top: 14px; right: 14px; }

.access-dialog .dlg-head {
  display: flex; align-items: baseline; gap: 6px;
  padding: 18px 20px; border-bottom: 1px solid var(--line, var(--sc-border, rgba(255,255,255,.10)));
  font: 600 13px/1.3 var(--display, inherit); letter-spacing: 0;
  color: var(--muted, var(--sc-muted, #8fa4a7));
}
.access-dialog .dlg-head::before {
  content: ""; flex: none; align-self: center; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, var(--sc-accent, #a8e6c8)); box-shadow: 0 0 8px var(--accent, var(--sc-accent, #a8e6c8));
}
.access-dialog .dlg-head span { font-weight: 650; font-size: 15px; color: var(--text, var(--bs-body-color, #edf6f2)); }
.access-dialog .dlg-body { padding: 18px 20px; }

/* pay.js reuses the landing's `.btn.secondary/.btn.primary` names; explicit rules
   keep the controls dark-on-dark (the UA light palette made Back/Close invisible)
   and give them the same 38 px geometry as the entry form. */
.access-dialog .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 16px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line, var(--sc-border, rgba(168,230,200,.20)));
  background: rgba(255, 255, 255, .03); color: var(--text, var(--bs-body-color, #edf6f2));
  font: 600 12.5px/1 var(--display, inherit); white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.access-dialog .btn:hover { background: rgba(168, 230, 200, .12); color: #fff; }
.access-dialog .btn.primary {
  background: var(--accent, var(--sc-accent, #a8e6c8)); border-color: var(--accent, var(--sc-accent, #a8e6c8));
  color: var(--ink, var(--sc-accent-ink, #072018));
  box-shadow: 0 10px 26px -12px var(--accent, var(--sc-accent, #a8e6c8));
}
.access-dialog .btn.primary:hover { background: var(--accent, var(--sc-accent, #a8e6c8)); color: var(--ink, var(--sc-accent-ink, #072018)); }
.access-dialog .access-next,
.access-dialog .access-check,
.access-dialog .access-copycodes,
.access-dialog .access-back { width: 100%; }

.access-dialog .form-control {
  width: 100%; height: 38px; padding: 0 11px; border-radius: 11px;
  border: 1px solid var(--line, var(--sc-border, rgba(255,255,255,.12)));
  background: rgba(255, 255, 255, .035); color: var(--text, var(--bs-body-color, #edf6f2));
  font: 13px/1.35 var(--mono, ui-monospace, monospace); box-shadow: none;
}
.access-dialog .form-control:focus {
  outline: none; border-color: var(--accent, var(--sc-accent, #a8e6c8)); background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 3px rgba(168, 230, 200, .16);
}
.access-dialog .form-control::placeholder { color: rgba(237, 246, 242, .38); }