/* ==========================================================================
   Coaching Portal — one stylesheet for every module.
   Tokens match dhananjayjha.com. Change them here and the portal follows.
   ========================================================================== */

:root{
  --cp-bk:#080808; --cp-bk2:#0f0f0f; --cp-bk3:#161616; --cp-bk4:#1e1e1e;
  --cp-gd:#C8A96E; --cp-gdl:#e2c98a;
  --cp-gdd:rgba(200,169,110,.15); --cp-gdb:rgba(200,169,110,.25);
  --cp-red:#FF0000; --cp-redg:rgba(255,0,0,.35);
  --cp-t1:#fff; --cp-t2:rgba(255,255,255,.7); --cp-t3:rgba(255,255,255,.45); --cp-t4:rgba(255,255,255,.2);
  --cp-br:rgba(255,255,255,.08);
  --cp-fh:'Fira Sans','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --cp-fb:'Roboto','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --cp-ease:cubic-bezier(.25,.46,.45,.94);
}

body.cp-body{margin:0;background:var(--cp-bk);color:var(--cp-t1);font-family:var(--cp-fb)}

.cp-portal,.cp-panel{
  max-width:760px;margin:0 auto;padding:0 20px 80px;
  font-family:var(--cp-fb);font-size:16px;line-height:1.6;color:var(--cp-t1);
  text-align:left;letter-spacing:normal;text-transform:none;
}
.cp-portal *,.cp-portal *::before,.cp-portal *::after,
.cp-panel *,.cp-panel *::before,.cp-panel *::after{box-sizing:border-box}
.cp-portal :focus-visible,.cp-panel :focus-visible{outline:2px solid var(--cp-gd);outline-offset:3px}
.cp-portal-module{padding-top:24px}

/* ---------- shared type ---------- */
.cp-lbl{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--cp-fh);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cp-gd);margin-bottom:16px;
}
.cp-lbl::before{content:'';width:24px;height:1px;background:var(--cp-gd)}
.cp-h1{
  font-family:var(--cp-fh);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.15;margin:0 0 10px;
}
.cp-em{color:var(--cp-red);font-style:italic}
.cp-lede p{font-size:1.02rem;line-height:1.75;color:var(--cp-t2);margin:0 0 18px}
.cp-lede .cp-lede-fine{color:var(--cp-t3);font-size:.88rem}
.cp-back{
  display:inline-block;font-family:var(--cp-fh);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cp-t3);
  text-decoration:none;margin-bottom:32px;transition:color .2s;
}
.cp-back:hover{color:var(--cp-gd)}

/* ---------- buttons ---------- */
.cp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--cp-fh);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 34px;border-radius:4px;text-decoration:none;
  transition:all .3s var(--cp-ease);
}
.cp-btn-r{background:var(--cp-red);color:#fff;border:2px solid var(--cp-red)}
.cp-btn-r:hover{background:#c00;border-color:#c00;box-shadow:0 0 32px 0 var(--cp-redg);transform:translateY(-2px)}
.cp-btn-g{background:transparent;color:var(--cp-gd);border:2px solid var(--cp-gdb)}
.cp-btn-g:hover{background:var(--cp-gdd);border-color:var(--cp-gd);transform:translateY(-2px)}
.cp-btn[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.cp-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:8px}
.cp-saved{margin-left:auto;font-size:.72rem;color:var(--cp-t3);opacity:0;transition:opacity .3s}
.cp-saved.show{opacity:1}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.cp-head{padding:56px 0 40px;border-bottom:1px solid var(--cp-br);margin-bottom:36px}
.cp-head-sub{margin:6px 0 0;color:var(--cp-t3);font-size:.9rem}

.cp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}

.cp-tile{
  display:block;text-decoration:none;color:inherit;
  background:var(--cp-bk2);border:1px solid var(--cp-br);border-radius:6px;
  padding:24px 24px 20px;position:relative;overflow:hidden;
  transition:border-color .3s var(--cp-ease),background .3s var(--cp-ease),transform .3s var(--cp-ease);
}
.cp-tile::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--cp-gd);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--cp-ease);
}
a.cp-tile:hover{background:var(--cp-bk3);border-color:var(--cp-gdb);transform:translateY(-2px)}
a.cp-tile:hover::before{transform:scaleX(1)}

.cp-tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cp-tile-icon{display:block;color:var(--cp-gd);opacity:.75}
.cp-tile-icon svg{width:22px;height:22px;display:block}

