/* A saved Trade Coach review (js/coach-review.js) on Trading Metrics and Trade Replay.
   Layout: mockup Option D "Verdict" - one big answer, then the reasons. Requires s8-tokens.css.
   Score tones: 80+ green, 60+ gold, below red. .cr--compact = the narrow Trade Replay panel. */

.cr{display:grid;gap:22px;font:400 13.5px/1.5 var(--s8-sans);color:var(--s8-fg-2)}
.cr-caps{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--s8-fg-3)}
.cr-up{color:var(--s8-up)}
.cr-mid{color:#F5B14A}
.cr-down{color:var(--s8-down)}
.cr-accent{color:var(--s8-accent-fg)}

/* the verdict */
.cr-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:end}
.cr-grade{font-size:76px;line-height:.82;font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.cr-grade sup{position:relative;top:4px;margin-left:2px;font-size:36px;color:var(--s8-accent);vertical-align:top}
.cr-top .cr-caps{margin-bottom:6px}
.cr-top h3{margin:0;font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:#fff;overflow-wrap:anywhere}
.cr-top p{margin:6px 0 0;font-size:13px;color:var(--s8-fg-3)}

/* five score columns */
.cr-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;height:132px;border-bottom:1px solid var(--s8-line)}
.cr-col{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px;min-width:0}
.cr-col b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.cr-col i{display:block;border-radius:3px 3px 0 0;background:var(--s8-line-3)}
.cr-col i.cr-up{background:linear-gradient(180deg,var(--s8-up),rgba(62,214,155,.3))}
.cr-col i.cr-mid{background:linear-gradient(180deg,#F5B14A,rgba(245,177,74,.3))}
.cr-col i.cr-down{background:linear-gradient(180deg,var(--s8-down),rgba(255,110,122,.3))}
.cr-names{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:-14px}
.cr-names span{font-size:12px;line-height:1.3;color:var(--s8-fg-3)}

/* the reasons */
.cr-q{display:grid;gap:14px}
.cr-q>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;line-height:1.5}
.cr-q .cr-caps{padding-top:2px}
.cr-q p{margin:0}
.cr-q .cr-next{color:#fff;font-weight:500}
.cr-note{margin:-8px 0 0;font-size:12.5px;color:var(--s8-fg-3)}

/* locked (free): shapes only, no review text in the page */
.cr-lock{display:grid;gap:22px;filter:blur(3px);opacity:.5;pointer-events:none;user-select:none}
.cr-col i.cr-lock{background:var(--s8-line-3)}
.cr-lock .cr-col b{color:var(--s8-fg-4)}
.cr-lock .cr-q p{display:grid;gap:6px;padding-top:4px}
.cr-lock .cr-q i{display:block;height:8px;border-radius:3px;background:var(--s8-line-3)}
.cr-lock .cr-q i+i{width:70%}
.cr-unlock{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;margin-top:-10px;padding:0 14px;border:1px solid rgba(245,177,74,.44);border-radius:5px;background:rgba(245,177,74,.14);color:#FFD489;font:600 13px var(--s8-sans);cursor:pointer}
.cr-unlock:hover{border-color:#F5B14A;background:rgba(245,177,74,.22);color:#fff}
.cr-unlock svg{width:14px;height:14px;fill:currentColor}

/* narrow panel (Trade Replay) and phones */
.cr--compact{gap:18px}
.cr--compact .cr-top{gap:16px}
.cr--compact .cr-grade{font-size:56px}
.cr--compact .cr-grade sup{font-size:26px}
.cr--compact .cr-top h3{font-size:18px}
.cr--compact .cr-cols{height:112px;gap:6px}
.cr--compact .cr-names{gap:6px}
.cr--compact .cr-names span{font-size:10.5px}
.cr--compact .cr-q>div{grid-template-columns:1fr;gap:4px}
@media (max-width:560px){
    .cr-grade{font-size:56px}
    .cr-grade sup{font-size:26px}
    .cr-top h3{font-size:19px}
    .cr-cols,.cr-names{gap:6px}
    .cr-names span{font-size:10.5px}
    .cr-q>div{grid-template-columns:1fr;gap:4px}
}