/* ═══════════════════════════════════════════════════════════════
   COACHING · APPLICATION · STUDENT DASHBOARD
   Loads after core.css + visuals.css
   ═══════════════════════════════════════════════════════════════ */

/* ── offer box ─────────────────────────────────────────────── */
.offer {
  border: var(--bw) solid var(--border); border-radius: var(--r);
  background: var(--card); box-shadow: var(--hard); overflow: hidden;
}
.offer-hd { padding: clamp(20px,3vw,30px); border-bottom: var(--bw) solid var(--border); background: var(--accent); color: #fff; }
.offer-hd h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.3rem,3vw,1.9rem); }
.offer-hd p { margin-top: 10px; font-size: .93rem; opacity: .95; }
.offer-body { padding: clamp(20px,3vw,30px); }
.offer-price { font-family: var(--display); font-size: clamp(2rem,5vw,3.2rem); line-height: .9; }
.offer-price small { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; font-weight: 600; }
.inc { display: grid; gap: 10px; margin-top: 20px; }
.inc li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; line-height: 1.5; }
.inc li::before { content: '✓'; color: var(--accent); font-weight: 900; flex-shrink: 0; font-size: 1.05rem; line-height: 1.3; }
.inc li b { color: var(--ink); }

/* ── phase cards ───────────────────────────────────────────── */
.phase {
  border: var(--bw) solid var(--border); border-radius: var(--r);
  background: var(--card); overflow: hidden; position: relative;
}
.phase + .phase { margin-top: 16px; }
.phase::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--accent); }
.phase-hd { padding: clamp(20px,2.8vw,28px) clamp(18px,2.6vw,26px) 0; display: flex; gap: 18px; align-items: flex-start; }
.phase-hd .pico { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.phase-hd .pw { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }
.phase-hd h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.2rem,2.6vw,1.6rem); margin-top: 8px; }
.phase-hd .pg { font-size: .93rem; color: var(--ink-2); margin-top: 10px; line-height: 1.55; }
.phase-hd .pwhy { font-size: .87rem; color: var(--ink-3); margin-top: 10px; line-height: 1.55; border-left: 3px solid var(--accent); padding-left: 12px; }
.phase-body { padding: clamp(16px,2.4vw,24px); }

/* task list (also used on the dashboard) */
.tasks { display: grid; gap: 4px; }
.task {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px;
  border: var(--bw) solid transparent; border-radius: var(--r-sm);
  cursor: pointer; user-select: none; transition: background .12s, border-color .12s;
}
.task:hover { background: var(--bg-2); border-color: var(--line); }
.task .tbx {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 3px; margin-top: 1px;
  border: var(--bw) solid var(--ink-3); display: grid; place-items: center;
  color: transparent; font-size: .76rem; font-weight: 900; transition: all .14s var(--ease);
}
.task.on .tbx { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.task.on .tt { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.task .tt { flex: 1; font-size: .93rem; font-weight: 500; line-height: 1.45; }
.task .tlink { flex-shrink: 0; font-size: .78rem; color: var(--accent-deep); font-weight: 700; padding: 2px 6px; }
.task .tlink:hover { text-decoration: underline; }
.task.locked { opacity: .5; cursor: not-allowed; }

/* progress bar */
.pbar { height: 12px; background: var(--bg-3); border: var(--bw) solid var(--border); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .6s var(--ease); }
.pbar.sm { height: 8px; }
.pmeta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 9px; }
.pmeta b { color: var(--ink); }

/* ── qualification form ────────────────────────────────────── */
.qstep { display: none; }
.qstep.on { display: block; animation: qIn .3s var(--ease); }
@keyframes qIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.qbar { display: flex; gap: 6px; margin-bottom: 28px; }
.qbar i { flex: 1; height: 6px; background: var(--bg-3); border: 1.5px solid var(--line); display: block; }
.qbar i.done { background: var(--accent); border-color: var(--accent); }
.qq { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.3rem,3.2vw,2rem); line-height: 1.02; }
.qhelp { color: var(--ink-3); font-size: .93rem; margin-top: 12px; line-height: 1.55; }
.qopts { display: grid; gap: 9px; margin-top: 22px; }
.qopt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 17px; border: var(--bw) solid var(--line); border-radius: var(--r);
  background: var(--card); font-size: .96rem; font-weight: 600;
  transition: all .16s var(--ease); cursor: pointer;
}
.qopt:hover { border-color: var(--border); transform: translate(-2px,-2px); box-shadow: var(--hard-sm); }
.qopt.on { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); transform: translate(-2px,-2px); }
.qopt .qk {
  width: 26px; height: 26px; flex-shrink: 0; border: var(--bw) solid var(--ink-3); border-radius: 3px;
  display: grid; place-items: center; font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--ink-3);
}
.qopt.on .qk { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.qopt small { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-3); margin-top: 3px; }
.qnav { display: flex; gap: 10px; align-items: center; margin-top: 28px; flex-wrap: wrap; }

