/* assess.css - the coach's assessment (assess.js), on #/assess plus its way in on Progress.
   Its own file because progress.css is small and this is a screen, not a tweak. */

/* The way in, at the top of Progress. */
.pg-assess{display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 14px 14px 15px; margin:0 0 16px; text-decoration:none; color:inherit}
.pg-assess>.ic{width:19px; height:19px; flex:none; color:var(--acc)}
.pg-assess span{flex:1; min-width:0}
.pg-assess b{display:block; font-size:15.5px; font-weight:700}
.pg-assess small{display:block; font-size:12.5px; color:var(--mut2); margin-top:2px}
.pg-assess>.ic:last-child{width:15px; height:15px; color:var(--mut2); transform:rotate(-90deg)}

.as-intro{font-size:13.5px; color:var(--mut); line-height:1.55; margin:0 0 14px}
.as-go{display:block; width:100%; background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:13px 18px; font-size:15px; font-weight:700; color:var(--acc); margin:0 0 18px}
.as-go:disabled{opacity:.6}

.as-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 16px 18px; text-align:left}
.as-when{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--mut2)}
.as-head{font-size:16.5px; font-weight:700; line-height:1.45; margin-top:8px}

.as-half{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.as-h{display:flex; align-items:center; gap:7px; color:var(--acc); font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px}
.as-h .ic{width:14px; height:14px}
.as-list{list-style:none; margin:0 0 8px; padding:0}
.as-list li{position:relative; padding-left:20px; font-size:13.5px; line-height:1.55; color:var(--mut); margin-bottom:7px}
.as-list li:before{position:absolute; left:0; top:0; font-weight:800}
.as-good li:before{content:'✓'; color:var(--good)}
.as-watch li:before{content:'!'; color:var(--acc2); left:5px}
.as-add li:before{content:'+'; color:var(--acc); left:4px}
.as-eat{margin:12px 0 0; padding:11px 12px; background:var(--bg2,rgba(0,0,0,.02)); border-radius:12px}
.as-eat b{display:block; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut2); margin-bottom:8px}
.as-eat .as-list{margin-bottom:0}
.as-verdict{font-size:13.5px; line-height:1.6; color:var(--txt); margin:12px 0 0}

.as-next{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.as-do{margin:0; padding-left:20px}
.as-do li{font-size:13.5px; line-height:1.55; color:var(--txt); margin-bottom:9px; padding-left:3px}
.as-via{margin-top:14px; font-size:11px; color:var(--mut2)}

.as-wait{padding:34px 10px; text-align:center}
.as-wait .ic{width:26px; height:26px; color:var(--acc); animation:aspulse 1.4s ease-in-out infinite}
.as-wait b{display:block; font-size:15.5px; font-weight:700; margin-top:10px}
.as-wait small{display:block; font-size:12.5px; color:var(--mut); line-height:1.55; margin-top:5px}
@keyframes aspulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.as-wait .ic{animation:none}}

.as-older{margin-top:22px}
.as-old{display:block; width:100%; text-align:left; background:transparent; border:0; border-top:1px solid var(--line);
  padding:12px 2px}
.as-old span{display:block; font-size:13px; font-weight:700}
.as-old small{display:block; font-size:12px; color:var(--mut2); line-height:1.5; margin-top:2px}