/* Payments tab (payments.js): the schedule with Make a payment under it, and the
   paperwork beside it. Loads after studio.css. */
#tg-client-portal .pay-panel { --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --paid:#18733c; --late:#9f261c; --tgblue:#2857cf; }
#tg-client-portal .pay-label { margin:0 0 18px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
#tg-client-portal .pay-quiet { color:var(--muted); max-width:34ch; }

/* ---------- The schedule: totals, progress bar and each payment in order ---------- */
#tg-client-portal .pay-hero { max-width:720px; margin:clamp(8px,2vw,20px) 0 0; padding:clamp(24px,3.5vw,36px); border:1px solid #e3e8f0; border-radius:24px; background:#fff; box-shadow:0 18px 40px #1b3a8a12; }
#tg-client-portal .pay-event { font-size:clamp(24px,3vw,30px); font-weight:800; line-height:1.15; letter-spacing:-.03em; color:var(--ink); }
#tg-client-portal .pay-total { margin-top:6px; font-size:18px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
#tg-client-portal .pay-hero > .pay-quiet { margin-top:10px; }
#tg-client-portal .pay-bar { height:12px; margin-top:26px; border-radius:999px; background:#e8edf5; overflow:hidden; }
/* Grows to what's been paid the first time the tab opens. */
#tg-client-portal .pay-bar span { display:block; width:0; height:100%; border-radius:inherit; background:var(--ink); transition:width 1.4s cubic-bezier(.22,.8,.26,1) .1s; }
#tg-client-portal .pay-panel.is-filled .pay-bar span { width:var(--pct); }
#tg-client-portal .pay-split { display:flex; justify-content:space-between; gap:16px; margin-top:26px; }
#tg-client-portal .pay-split > div:last-child { text-align:right; }
#tg-client-portal .pay-split > div > span { display:block; font-size:16px; color:var(--ink); }
#tg-client-portal .pay-split strong { display:block; margin-top:4px; font-size:clamp(34px,5vw,46px); font-weight:800; line-height:1.05; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
#tg-client-portal .pay-cents { font-size:.62em; letter-spacing:-.01em; }
#tg-client-portal .sched { margin:30px calc(-1 * clamp(24px,3.5vw,36px)) 0; padding:26px clamp(24px,3.5vw,36px) 6px; border-top:10px solid #f2f5fa; }
#tg-client-portal .sched-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
#tg-client-portal .sched-head h2 { font-size:21px; font-weight:700; letter-spacing:-.02em; }
#tg-client-portal .sched-pill { flex:none; padding:8px 13px; border-radius:10px; background:#e8effd; color:#1d44b4; font-size:14px; font-weight:700; white-space:nowrap; }
#tg-client-portal .sched-pill.is-late { background:#fbecea; color:var(--late); }
#tg-client-portal .sched-pill.is-done { background:#eaf5ed; color:#145d32; }
#tg-client-portal .sched-list { list-style:none; margin:0; padding:0; }
/* A rail of dots: one per payment, joined by a line that turns green once paid. */
#tg-client-portal .sched-row { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr) auto; column-gap:14px; align-items:start; padding-bottom:28px; }
#tg-client-portal .sched-row:not(:last-child)::before { content:''; position:absolute; left:19px; top:34px; bottom:-2px; width:2px; background:#d7dde7; }
#tg-client-portal .sched-row.is-paid:not(:last-child)::before { background:#9ed8b4; }
#tg-client-portal .sched-dot { position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; margin:0 3px; border:2px solid #cfd6e1; border-radius:50%; background:#fff; }
#tg-client-portal .is-paid .sched-dot { border-color:#bfe8cf; background:#bfe8cf; color:var(--ink); }
#tg-client-portal .sched-dot svg { width:18px; height:18px; stroke-width:2.8; }
#tg-client-portal .is-next .sched-dot { border:3px solid var(--ink); }
#tg-client-portal .is-next.is-late .sched-dot { border-color:var(--late); }
#tg-client-portal .sched-text { display:grid; gap:4px; padding-top:4px; min-width:0; }
#tg-client-portal .sched-text strong { font-size:19px; font-weight:700; line-height:1.25; color:var(--ink); }
#tg-client-portal .sched-text span { font-size:16px; color:#3b424d; }
#tg-client-portal .sched-amt { padding-top:4px; font-size:19px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
#tg-client-portal .is-late .sched-text strong { color:var(--late); }
#tg-client-portal .is-later :is(.sched-text strong,.sched-text span,.sched-amt) { color:#687180; }
/* Make a payment: ink at rest. On hover or keyboard focus the hologram foil
   (DESIGN.md "The Foil Is a Photograph Rule", holo-stack recipe) wipes across
   from the left and the label turns ink over it. */
