/* PairMyRig Tools. Light, readable, mobile first. */
.pmr-calc,.pmr-detail,.pmr-page{--ink:#0f1521;--blue:#3b82f6;--line:#e2e9f4;--mut:#5b6b85;--soft:#f6f9fe}

.pmr-page .pmr-wrap{max-width:1060px!important;margin:0 auto!important;padding:24px 16px!important}
.pmr-page h1{font-size:28px!important;line-height:1.2!important;letter-spacing:-.02em!important;margin:0 0 10px!important;color:var(--ink)!important}
.pmr-intro{font-size:17px!important;line-height:1.62!important;color:var(--mut)!important;margin:0 0 22px!important;max-width:62ch!important}

/* ---------------------------------------------------------------- The card */
.pmr-calc{display:grid!important;grid-template-columns:1fr!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:0 2px 14px rgba(16,32,60,.05)!important;margin:0 0 18px!important}
.pmr-form{padding:20px!important;margin:0!important}
.pmr-tiles{display:grid!important;grid-template-columns:1fr!important;gap:11px!important}

.pmr-tile{display:flex!important;align-items:center!important;gap:12px!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:13px!important;background:#fff!important;transition:border-color .15s!important}
.pmr-tile:focus-within{border-color:var(--blue)!important}
.pmr-tile-ico{flex:0 0 auto!important;width:42px!important;height:42px!important;border-radius:11px!important;background:#eaf2ff!important;color:var(--blue)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.pmr-tile-body{flex:1 1 auto!important;min-width:0!important}
.pmr-tile-lab{display:block!important;font-size:11px!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--mut)!important;font-weight:600!important;margin:0 0 5px!important}
.pmr-tile-ctl{position:relative!important;display:block!important}

/* The select itself. Explicit option colours: without them Windows renders the
   open list with the control's dark background and its own dark text. */
.pmr-tile-ctl select{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
 width:100%!important;padding:10px 34px 10px 12px!important;border:1px solid #d9e2ef!important;border-radius:9px!important;
 background:#fff!important;color:var(--ink)!important;font-size:15px!important;line-height:1.3!important;font-family:inherit!important;
 cursor:pointer!important;outline:none!important;text-overflow:ellipsis!important}
.pmr-tile-ctl select:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(59,130,246,.16)!important}
.pmr-tile-ctl select option{background:#fff!important;color:#0f1521!important}
.pmr-tile-ctl select option:checked{background:#eaf2ff!important;color:#0f1521!important}
.pmr-chev{position:absolute!important;right:11px!important;top:50%!important;transform:translateY(-50%)!important;color:#8b9ab3!important;pointer-events:none!important}

.pmr-actions{margin-top:16px!important}
.pmr-go{width:100%!important;border:0!important;border-radius:11px!important;background:var(--blue)!important;color:#fff!important;
 padding:14px 22px!important;font-size:16px!important;font-weight:650!important;font-family:inherit!important;cursor:pointer!important;
 box-shadow:0 4px 14px rgba(59,130,246,.3)!important}
.pmr-go:hover{background:#2f72e0!important}
.pmr-go:disabled{opacity:.65!important;cursor:wait!important;box-shadow:none!important}
.pmr-note{font-size:12.5px!important;color:var(--mut)!important;line-height:1.55!important;margin:11px 0 0!important}
.pmr-note a,.pmr-method a{color:#1d4ed8!important}

/* --------------------------------------------------------------- The panel */
.pmr-panel{background:var(--soft)!important;border-top:1px solid var(--line)!important;padding:22px 20px!important}
.pmr-empty{text-align:center!important;padding:10px 0!important}
.pmr-empty-ico{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:54px!important;height:54px!important;border-radius:50%!important;background:#fff!important;border:1px solid var(--line)!important;color:#93a3bd!important;margin-bottom:12px!important}
.pmr-empty strong{display:block!important;font-size:17px!important;color:var(--ink)!important;margin-bottom:6px!important}
.pmr-empty p{font-size:13.5px!important;line-height:1.6!important;color:var(--mut)!important;margin:0!important;max-width:34ch!important;margin-inline:auto!important}

.pmr-sum{text-align:center!important}
.pmr-dial{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 width:124px!important;height:124px!important;border-radius:50%!important;margin:0 auto 14px!important;background:#fff!important;border:8px solid #94a3b8!important}
.pmr-pct{font-size:30px!important;font-weight:700!important;line-height:1!important;color:var(--ink)!important}
.pmr-pct i{font-style:normal!important;font-size:16px!important;font-weight:600!important;opacity:.6!important}
.pmr-who{font-size:10.5px!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--mut)!important;margin-top:5px!important;font-weight:600!important}
.pmr-sev-label{display:block!important;font-size:18px!important;color:var(--ink)!important;margin-bottom:7px!important}
.pmr-verdict-text{font-size:13.5px!important;line-height:1.62!important;color:var(--mut)!important;margin:0 0 16px!important}
.pmr-sev-excellent .pmr-dial{border-color:#16a34a!important}
.pmr-sev-good .pmr-dial{border-color:#65a30d!important}
.pmr-sev-minor .pmr-dial{border-color:#ca8a04!important}
.pmr-sev-noticeable .pmr-dial{border-color:#ea580c!important}
.pmr-sev-significant .pmr-dial{border-color:#dc2626!important}
.pmr-sev-severe .pmr-dial{border-color:#991b1b!important}

.pmr-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;padding:14px 0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;margin-bottom:14px!important}
.pmr-stats span{display:block!important;font-size:19px!important;font-weight:700!important;color:var(--ink)!important;line-height:1.1!important}
.pmr-stats small{display:block!important;font-size:11px!important;color:var(--mut)!important;margin-top:3px!important}

.pmr-bars{text-align:left!important}
.pmr-bar{margin-bottom:11px!important}
.pmr-bar-lab{display:flex!important;justify-content:space-between!important;gap:8px!important;font-size:12px!important;color:var(--mut)!important;margin-bottom:5px!important}
.pmr-bar-lab b{color:var(--ink)!important;font-weight:600!important;white-space:nowrap!important}
.pmr-bar-track{display:block!important;height:7px!important;border-radius:4px!important;background:#e4ebf6!important;overflow:hidden!important}
.pmr-bar-track i{display:block!important;height:100%!important;background:#64748b!important;border-radius:4px!important}
.pmr-bar-track i.pmr-bar-gpu{background:var(--blue)!important}

/* --------------------------------------------------------------- The detail */
.pmr-detail:empty{display:none!important}
.pmr-detail-in{background:#fff!important;border:1px solid var(--line)!important;border-radius:18px!important;padding:20px!important}
.pmr-block{margin-bottom:26px!important}
.pmr-block:last-of-type{margin-bottom:0!important}
.pmr-detail-in h3{font-size:19px!important;line-height:1.3!important;margin:0 0 7px!important;color:var(--ink)!important}
.pmr-lead{font-size:14px!important;line-height:1.65!important;color:var(--mut)!important;margin:0 0 14px!important;max-width:70ch!important}
.pmr-tablewrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
.pmr-table{width:100%!important;border-collapse:collapse!important;font-size:14px!important;min-width:420px!important}
.pmr-table th,.pmr-table td{padding:11px 10px!important;border-bottom:1px solid var(--line)!important;text-align:left!important;white-space:nowrap!important}
.pmr-table th{font-size:11px!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:var(--mut)!important;background:#f8fafd!important}
.pmr-table tr.pmr-now{background:#eff6ff!important}
.pmr-table tr.pmr-now td{font-weight:600!important}
.pmr-chip{display:inline-block!important;padding:3px 9px!important;border-radius:20px!important;font-size:11.5px!important;font-weight:650!important;letter-spacing:.02em!important}
.pmr-chip-balanced{background:#dcfce7!important;color:#15803d!important}
.pmr-chip-cpu{background:#fef3c7!important;color:#a16207!important}
.pmr-chip-gpu{background:#dbeafe!important;color:#1d4ed8!important}

.pmr-warn{margin:0 0 22px!important;padding:14px 16px!important;list-style:none!important;background:#fffbeb!important;border:1px solid #fde68a!important;border-radius:12px!important}
.pmr-warn li{font-size:13.5px!important;line-height:1.6!important;color:#7c5e10!important;padding-left:22px!important;position:relative!important;margin-bottom:8px!important}
.pmr-warn li:last-child{margin-bottom:0!important}
.pmr-warn li::before{content:"!"!important;position:absolute!important;left:0!important;top:1px!important;width:16px!important;height:16px!important;border-radius:50%!important;background:#f59e0b!important;color:#fff!important;font-size:11px!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important}

.pmr-rec p{font-size:15px!important;line-height:1.68!important;color:#2b3952!important;margin:0 0 14px!important;max-width:72ch!important}
.pmr-btn{display:inline-block!important;padding:12px 18px!important;border-radius:10px!important;background:var(--ink)!important;color:#fff!important;text-decoration:none!important;font-size:14.5px!important;font-weight:650!important}
.pmr-btn:hover{background:#1e2a3f!important}
.pmr-method{font-size:12.5px!important;color:var(--mut)!important;line-height:1.6!important;margin:22px 0 0!important;padding-top:16px!important;border-top:1px solid var(--line)!important}
.pmr-err{padding:14px!important;border-radius:11px!important;background:#fef2f2!important;border:1px solid #fecaca!important;font-size:14px!important;color:#991b1b!important}

@media(min-width:760px){
 .pmr-tiles{grid-template-columns:1fr 1fr!important}
 .pmr-go{width:auto!important;min-width:230px!important}
}
@media(min-width:1000px){
 .pmr-calc{grid-template-columns:1.6fr .95fr!important}
 .pmr-form{padding:24px!important}
 .pmr-panel{border-top:0!important;border-left:1px solid var(--line)!important;padding:26px 22px!important}
 .pmr-page h1{font-size:36px!important}
 .pmr-detail-in{padding:26px!important}
}

/* Affiliate */
.pmr-aff{display:inline-flex!important;align-items:center!important;gap:7px!important;padding:11px 16px!important;
 border-radius:10px!important;background:#ff9900!important;color:#0f1521!important;text-decoration:none!important;
 font-size:14.5px!important;font-weight:650!important;border:1px solid #e88b00!important}
.pmr-aff:hover{background:#f59300!important;color:#0f1521!important}
.pmr-aff-note{font-size:12px!important;font-weight:500!important;opacity:.72!important}
.pmr-disclosure{font-size:12.5px!important;line-height:1.6!important;color:#5b6b85!important;background:#f6f9fe!important;
 border:1px solid #e2e9f4!important;border-radius:10px!important;padding:11px 14px!important;margin:0 0 22px!important}
.pmr-disclosure a{color:#1d4ed8!important}

/* Pairing pages */
.pmr-verdictcard{background:linear-gradient(180deg,#f7fbff,#fff)!important;border:1px solid var(--line)!important;
 border-radius:18px!important;padding:24px!important;margin:0 0 26px!important;box-shadow:0 2px 14px rgba(16,32,60,.05)!important}
.pmr-vc-kicker{display:inline-block!important;font-size:11px!important;letter-spacing:.08em!important;text-transform:uppercase!important;
 font-weight:700!important;color:var(--blue)!important;margin-bottom:8px!important}
.pmr-verdictcard h2{font-size:27px!important;line-height:1.2!important;margin:0 0 10px!important;color:var(--ink)!important}
.pmr-verdictcard p{font-size:15.5px!important;line-height:1.68!important;color:var(--mut)!important;margin:0 0 18px!important;max-width:68ch!important}
.pmr-vc-second{display:block!important;margin-top:12px!important;font-size:14px!important;color:#1d4ed8!important}
.pmr-page .pmr-block{margin:0 0 34px!important}
.pmr-page .pmr-block h2{font-size:22px!important;line-height:1.28!important;margin:0 0 7px!important;color:var(--ink)!important}
.pmr-avoid{list-style:none!important;margin:0!important;padding:0!important}
.pmr-avoid li{padding:12px 14px!important;border:1px solid var(--line)!important;border-left:3px solid #ea580c!important;
 border-radius:0 11px 11px 0!important;margin-bottom:9px!important;font-size:14.5px!important}
.pmr-avoid span{display:block!important;font-size:13px!important;color:var(--mut)!important;margin-top:3px!important}
.pmr-index{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin:18px 0!important}
.pmr-index-item{display:flex!important;flex-direction:column!important;gap:2px!important;padding:13px 15px!important;
 border:1px solid var(--line)!important;border-radius:11px!important;text-decoration:none!important;color:inherit!important;background:#fff!important}
.pmr-index-item:hover{border-color:var(--blue)!important;background:#f7faff!important}
.pmr-index-item strong{font-size:15px!important;color:var(--ink)!important}
.pmr-index-item span{font-size:12.5px!important;color:var(--mut)!important}
@media(min-width:620px){.pmr-index{grid-template-columns:repeat(2,1fr)!important}}
@media(min-width:960px){.pmr-index{grid-template-columns:repeat(3,1fr)!important}}
.pmr-page .pmr-note-line{font-size:15.5px!important;line-height:1.7!important;color:#36445c!important;
 margin:0 0 14px!important;padding-left:16px!important;border-left:3px solid #dbe6f5!important;max-width:72ch!important}

/* Frame rate by resolution chart on the pairing pages. Inline SVG, so the
   type and fills are styled here rather than hard coded into the markup. */
.pmr-page .pmr-chart{margin:18px 0 22px!important;padding:16px 14px!important;background:#fff!important;
 border:1px solid #e2eaf5!important;border-radius:12px!important;max-width:620px!important}
.pmr-page .pmr-chart svg{display:block!important;width:100%!important;height:auto!important}
.pmr-page .pmr-ch-lab{font:600 13px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;fill:#5b6b85!important;text-anchor:end!important}
.pmr-page .pmr-ch-track{fill:#f1f5fb!important}
.pmr-page .pmr-ch-bar{fill:#3b82f6!important}
.pmr-page .pmr-ch-val{font:700 13px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;fill:#0f1521!important}
.pmr-page .pmr-chart figcaption{margin-top:10px!important;font-size:12.5px!important;line-height:1.6!important;
 color:#5b6b85!important}
@media(max-width:600px){
 .pmr-page .pmr-chart{padding:12px 10px!important}
 .pmr-page .pmr-ch-lab{font-size:12px!important}
 .pmr-page .pmr-ch-val{font-size:12px!important}
}

/* Can I Run It verdict card. The colour carries the answer, so it has to be
   readable before anyone reads the sentence. */
.pmr-page .pmr-verdictcard.pmr-cir-no,
.pmr-page .pmr-verdictcard.pmr-cir-below{border-left:5px solid #dc2626!important}
.pmr-page .pmr-verdictcard.pmr-cir-minimum{border-left:5px solid #d97706!important}
.pmr-page .pmr-verdictcard.pmr-cir-yes,
.pmr-page .pmr-verdictcard.pmr-cir-comfortable,
.pmr-page .pmr-verdictcard.pmr-cir-light{border-left:5px solid #16a34a!important}
.pmr-page .pmr-cir-block{background:#fef2f2!important;border:1px solid #fecaca!important;
 border-radius:9px!important;padding:11px 13px!important;margin:12px 0 0!important;
 font-size:14.5px!important;line-height:1.6!important;color:#991b1b!important}
.pmr-page .pmr-cir-note{background:#f1f5fb!important;border-radius:9px!important;
 padding:11px 13px!important;margin:10px 0 0!important;font-size:14.5px!important;
 line-height:1.6!important;color:#36445c!important}
.pmr-page .pmr-cir-form{display:grid!important;gap:12px!important}
@media(min-width:760px){.pmr-page .pmr-cir-form{grid-template-columns:repeat(2,1fr)!important}
 .pmr-page .pmr-cir-form button{grid-column:1/-1!important}}

/* Measure alignment.

   The container was 1060px while paragraphs were capped at 62ch and 70ch,
   which rendered them at roughly 620 to 665px. Headings and tables used the
   full 1028px, so every block of copy ended 360 to 410px short of the heading
   above it and the page read as broken rather than as a deliberate measure.

   The fix is to make the column agree with the text rather than to stretch
   the text to a line length nobody can read comfortably. The wrap narrows to
   a measure that suits prose, and the two elements that genuinely need more
   room, tables and the chart, are allowed to break out of it on wide screens. */
.pmr-page .pmr-wrap{max-width:880px!important}
.pmr-page .pmr-intro,
.pmr-page .pmr-lead,
.pmr-page .pmr-note-line,
.pmr-page .pmr-rec p,
.pmr-page .pmr-verdictcard p,
.pmr-page .pmr-method{max-width:none!important}

@media(min-width:1100px){
 /* Only the card grid reaches wider than the copy. Tables used to as well,
    and that was a mistake: a two column table has nothing to fill the space
    with, so "Resolution | Estimated fps" ended up 1,208px wide with a canyon
    down the middle. Tables now size to their own content instead, below. */
 .pmr-page .pmr-index{width:calc(100% + 180px)!important;margin-left:-90px!important}
}

/* Tables size to what is in them.

   width:100% forces every table to fill its container regardless of how many
   columns it has, which reads fine on a five column comparison and badly on a
   two column list, where the values end up stranded at opposite edges. Auto
   width with a 100% ceiling lets a wide table use the room and keeps a narrow
   one compact, and the scroll container still catches anything too wide for
   a phone. */
.pmr-page .pmr-table{width:auto!important;max-width:100%!important;min-width:0!important}
.pmr-page .pmr-tablewrap{width:100%!important;margin-left:0!important}
.pmr-page .pmr-table th,
.pmr-page .pmr-table td{padding-right:28px!important}
.pmr-page .pmr-table th:last-child,
.pmr-page .pmr-table td:last-child{padding-right:10px!important}
@media(max-width:600px){
 /* On a phone a narrow table should still use the width available. */
 .pmr-page .pmr-table{width:100%!important;min-width:420px!important}
}
