/* Shared styles for the paid tests (/left-right-brain-test, /study-foundation-assessment).
   Built from the tokens in styles.css. Generated pages link this file. */
.br { max-width: 980px; margin: 0 auto; display: grid; gap: 22px; }
/* display:grid would otherwise override the hidden attribute */
.br[hidden], .br__qr[hidden] { display: none !important; }
.br__card { background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--r-lg);
  padding: 26px 26px 22px; }
.br__card-h { font-size: var(--t-h3); font-weight: 700; color: var(--c-primary-deep); margin: 0 0 4px; }
.br__card-d { color: var(--c-body); font-size: var(--t-sm); margin: 0 0 18px; }
.br__warn { display: flex; gap: 12px; align-items: flex-start; background: #fff8e8;
  border: 1px solid #f0d9a4; border-left: 5px solid #e0a12b; border-radius: var(--r-md);
  padding: 14px 16px; font-size: var(--t-sm); color: #4a3a12; }
.br__warn strong { color: #2f2508; }
.br__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.br__field { display: grid; gap: 6px; }
.br__field select { appearance: auto; }
.br__q { border-top: 1px solid var(--c-rule); padding: 16px 0 14px; }
.br__q:first-of-type { border-top: 0; padding-top: 4px; }
.br__q-t { font-weight: 600; color: var(--c-ink); margin: 0 0 10px; }
.br__q-n { color: var(--c-primary); margin-right: 4px; }
.br__opts { display: grid; gap: 8px; }
.br__opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--c-rule);
  border-radius: var(--r-sm); padding: 11px 14px; cursor: pointer; font-size: var(--t-sm);
  background: var(--c-white); transition: border-color .15s, background .15s; }
