/* Passer rating calculator. Scoped under .pr* beneath #bxproto, on the shared
   --bx-* tokens, like the other tool pages. */

#bxproto .prshort{background:rgba(67,230,255,.06);border:1px solid rgba(67,230,255,.22);border-radius:16px;padding:20px 22px;margin:0 0 26px;font-size:17px;line-height:1.6}
#bxproto .prbody{font-size:15.5px;line-height:1.7;max-width:74ch;margin:0 0 14px}
#bxproto .prreq{margin:0 0 16px;padding-left:20px;max-width:74ch}
#bxproto .prreq li{font-size:15px;line-height:1.7;margin-bottom:4px}

/* Presets */
#bxproto .prpresets{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
#bxproto .prpreset{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 14px;border:1px solid var(--bx-line2);border-radius:12px;background:var(--bx-1);cursor:pointer;font:inherit;color:inherit}
#bxproto .prpreset:hover{border-color:var(--bx-cy)}
#bxproto .prpreset b{font-size:14px}
#bxproto .prpreset span{font-size:12.5px;color:var(--bx-tx2)}

/* Inputs beside the big number */
#bxproto .prgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
#bxproto .prinputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
#bxproto .printake{display:flex;flex-direction:column;gap:5px}
#bxproto .printake span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bx-tx2)}
#bxproto .printake input{width:100%;padding:10px 12px;border:1px solid var(--bx-line2);border-radius:10px;background:var(--bx-1);color:var(--bx-tx);font:600 16px/1.2 inherit;font-variant-numeric:tabular-nums}
#bxproto .printake input:focus{outline:2px solid var(--bx-cy);outline-offset:1px;border-color:var(--bx-cy)}

#bxproto .proutput{border:1px solid var(--bx-line2);border-radius:16px;background:var(--bx-1);padding:18px 20px;text-align:center}
#bxproto .prbignum{font:800 54px/1 var(--serif,inherit);color:var(--bx-cy);font-variant-numeric:tabular-nums}
#bxproto .prbiglabel{margin-top:8px;font-size:13px;color:var(--bx-tx2);line-height:1.5}
#bxproto .prwarn{margin:12px 0 0;padding-left:18px;text-align:left}
#bxproto .prwarn li{font-size:12.5px;line-height:1.5;color:#ffb27a}

/* Component breakdown */
#bxproto .prtable{width:100%;border-collapse:collapse;margin-top:22px;min-width:560px}
#bxproto .prtable caption{caption-side:top;text-align:left;font-size:13px;color:var(--bx-tx2);padding:0 0 10px}
#bxproto .prtable th{padding:8px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bx-tx2);border-bottom:1px solid var(--bx-line2);text-align:right;white-space:nowrap;font-weight:600}
#bxproto .prtable tbody td,#bxproto .prtable tbody th{padding:9px 10px;font-size:14px;border-bottom:1px solid var(--bx-line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:400}
#bxproto .prtable .prl{text-align:left}
#bxproto .prtable tr.is-capped td,#bxproto .prtable tr.is-capped th{color:var(--bx-cy)}
#bxproto .prtable tr.is-floored td,#bxproto .prtable tr.is-floored th{color:#ffb27a}
#bxproto .prtable tr.prsum td,#bxproto .prtable tr.prsum th{border-bottom:none;border-top:1px solid var(--bx-line2);font-size:15px}
/* Only the breakdown table scrolls. With overflow on .prcalc the presets, the inputs
   and the big number all sat inside the horizontal scroller on a phone. */
#bxproto .prscroll{overflow-x:auto}

/* FAQ */
#bxproto .prfaq{display:grid;gap:8px;max-width:80ch}
#bxproto .prfaq details{border:1px solid var(--bx-line2);border-radius:12px;background:var(--bx-1);padding:12px 16px}
#bxproto .prfaq summary{cursor:pointer;font-weight:600;font-size:15px}
#bxproto .prfaq p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--bx-tx1)}

@media(max-width:720px){
  #bxproto .prgrid{grid-template-columns:1fr}
  #bxproto .prbignum{font-size:44px}
}

/* The section headings are h2 elements now, for the sake of the queries they carry
   ("passer rating calculator", "what is a perfect passer rating"), where the page
   previously had an h1 and nothing else. .stitle already carries the size and weight
   and is shared with the hub styles, so only the element's default margin is cleared —
   this selector is more specific than `#bxproto .stitle`, so resetting the font here
   would beat it and shrink the heading to body size. */
#bxproto h2.stitle{margin:0}