/* Level 0 and the placement test, on top of theme.css and site.css. */

/* ── widgets ─────────────────────────────────────────────────────────── */
.widget{margin:18px 0;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:2px}
.practice-tag{display:inline-block;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-line);border-radius:2px;padding:2px 7px;margin:0 0 10px}
.w-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.w-field label{font-size:14px;margin:0 0 4px}
.w-err{color:var(--down);font-size:14px;min-height:1.4em;margin:6px 0 0}
.w-out{margin-top:10px}
.w-out.big{font-size:17px}
.w-out p{margin:.5em 0 0}
.w-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:8px 0}
.w-kpis div{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:8px 10px}
.w-kpis span{display:block;font-size:13px;color:var(--fg-dim)}
.w-kpis b{font-family:var(--mono);font-size:17px;font-weight:500}
.w-candle{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
.w-pic svg{display:block;width:150px;height:200px}
.w-lab{fill:var(--fg-dim);font:11px var(--mono)}
.w-table{border-collapse:collapse;margin-top:12px;width:100%;font-size:15px}
.w-table th,.w-table td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.w-table th{color:var(--fg-dim);font-weight:600}
.widget input[type=range]{width:100%;accent-color:var(--gold)}
.w-check{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.w-yesno{display:flex;gap:6px;flex:none}
.w-yesno button{font-size:13px}
.w-yesno button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#140f04}
.w-yesno button.yes[aria-pressed="true"]::before{content:"\2713\00a0"}
.w-yesno button.no[aria-pressed="true"]::before{content:"\2715\00a0"}
.w-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.up{color:var(--up)}
.down{color:var(--down)}
@media (max-width:520px){
  .w-candle{grid-template-columns:minmax(0,1fr)}
  .w-pic{justify-self:center}
  .w-check{flex-direction:column;align-items:flex-start}
}

/* ── Level 0 ─────────────────────────────────────────────────────────── */
.part-list{list-style:none;display:grid;gap:8px}
.part-list>li{scroll-margin-top:calc(var(--header-h,140px) + 12px)}
.part-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px 12px;align-items:baseline;width:100%;text-align:left;text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:2px;color:var(--fg)}
.part-link{transition:background-color .15s ease,border-color .15s ease}
.part-link:hover{border-color:var(--gold-line);background:var(--gold-wash)}
.part-link:active{background:var(--surface);border-color:var(--gold)}
.part-link[aria-expanded="true"]{border-color:var(--gold)}
.part-link::after{content:"\25B8";color:var(--gold);display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.part-link[aria-expanded="true"]::after{transform:rotate(90deg)}
.part-panel{padding:14px 4px 6px;box-sizing:border-box}
.part-n{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.part-t{font-family:var(--display);font-size:20px;line-height:1.2}
.part-s{font-size:14px;color:var(--fg-dim)}
.part-panel .body>p{margin:0 0 .8em}
.part-h{font-family:var(--display);font-size:22px;margin:1.1em 0 .4em}
.part-panel ul{padding-left:1.2em;margin:0 0 .8em}
.part-panel li{margin:.3em 0}
.callout{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--surface-2);padding:10px 14px;margin:14px 0;border-radius:2px}
.callout.warning{border-left-color:var(--down)}
.practice{margin:18px 0;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:2px}
.practice svg{display:block;width:100%;max-width:460px;height:auto;margin:0 auto}
.practice svg text{fill:var(--fg-dim);font:12px var(--ui)}
.practice figcaption{font-size:14px;color:var(--fg-dim);margin-top:8px}
.quiz-block{margin:24px 0 8px;border-top:1px solid var(--line);padding-top:14px}
.quiz-block h3{font-family:var(--display);font-size:22px;margin:0 0 .2em}
.quiz{list-style:none;display:grid;gap:18px;margin-top:12px}
.quiz-text{font-weight:600;margin:0 0 8px}
.quiz-options{display:grid;gap:6px}
.quiz-option{text-align:left;text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;padding:10px 12px;line-height:1.4}
.quiz-option:disabled{cursor:default;opacity:1}
.quiz-option.is-right{border-color:var(--up);color:var(--up)}
.quiz-option.is-right::before{content:"\2713\00a0"}
.quiz-option.is-wrong{border-color:var(--down);color:var(--down)}
.quiz-option.is-wrong::before{content:"\2717\00a0"}
.quiz-why{font-size:15px;margin:8px 0 0}
.deeper{margin:24px 0 8px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--gold-line);border-radius:2px}
.deeper h3{font-family:var(--display);font-size:22px;margin:0}
.deeper-name{color:var(--gold-bright);font-family:var(--display);font-size:18px;margin:0 0 .4em}
.deeper-lessons{padding-left:1.3em;margin:.4em 0 .6em;color:var(--fg-dim)}
.part-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
@media (max-width:520px){
  .part-link{grid-template-columns:minmax(0,1fr) auto}
  .part-link .part-n,.part-link .part-t,.part-link .part-s{grid-column:1}
  .part-link::after{grid-column:2;grid-row:1 / span 3;align-self:center}
}

/* ── Placement test ──────────────────────────────────────────────────── */
.q-count{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.q-progress{display:block;width:100%;height:6px;margin:0 0 14px;accent-color:var(--gold)}
.q-text{font-family:var(--display);font-size:24px;line-height:1.25;margin:0 0 14px}
.q-options{display:grid;gap:8px;margin:0 0 16px}
.q-option{text-align:left;text-transform:none;letter-spacing:0;font-size:16px;font-weight:500;padding:12px 14px;line-height:1.4}
.q-option[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash)}
.q-option[aria-pressed="true"]::before{content:"\2713\00a0";color:var(--gold)}
.q-skip{background:none;border:0;color:var(--fg-dim);text-decoration:underline;cursor:pointer;padding:6px 0;font-size:15px}
.test .cta:disabled{cursor:not-allowed;opacity:.5}
.result-level{font-family:var(--display);font-size:clamp(26px,5vw,36px);line-height:1.15;margin:0 0 6px}
.result-headline{font-size:18px;color:var(--gold-bright);margin:0 0 .6em}
.test h3{font-family:var(--display);font-size:22px;margin:1.2em 0 .4em}
.test ul,.result-missed ol{padding-left:1.3em}
.test ul{margin:0 0 1em}
.result-missed li{margin:0 0 14px}
.result-missed li p{margin:0 0 .2em}
.result-next .cta{margin:4px 0 10px}

/* ── Results email form ──────────────────────────────────────────────── */
.result-email{margin-top:24px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:2px}
.result-email h3{margin-top:0}
.check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px}
.check input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--gold)}
.check label{font-weight:400;margin:0}
/* The accordion keeps its own small transitions under reduced motion (theme.css switches all others off). */
@media (prefers-reduced-motion:reduce){
  .part-link,button.part-link{transition:background-color .15s ease,border-color .15s ease!important}
  .part-link::after,button.part-link::after{transition:transform .25s cubic-bezier(.2,.8,.2,1)!important}
}