/* Client portal. Same visual language as the main site, but standalone so a
   change to the sales page can never quietly break a paying client's login. */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}          /* the attribute must beat any display rule */

:root{
  --ink:#0d0d0f; --ink2:#5c5c66; --ink3:#9a9aa4;
  --line:#ececed; --paper:#fff;
  --g1:#ff8fb1; --g2:#ffb26b; --g3:#a78bfa; --g4:#7dd3fc;
  --tap:44px; --gutter:clamp(14px,4vw,34px);
  --ok:#15803d; --okbg:#dcfce7; --warn:#a16207; --warnbg:#fef3c7;
  --bad:#b91c1c; --badbg:#fee2e2;
}

html{-webkit-text-size-adjust:100%}
body{
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--paper);
  min-height:100svh; padding-bottom:calc(40px + env(safe-area-inset-bottom));
}
a{color:inherit}

/* ---------- header ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) var(--gutter) 12px;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; letter-spacing:-.02em}
.brandDot{width:15px;height:15px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g1))}
.topRight{display:flex; align-items:center; gap:8px}
.topPhone{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1.5px solid var(--line); border-radius:999px; padding:8px 14px;
  font-weight:700; font-size:14px; min-height:var(--tap);
}
.topPhone svg{width:15px;height:15px;fill:currentColor;flex:none}

/* ---------- layout ---------- */
.wrap{max-width:720px; margin:0 auto; padding:26px var(--gutter) 0; display:grid; gap:16px}
h1{font-size:clamp(26px,6vw,36px); letter-spacing:-.035em; line-height:1.1}
h2{font-size:15px; letter-spacing:-.01em; margin-bottom:10px}
.lede{color:var(--ink2); font-size:15.5px; max-width:46ch}
.body{font-size:15px; line-height:1.6; white-space:pre-wrap}
.hint{color:var(--ink3); font-size:13px; line-height:1.55}
.hint a{font-weight:700; color:var(--ink2)}
.err{color:var(--bad); font-size:13.5px; font-weight:600; line-height:1.5}
.ok{color:var(--ok); font-size:13.5px; font-weight:600}

.card{border:1.5px solid var(--line); border-radius:16px; padding:18px}

/* ---------- forms ---------- */
.form{display:grid; gap:12px}
.field{display:grid; gap:6px}
.field span{font-size:12px; font-weight:700; letter-spacing:.05em; color:var(--ink3); text-transform:uppercase}
input,textarea,select{
  font:inherit; color:inherit; width:100%;
  border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  background:var(--paper); min-height:var(--tap);
}
textarea{resize:vertical; line-height:1.55}
input:focus,textarea:focus{outline:0; border-color:#c9c9d1}

.btn{
  font:inherit; font-weight:700; cursor:pointer; border:1.5px solid var(--line);
  background:var(--paper); border-radius:999px; padding:11px 20px; min-height:var(--tap);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn.solid{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.ghost{background:var(--paper)}
.btn.wide{width:100%}
.btn.tiny{padding:7px 14px; min-height:36px; font-size:13.5px}
.btn:disabled{opacity:.4; cursor:default}

/* ---------- status ---------- */
.strip{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  padding:7px 13px; font-size:13px; font-weight:700; background:#f4f4f5; color:var(--ink2);
}
.chip.ok{background:var(--okbg); color:var(--ok)}
.chip.warn{background:var(--warnbg); color:var(--warn)}
.chip.bad{background:var(--badbg); color:var(--bad)}

/* ---------- payments ---------- */
.payRow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.payRow:last-child{border-bottom:0}
.payRow .when{flex:1; min-width:150px; font-size:14.5px}
.payRow .when s{display:block; text-decoration:none; color:var(--ink3); font-size:12.5px}
.payRow .amt{font-weight:800; font-size:16px}
.payRow.done .amt{color:var(--ok)}
.payRow.done .when{color:var(--ink3)}

/* ---------- request kinds ---------- */
.kinds{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.kind{
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink2);
  border-radius:999px; padding:9px 15px; min-height:40px;
}
.kind.on{background:var(--ink); color:#fff; border-color:var(--ink)}
#reqForm{display:grid; gap:11px; justify-items:start}
#reqForm textarea{width:100%}

/* ---------- request history ---------- */
.histRow{padding:12px 0; border-bottom:1px solid var(--line)}
.histRow:last-child{border-bottom:0}
.histRow b{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3)}
.histRow p{font-size:14.5px; margin-top:4px; white-space:pre-wrap}

/* The pay button is the one control on this page that moves money, so it never
   shrinks below a full thumb target. On a narrow screen it takes its own line
   rather than being squeezed against the amount. */
.payRow .btn{min-height:var(--tap); font-size:15px}
@media (max-width:520px){
  .payRow{align-items:flex-start}
  .payRow .btn{width:100%; margin-top:4px}
}

@media (max-width:420px){
  .topPhoneNum{display:none}
  .topPhone{padding:8px 12px}
}
@media (max-width:360px){
  .brandName{display:none}
}

/* Card-on-file row. The switch is the client’s own consent, so it is a real
   labelled control, not a subtle toggle they might flip by accident. */
.autoRow{display:grid;gap:12px;margin-bottom:10px}
.toggle{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14.5px;line-height:1.45}
.toggle input{width:20px;height:20px;min-height:0;flex:none;margin-top:1px;accent-color:var(--ink);cursor:pointer}
.toggle span{flex:1}