.cp-tag{
  font-family:var(--cp-fh);font-size:.6rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;border-radius:3px;
  background:var(--cp-bk4);color:var(--cp-t3);border:1px solid var(--cp-br);
}
.cp-state-not_started .cp-tag{color:var(--cp-gdl);border-color:var(--cp-gdb);background:var(--cp-gdd)}
.cp-state-due_again  .cp-tag{color:#fff;background:var(--cp-red);border-color:var(--cp-red)}
.cp-state-in_progress .cp-tag{color:var(--cp-gdl);border-color:var(--cp-gdb)}
.cp-state-complete   .cp-tag{color:var(--cp-t2)}

.cp-tile-h{font-family:var(--cp-fh);font-size:1.08rem;font-weight:700;margin:0 0 7px;line-height:1.3}
.cp-tile-blurb{margin:0 0 20px;font-size:.88rem;line-height:1.6;color:var(--cp-t3)}
.cp-tile-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:.74rem;color:var(--cp-t3);padding-top:14px;border-top:1px solid var(--cp-br);
}
.cp-tile-go{margin-left:auto;font-family:var(--cp-fh);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cp-gd)}
.cp-tile-off{opacity:.42}
.cp-tile-off .cp-tile-h{color:var(--cp-t2)}

.cp-foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--cp-br);
  font-size:.78rem;color:var(--cp-t3);
}
.cp-foot a{color:var(--cp-t3);text-decoration:underline;text-underline-offset:3px}
.cp-foot a:hover{color:var(--cp-gd)}

/* ==========================================================================
   PANELS — login and registration
   ========================================================================== */
.cp-panel{max-width:520px;padding-top:56px}
.cp-panel-h{font-family:var(--cp-fh);font-size:1.5rem;font-weight:700;margin:0 0 8px}
.cp-panel-sub{color:var(--cp-t3);font-size:.9rem;margin:0 0 26px}
.cp-panel-foot{margin-top:22px;font-size:.85rem;color:var(--cp-t3)}
.cp-panel-foot a{color:var(--cp-gd);text-decoration:none;border-bottom:1px solid var(--cp-gdb)}
.cp-alert{
  background:rgba(255,0,0,.08);border:1px solid rgba(255,0,0,.3);border-radius:4px;
  padding:13px 15px;margin-bottom:20px;font-size:.88rem;line-height:1.55;color:#ffb3b3;
}

/* WordPress's own login form, restyled */
.cp-panel .login-username,.cp-panel .login-password{margin-bottom:14px}
.cp-panel label{display:block;font-family:var(--cp-fh);font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cp-t3);margin-bottom:7px}
.cp-panel .login-remember label{text-transform:none;letter-spacing:normal;font-family:var(--cp-fb);
  font-size:.85rem;color:var(--cp-t3);display:flex;align-items:center;gap:8px}
.cp-panel .login-remember{margin:16px 0 20px}
.cp-panel .login-submit input{
  font-family:var(--cp-fh);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--cp-red);color:#fff;border:2px solid var(--cp-red);
  padding:15px 34px;border-radius:4px;cursor:pointer;width:auto;
}

/* ==========================================================================
   FORM CONTROLS — shared by every module
   ========================================================================== */
.cp-field{display:block;margin-bottom:14px}
.cp-flab{
  display:block;font-family:var(--cp-fh);font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cp-t3);margin-bottom:7px;
}
.cp-portal input[type=text],.cp-portal input[type=email],.cp-portal input[type=number],
.cp-portal input[type=password],.cp-portal textarea,.cp-portal select,
.cp-panel input[type=text],.cp-panel input[type=email],.cp-panel input[type=password]{
  display:block;width:100%;background:var(--cp-bk2);border:1px solid var(--cp-br);
  border-radius:4px;padding:13px 14px;font-size:.95rem;font-family:var(--cp-fb);
  color:var(--cp-t1);box-shadow:none;-webkit-appearance:none;appearance:none;
  transition:border-color .25s var(--cp-ease);
}
.cp-portal input:focus,.cp-portal textarea:focus,.cp-portal select:focus,
.cp-panel input:focus{border-color:var(--cp-gd);outline:none}
.cp-portal textarea{min-height:116px;resize:vertical;line-height:1.6}
.cp-portal select{
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.45) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.45) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px;background-repeat:no-repeat;
}
.cp-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ==========================================================================
   MODULE SCREENS
   ========================================================================== */
.cp-screen{display:none}
.cp-screen.on{display:block;animation:cpIn .35s var(--cp-ease) both}
@keyframes cpIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cp-screen.on{animation:none}}

.cp-prog{display:flex;gap:5px;margin-bottom:10px}
.cp-seg{flex:1;height:2px;background:var(--cp-br);transition:background .3s var(--cp-ease)}
.cp-seg.done{background:var(--cp-gdb)}
.cp-seg.now{background:var(--cp-gd)}
.cp-progmeta{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.72rem;color:var(--cp-t3);margin-bottom:38px}

.cp-sechead{position:relative;padding-bottom:22px;border-bottom:1px solid var(--cp-br);margin-bottom:36px}
.cp-secn{font-family:var(--cp-fh);font-size:4rem;font-weight:700;line-height:1;
  color:rgba(255,255,255,.04);position:absolute;top:-8px;right:0;pointer-events:none}
.cp-sect{font-family:var(--cp-fh);font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;line-height:1.2}
.cp-secnote{margin:14px 0 0;font-size:.9rem;color:var(--cp-t3);line-height:1.7;max-width:46ch}

