/* Assessments (assess.js): the placement test and the grammar check. Uses app.css's tokens (navy, cream, gold, EB Garamond). */
.as-wrap { max-width: 640px; margin: 0 auto; padding: 18px 16px 80px; }
.as-top { margin-bottom: 8px; }
.as-h { font-family: var(--text); font-weight: 400; font-size: 32px; line-height: 1.15; margin: 14px 0 10px; }
.as-lead { font-family: var(--text); font-size: 20px; line-height: 1.45; margin: 12px 0; }
.as-note { font-size: 14px; margin-top: 16px; }
.as-bar { display: grid; gap: 6px; margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.as-bar i { display: block; height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden; }
.as-bar b { display: block; height: 100%; background: var(--gold); transition: width .25s ease; }
.as-chips { gap: 10px; margin: 18px 0; }
.as-chip { min-height: 44px; font-size: 21px; padding: 8px 18px; cursor: pointer; }
.as-word { text-align: center; margin: 18px 0 6px; overflow-wrap: anywhere; }
.as-sent { font-family: var(--text); font-size: 21px; line-height: 1.55; text-align: left; margin: 12px 0 8px; overflow-wrap: anywhere; }
.as-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; }
.as-hl { background: var(--hl); color: inherit; border-radius: 4px; padding: 0 2px; box-shadow: 0 0 0 1px rgba(182, 152, 105, .45); }
.as-tap { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1.5px dotted var(--gold); padding: 2px 1px; margin: 0; cursor: pointer; border-radius: 3px; }
.as-tap:hover:not([disabled]) { background: var(--hl); }
.as-tap.right { background: rgba(70, 140, 90, .22); border-bottom-color: #4b8a5d; }
.as-tap.wrong { background: rgba(180, 70, 50, .2); border-bottom-color: #b4513a; }
.as-why { min-height: 24px; margin-top: 14px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.as-why b { color: var(--ink); }
.as-res { margin: 8px 0 18px; }
.as-res .l { font-size: 38px; }
.as-res .g { font-size: 18px; }
.as-rows { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 14px; }
.as-row { background: var(--card); border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); padding: 14px 16px; }
.as-rh { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; }
.as-rh b { white-space: nowrap; color: var(--gold-ink); }
.as-meter { height: 5px; border-radius: 3px; background: var(--bg-2); margin: 8px 0 2px; overflow: hidden; }
.as-meter i { display: block; height: 100%; background: var(--gold); }
.as-more { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; padding: 4px 0; }
.as-def { margin-top: 8px; font-family: var(--text); font-size: 17px; line-height: 1.45; }
.as-def.hide { display: none; }
.as-where { margin-top: 6px; font-size: 14px; color: var(--muted); }
.as-where a { color: var(--gold-ink); }
@media (max-width: 480px) { .as-h { font-size: 27px; } .as-sent { font-size: 19px; } .as-res .l { font-size: 32px; } }
/* the ? next to the title: what the check is for, on a tap */
.as-q { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--gold);
  color: var(--gold-ink); font: 600 14px/1 var(--ui); vertical-align: 6px; margin-left: 6px; cursor: pointer; }
.as-q[aria-expanded="true"] { background: var(--gold); color: #141b31; }
.as-why { margin: 8px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; }