/* =====================================================================
   PhoneRanked — chipset comparisons (v1.3, 15.10.2026)
   Loaded by /wp-content/mu-plugins/phoneranked-chipsets.php on:
     • /chipsets/{a}-vs-{b}/ — together with chipset-page.css (cards, dark panel, sections);
     • /chipsets/ — the picker and popular comparisons under the ranking;
     • /chipsets/{chip}/ — the "Compare" link in similar chipsets and the comparisons list.
   v1.5: Key specs grid on chipset pages, Graphics column and "3 nm · 2024" in the ranking.
   Colors = GeneratePress global colors. First chip = accent blue, second chip = slate.
   Shared parts (.cv-pick, .cv-pairs, .cv-hub, .cp-sim-vs) use plain colors, so they work on every page.
   ===================================================================== */

/* ---------- 1. Comparison page: hero ---------- */
.pr-chvs{--cv-a:#1F5EFF;--cv-b:#7C8AA3;--cv-b-dark:#C9D2E1}
.pr-chvs .cv-hero{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.pr-chvs .cv-title{max-width:980px;font-size:clamp(32px,4.8vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.06}
.pr-chvs .cv-title-vs{color:var(--pr-faint);font-weight:700}
.pr-chvs .cv-lead{max-width:760px;color:var(--pr-muted);font-size:17px;line-height:1.65}

.cv-duo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:12px;margin-top:6px}
.cv-chip{
	display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 18px;
	border:1px solid var(--pr-border);border-radius:16px;background:var(--pr-metal);
	border-top:4px solid var(--cv-a);
}
.cv-chip--b{border-top-color:var(--cv-b)}
.cv-chip-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cv-chip-tags .cp-tag{min-height:24px;padding:2px 10px;font-size:12px}
.pr-chvs .cv-chip-name{font-size:20px;font-weight:800;line-height:1.25;color:var(--pr-ink)}
.cv-chip-name a{color:var(--pr-ink);text-decoration:none}
.cv-chip-name a:hover{color:var(--pr-accent)}
.cv-chip-meta{color:var(--pr-muted);font-size:14px}
.cv-chip-meta a{color:var(--pr-accent);font-weight:700;text-decoration:none}
.cv-chip-meta a:hover{text-decoration:underline}
.cv-duo-vs{
	align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
	background:var(--pr-ink);color:#fff;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
}
.cv-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--cv-a);flex:0 0 auto}
.cv-chip--b .cv-dot,.cv-col--b .cv-dot{background:var(--cv-b)}