.cp-q{margin-bottom:44px;scroll-margin-top:24px}
.cp-qlab{display:block;font-size:1.02rem;font-weight:500;line-height:1.55;margin-bottom:4px}
.cp-req{color:var(--cp-gd);margin-left:3px}
.cp-help{font-size:.85rem;color:var(--cp-t3);line-height:1.6;margin:0 0 14px}
.cp-instruct{font-family:var(--cp-fh);font-size:.85rem;font-weight:700;
  border-left:2px solid var(--cp-red);padding-left:12px;margin:10px 0 16px;line-height:1.5}
.cp-stack{margin-top:14px}

.cp-opt{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  background:var(--cp-bk3);border:1px solid var(--cp-br);border-radius:4px;
  padding:13px 15px;margin-bottom:7px;
  transition:background .25s var(--cp-ease),border-color .25s var(--cp-ease);
}
.cp-opt:hover{border-color:var(--cp-gdb);background:var(--cp-bk4)}
.cp-opt.cp-inline{max-width:260px}
.cp-opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cp-tick{flex:0 0 17px;width:17px;height:17px;margin-top:3px;border-radius:50%;
  border:1.5px solid var(--cp-t4);position:relative;transition:border-color .25s}
.cp-opt.box .cp-tick{border-radius:2px}
.cp-opttext{font-size:.95rem;line-height:1.5;color:var(--cp-t2)}
.cp-opt.on{background:var(--cp-gdd);border-color:var(--cp-gd)}
.cp-opt.on .cp-opttext{color:var(--cp-t1)}
.cp-opt.on .cp-tick{border-color:var(--cp-gd)}
.cp-opt.on .cp-tick::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--cp-gd)}
.cp-opt.box.on .cp-tick::after{border-radius:1px}

.cp-pills{display:flex;flex-wrap:wrap;gap:7px}
.cp-pill{
  font-family:var(--cp-fb);font-size:.85rem;cursor:pointer;
  background:var(--cp-bk3);border:1px solid var(--cp-br);color:var(--cp-t2);
  border-radius:4px;padding:10px 16px;transition:all .25s var(--cp-ease);
}
.cp-pill:hover{border-color:var(--cp-gdb);color:var(--cp-t1)}
.cp-pill.on{background:var(--cp-gdd);border-color:var(--cp-gd);color:var(--cp-gdl);font-weight:500}
.cp-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.cp-scale .cp-pill{padding:12px 0;text-align:center}
.cp-ends{display:flex;justify-content:space-between;gap:16px;margin-top:10px;
  font-size:.72rem;color:var(--cp-t3)}

.cp-grow{border-top:1px solid var(--cp-br);padding:16px 0 6px}
.cp-grow:first-child{border-top:none;padding-top:4px}
.cp-rlab{font-size:.95rem;color:var(--cp-t2);margin-bottom:10px}

.cp-count{text-align:right;font-size:.72rem;color:var(--cp-t3);margin-top:6px}
.cp-count.warn{color:var(--cp-gd)}
.cp-total{margin-top:8px;font-size:.82rem;color:var(--cp-t3)}
.cp-total b{font-family:var(--cp-fh);font-weight:700;color:var(--cp-gd)}

.cp-rank{display:grid;grid-template-columns:1fr 92px;gap:14px;align-items:center;
  padding:11px 0;border-top:1px solid var(--cp-br)}
.cp-rank:first-child{border-top:none}
.cp-rank span{font-size:.92rem;color:var(--cp-t2)}

.cp-err{display:none;font-size:.8rem;color:var(--cp-red);margin-top:9px}
.cp-err.show{display:block}
.cp-q.bad .cp-opt,.cp-q.bad input,.cp-q.bad textarea,.cp-q.bad select{border-color:rgba(255,0,0,.45)}

/* section G reads in a lighter register */
#cp-screen-G .cp-sect{font-size:clamp(1.15rem,2.2vw,1.5rem)}
#cp-screen-G .cp-qlab{font-weight:400;color:var(--cp-t2)}
#cp-screen-G .cp-secn{color:rgba(255,255,255,.025)}

.cp-done{padding:40px 0 10px}
.cp-rule{width:40px;height:2px;background:var(--cp-gd);margin-bottom:26px}
.cp-done p{font-size:1.1rem;line-height:1.75;color:var(--cp-t2);max-width:44ch;margin:0 0 28px}

@media(max-width:600px){
  .cp-portal,.cp-panel{padding-bottom:56px}
  .cp-2col{grid-template-columns:1fr}
  .cp-btn{padding:14px 24px;font-size:.78rem}
  .cp-nav .cp-btn{flex:1 1 auto}
  .cp-saved{flex-basis:100%;margin-left:0;text-align:right}
  .cp-scale{grid-template-columns:repeat(5,1fr)}
  .cp-secn{font-size:3rem}
  .cp-tiles{grid-template-columns:1fr}
  .cp-head{padding-top:36px}
}
