/* Eastside Spiritual Gifts Assessment — front-end styles.
   Everything is scoped under #ccsg-app so it never fights the active theme.
   Brand: Bebas Neue (headings) + Inter (body); coral #ee5f34 primary,
   warm cream #fef1e4, near-black ink #1c0d0a. */

#ccsg-app{
  --ccsg-bg:#ffffff;
  --ccsg-accent:#ee5f34;
  --ccsg-accent-dark:#d94e26;
  --ccsg-cream:#fef1e4;
  --ccsg-ink:#1c0d0a;
  --ccsg-surface:#fafafa;
  --ccsg-line:#eeeeee;
  --ccsg-gray:#353535;
  --ccsg-head:"Bebas Neue", Impact, sans-serif;
  --ccsg-body:"Inter", Arial, sans-serif;

  max-width:640px;
  margin:0 auto;
  padding:28px 20px 64px;
  background:var(--ccsg-bg);
  color:var(--ccsg-ink);
  font-family:var(--ccsg-body);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
#ccsg-app *,#ccsg-app *::before,#ccsg-app *::after{box-sizing:border-box;}

#ccsg-app .ccsg-inner{width:100%;}

/* ===== screens ===== */
#ccsg-app .ccsg-screen{display:none;}
#ccsg-app .ccsg-screen.ccsg-on{display:block;animation:ccsg-fade .35s ease;}
@keyframes ccsg-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ===== wordmark / eyebrow ===== */
#ccsg-app .ccsg-wordmark{font-family:var(--ccsg-head);font-size:30px;letter-spacing:.06em;color:var(--ccsg-ink);line-height:1;text-transform:uppercase;}
#ccsg-app .ccsg-brandmark{margin-bottom:26px;}
#ccsg-app .ccsg-eyebrow{display:inline-block;font-family:var(--ccsg-body);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ccsg-accent);}

/* ===== intro ===== */
#ccsg-app .ccsg-hero h1{font-family:var(--ccsg-head);font-weight:400;font-size:clamp(44px,9vw,66px);line-height:.95;letter-spacing:.01em;text-transform:uppercase;margin:14px 0 12px;}
#ccsg-app .ccsg-lede{font-size:17px;line-height:1.65;color:var(--ccsg-gray);max-width:40ch;margin:0 0 4px;}
#ccsg-app .ccsg-meta-row{display:flex;gap:10px;margin:26px 0 24px;}
#ccsg-app .ccsg-meta-row>div{flex:1;background:var(--ccsg-cream);border-radius:12px;padding:16px 10px;text-align:center;}
#ccsg-app .ccsg-n{font-family:var(--ccsg-head);font-size:34px;line-height:1;color:var(--ccsg-accent);}
#ccsg-app .ccsg-l{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ccsg-gray);margin-top:6px;}

/* ===== fields ===== */
#ccsg-app .ccsg-field{margin:0 0 16px;}
#ccsg-app .ccsg-field label{display:block;font-size:13px;font-weight:600;margin:0 0 7px;color:var(--ccsg-ink);}
#ccsg-app .ccsg-field label span{font-weight:400;color:var(--ccsg-gray);}
#ccsg-app .ccsg-field input,#ccsg-app .ccsg-field select{width:100%;font-family:var(--ccsg-body);font-size:16px;padding:13px 14px;border:1.5px solid var(--ccsg-line);border-radius:10px;background:#fff;color:var(--ccsg-ink);outline:none;transition:border-color .15s;}
#ccsg-app .ccsg-field input:focus,#ccsg-app .ccsg-field select:focus{border-color:var(--ccsg-accent);}

/* ===== buttons ===== */
#ccsg-app .ccsg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;font-family:var(--ccsg-body);font-size:16px;font-weight:700;letter-spacing:.01em;padding:16px 20px;border:none;border-radius:12px;background:var(--ccsg-accent);color:#fff;cursor:pointer;transition:background .15s,transform .05s;text-decoration:none;}
#ccsg-app .ccsg-btn:hover{background:var(--ccsg-accent-dark);color:#fff;}
#ccsg-app .ccsg-btn:active{transform:translateY(1px);}
#ccsg-app .ccsg-btn:disabled{opacity:.6;cursor:default;}
#ccsg-app .ccsg-btn.ccsg-ghost{background:#fff;color:var(--ccsg-ink);border:1.5px solid var(--ccsg-line);}
#ccsg-app .ccsg-btn.ccsg-ghost:hover{background:var(--ccsg-surface);border-color:#dcdcdc;color:var(--ccsg-ink);}

