/* Account pages: login / register / reset (auth card + side panel) and the dashboard. */

/* ── auth ── */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 16px; align-items: stretch; margin-top: 8px; }
.auth--wide { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 380px); }
.auth-card { padding: 36px 38px; }
.auth-card > * { position: relative; z-index: 5; }
.auth-card h1 { font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4rem); margin: 12px 0 22px; }
.auth-card .tabs { margin-bottom: 22px; }
.auth-alt { margin-top: 20px; font-size: .9375rem; color: var(--color-muted); }
.auth-side { position: relative; overflow: hidden; isolation: isolate; padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; background: linear-gradient(180deg, #1A1520, #2E2230); clip-path: var(--chamfer); }
.auth-side h2 { font-size: 2rem; }
.auth-side .legal-meta { margin-top: auto; }
.auth-side__alps { position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; opacity: .7; }
.auth-side__alps > * { position: absolute; left: -4%; right: -4%; bottom: 0; }
.auth-side__alps .ridge-1 { height: 100%; background: linear-gradient(180deg, color-mix(in oklab, var(--color-glow) 45%, #5A4258), #3B3040 40%); clip-path: polygon(0 60%,15% 40%,28% 52%,42% 18%,55% 34%,68% 6%,80% 30%,100% 20%,100% 100%,0 100%); opacity: .55; }
.auth-side__alps .ridge-2 { height: 70%; background: #2B2233; clip-path: polygon(0 50%,18% 30%,34% 48%,52% 22%,70% 44%,86% 20%,100% 36%,100% 100%,0 100%); }
.auth-side__alps .ridge-3 { height: 40%; background: #211B27; clip-path: polygon(0 40%,20% 60%,40% 30%,60% 56%,80% 34%,100% 50%,100% 100%,0 100%); }
.auth .info-list li { align-items: flex-start; }

/* ── dashboard head ── */
.acc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 34px 38px; background-image: var(--hatch), radial-gradient(80% 140% at 100% 100%, color-mix(in oklab, var(--color-brand) 18%, transparent), transparent 60%); }
.acc-head > * { position: relative; z-index: 5; min-width: 0; }
.acc-head .kicker { flex-wrap: wrap; row-gap: 6px; overflow-wrap: anywhere; line-height: 1.3; }
.acc-head .kicker b { white-space: nowrap; }
.acc-head h1 { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem); margin-top: 12px; }
.acc-balance { display: grid; justify-items: end; gap: 6px; text-align: right; }
.acc-balance small { font: 500 var(--fs-micro)/1 var(--font-mono); letter-spacing: .08em; color: var(--color-muted); text-transform: uppercase; }
.acc-balance b { font: 900 clamp(2.4rem, 1.6rem + 2.2vw, 3.6rem)/1 var(--font-display); }
.acc-balance__cta { display: flex; gap: 8px; margin-top: 8px; }
.acc-flash { margin-top: 16px; scroll-margin-top: 90px; }

/* ── layout ── */
.acc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.acc-nav { position: sticky; top: 76px; display: grid; gap: 2px; padding: 10px; }
.acc-tab { position: relative; z-index: 5; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; text-align: left; font: 650 .875rem/1 var(--font-body); color: var(--color-muted); transition: color var(--dur-fast), background-color var(--dur-fast); }
.acc-tab .icon { width: 18px; height: 18px; }
.acc-tab:hover { color: var(--color-text); background: color-mix(in oklab, var(--color-text) 5%, transparent); }
.acc-tab[aria-selected="true"] { color: var(--color-text); background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--color-brand); }
.acc-tab[aria-selected="true"] .icon { color: var(--color-brand); }
.acc-tab[data-logout] { margin-top: 8px; border-top: 1px solid var(--color-line); }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.acc-box { padding: 26px 28px; display: grid; gap: 14px; align-content: start; }
.acc-box > * { position: relative; z-index: 5; }
.acc-box h2 { font-size: 1.75rem; }
.acc-box--wide { grid-column: 1 / -1; }
.acc-box__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acc-box__head .chips { margin: 0; }
.acc-sub { font-size: 1.25rem; margin-top: 8px; }
.gauge { display: grid; gap: 8px; }
.gauge__row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: .9rem; cursor: pointer; }

/* ── transactions ── */
.tx-list { display: grid; }
.tx-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.tx-list li > span:nth-child(2) { display: grid; gap: 2px; }
.tx-list small { font-size: .8125rem; color: var(--color-muted); }
.tx-list strong { font: 800 1.125rem/1 var(--font-display); }
.tx-list form { display: contents; }
.tx-ic { display: grid; place-items: center; width: 36px; height: 36px; }
.tx-ic .icon { width: 16px; height: 16px; }
.tx-ic.is-in { background: var(--mint-tint); color: var(--color-accent); }
.tx-ic.is-out { background: var(--brand-tint); color: var(--color-brand); }

/* ── limits ── */
.limit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.limit { padding: 20px 22px; display: grid; gap: 10px; align-content: start; background-color: var(--surface-2); }
.limit > * { position: relative; z-index: 5; }
.limit__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.limit__head h3 { font-size: 1.25rem; }
.limit__head small { font: 500 var(--fs-micro)/1 var(--font-mono); color: var(--color-muted); letter-spacing: .06em; }
.limit__val { font: 900 2.2rem/1 var(--font-display); }
.limit__form { display: grid; gap: 10px; margin-top: 6px; }

/* ── danger zone ── */
.acc-danger { background-image: var(--hatch), linear-gradient(160deg, color-mix(in oklab, var(--color-error) 8%, var(--surface-1)), var(--surface-1) 60%); }
.danger-details summary { list-style: none; cursor: pointer; width: fit-content; }
.danger-details summary::-webkit-details-marker { display: none; }
.danger-details[open] summary { margin-bottom: 14px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; font-size: .9375rem; }
.kv dt { color: var(--color-muted); }
.kv dd { margin: 0; }

@media (max-width: 1100px) {
  .auth, .auth--wide { grid-template-columns: minmax(0, 1fr); }
  .acc-layout { grid-template-columns: minmax(0, 1fr); }
  .acc-nav { position: relative; top: 0; display: flex; overflow-x: auto; scrollbar-width: none; }
  .acc-nav::-webkit-scrollbar { display: none; }
  .acc-tab { flex: none; }
  .acc-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--color-brand); }
  .acc-tab[data-logout] { margin: 0; border: 0; }
}
@media (max-width: 760px) {
  .auth-card { padding: 26px 20px; }
  .auth-side { padding: 26px 22px; }
  .acc-head { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .acc-balance { justify-items: start; text-align: left; }
  .limit-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-box { padding: 22px 18px; }
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
}
.acc-tablist { display: contents; }
.acc-flash:focus { outline: none; }
/* login tabs share the card width on phones instead of running past the edge */
.auth-card .tabs .tab { flex: 1 1 0; min-width: 0; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; padding-block: 6px; }