.br__opt:hover { border-color: var(--c-primary); }
.br__opt input { accent-color: var(--c-primary); width: 18px; height: 18px; margin: 0; }
.br__opt:has(input:checked) { border-color: var(--c-primary); background: #eef5ff; }
.br__q.is-missing .br__opts { outline: 2px solid #d64545; outline-offset: 4px; border-radius: var(--r-sm); }
.br__pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.br__pic { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px 10px;
  border: 1px solid var(--c-rule); border-radius: var(--r-md); cursor: pointer; background: var(--c-tint-off);
  font-size: var(--t-sm); font-weight: 600; color: var(--c-term); transition: border-color .15s, background .15s; }
.br__pic input { position: absolute; opacity: 0; pointer-events: none; }
.br__pic-e { font-size: 44px; line-height: 1; }
.br__pic:hover { border-color: var(--c-primary); }
.br__pic:has(input:checked) { border: 2px solid var(--c-primary); background: #eef5ff; }
.br__pic:has(input:focus-visible) { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.br__go { justify-self: start; }
.br__err { color: #b42318; font-weight: 600; font-size: var(--t-sm); margin: 0; }
.br__check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); margin-top: 14px; }
.br__check input { margin-top: 3px; accent-color: var(--c-primary); }
.br__minor { margin-top: 14px; padding: 14px; border-radius: var(--r-md); background: #fff8e8;
  border: 1px solid #f0d9a4; font-size: var(--t-sm); display: grid; gap: 10px; }

.br__res { scroll-margin-top: 100px; }
.br__sum { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center; }
.br__pie { width: 200px; height: 200px; border-radius: 50%; position: relative;
  background: conic-gradient(#004ec3 0 var(--l), #8b3fd1 var(--l) 100%); }
.br__pie::after { content: ""; position: absolute; inset: 42px; border-radius: 50%; background: var(--c-white); }
.br__pie-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 1;
  font-size: var(--t-sm); color: var(--c-term); font-weight: 600; }
.br__legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--t-xs); margin-top: 10px; justify-content: center; }
.br__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.br__scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.br__score { border-radius: var(--r-md); padding: 12px; color: #fff; }
.br__score-k { font-size: var(--t-xs); opacity: .9; margin: 0; }
.br__score-v { font-size: 1.35rem; font-weight: 800; margin: 2px 0 0; }
.br__score--l { background: #004ec3; } .br__score--r { background: #8b3fd1; } .br__score--t { background: #1f8a5b; }
.br__lead { font-size: var(--t-lead); font-weight: 700; color: var(--c-primary-deep); margin: 0 0 6px; }
.br__list { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--c-body); list-style: disc outside; }
.br__list li { display: list-item; list-style: disc outside; }
.br__list li::marker { color: var(--c-primary); font-size: 1.1em; }
.br__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.br__hint { font-size: var(--t-xs); color: var(--c-foot-muted); margin: 8px 0 0; }
.br__saved { font-size: var(--t-xs); color: var(--c-foot-muted); margin: 0; }
.br__pay { border: 2px solid var(--c-primary); }
.br__price { font-size: 2rem; font-weight: 800; color: var(--c-primary-deep); margin: 0; }
.br__paybtns { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.br__manual { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; background: var(--c-tint-off);
  border: 1px dashed var(--c-rule); border-radius: var(--r-md); padding: 14px; font-size: var(--t-sm); }
.br__qr { width: 132px; height: 132px; background: #fff; padding: 6px; border-radius: 8px; }
.br__qr img, .br__qr canvas { width: 100% !important; height: 100% !important; }
.br__vpa { font-weight: 700; font-size: 1rem; word-break: break-all; }
.br__utr { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }
@media (max-width: 720px) {
  .br__card { padding: 20px 16px 18px; }
  .br__grid, .br__scores { grid-template-columns: 1fr; }
  .br__sum { grid-template-columns: 1fr; justify-items: center; }
  .br__manual, .br__utr { grid-template-columns: 1fr; }
  .br__qr { justify-self: center; }
}

/* the A4 report for the download (rendered off-screen in .rep__host) */
.brr { font-family: var(--f-sans); }
.brr h1 { font-size: 18pt; margin: 6mm 0 1mm; color: #002066; }
.brr h2 { font-size: 12pt; margin: 5mm 0 2mm; color: #002066; }
.brr p, .brr li { font-size: 10pt; margin: 0 0 1.5mm; }
.brr ul { margin: 0; padding-left: 5mm; list-style: disc outside; }
.brr li { display: list-item; list-style: disc outside; }
.brr__row { display: flex; gap: 4mm; margin: 3mm 0; }
.brr__box { flex: 1; border-radius: 3mm; padding: 3mm; color: #fff; }
.brr__box b { display: block; font-size: 14pt; }
.brr__note { margin-top: auto; font-size: 8.5pt; color: #444; border-top: 1px solid #ccc; padding-top: 2mm; }

/* ---- Study Foundation Assessment ------------------------------------------ */
.br__opts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.br__opts--5 .br__opt { justify-content: center; padding: 10px 6px; }
.sf__sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sf__sec-n { font-size: var(--t-xs); color: var(--c-foot-muted); white-space: nowrap; }
.sf__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sf__tile { border: 1px solid var(--c-rule); border-radius: var(--r-md); padding: 12px; background: var(--c-tint-off); }
.sf__tile-k { font-size: var(--t-xs); color: var(--c-foot-muted); margin: 0; }
.sf__tile-v { font-size: 1.15rem; font-weight: 800; color: var(--c-primary-deep); margin: 2px 0 0; }
.sf__charts { display: grid; grid-template-columns: 1fr 220px; gap: 26px; align-items: center; }
.sf__bars { display: grid; gap: 10px; }
.sf__bar-h { display: flex; justify-content: space-between; font-size: var(--t-sm); font-weight: 600; margin: 0 0 4px; }
.sf__track { height: 12px; border-radius: 999px; background: #e8eef7; overflow: hidden; }
.sf__fill { display: block; height: 100%; border-radius: 999px; }
.sf__pie { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; }
.sf__recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sf__rec { border: 1px solid var(--c-rule); border-left: 4px solid var(--area, var(--c-primary)); border-radius: var(--r-md); padding: 14px; }
.sf__rec-h { font-weight: 700; margin: 0 0 8px; color: var(--c-primary-deep); }
@media (max-width: 720px) {
  .br__opts--5 { grid-template-columns: 1fr; }
  .br__opts--5 .br__opt { justify-content: flex-start; padding: 11px 14px; }
  .sf__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf__charts, .sf__recs { grid-template-columns: 1fr; }
}