#tg-client-portal .pay-hero { --holo-img:url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif'); --holo:linear-gradient(100deg,#ffd6e8 0%,#ffe9d6 20%,#fdffd6 40%,#d6ffe4 60%,#d6ecff 80%,#e6d6ff 100%); }
#tg-client-portal button.pay-cta { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:60px; margin:14px 0 6px; padding:0 20px; border:1px solid var(--ink); border-radius:16px; background:var(--ink); color:#fff; font-size:18px; font-weight:700; cursor:pointer; transition:color .45s cubic-bezier(.22,.8,.26,1), transform .4s cubic-bezier(.22,.8,.26,1); }
#tg-client-portal button.pay-cta::before { content:''; position:absolute; inset:0; z-index:-1; background-image:var(--holo-img), var(--holo); background-size:220% 220%, 100% 100%; background-position:0% 50%, 0% 50%; clip-path:inset(0 100% 0 0); transition:clip-path .6s cubic-bezier(.22,.8,.26,1); animation:pay-holo-drift 9s ease-in-out infinite alternate; }
#tg-client-portal button.pay-cta:is(:hover,:focus-visible,[aria-expanded=true]) { color:var(--ink); }
#tg-client-portal button.pay-cta:is(:hover,:focus-visible,[aria-expanded=true])::before { clip-path:inset(0 0 0 0); }
#tg-client-portal button.pay-cta:hover { transform:translateY(-3px); }
#tg-client-portal button.pay-cta:active { transform:translateY(0); }
@keyframes pay-holo-drift { from { background-position:0% 50%, 0% 50%; } to { background-position:100% 50%, 100% 50%; } }
#tg-client-portal .pay-ways-note { margin:0; padding:16px 18px; border-radius:12px; background:#f2f5fa; font-size:16px; color:var(--ink); }
#tg-client-portal .pay-ways-note a { font-weight:700; }


/* ---------- Layout: schedule on the left, paperwork beside it ---------- */
#tg-client-portal .pay-layout { display:grid; grid-template-columns:minmax(0,640px) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start; margin-top:clamp(8px,2vw,20px); }
#tg-client-portal .pay-main { min-width:0; }
#tg-client-portal .pay-hero { max-width:none; margin:0; }
#tg-client-portal .pay-papers-wrap { min-width:0; padding-top:8px; }

/* An unpaid deposit: dashed dot, no date. */
#tg-client-portal .is-pending .sched-dot { border-style:dashed; border-color:#9aa3b1; }
#tg-client-portal .is-pending.is-next .sched-dot { border:3px dashed var(--ink); }

/* Make a payment: the button turns its arrow and the passes slide open beneath it. */
#tg-client-portal button.pay-cta svg { width:20px; height:20px; stroke-width:2.4; transition:transform .35s; }
#tg-client-portal button.pay-cta[aria-expanded=true] svg { transform:rotate(180deg); }
#tg-client-portal .pay-ways { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.22,.8,.26,1); }
#tg-client-portal .pay-ways.is-open { grid-template-rows:1fr; }
#tg-client-portal .pay-ways-inner { overflow:hidden; }
#tg-client-portal .pay-ways.is-open .pay-ways-inner { padding-top:18px; }
#tg-client-portal .pay-ways .pay-wallet { max-width:none; }

/* ---------- The wallet ---------- */
#tg-client-portal .pay-wallet { max-width:440px; }
#tg-client-portal .pay-pass { position:relative; z-index:calc(var(--i) + 1); border-radius:18px; color:#fff; overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0,#4f7ae0 0,#0000 60%), repeating-radial-gradient(circle at 115% 40%,#ffffff12 0 1px,#0000 1px 7px), linear-gradient(160deg,#2350c4,#0e2366);
  box-shadow:0 -8px 18px #0e236633, inset 0 1px 0 #ffffff40; transition:transform .45s cubic-bezier(.22,.8,.26,1); }
#tg-client-portal .pay-pass + .pay-pass { margin-top:-20px; }
#tg-client-portal .pay-pass.is-silver { color:var(--ink); background:radial-gradient(120% 90% at 100% 0,#ffffff 0,#0000 55%), repeating-radial-gradient(circle at 115% 40%,#1d44b40d 0 1px,#0000 1px 7px), linear-gradient(160deg,#eef2f8,#bfcadb); box-shadow:0 -8px 18px #0e236624, inset 0 1px 0 #fff; }
#tg-client-portal .pay-pass:not(.is-open):hover { transform:translateY(-6px); }
#tg-client-portal .pass-head { display:flex; width:100%; min-height:78px; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 22px 26px; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
#tg-client-portal .pay-pass.is-open .pass-head { cursor:default; }
/* No box when a pass or the button is clicked or tapped (the theme draws one on
   any focused button). Keyboard users still get a ring, drawn inside the pass
   because its rounded corners would clip one outside. */
