/* ============================================================
   OA section — reusable Online-Assessment renderer (data-driven)
   All selectors scoped under .oa-rich so it can't clash with firm.css.
   Consumed by js/oa-section.js; demoed in _oa-template.html.
   ============================================================ */
.oa-rich { --oa-line:#eef0f3; }
.oa-rich .oa-intro{font-size:14px;color:var(--text-secondary,#5b6470);line-height:1.55;margin:0 0 22px;max-width:720px}

.oa-rich .oa-practice{display:inline-flex;align-items:center;gap:12px;background:var(--accent,#2563eb);color:#fff;font-size:15px;font-weight:800;border-radius:12px;padding:13px 20px;text-decoration:none;margin:0 0 28px;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--accent,#2563eb) 80%,transparent)}
.oa-rich .oa-practice .oa-cnt{font-size:12px;font-weight:800;background:rgba(255,255,255,.22);border-radius:999px;padding:3px 10px}
.oa-rich .oa-practice:hover{filter:brightness(1.05)}

.oa-rich .oa-fam{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted,#9aa4b2);margin:24px 2px 12px}

.oa-rich .oa-row{display:grid;grid-template-columns:148px 1fr;gap:0;align-items:stretch}
.oa-rich .oa-row.oa-dim{opacity:.6}
.oa-rich .oa-gut{position:relative;border-right:2px solid var(--oa-line);padding:16px 16px 22px 0;text-align:right}
.oa-rich .oa-node{position:absolute;right:-7px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--bg-card,#fff);border:2.5px solid #cbd2da}
.oa-rich .oa-gut.current .oa-node,.oa-rich .oa-gut.live .oa-node{border-color:#1a9d6b}
.oa-rich .oa-gut.new .oa-node{border-color:var(--accent,#2563eb)}
.oa-rich .oa-gut.intern .oa-node{border-color:#8b7bd8}
.oa-rich .oa-stat{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary,#5b6470)}
.oa-rich .oa-gut.new .oa-stat{color:var(--accent,#2563eb)}
.oa-rich .oa-win{font-size:11px;font-weight:700;color:var(--text-muted,#9aa4b2);margin-top:3px}

.oa-rich .oa-led{padding:14px 0 16px 22px;min-width:0}
.oa-rich .oa-head{display:flex;align-items:center;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.oa-rich .oa-track{font-size:14.5px;font-weight:800;color:var(--text-bright,#0f1419)}
.oa-rich .oa-meta{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.oa-rich .oa-chip{font-size:11px;font-weight:600;color:var(--text-secondary,#5b6470);background:var(--bg-elevated,#f5f7f9);border-radius:7px;padding:3px 8px}
.oa-rich .oa-sum{font-size:12.5px;color:var(--text-secondary,#5b6470);line-height:1.5;margin:4px 0 10px}
.oa-rich .oa-note{font-size:12.5px;color:var(--text-muted,#9aa4b2)}
.oa-rich .oa-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
@media (max-width:640px){.oa-rich .oa-links{grid-template-columns:1fr}}
.oa-rich .oa-link{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--oa-line,#e6e9ee);border-radius:10px;text-decoration:none;color:inherit;background:var(--bg-card,#fff);transition:border-color .12s,background .12s}
.oa-rich .oa-link:hover{border-color:var(--accent,#2f6bff);background:var(--bg-card-hover,#fafbfc)}
.oa-rich .oa-link-t{font-size:13px;font-weight:800;color:var(--text-bright,#0f1419)}
.oa-rich .oa-link-n{font-size:11.5px;color:var(--text-secondary,#5b6470);line-height:1.4}
.oa-rich .oa-link-go{font-size:11px;font-weight:700;color:var(--accent,#2f6bff);margin-top:2px}

.oa-rich .oa-prow{display:flex;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid var(--oa-line);text-decoration:none;color:inherit}
.oa-rich .oa-prow:last-child{border-bottom:0}
.oa-rich .oa-prow:hover{background:var(--bg-card-hover,#fafbfc)}
.oa-rich .oa-pmain{flex:1;min-width:0}
.oa-rich .oa-pt{display:block;font-size:14px;font-weight:700;color:var(--text-bright,#0f1419)}
.oa-rich .oa-pn{display:block;font-size:12px;color:var(--text-secondary,#5b6470);margin-top:1px}
.oa-rich .oa-pmeta{display:flex;align-items:center;gap:12px;flex:none}
.oa-rich .oa-k{font-size:11px;font-weight:600;color:var(--text-muted,#9aa4b2);width:96px;text-align:right}
.oa-rich .oa-d{font-size:11px;font-weight:700;width:48px;text-align:right}
.oa-rich .oa-d.easy{color:#1a9d6b}.oa-rich .oa-d.medium{color:#c97a16}.oa-rich .oa-d.hard{color:#d2483f}
.oa-rich .oa-solve{font-size:12px;font-weight:700;color:var(--accent,#2563eb);white-space:nowrap}

.oa-rich .oa-seeall{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--accent,#2563eb);text-decoration:none}
.oa-rich .oa-seeall:hover{text-decoration:underline}

@media(max-width:680px){
  .oa-rich .oa-row{grid-template-columns:1fr}
  .oa-rich .oa-gut{border-right:0;border-bottom:2px solid var(--oa-line);text-align:left;padding:12px 0}
  .oa-rich .oa-node{display:none}
  .oa-rich .oa-led{padding-left:0}
}

/* Mobile (audit 2026-06-08): stack the problem-row card so the title/description
   isn't squeezed to ~100px by the meta column (was unreadable, 1-3 words/line). */
@media (max-width: 768px) {
  .oa-rich .oa-prow { flex-direction: column; align-items: flex-start; gap: 8px; }
  .oa-rich .oa-pmeta { flex: none; }
}

/* free example link under the firm-page OA test card */
.oa-sample-link { display: block; margin: 8px 0 2px; font-size: 13px; font-weight: 700;
  color: var(--accent-primary); text-decoration: none; }
.oa-sample-link:hover { text-decoration: underline; }