/* ===== quiz ===== */
#ccsg-app .ccsg-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
#ccsg-app .ccsg-count{font-size:13px;font-weight:600;color:var(--ccsg-gray);}
#ccsg-app .ccsg-bar{height:8px;background:var(--ccsg-line);border-radius:99px;overflow:hidden;margin-bottom:34px;}
#ccsg-app .ccsg-bar i{display:block;height:100%;width:0;background:var(--ccsg-accent);border-radius:99px;transition:width .3s ease;}
#ccsg-app .ccsg-qtext{font-family:var(--ccsg-body);font-weight:600;font-size:clamp(21px,4.4vw,27px);line-height:1.32;margin:0 0 26px;min-height:2.4em;}
#ccsg-app .ccsg-opts{display:flex;flex-direction:column;gap:10px;}
#ccsg-app .ccsg-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:var(--ccsg-body);font-size:16px;font-weight:500;padding:15px 16px;border:1.5px solid var(--ccsg-line);border-radius:12px;background:#fff;color:var(--ccsg-ink);cursor:pointer;transition:border-color .12s,background .12s;}
#ccsg-app .ccsg-opt:hover{border-color:#dcdcdc;background:var(--ccsg-surface);}
#ccsg-app .ccsg-opt.ccsg-sel{border-color:var(--ccsg-accent);background:var(--ccsg-cream);}
#ccsg-app .ccsg-key{flex:none;width:30px;height:30px;border-radius:8px;background:var(--ccsg-surface);border:1.5px solid var(--ccsg-line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--ccsg-gray);}
#ccsg-app .ccsg-opt.ccsg-sel .ccsg-key{background:var(--ccsg-accent);border-color:var(--ccsg-accent);color:#fff;}
#ccsg-app .ccsg-qnav{margin-top:24px;}
#ccsg-app .ccsg-qnav .ccsg-btn{width:auto;padding:11px 20px;font-size:14px;}

/* ===== results ===== */
#ccsg-app .ccsg-results-head{margin-bottom:22px;}
#ccsg-app .ccsg-results-head h2{font-family:var(--ccsg-head);font-weight:400;font-size:clamp(38px,7.5vw,54px);line-height:.98;text-transform:uppercase;margin:12px 0 10px;}
#ccsg-app .ccsg-results-head p{font-size:16px;line-height:1.6;color:var(--ccsg-gray);margin:0;max-width:48ch;}

#ccsg-app .ccsg-card{background:#fff;border:1.5px solid var(--ccsg-line);border-radius:18px;padding:28px 24px;margin-bottom:22px;}
#ccsg-app .ccsg-c-eyebrow{font-family:var(--ccsg-head);font-size:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--ccsg-accent);}
#ccsg-app .ccsg-card h3{font-family:var(--ccsg-head);font-weight:400;font-size:40px;line-height:1;text-transform:uppercase;margin:4px 0 2px;}
#ccsg-app .ccsg-c-sub{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ccsg-gray);margin-bottom:22px;}

#ccsg-app .ccsg-pg{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:14px;background:var(--ccsg-cream);margin-bottom:10px;}
#ccsg-app .ccsg-pg:first-child{background:var(--ccsg-accent);color:#fff;}
#ccsg-app .ccsg-rank{flex:none;font-family:var(--ccsg-head);font-size:30px;line-height:1;width:34px;text-align:center;color:var(--ccsg-accent);}
#ccsg-app .ccsg-pg:first-child .ccsg-rank{color:#fff;opacity:.85;}
#ccsg-app .ccsg-pg-body{flex:1;}
#ccsg-app .ccsg-pg-body h4{font-family:var(--ccsg-body);font-weight:700;font-size:17px;margin:2px 0 5px;}
#ccsg-app .ccsg-ref{font-weight:500;font-size:12px;opacity:.7;}
#ccsg-app .ccsg-pg-body p{font-size:14px;line-height:1.5;margin:0;color:var(--ccsg-gray);}
#ccsg-app .ccsg-pg:first-child .ccsg-pg-body p{color:#fff;opacity:.92;}
#ccsg-app .ccsg-pg-score{flex:none;font-family:var(--ccsg-head);font-size:28px;line-height:1;color:var(--ccsg-accent);}
#ccsg-app .ccsg-pg-score span{font-size:12px;font-family:var(--ccsg-body);opacity:.6;}
#ccsg-app .ccsg-pg:first-child .ccsg-pg-score{color:#fff;}