#tg-client-portal :is(.pass-head,button.pay-cta):focus:not(:focus-visible) { outline:none; box-shadow:none; }
#tg-client-portal .pass-head:focus-visible { outline:3px solid #fff; outline-offset:-6px; border-radius:16px; }
#tg-client-portal .is-silver .pass-head:focus-visible { outline-color:#1f55d7; }
#tg-client-portal button.pay-cta:focus-visible { outline:3px solid #1f55d7; outline-offset:4px; }
#tg-client-portal .pass-name { font:italic 900 26px/1 Archivo,Inter,Arial,sans-serif; letter-spacing:-.02em; }
#tg-client-portal .pass-detail { font-size:14px; font-weight:600; opacity:.8; overflow-wrap:anywhere; text-align:right; padding-top:6px; }
#tg-client-portal .pass-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.22,.8,.26,1); }
#tg-client-portal .pay-pass.is-open .pass-body { grid-template-rows:1fr; }
#tg-client-portal .pass-inner { overflow:hidden; display:grid; justify-items:center; gap:10px; text-align:center; }
#tg-client-portal .pay-pass.is-open .pass-inner { padding:0 22px 26px; }
#tg-client-portal .pass-qr { display:block; width:min(220px,100%); padding:12px; border-radius:14px; background:#fff; box-shadow:0 8px 20px #0e236640; }
#tg-client-portal .pass-qr img { display:block; width:100%; aspect-ratio:1; object-fit:contain; }
#tg-client-portal .pass-inner p { font-size:14px; opacity:.85; }
#tg-client-portal .pass-send strong { font-weight:700; opacity:1; }
#tg-client-portal a.pass-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin-top:4px; padding:0 22px; border-radius:10px; background:#fff; color:#1d44b4; font-weight:700; text-decoration:none; }
#tg-client-portal .is-silver a.pass-link { background:#1f55d7; color:#fff; }
#tg-client-portal a.pass-link svg { width:18px; height:18px; }

/* ---------- The papers ---------- */
#tg-client-portal .pay-papers { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:28px 22px; }
#tg-client-portal .pay-paper { display:grid; justify-items:start; gap:14px; min-width:0; }
#tg-client-portal .paper-sheet { position:relative; display:block; width:124px; aspect-ratio:8.5/11; padding:12px 12px 0; background:#fdfdfb; border:1px solid #dcdfe4; box-shadow:0 1px 0 #fff inset, 3px 4px 0 -1px #f4f5f7, 3px 4px 0 0 #dcdfe4, 0 12px 20px #1b3a8a1a; color:#1d1f22; text-decoration:none; transition:transform .4s cubic-bezier(.22,.8,.26,1), box-shadow .4s; }
#tg-client-portal .is-slip .paper-sheet { width:92px; aspect-ratio:3/5; --z:6px; box-shadow:none; border:0; filter:drop-shadow(0 8px 10px #1b3a8a22);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat, conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2 * var(--z)) var(--z) repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat, conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2 * var(--z)) var(--z) repeat-x; }
#tg-client-portal .pay-paper:hover .paper-sheet { transform:translateY(-6px) rotate(-2deg); }
#tg-client-portal .paper-kind { display:block; font:600 9px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; }
#tg-client-portal .paper-lines { display:block; height:52%; margin-top:10px; background:repeating-linear-gradient(#0000 0 5px,#c9cdd4 5px 6px); -webkit-mask:linear-gradient(90deg,#000 70%,#0006); mask:linear-gradient(90deg,#000 70%,#0006); }
#tg-client-portal .paper-sig { position:absolute; left:12px; bottom:12px; width:70%; fill:none; stroke:#1d44b4; stroke-width:1.6; stroke-linecap:round; }
#tg-client-portal .paper-sig::after { content:none; }
#tg-client-portal .paper-mark { position:absolute; left:50%; bottom:18px; transform:translateX(-50%) rotate(-10deg); padding:1px 5px; border:1.5px solid var(--paid); border-radius:3px; font:600 9px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--paid); opacity:.85; }
#tg-client-portal .paper-cap { display:grid; gap:2px; min-width:0; }
#tg-client-portal .paper-cap strong { font-size:15px; overflow-wrap:anywhere; }
#tg-client-portal .paper-cap > span:not(.paper-actions) { font-size:13px; color:var(--muted); }
#tg-client-portal .paper-actions { display:flex; gap:8px; margin-top:8px; }
#tg-client-portal .paper-actions a { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid #c3cde0; border-radius:10px; background:#fff; font-size:14px; font-weight:650; color:var(--tgblue); text-decoration:none; transition:background .2s, border-color .2s; }
#tg-client-portal .paper-actions a:hover { background:#edf2fc; border-color:#a5b9e5; }

@media (max-width:900px) {
  #tg-client-portal .pay-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px) {
  #tg-client-portal .pay-hero { border-radius:20px; }
  #tg-client-portal .sched-row { grid-template-columns:34px minmax(0,1fr) auto; column-gap:12px; }
  #tg-client-portal .sched-dot { width:30px; height:30px; margin:0 2px; }
  #tg-client-portal .sched-row:not(:last-child)::before { left:16px; top:30px; }
  #tg-client-portal :is(.sched-text strong,.sched-amt) { font-size:17px; }
  #tg-client-portal .sched-text span { font-size:15px; }
  #tg-client-portal .pay-papers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 16px; }
}

@media (prefers-reduced-motion:reduce) {
  #tg-client-portal :is(.pay-bar span,button.pay-cta) { transition:none; }
  #tg-client-portal button.pay-cta::before { animation:none; transition:none; }
  #tg-client-portal :is(.pay-pass,.pass-body,.paper-sheet,.pay-ways,button.pay-cta svg) { transition:none; }
}