/* ═══ #join-class/<code> — a parent signs their children up to a class ═══
   js/pages/join-class.js. Phone first (a WhatsApp link opens it): one column,
   460px at most, the coach as the hero once the password is right. The class
   is a scorecard (design-system §7: something is being tallied — when, where,
   places, price), the form one paper card. */
#pg-joinclass{background:var(--fog);}
.jc-wrap{max-width:460px;margin:0 auto;padding-bottom:64px;}
.jc-hero{background:var(--ink);color:#fff;padding:28px 20px 30px;text-align:center;
  background-image:var(--horizon-dark);background-repeat:no-repeat;
  background-position:bottom;background-size:100% 44px;}
.jc-ava{position:relative;width:68px;height:68px;border-radius:50%;overflow:hidden;background:var(--mint);color:var(--fairway);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.35rem;font-weight:560;margin:0 auto 12px;}
.jc-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.jc-eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green3);}
.jc-h1{font-family:var(--serif);font-optical-sizing:auto;font-size:1.6rem;font-weight:600;line-height:1.15;
  letter-spacing:-.015em;margin:6px 0 0;color:#fff;}
.jc-sub{font-size:var(--fs-meta);color:var(--sage);margin-top:6px;}
.jc-main{padding:18px 16px 0;display:flex;flex-direction:column;gap:14px;}

.jc-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px 16px;box-shadow:var(--shadow);}
.jc-lock{width:36px;height:36px;border-radius:50%;background:var(--mint);color:var(--fairway);display:grid;place-items:center;margin-bottom:12px;}
.jc-lock svg{width:18px;height:18px;}
.jc-l{display:block;font-size:var(--fs-meta);font-weight:600;color:var(--ink);margin:12px 0 6px;}
.jc-l:first-of-type{margin-top:0;}
.jc-opt{font-weight:450;color:var(--slate);}
.jc-in{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:1rem;padding:12px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);}
.jc-in:focus{outline:2px solid var(--fairway);outline-offset:-1px;border-color:var(--fairway);}
#jcPw{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:.04em;}
.jc-hint{font-size:.8rem;color:var(--slate);line-height:1.5;margin:6px 0 0;}
.jc-hint.c{text-align:center;margin-top:10px;}
.jc-err{font-size:var(--fs-meta);color:var(--red);line-height:1.45;margin:10px 0 0;min-height:0;}
.jc-err:empty{display:none;}
.jc-cta{width:100%;margin-top:14px;font-family:var(--sans);font-size:.98rem;font-weight:600;padding:14px;
  border-radius:30px;border:1px solid var(--fairway);background:var(--fairway);color:#fff;cursor:pointer;}
.jc-cta:hover{background:var(--fairway-2);}
.jc-cta:active{transform:translateY(1px);}
.jc-cta[disabled]{opacity:.55;cursor:default;transform:none;}

.jc-sec{display:flex;align-items:center;gap:10px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin:18px 0 2px;}
.jc-sec::after{content:"";flex:1;height:1px;background:var(--line);}
.jc-sec:first-child{margin-top:0;}
.jc-kid{display:flex;gap:8px;align-items:center;margin-top:8px;}
.jc-kid .jc-in:first-child{flex:1;min-width:0;}
.jc-age{width:84px;flex:none;font-family:var(--mono);font-feature-settings:"tnum";padding:12px 8px;}
.jc-rm{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--slate);font-size:1.2rem;line-height:1;cursor:pointer;}
.jc-rm:hover{color:var(--red);border-color:var(--red);}
.jc-add{margin-top:10px;background:none;border:none;padding:6px 0;font-family:var(--sans);font-size:var(--fs-ui);
  font-weight:600;color:var(--fairway);cursor:pointer;}

/* the class, as a scorecard */
.jc-class{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;}
.jc-class-h{background:var(--ink);color:#fff;font-family:var(--serif);font-size:1.05rem;font-weight:600;
  text-align:center;padding:11px 14px;line-height:1.3;}