#ccsg-app .ccsg-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ccsg-gray);margin:26px 0 14px;}
#ccsg-app .ccsg-row{display:flex;align-items:center;gap:12px;padding:7px 0;}
#ccsg-app .ccsg-row.ccsg-toprow .ccsg-g{font-weight:700;color:var(--ccsg-ink);}
#ccsg-app .ccsg-g{flex:none;width:120px;font-size:13px;color:var(--ccsg-gray);}
#ccsg-app .ccsg-track{flex:1;height:9px;background:var(--ccsg-line);border-radius:99px;overflow:hidden;}
#ccsg-app .ccsg-track i{display:block;height:100%;background:var(--ccsg-accent);border-radius:99px;opacity:.55;}
#ccsg-app .ccsg-row.ccsg-toprow .ccsg-track i{opacity:1;}
#ccsg-app .ccsg-v{flex:none;width:26px;text-align:right;font-size:13px;font-weight:600;color:var(--ccsg-gray);}

#ccsg-app .ccsg-ministry{margin-top:6px;}
#ccsg-app .ccsg-ministry-item{padding:14px 16px;border:1.5px solid var(--ccsg-line);border-radius:12px;margin-bottom:10px;background:var(--ccsg-surface);}
#ccsg-app .ccsg-ministry-name{font-family:var(--ccsg-body);font-weight:700;font-size:16px;margin-bottom:3px;}
#ccsg-app .ccsg-ministry-why{font-size:13px;color:var(--ccsg-gray);line-height:1.45;}
#ccsg-app .ccsg-ministry-none{font-size:14px;color:var(--ccsg-gray);}

#ccsg-app .ccsg-card-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--ccsg-line);}
#ccsg-app .ccsg-date{font-size:12px;color:var(--ccsg-gray);}

/* ===== primary CTA (join a team) ===== */
#ccsg-app .ccsg-cta{background:var(--ccsg-cream);border-radius:18px;padding:26px 24px;margin-bottom:18px;text-align:center;}
#ccsg-app .ccsg-cta h4{font-family:var(--ccsg-head);font-weight:400;font-size:32px;line-height:1;text-transform:uppercase;margin:0 0 8px;}
#ccsg-app .ccsg-cta p{font-size:15px;line-height:1.6;color:var(--ccsg-gray);margin:0 auto 18px;max-width:42ch;}

/* ===== email capture (secondary) ===== */
#ccsg-app .ccsg-connect{border:1.5px solid var(--ccsg-line);border-radius:16px;padding:22px 22px;margin-bottom:18px;}
#ccsg-app .ccsg-connect h4{font-family:var(--ccsg-body);font-weight:700;font-size:17px;margin:0 0 6px;}
#ccsg-app .ccsg-connect>p{font-size:14px;line-height:1.55;color:var(--ccsg-gray);margin:0 0 16px;}
#ccsg-app .ccsg-connect.ccsg-sent{opacity:.75;}
#ccsg-app .ccsg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
#ccsg-app .ccsg-connect-msg{font-size:14px;margin-top:10px;}
#ccsg-app .ccsg-connect-msg.ccsg-ok{color:#1a7f45;}
#ccsg-app .ccsg-connect-msg.ccsg-err{color:#c0392b;}

/* ===== actions ===== */
#ccsg-app .ccsg-actions{display:flex;gap:10px;}
#ccsg-app .ccsg-actions .ccsg-btn{font-size:14px;padding:13px 16px;}

@media (max-width:420px){
  #ccsg-app .ccsg-g{width:96px;}
  #ccsg-app .ccsg-actions{flex-direction:column;}
}