/* ============================================================
   REKO — auth / onboarding / account surfaces
   Loads after site.css (reuses its tokens & buttons)
   ============================================================ */

/* ===== split-screen auth ===== */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-aside {
  position: relative; overflow: hidden; padding: 48px 56px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(70% 50% at 20% 0%, rgba(227,220,205,0.10), transparent 60%),
    radial-gradient(60% 50% at 90% 100%, rgba(52,226,155,0.07), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-page));
  border-right: 1px solid var(--hairline);
}
.auth-aside .brand { margin-bottom: auto; }
.aside-quote { font-size: clamp(24px, 2.6vw, 33px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.18; text-wrap: balance; max-width: 460px; }
.aside-quote .hl { color: var(--up); }
.aside-sub { font-size: 16px; color: var(--ink-2); margin-top: 20px; max-width: 420px; line-height: 1.6; }
.aside-proof { margin-top: 38px; display: flex; gap: 32px; flex-wrap: wrap; }
.aside-proof .ap-v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.aside-proof .ap-k { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }

/* mini floating slip card in aside */
.aside-card {
  margin-top: 40px; max-width: 360px;
  background: var(--surface); border: 1px solid var(--up-line); border-radius: var(--r-md);
  padding: 15px; box-shadow: 0 0 0 4px var(--up-soft), var(--shadow-card);
}
.aside-card .ac-top { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--up); }
.ac-field { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
.ac-field:last-child { border-bottom: 0; }
.ac-field .k { color: var(--ink-3); font-weight: 600; }
.ac-field .v { font-weight: 700; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand { display: none; margin-bottom: 30px; }
.auth-h { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
.auth-p { font-size: 15px; color: var(--ink-2); margin-top: 9px; }
.auth-p a { color: var(--up); font-weight: 700; }

.oauth { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--hairline-2); color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: .15s;
}
.oauth-btn:hover { background: var(--surface-3); border-color: var(--hairline-3); }
.oauth-btn svg, .oauth-btn .gmark { width: 18px; height: 18px; flex: none; }

.divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--ink-4); font-size: 12px; font-weight: 600; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--hairline); }

.field { margin-top: 18px; }
.field > label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.field > label a { font-size: 12.5px; color: var(--up); font-weight: 700; }
.input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--hairline-2);
  border-radius: var(--r-md); padding: 13px 15px; color: var(--ink);
  font: inherit; font-size: 15px; transition: .14s;
}
.input:focus { outline: none; border-color: var(--accent-line); background: var(--surface-3); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--ink-4); }
.input-wrap { position: relative; }
.input-wrap .eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.input-wrap .eye:hover { color: var(--ink); }

.pw-meter { display: flex; gap: 5px; margin-top: 10px; }
.pw-meter i { height: 4px; flex: 1; border-radius: 4px; background: var(--surface-3); transition: background .2s; }
.pw-meter.s1 i:nth-child(1) { background: var(--down); }
.pw-meter.s2 i:nth-child(-n+2) { background: var(--warn); }
.pw-meter.s3 i:nth-child(-n+3) { background: var(--up); }
.pw-meter.s4 i { background: var(--up); }
.pw-hint { font-size: 12px; color: var(--ink-3); margin-top: 7px; }

.check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.check-row input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--up); flex: none; }
.check-row a { color: var(--up); font-weight: 600; }

.auth-card .btn { margin-top: 22px; }
.auth-foot { margin-top: 24px; text-align: center; font-size: 14px; color: var(--ink-3); }
.auth-foot a { color: var(--ink); font-weight: 700; }
.auth-alert { margin: 14px 0; padding: 12px 13px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.auth-alert-error { color: var(--down); background: var(--down-soft); border: 1px solid var(--down-line); }
.auth-alert-ok { color: var(--up); background: var(--up-soft); border: 1px solid var(--up-line); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 26px; transition: color .14s; }
.back-link:hover { color: var(--ink); }

/* sent / success state */
.sent-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--up-soft); color: var(--up); margin-bottom: 22px; }

/* ===== onboarding wizard ===== */
.ob { min-height: 100vh; display: flex; flex-direction: column; }
.ob-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.ob-steps { display: flex; align-items: center; gap: 8px; }
.ob-steps .ob-pip { width: 30px; height: 5px; border-radius: 4px; background: var(--surface-3); transition: background .3s; }
.ob-steps .ob-pip.on { background: var(--accent); }
.ob-steps .ob-pip.done { background: var(--up); }
.ob-skip { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.ob-skip:hover { color: var(--ink); }
.ob-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 0 60px; }
.ob-panel { width: 100%; max-width: 560px; text-align: center; }
.ob-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ob-h { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin-top: 14px; text-wrap: balance; }
.ob-sub { font-size: 16.5px; color: var(--ink-2); margin-top: 14px; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.55; }
.ob-form { margin-top: 36px; text-align: left; }

/* segmented choice */
.choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-top: 12px; }
.choice {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px;
  background: var(--surface-2); border: 1px solid var(--hairline-2); border-radius: var(--r-md);
  cursor: pointer; transition: .14s; color: var(--ink-2); font-weight: 600; font-size: 14px;
}
.choice:hover { border-color: var(--hairline-3); color: var(--ink); }
.choice.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.choice .ch-ic { font-size: 22px; }
.choice .ch-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }

.ob-label { font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.seg-pills { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.seg-pill { padding: 11px 18px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--hairline-2); color: var(--ink-2); font-weight: 700; font-size: 14px; cursor: pointer; transition: .14s; }
.seg-pill:hover { color: var(--ink); }
.seg-pill.on { background: var(--ink); color: var(--accent-ink); border-color: var(--ink); }

.unit-readout { margin-top: 24px; padding: 18px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-md); display: flex; align-items: center; justify-content: space-between; }
.unit-readout .ur-k { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.unit-readout .ur-v { font-size: 22px; font-weight: 800; font-family: var(--mono); letter-spacing: -0.02em; }

/* drop slip in onboarding */
.ob-drop {
  margin-top: 28px; border: 1.5px dashed var(--hairline-3); border-radius: var(--r-lg);
  padding: 44px 28px; text-align: center; cursor: pointer; transition: .16s;
  background: var(--surface);
}
.ob-drop:hover { border-color: var(--accent-line); background: var(--surface-2); }
.ob-drop .od-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent-2); margin: 0 auto 16px; }
.ob-drop h4 { font-size: 17px; font-weight: 800; }
.ob-drop p { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }
.ob-or { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.ob-or a { color: var(--up); font-weight: 700; }

.ob-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 36px; }
.ob-nav .btn { width: auto; min-width: 140px; }
.ob-back { font-size: 14.5px; color: var(--ink-3); font-weight: 600; cursor: pointer; }
.ob-back:hover { color: var(--ink); }

/* success confetti-less celebration */
.ob-done-ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: var(--up-soft); color: var(--up); margin: 0 auto 26px; box-shadow: 0 0 0 6px var(--up-soft); }
.ob-summary { margin-top: 30px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.ob-sumcard { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px; }
.ob-sumcard .sc-k { font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ob-sumcard .sc-v { font-size: 18px; font-weight: 800; margin-top: 7px; }

/* ===== account / billing ===== */
.acct { max-width: 920px; margin: 0 auto; padding: 40px 28px 80px; }
.acct-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.acct-head .back-link { margin-bottom: 0; }
.acct h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; margin-top: 18px; }
.acct h1 + p { font-size: 15px; color: var(--ink-2); margin-top: 6px; }

.acct-section { margin-top: 34px; }
.acct-section > h3 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.acct-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 24px; }

.plan-bar { display: flex; align-items: center; gap: 18px; }
.plan-bar .pb-tier { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.plan-bar .pb-price { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.plan-bar .badge-pro { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 5px 11px; border-radius: var(--r-pill); }
.plan-bar .btn { width: auto; margin-left: auto; }

/* usage meter */
.usage { margin-top: 20px; }
.usage-top { display: flex; align-items: baseline; justify-content: space-between; }
.usage-top .ut-k { font-size: 14px; font-weight: 700; }
.usage-top .ut-v { font-size: 14px; font-weight: 700; font-family: var(--mono); }
.usage-top .ut-v b { color: var(--up); }
.usage-bar { height: 12px; border-radius: 8px; background: var(--surface-3); overflow: hidden; margin-top: 12px; }
.usage-bar > i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--up), #5ef0b3); }
.usage-bar.warn > i { background: linear-gradient(90deg, var(--warn), #ffd683); }
.usage-note { font-size: 12.5px; color: var(--ink-3); margin-top: 11px; }

.acct-rows { display: flex; flex-direction: column; }
.acct-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.acct-row:last-child { border-bottom: 0; }
.acct-row .ar-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-2); }
.acct-row .ar-mid { flex: 1; min-width: 0; }
.acct-row .ar-t { font-size: 14.5px; font-weight: 700; }
.acct-row .ar-s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.acct-row .ar-act { font-size: 13.5px; font-weight: 700; color: var(--up); cursor: pointer; }
.acct-row .ar-act.muted { color: var(--ink-3); }

.card-brand { width: 40px; height: 27px; border-radius: 6px; background: linear-gradient(135deg, #2a2f37, #14161a); border: 1px solid var(--hairline-2); display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--ink-2); }

/* invoices table */
.inv { width: 100%; border-collapse: collapse; }
.inv th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: 0 0 12px; border-bottom: 1px solid var(--hairline); }
.inv th.num, .inv td.num { text-align: right; }
.inv td { padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.inv td.num { font-family: var(--mono); font-weight: 600; }
.inv tr:last-child td { border-bottom: 0; }
.inv .inv-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--up); background: var(--up-soft); padding: 4px 9px; border-radius: var(--r-pill); }
.inv .inv-dl { color: var(--ink-3); font-weight: 700; }
.inv .inv-dl:hover { color: var(--ink); }

.danger-card { border-color: var(--down-line); }
.danger-card .ar-act { color: var(--down); }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-card .brand { display: flex; }
  .ob-summary { grid-template-columns: 1fr; }
  .acct-row { flex-wrap: wrap; }
}
@media (max-width: 540px) {
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .ob-summary { grid-template-columns: 1fr; }
}