/* ============================================================
   account.css — supplemental styles for the Wallie Cloud
   account app. Adds nothing new to the palette: every value
   below is built from the wallie.css tokens (--acc, --ink,
   --mut, --panel, --line, --r, --sans, --mono, …) so the app
   inherits the onewallie.com look in both light and dark.
   ============================================================ */

/* ---------- app nav ---------- */
.appnav .in{gap:14px}
.appnav .q-brand .cloudtag{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--mut);
  border:1px solid var(--line);border-radius:99px;padding:2px 8px;letter-spacing:.02em}
.appnav nav{flex-wrap:wrap}

/* ---------- layout ---------- */
.apphead{padding:34px 0 6px}
.apphead h1{font-size:clamp(25px,4vw,36px);letter-spacing:-.03em}
.apphead .sub{color:var(--mut);margin-top:8px;max-width:60ch}
main.wrap{padding-top:8px;padding-bottom:64px}

.apanel{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--panel);
  margin-bottom:18px}
.apanel>.h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:14px}
.apanel h2{font-size:19px;margin:0}
.apanel h3{font-size:16px;margin:0}
.apanel .lead{color:var(--mut);font-size:14.5px;margin:0 0 4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kv{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.kv .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-family:var(--mono)}
.kv .v{font-size:16px;font-weight:600}
.stack{display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:99px;
  border:1px solid var(--line);white-space:nowrap;line-height:1.4}
.badge.real{color:#fff;background:var(--bad);border-color:var(--bad)}
html[data-theme=dark] .badge.real{color:var(--bg)}
.badge.practice{color:var(--acc);background:var(--soft);
  border-color:color-mix(in srgb,var(--acc) 30%,transparent)}
.badge.silentb{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.badge.status{color:var(--mut);background:var(--panel2)}
.badge.status.active{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 30%,transparent);
  background:var(--soft)}

/* ---------- event kind chips ---------- */
.chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.04em;padding:3px 9px;border-radius:99px;border:1px solid var(--line);
  color:var(--mut);text-transform:uppercase;white-space:nowrap}
.chip.payment{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);
  border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.chip.blocked{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);
  border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.chip.approval{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.chip.silent{color:var(--mut);background:var(--panel2)}
.chip.back{color:var(--acc2);background:color-mix(in srgb,var(--acc2) 12%,transparent);
  border-color:color-mix(in srgb,var(--acc2) 30%,transparent)}

/* ---------- tables (extends .ledgertable from wallie.css) ---------- */
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:12px}
.tablescroll .ledgertable{margin:0;min-width:600px}
.tablescroll .ledgertable th{padding:11px 14px}
.tablescroll .ledgertable td{padding:12px 14px;color:var(--ink);vertical-align:top}
.ledgertable td .sub{color:var(--mut);font-size:12px;margin-top:3px}
.ledgertable td.actions{white-space:nowrap}
.ledgertable td.actions .btn-q{margin-right:6px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.flabel{font-size:12px;font-weight:600;color:var(--mut)}
.inp,.field input,.field select,.field textarea{font:inherit;font-size:14px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;
  width:100%;transition:border-color .2s var(--ease)}
.inp:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
.checks{display:flex;flex-wrap:wrap;gap:9px}
.checkitem{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);
  border:1px solid var(--line2);border-radius:99px;padding:7px 13px;cursor:pointer;user-select:none}
.checkitem input{accent-color:var(--acc);margin:0}
.checkitem:hover{border-color:var(--acc)}

/* ---------- notes / status messages ---------- */
.note.ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent);
  background:color-mix(in srgb,var(--ok) 8%,transparent)}
.note.ok b{color:var(--ok)}
.note.bad{border-color:color-mix(in srgb,var(--bad) 35%,transparent);
  background:color-mix(in srgb,var(--bad) 8%,transparent)}
.note.bad b{color:var(--bad)}
.muted-empty{color:var(--mut);font-size:14px;padding:22px 4px;text-align:center}
.loading-state{color:var(--mut);font-size:14px;padding:22px 4px;text-align:center}
.field-error{color:var(--bad);font-size:12px}

/* ---------- copy button (delegated by app.js; mirrors wallie.css .copy) ---------- */
.cbtn{font-family:var(--mono);font-size:11.5px;color:var(--mut);background:transparent;
  border:1px solid var(--line);border-radius:99px;padding:4px 12px;cursor:pointer;
  transition:.2s var(--ease);flex:none}
.cbtn:hover{color:var(--acc);border-color:var(--acc)}
.cbtn.ok{color:var(--acc-ink);background:var(--acc);border-color:var(--acc);transform:scale(1.04)}

/* ---------- single sign-in / standalone card ---------- */
.centerwrap{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:40px 20px}
.authcard{width:100%;max-width:440px;border:1px solid var(--line);border-radius:18px;
  padding:32px;background:var(--panel);box-shadow:var(--shadow-sm)}
.authcard .brandmark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;
  margin-bottom:18px}
.authcard .brandmark i{width:26px;height:26px;border-radius:8px;flex:none;display:grid;
  place-items:center;font-family:var(--mono);font-size:13px;font-weight:700;font-style:normal;color:#fff;
  background:conic-gradient(from 40deg,var(--acc),var(--acc2),var(--acc))}
.authcard h1{font-size:24px;margin:0 0 8px;letter-spacing:-.03em}
.authcard p.lead{color:var(--mut);font-size:14.5px;margin:0 0 20px}
.authcard .btn-q{width:100%;justify-content:center;margin-top:4px}
.authcard .foot{margin-top:20px;font-size:13px;color:var(--mut)}
.authcard .foot a{color:var(--acc)}

/* ---------- slim footer ---------- */
footer.slim{border-top:1px solid var(--line);padding:22px 0;color:var(--mut);font-size:13px}
footer.slim .in{max-width:1100px;margin:0 auto;padding:0 max(22px,4vw);display:flex;gap:14px;
  flex-wrap:wrap;align-items:center;justify-content:space-between}
footer.slim .legal-links{display:flex;gap:14px;flex-wrap:wrap}
footer.slim a{color:var(--mut)}
footer.slim a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:680px){
  .grid2{grid-template-columns:1fr}
  .appnav .in{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .appnav.stuck .in{height:auto}
  .appnav nav{order:3;width:100%;overflow-x:auto;gap:18px;padding-bottom:2px}
}