/* result panels */
.qres { border: var(--bw) solid var(--border); border-radius: var(--r); padding: clamp(22px,3.4vw,36px); box-shadow: var(--hard); }
.qres.pass { border-color: var(--green); box-shadow: 6px 6px 0 var(--green); }
.qres.soft { border-color: var(--amber); box-shadow: 6px 6px 0 var(--amber); }
.qres h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem,4vw,2.4rem); line-height: 1; }
.qsummary { border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); padding: 16px 18px; margin-top: 22px; }
.qsummary div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: .89rem; border-bottom: 1px solid var(--line-2); }
.qsummary div:last-child { border-bottom: 0; }
.qsummary span:first-child { color: var(--ink-3); }
.qsummary span:last-child { font-weight: 700; text-align: right; }
.qsummary .yes { color: var(--green); }
.qsummary .no  { color: var(--accent); }

/* ── dashboard ─────────────────────────────────────────────── */
.dash-hd {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  flex-wrap: wrap; padding-block: 30px 22px; border-bottom: var(--bw) solid var(--border);
  margin-bottom: clamp(18px,2.4vw,26px);
}
.dash-hd h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.7rem,4vw,2.8rem); line-height: .95; }
.dash-hd .dsub { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; margin-bottom: 10px; }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(14px,2vw,22px); align-items: start; }
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }

.card2 { background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--r); padding: clamp(18px,2.4vw,26px); position: relative; overflow: hidden; }
.card2 + .card2 { margin-top: clamp(14px,2vw,22px); }
.card2[data-accent]::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--accent); }
.card2[data-accent] { padding-top: calc(clamp(18px,2.4vw,26px) + 6px); }
.card2-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card2-hd h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 900; display: flex; align-items: center; gap: 9px; }
.card2-hd .sub { font-size: .78rem; color: var(--ink-3); font-family: var(--mono); }

/* badges */
.badges { display: grid; grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap: 9px; }
.badge {
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 14px 8px;
  text-align: center; background: var(--bg-2); opacity: .38; filter: grayscale(1);
  transition: all .25s var(--snap);
}
.badge.got { opacity: 1; filter: none; border-color: var(--accent); background: var(--accent-wash); }
.badge .bi { font-size: 1.5rem; line-height: 1; }
.badge b { display: block; font-size: .7rem; margin-top: 8px; line-height: 1.25; }
.badge small { display: block; font-family: var(--mono); font-size: .58rem; color: var(--ink-4); margin-top: 5px; letter-spacing: .06em; }

/* goals */
.goal { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 14px 15px; }
.goal + .goal { margin-top: 8px; }
.goal-t { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.goal-t b { font-size: .93rem; }
.goal-t span { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.goal .pbar { margin-top: 10px; }
.goal-x { color: var(--ink-4); font-size: 1rem; padding: 0 4px; }
.goal-x:hover { color: var(--accent); }

/* journal */
.jentry { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; }
.jentry + .jentry { margin-top: 18px; }
.jentry .jd { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.jentry p { font-size: .92rem; line-height: 1.6; margin-top: 7px; color: var(--ink-2); }
.jentry .jshare { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; margin-top: 9px; display: inline-block; }
.jentry .jshare:hover { text-decoration: underline; }

/* share card preview */
.sharewrap { text-align: center; }
#shareCanvas { width: 100%; max-width: 340px; height: auto; border: var(--bw) solid var(--border); box-shadow: var(--hard); margin-inline: auto; }

/* auth screen */
.authbox { max-width: 460px; margin-inline: auto; }
.authbox .field { margin-top: 8px; }
.authbox label { display: block; margin-top: 16px; }
.authbox label .eyebrow { display: block; margin-bottom: 2px; }
.modewarn {
  border: var(--bw) solid var(--amber); background: var(--amber-wash);
  border-radius: var(--r); padding: 15px 17px; font-size: .88rem; line-height: 1.55;
}
.modewarn b { display: block; margin-bottom: 5px; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; }

/* admin table */
.atable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.atable th, .atable td { border: var(--bw) solid var(--line); padding: 10px 12px; text-align: left; }
.atable th { background: var(--bg-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.atable tr:hover td { background: var(--bg-2); }

@media (max-width: 520px) {
  .phase-hd { flex-direction: column; gap: 10px; }
  .qopt { padding: 13px 14px; font-size: .9rem; }
}