/* ---------- 2. Benchmarks head to head (dark panel from chipset-page.css) ---------- */
.pr-chvs .cv-plate{margin-top:8px}
.cv-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.cv-metric{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid rgba(169,180,200,.18);border-radius:14px;background:rgba(255,255,255,.04)}
.cv-metric-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.pr-chvs .cv-metric-title{color:#fff;font-size:16px;font-weight:800}
.cv-src{color:#7F8BA0;font-size:12px;font-weight:600}
.cv-verdict{padding:2px 9px;border-radius:999px;background:rgba(31,94,255,.22);color:#DCE6FF;font-size:12px;font-weight:700}
.cv-verdict.is-level{background:rgba(255,255,255,.08);color:#C9D2E1}
.cv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "bar bar";gap:5px 10px;align-items:baseline}
.cv-row-name{grid-area:name;min-width:0;color:#A9B4C8;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-row-val{grid-area:val;color:#fff;font-size:18px;font-weight:800;letter-spacing:-.01em}
.cv-row:not(.is-win) .cv-row-val{color:#DDE3EC;font-weight:700}
.cv-bar{grid-area:bar;display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.cv-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1747C9,#1F5EFF)}
.cv-row--b .cv-bar span{background:var(--cv-b-dark)}
.cv-na{color:#7F8BA0;font-weight:600}
.cv-plate-note{color:#A9B4C8;font-size:13px;line-height:1.5}

/* ---------- 3. Key facts table ---------- */
.cv-table-wrap{overflow-x:auto;border:1px solid var(--pr-border);border-radius:16px;background:#fff}
.cv-facts{width:100%;margin:0;border:0;border-collapse:collapse;font-size:15px}
.cv-facts th,.cv-facts td{padding:13px 18px;border:0;border-top:1px solid var(--pr-line);text-align:left;vertical-align:top;line-height:1.45}
.cv-facts thead th,.cv-facts thead td{border-top:0;background:#F7F9FC;color:var(--pr-ink);font-size:15px;font-weight:800}
.cv-facts thead th .cv-dot{margin-right:8px;vertical-align:1px}
.cv-facts tbody th{width:28%;color:var(--pr-muted);font-weight:600}
.cv-facts td{width:36%;color:var(--pr-text)}
.cv-facts td a{color:var(--pr-accent);text-decoration:none;font-weight:600}
.cv-facts td a:hover{text-decoration:underline}
.cv-facts td.is-win{background:var(--pr-tint);color:var(--pr-ink);font-weight:800}
.cv-facts td.is-win::before{content:"\2713\00a0";color:var(--pr-accent)}
.cv-of{color:var(--pr-meta);font-weight:500}
.cv-facts .cv-na{color:var(--pr-faint)}
.cv-tier{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5}
.cv-mini{display:inline-block;min-width:34px;padding:1px 6px;border-radius:7px;background:var(--pr-red);color:#fff;font-size:12px;font-weight:800;text-align:center}
.cv-mini.is-high{background:var(--pr-green)}
.cv-mini.is-mid{background:var(--pr-amber);color:var(--pr-ink)}

/* ---------- 4. Next steps, FAQ ---------- */
.pr-chvs .cv-next{margin-top:28px}
.cv-faq{display:grid;gap:10px}
.cv-faq-item{border:1px solid var(--pr-border);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .2s ease}
.cv-faq-item[open]{border-color:#CDD5E1}
.cv-faq-item summary{
	display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
	list-style:none;cursor:pointer;color:var(--pr-ink);font-size:17px;font-weight:700;line-height:1.4;
}
.cv-faq-item summary::-webkit-details-marker{display:none}
.cv-faq-item summary::after{content:"+";flex:0 0 auto;color:var(--pr-accent);font-size:20px;font-weight:600;line-height:1}
.cv-faq-item[open] summary::after{content:"\2212"}
.cv-faq-item summary:hover{color:var(--pr-accent)}
.cv-faq-item summary:focus-visible{outline:3px solid var(--pr-accent);outline-offset:-3px;border-radius:14px}
.cv-faq-a{padding:0 22px 18px}
.pr-chvs .cv-faq-a p{color:#3A4560;font-size:16px;line-height:1.7}

/* ---------- 5. Picker (comparison page, /chipsets/) ---------- */
.cv-pick{
	display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:end;gap:12px;
	margin:0 0 20px;padding:14px;border:1px solid #DEE3EC;border-radius:16px;
	background:linear-gradient(150deg,#fff 0%,#f5f7fa 40%,#e9edf3 100%);
}
.cv-field{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0}
.cv-label{color:#5B6475;font-size:13px;font-weight:700}
.cv-pick select{
	width:100%;height:46px;margin:0;padding:0 36px 0 14px;border:1px solid #DEE3EC;border-radius:10px;box-shadow:none;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6475' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;
	color:#0E1726;font:inherit;font-size:15px;appearance:none;cursor:pointer;
}
.cv-pick select:focus{outline:none;border-color:#1F5EFF;box-shadow:0 0 0 3px rgba(31,94,255,.18)}
.cv-pick-vs{align-self:end;padding-bottom:13px;color:#A9B4C8;font-size:14px;font-weight:800;text-transform:uppercase}
.cv-go{
	min-height:46px;margin:0;padding:0 22px;border:0;border-radius:10px;background:#1F5EFF;color:#fff;
	font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:background-color .15s ease;
}
.cv-go:hover,.cv-go:focus{background:#1747C9;color:#fff}
.cv-go:focus-visible{outline:3px solid #1F5EFF;outline-offset:2px}

/* ---------- 6. Pair links (all three pages) ---------- */
ul.cv-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
ul.cv-pairs li{margin:0;padding:0;list-style:none}
.cv-pair{
	display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 16px;
	border:1px solid #DEE3EC;border-radius:14px;background:#fff;text-decoration:none;
	transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.cv-pair:hover{border-color:#1F5EFF;transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(14,23,38,.35)}
.cv-pair:focus-visible{outline:3px solid #1F5EFF;outline-offset:2px}
.cv-pair-names{color:#0E1726;font-size:15.5px;font-weight:800;line-height:1.35}
.cv-pair:hover .cv-pair-names{color:#1F5EFF}
.cv-vs{color:#A9B4C8;font-weight:700}
.cv-pair-meta{color:#5B6475;font-size:13px;font-variant-numeric:tabular-nums}

/* ---------- 7. Block under the /chipsets/ ranking ---------- */
.cv-hub{margin:0 0 64px;scroll-margin-top:90px}
.pr-cs .cv-hub-lead,.cv-hub-lead{max-width:700px;margin:0 0 16px;color:#5B6475;font-size:16.5px;line-height:1.6}
.cv-h3{margin:24px 0 12px;color:#0E1726;font-size:18px;font-weight:800;line-height:1.3}

/* ---------- 8. Chipset page: "Compare" link in similar chipsets ---------- */
.pr-chip .cp-sim-vs{
	position:relative;z-index:2;align-self:flex-start;margin-top:6px;color:#1F5EFF;
	font-size:13px;font-weight:700;text-decoration:none;
}
.pr-chip .cp-sim-vs::before{content:"\21C4\00a0"}
.pr-chip .cp-sim-vs:hover{color:#1747C9;text-decoration:underline}

/* ---------- 9. Tablet / phone ---------- */
@media (max-width:1023px){
	ul.cv-pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
	.cv-pick{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
	.cv-pick-vs{display:none}
	.cv-go{width:100%}
	.cv-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
	.cv-duo-vs{display:none}
	.cv-chip{padding:12px}
	.pr-chvs .cv-chip-name{font-size:16px}
	.cv-chip-meta{font-size:13px}
	.pr-chvs .cv-lead{font-size:16px}
	.cv-facts{font-size:14px}
	.cv-facts th,.cv-facts td{padding:11px 10px}
	.cv-facts thead th .cv-dot{display:block;margin:0 0 6px}
	.cv-facts tbody th{width:30%}
	.cv-facts td{width:35%}
	.cv-faq-item summary{padding:16px 18px;font-size:16px}
	.cv-faq-a{padding:0 18px 16px}
}
@media (max-width:479px){
	ul.cv-pairs{grid-template-columns:minmax(0,1fr)}
	.cv-chip-tags .cp-tag{font-size:11px;padding:1px 8px}
}
@media (prefers-reduced-motion:reduce){
	.cv-pair,.cv-faq-item{transition:none}
	.cv-pair:hover{transform:none}
}

/* ---------- 10. v1.5: Key specs on chipset pages ---------- */
.pr-chip .cs-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pr-chip .cs-spec{
	display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px;
	border:1px solid var(--pr-border);border-radius:14px;background:var(--pr-metal);
}
.pr-chip .cs-spec dt{color:var(--pr-muted);font-size:13px;font-weight:700}
.pr-chip .cs-spec dd{color:var(--pr-ink);font-size:19px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.pr-chip .cs-spec dd.cs-spec-sub{color:var(--pr-muted);font-size:13.5px;font-weight:600;line-height:1.45}
.pr-chip .cs-specs-sec .cp-sub a{color:var(--pr-accent)}
@media (max-width:767px){
	.pr-chip .cs-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
	.pr-chip .cs-spec{padding:12px}
	.pr-chip .cs-spec dd{font-size:16px}
}

/* ---------- 11. v1.5: /chipsets/ ranking — "3 nm · 2024" and the Graphics column ---------- */
.pcr-spec{color:#5B6475;font-size:12.5px;font-weight:600}
.pcr-spec::before{content:"\00b7";margin-right:8px;color:#A9B4C8}
.pcr[data-sort="gfx"] .pcr-nums div:nth-child(3) dd{font-weight:800;color:#0E1726}
.pcr--gfx .pcr-head button[data-pcr-by="gfx"]{cursor:help}