.jc-desc{font-size:var(--fs-ui);color:var(--slate);line-height:1.55;margin:0;padding:12px 14px 0;}
.jc-rows{padding:4px 14px 6px;}
.jc-row{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px dashed var(--line);}
.jc-row:last-child{border-bottom:none;}
.jc-row .k{flex:none;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);}
.jc-row .dots{flex:1;min-width:12px;border-bottom:1px dotted var(--sage);transform:translateY(-4px);}
.jc-row .v{flex:none;max-width:68%;text-align:right;font-size:var(--fs-ui);font-weight:550;color:var(--ink);overflow-wrap:anywhere;}
.jc-row .v.mono{font-family:var(--mono);font-feature-settings:"tnum";font-weight:500;color:var(--fairway);}
.jc-pay{margin:0;padding:10px 14px 12px;background:var(--mint);font-size:.8rem;color:var(--ink);line-height:1.45;}

/* done */
.jc-done{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 18px 18px;text-align:center;box-shadow:var(--shadow);}
.jc-seal{width:52px;height:52px;border-radius:50%;background:var(--mint);color:var(--fairway);display:grid;place-items:center;margin:0 auto 12px;}
.jc-seal svg{width:24px;height:24px;}
.jc-done-h{font-family:var(--serif);font-size:1.45rem;font-weight:600;margin:0 0 6px;color:var(--ink);}
.jc-done-p{font-size:var(--fs-body);color:var(--ink);line-height:1.55;margin:0 0 14px;}
.jc-list{list-style:none;margin:0;padding:0;text-align:left;border-top:1px solid var(--line);}
.jc-list li{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);}
.jc-list .tk{width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--fairway);display:grid;place-items:center;flex:none;}
.jc-list .tk svg{width:12px;height:12px;}
.jc-list .nm{flex:1;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.jc-list .st{font-size:.8rem;color:var(--slate);}
.jc-done-meta{font-size:.8rem;color:var(--slate);margin:12px 0 0;}

@media (min-width:700px){
  .jc-wrap{padding-top:32px;}
  .jc-hero{border-radius:20px 20px 0 0;}
  .jc-main{padding:18px 0 0;}
}

/* ── coach side: the class page's "Parent sign-up link" card (groups.js) ── */
.csl-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;}
.csl-card h2{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin:0 0 4px;color:var(--ink);}
.csl-card p{font-size:var(--fs-meta);color:var(--slate);line-height:1.5;margin:0 0 10px;}
.csl-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:baseline;margin:0 0 12px;}
.csl-kv .k{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);}
.csl-kv .v{font-family:var(--mono);font-feature-settings:"tnum";font-size:.86rem;color:var(--ink);overflow-wrap:anywhere;}
.csl-acts{display:flex;flex-wrap:wrap;gap:8px;}
.csl-acts .btn-mini{margin:0;}
.csl-pw{display:flex;gap:8px;align-items:center;margin:0 0 10px;}
.csl-pw input{flex:1;min-width:0;font-family:var(--mono);font-size:.95rem;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);}
.csl-pw input:focus{outline:2px solid var(--fairway);outline-offset:-1px;border-color:var(--fairway);}
.ge-pwrow{display:flex;gap:8px;align-items:center;}
.ge-pwrow .ge-i{flex:1;min-width:0;font-family:var(--mono);}
.clp-signup{margin-bottom:16px;}
.gr-body .csl-card, #groupRosterBody .csl-card{margin-bottom:12px;}

/* the account link, after a sign-up (migration_class_signup_account.sql) */
.jc-acct{margin-top:12px;background:var(--mint);border:1px dashed var(--fairway);border-radius:var(--r-sm);padding:13px 14px;text-align:left;}
.jc-acct strong{display:block;font-size:var(--fs-ui);color:var(--ink);margin-bottom:4px;}
.jc-acct p{margin:0;font-size:var(--fs-meta);line-height:1.5;color:var(--ink);}
.jc-acct .mono{font-family:var(--mono);font-feature-settings:"tnum";overflow-wrap:anywhere;}
.jc-cta.jc-cta-ghost{background:var(--paper);color:var(--fairway);margin-top:12px;padding:11px;}
.jc-cta.jc-cta-ghost:hover{background:var(--paper);border-color:var(--fairway-2);}